Дизайн мобильных приложений: полный гайд по UX/UI
Дизайн мобильных приложений — это по сути создание мобильной версии сайта с дополнительными возможностями. При этом главная задача разработчиков заключается в создании удобной экосистемы с совершенным UX.
Скачивая какое-либо приложение, юзер по умолчанию лоялен: он уже совершил целевое действие, и если он сможет решить свою проблему с помощью вашего сервиса — то будет пользоваться им на регулярной основе. Однако если хотя бы один раздел на пути клиента не работает или неудобен — человек просто удалит ваше приложение – и не вернется к нему никогда.
В этом заключается принципиальное отличие UX-дизайна сайтов и приложений: как правило, пользователь оценивает удобство нескольких веб-продуктов, и даже если при первом визите человек не совершил целевое действие, всегда есть вероятность, что спустя некоторое время он вернется на ваш сайт. При этом повторное скачивание приложений — это скорее исключение, чем распространенная практика.
Анализ аудитории и UX-дизайн приложения
Перед тем, как переходить к прототипу, дизайнер должен провести анализ конкурентов, целевой аудитории и задач, которые стоят перед приложением. Например, если ЦА — женщины, то кнопки и другие элементы взаимодействия можно делать меньше, если мужчины — крупнее. Большинство пользователей нажимают на экран большим пальцем, так что такая незначительная деталь поможет мужской аудитории комфортнее взаимодействовать с сервисом.
На этапе UX-разработки дизайнер должен продумать весь путь пользователя от начальных экранов знакомства — и до выполнения целевых действий, которых в приложении может быть несколько. Как правило, User Journey представляет собой ветвистое древо возможностей с разным функционалом: подпиской на приложение, обращением в службу поддержки, чтением текста, оплатой товара и так далее. И каждая “ветвь” должна быть хорошо продумана уже на этапе прототипа.
В проектировании интерфейса есть несколько важных деталей, о которых дизайнер и заказчик должны знать:
- основные элементы управления приложением должны быть внизу; верхний левый угол в App дизайне задействуется минимально и только для определенных целей, например, кнопки “Назад”, так как к ней сложно тянуться;
- управление необязательно выполняется только с помощью кнопок; в приложении пользователь может смахивать или удерживать определенные элементы для управления;
- приложения можно скроллить как снизу вверх, так и справа налево; если вы используете боковой скролл, то следует дать пользователю подсказку;
- логотип не стоит дублировать на всех экранах приложения; достаточно того, что ваш бренд будет на иконке сервиса и на экране загрузки;
- шрифты не должны быть необоснованно маленькими; для заголовков в веб-студии IGNI мы, как правило, используем шрифт 18 – 24 px, для основного текста — 14 – 16 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.
После этого миссия дизайнера в создании мобильных приложений считается выполненной.
Материал подготовлен арт-директором веб-студии IGNI Дмитрием Мурашкиным.
Такое предоставление информации это полный пи**ец и надругательство над здравым смыслом. Как это расшифровывать? Что означает частично заполненная пробирка фигмы и что означает чуть менее заполненная пробирка скетч? Насколько между ними разница? Как ее понять и посчитать? Как формируется эта пробирка и как считается каждая риска которой эта пробирка заполняется? Если баллами, цифрами или оценками, то может уйти от этой дебильной непонятной графики и написать оценку или баллы?
Есть человеческие понятные значения «хорошо», «плохо», «отлично» и подобные слова. Можно балльную систему, например результат 70 из 100, где будет понятно из чего сложился каждый балл и где можно его улучшить. К какому х*ю эти тупые безликие пробирки где все цветными полосочками заполняется я не понимаю.
Как эту картинку адекватно прочесть? Какие из нее выводы можно сделать? Что типа я вот на именно эту пустоту незаполненную недотягиваю до какой то оценки или что?
Есть дизайн, а есть здравый смысл. Таких дизайнеров как вы надо сначала учить работать с информаций, базами данных и выводом/предоставлением инфы. А это все дизайны месячных выпускников курсов по дизайну для беханса слепленные на коленке. Красиво нарисовано и никакого смысла. Сидят учат как UX делать и не знают про зоны безопасности в iOS. Пи**ец.
Лол, правда?
Тогда это объясняет многие проблемы с дизайном у приложений.
Например, какие?
Кривой UX не учитывающий особенности платформы. Даже в вашем примере, этот гамбургер в правом углу противоречит привычным паттернам взаимодействия с iOS, да и вообще эргономике. Попробуйте воспользоваться этим меню держа телефон в одной руке. И такого много, от основной навигации, до анимации переходов между состояниями. Пренебрежение правилами типографики, игнорирование accessibility standards. Хотя бы это
Большинство людей правши и используют большой палец для навигации на смартфонах. Не вижу преград располагать бургер в правом верхнем углу. Почему это кривой UX?)
Интересно взглянуть на ваше портфолио))
Вот именно. И в верхний правый угол каждый раз тянуться неудобно (особенно на современных смартфонах с большим экраном). Даже в Андройде перенесли основную навигацию в нижний таб бар.
Интересно взглянуть на ваше портфолио))А что множество исследований и гайдлайны iOS и Android без моего портфолио уже неубедительны?
Комментарий недоступен
Вообще сама концепция бургера уже давно себя изжила. Т.к. вы трудитесь в данной сфере, то уверен, что исследования по этому поводу вы читали, посему пруфы искать не буду.
Правый и верхний угол моб устройства попадают в красную зону на устройствах с диагональю выше 5 дюймов (может и больше, точно не помню). Поэтому размещение в углах какого-либо функционала само по себе неоправданно с точки зрения юзабилити.
Ну вот вам скрин приложения VC с закладкой и «поделиться» в верхнем правом углу. Это вполне удобно. И где по-вашему должно быть меню?
Вы сами можете видеть где находится меню на вашем скриншоте (внизу, где и другие часто используемые функции)
У вас как раз такие. По крайней мере меньше, чем это принято по стандартам iOS.
Как можно было дойти до такой панели навигации?
Статья больше вредная, чем полезная. Много ошибок
Ребята, вы iPhone X и т.п. в глаза видели? в руках держали?
Было пару раз, а в чем проблема?
Я думаю он об этом
https://medium.com/rosberryapps/ios-safe-area-ca10e919526f
а где комментарии к тому как правильно работать с гайдами iOS и Android? Почему используем правило 8-ми пикселей?
До этого места они еще не дочитали учебник
зачем?
Расскажите, пожалуйста, подробнее о разработке UX. Что получаем на выходе, как пользоваться, как проверять? Видит ли ее клиент? Знакомятся ли с ней программисты?
На выходе получаем карту приложения (mindmap) и прототип, с которым знакомится клиент. Разрабам с ним знакомиться необязательно, их задача в том, чтобы сделать качественный бек и фронт. Если разработка на стороне клиента и ресурсы ограничены, то программисты знакомятся с прототипом. Прототипы всегда готовятся на базе популярных гайдов: iOS Human Interface Guidelines и Google Material Guidelines.