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

На каждом профессионально выполненном сайте (есть, конечно, некоторые исключения, такие как портфолио и т.п.) должны быть:

• четкая, интуитивно понятная навигация
• понятные тексты
• поиск
• видимая и обдуманная структура сайта

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

В этой статье мы хотим привести несколько примеров ошибок в юзабилити, а в конце составить небольшой список правил позволяющих избежать наиболее распространенных ошибок в своих проектах.

1. Скрытая ссылка «Log-In»

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

Ссылка Log-In, должна быть гораздо крупнее и хорошо бы с иконкой.

2. Всплывающие окна

Почти каждый современный браузер блокирует всплывающие окна, эта возможность есть в Firefox, Safari, Opera и Internet Explorer, казалось бы, достаточно убедительный аргумент, чтобы не использовать их для контента сайта.

Тем не менее, разработчики Adidas решили отличиться креативностью и использовать всплывающие окна для основного контента сайта. Многие пользователи, попав на ImpossibleStory.com, так и не поймут, о чем был этот сайт, ведь отключать блокировку всплывающих окон просто-напросто лень.

3. Перетягивание для вертикальной прокрутки

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

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

4. Невидимые ссылки

Посетитель должен знать, где он сейчас, где он был и куда он может пойти дальше. Если дизайнер не позаботится о предоставлении такой информации, навигация может сильно усложниться. На сайте Real Player используется очень большое количество невидимых ссылок. Взгляните на изображение, подготовленное Трентоном Моссом, и попытайтесь определить, какие цифры обозначают ссылки, а какие нет.

1, 3, 4, 6, 7 и 11 ссылки, а 2, 5, 8, 9 и 10 нет.

5. Визуальный шум

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

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

6. Тупик

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

Ничего не помогает:

• cancel не помогает
• ok не помогает
• разворачивание на полный экран не помогает
• клик в любом другом месте не помогает
• закрыть окно браузера невозможно
• клик на вопросе, чтобы получить помощь не работает

Не очень приятно, мы ведь просто хотели посмотреть, что может этот сервис.

7. Перекрытие одного слоя сайта другим

Типичная проблема, выпадающее меню попадает под большую Flash заставку и пользователь никак не может выбрать нужный ему пункт.

Та же самая проблема и у Yahoo.com:

8. Динамическая навигация

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

Чтобы понять, что происходит с меню на следующем сайте, посетителю может понадобиться время, хотя после того как он поймет идею, работать с меню не очень уж и сложно.

9. Выпадающие меню

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

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

2Advanced и Brita.net отличные примеры этого кошмара.

10. Мигающие изображения

Чтобы преодолеть «баннерную слепоту» рекламщики используют анимированные баннеры — это может быть gif или Flash, но в обоих случаях, если на странице располагаются несколько таких элементов, они значительно усложняют чтение текста.

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

11. Наведение мышки вместо кликов

Dontclick.it исследует безкликовую среду. Они хотят разобраться, что и как измениться для пользователя, если ему придется отказаться от привычки кликать.

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

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

8 правил хорошего юзабилити

1. Не используйте всплывающие окна
   Всплывающие окна прерывают естественный ход просмотра страниц и отвлекают внимание пользователя. Уважайте ваших посетителей.
2. Не изменяйте размер окна пользователя
   Те же самые аргументы, что и для всплывающих окон остаются, но добавляется еще один, некоторые браузеры сохраняют размер окна и используют его при следующем запуске.
3. Не используйте слишком мелкие шрифты
   Они затрудняют чтение длинных текстов, да и небольшие вводные тексты читаются медленнее. То же верно и для ссылок, кнопок, форм, поля поиска и других элементов. Хорошая новость в том, что в Веб 2.0 предпочтение отдается крупным шрифтам.
4. Текст ссылок должен быть понятным
   Ссылки должны максимально точно описывать место, на которое они ведут. Все двусмысленные тексты ссылок должны быть исключены.
5. Мертвых ссылок быть не должно
   По крайней мере, их число должно быть сведено к минимуму.
6. Не допускайте более одного анимированного изображения на странице
   Если мигающие изображения разбросаны по всей странице то сконцентрироваться на ее содержании очень трудно. Используя анимированные баннеры, не размещайте их близко от основного текста.
7. Посетители должны иметь возможность легко связаться с вами
   Если желающий связаться с вами посетитель не сможет найти соответствующую информацию вы рискуете потерять его доверие и интерес. Особенно важна возможность контакта на сайтах электронной коммерции.
8. Ссылки должны открываться в том же окне
   Посетитель хочет контролировать все, что происходит в браузере. Если ему нужно открыть ссылку в новом окне он сделает это без труда, делая ссылки, которые всегда открываются в новом окне, вы принимаете решение за него, не стоит надеяться, что он это одобрит.

Похожие статьи

• 15 раздражающих читателя особенностей сайта