<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

oes here. Content goes here. Content goes iiere
?ontent goes here. Content goes here. Content
goes here. Content goes Here,




Ш
eoo x *so ; 100%


Puc. 2.8. He добавляйте кнопки в одну группу, если они не выполняют схожие функции.
Кнопка Tracking (Отслеживание) ссылается на страницу на другом Web-сайте

Наилучшим выбором будет выделение места для новой группы в вашем интерфейсе,
как показано на рисунке 2.9. Более того, преобразовав кнопку в простую гиперссылкл,
которая обычно ссылается на новую страницу, вы дадите посетителям подсказку о ее
назначении.
Хорошее группирование упрощает жизнь не только для ваших посетителей. Она упро-
щает жизнь для вас как дизайнера. По мере роста сайта вы всегда будете точно знать,
куда добавить новые кнопки или ссылки, как показано на рисунке 2.10. В этом случае?
ваш сайт в конечном итоге не будет выглядеть похожим на монстра Франкенштейна.
Сам дизайн исключает излишнюю мыслительную работу.
Метод группирования становится еще более важным на таких страницах, как корзины
электронных магазинов со множеством элементов управления со ссылками. Помните,
что удобство в использовании - это основное правило игры в Интернете. Попробуйте;
поработать с интерфейсом корзины, который представлен на рисунке 2.11. Дизайн
делает использование корзины мучительным. В данном интерфейсе ничто не сгруппиро-
вано в соответствии с назначением, поэтому посетители вынуждены читать название каж-
дой кнопки, чтобы понять, что им делать. Чем больше вы заставляете их останавливаться
и думать о том, что они делают, тем меньше вероятность, что они сделают покупку.
ГЛАВА 2. Группирование схожих функций 25




Content goes here. Content goes here. Content
goes here. Content goes here. Content goes here
Content goes here. Content goes here. Content
goes here. Content goes here.




contact us


io ioo%V
Ш


Рис. 2.9. Вместо этого создавайте отдельные группы для отдельных функций




Тгэск your package j Shop for shoes I Compare




Content goes here. Content goes here. Content
goes here. Content goes here. Content goes here,
Content goes here. Content goes here. Content
goes here. Content goes here.




set quote
I




Рис. 2.10. Благодаря группированию, вы всегда точно знаете,
куда добавить новые кнопки или ссылки
26 Строим Web-сайты




000
contact us gat quote г*ч*ли
service



] 100%
800x480 -



Рис. 2.11. Посетителям тяжело исполгзовать эту корзину,
поэтому они не захотят, ее использовать вообще. Прощайте, продажи

Небольшое группирование улучшает ^тот интерфейс, как показано на рисунке 2.12.
Организация кнопок в соответствии с их назначением делает работу с корзиной про-
ще и более интуитивно понятной. А еще лучше доработать дизайн кнопок, чтобы уси-
лить мысль об их различных назначениях, как показано на рисунке 2.13.




Що о о •
Рис. 2.12. Корзина стала более понятной после организации кнопок
в соответствии с их назначением
27
ГЛАВА 2. Группирование схожих функций




Track your package


Your shopping cart
Паш



• *.
»«
• Ш Маг,м*«СоЫ shoelace set


• "«
-
• ««
.
ф Value pack

п »»«
^ P «Molt titanium shoelace м м
Total $3S1.IO




• 480
, 1100%




Puc. 2.13. Еще лучше использовать различный дизайн для различных типов кнопок
ГЛАВА 3.
Разработка рисунков для щелчков
В языке HTML чрезвычайно просто превратить изображения в гииерссылки. Просто
вставьте тег изображения между открывающим и закрывающим тегом анкера, наподо-
бие следующего:
<а href="index.htm"ximg src="/images/logo.gif"></a>
Обратите внимание, что браузер рисует прямоугольную рамку вокруг изображения ги-
перссылки, как показано на рисунке 3.1. Цвет рамки такой же, как и цвет текстовых
гиперссылок. Ваш старый добрый Web-браузер всегда думает наперед и справедливо
предполагает, что вы желаете предоставить своим посетителям визуальную подсказку,
что изображение является ссылкой. Рамка помогает отличить на странице изображе-
ния со ссылкой от изображений без ссылки.


i
Не Е* View Favotrtes Toots tjeb




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



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


Но на всех сайтах, которые вы посещали в Интернете, сколько изображений со ссыл-
кой, использующих встроенную рамку, вы видели? Не очень много. Рамка является не-
уклюжей и безобразной и стремится повлиять на поток зрительной информации
страницы. Вот почем)' большинство Web-дизайнеров предпочитает отключать рамку,
как в следующем примере:
<а href ="index.htm"ximg src = "/images/logo.gif" b o r d e r = " 0 " x / a >
ГЛАВА 3. Разработка рисунков для щелчков 29

Присваивание атрибуту b o r d e r значения 0 решает одну проблему, но при этом созда-
ет другую, как продемонстрировано на рисунке 3.2. На изображении с гиперссышкой
все еще можно щелкать, однако без рамки, привлекающей внимание, посетители не
имеют никакого понятия о том, какое изображение содержит ссылку, пока не-пере-
местят указатель мыши над всеми изображениями. Ваши посетители не простят вам
этого. Все, что заставляет их останавливаться и думать, является приглашением поки-
нуть ваш сайт.




Рис. 3.2. Можно отключить встроенную рамку гиперссылки, однако в этом случае
изображение со ссылкой будет выглядеть так же, как остальные изображения



Совет
Атрибуту border можно присвоить любое значение, а не только 0.
Чем большее значение используется, тем толще становится рамка.



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




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




Рис. 3.4. О, гораздо лучше. Изображения со ссылками
выделяются в данном контексте
ГЛАВА 3. Разработка рисунков для щелчков 31


Совет
Задать значение атрибута border можно и для изображения без
ссылки. Программа Netscape рисует рамку, используя цвет текста на
странице по умолчанию. Программа Internet Explorer рисует рамку, ис-
пользуя черный цвет.

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




Рис. 3.5. Разработка изображений со ссылками,
похожих на кнопки, - это верный способ привлечения щелчков
32 Строим Web-сайты




Определение
Намек ˜ это визуальная подсказка, указывающая на назначение
элемента дизайна.



Хотя кнопки и являются мощным инструментом, не считайте это само собой разуме-
ющимся. Кнопки не сильно вам помогут, если посетители не смогут их найти, как по-
казано на рисунке 3.6. Всегда старайтесь размещать кнопки так, чтобы они были за-
метны, как показано на рисунке 3.7. Желательно, чтобы ваши посетители ощущали,
что ваш интерфейс находится под их управлением.




Square pegs vs. round holes:
the controversy continues
Do square pegs fit into round holes? As ft turns out, the answer to this age-olc
question isn't as straightforward as you might think.
Recent studies have shown trial, depending on the size of the holes relative to the
size of the pegs, there's a very good chance that the pegs will fit.




Puc. 3.6. Посетители предполагают, что переход
по газетным материалам осуществляется с использованием кнопок
со стрелками. Однако их цвет, дизайн и соседство с другими
элементами дизайна затрудняют поиск этих кнопок

На рисунке 3.7 также показано, что использование значков или символов в качестве
изображений со ссылками является еще одним эффективным намеком. В данном ди-
зайне значки стрелок более непосредственны и интуитивно понятны, чем кнопки с
надписями Previous (Предыдущий) и Next (Следующий). Вы можете заметить, однако,
что значки обладают некоторыми характерными особенностями кнопок. Они выгля-
дят трехмерно, что помогает им выделиться на странице.
ГЛАВА 3. Разработка рисунков для щелчков 33



Совет
Убедитесь, что кнопки без ссылок не похожи на кнопки, иначе ваши
посетители будут тщетно щелкать на них, удивляясь, почему ничего
не происходит.




eometry
Nr-WS | PROOFS I EQUATIONS | ABOUT С




Square pegs vs. round holes:
the controversy continues
Do square pegs fit Into round holes? As it turns out, the answer to this age-old
Question isn't as straightforward as you might think.
Recent studies have shown that, depending on the size of the holes relative to the
size of the pegs, there's a very good chance that the pegs will frt.




Puc. 3.7. Аккуратно располагайте кнопки.
Контекст существенно меняет дело, даже если вы используете
мощный намек, например, моделирование кнопок

Значки и символы работают лучше всего, когда их значение очевидно и общеприня-
то. Символы в стиле DVD или CD для функций, например, Play (Проиграть), Fast
Forward (Перемотка вперед), Stop (Остановить) и остальные, в основном, достаточно
понятны. Это касается и использования значка корзины для функции Delete (Уда-
лить) или значка с изображением листочка бумаги с отогнутым углом для функции
New Document (Новый документ). Однако остальные значки, представленные на ри-
сунке 3.8, могут иметь более вольную интерпретацию. Значок карандаша на некото-
рых сайтах может обозначать функцию C r e a t e (Создать), а на других сайтах - функ-
цию E d i t (Правка). Значок земного шара может обозначать функцию выхода в Ин-
тернет, но в другом случае может и не обозначать. Эффективность значков на вашем
сайте зависит от того, как вы их используете, но хорошее практическое правило зак-
лючается в следующем: если существует какое-либо сомнение насчет значения опреде-
ленного значка, не используйте его.




2-191
Строим Web-сайты
34




!«•«•>• W
Рмс. 3.5. Очевидны ли значения этих значков, когда вы смотрите
на них вне контекста ? Если нет, подумайте дважды перед тем,
как использовать их на вашем сайте в качестве изображений со ссылками

Одним из способов решения проблемы двусмысленности является включение текста
в изображение значка, как показано на рисунке 3.9. Этот подход используется в опера-
ционной системе Microsoft Windows и работает достаточно хорошо, когда речь идет о
простоте использования. В операционной системе Windows все имеет значок для
щелчка, однако у каждого значка есть название - на всякий случай. Если желаете,
можете поэкспериментировать с таким подходом на вашем Web-сайте, однако если ва-
ши значки работают только вместе с сопровождающими надписями, возможно, лучше
не использовать только кнопки. Пользователи ожидают от изображений в рабочей
среде, как Windows, одного, и совсем другого в информационной среде, такой, как Ин-
тернет. То, что пользуется успехом в одной среде, не всегда может быть перенесено в
другую. Люди полагают, что можно щелкать на значках, расположенных на их рабо-
чем столе, поскольку так работает операционная система Windows. Они не думают, что
щелкать можно и на значках, расположенных на Web-сайте, где изображения часто ис-
пользуются только для информационных целей.




Определение
Метка - это текст на кнопке.
ГЛАВА 3. Разработка рисунков для щелчков 35


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




Рис. 3.9. Одним из способов решения проблемы
двусмысленности является включение текстовой надписи
в изображение значка, однако данный метод

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>