Как выстроить визуальную иерархию сайта?
Отвечая на вопрос: «Как выстроить визуальную иерархию сайта?», мы расскажем, как сделать акцент на важной информации страницы, при мощи дизайна, типографики и отступов, а также как размещать контент, чтобы он был удобен для восприятия пользователей.
Kirill Lipovoy
Что такое визуальная иерархия на сайте?
Визуальная иерархия — это отображение важности контента на сайта при помощи дизайна. Основная ее задача — выделение и организация контента. Грамотное использование визуальной иерархии значительно упрощает взаимодействие пользователей с сайтом, так как посетители сразу понимают тематику сайта и легко ориентируется в его структуре. Простершим примером будет структура заголовков, которые уменьшаются по степени вложенности, что одновременно подчеркивает важность в них содержащейся информации и обеспечивает навигацию по контенту в целом.
Одним из главных теоретиков визуальная иерархии — Люк Вроблевски, бывший директор по дизайну в компании Yahoo, а ныне сотрудник Google, выделил три основные три основных вопроса, которые определяют его визуальную подачу:
- Определить, что такое этот сайт, какую пользу он приносит?
- Как можно использовать этот сайт?
- В чем цель сайта?
Ответы на три эти вопроса, помогают определить будущую визуальную структуру сайта, отобрать контент для страниц и разобрать его по степени важности.
Построение структуры визуальной иерархии
К построению структуры визуально иерархии лучше всего подходить, после прохождения первых двух этапов планирования нового сайта. В первую очередь необходимо определиться с целью нового проекта, его целевой аудиторией и позиционированием. Затем продумать структуру самого сайта со всеми его раздела и контентом под них. А после перейти к построению визуально иерархии. Это легче всего сделать при мощи визуализированной карты сайты, где будет отражена все структурная информация и карта ссылок, тут помогут сервисы по построению Mind Map.
Это позволит увидеть проект в целом и грамотно решить, как выстроить визуальную иерархию сайта для каждой страницы исходя из целей. Если же задача стоит по изменению визуальной иерархии на готовом сайте, то процесс будет труднее, так как будет затрагивать реорганизацию контента.
Само построение структуры визуальной иерархии начинается со структуривании информации для каждой страниц. Здесь отлично подходит способ перевернутой пирамиды или воронки. Первым этапом идет определение главной информации или тезиса, отражающего цель страницы. Далее идут важные детали раскрывающие тезис, а после дополнительная информация. Так мы выстраиваем информацию по важности, далее следует несколько основных подходов, как выстроить визуальную иерархию сайта.
Способы как выстроить визуальную иерархию сайта
После того, того как определены информационные блоки для каждый страницы и их значимость, эту значимость необходимо визуально подчеркнуть. Первый и самый простой способ при помощи размера. Размер информационного блока будет — отражать важность информации. Так основной тезис страницы будет визуально самым крупным, важные детали — среднего размера, а дополнительная информация — самая маленькая по размеру. Это даст нам уверенность, что посетитель сайта, обратит внимание на выбранную нами информацию.
Второй способ при мощи композиции, важные информационные блоки необходимо разместить так, чтобы пользователи обращали на них при просмотре сайта. Есть две основные схемы композиции — F и Z. В первом случаи композиция напоминает книжную, где пользователь просматривает книгу строчку за строчкой, вторая напоминает больше схему простора каталога, где читающий проскальзывает страницу взглядом. В обоих случаях, самый читаемый элемент — заголовок, так что ему следует придать особую важность.
Также можно выделять информационные блоки группировкой, схематичное расположение услуг или другой информации, лучше воспринимается, чем сплошной текст, и пользователь сразу различает тематические различия. Это же относится и к составлению списку.
Важность второстепенных блоков можно подчеркивать контрастом с общей информацией, пользователь обратит внимание на визуальное отличие блока, и это привлечет его внимание. В такие блоки информацию лучше выносить тезисно, чтобы не нарушать общую структуру пространства страницы.
Еще один хороший способ — применение пустого пространства. Используйте отступ для информационных блоков, которые хотите подчеркнуть, это покажет, что информация отличается от основного содержание и обратит внимание читающих.
В заключение, надо напоить, что то, как выстроить визуальную иерархию сайта, зависит от общей структуру информации, которую надо продумывать заранее, а потом уже планировать, как это передать при помощи визуальной составляющей.