Создание сайтов

Программирование

Сопровождение

Web-юзабилити чеклист

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

Я не утверждаю, что список исчерпывающий и уникальный. В книге Якоба Нильсена “Homepage Usability”, например, представлен список из 113 пунктов. Это всего лишь мой инструмент контроля качества, экономящий мне силы и время. Несмотря на то, что этот список помогает мне зарабатывать на жизнь, и представляет определенную коммерческую ценность, я поделюсь им с Вами.

Моя терминология может отличатся от Вашей. Я использую слово “юзабилити” в очень широком смысле. Так же термин “доступность”, может вызвать недопонимание у интернет-разработчиков.

Список разбит на 4 примерно равные по объему части: доступность, идентичность, навигация и содержание.

Доступность

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

1. Адекватное время загрузки

Зовите меня старовером, но мне по-прежнему нравятся легковесные (около 100 KB) сайты. Конечно, производительность компьютеров и скорость доступа в интернет с каждым годом растет, но так же ускоряется и темп жизни и потребность в информации. Поверьте, если страницы грузятся долго, то большинство посетителей уйдет, так и не дождавшись. Уйдут на более простые сайты, возможно, не такие красивые, но не заставляющие ждать целую вечность.

2. Контрастный текст

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

3. Размер шрифта и интерлиньяж

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

4. Будьте осторожны с Flash

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

5. Используйте ALT для изображений

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

6. 404-страница

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

Идентичность

“Где я?” - первый вопрос, возникающий у посетителя, когда он впервые попадает на Ваш сайт. Очень важно ответить ему быстро. Еще лучше, предугадать последующие вопросы: Что здесь делать? Какая от этого польза? Почему Вам можно доверять? И т.д.

7. Логотип компании

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

8. Слоган

Итак, новый посетитель спрашивает Вас: “Что это за место?”. У Вас есть 1 секунда, что бы рассказать, кто Вы, и что здесь делаете, больше времени он Вам не даст. Будьте кратки и точны, избегайте громких и бессмысленных маркетинговых фраз. Не забывайте о SEO, поисковые системы, так же оценят Вашу краткость и талант.

9. Главная страница

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

10. Страница-визитка

Старый добрый раздел “О компании”. Возможно, это кому то покажется скучным и ненужным, но не посетителям, которым нужна исчерпывающая информация, что бы доверять Вам.

11. Контактная информация.

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

Навигация

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

12. Главное меню

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

13. Ссылки должны быть краткими и понятными.

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

14. Разумное количество элементов

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

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

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

16. Различимые ссылки

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

17. Доступный поиск по сайту

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

Содержание

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

18. Заголовки различимы и информативны

Большинство людей не читают в интернете, а только бегло просматривают текст. Стильные заголовки помогут Вам структурировать и разбить материал на блоки, и упростять тем самым восприятие. Если это необходимо, используйте несколько уровней вложенности. Использование заголовков полезно так же с точки зрения SEO, применяйте теги H1, H2 и т.д.

19. Важная информация должна располагаться на первом экране

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

20. Согласованные цвета и стили на всем сайте

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

21. Умеренная расстановка акцентов (bold и т.д.)

Известная мысль: Попытаетесь привлечь внимание ко всему, и не привлечете ни к чему. Помните форумы с красными мигающими надписями “New” рядом с каждой записью? Не вариант.

22. Ненавязчивая реклама

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

23. Краткость и понятность основных текстов

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

24. Осмысленные URL-адреса, ЧПУ

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

25. Осмысленные и логичные заголовки страниц

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