Юзабилити: как сделать сайт удобным

Основные элементы комлоновки страниц

■j; ■ ' ' ■ ■

Теперь нам предстоит довольно кропотливая работа — рассмот­реть основные компоновочные блоки, используемые в построе­нии Web-страниц. Блоки следует понимать как некоторую абст­ракцию, а не как конкретный текст с кнопками и полями.

По назначению все блоки условно делятся на навигационные, информационные, сервисные, рекламные и дизайнерские. Следует заметить, что различные блоки могут включать друг друга. Например, в один блок «Основное содержание» могут входить несколько блоков «Раздел», блок «Анонс», блок «Фотографии».

5.6.1. Навигационные блоки

• Блок «На главную страницу»

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

Логотип

Рис. 5.7. Блок «На главную страницу» может включать логотип, название или адрес и даже слоган

• Блок горизонтального меню

Один из самых главных блоков на странице. Под блоком гори­зонтального меню понимается список гиперссылок, ведущих к основным разделам сайта (рис. 5.9). Гиперссылки располага­ются на одной горизонтальной линии и могут быть оформлены и как обычный текст (меню), и как текст в виде изображения, и как символ (домик, корзина, конверт), и как вкладки. Они могут быть любого цвета и размера.

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

f S -"I Stew iPod-» iTun[3]s ^ .Jill»*., І QolcltTIra* Support | *.M«OSX^j

• Блок вертикального меню

Блок вертикального меню по смыслу соответствует горизонталь­ному. В нем ссылки на разделы расположены одна под одной (рис. 5.11). В силу привычности данный блок располагают по ле­вому краю страницы, но он может находиться и справа, и с обе­их сторон одновременно. Этот блок может быть как статичным, так и с выпадающим меню или раскрывающейся древовидной структурой.

Раздел

Раздел

Раздел

Раздел

Рис. 5:11. Вертикальное меню. Чуть более «нахальный» родственник го­ризонтального: занимает больше места на странице и больше бросается

в глаза

• Блок авторизации

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

Пользователь

Пароль

ОК

Рис. 5.13. Все просто и знакомо. Я только исключил уже привычно-иронич­ное «Забыли пароль?» и «Вы впервые у нас? Давайте зарегистрируемся»

• Блок «Подвал» (текстовые гиперссылки)

«Подвал» используется для текстовых гиперссылок на основные разделы сайта (рис. 5.14). Он должен быстро загружаться и быть доступным в момент, когда фокус внимания находится внизу страницы. Достаточно удобно: закончил работу с этой информа­цией и готов перейти к следующей. Часто под «подвалом» пони­мают все, что находится внизу страницы, а не только список ос­новных разделов.

Текстовая гиперссылка Текстовая гиперссылка Текстовая гиперссылка Текстовая гиперссылка Текстовая гиперссылка Текстовая гиперссылка Текстовая гиперссылка

Рис. 5.14. «Подвал» с текстовыми гиперссылками

• Блок навигационной строки

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

Уровень 1 -> Уровень 1-2 -» Уровень 1-2-2 -» Уровень текущий

Рис. 5.15. Иногда навигационную строку называют «ссылки-цепочки»

5.6.2. Информационные блоки

• Блок содержания

Блок содержания состоит из заголовка и одного или нескольких блоков с основным содержимым страницы (рис 5.16).

Сегодня пятница, 7 мая 2004 года : 14.46

Рис. 5.17. Я итак помню, что сегодня пятница, 7 мая 2004 года, зато курсы валют или количество дней до Дня рождения Пушкина знаю не всегда

• Блок «Раздел»

Данный блок достаточно обособленный и содержит информа­цию, несколько отличающуюся от основного содержимого стра­ницы. Это может быть анонс, новость, краткое описание услуг компании, опрос и т. д. (рис. 5.18). В блоке должно быть назва­ние и содержание раздела, а может еще и гиперссылка, позво­ляющая перейти к полному содержанию, например; Смотреть но­вость ПОЛНОСТЬЮ. Содержимым блока может быть и текст, и набор гиперссылок, и изображение.

Заголовок раздела

Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела. Текст раздела.

Рис. 5.18. Блок «Раздел»

• Блок изображений (галерея)

Это набор изображений, совмещенный с блоком навигации по выборке, иногда может быть только одно изображение (рис. 5.19).

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

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

5.6.3. Сервисные блоки

• Блок «Выбор языка»

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

По такому же принципу построен блок изменения кодировки текста: быстрый переход к нужной кодировке осуществляется при помощи гиперссылки, а не средствами браузера.

• «Пустой блок»

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

• Блок «Версия для печати»

Наверное, наименьший по размерам блок, он инициирует вызов текущей страницы и оптимизирует ее для отправки на принтер средствами браузера. Как правило, он располагается вверху или внизу основного содержимого страницы и совмещен с пикто­граммой принтера (рис. 5.21).

Л Версия для печати

Рис. 5.21. Долой картинки и украшательства. Вот уж где выполняется главный постулат интернета —информация превыше всего

5.6.4. Рекламные блоки

• Блок «Название и слоган»

Этот блок содержит название компании или самого сайта и, воз­можно, слоган вроде «Уважаем классику, ценим новое». Этот блок оформляется чаще всего крупным шрифтом, иногда на фо­новом рисунке или вместе с логотипом компании (рис. 5.22). Назначение его, думаю, понятно — это громкое заявление ком­пании о себе.

• Блок «Копирайт»

Блок описания авторских прав компании-владельца сайта, иногда со ссылкой на его создателя, например «Дизайн SuperWeb-Studio».

Как правило, этот блок — одна-две строчки в нижней части страницы (рис. 5.23).

Название

И СЛОГАН

Рис. 5.22. Существуют целые компании по придумыванию лозунгов и названий. А это их «хлеб»

Copyright (с) Somebody Inc. 1987-2004 All rights reeerved

Рис. 5.23. Все кому-то принадлежит. И все любят об этом напоминать

• Блок «Дизайнерское изображение*

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

• Собственно рекламный блок

Несмотря на то что такой блок напоминает «Раздел», он может выглядеть как угодно: тут все зависит от фантазии разработчика. Это может быть и мерцающий баннер на половину экрана, и ма­ленькая гиперссылка-«завлекалка», и имитация кнопки, напри­мер, «Рейтингуется SpyLog» или «Участник Rambler Тор 100». Реклама — она и есть реклама — всегда стремится к разнообра­зию (рис. 5.24).