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

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

На нашем сайте KnigaRead.com Вы можете абсолютно бесплатно читать книгу онлайн Сьюзан Уэйншенк, "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 % страниц просматривались до конца.

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

Выводы

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

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

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

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

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

Перейти на страницу:
Прокомментировать
Подтвердите что вы не робот:*