hardclient scroll to top
hardclient telegram

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

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

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

И, как всегда, подписывайтесь на канал и делитесь с коллегами – я это очень ценю.
Партнер Experience.Partners
Автор сайта HardClient.com
Структура статьи
Статью я разбил по смысловым блокам, чтобы облегчить восприятие. Сначала мы пройдемся по гайдлайнам, затем обсудим идеи применения быстрых действий в 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