Со­з­да­й­те­ ясную виз­уа­льную ие­ра­рхию на­ ка­ждо­й­ стра­нице­

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

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

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

Элементы представ­ляются в­ в­и­де в­ло­жени­й, если­ яв­ляются частями­ друг друга. Например, название раздела «Книги по программированию» будет находиться над заголовком какой-то конкретной книги по этой теме, включая в себя все содержимое части страницы (эта книга является частью данного раздела).

Конечно, здесь нет ничего нового.


В каждой газете используются те же методы выделения, группирования и компоновки содержания, для того чтобы подчеркнуть еще до чтения наиболее важную информацию полосы. Мы понимаем, что т­а фотография относится к т­ой статье, так как они объединены т­ем заголовком. А эт­а статья является ключевой («гвоздем») на странице, поскольку она занимает центральное место, у нее самый большой заголовок и она набрана широкими колонками.

Мы каждый день сталкиваемся с визуальными иерархиями – будь это на бумаге или в Интернете. Но обычно они воспринимаются так быстро, что мы даже не успеваем это осознать и начинаем смутно догадываться об их существовании, только когда нам не удается провести их быстрый анализ, т. е. когда визуальные подсказки (или их отсутствие) вынуждают нас задумываться.

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

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


Естественно, с нашей стороны это требует усилий.

Кроме того, мы хотели бы получать на сайте некие редакторские подсказки и ориентиры относительно того, что из содержания сайта является наиболее важным и ценным или популярным, так же как ожидаем этого в других средствах масс-медиа. Почему бы тогда редактору сайта не расставить эти акценты для меня, чтобы сэкономить мои силы и время?
Одолевать страницу даже со слегка нарушенной визуальной иерархией – например под за-
головком располагаются элементы, которые к ему не относятся, – так же неудобно, как чи-
тать небрежно построенное предложение (Билл на минуту выпустил котенка на стол потому,
что тот немного шатался).

Хотя мы обычно и можем понять смысл предложения, но, пусть и на мгновение, нам нужно
задуматься там, где мы не должны задумываться вообще.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Создание сайтов на эту тему:
Обыча­и и усло­вно­сти – ва­ши друз­ья
По­ка­жите­ ясно­, по­ че­му мо­жно­ ще­лка­ть мышью
Ра­з­бе­й­те­ стра­ницы на­ че­тко­ ра­з­де­ле­нные­ о­бла­сти
Уме­ньшите­ виз­уа­льный­ шум