Проектируем функционал сторис

С момента своего появления сторис обрели всеобщую популярность. А где популярность – там и копирование: сейчас их можно встретить в куче приложений. Только вот копировать нужно с умом, продумывая все детали. Сегодня мы погрузимся в тему сторис и разберём лучшие практики и ошибки. В этой статье — 102 гайдлайна на базе 100+ просмотренных приложений
Станислав Хрусталёв
Станислав Хрусталёв
Автор Hard Client. Пишу об управлении клиентским опытом. Собираю лучшие CX-практики. Оцениваю сервисные модели компаний
hardclient designing stories

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

Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути:

  1. Блок с миниатюрами сторис
  2. Открытие сторис
  3. Темы для сторис
  4. Просмотр сторис
  5. Отслеживание прогресса
  6. Действия с историями
  7. Переключение историй
  8. Закрытие историй

И еще пара моментов перед тем, как начнем:

1. Блок с миниатюрами сторис

В верхней части экрана

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

S7 Airlines

Быстро загружается

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

Магнит

Highlight при онбординге

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

FixPrice

Обрезание визуального ряда

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

Перекрёсток Впрок

Блокировка вертикального скролла

При прокрутке коллекции клиент может сделать свайп с небольшим вертикальным смещением. Поэтому в этот момент лучше блокировать вертикальный скролл экрана.

Маркет Деливери

Прокрутка при слабом жесте

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

Lamoda

Привязка ячеек

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

Rendez-Vous

Миниатюры в виде кружков

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

Telegram

Альтернативы кружкам

Однако часто можно встретить миниатюры в виде квадратов или вертикальных карточек: это позволяет сделать контент в них более заметным (и иногда разместить на них текст).

Мой МТС

Не в виде горизонтальных карточек

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

Лента

Highlight непросмотренных сторис

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

Авито

Визуальное разнообразие

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

СпортМастер

Названия под миниатюрами

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

Золотое Яблоко

Названия краткие

Базовый момент: если вы сделаете названия слишком длинными так, что они начнут обрезаться, какой в этом смысл, если клиент не увидит обрезанный текст?

Пятерочка

Названия на миниатюрах?

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

Metro

Текст не мельчит

Что точно не стоит делать — так это размещать в миниатюре мелкий текст, который, кроме боли в глазах, ничего клиенту не принесёт.

Lamoda

Единый формат текста

По возможности не используйте разные шрифты для заголовков в сторис. Это лишь создаст ненужную когнитивную нагрузку.

Rendez-Vous

Маркеры в миниатюрах

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

СпортМастер

Соответствие миниатюры контенту

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

Лента

Анимированные миниатюры

Миниатюры можно избирательно анимировать – так они привлекут больше внимания. Главное не делать так со всеми миниатюрами в коллекции.

Тинькофф

Highlight количества слайдов

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

Telegram

Сортировка по значимости

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

S7 Airlines

Сортировка по свежести

Другой рабочий вариант — сортировать истории по дате публикации: клиент столкнётся с наиболее свежим контентом.

Золотое Яблоко

Просмотренные — в конце

Если клиент просмотрел историю, её можно выводить в конец коллекции, повышая видимость ещё непросмотренных сторис.

Додо Пицца

Что делать с просмотренными

Тинькофф идет чуть дальше и позволяет клиенту самому решить в настройках: оставлять просмотренные сторис в конце списка или полностью их скрывать.

Тинькофф

2. Открытие сторис

Реакция на касание

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

AliExpress

Анимация увеличения

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

Auto.ru

Анимация покрытия

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

Циан

Не при каждом запуске приложения

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

Sokolov

Загружаются мгновенно

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

Самокат

Индикатор загрузки

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

Тинькофф

3. Темы для сторис

Контентное разнообразие

Не ограничивайтесь каким-то одним типом историй — сделайте контент разнообразным, чтобы клиенты не уставали от него. Придумывайте что-то новое. Но что? (ответы ниже).

Тинькофф

Акции

Начнем с простого: в e-commerce с помощью историй большинство игроков не упускают возможность рассказать клиенту о том, какие у них есть акции.

Магнит

Анонсы

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

Lamoda

Описание услуг

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

Авито

Отзывы покупателей

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

O’STIN

Пользовательский контент

По аналогии с отзывами, пользовательский контент может играть роль социального доказательства — просто покажите, как клиенты успешно используют ваши товары.

Rendez-Vous

Подборки

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

One Two Trip

Помощь в выборе

В сторис можно устроить своеобразный guided selling, помогая клиенту выбрать из большого разнообразия тот товар, который придётся по вкусу.

SimpleWine

Полезные советы

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

O’STIN

Интересные факты

Помимо прочего, в сторис вы также можете размещать просто интересные факты, которые могут привлечь внимание клиента.

Тинькофф

Опросы

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

Квизы

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

Циан

Предложение подписки

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

S7 Airlines

Описание работы сервиса

Сторис — также хорошее место, чтобы описать, как работает ваш сервис и как совершать на нём покупки.

AliExpress

Уведомления об улучшениях

Если вы улучшили своё приложение и сделали путь клиента более удобным, почему бы не рассказать об этом с помощью сторис?

СпортМастер

Рекламные сторис

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

Auto.ru
?

Персонализация под сегменты

Состав сторис можно подстраивать под ключевые сегменты клиентов, чтобы сделать их более релевантными.

Rendez-Vous

Персонализация под клиента

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

Тинькофф

4. Просмотр сторис

Контент историй актуален

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

Kari

Контент информативен

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

SimpleWine

Сторис полноэкранные

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

Пятерочка

Отображаются корректно

Контент историй должен корректно отображаться. База? Да, база. Но даже крупные компании иногда упускают это из виду и пропускают «косяки» в production.

Лента

Контент в хорошем качестве

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

Золотое Яблоко

Подсказки

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

Самокат
?

Текст легко читается на фото

Часто компании размещают текст поверх фото и видео. В этом случае важно убедиться, что он легко читается: контрастен и не расположен на пёстром фоне.

Rendez-Vous

Затемнение фона

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

Lamoda

Без чрезмерного затемнения

Однако не стоит перебарщивать с уровнем затемнения фона. Иначе есть риск, что ваши сторис станут чересчур мрачными.

ВкусВилл

Заливка текстовых блоков

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

Золотое Яблоко

Без звука по умолчанию

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

Золотое Яблоко

Субтитры для видео

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

Тинькофф

5. Отслеживание прогресса

Индикатор прогресса добавлен

Стандартный механизм управления ожиданиями о том, когда произойдёт переход к следующей истории — progress-индикатор в её верхней части.

S7 Airlines

Индикатор хорошо заметен

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

FixPrice

Вынос индикатора за сторис

Иногда, чтобы индикатор был лучше виден, его выносят за рамки контента истории и размещают на контрастном фоне.

Магнит

Индикатор не дублируется

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

FixPrice

Число элементов = число слайдов

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

Подружка

Скорость автопрокрутки

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

Тинькофф

Плавная анимация индикатора

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

Яндекс Go

Прогресс vs. выцветание

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

Kari
?

Остановка прокрутки зажатием

Также распространённая практика — останавливать progress-индикатор при зажатии экрана истории, чтобы клиент успел ознакомиться с контентом.

Самокат

Остановка моментальная

Дьявол кроется в деталях, и часто именно в них возникают неудобства: в некоторых приложениях индикатор продолжал своё движение какое-то время после зажатия.

6. Действия с историями

Возможность поставить лайк

Эффективность контента разных типов можно оценивать с помощью клиентов: дайте им возможность поставить лайк и отслеживайте, какие сторис вырываются в топ.

Lamoda

Счётчик лайков

Клиента можно не оставлять «в вакууме» и отображать, что о сторис думают остальные, добавив индикатор количества лайков.

Lamoda

Реакция счётчика на лайк

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

Lamoda

Пояснение к лайкам

Тинькофф не просто даёт возможность поставить лайк истории, но и поясняет, зачем клиенту вообще это делать — для персонализации. Персонализация — наше всё.

Тинькофф

Дизлайк

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

One Two Trip

Комментарии

Некоторые также позволяют прокомментировать историю и почитать комментарии остальных клиентов. Интересная фича или уже излишне? Напишите в комментах.

Тинькофф

Кнопки действий

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

ВкусВилл

Кнопки достаточно большие

Чем меньше кнопка действия, тем на неё сложнее нажать. И тем ниже шансы на то, что клиент это целевое действие успешно совершит.

Подружка

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

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

Магнит

Переход через свайп вверх

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

Перекрёсток Впрок

Целевое действие vs. экран

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

Додо Пицца

Целевой контент в контуре

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

СпортМастер

Интеграция с товарами

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

Золотое Яблоко

Сохранение историй

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

Самокат

Понятно, куда сохраняются

Реализовав функцию сохранения историй, позаботьтесь о том, чтобы клиенту было понятно, куда они сохраняются и как получить к ним доступ в будущем (да, тот же самый пример, что и в предыдущем пункте – не ошибка: найти «Сохранёнки» в Самокате не так легко).

Самокат

Шеринг историй

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

S7 Airlines

Шеринг в контуре приложения

При этом есть выбор: выпускать клиента за пределы приложения или дать поделиться внутри него? Это может работать на повышение активной аудитории пользователей.

Тинькофф

7. Переключение историй

Наличие автопрокрутки

Переход к следующему слайду в рамках одной сторис можно сделать автоматическим — при заполнении progress-индикатора.

2ГИС

Тап по бокам экрана

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

Циан

Кнопка действия

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

СпортМастер

Свайп в сторону

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

СпортМастер

Длина свайпа минимальна

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

One Two Trip

Тап по последнему слайду

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

SimpleWine

Слайды vs. сторис

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

Азбука Вкуса

Анимация поворота

При переключении между сторис чаще всего используется анимация поворота блока на 90 градусов — разумеется, многие копируют её из всем известного места.

Kari

Анимация наложения

Однако свет не сошёлся клином на повороте, поэтому некоторые экспериментируют и реализуют переход между сторис с помощью наложения. Мне нравится.

Додо Пицца

Анимация замещения

Еще один метод, используемый участниками рынка — анимация замещения карточек. Как вам такой вариант по сравнению с предыдущими? Напишите в комментах.

Магнит
?

8. Закрытие историй

Смахивание вниз

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

AliExpress

Закрытие через крестик

Действие свайпа вниз также можно дополнить интуитивной кнопкой крестика в правой верхней части экрана.

2ГИС

Просмотр всех сторис

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

СпортМастер

Просмотр одной истории

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

Маркет Деливери
?

To be continued…

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

Надеюсь, этот материал поможет вам прокачать насмотренность, а кому-то из вас — ещё и поправить недочёты, сделав истории в своем приложении лучше.

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

Поделиться
Отправить
Запинить

Обсуждение