Сборник рецептов от директора дизайн-лаборатории Goodt Федора Короля
Основа нашей продуктовой философии – клиентоцентричность. Мы создаем продукты для людей, а значит, интерфейсы должны быть понятны и удобны. Поэтому в нашей компании есть целая дизайн-лаборатория, которой руководит Федор Король. Мы подробно расспросили его о специфике дизайна b2b-продуктов и узнали, может ли дизайн в b2b быть некрасивым и как делают интерфейсы в Goodt.
Продуктовый дизайнер всегда работает в связке с продуктовой командой. Эти ребята – наш главный поставщик знаний о пользователях: их привычках, ожиданиях и ритуалах. И именно эти знания лягут в основу проекта.
Миф о том, что дизайн в b2b-продуктах вторичен, – это действительно миф. Во-первых, интерфейсы напрямую влияют на эффективность работы пользователей с продуктом. А во-вторых, пользователи привыкли к определенной визуальной культуре b2c-продуктов. И мы не можем делать вид, что открывая систему управления рабочим временем сотрудником, пользователь автоматически открывает портал в 2010-й и ему там окей.
У любого интерфейса в b2b-продуктах есть две задачи. Первая — не мешать пользователю работать, вторая — помогать ему. Как минимум интерфейс должен выполнять первую задачу, как максимум — еще и вторую.
Правило form follows function – это базовое правило в продуктовом дизайне. Дизайнер создает утилитарный инструмент, который, безусловно, может быть эстетичным, но эта эстетика обслуживает функциональность. Если в b2c-дизайне эстетика может быть магнитом для пользователей, даже если она усложнит процесс взаимодействия с продуктом, то в b2b-продукте вы вызовете у пользователя раздражение, если добавите невероятно красивый, но очевидно бесполезный элемент. Поэтому лавируем и держим баланс.
Дизайн в b2b-продуктах – это во многом про структурирование хаоса. В большинстве случаев вам нужно упаковать в интерфейс множество функций и большое количество информации, учитывая при этом разные роли пользователей. С точки зрения дизайна этот массив может выглядеть как тотальный рандом, поэтому дизайнеру нужно настроить “продуктовую” оптику, и тогда рандом превращается во вполне понятную систему пользовательских ритуалов.
В b2b-дизайне, как и в любом другом дизайне, впрочем, нет мелочей и случайностей. Не может быть случайных расстояний между элементами, случайных линий, случайного размера шрифта, случайного цвета или случайных взаимодействий между объектами. Все должно быть подчинено общей логике и иерархии смысла. Другими словами, нажимая на кнопку, пользователь должен понимать, что случится дальше.
Работа над дизайном b2b-продукта больше, чем просто работа над визуализацией. Иногда процесс, упакованный тобой в цифровой продукт, оказывается лучше и понятнее того, что было в первоначальном виде. Потому что в процессе работы над интерфейсом дизайнеру удалось переосмыслить и оптимизировать бизнес-процесс.
Знаете, как я понимаю, что я молодец? Очень просто. Это когда пользователь зашел в интерфейс, созданный нашей командой, и понял, как с ним работать и чего от него ждать.
Как создают дизайн в Goodt: 6 этапов
Этап 0. Подготовительный. Роль дизайнера на этом этапе не главная, но его участие очень желательно. Основная работа ложится на системных и бизнес-аналитиков, методологов. Происходит сбор данных, выясняется, как устроены процессы, которые предстоит оцифровать в ИТ-продукте. В результате появляется документ, в котором заказчик с разработчиком договариваются об основных требованиях.
Этап 1. Постановка дизайна. Постановка дизайна и разработки идут рука об руку. Это залог дальнейшего успеха продукта. Дизайнер, бизнес-аналитик, продакт-оунер и разработчики обсуждают концепцию будущего продукта. Обычно все начинается с формальных требований заказчика. Они могут быть довольно далеки от реальности, если их готовили исходя из должностных обязанностей или других официальных документов. Но по факту, дизайн часто идет от сценариев и персон, которые будут пользоваться продуктом.
Поэтому обычно на этом этапе продуктовая команда оформляет требования заново. На выходе может получиться текстовый документ или флоу-чарт с экранами, но чаще всего это нечто среднее.
Этап 2. Прототипирование. Дизайнер берет артефакты, которые родились на шаг раньше, и сразу делает по ним вайрфреймы. Это скелет продукта или его отдельных функций. Главный смысл вайрфреймов в том, чтобы быстро и с минимальными затратами представить образ будущего продукта. В прототипе набор данных, функций и ролей максимально похож на тот, что будет в готовом ПО.
Прототип можно сразу передать в тестирование и запустить анализ метрик. Ценность вайрфреймов в том, что изменения можно вносить максимально быстро, буквально за пару часов. Если прототип согласован с заказчиком и функционал утвержден, можно начинать разработку по вайрфреймам. С точки зрения бэкэнда не важно, есть макет или нет, а дизайн тем временем выходит на стадию макетирования.
Этап 3. Макетирование. Если у заказчиков есть дизайн-система и UI-кит, то финишные макеты готовятся быстро: элементы из кита “натягиваются” на прототип. Если же дизайн-процессы в компании не систематизированы, то работа строится наоборот. Мы продумываем функционал и, набрав некоторую критическую массу макетов, декомпозируем их до дизайн-системы, которая ускорит работу на следующих итерациях.
В зависимости от заказчика процесс согласования макета может быть сложнее или проще. Не все готовы согласовывать прототипы, поэтому иногда приходится откладывать согласование до стадии макета. Цена ошибки тогда возрастает в разы. Вносить изменения в уже готовый дизайн-макет долго: вместо пары часов на исправление может уйти пара недель.
Этап 4. Передача заказчику. Макет верифицируется с заказчиком и с разработкой. Заказчик говорит: “Да, это то, что мы хотели”. А разработка подтверждает, что проект можно реализовать.
Этап 5. Обратная связь. Когда мы сделали какую-то версию продукта и запустили его в эксплуатацию, к нам возвращаются пользователи с обратной связью. На ее основании мы вносим в продукт изменения и развиваем функционал.
Полезные ссылки
https://goodt.me/ - официальный сайт компании Goodt
https://t.me/goodt_official - читайте нас в Телеграм