10 юзабилити-кошмаров, которых вы должны избегать

Перевод статьи 10 Usability Nightmares You Should Be Aware Of © www.smashingmagazine.com.

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

В своей статье “Why award-winning websites are so awful” Герри МакГоверн пишет — «красивой картинкой выигрывают конкурсы, реальным содержанием выигрывают клиентов» и это 100%-ная правда. Не имеет значения, какой у вас дизайн и не имеет значения, какую функциональность вы предоставляете — если ваши посетители не понимают, как они могут попасть из точки А в точку Б, они не будут пользоваться вашим сайтом.

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

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

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

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

1. Малозаметная ссылка входа.

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

Сcылка “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.

Бонус: Снова не совсем ясно, что является ссылкой, а что — нет. Overstock тоже использует множество вариантов выделения ссылок и эффектов при наведении на них. Вот это — ссылка или не ссылка? Возможно, вам будет интересно попытаться угадать.

6. Глухой угол.

Можно использовать различные методы для представления нового веб-сервиса своим клиентам. Scriblink привествует своих посетителей с помощью поп-апа и Java-апплета. Для начала использования сайта нужно что-то ввести в появившемся окошке.

Ничто другое вам не поможет.

• Клик на “cancel” не поможет,
• кнопка “OK” не поможет,
• переход в полноэкранный режим не поможет,
• клик в любом другом месте тоже не поможет,
• закрыть окно браузера невозможно,
• за кликом на знак вопроса ничего не последует.

Нечестно, на самом деле. Мы просто хотели посмотреть, что это за сервис…

7. Блоки контента, накладывающиеся друг на друга.

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

Та же проблема на Yahoo.com:

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

Что с первого взгляда выглядит привлекательной системой навигации, со второго показывает себя с худшей стороны. Не имеет значения, куда вы направили указатель своей мышки — картинки-заставки скользят вниз и вверх и сбивают вашу фокусировку. На картинке, расположенной ниже, мы попытались кликнуть по ссылке “history” — а она отодвинулась от указателя; и нет, картинки-заставки не ссылаются на ту страницу, на которую мы бы хотели попасть.

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

Тоже самое на сайте Kabe243. Там же: визуальный шум во всей своей красоте.

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

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

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

2Advanced и Brita.net отлично иллюстрируют этот юзабилити-кошмар.

Нам понадобилось много терпения, чтобы таки сделать эти скриншоты.

10. Мигающая анимация.

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

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

Кошмар из будущего? Навигация без кликов.

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

В этом интерфейсе вы не найдете ни одной кнопки. Вы будете перемещаться по сайту другим способом — наводя указатель мыши на заинтересовавшие вас области. Выглядит возможно и хорошо, но может стать действительно новым юзабилити-кошмаром, если эту технику начнут применять повсевместно. Просто представьте себе пользователей, пытающихся открыть внешнюю ссылку в новом окне браузера. Или несколько внутренних ссылок в разных окнах-закладках… (вот именно поэтому мы и включили Dontclick.it в наш список).

Бонус. Убедиться, что вы также не нарушаете следующие 8 пунктов.

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

Буду благодарен за любые исправления и комментарии!