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

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

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

"Кликните здесь"
Вроде бы, само собой разумеется, что кнопки должны быть похожи на кнопки. Но многие дизайнеры пренебрегают этим простым правилом. Это настоящее бедствие современного Интернета.

Пользователь должен видеть, что элемент веб-страницы - кнопка или гиперссылка - интерактивен. Кнопка должна быть "виртуально доступной", выражаясь языком специалистов. Дверная ручка - это предмет, на который вы кладете руку и поворачиваете. Так и кнопка должна выглядеть как что-то, на что можно нажать. Чтобы достичь этого часто достаточно просто придать ей объемность. Используйте эффекты Bevel (скос) или Emboss (барельеф). Можно просто поместить кнопку на цветном фоне или сделать обрамление. Разработайте определенную схему для интерактивных элементов и придерживайтесь ее. Если все интерактивные (или не интерактивные) элементы красного цвета, используйте его и для кнопок.

Визуальное выделение, например эффект затенения, показывает на какие элементы нужно кликать.

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

С появлением стандарта CSS (Cascading Style Sheets - стандарт консорциума WWW, определяющий способы реализации возможности изменения сразу нескольких веб-страниц) , гиперссылки подчеркивают все реже. На многих сайтах ссылки выделяются цветом или жирным шрифтом. Но все же, если вам нужна четкая система ссылок - используйте подчеркивание. Если хотите пожертвовать удобством ради красоты - по крайней мере, выделите ссылки жирным шрифтом или цветом, чтобы они отличались от обычного текста. Хорошо, если при наведении мыши появляется подчеркивание.

Какую бы схему для интерактивных элементов вы не избрали - не выделяйте подчеркиванием обычный текст. Это может запутать пользователей, которые привыкли к тому, что подчеркнутый текст - это ссылка.

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

Догадайся
Телефон - яркий пример встроенной обратной связи. Разная тональность или количество импульсов при нажатии разных кнопок позволяет различать их и контролировать работу аппарата. Аналогично действуют и сайты с продуманным интерфейсом. Например "нажатая" кнопка показывает, что посетитель уже на нее кликал.

Отображение состояния кнопки (нажата или нет) также поможет пользователю сориентироваться. Хорошая мысль - показать, что кнопка нажата, выделив ее серым или сделав неактивной. Тогда пользователь знает, что он нажал определенную кнопку и, если схема навигации хорошо продумана, с одного взгляда может понять в какой части сайта он находится. Если вы используете систему гиперссылок для навигации по сайту, стоит убирать подчеркивание или выделять серым активированные ссылки.

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

Пример отличной обратной связи. Один взгляд на панель навигации - и я вижу, что я в разделе "Products & Services".

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

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

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

В навигационной схеме отображается путь к странице, с которой пользователь начал навигацию по сайту и предоставляется возможность быстро вернуться на любую из страниц. Эту схему называют "отслеживанием пути". Есть разные методы ее реализации, но самый распространенный - аналог адресной строки, в которой отображены заголовки посещенных страниц. Например: Домашняя страница > О нас > Инвестиции.

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

На MySimon.com эффективно использована навигационная схема. Попробуйте также популярную кнопку Track Search (оотслеживание пути).

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