Система рекомендаций — это элемент интерфейса, который помогает пользователю находить релевантный контент на основе его интересов и поведения на сайте. Она анализирует действия пользователя и предлагает подходящие товары, статьи или другие материалы.
На современных веб-сайтах рекомендации встраиваются в различные части интерфейса: главную страницу, карточки товаров, ленту контента и т. д. Эффективность подачи рекомендаций зависит от того, заметит ли их пользователь и сочтет ли полезными.
Блоки рекомендаций
Основная структура включает заголовок секции, карусель или сетку рекомендаций и иногда элементы управления. Каждая рекомендация должна содержать изображение, название и краткое описание. Важно не забыть продумать удобный доступ ко всем действиям.
Типы отображения
Рекомендации можно отображать разными способами, например, в виде горизонтальной ленты, вертикального списка или плиточной сетки. Каждый формат имеет свои преимущества: лента экономит место, список удобен для чтения, плитки показывают больше деталей. В принципе, правила похожи на рекомендации проектирования галереи изображений.
Компоновка карточки
Карточка рекомендации должна быть построена таким образом, чтобы главная информация была размещена сверху, а детали ниже, это обусловлено направлением скролла и особенностями человеческого глаза. Изображение занимает 50-60% пространства, остальное — текст и кнопки действий.
Интерактивность карточек
При наведении карточка может отреагировать небольшим увеличением, подсветкой, появлением дополнительных действий или сменой изображения. Главное — дать понять пользователю, что на нее можно кликнуть. Однако, следует избегать перегрузки анимацией, чтобы не отвлекать от контента.
Обратная связь
В более сложных интерфейсах возможно добавление взаимодействий с рекомендациями, такими, как отметка релевантных, скрытие неинтересных, сохранение и т. д. Не забывайте каждое действие сопровождать небольшой анимацией.
Мобильная версия
На телефонах рекомендации чаще всего показываются горизонтальной прокруткой. Карточки становятся компактнее, сохраняя только ключевую информацию.
Планшетная версия
На планшетах можно использовать сетку из двух-трех колонок. Карточки получают больше пространства для контента. Навигация может быть улучшена, если это необходимо, возможно появление стрелок прокрутки и меток определения положения.
Десктопная версия
Широкие экраны позволяют информативно отображать от 4 до 6 колонок рекомендаций одновременно. Не забывайте про ховер-эффекты и максимальные возможности у навигации.
