Продуктовый дизайнер

Здесь описан портрет продуктового дизайнера интерфейсов продуктовой команды Контура.

Каждый блок — это список знаний, практик и навыков. Дизайнер должен стремиться освоить их все. Пункты обозначенные  — это супер-скиллы, обычно они являются признаком дизайнера-звезды.

Как именно мы видим развитие продуктового дизайнера, и где проводим границы между джуном, мидлом и сеньором — описано в нашей модели оценки.

Главный приоритет работы продуктового дизайнера в Контуре — продукт, а не макеты. Если в макетах всё хорошо, а в продукте всё плохо, работа дизайнера не выполнена. Хороший продуктовый дизайнер часто заходит в сервис, смотрит, как работают старые и новые функции, следит за порядком и заводит баги.

Продуктовый дизайнер и его прототипы являются важным коммуникационным инструментом для команды. Команде должно быть комфортно общаться с дизайнером и удобно работать с его прототипами.

В продукте что-то может быть неидеальным, потому что идеальных продуктов не бывает. Но базовые функции должны быть сделаны хорошо и это зона ответственности дизайнера.

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

Дизайнер следит за тем, чтобы задача для него была сформулирована не в виде решения, а в виде проблемы и ожидаемого результата.

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

Для настоящего продуктового дизайнера не существует неинтересных задач, то есть таких, над которыми он работает спустя рукава, невнимательно и без старания.

Использует сценарный подход: за каждой кнопкой, экраном, разделом в системе дизайнер видит сценарии работы реальных пользователей. Вопрос «Какой сценарий?» должен предшествовать любым изменениям в продукте.

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

Прежде чем что-то добавлять в продукт, дизайнер думает, можно ли проверить гипотезу, ничего не разрабатывая.

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

Правильный процесс повышает шансы получить качественный результат. Не каждая задача требует прохождения всех этапов.

1. Обсудить задачу с командой:
• Установить всех «заказчиков».
• Понять критерии успешного решения задачи, какими метриками их можно установить.
2. Сделать бумажные наброски, обсудить их с командой.
3. Создать концептуальный прототип в Figma или Sketch, обсудить с командой и техподдержкой.
4. Совместно с юзабилистом подготовить прототип к юзабилити-тестированию: Figma или Sketch + Invision.
5. Провести юзабилити-тестирование, обсудить результаты с командой. Исправить недочеты. При необходимости провести тестирование еще раз.
6. Подготовить детализированный прототип с информацией для верстальщика (Figma, Measure или Marketch, Invision).
7. Презентовать прототип разработчикам: проговорить голосом все основные моменты, пройтись по всем экранам.
8. Поддерживать прототип во время разработки:
• Отвечать на поступающие вопросы.
• Если в процессе разработки решение поменялось — незамедлительно вносить правки в прототип.
9. Протестировать до выхода: последовательно прокликать все основные сценарии, если есть форма: заполнить форму, проверить валидацию, написать баги, проверить их исправления. Если в задаче есть печатные формы — напечатать их.
10. Добавить метрики.
11. Проверить задачу еще раз после релиза.
12. Проанализировать статистику использования по метрикам, отзывам пользователей и техподдержки.
13. Провести ретроспективу.

Детализация прототипа должна соответствовать текущей степени понимания задачи:

• высокая степень неопределенности, только начали думать над большой непонятной штукой — стикеры для записи идей и приоритизации;
• если поняли что делать и надо представить это в виде интерфейса — набросок на бумаге/доске;
• если интерфейсное решение есть и можно делать следующий шаг — прототип в Figma или Sketch;
• провели юзабилити-тестирование — можно делать финальный прототип, добавлять дизайн.

Финальный прототип содержит:

• окончательный графический дизайн для разрешения, с которым работает большая часть пользователей, как правило это 1280;
• финальные интерфейсные тексты и рыбу, максимально приближенную к реальному контенту; не должно быть:
• мата, неприличных названий, пошлых шуток и пр.;
• названий реальных организаций, их данных;
• задублированных строк в списках и таблицах;
• текстов вроде «Заголовок» и «Длинное название компании».
• все состояния страниц и контролов:
• состояние «без данных», которое увидит пользователь войдя на страницу в первый раз;
• прелоадеры и загрузчики;
• дизайн интерактивного элемента при наведении и в момент нажатия;
• кликабельные области элементов, если они больше видимых;
• работа с помощью клавиатуры.
• логику работы валидации, сообщения об ошибках;
• анонс новых возможностей в сервисе, чтобы пользователи о них узнали;
• комментарии для верстальщика и разработчиков:
• как тянется дизайн;
• описание анимации, а лучше специальный прототип;
• Marketch или Measure.

Прочитал и осознал основные книги:

• Алан Купер «Психбольница в руках пациентов»
• Влад Головач «Дизайн пользовательского интерфейса»
• Дональд Норман «Дизайн привычных вещей»
• Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»
• Джейсон Фрайд, Дэвид Хайнемайер Хенссон «Rework. Бизнес без предрассудков»
• Эрик Рис «Бизнес с нуля. Метод Lean Startup для быстрого тестирования идей и выбора бизнес-модели»
• Максим Ильяхов, Людмила Сарычева «Пиши, сокращай. Как создавать сильный текст»
• Артем Горбунов «Типографика и верстка»
• Илья Бирман «Пользовательский интерфейс»
• Роберт Брингхерст «Основы стиля в типографике»

Знает и понимает:

• Ключевые слова: юзабилити, UI, UX, когнитивное сопротивление, когнитивный диссонанс, аффорданс, ментальная модель, эвристики, эмпатия.
• Свойства хорошего интерфейса:
• Незаметность
• Информативность
• Простота ментальной модели
• Высокая скорость работы или такое ее восприятие
• Мгновенная обратная связь
• Легкость обучения
• Предостережение от ошибок
• Формирование привычек
• Принцип «Убрать всё лишнее»
• Принцип максимизации полезного действия
• Принцип «Интерфейс — зло»: 1 2
• Принцип «Context is more important than consistency»
• Понятие идеального объекта из ТРИЗа
• Понятие «режима» в интерфейсе (см. Раскина)
• Принцип «Бритвы Оккама»
• Принцип прямого манипулирования
• Закон Фиттса
• Закон Хика и «кошелек Миллера»

Весь текст в интерфейсе — зона ответственности продуктового дизайнера. Даже если какой-то текст написал другой человек, дизайнер должен контролировать качество.

Основные интерфейсные тексты дизайнер пишет сам: названия кнопок, сообщения об ошибках, всплывающие подсказки и контекстную справку.

Интерфейсные тексты емкие и понятные, соответствуют инфостилю и нашему гайдлайну по текстам.

Имеет чувство прекрасного, отличает плохое от хорошего.

В макетах легко считывается иерархия объектов: важное заметнее неважного, элементы сгруппированы, аккуратно выровнены, отступы и размеры объектов осмысленные, подчиняются правилам.

Знает следующие понятия:

• оптический центр и гравитация
• теория близости
• фон и контур
• негативное пространство
• динамика, равновесие, взаимодействие объектов, соотношения масс
• правило внешнего и внутреннего
• визуальные маршруты
• модульные сетки

Знает устройство цветовой модели RGB.

Понимает что такое контрастность, насыщенность.

Знает особенности цветопередачи плохих мониторов.

Может подобрать цветовые сочетания для нового продукта.

Делает аккуратную типографику в интерфейсах.

Знает основы типографской верстки: соотношение длины строки и интерлиньяжа, перенос предлогов, правильные тире и кавычки, верстка таблиц, числовых значений, списков, телефонных номеров, адресов.

Знает типографскую терминологию:

• основные понятия: базовая линия, выносные элементы, засечка, графема, глиф, буквица, капитель, кегль
• набор: апрош, шпация, интерлиньяж, кернинг, лигатура, литера, трекинг, разрядка, флаг, выключка, висячая пунктуация
• шрифты: гротеск, моноширинный, пропорциональный, акцидентный, брусковый, минускульный, маюскульный

Может с нуля разработать шрифтовые стили для продукта: набор заголовков, основной текст, врезки и т.д.

Может подобрать и встроить иллюстрацию.

Может нарисовать набор иконок.

Может разработать дизайн сервиса с нуля.

Продуктовый дизайнер обладает эмпатией к своим пользователям, понимает важность их работы, понимает сложности профессии и ценности, уважительно к ним относится. Доносит это знание до всей команды.

Только плохой дизайнер может считать своих пользователей тупыми, такое оценочное суждение говорит о профнепригодности.

Знает портрет своего пользователя.

Знает какими браузерами пользуются клиенты, какое у их мониторов разрешение экрана, скорость интернета, как выглядит рабочее место. Учитывает это при проектировании.

Понимает основы профессии пользователя: термины, задачи, законодательство.

Регулярно присутствует на юзабилити-тестированиях, использует другие возможности пообщаться с пользователями вживую.

Регулярно слушает записи разговоров техподдержки.

Читает и анализирует обратную связь от пользователей: получает письма, смотрит UserEcho, общается с техподдержкой. В обратной связи обращает внимание не только на интерфейс, но и на запросы новой функциональности и общее мнение о продукте. Умеет понимать, что из запрашиваемого важно, а что нет.

Понимает устройство и ограничения веб-сервисов:

• Различия и область применения графических форматов: JPEG PNG GIF SVG.
• Масштабирование веб-страниц и шрифтов.
• Ограничения старых браузеров.
• Как работает URL.
• Клиент-серверная архитектура и типы передачи данных в вебе:
• Синхронная передача данных с перезагрузкой страниц (GET/POST).
• Асинхронная передача данных.
• Одностраничные приложения.

Знает основы верстки HTML/CSS.

Может открыть веб-инспектор и что-то быстро поменять-прикинуть.

Просит фиксировать ключевые события, чтобы оценить использование функциональности, посчитать конверсию.

Умеет пользоваться Яндекс.Метрикой и/или Гугл.Аналитикой и/или внутренними системами и делать на основании них выводы:

• Браузер, разрешение экрана, операционная система.
• Посмотреть статистику использования.
• Пути переходов по сайту и системе.
• Тепловые карты.
• Записи веб-визора.

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

Правильно оценивает задачи, соблюдает сроки, если не успевает — предупреждает заранее.

Рабочие файлы на компьютере упорядочены, лежат в одном месте, разделены по задачам. Даже другому участнику команды легко найти нужный исходник за прошлый год.

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

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

Не ленится в ходе обсуждения рисовать интерфейсы на бумаге или доске.

Прототипы на бумаге или доске выглядят аккуратно и уверенно: по ним видно, что их рисовал дизайнер.

Знает Figma или Sketch, и умеет быстро в них работать: использует символы, шорткаты и плагины.

Знает Invision, умеет быстро собирать интерактивный прототип для презентации или юзабилити-тестирования.

Умеет делать прототипы анимации интерфейсов.

Знает Photoshop, Illustrator, может подготовить спрайт для верстальщика или подправить макет за отсутствующим дизайнером.

Быстро осваивает новые инструменты. Выбирает подходящий инструмент для задачи, а не подгоняет решение под возможности одного освоенного инструмента.

Читает книги, статьи, блоги, в курсе дизайнерских трендов, следит за развитием отрасли.

Изучает интерфейсы новых программ и сайтов, подмечает интересные решения. Расширяет свой визуальный опыт.

Окружает себя хорошим дизайном: гаджеты, книги и журналы, предметы интерьера.

Стремится перенять профессиональный опыт и знания у «старших» коллег. Распространяет свои знания среди команды и других дизайнеров.

Имеет широкий кругозор, интересуется современными технологиями, историей искусства и культуры.

Наблюдает за тем, как люди работают с интерфейсами. Накапливает и структурирует эти знания.

Стремится заниматься задачами, которые его развивают.

Обучает стажеров и начинающих дизайнеров.

Имеет опыт проектирования продукта с нуля: участвовал в исследованиях пользователей, спроектировал основные экраны, организовал процессы в команде.

Участвует в командных встречах: ежедневные скрамы, презентации, ретроспективы.

Не участвует в бесполезных встречах. Если понимает, что на встрече он не нужен, встает и уходит.

Хороший продуктовый дизайнер делает так, что проектирует и генерирует интерфейсные идеи вся команда. Любой участник команды понимает: если он подойдет к дизайнеру со своей идеей, его услышат и адекватно отреагируют. Плохой дизайнер узурпирует работу над интерфейсом, обижается, когда кто-то кроме него «лезет в дизайн».

Если в команде несколько продуктовых дизайнеров — все в курсе задач друг друга: если кто-то заболел, подхватывают задачи коллег, делают интерфейсы в одном стиле. При этом команда всегда знает по какому прототипу к кому обращаться.

Дизайнер правильно воспринимает критику в адрес своей работы: не бросается сразу всё переделывать, но с правильными замечаниями соглашается.

Умеет обосновывать свои решения, когда нужно настаивает на них.

Для обсуждения дизайна предпочитает личное общение, а не переписку в почте или чате.

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

Команда доверяет своему дизайнеру, ей нравится интерфейс ее продукта.

Продуктовый дизайнер чувствует ответственность за продукт. Знает бизнес-цели продукта и дизайном помогает их достигать.

Понимает, какие изменения в продукте самые актуальные для пользователей, как можно улучшить впечатление пользователей от продукта.

Может предложить не только задачи, связанные с мелкими интерфейсными недоработками, но и новые сценарии работы.

Принимает участие в формировании планов по развитию продукта.

Работы, сделанные в Контуре, можно выкладывать в свое личное портфолио. Нужно указать, что именно сделал владелец портфолио в этом дизайне.

В личное время дизайнер может делать коммерческие неконтуровские задачи. В определенной степени это даже приветствуется, так как способствует развитию.

Сторонние задачи не должны мешать выполнять работу в Контуре качественно и в срок.

Нельзя работать на конкурентов или участвовать в проектах, наносящих вред Контуру.

Нельзя в сторонних проектах использовать фирменный стиль и элементы графического дизайна Контура.

Нельзя выполнять сторонние проекты, находясь в офисе Контура.