5 базовых принципов продуктового дизайна

За последний год в IT-индустрии многие дизайнеры, спеша за трендами, убрали из резюме строчку «UI/UX дизайнер» и гордо заменили её на «Продуктовый дизайнер». При первом взгляде на дизайн продукта кажется, что он ничем не отличается от привычного дизайна интерфейса. На самом деле, различия между этими двумя профессиями можно понять уже из названия.

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

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

Только факты

Если вы уже несколько дней не можете закрыть задачу, не нужно сутками напролёт сидеть на dribbble, чтобы найти решение. Не нужно спрашивать мнение у коллег, смотреть на конкурентов или просто делать так, чтобы было хотя бы красиво. Теперь только цифры. Да, продуктовый дизайн по сути вертится вокруг обоснованности фактов. Если вам необходимо решить проблему, то вам нужно владеть достаточной информацией об этой проблеме.

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

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

Совет: перед решением проблемы попробуйте найти как минимум 5 причин её появления.

Вместе мы сильнее

Как известно, над продуктом трудятся не только дизайнеры. Ежедневно мы взаимодействуем с разработчиками, аналитиками, менеджерами, маркетологами, отделом продаж и ещё много с кем. Зачастую отношения внутри проектной команды задвигаются на второй план, дедлайны и обязательства важны здесь и сейчас, а атмосферу наладим как-нибудь потом, да там уже и корпоратив скоро. 

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

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

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

Сначала прототипы

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

Бывает, нам кажется, что чем быстрее будет хоть что-то в проработанном виде, тем сильнее снижаются риски невыполнения задачи. Но это не так. Очень важно после исследования проблемы уделить достаточное время на отрисовку прототипов, эскизов. Некоторые дизайнеры практикуют карандашные зарисовки будущих интерфейсов, но можно делать это и в Figma или любом другом инструменте, в котором вы привыкли работать.

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

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

Действуйте локально, мыслите глобально

Прежде чем приступить к отрисовке макетов необходимо подумать над консистентностью, то есть согласованностью и целостностью всех элементов в цифровом продукте.

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

Наиболее удачным решением является создание дизайн-системы, где уже есть готовые компоненты, закрывающие большую часть интерфейсных элементов. Так удаётся избежать неконсистентности в дизайне. Глобальность мышления – ключевой навык продуктового дизайнера. Развив этот навык, вы сможете вносить изменения в продукт так, чтобы от них не страдала целостность всей системы. 

Совет: изучите дизайн-системы крупных IT-компаний — Mail.ru Group, Google, Apple, Альфа-банка и Рамблера.

Масштабируемость – залог успеха

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

Есть несколько лайфхаков работы над продуктом, которые позволят в будущем безопасно утяжелять интерфейс без потери лёгкости и удобства:

1. Найдите аналогичные продукты, которые существуют достаточно давно на рынке. Зафиксируйте, насколько функциональность этих продуктов шире той, которую вы должны реализовать сейчас у себя. Если для вашего сервиса на данном этапе достаточно горизонтального меню сверху, в котором находится всего 5 пунктов, а у аналогичного сервиса 12 пунктов и меню уже расположено вертикально слева, то велика вероятность, что в будущем ваше решение не вместит новые разделы вашего продукта.
2. Используйте компоненты для возможности внесения быстрых изменений. В основном, это касается цветов и типографики. Бывает так, что на середине проекта вам необходимо поменять базовый кегль с 16 на 14. В таких ситуациях выручают библиотеки стилей. Сейчас их можно сделать практически в любом инструменте для дизайнеров, в том числе в Figma и Sketch.
3. Избегайте решений, которые опираются на фиксированные размеры (ширину и высоту). Всегда рассчитывайте на то, что текст может меняться и становиться как длиннее, так и короче — ваш макет должен быть к этому готов. Если вы уже понимаете, что «ещё одно слово и у меня все поедет», то однозначно стоит подумать, как сделать так, чтобы не поехало. Потому что, скорее всего, вас попросят добавить то самое ещё одно слово. И этого не нужно бояться.

Мы перечислили принципы, следуя которым вы можете существенно повысить качество своей работы как продуктового дизайнера. Главное – начать применять их в работе, и не завтра, а уже сейчас. Расскажите в комментариях, какие принципы дизайна вы используете, как они помогают вам оптимизировать рабочие процессы. А также — о каких областях дизайна вам было бы интересно почитать в нашем блоге!

Основополагающие принципы проходят красной нитью сквозь всю работу дизайнера, но чтобы стать профессионалом, помимо них необходимо усвоить большое количество знаний и навыков. На факультете дизайна Geek University мы готовим T-shaped специалистов, которые не только обладают глубокой экспертизой в дизайне, но и разбираются в смежных отраслях. Приходите учиться, ждём вас!