I am ready for a long road flight for work with a week- or months-long projects.
Проектируем быстрые действия в iOS
Лучшие практики UX/UI мобильных приложений
58
гайдлайнов
Быстрые действия – полезная функция приложений в iOS, позволяющая упростить путь клиента и сократить число действий, требуемых для выполнения задач. Несмотря пользу, применяют ее далеко не все, а у тех, кто применяет, часто есть потенциал для улучшения.
Итак, если у вас iPhone, давайте зажмем иконку приложения своей компании, посмотрим, что у нее в быстрых действиях, и пройдемся по чек-листу. Напишите потом в комментариях, все ли идеально или нашли, что можно улучшить.
И, как всегда, подписывайтесь на канал и делитесь с коллегами – я это очень ценю.
Итак, если у вас iPhone, давайте зажмем иконку приложения своей компании, посмотрим, что у нее в быстрых действиях, и пройдемся по чек-листу. Напишите потом в комментариях, все ли идеально или нашли, что можно улучшить.
И, как всегда, подписывайтесь на канал и делитесь с коллегами – я это очень ценю.
Структура статьи
Статью я разбил по смысловым блокам, чтобы облегчить восприятие. Сначала мы пройдемся по гайдлайнам, затем обсудим идеи применения быстрых действий в e-commerce.
1. Общие гайдлайны
Функция используется
Быстрые действия можно использовать, чтобы упростить путь клиента и облегчить выполнение различных задач.
М.Видео
Ключевые действия
Разместите в качестве быстрых те действия, которые несут максимальную ценность для пользователя и используются чаще всего.
Сложные задачи
Что клиенты делают в приложении часто, но для этого нужно сделать больше, чем 1 касание? Это хорошие кандидаты для включения в состав быстрых действий.
FixPrice
Без перехода на главный экран
И наоборот, нет смысла в быстрые действия включать переход на главный экран, который и так откроется в 1 касание, если приложение выгружено из памяти.
Any.Do
Количество действий
В приложение можно добавить до 4 быстрых действий. По возможности используйте все слоты под ключевые задачи: кому-то из клиентов это упростит жизнь.
Shein
Динамические действия
Используя динамические действия, вы можете привязать выполнение задач к контексту и стадии customer journey (примеры подсвечу в последнем разделе статьи).
Todoist
Не обновляются слишком часто
Если пользователи уже привыкли к какому-то действию и активно им пользуются, но при следующем обновлении его не найдут, это может стать неприятным сюрпризом.
Замена непопулярных действий
При этом использование быстрых действий можно отслеживать, и если каким-то из них почти никто не пользуется, возможно, имеет смысл заменить его чем-то более ценным.
Привязка к контексту
Действия, не релевантные для контекста, не должны отображаться. Например, если клиент еще не покупал билеты, в действии «Открыть заказы» нет смысла.
Купибилет
Корректное выполнение
Быстрые действия запускают отдельные события в коде приложения, и о них не стоит забывать в процессе тестирования новых релизов.
Онбординг
Не все пользователи могут быть знакомы с функцией быстрых действий, поэтому о них можно ненавязчиво рассказать прямо в приложении – в рамках процесса онбординга.
2. Названия действий
Добавлены
Не забудьте добавить названия для всех действий на уровне среды разработки. Таких оплошностей, как отображение системных названий, лучше не допускать.
Burger King
Краткие
Как и во всех остальных текстах, следуем правилу «Пиши. Сокращай»: будет лучше, если тексты действий будут краткими и не будут переноситься на новую строку.
FreeLetics
Не обрезаются
Если текст действия слишком длинный, он начнет обрезаться и не будет виден. Пользы от обрезанного контента не будет никакой.
Flo
Без длинных слов
По возможности лучше не использовать в названиях длинные слова, из-за которых, опять же, может произойти ненужный перенос строки.
Picsart
Отталкиваются от действия
Раз уж это кнопки быстрых действий, если позволяет контекст, можно сделать так, чтобы их текст отталкивался именно от глаголов, а не существительных.
App in the Air
Понятны
Если пользователь не поймет из текста действия, в чем оно заключается, пользы от такой функции будет немного.
Seven
Локализованы
Если ваше приложение локализовано на несколько языков, убедитесь, что вы не забыли добавить переводы и по быстрым действиям.
FarFetch
Локализация полная
Переводя текст быстрых действий, делайте это полностью. Не оставляйте работу выполненной наполовину. Вот такого быть не должно:
WaterMinder
Локализация корректна
В процессе локализации в целом, лучше прибегать к помощи носителей языка. Это снизит риск ошибок и недопонимания на стороне пользователей.
Перевести Сейчас
Регистр соответствует системному
Сделайте регистр текста быстрых действий консистентным с системными действиями. Раз уж они пишутся с заглавной буквы, лучше последовать этому примеру.
Золотое Яблоко
Регистр единообразен
Еще более базовый момент, но анти-примеры все же встречаются: лучше если регистр в текстах быстрых действий будет единообразным.
La Redoute
Без CAPS LOCK
Чрезмерное использование верхнего регистра может сделать тексты быстрых действий слишком «кричащими».
Burger King
Подзаголовки используются
Чтобы донести до пользователя информацию и сделать действие более понятным, помимо основного текста, также можно использовать и подзаголовки.
4 Лапы
Подзаголовки информативны
Спроектируйте подзаголовки так, чтобы они несли в себе добавленную ценность и повышали информативность кнопки быстрого действия.
Alibaba
Подзаголовки дополняют заголовки
Подзаголовки должны не идти обособленно, а дополнять основной текст заголовка и быть с ним как бы единым целым.
4 Лапы
Подзаголовки консистентны
Если вы решили использовать подзаголовки, снабдите ими все действия. Иначе может сложиться впечатление, что их где-то просто забыли добавить.
av.by
Использование emoji?
Технически в тексты быстрых действий можно добавить emoji. Как считаете, какие плюсы и минусы есть у такого решения? Напишите в комментариях.
Flo
3. Иконки действий
Добавлены
Некоторые разработчики просто забывают снабдить быстрые действия иконками. В результате напротив действий отображаются просто точки.
VSCO
Изображения присутствуют
Также встречаются кейсы, когда файл с изображением загружен, но по какой-то причине оно не отображается. Смотрится это также не очень изящно.
Золотое Яблоко
Релевантны
Иконки должны соответствовать тексту действий, повышая информативность кнопок и снижая шансы на их некорректную трактовку.
Google Calendar
Общепринятые
Используйте для целевых действий общепринятые иконки, чтобы не заставлять пользователя задумываться, что же имел в виду автор.
App in the Air
Различаются между действиями
Иконки не должны дублироваться или быть похожими друг на друга. Основная их задача: помочь понять, что это за действия, и провести различия между ними.
Burger King
Иконки действий vs. в приложении
Лучше если иконки быстрых действий будут соответствовать тем, что используются в приложении, чтобы не создавать когнитивную нагрузку. Например, избранное:
SF Symbols
Конечно, можно делать свои иконки, но у Apple есть своя бесплатная библиотека SF Symbols с более 4000 иконок, которые точно нативно впишутся в интерфейс.
Apple Inc.
Без заливки
По возможности не используйте заливку иконок, т.к. по сравнению с системными действиями они могут начать выглядеть слишком «кричаще».
av.by
Толщина vs. системные иконки
Сделайте толщину линий иконок такой же, как у системных действий, чтобы они не выбивались визуально из общего ряда.
Аптеки Столички
Единая толщина линии
Тем более не стоит выполнять свои же иконки линией разной толщины, чтобы у пользователя не возникло ощущения, будто их делали разные люди.
Красное & Белое
Единый размер
Выполните иконки в едином размере – как между собой, так и по отношению к иконкам системных действий, чтобы они не выбивались из визуального ряда.
Start
Без мелких деталей
Не забывайте, что иконки и так небольшого размера. Мелкие детали в них будет трудно различить.
ЦУМ
4. Идеи для e-commerce
Ну и напоследок приведу несколько идей того, что стоит (и не стоит) добавить в быстрые действия в приложении своей компании, если вы работаете в e-commerce. Если возникнут идеи того, чем этот список можно дополнить, жду вас в комментариях.
Не главная страница
Главная страница в быстрых действиях – не лучшая практика: клиент совершит больше действий для доступа к ней, чем просто при тапе по иконке.
Поиск?
Поиск можно вынести в быстрые действия в купе с активацией поля ввода. Но замечу, что во многих случаях поиск и через приложение займет 2 тапа.
Каталог товаров?
Каталог также часто встречается в быстрых действиях, но, опять же, высоки шансы, что клиент потратит столько же действий, зайдя в приложение.
Бонусная карта
Для offline-магазинов можно добавить карту лояльности со штрих-кодом для сканирования на кассе – особенно если карта не добавлена в Wallet.
Статус программы лояльности
В случае с картой в подзаголовок можно добавить % скидки по ней. Статус в программе можно отобразить как в подзаголовке, так и в динамической иконке.
Акции
Быстрый доступ к разделу с акциями может повысить частоту использования приложения, особенно если акции будут персонализированными.
Новинки
Быстрый переход к новинкам может помочь чаще использовать приложение – особенно если об этой возможности клиенту рассказать в онбординге.
Избранное
Быстрый доступ к отложенным товарам позволит сэкономить клиенту несколько касаний. В подзаголовке можно добавить число товаров.
Список покупок
Более тонкое исполнение – отображать в быстрых действиях свежий список покупок, который клиент сформировал недавно.
Корзина
Как и в случае с избранным, доступ к корзине также можно вынести в быстрые действия, снабдив текст числом товаров в подзаголовке.
Где мой заказ?
Динамическое быстрое действие, появляющееся в списке при активном заказе и ведущее на страницу трекинга заказа.
Ссылка на штрихкод заказа
В ПВЗ маркетплейсов нужно показывать штрихкод, либо называть номер. Почему бы не вывести переход к этим данным в быстрое действие?
Данные для получения заказа
А что если дать клиенту возможность получить заказ даже без захода в приложение, разместив номер и код активного заказа прямо в быстрых действиях?
Оценить заказ
Клиенту можно предложить оценить последний заказ с помощью динамического быстрого действия, если он этого еще не сделал.
Промокод
А что если клиент, давно не делавший покупки, среди быстрых действий увидит, что у него есть купон, который он может потратить на покупки? А в подзаголовке – сумма.
Магазины
Если у вас есть offline-присутствие, в быстрые действия можно вынести карту магазинов, а если геолокация включена, то и поиск ближайшего к клиенту.
Авторизация
Если клиент еще не авторизован, с помощью быстрого действия можно побудить его это сделать, подсветив выгоду от авторизации в подзаголовке.
Спасибо!
Если есть свободный слот, почему бы не разместить в нем текст «Спасибо!», а в подзаголовке – «что вы с нами». Хмм, куда бы она могла вести, как считаете?
To be continued...
Как видим из примеров, даже в таких простых точках клиентского пути, как быстрые действия в приложении, есть множество мелочей, о которых можно забыть. И часто здесь решает именно насмотренность. Надеюсь, что помогаю вам ее прокачивать.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce