Skip to main content
визуальная иерархия

Визуальная иерархия: всё, что нужно знать для оптимизации сайта

29 March 2021
Время для чтения : 
10 минут
Gilyana
Gilyana Akuginova
Контент-маркетолог Kameleoon, Гиляна анализирует отзывы наших клиентов и консультантов, а также делится новыми практиками в области оптимизации конверсии.

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

Какое влияние оказывают размер, шрифт, расположение и даже цвета различных элементов страницы Вашего сайта на конверсию? 

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

1 Что такое визуальная иерархия? Почему это важно?

Визуальная иерархия призвана упорядочить информацию на странице сайте или приложения. 

ВИЗУАЛЬНАЯ ИЕРАРХИЯ: ТАЙНЫЙ ГИД ДЛЯ ВАШИХ ПОСЕТИТЕЛЕЙ

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

Внимательно посмотрите на картинку ниже.

001_hierarchie_visuelle_lecture

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

2 6 основных правил визуальной иерархии

1. размер элементов имеет значение

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

003_hierarchie_visuelle_taille

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

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

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

 

2. нужно добавить цвета

Сочетание цветов - это must визуальной иерархии.  С помощью цветов можно выделить одни элементы, скрыть другие, цвет может добавить индивидуальности дизайну Вашего сайта. А вот и пример: 

005_hierarchie_visuelle_couleur

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

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

скриншот

Цвет - это отличный способ направлять взгляды посетителей и создавать визуальную иерархию.

Тем не менее, не все цвета сочетаются друг с другом. Есть холодные цвета (синий или зеленый, к примеру), теплые (красный, жёлтый и оранжевый) и нейтральные (черный, серый, коричневый и т.д.). Сочетая разные "температуры" цветов, можно получить интересные контрасты. 

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


связной скрин

Вы также можете ориентировать посетителей, фокусируя внимание с помощью контрастов. Вот пример:

010_hierarchie_visuelle_couleur_contraste

Один шрифт, один размер и толщина текста. Но взгляд ориентируется больше ко второму слову. 



3. определите шрифт вашего текста

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

Базовое правило графического дизайна требует, чтобы мы не использовали больше 3 шрифтов, чтобы не создавать непоследовательный, разобранный дизайн:

  • Первичный: самый внушительный, привлекающий внимание посетителя.
  • Вторичный: элементы, которые дополняют первичные заголовки.
  • Третичный: основной текст (тело).

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

hierarchie_visuelle_police

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

4. расположение элементов

Расположение элементов страницы - это особенно важно, если Вы хотите, что посетители чётко понимали, что Вы им сообщаете. Вот несколько пунктов, которые важно учитывать:

Расстояние между элементами

Расстояние между 2 элементами показывает связь, которая может быть между ними. Если мы вспомним, как выглядит, к примеру, оглавление книги, то название главы и номер страницы ей соответствующий будут на определенном расстоянии, и мы заметим это соответствие. 

Негативное пространство (white space)

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

И вот пример страницы, которую мы все знаем: Google.
 

hierarchie_visuelle_espace-negatif

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

Cканирование страницы (scanning pattern)

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

Схема Z : Это правило визуальной иерархии применимо в случае, если страница содержит мало текста и много графических элементов. Посетитель Х рефлекторно смотрит по схеме Z: часто из-за наличия горизонтального меню. 


hierarchie_visuelle_schema_z

Это важное правило дизайна, поэтому поставьте Ваши СТА и другие призывы в соответствии. Вот несколько полезных советов:

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

  Схема F : Схема в форме F - это скорее наблюдение, чем правило дизайна. Исследование Nielsen Norman Group показало, что посетитель Х прочитает первые строки текста полностью. Затем он пролистывает и читает всё меньше слов в строке, а потом и вовсе бросает. Что позволяет получить путь в форме F. 

hierarchie_visuelle_schema-f

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

Если вдруг схема похожа на Е, то это означает, что они не теряют интерес во время прочтения. 

Золотое сечение:

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

018_hierarchie_visuelle_nombre-or

Эта статья UX Planet объясняет эту концепцию. 

Выравнивание

Строить линии и ломать их: это привлекает внимание посетителей к определенным элементам сайта. Вот простейшая иллюстрации концепции:
 

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

Направление чтения

Вы также можете использовать выравнивание элементов, чтобы задавать направление. Смотрите на картинку: 

 hierarchie_visuelle_snes-lecture

Вы сначала посмотрели на девушку справа, потом прочитали текст слева на право, а потом вновь остановили взгляд на девушке? Так можно задавать направление взгляду посетителей к определенным точкам. 

5. можно использовать сетку

Сетка - это важный инструмент для дизайнера. 

hierarchie_visuelle_grille

Она позволяет структурировать все элементы страницы, отображать их в адаптированных размерах и пропорциях:

  1. Можно всё откатить или объединить аспекты разных страниц сайта
  2. Рациональнее использовать негативное пространство
  3. Учесть ограничения, связанные с респонсивной интеграцией на мобильном формате

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

6. ПОВТОРЕНИЕ ЭЛЕМЕНТОВ

Чем больше мы привыкаем к чему-то, тем больше нам это нравится. Когда нам что-то нравится, то мы уделяем больше внимания этому, и наша способность впитывать информацию выше. 

Как это использовать на сайте? На Вашем сайте или в приложении Вы можете применить это к нескольким элементам:

  • Шрифт
  • Цвета
  • Формы
  • CTA

Повторение ключевого элемента связано с общей актуальностью сайта. Это позволяет пользователю привыкнуть и начать ориентироваться на сайте. Повторение призывов на сайте Apple: 

скриншот

Каждый блок строится по схеме.

  • Заголовок 
  • подзаголовок
  • 2 CTA («подробнее» и «купить»): они повторяются и привлекают внимание

Сначала функциональность, потом красота

Парадоксально, но визуальная иерархия мало что общего имеет с красотой. Это результат Вашей способности комбинировать правила и аналитику для того, чтобы обеспечить место каждому элементу на сайте. Держа эту мысль в голове, помните, что никогда не стоит полагаться на интуицию. Если хотите улучшить визуальную иерархию на сайте, Вам поможет A/B-тестирование: верные решения принимаются на основе данных. 

 

Если Вы хотите оптимизировать визуальную иерархию на сайте уже сегодня, то наши консультанты с удовольствием Вам расскажут и покажут все возможности платформы Kameleoon:

СВЯЗАТЬСЯ С НАМИ >>

О чем рассказываем в этой статье
Gilyana
Gilyana Akuginova
Контент-маркетолог Kameleoon, Гиляна анализирует отзывы наших клиентов и консультантов, а также делится новыми практиками в области оптимизации конверсии.