I am ready for a long road flight for work with a week- or months-long projects.
Проектируем функционал сторис
Лучшие практики UX/UI мобильных приложений
103
гайдлайна
С момента своего появления сторис обрели всеобщую популярность. А где популярность – там и копирование: сейчас их можно встретить в куче приложений. Только вот копировать нужно с умом, продумывая все детали и добавляя что-то свое.
Сегодня мы погрузимся в тему сторис и разберем лучшие практики и ошибки. В этой статье – 103 гайдлайна на базе 100+ просмотренных приложений.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Сегодня мы погрузимся в тему сторис и разберем лучшие практики и ошибки. В этой статье – 103 гайдлайна на базе 100+ просмотренных приложений.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути:
И еще пара моментов перед тем, как начнем:
Здесь я рассматриваю сторис не как часть соцсети, а как один из способов общения компании с клиентами в рамках ее своего собственного приложения.
В статье покрывается только функционал взаимодействия клиента с историями. Интерфейсы их создания – вне рамок этого материала.
1. Блок с миниатюрами сторис
В верхней части экрана
Разместите коллекцию со сторис там, где ее привыкли видеть пользователи в других приложениях – в верхней части экрана.
S7 Airlines
Быстро загружается
Оптимизируйте размер изображений в миниатюрах, чтобы не заставлять клиента ждать, пока они загружаются.
Магнит
Highlight при онбординге
В некоторых кейсах сторис отдельно подсвечиваются в рамках онбординга. Хоть в примере это сделано неидеально, оставлю здесь, как одну из идей.
FixPrice
Обрезание визуального ряда
Если сторис больше, чем видно на экране, спроектируйте их размер так, чтобы последняя видимая история обрезалась, давая понять, что коллекция прокручивается.
Перекрёсток Впрок
Блокировка вертикального скролла
При прокрутке коллекции клиент может сделать свайп с небольшим вертикальным смещением. Поэтому в этот момент лучше блокировать вертикальный скролл экрана.
Маркет Деливери
Прокрутка при слабом жесте
Коллекция сторис может реагировать даже на небольшие жесты, прокручиваясь при этом на одну историю.
Lamoda
Привязка ячеек
Использование cell snapping при прокрутке коллекции с историями позволит привязать их к одним и тем же позициям и сделает их расположение более предсказуемым.
Rendez-Vous
Миниатюры в виде кружков
Классический вид миниатюр для сторис, к которому привыкли пользователи запрещенной соц.сети и привыкнут пользователи Telegram – кружки.
Telegram
Альтернативы кружкам
Однако часто можно встретить миниатюры в виде квадратов или вертикальных карточек: это позволяет сделать контент в них более заметным (и иногда разместить на них текст).
Мой МТС
Не в виде горизонтальных карточек
При этом, горизонтальных карточек лучше избегать: каждая карточка начинает занимать слишком много места, и на экране их помещается гораздо меньше.
Лента
Highlight непросмотренных сторис
Выделяйте новые истории на фоне просмотренных, чтобы смещать на них фокус внимания. Делать это можно за счет обводок миниатюр или маркеров.
Авито
Визуальное разнообразие
По возможности сделайте так, чтобы коллекция миниатюр выглядела разнообразной. Ставить в ряд похожие изображения – вероятно, не лучшая идея.
СпортМастер
Без дублирования миниатюр
Еще более тяжелый случай – это когда миниатюры для разных сторис дублируются. Нехватка контента? Нехватка фантазии? И так сойдет?
Акушерство
Названия под миниатюрами
Первый вариант размещения текста названий – под миниатюрами. Так оба этих элемента не будут конкурировать между собой за внимание клиента.
Золотое Яблоко
Названия краткие
Базовый момент: если вы сделаете названия слишком длинными так, что они начнут обрезаться, какой в этом смысл, если клиент не увидит обрезанный текст?
Пятерочка
Названия на миниатюрах?
Если вы решили размещать названия сторис поверх миниатюр, учтите, что создаете себе еще одну задачу: каждый раз проверять, что текст легко читается на фоне.
Metro
Текст не мельчит
Что точно не стоит делать – так это размещать в миниатюре мелкий текст, который, кроме боли в глазах, ничего клиенту не принесет.
Lamoda
Единый формат текста
По возможности не используйте разные шрифты для заголовков в сторис. Это лишь создаст ненужную когнитивную нагрузку.
Rendez-Vous
Маркеры в миниатюрах
Если ваши сторис можно классифицировать по тематикам, добавление небольших маркеров может подсветить контент конкретных типов и облегчить восприятие.
СпортМастер
Соответствие миниатюры контенту
Миниатюра каждой сторис должна быть репрезентативна и соответствовать контенту, с которым клиент столкнется при тапе по ней.
Лента
Анимированные миниатюры
Миниатюры можно избирательно анимировать – так они привлекут больше внимания. Главное не делать так со всеми миниатюрами в коллекции.
Тинькофф
Highlight количества слайдов
Telegram использует разделение обводки на части, чтобы подсветить число слайдов в историях. Как вам такое исполнение? Напишите в комментах.
Telegram
Сортировка по значимости
Первый вариант сортировки – разместить наиболее важные для клиента сторис вначале, чтобы повысить шансы на то, что клиент их заметит.
S7 Airlines
Сортировка по свежести
Другой рабочий вариант – сортировать истории по дате публикации: клиент столкнется с наиболее свежим контентом.
Золотое Яблоко
Просмотренные – в конце
Если клиент просмотрел историю, ее можно выводить в конец коллекции, повышая видимость еще непросмотренных сторис.
Додо Пицца
Что делать с просмотренными?
Тинькофф идет чуть дальше и позволяет клиенту самому решить в настройках: оставлять просмотренные сторис в конце списка или полностью их скрывать.
Тинькофф
2. Открытие сторис
Реакция на касание
Миниатюры можно сделать интерактивными, чтобы они реагировали на касание, тем самым делая интерфейс более отзывчивым.
AliExpress
Анимация увеличения
При нажатии на миниатюру она может визуально увеличиваться до полноэкранного изображения, делая переход к просмотру истории более плавным.
Авто.ру
Анимация покрытия
Также достаточно часто можно встретить появление сторис с помощью экрана, появляющегося поверх основного снизу или сбоку.
Циан
Загружаются мгновенно
Оптимизируйте процесс загрузки сторис, чтобы не обрекать клиента на муки ожидания при тапе по миниатюре или переходе к следующей истории.
Самокат
Индикатор загрузки
Если история достаточно много «весит» и на ее загрузку все же требуется время, лучше отображать индикатор прогресса загрузки, а не просто пустой экран.
Тинькофф
Не при каждом запуске приложения
Не стоит отображать сторис при каждом входе в приложение. Такая настырность может сыграть злую шутку с уровнем удержания клиентов.
Sokolov
3. Темы для сторис
Контентное разнообразие
Не ограничивайтесь каким-то одним типом историй – сделайте контент разнообразным, чтобы клиенты не уставали от него. Придумывайте что-то новое. Но что? (ответы ниже).
Тинькофф
Акции и предложения
Начнем с простого: в e-commerce большинство игроков не упускают возможность рассказать клиенту с помощью историй о том, какие у них есть акции.
Магнит
Анонсы
Также сторис можно использовать для того, чтобы донести ключевые анонсы: запуск новой коллекции, появление новых брендов и т.д.
Lamoda
Описание услуг
Некоторые компании рассказывают в историях о различных доп.услугах, повышая осведомленность клиентов о них.
Авито
Отзывы покупателей
Истории также можно использовать для трансляции социального доказательства, подсвечивая позитивные отзывы и обзоры на товары от клиентов.
O'STIN
Пользовательский контент
По аналогии с отзывами, пользовательский контент может играть роль социального доказательства – просто покажите, как клиенты успешно используют ваши товары.
Rendez-Vous
Подборки
Часто в сторис можно встретить различные подборки: направления для путешествий, модные образы, ингредиенты блюда и т.д. – с переходом к соответствующим товарам.
One Two Trip
Помощь в выборе
В сторис можно устроить своеобразный guided selling, помогая клиенту выбрать из большого разнообразия тот товар, который придется по вкусу.
SimpleWine
Полезные советы
Подумайте, как вы можете сделать жизнь ваших клиентов проще, лучше и поделитесь полезными советами в сторис.
O'STIN
Интересные факты
Помимо прочего, в сторис вы также можете размещать просто интересные факты, которые могут привлечь внимание клиента.
Тинькофф
Опросы
В сторис можно размещать различные опросы: таким образом, истории могут стать дополнительным каналом сбора обратной связи от клиентов.
Квизы
Иногда в сторис также можно встретить и квизы, являющиеся частью развлекательного контента для клиентов компании.
Циан
Предложение подписки
Через сторис можно рассказать клиенту о том, что у вас есть Telegram-канал, соц.сети или рассылка, подсветить ценность и предоставить возможность быстрой подписки.
S7 Airlines
Описание работы сервиса
Сторис – также хорошее место, чтобы описать, как работает ваш сервис и как совершать на нем покупки.
AliExpress