I am ready for a long road flight for work with a week- or months-long projects.

Оценка клиентского опыта

E-commerce

Приложения

Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

Проектируем быстрые действия в iOS

Лучшие практики UX/UI мобильных приложений

гайдлайнов

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

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

И, как всегда, подписывайтесь на канал и делитесь с коллегами – я это очень ценю.

Станислав Хрусталёв

Автор hardclient.com

Структура статьи

Статью я разбил по смысловым блокам, чтобы облегчить восприятие. Сначала мы пройдемся по гайдлайнам, затем обсудим идеи применения быстрых действий в e-commerce.

Общие гайдлайны
Названия действий
Иконки действий
Идеи для e-commerce

Общие гайдлайны

11 гайдлайнов

Функция используется

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

Пример ● М.Видео

Ключевые действия

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

Сложные задачи

Что клиенты делают в приложении часто, но для этого нужно сделать больше, чем 1 касание? Это хорошие кандидаты для включения в состав быстрых действий.

Пример ● FixPrice

Без перехода на главный экран

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

Пример ● Any.Do

Количество действий

В приложение можно добавить до 4 быстрых действий. По возможности используйте все слоты под ключевые задачи: кому-то из клиентов это упростит жизнь.

Пример ● SHEIN

Динамические действия

Используя динамические действия, вы можете привязать выполнение задач к контексту и стадии customer journey (примеры подсвечу в последнем разделе статьи).

Пример ● Todoist

Не обновляются слишком часто

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

Замена непопулярных действий

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

Привязка к контексту

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

Пример ● Купибилет

Корректное выполнение

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

Онбординг

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

Названия действий

17 гайдлайнов

Добавлены

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

Пример ● Burger King

Краткие

Как и во всех остальных текстах, следуем правилу «Пиши. Сокращай»: будет лучше, если тексты действий будут краткими и не будут переноситься на новую строку.

Пример ● FreeLetics

Не обрезаются

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

Пример ● Flo

Без длинных слов

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

Пример ● Picsart

Отталкиваются от действия

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

Пример ● App in the Air

Понятны

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

Пример ● Seven

Локализованы

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

Пример ● FarFetch

Локализация полная

Переводя текст быстрых действий, делайте это полностью. Не оставляйте работу выполненной наполовину. Такого, как в примере, быть не должно.

Пример ● WaterMinder

Локализация корректна

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

Пример ● Перевести Сейчас

Регистр соответствует системному

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

Пример ● Золотое Яблоко

Регистр единообразен

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

Пример ● La Redoute

Без CAPS LOCK

Чрезмерное использование верхнего регистра может сделать тексты быстрых действий слишком «кричащими».

Пример ● Burger King

Подзаголовки используются

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

Пример ● Четыре Лапы

Подзаголовки информативны

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

Пример ● Alibaba

Подзаголовки дополняют заголовки

Подзаголовки должны не идти обособленно, а дополнять основной текст заголовка и быть с ним как бы единым целым.

Пример ● Четыре Лапы

Подзаголовки консистентны

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

Пример ● av.by

Использование emoji?

Технически в тексты быстрых действий можно добавить emoji. Как считаете, какие плюсы и минусы есть у такого решения? Напишите в комментариях.

Пример ● Flo

Иконки действий

12 гайдлайнов

Добавлены

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

Пример ● VSCO

Изображения присутствуют

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

Пример ● Золотое Яблоко

Релевантны

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

Пример ● Google Calendar

Общепринятые

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

Пример ● App in the Air

Различаются между действиями

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

Пример ● Burger King

Иконки в действиях vs. в приложении

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

Пример ● Wildberries

SF Symbols

Конечно, можно делать свои иконки, но у Apple есть своя бесплатная библиотека SF Symbols с более 4000 иконок, которые точно нативно впишутся в интерфейс.

Пример ● Apple

Без заливки

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

Пример ● av.by

Толщина vs. системные иконки

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

Пример ● Аптеки Столички

Единая толщина линии

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

Пример ● Каталог КБ

Единый размер

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

Пример ● Start

Без мелких деталей

Не забывайте, что иконки и так небольшого размера. Мелкие детали в них будет трудно различить.

Пример ● ЦУМ

Идеи для e-commerce

18 идей

Ну и напоследок приведу несколько идей того, что стоит (и не стоит) добавить в быстрые действия в приложении своей компании, если вы работаете в e-commerce. Если возникнут идеи того, чем этот список можно дополнить, жду вас в комментариях.

Не главный экран

Главная страница в быстрых действиях – не лучшая практика: клиент совершит больше действий для доступа к ней, чем просто при тапе по иконке.

Поиск?

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

Каталог товаров?

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

Бонусная карта

Для offline-магазинов можно добавить карту лояльности со штрих-кодом для сканирования на кассе – особенно если карта не добавлена в Wallet.

Статус программы лояльности

В случае с картой в подзаголовок можно добавить % скидки по ней. Статус в программе можно отобразить как в подзаголовке, так и в динамической иконке.

Акции

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

Новинки

Быстрый переход к новинкам может помочь чаще использовать приложение – особенно если об этой возможности клиенту рассказать в онбординге.

Избранное

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

Список покупок

Более тонкое исполнение – отображать в быстрых действиях свежий список покупок, который клиент сформировал недавно.

Корзина

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

Где мой заказ?

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

Ссылка на штрихкод заказа

В ПВЗ маркетплейсов нужно показывать штрихкод, либо называть номер. Почему бы не вывести переход к этим данным в быстрое действие?

Данные для получения заказа

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

Оценить заказ

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

Промокод

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

Магазины

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

Авторизация

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

Спасибо!

Если есть свободный слот, почему бы не разместить в нем текст «Спасибо!», а в подзаголовке – «что вы с нами». Хмм, куда бы она могла вести, как считаете?

To be continued...

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

Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.

Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.

Все статьи по e-commerce