<< Пред. стр.

стр. 2
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

Разработка для специальных возможностей
Оставление «хлебных крошек»
Использование меню переходов
Управление всплывающими окнами
Создание открывающихся меню
Обеспечение путей отхода
Работа со скриптами и таблицами стилей
Дневник: Внедрение или присоединение?
Запуск скриптов при помощи ссылок
Дневник: JavaScript-ссылки или onClick-ссылки?
ГЛАВА 1.
Разработка дизайна,
облегчающего навигацию
Дизайн в Интернете на самом деле не ограничивается предоставлением посетителям
чего-то привлекательного, на что приятно посмотреть. Он играет более важную роль:
создает ощущение места. Хороший дизайн гармонично объединяет страницы сайта.
Другими словами, дизайн обозначает «место размещения» сайта. Он проводит грани-
цу вокруг определенного места в Интернете и сообщает: «Здесь все гармонично».
Это ощущение места достигается при помощи единообразного использования элемен-
тов дизайна по всему сайту. Такие элементы страниц, как макет, цветовая схема и
стиль текста, должны быть зрительно связаны. Если страницы сайта используют раз-
личные подходы к дизайну, независимо от того, насколько эффективным может быть
1
дизайн этих отдельных страниц, будет создано ощущение места сродни торговом /
центру. Каждая сверкающая витрина магазина соревнуется с другими витринами без
видимого смысла или цели. Это визуальная катастрофа. Однако когда страница за
страницей применяется некоторый единообразный дизайн, получается нечто напо-
добие высококлассного универсального магазина. Поднимается ваш уровень. Привле-
каются более серьезные клиенты. Когда посетители перемещаются по сайту, им ка-
жется, что они ходят с этажа на этаж и из отдела в отдел, которые находятся под од-
ной крышей. Более того, способ использования дизайна может помочь посетителям
понять, в каком отделе они находятся, не ища планы этажей около лифтов.
Вот как это работает. Содержимое большинства сайтов организовано в соответствии с
определенной иерархией или логической структурой; это означает, что разработчики
сайта разбили представляемую информацию на категории и подкатегории, например:
• Фильмы
• Боевик
• Комедия
• Драма
• Мелодрама
" • Мистика/Приключения
• Ужасы
• Научная фантастика
• Музыка
• Популярная
• Джаз
• Классическая
• Игры
• Персональный компьютер
• Приставка
• О нас
ГЛАВА 1. Разработка дизайна, облегчающего навигацию 15


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

При разработке такого сайта иерархия выполняет большую часть работы. Элементы
списка самого высокого уровня становятся элементами выбора в навигации, как пока-
зано на рисунке 1.1. Это этажи в вашем высококлассном универсальном магазине. Те-
перь уже известно, что для каждой из основных категорий необходима страница на
сайте. Как насчет подкатегорий? Это отделы в вашем универмаге; на каждом этаже
здания может быть расположено несколько отделов. Для каждой из подкатегорий так-
же нужна страница на сайте. Возможно, также понадобятся под-подкатегории или
под-под-подкатегории, в зависимости от глубины и детализации иерархии сайта. Без
проблем. Считайте, что для каждого элемента списка необходима одна страница.




Content goes here Content goes here Content goes here
Content goes here Content goes here Content goes here
gtn*№« Content goes here. Consent goes here Content goes here
Content goes here Content goes here Content goes here.
Content goes here Content goes here Content goes here




800x490 : 1007,


Puc. 1.1. Элементы верхнего уровня иерархии сайта представляют категории
для навигационной панели (Navigation bar)
Преимущество иерархической структуры заключается в том, что она проводит посе-
тителей именно туда, куда они желают попасть. Навигация доставляет их на необхо-
димый этаж, а подкатегории направляют их к необходимому отделу на этом этаже.
Это быстро, просто и наглядно, как при перемещении по реальному зданию. Ваша за-
дача, как дизайнера, заключается в предельном улучшении данного эффекта. Вам
нужно, чтобы графическое представление сайта максимально соответствовало
организационной структуре. Хитрость заключается в том, чтобы сделать страницы
Строим Web-сайты
16

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

Определение
Уровень (Level) - это общее название для каждого раздела иерархии.
Например, если сайт углубляется до под-подкатегорий, в иерархии
присутствует три уровня (основная категория, подкатегория и под-
подкатегория).

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




Рис. 1.2. Один и mom же дизайн используется для двух типов страниц: страницы
основной категории (слева) и страницы подкатегории (справа). Если дизайн
единообразен, сложно определить, на каком уровне иерархии находится посетитель

Серьезное дело, не правда ли? По крайней мере, дизайн унифицирован. Навигация
понятна и легко доступна. Посетители не потеряются при просмотре сайта. Ну, ско-
рее всего. Если посетители вошли через переднюю дверь, т.е. если они появились на.
первой странице сайта и перемещались по категориям и подкатегориям - возможно
все будет в порядке. Однако Web-сайт - это не реальное место. Оно является виртуаль-
ным. Это место обладает свойствами, которыми реальные места не обладают. Так, по-
сетители не обязаны входить через переднюю дверь. Благодаря поисковым системам,
закладкам и обмену ссылками между друзьями по электронной почте, посетители
могут материализоваться в дальних уголках вашего сайта, не имея никакого понятия
о том, где они находятся по отношению ко всему остальному. Однако если ваш дизайн
намекает на определенное положение и общий смысл места, это может помочь посе-
тителям получить представление о сайте, независимо от того, как они туда попали.
17
ГЛАВА 1. Разработка дизайна, облегчающего навигацию



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


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


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




Рис. 1.3. Два различных, но при этом схожих, образца дизайна - один для страницы
основной категории (слева), а второй - для страницы подкатегории (справа), -
помогают посетителям понять, где они находятся при навигации по сайту
Строим Web-сайты
18

Чтобы придать отличительные особенности дизайну, можно пойти несколькими раз-
личными путями. Страницы, представленные на рисунке 1.4, при перемещении
вглубь сайта становятся более загруженными, и на них используется больше
графических элементов. Данная схема отлично подходит, когда иерархия спускается
из общих категорий к все более и более конкретной информации, как при перемеще
нии из общей категории, например, «Книги», к жанру книги, скажем, фантастике, а
затем к конкретному названию в этом жанре, например, The Lord of the Rings (Власте
лин колец). Все более усложняющийся дизайн наводит посетителей на мысль, что с
каждым шагом они становятся ближе и ближе к требуемой информации, которая на
ходится на страницах нижнего уровня.




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

Если ваш сайт сосредотачивается на информации, расположенной на страницах
верхнего уровня, можно попробовать дизайн, представленный на рисунке 1.5. В дан-
ном случае при перемещении вглубь сайта страницы становятся менее сложными.
Предполагается, что страницы нижнего уровня уточняют или расширяют информа-
цию, представленную на странице верхнего уровня, но являются практически неза-
висимыми. С точки зрения посетителя, страница верхнего уровня предоставляет то-
вары, а страницы нижнего уровня содержат дополнительную информацию. Такой
тип структуры отлично подходит для корпоративных сайтов, поскольку такие сайты
предоставляют общую информацию о компании или организации. Однако эта схема
не подходит для сайтов электронной коммерции, например, книжных магазинов и
магазинов, торгующих аудио- или видеозаписями, для которых наиболее важны стра-
ницы нижнего уровня - определенные продукты для продажи.
ГЛАВА 1. Разработка дизайна, облегчающего навигацию 19




Рис. 1.5. Если желаете сфокусировать внимание на странице верхнего уровня,
используйте менее сложный дизайн на страницах нижнего уровня


Совет
Используйте наилучший дизайн на страницах, к которым хотите при-
влечь максимальное внимание. Если наиболее важны страницы ниж-
него уровня, как, например, на сайте электронной коммерции, строй-
те дизайн по направлению к нижнему уровню. Однако если наиболее
важны страницы верхнего уровня, как, например, на корпоративном
сайте, сделайте акцент на страницах верхнего уровня.
ГЛАВА2.
Группирование схоЖих функций
Группирование - это дизайнерский прием, в котором схожие элементы помещаются
друг возле друга. Возьмем любое количество объектов, например, набор на ри-
сунке 2.1. Если их расположить равномерно по всему пространству дизайна, они бу-
дут выглядеть, как случайные объекты - ни больше, пи меньше. Однако если их сгруп-
пировать, как показано на рисунке 2.2, глаз выделяет каждую группу как отдельную
единицу, и мозг пытается понять, почему эти отдельные объекты принадлежат дан
ной кон-кретной группе. Если сначала у нас была группа случайных, бессмысленных
объектов, то теперь появились две логические группы: живые и неживые объекты.
Люди, размышляющие над тестами I.Q., любят данный тип задач.




Рис. 2.1. Возьмите любой набор Рис. 2.2. Соберите объекты в группы,
случайных, бессмысленных объектов и мозг свяжет их логически
Группирование является простым и интуитивно понятным. Оно работает по принципу
ассоциаций и необыкновенно эффективно. И его можно использовать в Web-дизайне.
На самом деле Web-сайт является одним из наилучших мест для применения группи-
рования. Почему? Чтобы не заходить далеко, возьмем простую гиперссылку, являющу
юся основным элементом интерфейса компьютер-человек. Основным способом взаи-
модействия посетителей с сайтом являются щелчки на гиперссылках. Однако сами ги-
перссылки имеют, по крайней мере, три различных назначения. Щелчок часто приво-
дит к загрузке новой страницы, но не всегда. Иногда щелчок на гиперссылке заставля-
ет открыться окно программы для работы с электронной почтой. В другой раз щелчок
запускает скрипт на языке JavaScript или серверное приложение. Все зависит от того,
как запрограммировать ссылку.
Забудьте теперь об электронной почте и скриптах. Просто рассмотрим основное на-
значение гиперссылки, которое заключается в загрузке новых страниц, и вы по-преж-
нему найдете множество вариаций. Иногда страница загружается в текущем окне бра-
узера. Иногда страница загружается в новом окне браузера. Иногда посетитель пере-
• ходит на другую страницу сайта. Иногда посетитель переходит на совершенно другой
сайт. И ссылки, инициирующие выполнение всех этих разнообразных действий, вы-
глядят совершенно одинаково, как показано на рисунке 2.3. Только одна из этих ссы-
лок открывает окно программы для работы с электронной почтой, и единственный
способ ее найти - угадать.
К счастью, есть дизайнерский прием, позволяющий ассоциировать объекты логичес-
ки, как показано на рисунке 2.4. Обратите внимание, как группирование намного
ГЛАВА 2. Группирование схожих функций 21

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


Не Edit View Favorites lools




Рис. 2.3. Отвечайте быстро! Какие из приведенных гиперссылок заставляют
открыться окно почтовой программы ? Нельзя узнать это иначе,
кроме как щелкнуть на них, поскольку гиперссылки всегда
выглядят одинаково, независимо от их назначения



ar
Favorites loots Help
» № »*


Which link?
Which M e '
Which Me?


Which Imk ?




Puc. 2.4. Примените прием группирования к этому бессистемному
набору объектов, вы, возможно, сможете догадаться, что ссылка,
расположенная справа, открывает окно почтовой программы

Можно использовать возможности группирования для оптимизации интерфейса ва-
шего Web-сайта. Взгляните на навигационную панель, показанную на рисунке 2.5. Наз-
вания на кнопках могут быть ясными и простыми для понимания, однако сами кноп-
ки сгруппированы не самым эффективным способом. Щелчок на первых четырех
кнопках приводит к загрузке новых страниц, тогда как щелчок на пятой кнопке отк-
рывает окно программы для работы с электронной почтой. Это обрывает логику ва-
шего дизайна, поскольку посетители ожидают, что после щелчка на кнопке Contact Us
(Свяжитесь с нами) загрузится страница.
Лучше отделить кнопку Contact Us (Свяжитесь с нами) от остальных кнопок и пере-
нести ее в какое-либо другое место интерфейса, как показано на рисунке 2.6. Еще луч-
ше изменить целиком внешний вид кнопки Contact Us (Свяжитесь с нами), как пока-
зано на рисунке 2.7. Это усилит мысль, что кнопка Contact Us (Свяжитесь с нами) име-
ет другое назначение, не связанное с загрузкой страницы.
На навигационной панели остаются четыре кнопки. Что произойдет, если первые
три кнопки связаны со страницами на текущем сайте, а четвертая кнопка открывает
новое окно браузера и переходит на другой сайт, где посетители могут проследить за
выполнением своих заказов? И хотя все четыре кнопки загружают новые страницы,
вы, возможно, пожелаете отделить четвертую кнопку от трех остальных просто
Строим Web-сайты
22

потому, что она функционирует немного по-другому. Но где поместить четвертую
кнопку? Нежелательно группировать ее с кнопкой Contact Us (Свяжитесь с нами), как
показано на рисунке 2.8, поскольку посетители предположат, что эти кнопки .имеют
сходное назначение, хотя на самом деле это не так.




Content goes here, content goes riere. Content
ooes here. Content goes here. Content goes berc
Content ooes here. Content goes here. Content
goes here. Content goes here.




Puc. 2.5. Из-за группирования посетители предполагают, что все пять кнопок имеют
одно назначение. Однако щелчок на кнопке Contact Us (Свяжитесь с нами) открывает
окно почтовой программы, а щелчок на других кнопках загружает новые страницы



Часто задаваемые вопросы
Группирование — это просто дизайнерский прием?
Безусловно, нет. Это фундаментальный психологический принцип.
В наших мозгах зашита логика поиска смысла в группах.
В начале президентской кампании 2004 года Республиканская пар-
тия издала фотографию, на которой юный Джон Керри (John Kerry)
стоит на несколько рядов ниже печально известного либерала Джэйн
Фонда (Jane Fonda) на митинге в защиту мира в период войны во
Вьетнаме: На фотографии мистер Керри и госпожа Фонда не разго-
варивают. Они не вступают в сговор против правительства, не плани-
руют встречи на Кубе и не делают ничего, что взбесило бы консерва-
торов. Так зачем же публиковать фотографию? Все просто - группи-
рование. Ассоциация. Показав Джона Керри рядом с Джэйн Фонда,
республиканцы надеялись опорочить его образ.
ГЛАВА 2. Группирование схожих функций 23

3 mains.pnt;>i VWr-




goes here. Content goes here. Content ooes liere
Content goes here. Content goes here. Content




Рис. 2.6. Отделите кнопку Contact Us (Свяжитесь с нами),
и вашим посетителям станет понятно, что кнопка Contact Us (Свяжитесь с нами)
имеет другое назначение, нежели остальные кнопки




shoelaceuuarehous

Header
intent goes here.
Content goes here. Content
Cont
QOeS here. Content
oes goes here. Content goes here.
a
Content goes here. Content goes here. Content
Cont
goes here. Content goes here.




х 480 [ 100% *



Рис. 2.7. При изменении внешнего вида кнопки Contact Us (Свяжитесь с нами)
усиливается мыыь, что кнопка выполняет другой тип действий
24 Строим Web-сайты


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




shoelacewarehoi

Content goes here. Content goes here. Content

<< Пред. стр.

стр. 2
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>