Дизайн мобильных приложений предполагает создание мобильной версии сайта с разными дополнительными опциями. Главной задачей разработчиков будет проектирование максимально удобной экосистемы, комфортной для пользователя.
UX дизайн приложений определяет популярность ПО и отношение к продукту целевой аудитории. Если юзер выполнил целевое действие (в данном случае скачивание), он уже лоялен, нацелен на взаимовыгодное сотрудничество. Найдет все в вашей программе – хорошо, остановит поиски. Но если на пути клиента возникнут ошибки, неработающие опции, человек удалит приложение и больше не вернется к нему.
Зачем нужен анализ ЦА и компаний-конкурентов
При создании UX-дизайна приложения нужно провести анализ текущей ЦА, основных конкурентов и поставить задачи, которые предстоит решить. К примеру, для женской ЦА кнопки можно делать маленькими, а для мужской – крупными. Обычно пользователи жмут на экран большим или указательным пальцем – мелочь, но она определяет удобство пользования вашей программой.
На стадии UX-разработки дизайнеру следует продумать весь путь пользователя – от скачивания до пользования функционалом, совершения целевых действий. Большинство программ – это, по сути, разветвленное дерево возможностей с широким функционалом (подписаться, обратиться в службу поддержки, прочесть текст, оплатить товар на сайте, пр.). Каждая ветка должна быть тщательно продумана еще на этапе прототипа.
Вот важные моменты в создании интерфейса приложений:
- Все основные элементы для управления должны располагаться снизу. Верхний угол слева задействуют в приложениях только для размещения кнопки «Бэк».
- Управление необязательно выполнять только кнопками. Есть еще жесты, удержание определенных элементов управления.
- Не делайте шрифты слишком маленькими или, напротив, большими. Стандартные размеры для выделений – 18-24, текста – 14-16, подсказок – 12.
- Скроллить приложение лучше всего и справа налево, и снизу вверх. Если используете скролл бокового типа, предоставьте пользователям подсказку, как и что делать.
- Логотипы дублировать сразу на всех рабочих экранах необязательно. Достаточно разместить опознавательный знак бренда на экране загрузки и иконке сервиса.
- Цвета следует использовать диверсифицировано, так, чтобы они нативно подсказывали пользователю, какие элементы кликабельные, а какие нет. Можно разграничивать цветом различные элементы.
- Подсказки делать можно и нужно.
Как спроектировать UI-дизайн приложения
Грамотный UX-дизайн приложения предполагает проектирование и интерфейса, и визуальной составляющей. Ваша задача как разработчика – привести все к единому Style Guide.
Выберите до шести типов одного шрифта – больше использовать в одной программе не рекомендовано. Цветов достаточно в оформлении четырех-пяти. Этого набора хватит для расстановки акцентов, создания продуманного, аккуратного, актуального интерфейса. Продумайте анимацию переходов между экранами – смещения, прелоадеры, исчезновения, пр. При выборе цветов нужно помнить, что цветовая палитра устройств Айфона обычно заметно ярче палитры устройств под ОС Андроид. От полутонов, так называемых грязных цветов следует отказаться.
Финальный этап разработки приложения – создание адаптивных версий. Если приложение окажется доступным только для iOS, достаточно выполнить отрисовку пары версий. Для Андроид предстоит проработать сразу 4-5 популярных разрешений.
Важные моменты
Выделим ключевые вопросы, которые обязательно следует учитывать при создании дизайна.
Почему важна мобильная навигация
UX дизайн приложений должен быть максимально наглядным, то есть позволять легко обнаруживать нужные элементы. Принцип наглядности в UX во многом относится к оформлению интерфейсу. Все возможные взаимодействия должны быть кристально ясными и понятными. Если пользователь не может что-то найти, значит, этого для них просто не существует. Популярный пример: гамбургер-меню считается элементом скрытой навигации и существенно ухудшает юзабилити. Наглядность такого интерфейса низкая, а вот цена взаимодействия высокая. Старый добрый вариант «панель вкладок» по-прежнему остается оптимальным. Он простой, видимый и понятный для пользователя. Плюс панель вкладок идеально подходит для упорядочивания иерархии данных, обеспечения доступа к набору категорий сразу же.
Идеальное UX оформление системы навигации – применять нижнюю навигационную панель (или панель вкладок). Кебаб-меню, кстати, относят к той же группе, в которую входит гамбургер-меню. Сейчас подобные решения встречаются повсюду, люди уже даже начали привыкать к подобным типам навигации, но все равно такой интерфейс снижает степень наглядности, оказывает негативное влияние на мобильный UX. Кебаб или гамбургер-меню стоит использовать только в крайних случаях. Да, примеры сейчас есть разные, но это еще не значит, что все они хорошие.
Скорость срабатывания
Для мобильных устройств скорость очень важна. Миллисекунды способны зарабатывать миллионы. В электронной мобильной коммерции задержки загрузок всего в одну секунду негативно влияют на конверсию, снижая ее примерно до 20%. Если приложение работает медленно, это отталкивает клиентов, быстро – привлекает и удерживает их.
Ускоренные мобильные страницы типа AMP по этой причине становятся все более популярными. Результаты экспериментов показывают, что только доработка данного параметра способна увеличить продажи с 5-8 до 30%. Ускоренные мобильные страницы – удобный инструмент, которым можно и нужно пользоваться. Они повышают конверсию и улучшают мобильный UX.
Пару слов об уведомлениях
Уведомления предоставляют пользователю необходимый для достижения цели опыт. Они способны повысить UX и улучшить степень вовлеченности. Но при плохом исполнении уведомления становятся раздражителем. Следите за тем, чтобы их не было слишком много. Несмотря на возможность отключения оповещений, навязчивость отталкивает.
Требования к основным элементам
Требования те же – простыми и понятными. Пользователь в идеале должен сразу узнавать рабочие элементы, а не пытаться вспомнить их. Иконки в интерфейсе – мощное и удобное средство, оно позволяет мгновенно распознать определенный символ. При отображении стандартной иконки знака предупреждения в диалоговом окне пользователь смотрит и обращает внимание. Рядовые знаки не вызывают подобного отклика, но поскольку являются типовыми, узнаются и понятны.
В UX дизайне приложений есть термин «value vs. pain» – то есть число инвестиций, которые пользователь вкладывает для понимания, куда в итоге ведет конкретная иконка. Большая часть людей не хочет изучать значения иконок, запоминать разные варианты, поскольку постоянно использует огромное множество приложений. Вы не прогадаете, если не станете изобретать велосипед, а остановитесь на типовых, банальных вариантах. В UX-дизайне иконки вообще рекомендовано помечать текстом. Простое дополнение гарантирует, что пользователь четко поймет смысл.
Финальный этап – тестирование юзабилити
Последним, но очень важным этапом UX-дизайна будет тестирование юзабилити уже готового интерфейса. Оно включает оценку прототипа по следующим параметрам:
- Результативность – время, которое пользователь затрачивает для достижения цели.
- Эффективность – достиг ли пользователь поставленных задач в принципе.
- Удовлетворенность – в данном случае пользовательским опытом, качеством сервиса.
Юзабилити относят к качественным атрибутам UX. В его состав входит широкий перечень компонентов, но важнейшими считают эффективность, обучаемость, запоминаемость, удовлетворенность и восстановление после ошибок. Юзеру должно быть приятно работать с вашим софтом, просто запоминать расположение элементов интерфейса, выполнять текущие задачи. Хорошее приложение то, которое позволяет все делать с первого раза без изучения сложных мануалов.
Самый простой вариант проведения тестовых сессий – это создание кликабельных прототипов Фигма, запись процесса пользования сервисом с получением обратной связи. Есть продвинутые версии, которые в режиме онлайн транслируют процессы взаимодействия пользователей с приложениями. После тестирования юзабилити разработку можно считать завершенной.