Top.Mail.Ru
Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Юзабилити для чайников. Часть 4: как обеспечить читабельность контента Редакция «Текстерры»
Редакция «Текстерры»

Читать первую часть статьи

Читать вторую часть статьи

Читать третью часть статьи

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

Читать иль не читать, вот в чем вопрос. Удобно ль?

Как стимулировать читателя прокручивать страницу до конца

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

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

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

Обратите внимание на верхнюю часть главной страницы сайта Nintendo. Здесь расположен визуально простой контент:

Одна большая картинка, меню навигации. Все просто

Прокрутив страницу вниз, можно увидеть визуально сложный контент:

Какие-то новости, предложения, продукты. Сложно зацепиться за один элемент

Помещая простой контент в верхней части страницы, вы стимулируете посетителя прокручивать страницу.

Разработаем вам фирменный стиль
Подробнее

Сделайте заголовки контрастными с помощью шрифтов с засечками

Обратите внимание на ленты новостей ABC News и Daily Beast. ABC использует одинаковый шрифт для заголовков и анонсов.

Заголовки сливаются с анонсами

Daily Beast выделяет заголовки шрифтом с засечками.

Заголовки выделяются

Шрифт с засечками облегчает сканирование заголовков. Благодаря этому посетитель сайта Daily Beast быстрее выбирает интересующий его контент.

Увеличение междустрочного интервала облегчает чтение

Стандартный междустрочный интервал для веб-страниц равен 1,15. Чтобы увеличить читабельность текста, попробуйте увеличить междустрочный интервал. Оптимальный интервал можно вычислить по такой формуле: величина шрифта + 6-8 пунктов. Если вы используете 12 шрифт, величина интервала должна быть 1,18 – 1,20. Слишком большой междустрочный интервал затрудняет чтение.

Увеличение междустрочного интервала повышает читабельность

Как правильно показывать ценники

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

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

На следующей иллюстрации показан неудачный способ демонстрации цены.

Такой ценник оправдан, если вы продаете за 13 долларов товар, который стоит 26 долларов

На следующей иллюстрации цена визуально не выделяется.

Визуально выделены преимущества продукта
  • Используйте самый дорогой продукт в качестве пугала.

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

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

Это справедливо в том случае, если вы делаете ставку на продажи самых дорогих продуктов.

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

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

Золотая середина выделена визуально
  • В дешевых планах зачеркивайте опции, которых лишается покупатель.

Это стимулирует его выбирать более дорогое предложение.

Отсутствующие в тарифном плане опции зачеркнуты
  • Сделайте малозаметным бесплатное предложение.

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

Бесплатное предложение малозаметно

Используйте принцип золотого сечения

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

Величина золотого сечения равна 1,618. Представьте, что вы используете стандартный макет страницы шириной 960 пикселей. Разделив 960 на 1,618, вы получаете оптимальную пропорцию разделения страницы на две колонки. Ширина основной колонки приблизительно равна 594 пикселя, а ширина сайдбара составляет 366 пикселей.

Определение оптимальной ширины колонок с помощью золотого сечения

Когда можно выравнивать текст по центру

Практически никогда. Выравнивать текст лучше по левому краю. Это облегчает чтение. Если текст выравнивается по центру, человек испытывает затруднения при переходе от строки к строке.

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

Выравнивание по центру усложняет чтение

Когда стоит использовать белый текст на темном фоне

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

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

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

Белый текст на темном фоне иногда работает лучше темного текста на светлом фоне

Как сделать главную страницу более легкой для восприятия

В этом вам помогут следующие рекомендации:

  • Не говорите посетителям «Добро пожаловать». В эпоху информационного шума у вас нет времени на навязчивую вежливость. Лучше сразу покажите пользователю выгоды: «Лучшие телефоны по низким ценам».
  • Не используйте стоковые фото.
Стоковое фото (слева) уступает самостоятельно созданному графику
  • Не атакуйте посетителя большими текстами на главной странице. Подробные объяснения лучше прятать под кат или публиковать на внутренних страницах.
На главной странице не нужны подробные объяснения
  • Главная страница должна быть отправной точкой для путешествия по сайту. Она не должна быть похожей на внутренние страницы. Цель существования главной — помочь пользователю найти интересующую его информацию.

Как сделать таблицы удобными для чтения

В этом вам помогут следующие рекомендации:

  • Используйте сокращения, аббревиатуры и знаки. Например, в таблице лучше использовать знак $, а не писать фразу «доллары США». Лучше написать «16 млн», чем указывать это число цифрами.
  • Используйте разворачивающееся меню, чтобы сократить длину рядов и высоту колонок.
Разворачивающееся меню делает таблицы удобными
  • Название колонки должно постоянно оставаться видимым. Это актуально при использовании больших таблиц.
Название колонки остается видимым при прокрутке таблицы вниз
  • Упростите чтение информации в рядах таблицы. Окрас зебры подскажет вам решение. Также обязательно нумеруйте ряды.
Нумерация рядов и чередование светлого и темного фона облегчает восприятие информации

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

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

Чтобы решить эту проблемы, выделяйте и анонсируйте важные пункты. На практике это может выглядеть так:

Резюмируйте важную информацию

Чтобы упростить восприятие контента…

… старайтесь делать страницы сайта визуально привлекательными, простыми и «легкими». Не пишите заголовки и текст заглавными буквами. Используйте темный текст на белом фоне для основного контента. Для заголовков и элементов навигации подходит светлый текст на темном фоне. Выравнивайте текст по левому краю, не используйте стоковые фото, не публикуйте длинные информационные сообщения на главной странице. Уделяйте внимание таблицам. Используйте принцип золотого сечения, создавая макет страниц.

По материалам сайта UX Movement.

Поделиться статьей:

Новое на сайте

29 мар 2024
3 446
Как работать с сангвиником и 4 способа продать ему что угодно

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

28 мар 2024
402
Правила сетикета – какие они и почему важны для вашей компании

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

28 мар 2024
4 098
Миф про многозадачность: мозг не умеет так работать

Так что работодатели зря пишут про этот навык на HeadHunter. Но способы всё успевать – есть.

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.

Наш подход бустит продажи. Вы платите за результат!