Проектируем функционал сторис
Лучшие практики 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
Уведомления об улучшениях
Если вы улучшили свое приложение и сделали путь клиента более удобным, почему бы не рассказать об этом с помощью сторис?
СпортМастер
Рекламные сторис?
А некоторые крупные игроки помимо контента, полезного для своих клиентов, также размещают и контент, полезный для рекламодателей.
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...
Как видим, в сторис, несмотря на казалось бы схожее исполнение в разных приложениях, есть множество нюансов, которые стоит учитывать.
Надеюсь, этот материал поможет вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав истории в своем приложении лучше.
Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Надеюсь, этот материал поможет вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав истории в своем приложении лучше.
Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Все статьи по e-commerce