UX/UI-дизайн приложений и сервисов

Подробно

Дизайн мобильного приложения в Кодовой студии начинается с исследования: кто ваши пользователи, какие задачи они решают и где бросают сценарий на полпути. Потом собираем пользовательские сценарии, интерактивный прототип, визуальный стиль и дизайн-систему, по которой разработчики верстают экраны без догадок. Работаем с приложениями для iOS и Android, веб-сервисами и личными кабинетами. Готовые макеты передаем в разработку вместе с анимациями и спецификациями.

UX/UI-дизайн

UX (user experience, пользовательский опыт) отвечает за логику: какие экраны нужны, в каком порядке их проходит человек, сколько действий пользователя отделяет его от цели. UI (user interface, пользовательский интерфейс) отвечает за внешний вид: сетка, типографика, цветовая палитра, иконки, состояния кнопок. Подробнее о разнице мы писали в статье что такое UX/UI-дизайн.

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

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

Разработка UI/UX-дизайна

При создании дизайна мобильного приложения важно учитывать правила платформ. Для iOS это Human Interface Guidelines, для Android - Material Design. В них описано, где находится навигация, как выглядят системные диалоги, какого размера должны быть зоны нажатия. Пользователь привык к поведению своей операционной системы, и приложение, которое спорит с этими привычками, раздражает.

Что мы делаем на этапе разработки дизайна:

• анализируем целевую аудиторию и продукты, которыми она пользуется;
• рисуем user flow (схему шагов пользователя от входа до цели) для каждого ключевого сценария;
• собираем вайрфреймы и интерактивный прототип в Figma;
• проверяем прототип на пользователях и собираем обратную связь;
• разрабатываем визуальный стиль: шрифты, цветовую палитру, иллюстрации, иконки;
• собираем дизайн-систему: библиотеку элементов интерфейса с состояниями и правилами;
• готовим анимации переходов и откликов на нажатия.

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

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

Возьмем наш демо-проект Грядка, приложение доставки фермерских продуктов. Ключевой сценарий там - собрать корзину и оформить доставку на удобный слот. User flow показал бы, что человеку нужно видеть остаток и ферму прямо в списке товаров, а выбор слота лучше поставить до оплаты, чтобы не терять заказ на последнем шаге.

Редизайн приложения

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

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

Процесс создания сайта и приложения в UX

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

1. Бриф и интервью с заказчиком.
2. Исследование аудитории и конкурентов.
3. Пользовательские сценарии и структура.
4. Прототип и тест на пользователях.
5. Визуальный стиль и дизайн ключевых экранов.
6. Дизайн всех экранов и дизайн-система.
7. Передача в разработку и авторский надзор (дизайнер следит, чтобы верстка совпадала с макетами).

Прототип (черновая схема экранов без финального оформления) экономит деньги на этапе разработки: переставить блоки в Figma быстрее, чем переписывать код. О типах прототипов читайте в статье что такое прототип.

Приложения для UX/UI-дизайна

Основной рабочий инструмент у нас Figma: в ней рисуем макеты, собираем интерактивные прототипы и дизайн-систему, а разработчики забирают размеры, цвета и иконки прямо из файла. Для сложных анимаций подключаем ProtoPie, Lottie и Rive, для совместных воркшопов по сценариям FigJam. Тесты прототипов с пользователями проводим на созвонах или в сервисах для немодерируемых тестов, например Maze.

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

Сервис для разработки интерфейсов

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

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

Дизайн приложения: цена

Цену называем после брифа. Смотрим на количество уникальных экранов, число платформ, нужны ли исследование, тесты на пользователях, анимации и иллюстрации. Дизайн обычно занимает 15-25 процентов бюджета разработки мобильного приложения.

Сколько стоит разработка дизайна мобильного приложения?

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