Блог студии

Как делать отличный дизайн мобильных приложений

2018-11-13
Автор: Ник Бабич, перевод Арсений Петрович
перевод, UX, дизайн мобильных приложений, мнения, лайфхак

Статья переведена и опубликована с любезного разрешения uxpin.com

По данным Fortune, более 75% пользователей заходят в приложение всего один раз и никогда не возвращаются. Мы расскажем как сделать так, чтобы возвращались.

Понять взаимодействия с пользователем

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

Как оптимизировать интерфейс:

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

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

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

Интерфейс Uber. Источник: Dribbble

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

Интерфейс подсказывает следующий шаг после каждого действия. Источник: Dribbble

Одно действие на одном экране. Используйте акценты для определения приоритетов важных элементов (например, контрастный цвет для основной кнопки вызова к действию).

Выделение основных кнопок с помощью цвета.

Уберите беспорядок

Хороший дизайн пользовательского интерфейса — это предоставление соответствующей информации (сигнала) и избежание ненужной информации (шума).

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

Панель вкладок справа намного лучше, чем загроможденная слева. Источник: Apple

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

Пошаговое раскрытие информации в приложении Duolingo для iOS


Сделать навигацию очевидной

Функции и контент не имеют значения, если люди не могут их найти.

Вот несколько правил навигации:

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

По возможности лучше использовать стандартные схемы — вкладки (для iOS) и панель навигации (для Android). Большинство пользователей знакомы с обоими шаблонами навигации.

Источник: Google design

Элементы должны выглядеть так, как они себя ведут

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

В отличие от рабочего стола, где пользователи могут использовать эффекты наведения (hover), чтобы понять, является ли что-то интерактивным или нет, мобильные пользователи могут проверить интерактивность, только нажав на элемент. Поэтому пользователи должны быть в состоянии предсказать, как элемент интерфейса будет вести себя, просто глядя на него.

Большие кнопки

Элементы управления должны иметь площадь касания 70-100 мм2, чтобы в них можно было точно попасть.

Убедитесь, что элементы расположены не слишком близко друг к другу, чтобы предотвратить ложный ввод.

Источник: Apple

Рассмотрим зону большого пальца

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

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

Источник: Smashing Magazine

Чем больше дисплей, тем меньшая область доступна.

Зоны большого пальца для правши, согласно исследованию Scott Hurff. Зеленая зона — лучшее место для навигации или частых действий.
Кнопка «Share» расположена в зеленой зоне большого пальца.

Зато красная зона — лучшее место «опасных» элементов интерфейса, таких как удаление или стирание. Меньше вероятности вызвать эту опцию случайно.

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

Учет прерывания внимания

Мы живем в мире прерываний. Что-то постоянно пытается отвлечь нас и направить внимание в другое место.

Например, пользователи могут использовать ваше приложение во время ожидания поезда. Облегчите пользователям возможность повторного взаимодействия с приложением после прерывания.

Twitter является одним из хороших примеров дизайна для прерывания. На экране уведомлений приложения отображаются все последние уведомления. Пока пользователь остается на этом экране, приложение не обновляет список автоматически – оно просто показывает статус “X новых уведомлений” в верхней части списка. Это позволяет пользователям не потерять свое текущее положение, когда они снова взаимодействуют с приложением после некоторого периода времени.


Многоканальный опыт

Мобильные приложения не живут в вакууме. Например, мобильные пользователи часто просматривают веб-сайт на мобильном телефоне, а затем переключаются на десктоп для покупки. Этот переход должен быть незаметным.


Spotify обеспечивает незаметный переход между устройствами. Вы можете настроить плейлист на Вашем Mac, и он будет мгновенно доступен на iPhone. При переключении между девайсами, приложение запоминает, где вы остановитесь.

Интуитивные жесты

Жесты являются скрытыми элементами управления. Томас Йос отмечает в своей статье«За пределами кнопки: охватывая интерфейс, управляемый жестами», самый большой недостаток жестов в пользовательском интерфейсе — это кривая обучения. Каждый раз, когда видимый элемент управления заменяется жестом, кривая обучения приложения растет. Это происходит потому, что жесты всегда скрыты. Вот почему важно использовать только широко распространенные жесты.

Хорошим примером подходящего для категории жеста является потянуть-для-обновления для приложений, похожих на ленты.

Источник: Ramotion

Сделайте приложение отзывчивее с шаблонными экранами

Ваше приложение должно быть быстрым и отзывчивым, но вы неизбежно столкнетесь с ситуациями, когда это не всегда возможно.

Например, подключение к интернету может быть слишком медленным. Вы не можете сократить загрузку, но можно сделать ожидание более приятным.

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

Шаблон экрана в Slack для iOS


Обработка ошибок

Экран ошибки не должен быть пустым, он должен дать понимание что делать дальше. Плохой пример ниже. Экран ошибки из Spotify не помогает пользователям понять контекст и не помогает найти ответ на вопрос: «Что я могу с этим сделать?»

Ничто в вашем приложении не должно быть тупиком.


Теперь сравните его с экраном NFL Fantasy. Сообщение об ошибке и читаемо и полезно. Экран показывает что пошло не так и, возможно, почему. Какой следующий шаг пользователь должен предпринять, чтобы исправить ошибку.

NFL Fantasy объясняет, почему пользователь ничего не видит и как это решить. Источник: Emptystates


Показать состояние системы

Когда приложение занято чем-то, вы должны сообщить пользователю, что приложение оно не зависло. Визуальные признаки прогресса дают пользователям чувство контроля над приложением.

Это приложение с помощью анимации уведомляет пользователей о загрузке.
Источник: Ramotion


Навигационный переход

Анимация это лучший инструмент для описания перехода между состояниями. Она помогает пользователям понять логику изменений макета страницы.

Функциональная анимация может эффективно направлять внимание пользователя и упростить сложные переходы между состояниями. Источник: Чжэ-Сон Чжон


Визуальная обратная связь

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

Хорошая визуальная обратная связь делает взаимодействие удобным для пользователей. Все интерактивные элементы (например, кнопки) должны обеспечивать идеальную визуальную обратную связь.

Персонализация

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

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

Восхитительная анимация

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

Повышение ценности приложения

Раздражающие уведомления-причина, по которой люди удаляют мобильные приложения (71% респондентов).

Каждое уведомление должно быть ценным и своевременным. Вот несколько вещей, которые следует учитывать при разработке push-уведомлений.

Источник: Опрос Appiterate


Избегайте отправки большого количества уведомлений в короткий период

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

Время уведомления

Не только то, что вы хотите сказать — это важно, но и когда вы хотите это сказать. Не отправляйте push-уведомления в странные часы (например, в середине ночи). Лучшее время для push-уведомлений — пиковое время мобильного использования — с 6 вечера до 10 вечера.

Рассмотрите другие каналы для доставки Вашего сообщения

Push-уведомление — это не единственный способ доставить сообщение пользователям. Используйте e-mail, уведомления в приложении и новости, чтобы уведомлять пользователей о важных событиях, которым вы хотите поделиться.

Выберите правильный тип уведомления на основе срочности и содержания. Источник: Appboy

Резюме

Как дизайнер, вы должны стремиться создать невидимый интерфейс, потому что такие интерфейсы удовлетворяют потребности пользователей и обеспечивают отличный пользовательский опыт.

Все советы указанные выше это просто отправная точка для старта. Сочетайте их с вашими собственными идеями для достижения наилучших результатов.


Другие наши статьи

Ценность дизайна
2018-11-19
Артем Петрович
Как делать отличный дизайн мобильных приложений
2018-11-13
Автор: Ник Бабич, перевод Арсений Петрович
Идеальный брендбук
2018-11-06
Артем Петрович
Дизайн без правок
2018-10-29
Артем Петрович