100 новых главных принципов дизайна. Как удержать внимание - Сьюзан Уэйншенк

Исследователи из Калифорнийского университета в Беркли решили переосмыслить подход к этому вопросу.

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

До настоящего момента возможность просматривать, сканировать и перематывать видео предоставлялась относительно редко. Поэтому группа из Калифорнийского университета предложила идею видеодайджеста.

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

Рисунок 87.1 демонстрирует интерфейс видеодайджеста.

Группа также разработала инструмент для создания дайджестов. Он дает возможность:

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

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

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

Режимы 1 и 3 позволяют получить более содержательный дайджест. Но даже дайджест, созданный в автоматическом режиме, лучше, чем полное его отсутствие.

Рис. 87.1. Интерфейс видеодайджеста

Страница инструмента на сайте университета http://vis.berkeley.edu/papers/ videodigests/.

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

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

88

Люди взаимодействуют с виджетом карусель

Добавлять или не добавлять карусель – вот в чем вопрос.

Первым делом напомню вам, что это такое. Карусель представляет собой элемент интерфейса, обычно используемый на веб-сайтах, демонстрирующий изображение, которое затем автоматически или по щелчку или движению пальца пользователя сменяется другим изображением. Таким способом посетителю демонстрируется целая «галерея» картинок.

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

Людям нравится высказывать свою ненависть к каруселям. В своем блоге 8 июля 2013 года Эрик Рунион указал данные с сайта университета Нотр-Дам ND.edu (http://erikrunyon.com/2013/07/carousel-interaction-stats/):

На главной странице университета ND.edu, где располагался виджет карусель, посетители часто кликали по первому изображению (например, в 89 % посещений), но практически оставляли без внимания все остальные (клики на изображении 2–3 %, на изображении 3–2 % и т. д.).

На ведомственной странице ND.edu тенденция сохранилась, но была менее выражена – посетители часто кликали на первом изображении в виджете карусель (например, в 71 % случаев), на второй картинке – в 7 % случаев.

Но на новостной странице сайта ND.edu ситуация выглядела по-другому. Клик на первом изображении карусели следовал в 55 % случаев, второе изображение удостаивалось клика в 18 % случаев, третье – в 11 % случаев и т. п.

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

Но это еще не все

Перед тем как мы попробуем сделать выводы, ознакомимся с дополнительной информацией. 9 февраля 2015 года в своем блоге Кайт Питт дал ссылку на пост Руниона и представил собственные данные (https://www.smashingmagazine.com/2015/02/carousel-usage-exploration-on-mobile-e-commerce-websites/). Вот некоторые из его выкладок:

• Питт утверждает, что данные Руниона базируются на таком показателе, как количество кликов, в то время как следует учитывать любые варианты взаимодействия пользователя с виджетом. Проанализировав свои собственные данные с учетом всех взаимодействий, Питт обнаружил, что количество взаимодействий на его тестовом сайте возросло с 23 до 72 %. Зачастую пользователи вместо клика или нажатия пальцем на изображении просматривали все или несколько изображений карусели, что тоже следовало учитывать как взаимодействие.

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

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

• Основная претензия к каруселям состоит в том, что при отсутствии взаимодействия они превращаются в обычные большие картинки на странице. На это Питт возражает следующим образом: «Ну и что? Что плохого в наличии на странице большой картинки?»

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

• Карусель – это не всегда плохо. Не следует полностью исключать их из своих проектов.

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

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

89

Люди пользуются прокруткой

Споры о том, является ли полоса прокрутки «хорошим» или полезным элементом интерфейса, велись долгое время. Что делать, если требуется представить большое количество информации? Следует ли выкладывать все на одной странице, заставляя пользователей прибегать к прокрутке? Или лучше распределить сведения на несколько страниц?

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

Примечание. Термин «сгиб» появился как аналогия с газетным листом. Если газету сложить пополам, часть текста окажется над сгибом, а часть – под сгибом. Аналогичная ситуация наблюдается онлайн, просто словосочетание «над сгибом» относится к тому, что люди видят, не пользуясь прокруткой.

Компания Chartbeat проанализировала данные о 2 миллиардах посещений сайтов, и оказалось, что 66 % времени посещения люди находятся «под сгибом». Другими словами, прокруткой люди пользуются.

Компания ClickTale проанализировала 100 000 посещений сайтов и указала в отчете, что прокруткой посетители пользовались на 76 % страниц, а 22 % страниц просматривались до конца.

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

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

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

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

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

• Избегайте «мертвых зон», то есть мест, наполненных настолько неинтересной информацией, что у посетителей не возникает желания пользоваться прокруткой.