Создайте ясную визуальную иерархию на каждой странице
Лучший способ сделать страницу простой для быстрого схватывания – это организовать внешний вид элементов страницы (визуальных подсказок) таким образом, чтобы они ясно и четко показывали отношения между этими элементами – какие элементы связаны между собой, какие являются частями других элементов. Другими словами, каждая страница должна иметь ясную визуальную иерархию своих элементов.
Страницы с ясной визуальной иерархией обладают тремя чертами: Чем более важен элемент, тем более он заметен на странице. Например, важные заголовки делаются либо крупнее, либо жирнее, либо выделяются цветом, либо отделяются большим пустым пространством, либо размещаются ближе к верхней части страницы, либо используется целая комбинация этих способов.
Элементы, логически связанные между собой, должны быть связаны и визуально. Например, вы можете показать, что какие-то элементы равнозначны, сгруппировав их под одним заголовком, либо применив к ним одинаковый стиль, либо поместив их в одну четко отделенную область страницы.
Элементы представляются в виде вложений, если являются частями друг друга. Например, название раздела «Книги по программированию» будет находиться над заголовком какой-то конкретной книги по этой теме, включая в себя все содержимое части страницы (эта книга является частью данного раздела).
Конечно, здесь нет ничего нового. В каждой газете используются те же методы выделения, группирования и компоновки содержания, для того чтобы подчеркнуть еще до чтения наиболее важную информацию полосы. Мы понимаем, что та фотография относится к той статье, так как они объединены тем заголовком. А эта статья является ключевой («гвоздем») на странице, поскольку она занимает центральное место, у нее самый большой заголовок и она набрана широкими колонками.
Мы каждый день сталкиваемся с визуальными иерархиями – будь это на бумаге или в Интернете. Но обычно они воспринимаются так быстро, что мы даже не успеваем это осознать и начинаем смутно догадываться об их существовании, только когда нам не удается провести их быстрый анализ, т. е. когда визуальные подсказки (или их отсутствие) вынуждают нас задумываться.
Хорошая визуальная иерархия всегда экономит наши усилия по начальному восприятию страницы и помогает организовать и систематизировать содержание таким образом, чтобы мы могли почти мгновенно понять его в целом.
Но если страница не имеет ясной визуальной иерархии – например, когда все выглядит одинаково важным, – это существенно замедляет процесс просмотра страницы на этапе выявления интересующих слов и выражений и вынуждает нас пытаться самостоятельно формировать понимание того, что же является главным, а что второстепенным. Естественно, с нашей стороны это требует усилий.
Кроме того, мы хотели бы получать на сайте некие редакторские подсказки и ориентиры относительно того, что из содержания сайта является наиболее важным и ценным или популярным, так же как ожидаем этого в других средствах масс-медиа. Почему бы тогда редактору сайта не расставить эти акценты для меня, чтобы сэкономить мои силы и время?
Одолевать страницу даже со слегка нарушенной визуальной иерархией – например под за-
головком располагаются элементы, которые к ему не относятся, – так же неудобно, как чи-
тать небрежно построенное предложение (Билл на минуту выпустил котенка на стол потому,
что тот немного шатался).
Хотя мы обычно и можем понять смысл предложения, но, пусть и на мгновение, нам нужно
задуматься там, где мы не должны задумываться вообще.
Комментарии:
Нету комментариев для вывода...