Юзабилити в контентных проектах: как сделать ресурс удобным для читателя

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

Как работают эвристики юзабилити в контенте

Интерфейс — источник потерь КПД. В любой момент взаимодействия пользователь может растеряться, не понять что-то и уйти. Поэтому юзабилисты постоянно работают над тем, как снизить потери. Главный пионер юзабилити-науки Якоб Нильсен еще в 1990 году сформулировал десять основных правил юзабилити, которые назвал эвристиками. Вот как они применяются в контентных проектах.

  1. Пользователь всегда должен понимать, что происходит с системой и где он находится. Например, статью в какой рубрике он сейчас читает, как перейти в следующий раздел или вернуться на главную страницу. Классический пример — навигационная цепочка («хлебные крошки»).
Здесь и хлебные крошки, и поиск

2. Система должна быть понятна пользователю. Это называется «человечность»: в интерфейсах следует использовать максимально простой язык — чем ближе к реальному миру, тем лучше: на превью видео лучше написать «посмотреть», чем «ознакомиться».

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

4. Элементы сайта с одинаковыми функциями должны одинаково выглядеть и называться. Блок «новости» не стоит называть на разных страницах по-разному — например, «главное за сегодня», «актуальное» и «повестка дня». Этот пример нарушает еще и правило человечности: «новости» — понятная и привычная для читателя сущность, в отличие от «повестки дня», за которой может скрываться что угодно (от опросов до аналитики).

5. Ошибки на сайте нужно предотвращать, продумывая логику взаимодействия с ними заранее. Если пользователю могут понадобиться подсказки, сделайте их. Например, в окошке комментария можно подписать серым шрифтом (серый традиционно используется для неинтерактивных элементов): «Только авторизованные пользователи могут оставлять комментарии. Пожалуйста, авторизуйтесь» — и ссылку на авторизацию.

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

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

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

9. Если пользователь сталкивается с проблемой, предложите ему решение. Например, если читатель попадает на страницу 404, перенаправьте его на главную страницу или в рубрики. Иначе он просто уйдет с вашего сайта.

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

Управление вниманием в контентных проектах

Управлять вниманием — это организовывать материал так, чтобы подстраиваться под привычные движения глаз пользователя. Читатель скользит взглядом от наиболее заметных объектов к менее заметным и останавливается на том, что ему интересно. Зная, где внимание пользователя ослабевает, можно оставлять в таких местах заметные объекты, чтобы снова разбудить интерес. Именно эту задачу призван решать блок рекомендаций Жирафа: когда посетитель дочитал статью и внимание его ослабло, Жираф отвечает на невысказанный вопрос: «Что же мне почитать дальше?». Далее — другие приемы управления вниманием.

Управление вниманием с помощью композиции

Близкие объекты воспринимаются как одинаковые по содержанию и функции. Человек воспринимает принадлежащими к одной группе объекты, близкие по размеру, форме или цвету. Это называется «теория близости», и лучше всего ее сформулировал Артемий Лебедев. К несчастью, теорию близости нарушают чаще, чем другие правила. Вспомните сами, когда начало текста отделяется от заголовка иконками соцсетей, подпись к иллюстрации можно спутать с обычной строчкой, и самое раздражающее — реклама посередине статьи.

Слева заголовок нарушает теорию близости, справа — грамотно приклеен к своему абзацу.

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

Управление вниманием с помощью графики

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

Главная иллюстрация организует страницу и задает порядок чтения

Иллюстра­ция и заго­лов­ки слу­жат мости­ка­ми к тек­сту. Но как рас­ста­вить на стра­ни­це допол­ни­тель­ные ловуш­ки для чита­те­ля и сде­лать стра­ни­цу интереснее? Доба­вить цита­ту и фактоид. Вынесен­ная цита­та замет­на, если её выде­лить круп­ны­ми кавыч­ка­ми и доба­вить фото­гра­фию авто­ра выска­зы­ва­ния. Если цита­та инте­рес­ная или спор­ная, чита­те­лю захо­чет­ся узнать подроб­но­сти в тексте.

Пример из книги «Типографика и верстка»

В последнее время вошло в моду иллюстрировать статьи видео и гифками, как на примере выше :-). Это работает, потому что глаз регистрирует движение лучше, чем статичное изображение.

Управление вниманием с помощью цвета

Цвет обладает экстраординарной способностью влиять на настроение, эмоции и восприятие. Кроме того, с помощью цвета можно:

— привлекать внимание к важной информации;

— указывать на интерактивность (выделение ссылок);

— зонировать, отделять элементы друг от друга;

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

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

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

Как извлечь из теоретического знания полезность для контентного проекта?

На этот счет полезное правило сформулировали в Тильде: работайте с цветом в зависимости от цели проекта. Если упростить, то визуальная коммуникация транслирует две главные мысли: либо «я самый крутой», либо «я самый веселый».

Контентные проекты, попадающие под определение «я самый крутой», демонстрируют свои профессиональные качества. Это бизнес-СМИ, блоги о маркетинге, продажах. Всем свои видом они транслируют серьезность и надежность. Они используют ахроматическую гамму и выделяют только ссылки:

Коммерсант серьезен

Проекты «я самый веселый» — это когда читателю передают ощущение, что он получит удовольствие. Проекты о развлечениях, путешествиях, музыке, еде, как Eater издательского дома Vox Media.

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

Сегодняшний тренд у контентных проектов: подбирать свой собственный, сложный, узнаваемый оттенок. Если удастся найти такой цвет, то это будет идеально работать на брендинг. У vc.ru получилось: их розовый цвет не перепутаешь ни с каким другим.

Как анализировать юзабилити

Интерфейс — это гипотеза, то есть предположение, которое практика подтвердит или опровергнет. Строя структуру сайта или материала, редактор опирается на свой опыт и результаты исследований. Предугадать поведение целевой аудитории сложно: во-первых, из любого правила встречаются исключения, во-вторых, сценарии со временем меняются. Простой пример: модульная структура сайтов вошла в моду вместе со смартфонами и полностью изменила подход к веб-дизайну и разработке, на первый план вышли адаптивная верстка и минималистичный контент. Если через год или два мы проснемся в мире VR-технологий, вместе с новыми устройствами придут и новые интерфейсы. Останутся базовые эвристики и умение анализировать поведение пользователей.

Наш сервис редакционной аналитики Жираф как раз занимается тем, что помогает подтверждать и опровергать гипотезы. Для этого мы рекомендуем:

— отслеживать общую веб-аналитику: среднее время на сайте, глубину просмотра (количество страниц), достижение целей — заполнение формы подписки или заказ обратного звонка, если речь идет о бизнес-контенте;

— отслеживать аналитику для каждой контентной единицы: процент доскролла, фактическое внимание, кликабельность заголовка;

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

— проводить юзабилити-тестирования интерфейсов с привлечением фокус-групп. Особенно при глобальном редизайне проекта. Риски высоки: неудачное решение может вызывать негатив у постоянных читателей. Изменение привычного интерфейса всегда вызывает дискомфорт, достаточно вспомнить кейс Кинопоиска, когда из-за агрессии пользователей пришлось даже вернуть старый дизайн;

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

Полезные материалы для редактора:

● Дневниковое исследование Mail.Ru Group «Модели медиапотребления. Что люди читают, почему, когда и как».

● Статья доцента кафедры периодической печати СПбГУ «5 идей о том, что делать редактору после прочтения исследования о медиапотреблении».

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.