Дизайн мобильных приложений: основные этапы, особенности и нюансы
Основная суть дизайна мобильных приложений состоит в создании мобильных версий веб-сайтов, обладающих дополнительными возможностями. Главной задачей разработчика при этом является создание комфортной для пользователя экосистемы с совершенным и эффективным UX.
При скачивании какого-либо приложения пользователь фактически демонстрирует вам свою лояльность — ведь целевое действие им уже выполнено. В дальнейшем он рассчитывает пользоваться вашим сервисом регулярно — конечно, если этот программный продукт позволит ему решить свою проблему.
Однако именно здесь разработчика подстерегает серьезная опасность. Если какой-либо нужный клиенту раздел окажется неработающим или хотя бы неудобным — человек скорее всего просто удалит приложение, чтобы больше никогда к нему не вернуться.
Описанная особенность является характерным свойством UX-дизайна приложений и веб-сайтов. Обычно пользователь оценивает степень удобства сразу нескольких разных продуктов. Даже если он покинул вашу страницу в ходе первого визита, то в дальнейшем может вернуться и воспользоваться предлагаемым сервисом. А вот повторное скачивание приложений скорее стоит рассматривать в качестве исключений.
Анализ аудитории и разработка UX-дизайна
Перед переходом к работе над прототипом дизайнеру нужно произвести анализ целевой аудитории, конкурентных ресурсов и стоящих перед приложением задач. Например, для мужской ЦА размер кнопок и других элементов взаимодействия должен быть больше. Для женщин эти управляющие элементы можно сделать несколько меньше.
Это объясняется очень просто: большинство людей нажимает на дисплей большими пальцами, которые у мужчин в среднем шире. Поэтому увеличение размера кнопок повысит комфортность использования сервиса для мужской аудитории.
Именно на стадии UX-разработки дизайнеру нужно хорошо продумать весь путь пользователя — начиная от самых начальных экранов до выполнения предусмотренных приложением целевых действий. Поскольку таковых действий обычно несколько, типичный User Journey выглядит как разветвленное дерево возможностей с различными функциями.
Функционал может включать подписку на сервис, обращение в техподдержку, оплату товара и другие действия. Уже на этапе прототипа каждая из таких ветвей должна быть тщательно продумана.
При проектировании интерфейса необходимо учитывать ряд важных деталей, знать о которых нужно не только дизайнеру, но и заказчику:
- Основные управляющие элементы должны располагаться внизу экрана. Верхний левый угол используется минимально, поскольку к нему сложно тянуться. Его можно задействовать для ограниченных целей — например, для размещения кнопки «Назад».
- Помимо кнопок, управление может осуществляться посредством смахивания или удерживания определенных элементов пользователем.
- Желательно предоставлять возможность скроллинга приложений и вертикально, и горизонтально. При использовании бокового скролла нужно давать пользователям подсказку.
- Не следует дублировать логотип на большинстве экранов приложения, вполне достаточно разместить лого бренда на экране загрузки и иконке самого сервиса.
- Не увлекайтесь мелкими шрифтами. Для основного текста целесообразно использовать шрифты 14–16 px, для заголовков — 18–24 px, для подсказок — 12–14 px (лучше взять более светлый тон). Для визуальных акцентов удобно также задействовать различную толщину шрифтов.
- Используйте дифференциацию цветов, которая нативно подскажет пользователю о кликабельности отдельных элементов. Посредством цветов можно также разграничить элементы, различные по смыслу.
- Используйте подсказки. Добавьте tooltip, если у вас задействованы нестандартные элементы управления либо существует вероятность неоднократного нажатия на некликабельные элементы.
UI-дизайн и адаптивные версии
После окончания проектирования интерфейса следует перейти к визуальной составляющей. На этом этапе необходимо «вычистить» приложение. Основной задачей на данной стадии является приведение дизайна приложения к общему Style Guide.
Желательно использовать во всем приложении не больше 5–6 вариантов одного шрифта (различных размеров, толщины, тонов) и 4–5 цветов. Такого набора вполне достаточно, чтобы создать аккуратный интерфейс с правильно расставленными акцентами.
Следует также продумать анимацию переходов между экранами. Можно задействовать смещение, исчезновение, прелоадер. При выборе цветов необходимо учесть различия в цветовых палитрах Iphone и Android. Лучше сразу отказаться от промежуточных и «грязных» оттенков.
На завершающем этапе разрабатываются адаптивные версии. В случае разработки приложений только для iOS дизайнеру потребуется отрисовать лишь две адаптивные версии — под Iphone 6 и Iphone X. Сложнее задача в случае разработки под Android. В этом случае потребуется создать версии под 4–5 самых популярных для конкретной ЦА разрешений.
Тестирование юзабилити
На последнем этапе UX-дизайна проводится тестирование юзабилити разработанного интерфейса. В ходе тестирования прототип оценивается по нескольким параметрам, включая:
- эффективность достижения клиентом своих задач;
- результативность — обусловлена временем, необходимым для достижения цели;
- степень удовлетворения качеством сервиса.
Проще всего для тестирования создать кликабельные прототипы в Figma. После этого в ходе тестовых сессий записывается весь процесс использования сервиса. При этом для оценки параметров используется обратная связь.
Существуют более эффективные сервисы, способные транслировать процессы взаимодействия с приложением в режиме реального времени. Можно назвать такие продукты, как Userlytics, TryMyUI или UserTesting.
После успешного тестирования мобильного приложения задача дизайнера считается выполненной.
