Присоединяйтесь к широкому международному сообществу креативных людей, пользующихся Cliparto каждый день. чтобы покупать или продавать изображения.
| ◢ Мой Cliparto › ЛайтБокс (0)
Не помните пароль / логин? ◢ Впервые у нас? Зарегистрируйтесь ◢ Есть аккаунт на Vector-Images. › Недавно просмотрено
|
||||||||||||||||
Изображения предоставлятся по Royalty-Free лицензиям. Наши Условия использования сервисов разрешают использование изображений для широкого спектра услуг, товаров и отраслей, где изображения, приобретенные через Cliparto будут работать на Вас.
com?Проектируем быстрые действия в iOS: 58 гайдлайнов / Хабр
Быстрые действия – полезная функция приложений в iOS, позволяющая упростить путь клиента и сократить число действий, требуемых для выполнения задач. Несмотря пользу, применяют ее далеко не все, а у тех, кто применяет, часто есть потенциал для улучшения.
Итак, если у вас iPhone, давайте зажмем иконку приложения своей компании, посмотрим, что у нее в быстрых действиях, и пройдемся по чек-листу. Напишите потом в комментариях, все ли идеально или нашли, что можно улучшить.
Подписывайтесь на канал и делитесь с коллегами – я это очень ценю.
Структура статьи
Статью я разбил по смысловым блокам, чтобы облегчить восприятие. Сначала мы пройдемся по гайдлайнам, затем обсудим идеи применения быстрых действий в e-commerce.
Общие гайдлайны
Названия действий
Иконки действий
Идеи для e-commerce
1.
Общие гайдлайныФункция используется
Быстрые действия можно использовать, чтобы упростить путь клиента и облегчить выполнение различных задач.
❌
Ключевые действия
Разместите в качестве быстрых те действия, которые несут максимальную ценность для пользователя и используются чаще всего.
Сложные задачи
Что клиенты делают в приложении часто, но для этого нужно сделать больше, чем 1 касание? Это хорошие кандидаты для включения в состав быстрых действий.
✅
Без перехода на главный экран
И наоборот, нет смысла в быстрые действия включать переход на главный экран, который и так откроется в 1 касание, если приложение выгружено из памяти.
❌
Количество действий
В приложение можно добавить до 4 быстрых действий. По возможности используйте все слоты под ключевые задачи: кому-то из клиентов это упростит жизнь.
✅
Динамические действия
Используя динамические действия, вы можете привязать выполнение задач к контексту и стадии customer journey (примеры подсвечу в последнем разделе статьи).
✅
Не обновляются слишком часто
Если пользователи уже привыкли к какому-то действию и активно им пользуются, но при следующем обновлении его не найдут, это может стать неприятным сюрпризом.
Замена непопулярных действий
При этом использование быстрых действий можно отслеживать, и если каким-то из них почти никто не пользуется, возможно, имеет смысл заменить его чем-то более ценным.
Привязка к контексту
Действия, не релевантные для контекста, не должны отображаться. Например, если клиент еще не покупал билеты, в действии «Открыть заказы» нет смысла.
Корректное выполнение
Быстрые действия запускают отдельные события в коде приложения, и о них не стоит забывать в процессе тестирования новых релизов.
Онбординг
Не все пользователи могут быть знакомы с функцией быстрых действий, поэтому о них можно ненавязчиво рассказать прямо в приложении – в рамках процесса онбординга.
2. Названия действий
Добавлены
Не забудьте добавить названия для всех действий на уровне среды разработки.
Таких оплошностей, как отображение системных названий, лучше не допускать.
❌
Краткие
Как и во всех остальных текстах, следуем правилу «Пиши. Сокращай»: будет лучше, если тексты действий будут краткими и не будут переноситься на новую строку.
❌
Не обрезаются
Если текст действия слишком длинный, он начнет обрезаться и не будет виден. Пользы от обрезанного контента не будет никакой.
❌
Без длинных слов
По возможности лучше не использовать в названиях длинные слова, из-за которых, опять же, может произойти ненужный перенос строки.
❌
Отталкиваются от действия
Раз уж это кнопки быстрых действий, если позволяет контекст, можно сделать так, чтобы их текст отталкивался именно от глаголов, а не существительных.
✅
Понятны
Если пользователь не поймет из текста действия, в чем оно заключается, пользы от такой функции будет немного.
❌
Локализованы
Если ваше приложение локализовано на несколько языков, убедитесь, что вы не забыли добавить переводы и по быстрым действиям.
❌
Локализация полная
Переводя текст быстрых действий, делайте это полностью. Не оставляйте работу выполненной наполовину. Вот такого быть не должно:
❌
Локализация корректна
В процессе локализации в целом, лучше прибегать к помощи носителей языка. Это снизит риск ошибок и недопонимания на стороне пользователей.
❌
Регистр соответствует системному
Сделайте регистр текста быстрых действий консистентным с системными действиями. Раз уж они пишутся с заглавной буквы, лучше последовать этому примеру.
❌
Регистр единообразен
Еще более базовый момент, но анти-примеры все же встречаются: лучше если регистр в текстах быстрых действий будет единообразным.
❌
Без CAPS LOCK
Чрезмерное использование верхнего регистра может сделать тексты быстрых действий слишком «кричащими».
❌
Подзаголовки используются
Чтобы донести до пользователя информацию и сделать действие более понятным, помимо основного текста, также можно использовать и подзаголовки.
✅
Подзаголовки информативны
Спроектируйте подзаголовки так, чтобы они несли в себе добавленную ценность и повышали информативность кнопки быстрого действия.
❌
Подзаголовки дополняют заголовки
Подзаголовки должны не идти обособленно, а дополнять основной текст заголовка и быть с ним как бы единым целым.
✅
Подзаголовки консистентны
Если вы решили использовать подзаголовки, снабдите ими все действия. Иначе может сложиться впечатление, что их где-то просто забыли добавить.
❌
Использование emoji?
Технически в тексты быстрых действий можно добавить emoji. Как считаете, какие плюсы и минусы есть у такого решения? Напишите в комментариях.
❓
3. Иконки действий
Добавлены
Некоторые разработчики просто забывают снабдить быстрые действия иконками. В результате напротив действий отображаются просто точки.
❌
Изображения присутствуют
Также встречаются кейсы, когда файл с изображением загружен, но по какой-то причине оно не отображается.
Смотрится это также не очень изящно.
❌
Релевантны
Иконки должны соответствовать тексту действий, повышая информативность кнопок и снижая шансы на их некорректную трактовку.
❌
Общепринятые
Используйте для целевых действий общепринятые иконки, чтобы не заставлять пользователя задумываться, что же имел в виду автор.
❌
Различаются между действиями
Иконки не должны дублироваться или быть похожими друг на друга. Основная их задача: помочь понять, что это за действия, и провести различия между ними.
❌
Иконки действий vs. в приложении
Лучше если иконки быстрых действий будут соответствовать тем, что используются в приложении, чтобы не создавать когнитивную нагрузку. Например, избранное:
SF Symbols
Конечно, можно делать свои иконки, но у Apple есть своя бесплатная библиотека SF Symbols с более 4000 иконок, которые точно нативно впишутся в интерфейс.
✅
Без заливки
По возможности не используйте заливку иконок, т.
к. по сравнению с системными действиями они могут начать выглядеть слишком «кричаще».
❌
Толщина vs. системные иконки
Сделайте толщину линий иконок такой же, как у системных действий, чтобы они не выбивались визуально из общего ряда.
❌
Единая толщина линии
Тем более не стоит выполнять свои же иконки линией разной толщины, чтобы у пользователя не возникло ощущения, будто их делали разные люди.
❌
Единый размер
Выполните иконки в едином размере – как между собой, так и по отношению к иконкам системных действий, чтобы они не выбивались из визуального ряда.
❌
Без мелких деталей
Не забывайте, что иконки и так небольшого размера. Мелкие детали в них будет трудно различить.
❌
4. Идеи для e-commerce
Ну и напоследок приведу несколько идей того, что стоит (и не стоит) добавить в быстрые действия в приложении своей компании, если вы работаете в e-commerce. Если возникнут идеи того, чем этот список можно дополнить, жду вас в комментариях.
Не главная страница
Главная страница в быстрых действиях – не лучшая практика: клиент совершит больше действий для доступа к ней, чем просто при тапе по иконке.
Поиск?
Поиск можно вынести в быстрые действия в купе с активацией поля ввода. Но замечу, что во многих случаях поиск и через приложение займет 2 тапа.
Каталог товаров?
Каталог также часто встречается в быстрых действиях, но, опять же, высоки шансы, что клиент потратит столько же действий, зайдя в приложение.
Бонусная карта
Для offline-магазинов можно добавить карту лояльности со штрих-кодом для сканирования на кассе – особенно если карта не добавлена в Wallet.
Статус программы лояльности
В случае с картой в подзаголовок можно добавить % скидки по ней. Статус в программе можно отобразить как в подзаголовке, так и в динамической иконке.
Акции
Быстрый доступ к разделу с акциями может повысить частоту использования приложения, особенно если акции будут персонализированными.
Новинки
Быстрый переход к новинкам может помочь чаще использовать приложение – особенно если об этой возможности клиенту рассказать в онбординге.
Избранное
Быстрый доступ к отложенным товарам позволит сэкономить клиенту несколько касаний. В подзаголовке можно добавить число товаров.
Список покупок
Более тонкое исполнение – отображать в быстрых действиях свежий список покупок, который клиент сформировал недавно.
Корзина
Как и в случае с избранным, доступ к корзине также можно вынести в быстрые действия, снабдив текст числом товаров в подзаголовке.
Где мой заказ?
Динамическое быстрое действие, появляющееся в списке при активном заказе и ведущее на страницу трекинга заказа.
Ссылка на штрихкод заказа
В ПВЗ маркетплейсов нужно показывать штрихкод, либо называть номер. Почему бы не вывести переход к этим данным в быстрое действие?
Данные для получения заказа
А что если дать клиенту возможность получить заказ даже без захода в приложение, разместив номер и код активного заказа прямо в быстрых действиях?
Оценить заказ
Клиенту можно предложить оценить последний заказ с помощью динамического быстрого действия, если он этого еще не сделал.
Промокод
А что если клиент, давно не делавший покупки, среди быстрых действий увидит, что у него есть купон, который он может потратить на покупки? А в подзаголовке – сумма.
Магазины
Если у вас есть offline-присутствие, в быстрые действия можно вынести карту магазинов, а если геолокация включена, то и поиск ближайшего к клиенту.
Авторизация
Если клиент еще не авторизован, с помощью быстрого действия можно побудить его это сделать, подсветив выгоду от авторизации в подзаголовке.
Спасибо!
Если есть свободный слот, почему бы не разместить в нем текст «Спасибо!», а в подзаголовке – «что вы с нами». Хмм, куда бы она могла вести, как считаете?
To be continued…
Как видим из примеров, даже в таких простых точках клиентского пути, как быстрые действия в приложении, есть множество мелочей, о которых можно забыть. И часто здесь решает именно насмотренность. Надеюсь, что помогаю вам ее прокачивать.
Следующие статьи будут с таким же уровнем детализации.
Продолжаем создавать базу знаний по UX/UI мобильных приложений.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
значок магазина PNG, векторы, PSD и пнг для бесплатной загрузки 04
Etsy Shop Icons — Etsy Turkey
Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных.