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

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

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

1. Использование национальных флагов при поддержке страниц на нескольких языках

Я бы вообще отказался от использования флагов для переключения на другие языки. Тут просто невозможно учесть всю национальную специфику.

Хрестоматийный пример — использование американского флага для английского языка

Во-первых, английский изобрели вовсе не в Америке,  — англичане могут обидеться. 
Во-вторых, замена на флаг Объединенного Королевства тоже не панацея — язык-то АНГЛИЙСКИЙ, значит должен использоваться флаг именно АНГЛИИ. А вот его-то как раз очень мало кто знает.

2. Ссылка переключения языка ведет на главную страницу

Логичнее, когда переключатель языка ведет на ту же страницу на другом языке, а не на главную страницу сайта. Я понимаю, что это технически сложнее реализовать, но если вы ставите переключатель на внутренних страницах, это означает, что вы хотите сделать удобным для посетителя перевод ТЕКУЩЕЙ страницы на другой язык, чего на многих сайтах не происходит — ссылка English с внутренних страниц ведет на главную страницу англоязычной версии сайта.

3. Логотип сайта не кликабелен

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

4. Внешний вид объектов не передает их иерархию

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

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

То же самое относится и к заголовкам. Естественно, заголовок должен быть больше подзаголовков, подзаголовки — больше подподзаголовков и т. д.

А вот на выравнивание разработчики часто не обращают внимание. Заголовок делают по правому краю, подзаголовки по центру...

Лучше всего выровнять их все по левой стороне. Такое выравнивание сильно повышает эффективность передачи визуальной иерархии.

5. Навигация не помогает пользователю определить, в каком месте сайта (разделе, подразделе...) он находится.

Навигация должна помогать посетителю идентифицировать свое место расположения на сайте.

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

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

6. Кнопки, которые на самом деле ссылки

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

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

7. Обычные и структурные ссылки выглядят одинаково

Существуют 2 вида ссылок: структурные, ведущие на разделы сайта, и ссылки в тексте. На некоторых сайтах они выглядят абсолютно одинаково. Иногда не сразу понятно, обозначает ли ссылка целый раздел, или ведет на единственную страничку.

Я всегда предлагаю каким либо образом усилить структурные ссылки, иными словами сделать ПАНЕЛЬ НАВИГАЦИИ. Это можно сделать с помощью графики, фона другого цвета и т. д.

8. Не ясно, по чему можно кликнуть

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

Идеальный вариант: ссылки должны быть:

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