Колонки

Чек-лист для мобильных интерфейсов: семь UX-ошибок, которые приводят пользователей в ярость

Колонки
Александр Шульгин
Александр Шульгин

Управляющий партнер Purrweb

Софья Федосеева

Александр Шульгин, управляющий партнер агентства Purrweb, рассказывает, как не наступить на «популярные» грабли и спроектировать по-настоящему заботливый интерфейс мобильного приложения.

Чек-лист для мобильных интерфейсов: семь UX-ошибок, которые приводят пользователей в ярость

Учиться на ошибках других полезно. А еще — финансово выгодно. Этот список поможет сохранить нервы пользователей и уменьшить количество «промахов» при создании мобильного приложения. 

Слишком большие/маленькие кнопки 

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

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


Если в кнопку «Дальше» нужно пять раз прицелиться, а кнопка «Закрыть» нажимается часто и по ошибке — это проблема. 

Как не прогадать с размером кнопок и улучшить пользовательский опыт? Главные игроки рынка предлагают собственные рекомендации. Так, по гайдлайну Apple (Human Interface Guidelines) размер СTA в мобильных интерфейсах не должен быть меньше 44x44 пикселей, а Microsoft советует придерживаться размера в 34px с минимальной тач-областью в 26px. 

Проверить размер кнопки на адекватность можно с помощью тепловых карт сервиса UXCam. 


Для новых пользователей доступна 15-дневная пробная версия

Анализируя карту кликов, вы сможете узнать, куда именно «тыкают» пользователи и что провоцирует эти самые «промахи». 

Обязательный онбординг

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

Чтобы мотивировать пользователей остаться, важно проявить заботу и не превратить «ознакомительный тур» в пытку. 


Визуализация — это классно. Визуализировать и давать выбор — еще лучше

Подсказывать — это прекрасное намерение. Но что, если пользователь обновил смартфон и хочет повторно скачать уже знакомое ему приложение? 

В контексте digital-продуктов правило «повторение — мать учения» перестает быть таким уж однозначным. 

Slack охотно знакомит пользователей со своим продуктом и разрешает опустить «теоретическую часть»

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


Бомбардировка запросами

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

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

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


Три запроса в первую минуту после запуска — образец настойчивости! 

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


Повторное внесение данных в форму 

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

Любая форма похожа на беседу. Будет ли это общение вызывать раздражение или станет приятным опытом — зависит от вас. Главное — быть последовательным и не переспрашивать одно и то же по несколько раз. 

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


Единственное неактивное поле ввода на экране 

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

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


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

Инертный дизайн

Понятный и привлекательный интерфейс теряет смысл, если нет обратной связи. Это все равно что разговаривать с человеком, который стоит по стойке смирно и молча хлопает глазами. Начинаешь думать: «Он вообще понимает, о чем я?» Вроде поделился впечатлениями, а отдачи ноль — это оставляет неприятный осадок. 


Визуальный отклик сильно влияет на восприятие продукта. Это проверенный способ сказать пользователю: «Я тебя услышал». 

Поставить лайк, обновить страницу, открыть новую вкладку — имитировать реакцию на эти действия можно с помощью микроанимаций. 


Неудобный ввод данных 

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

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

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

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



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


Вывод 

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

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


Как достичь максимума

  • Убедитесь, что кнопки не загромождают пространство, но при этом заметны. 
  • Разрешайте пользователям «скипать» онбординг. 
  • Запрашивайте разрешение на доступ к данным в момент, когда пользователь планирует воспользоваться соответствующей функцией.
  • Сохраняйте данные пользователя в формах. 
  • Сделайте единственное поле ввода активным сразу же после перехода на экран. 
  • Обеспечьте «отзывчивость» интерфейса с помощью микроанимаций. 
  • Кастомизируйте клавиатуру для каждого типа запроса.
Материал обновлен 17 января в 15:15

Изображения в тексте предоставлены автором

Фото на обложке: Unsplash

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Вы проиграете борьбу за клиентов, если не улучшите UX сайта
  2. 2 «VR — это способ запрограммировать мозг». Как построить качественный UX в виртуальной реальности
  3. 3 UX/UI – что это? Разбираемся в терминах

Актуальные материалы —
в Telegram-канале @Rusbase

ВОЗМОЖНОСТИ

14 июля 2020

FoodTech

15 июля 2020

NeuroTech