Поговорим о пустом пространстве

пустое пространство
Рассылки
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Как пустое пространство меняет восприятие сайта пользователем, улучшает юзабилити и повышает конверсию.»

Друзья!

Проверяя сайты, асессоры GetGoodRank в 27% случаев отмечают, что страницы сложны для восприятия. Основная проблема — отсутствие пустого пространства между элементами, что усложняет чтение текста и общий скимминг страницы.

Рассказываем о силе пустого пространства и даем рекомендации о применении.

В этом выпуске:

  • Что такое пустое пространство
  • Рекомендации по применению пустого пространства для юзабилити и конверсии

Что такое пустое пространство

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

Наиболее ярким примером применения whitespace в дизайне сайтов становится стартовая страница Google:

пустое пространство в дизайне Google

В отличие от стартовой страницы Яндекс, Google не занимает пустое пространство всеми возможными сервисами. Лишь в правом верхнем углу скромно размещены ссылки на почтовый сервис и вход в профиль (либо юзерпик аккаунта Google).

Такой подход концентрирует внимание пользователя на основной функции страницы — поле поиска. Ведь именно с этой целью пользователь приходит в Google. Остается только представить конверсию главной Гугла:)

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

Whitespace используется для:

  • акцента внимания пользователя на важных элементах
  • усиления CTA-элементов
  • четкого обозначения цели страницы
  • упрощения структуры страницы для просмотра и восприятия информации
  • иерархии элементов страницы по важности
  • установления связей между элементами страницы, группировки элементов, тематической объединения элементов

К элементам пустого пространства относятся:

  • отступы, поля вокруг элементов, отступы между элементами
  • расстояние между буквами, словами, строками и абзацами

Рекомендации по применению пустого пространства для юзабилити и конверсии

1. Улучшение восприятия страницы и чтения текста

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

Для сравнения:

пустое пространство в дизайне сайта пример

и

пустое пространство в дизайне сайта пример

Плотно «набитая» текстом страница снижает желание пользователя читать текст. Усугубляют ситуацию мелкий шрифт и сложная для восприятия гарнитура шрифта, отсутствие форматирования (разбивки на абзацы, заголовков/подзаголовков, списков, инфоврезов).

Правильно распределенное пустое пространство в тексте повышает читабельность на 20%.

Так, Никита Обухов рекомендует использовать большие отступы между блоками текста (абзацы, блоки абзацев, объединенные одной идеей).

никита обухов пустое пространство

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

При форматировании текста на странице особое внимание стоит уделить размеру шрифта, расстоянию между строками и абзацами. Здесь важно соблюсти баланс. Так как сильно большие отступы между строками создают ощущение разрыва и усложняют восприятие текста.

2. Установление связей между элементами

Покажем на примере:

пустое пространство для обозначения связей

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

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

3. Привлечение внимания

Пустое пространство позволяет поставить акценты на наиболее важных элементах страницы, привлечь внимание к СТА-элементам, четко обозначить цель страницы.

Примером служит стартовая страница Google. В качестве другого примера рассмотрим главную страницу CRM Bigcommerce:

СТА кнопки в пустом пространстве

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

Основное правило:

… чем больший используется шрифт, тем больше пустого пространства требует текст.

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

Немного о пустом пространстве на мобильных сайтах:

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

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

Как GetGoodRank может помочь:

В ходе проверок сайтов асессоры GetGoodRank оценивают:

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

Добавить комментарий

Войти с помощью: 

Статьи по теме

хорошие ссылки
Рассылки
Как получать хорошие ссылки
Друзья! Ссылки — очень тонкий инструмент продвижения сайта,позволяющий как вывести сай...
ссылки как фактор ранжирования
Рассылки
Ссылки как фактор ранжирования
Друзья! В 2016 году Андрей Липатцев подтвердил, что ссылки и качественный контент оста...