UX для мобильного приложения.
Планируете разработку мобильного приложения для своей компании? Не забудьте о нескольких важных правилах создания успешного пользовательского интерфейса.
1. ЗНАЧОК ПРИЛОЖЕНИЯ
Приложите чуть больше усилий для создания дизайна иконки вашего приложения. Сделайте его легко узнаваемым среди других программ в магазине приложений и на мобильном устройстве пользователя.
Не забудьте сделать значок приложения простым, сфокусированным в одну точку и избегайте прозрачности. Не забудьте проверить, как он выглядит на разных фонах и обоях. Он должен смотреться потрясающе, независимо от фонового изображения, которое выберет для своего смартфона пользователь.
2. ЗАСТАВКА
Посмотрите на пример приложения Eye2eye — действительно ли необходим здесь экран заставки? Подумайте о фактических случаях использования вашего приложения. Оно предназначено для быстрого доступа к некоторым данным? Или для того, чтобы побудить пользователей совершать какие-то действия? Не используйте заставку, которая просто отнимает у человека время. Используйте ее для того, чтобы показать ход загрузки приложения или в качестве обращения к чувствам и эмоциям пользователя, подготавливая их погрузиться в действие через ваше приложение, как это делает программа Share the Meal на втором примере.
3. ЛАКОНИЧНЫЙ ИНТЕРФЕЙС
Дизайн приложения для знакомств от Django Stars – основан на философии Dribbble: «Простота — это наивысшая сложность». Сделайте приложение понятным и легким для взаимодействия. Каждая дополнительная кнопка, форма, изображение или любая другая часть интерфейса делает экран более громоздким и повышает давление на пользователя, которое приходится соответствующим образом направлять. Разместите на главном экране все самое важное, а все вторичное попробуйте скрыть.
4. ЧЕТКИЙ КОНТЕНТ
Текст должен быть читабельным без масштабирования. Рекомендуемые размеры шрифта и советы подробно описаны в соответствующих официальных рекомендациях Apple и Google, не поленитесь прочитать их.
5. ФОРМЫ
Формы должны быть максимально просты в использовании. Выбирайте для поля ввода соответствующую высоту и ширину. Опять-таки, Apple и Google сделали отличную работу, разработав рекомендации и по этой части. Форма должна предоставить пользователю понимание того, что сейчас нужно сделать, и что последует потом. Автозаполнение — хороший выбор для экономии времени пользователя, а вот автокоррекция станет его дополнительной головной болью. Обратите внимание на способ ввода данных в некоторых конкретных случаях. Очевидно, что на клавиатуре есть кнопки «@» и «.com», и пользователь использует их, заполняя форму электронной почты или номер телефона. И, наконец, постарайтесь избегать ввода данных вручную там, где это возможно (например, найти адрес через GPS).
6. ИЗОБРАЖЕНИЯ
Если ваше приложение отвечает за продажи (интернет-магазин, доставка еды и т. п.) — изображения должны быть в самом высоком разрешении, чтобы обеспечить наиболее подробное представление о том, что вы пытаетесь продать. Масштабирование фотографий — отличная идея, позволяющая пользователям лучше рассмотреть продукт. Выберите по умолчанию изображение, которое отображается в полном размере, и подключите интерактивные миниатюры, отвечающие за увеличенные изображения. Здесь нужно учитывать геолокацию вашей основной группы пользователей. В некоторых странах скорость подключения к Интернету не дает возможности быстро загружать слишком детализированные изображения.
7. НЕ ЗАБЫВАЙТЕ О БЕЛОМ ПРОСТРАНСТВЕ
Белое пространство (область без контента) выполняет важную функцию — придает дизайну аккуратность и помогает визуально определить приоритеты. Оно создает четкую иерархию: где искать в первую очередь и где искать дальше, а также предотвращает случайное использование пользователями ошибочных кликов.
8. ПУСТЫЕ ЭКРАНЫ
Они не только делают приложение более эстетичным, но и предоставляет пользователям важную информацию и рекомендации. Убедитесь, что пользователь всегда знает, что происходит или чего не хватает на каждом этапе взаимодействия с вашим приложением.
9. ХОРОШАЯ ЦВЕТОВАЯ КОНТРАСТНОСТЬ
Приложение Timedom от Django Stars — яркий пример сохранения четкого контраста между шрифтом и цветом фона. Такой подход делает ваш текст лучшим для восприятия. Целесообразно придерживаться следующих рекомендаций:
Небольшой текст должен иметь коэффициент контрастности к фону не менее 4.5:1.
Большой текст (размером 14pt жирный/18pt обычный) должен иметь коэффициент контрастности к фону не менее 3:1.
10. НАВИГАЦИЯ
Навигация в приложении должна быть естественной и соотноситься с элементами выбранной ОС. Не перемещайте элементы управления навигацией в неожиданные места — это дезориентирует пользователя. Планируя размещение навигационных элементов необходимо учитывать позицию руки. На мобильном телефоне и планшете один и тот же элемент может располагаться по-разному, учитывая портретный и альбомный макет страницы.
11. ПОРТРЕТНАЯ/АЛЬБОМНАЯ ОРИЕНТАЦИЯ МАКЕТА
Решите, действительно ли вам нужны оба типа макета. Мы рекомендуем отказаться от варианта изменения макета в приложениях со сложной архитектурой UX, в которой много навигационных элементов. Пример тому — Facebook, который даже свой Messenger сделал отдельным приложением, чтобы не загромождать интерфейс, что привело бы к драматической потере пространства для контента. В случае мультимедийных приложений, таких как Youtube, где пользователь проводит большую часть времени, просматривая контент, не передвигаясь по большому количеству опций — все как раз наоборот. Поэтому тут требуется адаптация. Кроме того, не забывайте, что расположение макета в альбомной ориентации заставляет клиента использовать обе руки для манипуляций, что влияет на позиционирование элементов управления.
12. ПОДТВЕРЖДЕНИЕ ДЕЙСТВИЙ
Даже в случае, если крайние точки вашего крана достаточно велики, всегда существует вероятность «ошибки пользователя». Реализация возможности подтверждения действия (равно как и варианта его отмены) имеет большое значение.
13. ИЗБЕГАЙТЕ АГРЕССИВНОГО ВЗАИМОДЕЙСТВИЯ
Предоставьте пользователям достаточно времени для формирования собственного впечатления от вашего приложения. Избегайте частого, раздражающего, повторяющегося процесса CTA.
