.

Согласованность — превыше всего

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

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

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

Верите или нет, но единственная страница на сайте, где можно (без ущерба) изменять месторасположение и визуальное оформление — это главная страница. Странно, однако на некоторых хорошо зарекомендовавших себя сайтах основные элементы навигации представлены по центру на переднем плане страницы, что увеличивает визуальное оформление главной страницы (рис. 5.16). Затем, когда вы щелкаете на одном из элементов навигации и переходите к внутренней странице сайта, навигационные элементы перемещаются в другое место на странице, обычно в верхнюю часть страницы влево или вправо (рис. 5.17), где они и располагаются в дальнейшем.

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

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

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

Ниже перечислено несколько способов, которые наверняка заставят пользователей остановиться, подумав: “А ведь что-то есть в этой графике!”.

Звук. Один из способов явно выделить какой-то элемент интерфейса — использовать аудиозапись. Для кнопок вместо изменения внешний вида при наведении на них указателя мыши можно реализовать проигрывание одной аудиозаписи, когда пользователь наводит на кнопку указатель мыши, а другой аудиозаписи — когда щелкает на кнопке.

Анимация. Ничто так не притягивает внимание пользователя, как динамическая анимация на Web-i, границе. До недавних пор большинство Web- страниц были статическими и беззвучными, посему любое движение на Web- странице вызывает повышенное внимание со стороны пользователей. Сегодня анимация уже стала привычной, однако она все еше может пробудить интерес при условии ее корректного применения.

Ключевым моментом в корректном применении анимации является ее концентрация в определенной области на Web-странице и умеренное использование на сайте. Страницы, где все мигает и кружится, считаются дурным тоном. Используйте анимацию только для важных интерактивных элементов. Например, вы можете создать Flash-анимацию для какого-то особенного товара. Можно сделать анимированными основные кнопки интерфейса. А можно разработать анимацию для кнопок, которая будет запускаться только тогда, когда пользователь наведет на кнопку указатель мыши.

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

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

S Изменение в другом месте страницы. Например, если навести указатель на маленькую кнопку, то изменится информация, отображаемая в соседней области на Web-странице. Взгляните 5 18. Когда пользователь наводит указатель на кнопку, в отображаемой ниже строке предоставляется дополнительная информация. Эта информация может пояснять предназначение данной кнопки, помогая пользователям в решении, куда осуществит!, переход.

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

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

Расширяющиеся области. Можно создавать графическое содержимое Web- страниц, которое будет раскрываться при наведении на него указателя мыши, подобно изменениям активных кнопок.

 5.21 приведен пример того, как при наведении указателя на какую- либо область изображения это изображение увеличивается и на экране появляются соответствующие варианты навигационного выбора. Этот пример демонстрирует отличную возможность на сайте www.discovery.com. Такой элегантный способ позволяет увеличить пространство сайта, а также дать пользователю эффективный рабочий инструментарий.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×