Дизайн мобильных приложений

 

Но, согласно «Fortune», более 75% пользователей открывают приложение один раз и больше не возвращаются к нему. Сегодня ожидания мобильные пользователей очень велики – быстрая загрузка приложения, простота пользования и получение удовольствия во время взаимодействия с ним.

androidaplikacieАдаптация под контекст пользования и максимально низкий уровень взаимодействия (ограниченное количество действий, необходимое для выполнения одной задачи), стремительно становится главным критерием для создания многих приложений.

Итак, что именно можно считать «хорошим опытом»? Давайте рассмотрим шесть основных критериев разработки мобильных приложений.

Минимизация когнитивной нагрузки

Чем меньше непонимания и путаницы возникает у пользователя при взаимодействии с приложением (например, когнитивная нагрузка), тем больше вероятность того, что он в него вернётся.

Оптимизированный поток пользователей

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

Знание этого поможет нам определить наиболее распространенные проблемные моменты во время выполнения какой-либо задачи.

Вот несколько популярных способов оптимизации потока пользователей:

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image6.png

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

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image25.jpg

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image1.gif

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image3.png

Airbnb выделяет цветом основные кнопки к дальнейшему действию

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image10.png

Четкая панель вкладок (справа) намного лучше, чем захламленная (слева).

Совет: Если вы хотите уменьшить «захламление» экрана, который представляет собой часть так называемого пути пользователя, – покажите только то, что необходимо на текущем этапе. Например, когда пользователь делает выбор, покажите достаточно информации, позволяющей сделать выбор, а затем уже отобразите подробности на следующем экране (экранах).

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image19.png

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

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

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

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

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

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

• Сообщайте текущее местоположение. Неспособность указать текущее местоположение является распространенной проблемой для многих мобильных приложений. «Где я?» – один из важнейших вопросов, на которые пользователи должны ответить, чтобы успешно перемещаться.

Совет: Лучше использовать стандартные шаблоны навигации, такие как панель вкладок (для iOS) или боковая панель (для Android). Большинство пользователей знакомы с ними. Не нужно что-то выдумывать, если есть простое решение, которое работает.

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image2.png

Оптимизируйте взаимодействие с соцсетями

Мобильные телефоны – это не уменьшенная версия рабочего стола компьютеров – они имеют свои собственные нюансы и ограничения.

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

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

Удобный для пальцев дизайн

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

Как правило, такие элементы имеют площадь касания 7-10 мм, чтобы их можно было легко нажать. Такая иконка позволяет сделать края объекта нажатия видимыми для пользователей, когда они касаются ее. Пользователи смогут понять, правильно ли они попадают на нужную им иконку.

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image21.png

Принимайте во внимание зону большого пальца

Создавать дизайн для пользования большим пальцем – это не только делать большие иконки, но и подумать о том, как пользователь будет держать само устройство.

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image9.png

Чем больше дисплей, тем большая часть экрана становится труднодоступной. https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image26.png

Зоны больших зон для пользователей-правшей, согласно исследованиям Скотта Херффа

При дизайне приложений для мобильных устройств учитывайте все разные зоны:

• Зеленая зона – лучшее место для навигационных опций или частых интерактивных действий (например, кнопка вызова к действию).

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image8.png

Кнопка “Поделиться” находится в зеленой зоне большого пальца.

• Красная зона – лучшее место для возможных «опасных» вариантов (например, удаления или стирания). Пользователи, скорее всего, не нажмут их случайно. https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image23.png

Поместите кнопки «вредных» действий (например, удаление и стирание) в труднодоступную красную зону, ведь вы не хотите, чтобы пользователи случайно нажали их.

Дизайн с учетом возможных помех

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

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

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image17.jpg

Стремитесь создать многоканальный опыт

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image5.png

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

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

Как отмечает Томас Джоос в своей статье «За пределами кнопок: Осваивая интерфейс, управляемый жестом», самым большим недостатком использования жестов в пользовательском интерфейсе является кривая обучения. Каждый раз, когда видимый элемент управления интерфейсом заменяется жестом, кривая обучения приложения увеличивается.

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

Одним из хороших примеров таких жестов, подходящих для любой категории, является функция «потяни вверх» для обновления новостей в соответствующих приложениях.

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image16.gif

Ускорьте приложение с помощью так называемых экранов-скелетов

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

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image27.png

Фокусируйтесь на первом опыте использования приложения

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

Хорошее «сопровождение» новых пользователей

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

Дизайнеры должны рассматривать ознакомление в качестве возможности «направить» начинающих пользователей. В то же время, данный процесс должен использоваться только в том случае, если он действительно необходим для первого пользования.

https://s17404.pcdn.co/studio/wp-content/uploads/2017/01/the-book-262x375.png https://s17404.pcdn.co/studio/wp-content/uploads/2016/08/the-book_bundle.png

https://s17404.pcdn.co/studio/wp-content/uploads/2016/08/the-book_bundle-1.png https://s17404.pcdn.co/studio/wp-content/uploads/2018/01/not-facebook-the-book-262x375.png

Продумайте «состояние нуля»

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image13.png

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

Теперь сравните его с состоянием нуля из NFL Fantasy. Оно вполне удобно читаемо и полезно. Кратко, вежливо и поучительно. Четко сказано:

• Что пошло не так и по каким причинам скорее всего это случилось.

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image11.png

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

Используйте функциональную анимацию для улучшения обмена информацией

Анимация решает множество функциональных проблем в интерфейсах, делая их «живыми» с неподдельной реакцией.

Показывайте статус системы

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image20.gif

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image18.gif

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

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

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

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image7.gif

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

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

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

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

Приятная анимация

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image14.gif

Не «снижайте планку»

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

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

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

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

Выбирайте время для отправки уведомлений

Важно не только то, что вы хотите сказать, но и когда вы хотите это сказать. Не отправляйте push-уведомление в непринятые часы (например, в середине ночи). Лучшее время для push-уведомлений – часы пик пользования мобильным – с 18:00 до 22:00.

Подумайте о других способах уведомлений

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

https://s17404.pcdn.co/studio/wp-content/uploads/2017/12/image22.jpg

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

Вывод

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

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

Источник перевода