Дизайн в Яндексе

В результате получилось несколько десятков работ, по которым видно, что шрифт позволяет доносить самые разные сообщения, а в корпоративном стиле всегда есть место эксперименту.

Искандер Мухамадеев

У Яндекса есть фирменный шрифт — Яндекс Санс. Мы подумали, что хорошо бы обменяться опытом работы с ним, а заодно поупражняться в наборе. После короткой лекции провели практическое занятие. Задание было таким: представить насколько разнообразными бывают запросы к Алисе, какого они характера, настроения, какой громкости, а затем средствами типографики показать эти запросы.

7. Бренды. В каких автомобилях будет установлена система? Момент важный, так как каждый бренд стремится выглядеть уникально. Делать интерфейс универсальным или продумать возможность кастомизации? Тут стоит заранее договориться с командой и решить, в какую сторону идти.

8. Сроки и цена вопроса. Самый печальный обычно пункт, но и самый продуктивный по скорости решений и движения продукта вперёд. Выясняем командно хронологию развития проекта, определяем дедлайны и этапы. Открываем наработки по первым семи пунктам и начинаем создавать ТЗ и минимальные требования к запуску.

И вот, пройдя наконец все озвученные выше этапы, мы увидим практически полный набор сущностей и ограничений для будущего продукта. Пора приступать к дизайну. Любой вырисовывающийся макет теперь можно прогнать через продуктовые ограничения.

Мы говорим о системе для автомобиля, но эти этапы будут работать на старте любого продукта. Что заложишь, то и будет развиваться. После рождения концепции и с началом её проработки всё может сильно измениться, но это уже другая история.

Более подробно о создании автомобильной мультимедийной системы Яндекс.Авто — https://link.medium.com/2utPohuybY

6. Технические особенности экранов. Выясняем их. Чем больше особенностей, тем универсальнее должны быть цветовые схемы. Либо же каждому экрану потребуется своя настройка. Обсуждаем предварительно с разработкой. Если есть возможность, то лучше посмотреть проверочные изображения на всех экранах. Фиксируем выводы.

4. Связь на борту. Что, если её нет вообще или машина въехала в зону слабого сигнала? Что не нужно показывать и что нужно сообщать тогда пользователю, чтобы не вводить его в заблуждение? При проектировании стоит предусмотреть все возможные ситуации. Откладываем эту историю до этапа концепции и её проработки.

5. Зависимость от окружения. В автомобилях ездят и днём, и ночью. Днём чёрный экран отражает свет и становится неконтрастным, читать на нём текст неудобно. Глянцевый экран или матовое рассеивание плёнки, слабая изначальная яркость и контраст экрана — все вместе они делают ночной режим непригодным для использования. А дневной режим ночью сильно бьёт по глазам. Значит, нужны два состояния интерфейса.

3. Сценарии. Проводим исследование. Опрашиваем знакомых и не очень автомобилистов. Пытаемся опереться и на свой опыт, если есть. В итоге вырисовывается картина того, что водителю нужно за рулём. Сколько людей — столько и мнений, но в основном всем нужны навигация, музыка и рекомендательные сервисы. Ещё можно заметить, что чем больше опыт, тем слаженнее люди управляют авто и воспринимают поток информации, а значит, тем смелее они могут создавать свои запросы. Все наработки позже пригодятся, когда мы будем проверять работу системы.

Василий Сергеев

Что нужно, чтобы запустить новый продукт? Ранний этап у каждого продукта сугубо индивидуальный и состоит из множества шагов. Фактически на раннем этапе надо превращаться то в сурового инженера, то в пользователя, то вообще в того, кто сквозь слёзы урезает бюджет.

Представим, например, что мы разрабатываем интерфейс для водителя автомобиля. С чего начать, перед тем как плотно засесть за концепцию?

1. Эргономика. Изучаем, как водитель использует бортовой компьютер. Расстояние до экрана довольно большое — кликабельные элементы интерфейса должны быть крупными. Водитель постоянно едет, отвлекать его опасно — чем нагляднее и чем меньше кликов, тем лучше.

2. Аналоги. Что есть в мире? Ищем днями напролёт, чего нафиксировал интернет. На глаза попадается много страшных устройств и интерфейсов, вырисовываются основные конкуренты. Изучаем, пробуем и смотрим свежим взглядом на добро и зло. Результаты наработок выносим в список для обсуждения с командой.

3 секции тестового задания

Тестовые задания на вакансию дизайнера обычно выглядят как-то так: возьмите какой-то продукт и сделайте его редизайн. Но такие тестовые одновременно сложно и делать, и оценивать.

Делать их сложно потому, что для редизайна нужна статистика использования продукта, иначе это всё превращается в фантазии. А оценивать сложно из-за того, что диапазон решения задачи очень широкий. Например, можно сильно вложиться в проработку UX, но не уделить достаточно внимания UI, или наоборот. К тому же, оценка таких заданий может быть субъективной, так как каждый руководитель будет смотреть на свои аспекты.

Поэтому мы в дизайне Поиска пришли к секционным тестовым заданиям. Они состоят из 3 изолированных небольших заданий, каждое на проверку своего навыка. Состав заданий зависит от портфолио кандидата, но обычно задание состоит из частей на проверку:
1. понимания продуктовой работы;
2. уровня графики;
3. умения работать со смыслом и текстом.

Удобство такого подхода в том, что секционное тестовое удобно оценивать: его смотрят независимо несколько руководителей и выставляют свою оценку каждой секции. Например:
3 - 2 - 4
4 - 3 - 3
3 - 3 - 3

Значение оценок навыка:
1 — отсутствует, надо учиться с нуля;
2 — придётся развивать, не подходит для реальных задач;
3 — достаточный для реальных задач уровень;
4 — выше среднего;
5 — крутой специалист.

Если оценки частей сильно расходятся у разных руководителей, то это повод обсудить кандидата подробно и прийти к единому мнению о нём. Если оценки близки или совпадают — можно сформировать объективный портрет кандидата.

Например, если первое задание про понимание процессов, второе — про графику, третье — про работу со смыслом и текстом, то вот какие портреты кандидатов могут получиться:

1 - 4 - 2
Графический дизайнер. Умеет сделать красиво, но над продуктом пока ещё не работал

4 - 3 - 3
Дизайнер с опытом продуктовой работы

4 - 1 - 4
Проектировщик интерфейсов

2 - 3 - 2
Перспективный стажёр

---
Если вы однажды столкнётесь с проблемой объективной оценки и сравнения кандидатов — очень рекомендую попробовать подход с секционными тестовыми заданиями. В дизайне Поиска мы используем его больше года и он очень хорошо себя показывает.

P.S.: Помимо самих заданий, в тестовом зашита проверка того, как кандидат относится к своей работе в целом. Для этого нет отдельной секции, но отношению к выполнению каждой секции тестового обычно всё показывает. Но это — тема для отдельной статьи.

P.P.S.: Ранее я писал про домашки для дизайнеров. Оказалось, что упрощённые секции тестового задания очень хорошо подходят для регулярной прокачки навыков через домашку. Поэтому эти два подхода очень хорошо работают вместе.

Антон Шеин
Арт-директор Поиска
fb.com/antonshein

Неважно, заметил ли это кто-то. Важно, что есть способы безопасно прокачать дизайнерскую смекалку даже там, где всё зарегламентировано. Может и вам есть куда добавить пасхалочку в проекте?

Или ещё пример. Когда запускали Яндекс.Станцию, не прошли мимо книжек в интерьерах.