Как улучшить UX вашего приложения: полезные советы

77

Вы читаете перевод статьи “UX design tips for your app”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.


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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


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

Превосходное приложение с плохим UX — это не превосходное приложение, это прелюдия к разочарованию.

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

UX должен адаптироваться к пользователю

Все люди разные, так почему же UX должен быть универсальным для всех?

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

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

Все люди разные, так почему же UX должен быть универсальным для всех?

Копаться в ворохе контента и найти то, что я уже видел — это потеря времени.

Пример адаптивного UX

OpenTable — это приложение для бронирования столиков в ресторане. Оно знает много о пользователях — например, что они любят есть.

Когда я бронирую через OpenTable, мое бронирование отображается в области основного меню — пропустить невозможно! Интерфейс приложения адаптируется под меня, выводя важную и срочную информацию на передний план.

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

Когда я ищу ресторан по названию, поисковик определяет мою геопозицию и показывает результаты неподалеку. Именно поэтому мне не предлагают Бургер Кинг в Таиланде, если я в Сан-Франциско.

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

Адаптироваться к изменению сети — это хороший UX в любом контексте

Представьте, что переводите телефон в авиарежим. Или, если у вас нет авиарежима, представьте, что выключаете интернет.

Какие приложения остаются полезными? А какие становятся совершенно бесполезными? Лично у меня только пара приложений из сотни хоть как-то работают оффлайн.

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

У меня вай-фай? Или я в роуминге? Рядом происходит что-то такое, о чем я хотел бы получить уведомление?

Самые большие злодеи отправляют вам запредельное количество картинок и прочих ресурсов даже в контексте самого элементарного взаимодействия. Не нужно загружать 39 фотографий, как только я вхожу в галерею, спасибо большое! Подождите, пока я сам попрошу. Мы знаем, что степень удовлетворенности пользователя во многом зависит от времени ожидания. Так зачем тратить драгоценные секунды на загрузку ретина-фотографий, которые никто не будет смотреть?

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

Исследовательское подразделение Microsoft Research составило список приложений, чувствительных к состоянию и изменению сети.

Пример UX, который адаптируется к изменению сети

Pocket — это менеджер веб-контента, который позволяет сохранять интересные статьи на будущее. Но приложение остается таким же (если не более) удобным и без интернета.

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

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

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

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

Приложения Google тоже подстраиваются под качество сети. К примеру, когда вы используете Google Photos в качестве бэкап-сервиса, приложение по умолчанию осуществляет “тяжелые” загрузки только по вай-фай.

Не забрасывайте пользователей уведомлениями

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

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

И даже когда UX ваших уведомлений хорош, все может очень быстро пойти насмарку, если уведомления не синхронизируются между устройствами пользователя. Никто не хочет снова и снова читать одно и то же уведомление. Здесь, как и программировании, работает принцип DRY (don’t repeat yourself, не повторяйся)

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

Или еще хуже: использовать уведомления для таких бесполезных вещей, как реклама или ненужные “новости”. Можно по пальцам пересчитать случаи, когда я хотел бы узнать, что в вашей iOS игре теперь можно купить три новых персонажа.

Беру свои слова назад. Нет таких случаев.

Пример UX уведомлений

Twitter — мой самый любимый способ онлайн-общения, отчасти благодаря замечательному UX в плане уведомлений.

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

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

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

Вам нужен интерфейс поиска

Когда в приложении вообще нет контента, это отстой.

Но куча контента без возможности навигации может оказаться не менее отстойной.

Контент, которого пользователь не увидел, для него не существует.

Без нормального интерфейса поиска я, пользователь, беззащитен перед тоннами обновлений, профилей и новостей.

Однако, не все поисковые интерфейсы одинаково хороши. Иногда поиск работает так плохо (низкие результаты поиска, недостаточно фильтров), что лучше бы его вообще не было.

Вашему гибкому, прогрессивному приложению нужен не менее гибкий и прогрессивный поиск.

Примеры UX поиска

Etsy — это рынок, где каждый может продавать почти все, что пожелает. Это означает, что у них на сайте очень много контента.

Просто чтобы вы представляли масштаб: по моему недавнему поисковому запросу “свадебные приглашения” нашлось более 200,000 результатов.

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

А теперь представьте, что поиск нельзя было бы настроить. Как вам перспектива копаться в 200,000+ вариантов, которые нашлись по запросу “свадебные приглашения”? Страница за страницей, сотни тысяч вариантов! Да вы бы так и не отправили свои приглашения, потому что были бы слишком заняты поиском подходящего шаблона.

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

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

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

Спроектируйте хороший процесс онбординга

Расстелите перед новыми пользователями красную ковровую дорожку.

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

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

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

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

Представьте, что вы запускаете Инстаграм, а там ни одной фотографии? Или Твиттер без твитов?

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

Решение простое: уделите достаточно времени дизайну пустых экранов.

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

Примеры UX онбординга

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

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

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

За несколько секунд новичок превращается в мастера — и все благодаря проработанному процессу онбординга.

Slack — это платформа для общения между членами команд. Когда новый пользователь появляется в системе, он автоматически получает сообщение от игривого и услужливого “робота” по имени Слэкбот.

Слэкбот рассказывает о ключевых особенностях платформы — собственно посредством самой платформы. Такой интерактивный процесс онбординга мгновенно превращает новичка в пользователя. И дело не только в интерактивности: просто отвечать на вопросы робота как-то увлекательнее, чем заполнять старую добрую форму с именем, адресом и т.п. Процесс онбординга Slack позволяет быстро увлечь нового пользователя.

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

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

Как еще можно улучшить UX вашего приложения?

Не страшно, если вы упустили что-то из этого списка. И если вы чувствуете, что некоторые аспекты приложения еще можно улучшить — то относитесь к ним как к потенциальным возможностям.

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


Впервые опубликовано в blog.invisionapp.com



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →

Посты в категории UX-дизайн

Руководство: как подготовить и провести онлайн-опрос

Ольга Жолудова

10 декабря 2019

Посты в категории UX-дизайн

От тактики к стратегии: что такое сервис-дизайн?

Ольга Жолудова

11 ноября 2019

Посты в категории UX-дизайн

40+ способов сделать опросы точнее: чек-лист для ux-исследователей

Ольга Жолудова

18 октября 2019