10 наиболее популярных ошибок юзабилити, которые Вы обязаны знать и не повторять

Автор: SmashingMagazine.com
Перевод: Всеволод Козлов

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

Причина всему этому — грубейшие ошибки юзабилити. Они являются скорее, к сожалению, правилом, чем исключением.

Как очень метко выразился Джерри МакГоверн в своей статье «Backpack, проект 37signal’а, представляет собой один из наиболее удобных инструментов планирования и управления проектами. Сайт предоставляет посетителю исчерпывающую информацию относительно принадлежности и функционала данного инструмента.

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

10 наиболее популярных ошибок юзабилити, которые Вы обязаны знать и не повторять

Ощутили всю прелесть поиска авторизационной ссылки? Для тех, кто так и не нашел или не захотел тратить своего времени на поиски – ссылка для авторизации «Log-in» находится в желтом прямоугольнике по центру страницы.

Конечно же, такой вариант ее расположения никуда не годится.

Вывод: авторизационная ссылка «Log-in» должна быть расположена на видном месте читабельным шрифтом, желательно с соответствующей иконкой.

ОШИБКА №2. Всплывающие окна (Поп-апы) для отображения в них контента

Почти все современные браузеры (Firefox, Safari, Opera и Internet Explorer) обзавелись «штатным блокировщиком» всплывающих окон, рекламных баннеров и всего того, что смахивает на явную рекламу.

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

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

ОШИБКА №3. Скроллинг веб-страницы, а так же перемещение различных отдельных ее элементов по экрану посредством перетягивания курсором мыши, вместо привычного скроллинга + новый способ реализации меню

Фактически, данный прием не является ошибкой, просто он очень необычен и непривычен для веба и его пользователей. Самый наглядный пример применения данной техники в PDF-читалках.

Сайт Fichey предлагает оценить своим посетителям эту веб-ноу-хау технологию. Она у них реализована с помощью Flash. Спору не подлежит – красиво и оригинально!

Но, опять же, без минусов не обошлось – на данном сайте отсутствует возможность сделать закладку на какую-либо конкретную страницу (из-за особенностей Flash).

ОШИБКА №4. Неотличимые от обычного контента ссылки

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

Ярким примером подобного безобразия является сайт RealPlayer.

Специально для теста мы сделали скриншот главной страницы этого сайта, обозначили цифрами спорные места ссылок. Теперь постарайтесь определить на взгляд, под какими номерами скрываются ссылки, а под какими – нет! Под картинкой приведены ответы!

1, 3, 4, 6, 7 и 11 — ссылки, остальное (2, 5, 8, 9 и 10) – нет!

ОШИБКА №5. Визуальное перенасыщение информацией, а так же неоднозначность в ее восприятии

Далеко не всегда больше значит лучше. В случае с контентом наоборот: нельзя допускать перенасыщения веб-страниц сайта информацией. Наглядным примером данной серьезной проблемы является сайт Overstock.

На данном сайте используется несколько стилей для ссылок – если интересно, поугадывайте, где ссылка, а где контент похож на ссылку!

ОШИБКА №6. Принудительная блокировка браузера до выполнения предъявляемых сайтом требований

Существует колоссальное количество способов представить свой новый сервис целевой аудитории. Например, Scriblink приветствует своих посетителей модальным окном – пока посетитель не выполнит требований, предъявляемых в этом окне, воспользоваться своим браузером посетитель не сможет.

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

  • Ни «cancel»
  • Ни «ok»
  • Ни полноэкранное отображение
  • Ни клик вне модального окошка
  • Ни закрывание окна браузера (оно не закрывается)
  • Ни клик по иконке «?»

И только представьте себе, что Вы оказались в такой ситуации по причине банального интереса к данному злосчастному инструменту…

ОШИБКА №7. «Наползание» одного слоя сайта на другой

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

Подобной проблемой страдает и Yahoo.com:

ОШИБКА №8. Динамическая навигация

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

На следующем скриншоте показан еще один интересный вариант реализации динамического меню (на Flash).

ОШИБКА №9. Выпадающие меню

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

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

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

2Advanced и Brita.net яркие тому примеры.

ОШИБКА №10. Мигающие изображения

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

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

ОШИБКА БУДУЩЕГО? Наведение курсора мышки на ссылки, вместо привычного клика по ним

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

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

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

А теперь, как я и обещал в начале статьи…

Чек-лист: 8 правил юзабилити

  1. Не используйте всплывающие окна (поп-апы). Всплывающие окна отвлекают внимание посетителей от контента сайта, что не есть хорошо. Уважайте своих посетителей!
  2. Не изменяйте размер окна браузера посетителя. Причины те же, что и в случае с всплывающими окнами + еще одно: некоторые браузеры запоминают последний размер окна браузера и при новой загрузке воспроизводят его. Как очень метко подметил Бен Бодьен «Если Вы думаете, что лучше знаете, какой размер окна браузера лучше для Ваших посетителей, то Вы совершаете одну из грубейших ошибок, которая не простит Вас…».
  3. Не используйте мелкие, нечитабельные размеры шрифтов. Из-за этого длинные тексты читаются с большими усилиями, а на чтение коротких уходит больше времени, чем обычно. Это относится не только к контенту, но и к ссылкам, кнопкам, формам и другим элементам веб-сайта. Хорошая новость – в Web 2.0 все наоборот!
  4. Тексты всех ссылок должны быть понятны посетителям. Тексты ссылок должны давать представление посетителям о той странице, на которую ведет конкретная ссылка. Неоднозначные и двусмысленные тексты ссылок следует исключить.
  5. На сайте не должно быть ни одной «мертвой» ссылки. Данная ошибка способна разрушить мнение посетителей о Вас и Вашем сайте, оно Вам надо???
  6. Не используйте больше 1 анимации на странице. Анимированные баннеры очень сильно отвлекают посетителей от основного контента сайта. Если уж Вы не хотите отказаться от их использования совсем, то хотя бы не размещайте их рядом с основным контентом сайта. Посетители Вам за это будут очень благодарны!
  7. Сделайте процесс связи с Вами максимально простым и удобным. Если Вы не хотите поддерживать связь со своими посетителями – Вы на грани провала. Заинтересованные Вашим проектом посетители обязательно захотят связаться с Вами, но если не найдут Ваших координат, то сразу же потеряют интерес и доверие к Вам и Вашему сайту. Данное правило особенно важно для сайтов, непосредственно занимающихся электронной коммерцией.
  8. Все ссылки, имеющие место быть на Вашем сайте, должны открываться в этом же окне браузера. Каждый посетитель в праве сам выбирать, как и где открывать ту или иную ссылку. Поэтому навязывание своих правил не приведет ни к чему хорошему.

Источник: 10 Usability Nightmares You Should Be Aware Of

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*