С момента своего появления сторис обрели всеобщую популярность. А где популярность – там и копирование: сейчас их можно встретить в куче приложений. Только вот копировать нужно с умом, продумывая все детали и добавляя что-то свое.
Сегодня мы погрузимся в тему сторис и разберем лучшие практики и ошибки. В этой статье – 102 гайдлайна на базе 100+ просмотренных приложений.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и откройте еще 80+ статей по темам, связанным с UX, на моем канале в Telegram.
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути:
И еще пара моментов перед тем, как начнем:
Здесь я рассматриваю сторис не как часть соцсети, а как один из способов общения компании с клиентами в рамках ее своего собственного приложения.
В статье покрывается только функционал взаимодействия клиента с историями. Интерфейсы их создания – вне рамок этого материала.
1. Блок с миниатюрами сторис
В верхней части экрана
Разместите коллекцию со сторис там, где её привыкли видеть пользователи в других приложениях — в верхней части экрана.
![S7 Airlines✅ S7 Airlines✅](https://habrastorage.org/getpro/habr/upload_files/105/305/a50/105305a50f2c0647b452e0899337ed46.png)
✅
Быстро загружается
Оптимизируйте размер изображений в миниатюрах, чтобы не заставлять клиента ждать, пока они загружаются.
![Магнит✅ Магнит✅](https://habrastorage.org/getpro/habr/upload_files/540/ea6/b90/540ea6b90d85e7c8d2d18d0650d7f389.gif)
✅
Highlight при онбординге
В некоторых кейсах сторис отдельно подсвечиваются в рамках онбординга. Хоть в примере это сделано неидеально, оставлю здесь, как одну из идей.
![FixPrice✅ FixPrice✅](https://habrastorage.org/getpro/habr/upload_files/bd0/916/d7d/bd0916d7d4bba3eccdd5dcef30757173.png)
✅
Обрезание визуального ряда
Если сторис больше, чем видно на экране, спроектируйте их размер так, чтобы последняя видимая история обрезалась, давая понять, что коллекция прокручивается.
![Перекрёсток Впрок✅ Перекрёсток Впрок✅](https://habrastorage.org/getpro/habr/upload_files/b48/30b/b6f/b4830bb6fcb5476b48dbd1f56cb370e4.png)
✅
Блокировка вертикального скролла
При прокрутке коллекции клиент может сделать свайп с небольшим вертикальным смещением. Поэтому в этот момент лучше блокировать вертикальный скролл экрана.
![Маркет Деливери❌ Маркет Деливери❌](https://habrastorage.org/getpro/habr/upload_files/ae5/510/275/ae5510275efa8e6f78eff483bb0f01f4.gif)
❌
Прокрутка при слабом жесте
Коллекция сторис может реагировать даже на небольшие жесты, прокручиваясь при этом на одну историю.
![Lamoda✅ Lamoda✅](https://habrastorage.org/getpro/habr/upload_files/ef7/ce8/7d8/ef7ce87d867b6cd783931322ff0ba0f8.gif)
✅
Привязка ячеек
Использование cell snapping при прокрутке коллекции с историями позволит привязать их к одним и тем же позициям и сделает их расположение более предсказуемым.
![Rendez-Vous✅ Rendez-Vous✅](https://habrastorage.org/getpro/habr/upload_files/83b/edb/c9c/83bedbc9ca79855202bc12e299830230.gif)
✅
Миниатюры в виде кружков
Классический вид миниатюр для сторис, к которому привыкли пользователи запрещённой социальной сети и привыкнут пользователи Telegram — кружки.
![Telegram✅ Telegram✅](https://habrastorage.org/getpro/habr/upload_files/114/3c0/741/1143c0741d97a2128ed29a2e4658ca63.png)
✅
Альтернативы кружкам
Однако часто можно встретить миниатюры в виде квадратов или вертикальных карточек: это позволяет сделать контент в них более заметным (и иногда разместить на них текст).
![Мой МТС✅ Мой МТС✅](https://habrastorage.org/getpro/habr/upload_files/8cf/297/70a/8cf29770ac9ca5730a5a5ec5a412698a.png)
✅
Не в виде горизонтальных карточек
При этом, горизонтальных карточек лучше избегать: каждая карточка начинает занимать слишком много места, и на экране их помещается гораздо меньше.
![Лента❌ Лента❌](https://habrastorage.org/getpro/habr/upload_files/f7d/f4f/cce/f7df4fccec906870506785a57e447349.png)
❌
Highlight непросмотренных сторис
Выделяйте новые истории на фоне просмотренных, чтобы смещать на них фокус внимания. Делать это можно за счёт обводок миниатюр или маркеров.
![Авито✅ Авито✅](https://habrastorage.org/getpro/habr/upload_files/882/afa/dc7/882afadc72f1d6d1f2f0a422fbf03eb1.png)
✅
Визуальное разнообразие
По возможности сделайте так, чтобы коллекция миниатюр выглядела разнообразной. Ставить в ряд похожие изображения — вероятно, не лучшая идея.
![СпортМастер❌ СпортМастер❌](https://habrastorage.org/getpro/habr/upload_files/c8e/c52/3f9/c8ec523f9724e1377d989e4a5e1e656b.png)
❌
Названия под миниатюрами
Первый вариант размещения текста названий — под миниатюрами. Так оба этих элемента не будут конкурировать между собой за внимание клиента.
![Золотое Яблоко✅ Золотое Яблоко✅](https://habrastorage.org/getpro/habr/upload_files/475/164/ab6/475164ab6b2babe0a48ab40f7ea27dd5.png)
✅
Названия краткие
Базовый момент: если вы сделаете названия слишком длинными так, что они начнут обрезаться, какой в этом смысл, если клиент не увидит обрезанный текст?
![Пятерочка❌ Пятерочка❌](https://habrastorage.org/getpro/habr/upload_files/857/2c1/1e8/8572c11e86a36e43326bd099517a5a6a.png)
❌
Названия на миниатюрах?
Если вы решили размещать названия сторис поверх миниатюр, учтите, что создаёте себе ещё одну задачу: каждый раз проверять, что текст легко читается на фоне.
![Metro❌ Metro❌](https://habrastorage.org/getpro/habr/upload_files/515/729/086/515729086f3d85820c8c89e2231cfd1a.png)
❌
Текст не мельчит
Что точно не стоит делать — так это размещать в миниатюре мелкий текст, который, кроме боли в глазах, ничего клиенту не принесёт.
![Lamoda❌ Lamoda❌](https://habrastorage.org/getpro/habr/upload_files/b53/b6f/ba1/b53b6fba1fcfc49000ddebb7d1d1a811.png)
❌
Единый формат текста
По возможности не используйте разные шрифты для заголовков в сторис. Это лишь создаст ненужную когнитивную нагрузку.
![Rendez-Vous❌ Rendez-Vous❌](https://habrastorage.org/getpro/habr/upload_files/03f/fa9/4e3/03ffa94e34b1ffbad53232ad13fdfc65.png)
❌
Маркеры в миниатюрах
Если ваши сторис можно классифицировать по тематикам, добавление небольших маркеров может подсветить контент конкретных типов и облегчить восприятие.
![СпортМастер✅ СпортМастер✅](https://habrastorage.org/getpro/habr/upload_files/2c3/762/fd6/2c3762fd6bef07c7dca8f7884809962b.png)
✅
Соответствие миниатюры контенту
Миниатюра каждой сторис должна быть репрезентативна и соответствовать контенту, с которым клиент столкнется при тапе по ней.
![Лента❌ Лента❌](https://habrastorage.org/getpro/habr/upload_files/51d/c7c/c60/51dc7cc600feba5762a17c21c2e5ea0c.gif)
❌
Анимированные миниатюры
Миниатюры можно избирательно анимировать – так они привлекут больше внимания. Главное не делать так со всеми миниатюрами в коллекции.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/b83/178/5c5/b831785c511841edb5861a65b1a5f43b.gif)
✅
Highlight количества слайдов
Telegram использует разделение обводки на части, чтобы подсветить число слайдов в историях. Как вам такое исполнение? Напишите в комментах.
![Telegram✅ Telegram✅](https://habrastorage.org/getpro/habr/upload_files/5b7/d38/3b4/5b7d383b4664b05efb21c3354ee828c6.png)
✅
Сортировка по значимости
Первый вариант сортировки — разместить наиболее важные для клиента сторис вначале, чтобы повысить шансы на то, что клиент их заметит.
![S7 Airlines✅ S7 Airlines✅](https://habrastorage.org/getpro/habr/upload_files/6f1/7ef/fc7/6f17effc71c23d5994518ec9fa37823e.png)
✅
Сортировка по свежести
Другой рабочий вариант — сортировать истории по дате публикации: клиент столкнётся с наиболее свежим контентом.
![Золотое Яблоко✅ Золотое Яблоко✅](https://habrastorage.org/getpro/habr/upload_files/399/e4c/a5b/399e4ca5bf1e996315d8b1e03ebe1ff5.gif)
✅
Просмотренные — в конце
Если клиент просмотрел историю, её можно выводить в конец коллекции, повышая видимость ещё непросмотренных сторис.
![Додо Пицца❌ Додо Пицца❌](https://habrastorage.org/getpro/habr/upload_files/136/d02/121/136d02121b143d77e5aa13c2e7a4cf00.png)
❌
Что делать с просмотренными
Тинькофф идет чуть дальше и позволяет клиенту самому решить в настройках: оставлять просмотренные сторис в конце списка или полностью их скрывать.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/396/683/53d/39668353d5aea101849c8927673f97bc.png)
✅
2. Открытие сторис
Реакция на касание
Миниатюры можно сделать интерактивными, чтобы они реагировали на касание, тем самым делая интерфейс более отзывчивым.
![AliExpress✅ AliExpress✅](https://habrastorage.org/getpro/habr/upload_files/425/88b/825/42588b82594ab598a796422d1dcf3818.gif)
✅
Анимация увеличения
При нажатии на миниатюру она может визуально увеличиваться до полноэкранного изображения, делая переход к просмотру истории более плавным.
![Auto.ru✅ Auto.ru✅](https://habrastorage.org/getpro/habr/upload_files/e46/e57/f90/e46e57f90bae6453eeee6ae77fb04a43.gif)
✅
Анимация покрытия
Также достаточно часто можно встретить появление сторис с помощью экрана, появляющегося поверх основного снизу или сбоку.
![Циан✅ Циан✅](https://habrastorage.org/getpro/habr/upload_files/46b/b4b/d15/46bb4bd1586b0d33ec3107b12bdf2013.gif)
✅
Не при каждом запуске приложения
Не стоит отображать сторис при каждом входе в приложение. Такая настырность может сыграть злую шутку с уровнем удержания клиентов.
![Sokolov❌ Sokolov❌](https://habrastorage.org/getpro/habr/upload_files/415/447/973/4154479731051c66d09bf6fbea9c2687.gif)
❌
Загружаются мгновенно
Оптимизируйте процесс загрузки сторис, чтобы не обрекать клиента на муки ожидания при тапе по миниатюре или переходе к следующей истории.
![Самокат❌ Самокат❌](https://habrastorage.org/getpro/habr/upload_files/91a/7b0/d8e/91a7b0d8e5b0b62c42821a14e48a216b.gif)
❌
Индикатор загрузки
Если история достаточно много «весит» и на её загрузку всё же требуется время, лучше отображать индикатор прогресса загрузки, а не просто пустой экран.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/411/2a9/48d/4112a948db4f28dab32edc6f260e52dd.gif)
✅
3. Темы для сторис
Контентное разнообразие
Не ограничивайтесь каким-то одним типом историй — сделайте контент разнообразным, чтобы клиенты не уставали от него. Придумывайте что-то новое. Но что? (ответы ниже).
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/881/23a/670/88123a670f0291f85fede1e3d480f042.gif)
✅
Акции
Начнем с простого: в e-commerce с помощью историй большинство игроков не упускают возможность рассказать клиенту о том, какие у них есть акции.
![Магнит✅ Магнит✅](https://habrastorage.org/getpro/habr/upload_files/21e/f07/cd2/21ef07cd2680c499aa8929ec240aaf29.png)
✅
Анонсы
Также сторис можно использовать для того, чтобы донести ключевые анонсы: запуск новой коллекции, появление новых брендов и другие.
![Lamoda✅ Lamoda✅](https://habrastorage.org/getpro/habr/upload_files/8f0/f26/300/8f0f26300655036ad8881fd2824af239.png)
✅
Описание услуг
Некоторые компании рассказывают в историях о различных дополнительных услугах, повышая осведомлённость клиентов о них.
![Авито✅ Авито✅](https://habrastorage.org/getpro/habr/upload_files/b72/783/4b6/b727834b620e57edf2002562b076452e.png)
✅
Отзывы покупателей
Истории также можно использовать для трансляции социального доказательства, подсвечивая позитивные отзывы и обзоры на товары от клиентов.
![O'STIN✅ O'STIN✅](https://habrastorage.org/getpro/habr/upload_files/0eb/cf7/236/0ebcf723625fb64e602f28a5a07e9d5b.png)
✅
Пользовательский контент
По аналогии с отзывами, пользовательский контент может играть роль социального доказательства – просто покажите, как клиенты успешно используют ваши товары.
![Rendez-Vous✅ Rendez-Vous✅](https://habrastorage.org/getpro/habr/upload_files/16f/87f/dc1/16f87fdc16a919f5fed8229bf323cb23.png)
✅
Подборки
Часто в сторис можно встретить различные подборки: направления для путешествий, модные образы, ингредиенты блюда и т.д. – с переходом к соответствующим товарам.
![One Two Trip✅ One Two Trip✅](https://habrastorage.org/getpro/habr/upload_files/32a/cb5/0cc/32acb50cc91805d21572a26fd2e6bbff.png)
✅
Помощь в выборе
В сторис можно устроить своеобразный guided selling, помогая клиенту выбрать из большого разнообразия тот товар, который придется по вкусу.
![SimpleWine✅ SimpleWine✅](https://habrastorage.org/getpro/habr/upload_files/c1f/3dc/410/c1f3dc410bf40b0d79d5b93033837554.png)
✅
Полезные советы
Подумайте, как вы можете сделать жизнь ваших клиентов проще, лучше, и поделитесь полезными советами в сторис.
![O'STIN✅ O'STIN✅](https://habrastorage.org/getpro/habr/upload_files/19b/efe/bad/19befebadf3b4aae8dbd9a3ffff4c99b.png)
✅
Интересные факты
Помимо прочего, в сторис вы также можете размещать просто интересные факты, которые могут привлечь внимание клиента.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/c4e/7c3/176/c4e7c317645fd080de32dbd1de68efab.png)
✅
Опросы
В сторис можно размещать различные опросы: таким образом, истории могут стать дополнительным каналом сбора обратной связи от клиентов.
Квизы
Иногда в сторис также можно встретить и квизы, которые являются частью развлекательного контента для клиентов компании.
![Циан✅ Циан✅](https://habrastorage.org/getpro/habr/upload_files/f91/335/73c/f9133573c1ee334160293900dd81009b.png)
✅
Предложение подписки
Через сторис можно рассказать клиенту о том, что у вас есть Telegram-канал, социальные сети или рассылка, подсветить ценность и предоставить возможность быстрой подписки.
![S7 Airlines✅ S7 Airlines✅](https://habrastorage.org/getpro/habr/upload_files/6fd/43a/350/6fd43a35064271cf33b37e1a031ebc55.png)
✅
Описание работы сервиса
Сторис — также хорошее место, чтобы описать, как работает ваш сервис и как совершать на нём покупки.
![AliExpress✅ AliExpress✅](https://habrastorage.org/getpro/habr/upload_files/ccc/c78/323/cccc783232af5be2e642df27be99fb99.png)
✅
Уведомления об улучшениях
Если вы улучшили своё приложение и сделали путь клиента более удобным, почему бы не рассказать об этом с помощью сторис?
![СпортМастер✅ СпортМастер✅](https://habrastorage.org/getpro/habr/upload_files/aef/7a6/fbb/aef7a6fbbdba100be388e26aeec32568.png)
✅
Рекламные сторис
А некоторые крупные игроки помимо контента, полезного для своих клиентов, также размещают и контент, полезный для рекламодателей.
![Auto.ru? Auto.ru?](https://habrastorage.org/getpro/habr/upload_files/6fe/176/c68/6fe176c68b36873471e0609b2ccb98be.png)
?
Персонализация под сегменты
Состав сторис можно подстраивать под ключевые сегменты клиентов, чтобы сделать их более релевантными.
![Rendez-Vous✅ Rendez-Vous✅](https://habrastorage.org/getpro/habr/upload_files/c36/1f0/01d/c361f001d74891c4237b34d27674a954.gif)
✅
Персонализация под клиента
Делая сервис и контент более персонализированным, не обходите стороной и истории. Это позволит сделать их более вовлекающими.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/235/cc0/0c1/235cc00c16920a755ff8cd12cf0151d3.png)
✅
4. Просмотр сторис
Контент историй актуален
Размещая акции, анонсы и прочий привязанный к датам контент, не забывайте своевременно их «чистить», чтобы клиент сталкивался только с актуальными историями.
![Kari✅ Kari✅](https://habrastorage.org/getpro/habr/upload_files/a62/5c2/582/a625c2582abfc71dfe082021f13d0d64.png)
✅
Контент информативен
Вместо того чтобы использовать сторис как placeholder со ссылкой на каталог, разместите в них больше контента. В примере в сторис так и просится сама подборка хитов:
![SimpleWine✅ SimpleWine✅](https://habrastorage.org/getpro/habr/upload_files/e6a/b05/054/e6ab05054891280fe4368bf83e09a188.png)
✅
Сторис полноэкранные
Сделайте сторис полноэкранными. Нет смысла оставлять небольшие области фонового экрана, незанятые ими. Особенно эти области не функциональны.
![Пятерочка❌ Пятерочка❌](https://habrastorage.org/getpro/habr/upload_files/0a9/15e/120/0a915e120e9591fb6bef30fd3bf5c203.png)
❌
Отображаются корректно
Контент историй должен корректно отображаться. База? Да, база. Но даже крупные компании иногда упускают это из виду и пропускают «косяки» в production.
![Лента❌ Лента❌](https://habrastorage.org/getpro/habr/upload_files/0a6/647/e96/0a6647e96900137249b913fb17063676.png)
❌
Контент в хорошем качестве
Контент должен грузиться быстро, но при этом не стоит перегибать палку с его качеством — так, что он начинает пикселить. Лучше найти золотую середину.
![Золотое Яблоко❌ Золотое Яблоко❌](https://habrastorage.org/getpro/habr/upload_files/544/df7/306/544df7306b4a8b6103618b5d56049e46.png)
❌
Подсказки
Некоторые отдельно обучают клиента тому, как взаимодействовать со сторис. Перебор? Или неплохо? Напишите в комментах.
![Самокат? Самокат?](https://habrastorage.org/getpro/habr/upload_files/4e9/9ed/bf3/4e99edbf3b50c344fa8442733411adf4.gif)
?
Текст легко читается на фото
Часто компании размещают текст поверх фото и видео. В этом случае важно убедиться, что он легко читается: контрастен и не расположен на пестром фоне.
![Rendez-Vous❌ Rendez-Vous❌](https://habrastorage.org/getpro/habr/upload_files/684/33b/e00/68433be0046a329a9693501bf3aa1b62.png)
❌
Затемнение фона
Некоторые компании специально используют для этого полное или частичное затемнение фоновой области, позволяющее легче прочитать текст.
![Lamoda✅ Lamoda✅](https://habrastorage.org/getpro/habr/upload_files/bd2/c45/eae/bd2c45eaea440d71eef106e25c960d87.png)
✅
Без чрезмерного затемнения
Однако не стоит перебарщивать с уровнем затемнения фона. Иначе есть риск, что ваши сторис станут чересчур мрачными.
![ВкусВилл❌ ВкусВилл❌](https://habrastorage.org/getpro/habr/upload_files/171/c33/09a/171c3309a0dad5aae7d7757f035e0a8a.png)
❌
Заливка текстовых блоков
Некоторые размещают текст на одноцветной контрастной заливке, чтобы он лучше читался и выделялся на фоне.
![Золотое Яблоко✅ Золотое Яблоко✅](https://habrastorage.org/getpro/habr/upload_files/dc8/bd6/f0d/dc8bd6f0d10987507b728406ae7716a1.png)
✅
Без звука по умолчанию
Клиент может смотреть ваши сторис в совершенно разных обстоятельствах, и видео со звуком, включенным по умолчанию, может стать «неприятным сюрпризом».
![Золотое Яблоко❌ Золотое Яблоко❌](https://habrastorage.org/getpro/habr/upload_files/6f9/6fe/6ca/6f96fe6ca17633f62bef4ba1281bba08.png)
❌
Субтитры для видео
Учитывайте, что у большой части клиентов стоит беззвучный режим. Поэтому если в сторис есть видео, лучше снабдить его субтитрами.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/5a8/e0b/f4c/5a8e0bf4ce461c43ba600a7e9ade5913.png)
✅
5. Отслеживание прогресса
Индикатор прогресса добавлен
Стандартный механизм управления ожиданиями о том, когда произойдет переход к следующей истории — progress-индикатор в её верхней части.
![S7 Airlines✅ S7 Airlines✅](https://habrastorage.org/getpro/habr/upload_files/ed3/13c/b8d/ed313cb8dfd6ff7181103c26aa1aa822.png)
✅
Индикатор хорошо заметен
Сделайте индикатор хорошо заметным, чтобы он не терялся на фоне самой истории, и клиент в любой момент мог понять прогресс просмотра.
![FixPrice❌ FixPrice❌](https://habrastorage.org/getpro/habr/upload_files/712/9bc/a2f/7129bca2f87b659efc257ab52fc569dd.png)
❌
Вынос индикатора за сторис
Иногда, чтобы индикатор был лучше виден, его выносят за рамки контента истории и размещают на контрастном фоне.
![Магнит✅ Магнит✅](https://habrastorage.org/getpro/habr/upload_files/f17/b1f/187/f17b1f18729bb305c6d1442488d132e9.png)
✅
Индикатор не дублируется
Нет смысла дублировать индикатор прокрутки сторис в рамках одного экрана. Если вы поняли глубокий смысл того, что в примере, напишите, пожалуйста, в комментах.
![FixPrice❌ FixPrice❌](https://habrastorage.org/getpro/habr/upload_files/cf0/2cd/3c2/cf02cd3c259ce354a48b5cefc0b9b791.png)
❌
Число элементов = число слайдов
Базовый момент: количество блоков в индикаторе должно соответствовать числу слайдов в просматриваемой истории, а не общему числу историй.
![Подружка❌ Подружка❌](https://habrastorage.org/getpro/habr/upload_files/7ea/2db/835/7ea2db835d283aeec3c9176c917f4e05.gif)
❌
Скорость автопрокрутки
Сделайте скорость автопрокрутки достаточной, чтобы клиент успевал воспринять как минимум визуальный контент.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/c0b/2c0/c86/c0b2c0c861bd6906f332fec99e00c258.gif)
✅
Плавная анимация индикатора
Анимацию заполнения индикатора лучше сделать максимально плавной. В примере шаг анимации слишком большой, и она выглядит прерывистой на фоне снеговика.
![Яндекс Go❌ Яндекс Go❌](https://habrastorage.org/getpro/habr/upload_files/a62/5bc/7b1/a625bc7b110ca816ef628cd746e45a7b.gif)
❌
Прогресс vs. выцветание
Встречаются кейсы, когда индикатор прогресса не только заполняется, но и становится менее прозрачным. Как вам такое исполнение? Напишите в комментах.
![Kari? Kari?](https://habrastorage.org/getpro/habr/upload_files/1b8/e31/193/1b8e31193e632699802a4fbf3627faa5.gif)
?
Остановка прокрутки зажатием
Также распространённая практика — останавливать progress-индикатор при зажатии экрана истории, чтобы клиент успел ознакомиться с контентом.
![Самокат✅ Самокат✅](https://habrastorage.org/getpro/habr/upload_files/b14/4dd/4f4/b144dd4f48319bf136551f053afaf422.gif)
✅
Остановка моментальная
Дьявол кроется в деталях, и часто именно в них возникают неудобства: в некоторых приложениях индикатор продолжал своё движение какое-то время после зажатия.
6. Действия с историями
Возможность поставить лайк
Эффективность контента разных типов можно оценивать с помощью клиентов: дайте им возможность поставить лайк и отслеживайте, какие сторис вырываются в топ.
![Lamoda✅ Lamoda✅](https://habrastorage.org/getpro/habr/upload_files/bf5/ef7/d69/bf5ef7d6923d3652f1a5d35186424566.png)
✅
Счётчик лайков
Клиента можно не оставлять «в вакууме» и отображать, что о сторис думают остальные, добавив индикатор количества лайков.
![Lamoda✅ Lamoda✅](https://habrastorage.org/getpro/habr/upload_files/843/907/0f7/8439070f7090b18b9afad27aa1c701ad.png)
✅
Реакция счётчика на лайк
Лучше отображать в счётчике реальные значения. Но если вы решили пойти «более простым путем» и рисовать числа, не забудьте хотя бы повышать счётчик при лайке.
![Lamoda✅ Lamoda✅](https://habrastorage.org/getpro/habr/upload_files/395/173/b8f/395173b8f35bebfbe580f4f344dd5baa.gif)
✅
Пояснение к лайкам
Тинькофф не просто дает возможность поставить лайк истории, но и поясняет, зачем клиенту вообще это делать — для персонализации. Персонализация — наше всё.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/be0/46a/bab/be046abab529814235183e748d09a6b1.png)
✅
Дизлайк
Иногда клиенту также даётся возможность оставить и дизлайк. Учитывая, что контент размещает компания, дизлайк никого не обидит, но при этом сделает оценку точнее.
![One Two Trip✅ One Two Trip✅](https://habrastorage.org/getpro/habr/upload_files/a79/3a6/7fe/a793a67fedf1e64ec54985d4825e9561.png)
✅
Комментарии
Некоторые также позволяют прокомментировать историю и почитать комментарии остальных клиентов. Интересная фича или уже излишне? Напишите в комментах.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/877/f9d/021/877f9d0216972714b4a86338421bb0ad.gif)
✅
Кнопки действий
Раз уж рассказываете клиентам о своих товарах и представляете их в хорошем свете, почему бы не упростить путь клиента, разместив в сторис кнопку перехода к покупке?
![ВкусВилл✅ ВкусВилл✅](https://habrastorage.org/getpro/habr/upload_files/f47/0ad/dc3/f470addc3fbe6ac0307b2ce39f677050.png)
✅
Кнопки достаточно большие
Чем меньше кнопка действия, тем на неё сложнее нажать. И тем ниже шансы на то, что клиент это целевое действие успешно совершит.
![Подружка❌ Подружка❌](https://habrastorage.org/getpro/habr/upload_files/232/b42/fcb/232b42fcb5079e3c7951b58e43b585fd.png)
❌
Кнопки интерактивны
Чтобы сделать интерфейс более отзывчивым, кнопки целевого действия могут реагировать на нажатие, меняя свой вид.
![Магнит✅ Магнит✅](https://habrastorage.org/getpro/habr/upload_files/815/879/319/8158793192f7c7d3cd6e23296d963e15.gif)
✅
Переход через свайп вверх
Помимо кнопок, переход к целевому контенту можно реализовать с помощью жеста свайпа вверх, который также часто встречается в других приложениях.
![Перекрёсток Впрок✅ Перекрёсток Впрок✅](https://habrastorage.org/getpro/habr/upload_files/6a6/af0/f3b/6a6af0f3bde49ee104a41597e66e2fea.gif)
✅
Целевое действие vs. экран
Убедитесь, что при нажатии на кнопку целевого действия клиент перейдёт к нужному экрану с релевантным контентом.
![Додо Пицца❌ Додо Пицца❌](https://habrastorage.org/getpro/habr/upload_files/8a3/6c0/25c/8a36c025cb9454416cd3abe0144ea4ff.gif)
❌
Целевой контент в контуре
Лучше не уводить клиента из сторис в браузер и размещать целевой контент в рамках приложения. Либо в виде отдельного экрана, либо с помощью webview.
![СпортМастер✅ СпортМастер✅](https://habrastorage.org/getpro/habr/upload_files/7a3/a10/5cd/7a3a105cd90b7516c535c3efe02b904a.gif)
✅
Интеграция с товарами
Иногда ознакомиться с подборкой товаров из истории можно без перехода в листинг, не прерывая просмотр контента.
![Золотое Яблоко✅ Золотое Яблоко✅](https://habrastorage.org/getpro/habr/upload_files/115/5ef/cfd/1155efcfdab8fe79d924c6f927b23b71.gif)
✅
Сохранение историй
Если вы создаёте полезный контент для сторис, логично, что у клиента может возникнуть потребность их сохранить. И круто, если вы предоставите ему эту возможность.
![Самокат✅ Самокат✅](https://habrastorage.org/getpro/habr/upload_files/d7a/61e/89a/d7a61e89aff11a52782ade75057ac548.png)
✅
Понятно, куда сохраняются
Реализовав функцию сохранения историй, позаботьтесь о том, чтобы клиенту было понятно, куда они сохраняются и как получить к ним доступ в будущем (да, тот же самый пример, что и в предыдущем пункте – не ошибка: найти «Сохранёнки» в Самокате не так легко).
![Самокат❌ Самокат❌](https://habrastorage.org/getpro/habr/upload_files/fb7/c49/ffb/fb7c49ffb9b45b2f9c8e8131d0a32151.png)
❌
Шеринг историй
Аналогично предыдущему пункту, создавая полезный контент, который может завируситься, дайте клиентам возможность легко поделиться им с друзьями.
![S7 Airlines✅ S7 Airlines✅](https://habrastorage.org/getpro/habr/upload_files/59e/c35/d71/59ec35d719dfcc369b069a2e179c0a33.png)
✅
Шеринг в контуре приложения
При этом есть выбор: выпускать клиента за пределы приложения или дать поделиться внутри него? Это может работать на повышение активной аудитории пользователей.
![Тинькофф✅ Тинькофф✅](https://habrastorage.org/getpro/habr/upload_files/514/689/610/514689610f88227aa7e2553936610c72.png)
✅
7. Переключение историй
Наличие автопрокрутки
Переход к следующему слайду в рамках одной сторис можно сделать автоматическим — при заполнении progress-индикатора.
![2ГИС✅ 2ГИС✅](https://habrastorage.org/getpro/habr/upload_files/41d/404/a46/41d404a46db22b6ca2b503c09e5fd849.gif)
✅
Тап по бокам экрана
Если клиент не хочет ждать полного заполнения progress-индиактора, тапы по правой и левой области экрана — уже сложившаяся практика переключения между слайдами.
![Циан✅ Циан✅](https://habrastorage.org/getpro/habr/upload_files/309/7ad/2fa/3097ad2fadf36b0840376c96555c7f76.png)
✅
Кнопка действия
В некоторых случаях экран сторис также можно дополнить кнопкой перехода к следующему слайду, чтобы действие было более интуитивно.
![СпортМастер✅ СпортМастер✅](https://habrastorage.org/getpro/habr/upload_files/aef/dc5/188/aefdc5188eeb408c9a3bfe2ae6f64aa5.png)
✅
Свайп в сторону
Чтобы переключаться между целыми историями, можно использовать часто применимый жест — свайп влево или вправо. База, но мы здесь описываем весь процесс в деталях.
![СпортМастер✅ СпортМастер✅](https://habrastorage.org/getpro/habr/upload_files/e89/11b/d02/e8911bd02c09b19741d3e8d681ec10db.gif)
✅
Длина свайпа минимальна
При просмотре историй не стоит накладывать на жест свайпа минимальную длину. Это может вызвать проблемы с переключением у части клиентов.
![One Two Trip❌ One Two Trip❌](https://habrastorage.org/getpro/habr/upload_files/8ee/687/e06/8ee687e06a4abb9c8044511f2265e37e.gif)
❌
Тап по последнему слайду
Также переключение к следующей истории должно происходить при тапе по правой части экрана в последнем слайде просматриваемой истории.
![SimpleWine✅ SimpleWine✅](https://habrastorage.org/getpro/habr/upload_files/c4a/552/c09/c4a552c093b37e607235a0d9e14258b0.png)
✅
Слайды vs. сторис
Для переключения между слайдами и историями лучше сделать разную анимацию, чтобы было легче понять, когда закончилась одна история и началась другая.
![Азбука Вкуса❌ Азбука Вкуса❌](https://habrastorage.org/getpro/habr/upload_files/540/4d8/27d/5404d827dac89a43d77c4180c1e0c835.gif)
❌
Анимация поворота
При переключении между сторис чаще всего используется анимация поворота блока на 90 градусов — разумеется, многие копируют её из всем известного места.
![Kari✅ Kari✅](https://habrastorage.org/getpro/habr/upload_files/cc3/df2/f3b/cc3df2f3b325fc74064c13afc6e817fe.gif)
✅
Анимация наложения
Однако свет не сошелся клином на повороте, поэтому некоторые экспериментируют и реализуют переход между сторис с помощью наложения. Мне нравится.
![Додо Пицца✅ Додо Пицца✅](https://habrastorage.org/getpro/habr/upload_files/c1f/88c/ad2/c1f88cad2e21a3a6b00e9717cb2be6f4.gif)
✅
Анимация замещения
Еще один метод, используемый участниками рынка — анимация замещения карточек. Как вам такой вариант по сравнению с предыдущими? Напишите в комментах.
![Магнит? Магнит?](https://habrastorage.org/getpro/habr/upload_files/33d/881/390/33d881390f6c180f417807d97f72eabe.gif)
?
8. Закрытие историй
Смахивание вниз
Наиболее стандартная практика, тянущаяся еще из запрещённой сети — смахнуть сторис вниз, чтобы её закрыть.
![AliExpress✅ AliExpress✅](https://habrastorage.org/getpro/habr/upload_files/9bb/93a/5ba/9bb93a5baba336f8622eb51856f67bbc.gif)
✅
Закрытие через крестик
Действие свайпа вниз также можно дополнить интуитивной кнопкой крестика в правой верхней части экрана.
![2ГИС✅ 2ГИС✅](https://habrastorage.org/getpro/habr/upload_files/281/422/21a/28142221a2e1f07b5a787c70c5c44ee6.png)
✅
Просмотр всех сторис
Если вы не социальная сеть, рано или поздно истории с вашими акциями, гайдами и т.д. закончатся — и в этот момент клиента по-хорошему нужно автоматом выводить из режима просмотра.
![СпортМастер✅ СпортМастер✅](https://habrastorage.org/getpro/habr/upload_files/cb9/937/40b/cb993740b594297d85bcd4aa65137716.gif)
✅
Просмотр одной истории?
Но встречаются кейсы, когда история закрывается без перехода к следующей сразу после просмотра слайдов в ней. Чем такая практика хороша и плоха? Напишите в комментах.
![Маркет Деливери? Маркет Деливери?](https://habrastorage.org/getpro/habr/upload_files/148/9c4/513/1489c4513c9f5cb443c403402c4e44e0.gif)
?
To be continued...
Как видим, в сторис, несмотря на казалось бы схожее исполнение в разных приложениях, есть множество нюансов, которые стоит учитывать.
Надеюсь, этот материал поможет вам прокачать насмотренность, а кому-то из вас — ещё и поправить недочёты, сделав истории в своем приложении лучше.
Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если хотите их не пропускать. На связи.
mikegordan
Добрый день.
Что вы думаете по поводу сортировки уже просмотренных в параллели с сайтами новостей, ведь когда вы просмотрели топ новости , заходите через пару часов, то всё равно видите топ новости не смотря на то что смотрели вы или нет. И второй вопрос про длину , вы написали супер абстрактно, хотелось бы услышит ваше мнение по точной рекомендуемой длине видео(сторис).
hardclient Автор
Добрый день.
Думаю, что это все же разные паттерны: лента новостей исторически сортировалась по хронологии, по дате и времени выхода. «Пропажа» прочитанной новости из ленты в таком случае будет неожиданностью.
Сторис (именно не в контексте соц.сетей, а при использовании, например, в e-commerce) – это просто еще 1 канал, позволяющий доносить ключевые месседжи, и чем больше их клиент просмотрит, тем лучше для компании. Поэтому многие упрощают путь клиента, перенося просмотренные в конец – клиенту просто не приходится отдельно скроллить карусель, и шансы на то, что он заметит и просмотрит еще одну историю, выше.
Про длину видео я, вроде бы, не писал. Какой-то конкретной идеальной для всех цифры не назову, но думаю, что стоит отталкиваться от того, к какой длину видео в сторис уже привыкло большинство пользователей. В инсте, например, максимальная длина – 60 секунд, за эти рамки в формате сторис, думаю, выходить не стоит.
Также важно понимать, что у всех разная аудитория и разный контент – и это не менее важные факторы, чем длина видео. Если контент интересный и полезный, его будут досматривать до конца. Если клиент не видит в нем ценности, даже короткая длина не спасет.
Кроме того, ответ на этот вопрос можно получить самостоятельно, настроив аналитику и отслеживая, до какого момента клиенты досматривают ваши существующие видео. Если вне зависимости от типа контента, клиенты отваливаются спустя, например, 20 секунд – это и будет ориентир в вашем конкретном случае.