Приветствую! Эта статья посвящена удобству пользовательских интерфейсов, в частности, веб-сайтов или, по-другому, юзабилити. Я решил не писать о вполне очевидных на данный момент и сто раз оговоренных на других блогах вещах типа читабельного текста, ограничения в рекламе и т. д. Это уже и ежикам понятно. Поэтому решил акцентировать внимание на конкретных мелочах. Ведь из мелочей складывается общее впечатление. Я разобрал многие ошибки – настоящие кошмары юзабилити на вполне конкретных примерах. Советую после прочтения статьи, воспользовавшись инструментами для тестирования юзабилити проверить свой сайт на наличие этих ошибок. :) . Вдруг…

Прежде чем пойдет конкретика давайте немного обобщим понятия, включаемые в юзабилити. Гуру могут пропустить сей абзац, остальным – читать! :) Итак, какой сайт в понимании пользователя является удобным? Давайте подумаем.

Итак, представьте себе новичка, впервые потрогавшего мышку, ну или матёрого нуба-ламера. Представьте себе так же, что он каким-то чудом залез на ваш сайт. Что нужно сделать, чтобы подольше его задержать на нем? Правильно, хотя бы не спугнуть. То есть, сайт не должен быть сильно мудреным, запутанным, а так же, не должен совершать действия, о которых заранее не сообщается при открытии ссылки (скачать файл, закрыть вкладу итд)

А теперь представьте себе обычного пользователя. Что надо ему, чтобы чувствовать себя комфортно на вашем сайте? Ему нужна уверенность, что на вашем сайте все подчинено его контролю – захотел, открыл ссылку в новом окне, захотел -в том же, захотел – заюзал поиск или подписался на RSS.

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

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

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

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

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

4.1. При открытии страницы окно восстанавливается/разоварчивается/меняет свои размеры.

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

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

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

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

5. Нестандартная компоновка. Классический пример – страница с результатами поиска в гугле (новый дизайн).

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

6. Сложная процедура регистрации. Сейчас достаточно четко прослеживается тенденция упрощения практически во всем. В том числе и в регистрации на сайтах – достаточно вспомнить вордпресс. Ошибка многих администароторов именно в усложненности этого процесса. Создается множество ограничений по выбору пароля, иногда вас требуют ввести в обязательном порядке дату рождения, адрес, время, когда вас нет дома и есть ли дома злая собака :) … Завершает картину убойная нечитаемая капча и добивает факт того, что при неудачном заполнении формы регистрации все приходится вводить заново.

Кстати, прежде чем вводить обязательную регистрацию – подумайте, нужно ли это вообще?

То же касается заполнения любых других форм.

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

2 Комментариев на “И снова о юзабилити – моменты, которые мы упускаем.”

  1. sofcase Says:

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

  2. admin Says:

    sofcase, спасибо за мнение! Но всё же я вынужден возразить Вам по двум причинам:

    1. Несмотря на то, что в гугле дизайн разрабатывали профи, налицо явный просчет – лично мне не удобен новый интерфейс, да и не только мне, даже Лебедев писал на своем сайте что получилась мягко говоря, лажа. Панель слева реально отвлекает, почему – я писал выше.

    2. У меня разрешение 1024 на 768, но даже при нем, как Вы видите на скриншоте, справа огромный кусок пустого пространства, который вообще ни к селу, ни к городу, что еще один минус к компоновке.