Чеклист юзабилити сайта

25 контрольных вопросов для проверки юзабилити веб-сайта

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

Несмотря на то, что этот контрольный список – часть является одним из оплачиваемых этапов моего коммерческого предложения, я решил опубликовать его. Для начала несколько разъяснений об отказе от ответственности. Во-первых, я не претендую на то, что этот список является всеобъемлющим или уникальным. Например, Джейкоб Нильсен в своей книге Homepage Usability опубликовал свой контрольный список из 113 вопросов. Это всего лишь мой собственный способ организации важных, по моему мнению, вещей с целью их контролировать. Во-вторых, мой способ использования терминов может отличаться от Вашего. Я использую слово «юзабилити» в очень широком смысле, а то значение, которое я вкладываю в слово «доступность» не в полной мере является отраслевым стандартом. Вам это не по вкусу? Тогда у Вас всегда есть возможность составить свой собственный контрольный список. И, в конце концов, последнее предупреждение: этот пост достаточно объемный.

Общий обзор

Весь список разбит на 4 примерно равные секции:

I – Доступность сайта

II – Идентификация

III – Навигация

IV – Контент

Я описываю и даю логическое обоснование всех разделов, но Вы можете просто скачать сам контрольный список в виде отдельной PDF-странички. Я постарался максимально упростить систему оценок и сократил их количество до 3: 1 – зеленая «галочка» = Хорошо/зачет, 2 – красная «галочка» = требует улучшения, но не совсем плохо, 3 – красный крест = плохо/отсутствует. Не все вопросы применимы ко всем сайтам.

Раздел I. Доступность сайта

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

1. Приемлемая скорость загрузки сайта

Можете считать меня старомодным, но мне все равно нравится, когда размер сайта не превышает 100 КБ (даже лучше 60 КБ). Если сайт грузится очень долго, большинство посетителей просто уйдет и не будет дожидаться полной загрузки. Да, у многих из нас сейчас широкополосный интернет, но это на самом деле делает нас еще более нетерпеливыми.

2. Достаточная контрастность текста на фоне страницы

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

3. Размер шрифта и межбуквенные интервалы не мешают читать текст

Существует множество точек зрения на идеальный размер шрифта для текстов, однако мнение, что шрифт всегда слегка великоват, ошибочно. Если текст на Вашем сайте читается с трудом, посетитель уйдет разочарованным. Еще важно убедиться в том, что Вы оставили достаточный межстрочный интервал. Пробелы – лучшие друзья дизайнера!

4. Флэш и другие визуальные эффекты используются в небольшом количестве

Как бы потрясающе не выглядел Ваш сайт, никто не будет ждать 5 минут, пока загрузится flash-плагин. Пользуйтесь новыми технологиями в необходимом объеме и только в тех случаях, когда это действительно соответствует Вашей цели. Использование стандартного HTML/CSS также является плюсом для поисковых механизмов.

5. Изображения имеют соответствующие ALT-теги

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

6. На сайте используется страница 404 собственной разработки

Если какая-то страница на Вашем сайте не существует, то лучшим способом потерять посетителя будет белая страница с надписью "404 Not Found" – «Ошибка 404: Страница не найдена». Создайте собственную страницу 404, предпочтительно, чтобы с нее посетитель мог по ссылке перейти на страницу с контентом.

Раздел II. Идентификация

Первым ключевым вопросом посетителя, впервые попавшего на Ваш сайт, будет «Кто вы?». Очень важно ответить на него быстро и обеспечить четкий переход к последующим естественным вопросам – «Что вы делаете?», «Почему я должен вам доверять?» и прочим.

7. Логотип компании сразу бросается в глаза

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

8. Подзаголовок (слоган) четко отражает цель компании

Ответьте на вопрос «Что вы делаете?» лаконично с помощью информативного слогана. Избегайте маркетингового жаргона и создайте пусть небольшое, но уникальное и ценное описание Вашего предложения. Это также будет плюсом в плане SEO.

9. Информация на главной странице воспринимается в течение 5 секунд

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

10. Четкий и понятный переход к информации о компании

Старая добрая страница «О нас» или «О компании» может показаться скучной, но предсказуемость дальнейших действий имеет большое значение для веба, и людям нужно предложить простой способ получить о Вас больше информации.

11. Четкий и понятный переход к контактной информации

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

Раздел III. Навигация

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

12. Основная схема навигации легко распознается

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

13. Навигационные метки четкие и краткие

Не пишите «Свяжитесь с нашей командой в режиме он-лайн», если можно просто сказать «Свяжитесь с нами». Ваша основанная навигация должна быть краткой, уместной и понятной большинству смертных.

14. Достаточное количество кнопок/ссылок

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

15. Логотип компании ведет на главную страницу

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

16. Ссылки согласованные и легко распознаются

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

17. Свободный доступ к поиску по сайту

Если на Вашем сайте есть поиск, позаботьтесь о том, чтобы он был заметен. Для его размещения предпочтителен правый верхний угол страницы. Лучшим названием этой кнопки для большинства сайтов было и остается слово «Найти».

Раздел IV. Контент

О том, что контент правит миром, Вы слышали и раньше. Если Вы не хотите, чтобы королевство развалилось, то контент должен быть согласованным, организованным и его должно быть легко просматривать.

18. Основные заголовки четкие и наглядные

Большинство людей не читает информацию в Интернете, а просто бегло просматривает. Используйте крупные и мелкие заголовки, чтобы выделять части контента и организовывать его. Заголовки должны быть четкими и использовать соответствующие теги заголовка (<H1>, <H2> и другие) для целей поисковой оптимизации.

19. Самый важный контент расположен в пределах одного экрана

«Пределы экрана» – это воображаемая линия внизу экрана, которая ограничивает объем видимой информации на странице. Текст может продолжаться и ниже этой линии, но все, что наиболее важно для понимания того, кто Вы и чем занимаетесь (особенно на главной странице) должно помещаться в этих пределах. Наиболее часто встречающееся разрешение экрана на сегодняшний день – 1024x768 – и зависит от Вашей целевой аудитории.

20. Стилистическое и цветовое решение согласуются между собой

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

21. Текстовое выделение (жирный шрифт и пр.) применяется в небольшом количестве

Эффект восприятия: если Вы попробуете привлечь внимание ко всему сразу, Вы не привлечете внимание ни к чему. Мы все видели сайты с красными кружками «НОВИНКА!», мигающими напротив всех надписей сразу. Не делайте так!

22. Реклама и всплывающие окна ненавязчивы

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

23. Текст на главной странице изложен кратко и информативно

Это конечно не урок по копирайтингу, но посмотрите внимательно на свою главную страницу – сможете ли Вы передать ту же информацию, используя вдвое меньшее количество слов? Постарайтесь выражаться конкретно и информативно, избегая жаргонизмов – ведь никто не будет разбираться в Вашей фразе, вроде «усиление синергетических связей».

24. URL имеет смысл и удобен в использовании

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

25. Заголовки HTML-страницы содержат описание

Важно, чтобы заголовки страниц (прописанные в теге <TITLE>) содержали описание того, что Вы предлагаете на своем сайте, были уникальными и не забитыми под завязку ключевыми словами. Заголовки страниц – это первое, что прочитают о Вас люди, найдя Ваш сайт с помощью поисковика. Если же Ваши заголовки будут бессмысленны или похожи на спам, то они просто перейдут к следующему пункту выдачи.