Доказательство того, что списки превосходят карточки

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

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

Источник: Google Material Design

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

Goal.com ios
Скриншоты приложения Goal.com, основанного на карточном UI

Отзыв после редизайна

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

Мы ожидали подобную реакцию после перезапуска приложений Goal News и Live Scores. Ни одно из приложений не подвергались редизайну на протяжении многих лет. На основании этого, мы решили внести изменения. Выслушать конструктивную критику. Затем, определить общие закономерности, которых нам следует придерживаться.

Наше первое знакомство с карточками случилось после запуска Goal News (изображено выше). Появилось небольшое количество жалоб на количество статей, которые видны на экране. Например:

Goal News редизайн
Отзывы пользователей касательно карточек.

Слишком много картинок и прокрутки. Я просто хочу быстро прочесть новости.

Мне пришлось прокручивать много картинок, чтобы увидеть все новости… нет возможности просмотреть все новости сразу…

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

Описанное ниже исследование описывает, почему метод карточек не удовлетворяет такие цели.

Нужно копнуть немного глубже

Используя HotJar для анализа кликов и расстояния прокрутки на нескольких наших сайтах, мы заметили несколько общих моментов. Главная страница сайта Spox.com недавно подвергалась редизайну. Новый дизайн сфокусирован на показе новостной ленты над основной информацией.

Spox.com - до редизайна
Spox.com — до редизайна

Прежняя главная страница показана выше. Вы можете увидеть большое количество кликов над баннером Spox TV Playoffs. Эти клики были сделаны только для навигации по карусели. Они насчитывают 43% всех кликов по странице. Создается впечатление, что они привлекают большое количество кликов потому, что один пользователь может кликнуть на несколько карточек в рамках одной сессии.

22% от общего количества кликов приходятся на тему дня (Topics of the Day). Этот список появляется только на первом элементе карусели! Редизайн должен был отделить тему дня от карусели таким образом:

Spox.com - после редизайна
Spox.com — после редизайна

Результат был поразительным, клики на тему дня выросли втрое, до 59%.

Интересно, что подход списка к навигации карусели вызвал противоположный эффект. Удалив изображения, мы практически потеряли все взаимодействие с пользователем в этой области. Теперь это составляет только 1% кликов. Огромная разница с прошлым вариантом, где клики по карусели составляли 43%.

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

Мобильные шаблоны

Мы посмотрели на поведение пользователей на мобильной платформе. У нас был доступ к UI сайта, основанного на списке (ниже, слева) и два UI, основанных на карточках (ниже по-центру и справа). Мы прекрасно понимаем, что мы не сравниваем один и тот же сайт (как было выше). Но выводы мы все равно можем сделать.

Мобильные клики и прокрутки (Hotjar)
Мобильные клики и прокрутки (Hotjar)

Карточки увеличивают использование меню

Сравниваем использование меню. Можно отметить, что меню чаще используется на сайтах, основанных на карточках. Статистика:

Слева: Voetbalzone — 0,48% — UI список

По-средине: Spox — 17,43% — UI карточки

Справа: Goal — 4,93% — UI карточки

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

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

Использование карточек на Goal (справа) заставляет пользователей прокручивать вниз страницы. В этом нет ничего необычного, особенно учитывая, что каждая карточка находится на 38% выше в сравнении с Voetbalzone (слева). Даже при том, что пользователи много прокручивают, они видят меньше контента (на 3 статьи меньше, если сравнить сайты справа и слева).

Количество статей в области видимости

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

Учитываются только главные страницы сайтов и 2 сценария. Первый: место над основным контентом. Второй: прокрутка до “лучшей” позиции — места, где можно увидеть наибольшее количество новостей. Для того, чтобы тест прошел честно, мы:

  • Учитываем статьи, название которых видно на 100%
  • Выставляем максимальный размер браузера (Macbook 13”)
  • Используем один браузер (Google Chrome)
  • Выставляем зум 100%
  • Включаем Ad Block (баннера могут быть разными по высоте)

Для начала смотрим на заголовки:

Верхний ряд - карточки. Нижний ряд - список.
Верхний ряд — карточки. Нижний ряд — список.

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

Лучшее положения для просмотра новостей список
Лучшее положения для просмотра новостей. Верхний ряд — карточки. Нижний ряд — список.

Анализируя результаты, можно сказать, что вы можете запросто удвоить количество новостей в случае со списком. Если сравнить от худшего к лучшему, то OneFootball (карточки) может отобразить максимум 6 заголовков статей. Voetbalzone (список) может показать 19 заголовков на такой же позиции.

статистика по дизайну с карточками и по дизайну списком

Другие примеры списка и карточек

Не только пользователи задумываются об этом вопросе. Например, Google проводил A/B тестирование страниц результатов поиска.

A/B тестирование поиска Google
A/B тестирование поиска Google

Результат поиска Google — более яркий пример, хоть и отражает меньше информации на странице.

Совет от Material Design

Так когда же лучше использовать список? Material Design полагает, что списки “быстрее сканировать глазами”, особенно при отображении похожего и повторяющегося контента.

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

Google Material Design
Совет от команды Google Material Design

Заключение

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

Карточки привлекают больше внимания. Дополнительная информация (например теги), могут быть размещены на карточках. Они дают пользователю более глубокий контекст перед началом использования.

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