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

Главная / категория «Общие советы юзабилити сайта» / «10 наиболее популярных ошибок юзабилити»

Опубликовано Октябрь 24th, 2007

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

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

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

Как очень метко выразился Джерри МакГоверн в своей статье «Почему сайты-победители всевозможных конкурсов столь неэффективны?» http://www.gerrymcgovern.com/nt/2006/nt-2006-10-16-awards.htm :

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

И он абсолютно прав! Абсолютно неважно, какой внешний вид у Вашего сайта, абсолютно неважен его функционал – если посетитель не сможет найти необходимую ему информацию на Вашем сайте, он его покинет навсегда!

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

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

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

В данной статье мы собрали для Вас 10 наиболее популярных ошибок юзабилити, которые Вы обязаны знать и не повторять ни при каких обстоятельствах. Каждая ошибка имеет краткое пояснение и подкреплена ярким примером в виде скриншота.

В самом конце статьи Вы найдете чек-лист: 8 правил юзабилити.

ОШИБКА №1. Едва заметная ссылка для авторизации на сайте (Log-In)

Backpack http://www.backpackit.com/ , проект 37signal’а, представляет собой один из наиболее удобных инструментов планирования и управления проектами. Сайт предоставляет посетителю исчерпывающую информацию относительно принадлежности и функционала данного инструмента.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Далеко не всегда больше значит лучше. В случае с контентом наоборот: нельзя допускать перенасыщения веб-страниц сайта информацией. Наглядным примером данной серьезной проблемы является сайт Overstock - http://www.overstock.com/Jewelry-Watches/Mens-Watches/136/dept.html .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2Advanced.com и Brita.net http://www.brita.net/de/combination_ovens.html?&L=5 яркие тому примеры.

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

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

Digital Web Magazine http://www.digital-web.com/articles/interview_sidebar_creative/ , превосходное он-лайн издание для веб-специалистов, постоянными читателями которого мы являемся, допустил эту досадную ошибку, разместив в левом сайдбаре каждой страницы сайта анимированный рекламный блок.

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

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

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

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

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

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

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

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

http://www.w3school.ru/blog/usability/10-usability-nightmares-you-should-be-aware-of.html

12 комментария(-ев)

Светлана

А я в первой ошибке “log in” быстро нашла
хотя на автомате его ищешь в верхней части браузера.
А вот интересно, как уважаемый Всеволод относится к такому ноу хау, как ссылки, на которые кликать не надо ?…
Всеволод Козлов

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

Сырая идея, надо доводить до ума… Тогда, может, что-то путное из нее получится. А так…
Natasha

На сколько известно мне - в 90 % случаев ошибка №7 является следствием того, что разработчики не тестировали сайт на совместимость с различными браузерами и версиями браузеров.
Хотя я удивлена что такой баг вылезает на Yahoo.com - это под каким то экзотеческим браузером соскриншотили, или реально разработчики настолько беспечны ?
saxarock

статейка ниче так вот думаю теперь над лог ин…
вроде все предельно понятно но места она много к меня занимает…
Sunlight

Когда увидел сайт 2Advanced, мне он оч понравился его hi-tech дизайн. Редко когда сайты делают hi-tech наподобие того, что показывают в фильмах.
И менюха мне их понравилась, особенно новый концепт скроллинга.
А с пунктом 9 я согласен - очень раздражает, что как только мышку отведешь, пропадает вся менюха.
P.S. Правда, я вообще не понял о чем этот сайт
KUDAIBERGEN

кРУТО, СПАСИБО!!!
Dmitriy

pobol’si by takih statej..mne kak raz v temu t.k. ja sej4as peredelyvau svoj internet magazin, kstate ne ploho by bylo esli budet tema pro uzability internet magazinov t.k. tam ono o4en’ vazno
Anstak

Зачет с 4 по 7. Особенно наползание слоев. Так часто вижу как неопытные люди вставляют всё абсолютом, естественно что у них на 1280*1024 и IE7 - всё нормально. Видели бы они другие разрешения, и другие браузеры, ужаснулись бы.
Ozerman

Полностью согласен с каждым изложенным пунктом.
По поводу открытия ссылок зависанием мышки:
Возьмите сенсорную панель (ноутбук допустим) и попробуйте с ней на этом сайте позависать. Очень непредсказуемо получается иногда.
Gotnur

спасибо. узнал кое что новое