Продуктовый дизайн, UX/UI
Сценарии, прототипы и интерфейсы для инструментов, в которых работают каждый день: дашбордов, порталов, кабинетов и админок.
02 04 service 2 of 4 in Веб-дизайн
Что входит
- Исследование того, как люди на самом деле пользуются продуктом, а не как вы предполагаете
- Пользовательские сценарии, информационная архитектура, интерактивные прототипы
- Дизайн интерфейсов для дашбордов, порталов, инструментов и админок
- Сложные данные, сделанные читаемыми: таблицы, фильтры, формы, которые дозаполняют до конца
- Онбординг и пустые состояния — как полноценные части продукта, а не остаток
- Решения задокументированы, чтобы следующий человек понимал почему
Кому подходит
- Команды, чей продукт работает, но никто не может разобраться, как им пользоваться
- SaaS и сервисы, теряющие пользователей где-то между регистрацией и пользой
- Основатели, чей интерфейс рос функция за функцией и теперь спорит сам с собой
Коротко
Продуктовый UX/UI — это дизайн инструментов, в которых работают каждый день: дашбордов, порталов, личных кабинетов, админок и SaaS. Мы начинаем с того, как люди на самом деле пользуются продуктом, а не как предполагается, затем строим сценарии, информационную архитектуру и интерактивные прототипы и только потом рисуем интерфейс. Сложные данные становятся читаемыми, формы заполняют до конца, онбординг и пустые состояния — полноценные части продукта, а каждое решение задокументировано. Цена считается по часам и фиксируется до старта.
UX и UI: в чём разница
Их часто пишут через косую черту, но они отвечают на разные вопросы. Продукту нужны оба.
| Критерий | UX | UI |
|---|---|---|
| Вопрос | как человек дойдёт до цели? | как выглядит интерфейс? |
| С чем работает | сценарии, структура, шаги, логика | компоненты, шрифты, цвет, состояния |
| Результат | прототип, по которому можно пройти | готовые экраны и библиотека компонентов |
| Если его нет | красивый продукт, в котором невозможно разобраться | логичный продукт, который выглядит недоделанным |
От исследования до интерфейса
Интерфейс — последний шаг. Перед ним — понимание того, что люди делают на самом деле.
-
Исследование
Разговоры с пользователями, аналитика и наблюдение за реальными сессиями: где застревают и что обходят.
-
Сценарии
Ключевые задачи по шагам: чего хочет человек и как дойти до этого за минимум действий.
-
Информационная архитектура
Разделы, навигация и названия, которые совпадают с тем, как думают пользователи, а не как устроена база.
-
Интерактивный прототип
Кликабельная модель, которую проверяют на живых людях до начала дорогой части.
-
Интерфейс
Экраны, компоненты и состояния — в коде, поэтому работают ровно так, как нарисованы.
-
Решения задокументированы
Почему сделано именно так — чтобы следующий человек не отменил решение, не зная причины.
Сложные данные — понятными
Рабочие инструменты живут на таблицах, фильтрах и формах. Здесь пользователи проводят больше всего часов — и теряют их.
-
01
Таблицы
Колонки по важности, выровненные цифры, сортировка, закреплённые заголовки и версия для телефона.
-
02
Фильтры и поиск
Фильтры, которыми пользуются на самом деле, — первыми; результат виден сразу.
-
03
Формы, которые дозаполняют
Только нужные поля, понятные ошибки рядом с полем, сохранённый черновик.
-
04
Дашборды
Ответы на вопросы, а не стена графиков: что изменилось и что требует внимания.
-
05
Роли
Каждая роль видит свои задачи, а не всю систему сразу.
-
06
Массовые действия
То, что делают сто раз в день, делается одним действием — с возможностью отменить.
Онбординг и пустые состояния: где теряют пользователей
Между регистрацией и первой пользой большинство SaaS теряет людей. Эти экраны проектируются так же полноценно, как главные.
-
01
Первая польза быстро
Человек видит результат раньше, чем устанет от настроек.
-
02
Пустой экран, который помогает
Не «нет данных», а что сделать, чтобы данные появились, — и кнопка.
-
03
Примеры и шаблоны
Демо-проект или шаблон, с которого можно начать, вместо пустого листа.
-
04
Подсказки на месте
Короткие подсказки рядом с действием, а не тур из десяти шагов, который никто не досматривает.
Частые ошибки в интерфейсах продуктов
-
Функция за функцией
Интерфейс, который рос без плана, начинает спорить сам с собой: одно действие в трёх местах.
-
База вместо задач
Экраны повторяют таблицы базы данных, а не то, что человек хочет сделать.
-
Проектировать без пользователей
Предположения в переговорной дешевле исследования только до запуска.
-
Вау-эффект для рабочего инструмента
То, что впечатляет на демо, утомляет человека, который работает в этом восемь часов в день.
-
Непонятные ошибки
«Что-то пошло не так» вместо того, что случилось и что делать теперь.
Вопросы о продуктовом UX/UI
Сколько стоит дизайн продукта?
Цена считается по часам: зависит от числа сценариев, ролей и экранов. Сумма фиксируется до старта, оценка — бесплатно.
Нужен ли вам доступ к нашим пользователям?
Очень помогает: несколько разговоров и доступ к аналитике дают больше любых предположений. Если пользователей пока нет — работаем с целевой аудиторией.
Можете улучшить UX существующего продукта?
Да: исследование, сценарии, прототип и новые экраны. Чужой код мы не правим — передаём интерфейс вашей команде компонентами и правилами или собираем новую версию сами.
Как понять, что новый интерфейс лучше?
По цифрам, согласованным на старте: доля тех, кто проходит ключевой сценарий, время на него, число обращений в поддержку.
Делаете ли вы дизайн админок?
Да — админка такой же продукт, только для ваших сотрудников. Их часы тоже стоят денег.
Форма
Обсудить
интерфейс продукта
Расскажите, что делает продукт, кто в нём работает и где люди застревают, — предложим, с чего начать, и оценим работу. Консультация бесплатная.