Александр Шульгин, управляющий партнер Purrweb, рассказывает, как не наступить на «популярные» грабли и спроектировать по-настоящему заботливый интерфейс мобильного приложения.
Учиться на ошибках других полезно. А еще — финансово выгодно. Этот список поможет сохранить нервы пользователей и уменьшить количество «промахов» при создании UX дизайна приложения.
Слишком большие/маленькие кнопки
Кнопка — это стандартный элемент UX дизайна приложения, который помогает пользователю взаимодействовать с интерфейсом. Благодаря кнопкам можно загрузить Story, записать голосовое сообщение или сделать покупку.
Размер кнопки зависит от совершаемого действия и его приоритета. Кнопки, которые помогают продвигаться по флоу (пользовательскому сценарию), должны быть больше кнопок деструктивного действия (отмена, закрытие).
Если в кнопку «Дальше» нужно пять раз прицелиться, а кнопка «Закрыть» нажимается часто и по ошибке — это проблема.
Как не прогадать с размером кнопок и улучшить пользовательский опыт? Главные игроки рынка предлагают собственные рекомендации по UX дизайну. Так, по гайдлайну Apple ( Human Interface Guidelines) размер СTA в мобильных интерфейсах не должен быть меньше 44×44 пикселей, а Microsoft советует придерживаться размера в 34px с минимальной тач-областью в 26px.
Проверить размер кнопки на адекватность можно с помощью тепловых карт. Анализируя карты кликов, вы сможете узнать, куда именно «тыкают» пользователи и что провоцирует эти самые «промахи».
Объясню на примере нашего проекта: внизу экрана расположены три кнопки, одна из которых больше по размеру. Круглые кнопки обновления и геопозиции — второстепенные, их размер всего 44x44px. Кнопка по центру “Взять в аренду” важнее, поэтому мы выделяем ее на фоне второстепенных кнопок.
Это UI UX дизайн, который мы сделали для Energo – приложения для аренды повербанков. Больше проектов смотрите в нашем портфолио.
Бомбардировка запросами
Получить ресурсы пользователя без его согласия нельзя. Именно поэтому, когда приложению необходим доступ к камере, геолокации или микрофону, пользователю прилетает соответствующий запрос в модальном окне.
Разрешить или запретить доступ — зависит от каждого конкретного пользователя. А еще от подхода, который вы выбрали, чтобы все это получить.
Заваливать сходу кучей запросов — грубая ошибка в UX дизайне приложения. Вот представьте: вы запускаете приложение, а там лавина из «дай доступ к контактам», «и к камере», «и к микрофону тоже». Это все равно что нарваться на очень активного продавца техники, который уже сходу решил вытрясти из вас душу, а вы просто хотели посмотреть, как выглядит новый MacBook 16.
Чтобы не отпугнуть пользователей, придерживайтесь стратегии «быть в нужное время в нужном месте». Не просите все, что только может понадобиться, на старте. Убедитесь, что приложение запрашивает разрешение в момент, когда пользователь планирует воспользоваться соответствующей функцией. Например, Instagram требует доступ к фото в момент, когда пользователь хочет опубликовать снимок.
Обязательный онбординг
Онбординг — это быстрый способ познакомить пользователя с приложением, объяснить функциональность, ключевые преимущества (отличие от конкурентов) и полезные фишки (например, горячие клавиши). Это важный шаг в проработке UX дизайна.
Чтобы мотивировать пользователей остаться, важно проявить заботу и не превратить «ознакомительный тур» в пытку.
В этом приложении для карточной игры мы использовали онбординг, который можно «скипнуть».
Подсказывать — это прекрасное намерение. Но что, если пользователь обновил смартфон и хочет повторно скачать уже знакомое ему приложение? В контексте digital-продуктов правило «повторение — мать учения» перестает быть таким уж однозначным.
Чтобы спроектировать по-настоящему заботливый онбординг, дайте пользователям выбор обучаться или нет — пусть каждый решит для себя. Направляйте, но не будьте назойливым — те, кто уже успел разобраться, скажут вам за это спасибо.
Повторное внесение данных в форму
Форма — это важный элемент UX дизайна приложения. Оформление подписки, регистрация в приложении или покупка товара — это лишь несколько примеров его применения.
Любая форма похожа на беседу. Будет ли это общение вызывать раздражение или станет приятным опытом — зависит от вас. Главное — быть последовательным и не переспрашивать одно и то же по несколько раз.
Хорошая форма «запоминает» данные, которые оставил пользователь. Имя, место проживания, паспортные данные — заполнять поля всякий раз, когда обращаешься к приложению, больно. Лучше просто сохранить данные пользователя и подставить их в форму. Он обновит их в тот момент, когда это будет необходимо.
Единственное неактивное поле ввода на экране
Я уже сказал о том, что форма ввода во многом напоминает беседу. Вежливо спроектированная форма — это когда пользователю не нужно делиться одной и той же информацией по несколько раз. А еще когда вы проявляете инициативу и сами приглашаете его «побеседовать».
Допустим, пользователь открыл страницу с единственным полем ввода. Вместо того чтобы заставлять его тапать по экрану, сделайте поле активным сразу же после перехода на этот экран.
Вот так выглядит поле ввода в приложении для аренды повербанков Zapp .
Инертный дизайн
Понятный и привлекательный интерфейс теряет смысл, если нет обратной связи. Это все равно что разговаривать с человеком, который стоит по стойке смирно и молча хлопает глазами. Начинаешь думать: «Он вообще понимает, о чем я?» Вроде поделился впечатлениями, а отдачи ноль — это оставляет неприятный осадок.
Визуальный отклик сильно влияет на восприятие продукта. Вот хороший пример обратной связи из медицинского приложения Lytic, которое мы разработали в Purrweb
Поставить лайк, обновить страницу, открыть новую вкладку — имитировать реакцию на эти действия можно с помощью микроанимаций. Это проверенный способ сказать пользователю: «Я тебя услышал».
Еще больше полезных материалов в нашем Telegram-канале Стартап-пикап.
ПодписатьсяНеудобный ввод данных
Людям свойственно стремиться обходить препятствия, которые встречаются на пути. Казалось бы, простое и понятное желание, но разработчики часто о нем забывают.
Предлагая стандартную клавиатуру с буквами, цифрами и смайликами, вы рискуете создать большое препятствие. В попытках его «обойти» пользователи начнут раздражаться.
Избавлять пользователей от препятствий можно и нужно! Достаточно кастомизировать клавиатуру для каждого типа запроса. Иначе говоря, там, где требуется ввод цифр, предлагайте цифры. Там, где нужны буквы, предлагайте буквы. Такой UX дизайн значительно облегчит пользователям жизнь, ускорит процесс заполнения и сократит количество ошибок ввода.
Как достичь максимума
Вывод
Красивый интерфейс важен, но только этого недостаточно. Убедитесь, что за красивой «оберткой» стоит понятный и простой в использовании продукт, который не только решает задачу, но и требует для этого минимум усилий.
Короче, больше заботы о пользователях — и будет вам конверсия.
