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

Элементы оформления

К элементам оформления относятся элементы, которые образуют самую верхнюю часть Web-сайта — его внешний вид. Это не сама информация, а лишь ее представление. Я не хотел в этой книге говорить ни слова о дизайне, потому что это разрушило бы ее кон­цепцию. Поэтому речь идет только об элементах оформления, а не о пропорциях, светотенях и особенностях Web-дизайна.

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

Вторым элементом является фон. Фон может быть выполнен ка - ким-то одним цветом, а может быть оформлен при помощи на­кладываемого изображения. Основная проблема с изображени­ем в том, что его нельзя делать четким и контрастным, потому что тогда «потеряется» основная информация и ее будет сложнее воспринимать. Кроме того, если использовать в качестве фона не какую-либо картинку, а абстрактный рисунок или градиент, то незнание законов дизайна и композиции может породить гра­фический хаос.

Однако если использовать в качестве фона рисунок из файла, то можно рделать и полезные вещи. Например, изображение, загру­жаемое в ячейку таблицы (с указанием не «размножать» рисунок фона) не в явном виде (<img>), а как фон, избавит вас от досад­ных недоразумений с недозагрузкой картинок: пока изображе­ние не будет готово полностью, пользователь будет видеть лишь фон определенного цвета.

Границы имеют практически все элементы, для которых можно задать фон и цвет. Границы характеризуются цветом, толщиной, способом начертания (двойная, прерывистая, сплошная и т. д.). Их внешний вид может быть задан для каждой из сторон эле­мента. По умолчанию все границы имеют некоторый визуаль­ный объем. Весьма интересно, насколько легко это получается. Если нарисуете прямоугольник какого-либо цвета и сделаете его верхнюю и ^правую границы чуть светлее, а нижнюю и правую чуть темнее, то вы получите выпуклый прямоугольник, который будет походить на кнопку.

Одним из основных элементов оформления является шрифт. Он обладает такими свойствами, как размер (90 %, +3, 12 pt), начер­тание (обычный, полужирный, подчеркнутый), гарнитура (Times, Arial, Tahoma, Verdana и т. д.), цвет (синий, красный, черный).

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

Резюме

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

2. Необходимо обеспечивать посетителей функцией Поиск. Осо­бенно актуален поиск на сайтах, содержащих большое коли­чество информации.

3. Форму поиска предпочтительнее сразу выводить на странице, а не помещать ссылку на нее.

4. Структура любого обособленного текстового содержимого имеет вид:

• Текстовое содержимое. ,

• Заголовок

• Аннотация

• Текст

• Абзац ' • Предложение

• Слово • Буква

5. Глагольные формы в надписях на кнопках позволяют пользо вателю быстрее восстановить фокус внимания и легче пони мать суть действия, которое произойдет.

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

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

8. Минусы пиктограмм: они должны быть мелкими, порой оні непонятны, пиктограммы могут исчезать, если у пользовател отключена графика или страница плохо загрузилась, из-за ма лого размера трудно поместить в пиктограмму что-нибудь чет кое и понятное, пиктограммы часто похожи.