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