Александр Шульгин, управляющий партнер агентства Purrweb, рассказывает, как не наступить на «популярные» грабли и спроектировать по-настоящему заботливый интерфейс мобильного приложения.
Учиться на ошибках других полезно. А еще — финансово выгодно. Этот список поможет сохранить нервы пользователей и уменьшить количество «промахов» при создании мобильного приложения.
Слишком большие/маленькие кнопки
Кнопка — это стандартный элемент дизайна, который помогает пользователю взаимодействовать с интерфейсом приложения. Благодаря кнопкам можно загрузить Story, записать голосовое сообщение или сделать покупку.
Размер кнопки зависит от совершаемого действия и его приоритета. Кнопки, которые помогают продвигаться по флоу (пользовательскому сценарию), должны быть больше кнопок деструктивного действия (отмена, закрытие).
Если в кнопку «Дальше» нужно пять раз прицелиться, а кнопка «Закрыть» нажимается часто и по ошибке — это проблема.
Как не прогадать с размером кнопок и улучшить пользовательский опыт? Главные игроки рынка предлагают собственные рекомендации. Так, по гайдлайну Apple (Human Interface Guidelines) размер СTA в мобильных интерфейсах не должен быть меньше 44x44 пикселей, а Microsoft советует придерживаться размера в 34px с минимальной тач-областью в 26px.
Проверить размер кнопки на адекватность можно с помощью тепловых карт сервиса UXCam.
Анализируя карту кликов, вы сможете узнать, куда именно «тыкают» пользователи и что провоцирует эти самые «промахи».
Обязательный онбординг
Онбординг — это быстрый способ познакомить пользователя с приложением, объяснить функциональность, ключевые преимущества (отличие от конкурентов) и полезные фишки (например, горячие клавиши).
Чтобы мотивировать пользователей остаться, важно проявить заботу и не превратить «ознакомительный тур» в пытку.
Подсказывать — это прекрасное намерение. Но что, если пользователь обновил смартфон и хочет повторно скачать уже знакомое ему приложение?
В контексте digital-продуктов правило «повторение — мать учения» перестает быть таким уж однозначным.
Чтобы спроектировать по-настоящему заботливый онбординг, дайте пользователям выбор обучаться или нет — пусть каждый решит для себя. Направляйте, но не будьте назойливым — те, кто уже успел разобраться, скажут вам за это спасибо.
Бомбардировка запросами
Получить ресурсы пользователя без его согласия нельзя. Именно поэтому, когда приложению необходим доступ к камере, геолокации или микрофону, пользователю прилетает соответствующий запрос в модальном окне.
Разрешить или запретить доступ — зависит от каждого конкретного пользователя. А еще от подхода, который вы выбрали, чтобы все это получить.
Заваливать сходу кучей запросов — грубая ошибка. Вот представьте: вы запускаете приложение, а там лавина из «дай доступ к контактам», «и к камере», «и к микрофону тоже». Это все равно что нарваться на очень активного продавца техники, который уже сходу решил вытрясти из вас душу, а вы просто хотели посмотреть, как выглядит новый MacBook 16.
Чтобы не отпугнуть пользователей, придерживайтесь стратегии «быть в нужное время в нужном месте». Не просите все, что только может понадобиться, на старте. Убедитесь, что приложение запрашивает разрешение в момент, когда пользователь планирует воспользоваться соответствующей функцией. Например, Instagram требует доступ к фото в момент, когда пользователь хочет опубликовать снимок.
Повторное внесение данных в форму
Форма — это важный элемент продуктового дизайна. Оформление подписки, регистрация в приложении или покупка товара — это лишь несколько примеров его применения.
Любая форма похожа на беседу. Будет ли это общение вызывать раздражение или станет приятным опытом — зависит от вас. Главное — быть последовательным и не переспрашивать одно и то же по несколько раз.
Хорошая форма «запоминает» данные, которые оставил пользователь. Имя, место проживания, паспортные данные — заполнять поля всякий раз, когда обращаешься к приложению, больно. Лучше просто сохранить данные пользователя и подставить их в форму. Он обновит их в тот момент, когда это будет необходимо.
Единственное неактивное поле ввода на экране
Я уже сказал о том, что форма ввода во многом напоминает беседу. Вежливо спроектированная форма — это когда пользователю не нужно делиться одной и той же информацией по несколько раз. А еще когда вы проявляете инициативу и сами приглашаете его «побеседовать».
Допустим, пользователь открыл страницу с единственным полем ввода. Вместо того чтобы заставлять его тапать по экрану, сделайте поле активным сразу же после перехода на этот экран.
Инертный дизайн
Понятный и привлекательный интерфейс теряет смысл, если нет обратной связи. Это все равно что разговаривать с человеком, который стоит по стойке смирно и молча хлопает глазами. Начинаешь думать: «Он вообще понимает, о чем я?» Вроде поделился впечатлениями, а отдачи ноль — это оставляет неприятный осадок.
Визуальный отклик сильно влияет на восприятие продукта. Это проверенный способ сказать пользователю: «Я тебя услышал».
Поставить лайк, обновить страницу, открыть новую вкладку — имитировать реакцию на эти действия можно с помощью микроанимаций.
Неудобный ввод данных
Людям свойственно стремиться обходить препятствия, которые встречаются на пути. Казалось бы, простое и понятное желание, но разработчики часто о нем забывают.
Предлагая стандартную клавиатуру с буквами, цифрами и смайликами, вы рискуете создать большое препятствие. В попытках его «обойти» пользователи начнут раздражаться.
Избавлять пользователей от препятствий можно и нужно! Достаточно кастомизировать клавиатуру для каждого типа запроса.
Иначе говоря, там, где требуется ввод цифр, предлагайте цифры. Там, где нужны буквы, предлагайте буквы. Это значительно облегчит пользователям жизнь, ускорит скорость заполнения и сократит количество ошибок ввода.
Вывод
Красивый интерфейс важен, но только этого недостаточно. Убедитесь, что за красивой «оберткой» стоит понятный и простой в использовании продукт, который не только решает задачу, но и требует для этого минимум усилий.
Короче, больше заботы о пользователях — и будет вам конверсия.
Как достичь максимума
- Убедитесь, что кнопки не загромождают пространство, но при этом заметны.
- Разрешайте пользователям «скипать» онбординг.
- Запрашивайте разрешение на доступ к данным в момент, когда пользователь планирует воспользоваться соответствующей функцией.
- Сохраняйте данные пользователя в формах.
- Сделайте единственное поле ввода активным сразу же после перехода на экран.
- Обеспечьте «отзывчивость» интерфейса с помощью микроанимаций.
- Кастомизируйте клавиатуру для каждого типа запроса.
Изображения в тексте предоставлены автором
Фото на обложке: Unsplash
Нашли опечатку? Выделите текст и нажмите Ctrl + Enter
Материалы по теме
ВОЗМОЖНОСТИ
26 апреля 2024
29 апреля 2024