8.04 Хорошее юзабилити сайта.

Хорошее юзабилити сайта.

http://habrahabr.ru/company/webprojects/blog/101061/#habracut

Мы выделили 5 основных пунктов, по которым можно определить юзабилити сайта. Список спорный и в основном касается продающих сайтов. И да, эти пять пунктов — среднее арифметическое опыта, полученного при обработке заявок на конкурс «Юзабельный вебпроект». Думаете, мы раздали слонов и забыли?

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

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

Сразу оговоримся, что мы не оцениваем юзабилити в вакууме, нам важно, чтобы сайт работал, т.е. «продавал». Товары, услуги, идеи — не важно. Речь может идти о бесплатном веб-сервисе, для которого транзакцией станет регистрация посетителя.

Первый контакт

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

Я открываю сайт и вижу размытое пятно.

Нет, я не вижу интересных новостей, не вижу самые популярные товары, не вижу вашего телефона и не вижу всех разделов каталога.

Почему?

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

Главное меню

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

Горизонтальное или вертикальное?

Если в меню мало пунктов, его можно сделать горизонтальным, если больше 5 — делайте вертикальным.

Если меню представляет собой список (например, список услуг), делайте его вертикальным.

Если сомневаетесь, делайте меню вертикальным.

Разделы

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

Если в меню больше 9 пунктов, упрощайте его. Объединяйте пункты под заголовками или помещайте в подменю.

Подменю и подразделы

Хорошо, когда подменю раскрываются по клику, а не при наведении.

Подразделы должны быть видны всегда, когда я нахожусь в «материнском» разделе.

В подменю должно быть только то, что однозначно относится к этому разделу. Лучше сделать отдельный раздел, чем добавлять подпункт «до кучи».

Используйте «хлебные крошки».

Дублирование информации

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

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

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

Из правила есть исключения.

Хлебные крошки. Дублируют ссылки в меню по определению.

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

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

Ключевые слова. В рамках текстов могут повторяться. Но сами тексты не должны дублироваться по смыслу.

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

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

Привлечение внимания

А вдруг посетитель сайта не увидит информацию в одном месте — давайте просто разместим ее в нескольких одновременно?

Правда в том, что каждый элемент должен иметь свое, единственно возможное место. Когда он необходим, его очень просто найти.

Выделять элементы следует логически и графически.

Каждый элемент должен находиться там, где я, скорее всего, буду его искать. Сначала подумайте, какие вопросы задает клиент, когда приходит на сайт: «А они доставят товар в мой город?», «Где я могу найти стиральную машину с вертикальной подачей?» и т.д. А затем выстраивайте иерархию согласно этой логике, объединяя общее и выделяя частное.

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

Нестандартный дизайн

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

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

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

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

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

Транзакционные элементы

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

Зачастую контактная информация скромно указана в подвале или на отдельной странице «Контакты», ссылка на которую есть только в нижнем меню. Иначе говоря, в мертвой зоне. Какого черта? Все ведь затевалось исключительно для того, чтобы посетитель мог позвонить, поговорить с любезным (дай бог) консультантом и сделать, наконец, покупку.

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

То же относится к другим транзакционным элементам: кнопкам «Добавить объявление» или «Регистрация» и т.п.

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

Предположим, мы все сделали правильно, и теперь готовы заполнить главную страницу. Что на ней должно быть?

Чем меньше — тем лучше. Если посетитель увидит понятное меню и удобные навигационные элементы, он сам найдет то, что нужно. Может, ему хватит и телефонного номера.

Главная страница должна отвечать на вопрос «О чем этот сайт?» Если это неочевидно (а чаще всего это так), на главной должны быть пояснения. Максимально конкретные.

Я захожу на сайт и думаю:

«Да, я вижу, что это интернет-магазин, но что он продает?»

«Да, я понял, что это сайт про мишек Тедди, но что это: интернет-магазин, сайт производителя, клуб любителей?»

«Да, я понял, что это новостная лента, но какова тематика?»

«Стоматологическая клиника. Она хотя бы в моем городе?»

«Ага, это что-то про интернет. Блин, да я и так в интернете! Вроде бы, это не Хабр, что нового я тут найду?!»

Описание сайта в одно-два предложения можно и нужно поместить под логотипом. Например, такое: «Интернет-магазин эксклюзивного кошачьего корма. Доставка в Екатеринбурге и по всей России».

Итак, в шапке — логотип, пояснение, контакты. Где-то рядом — главное меню. А оставшееся место чем забить?

Не надо его «забивать». Минимализм рулит. Конечно, мы хотим обратить особое внимание пользователя на эксклюзив и новенькое. Или может быть, хотим поставить твиттеровский виджет. Это можно. Ключевые слова здесь — эксклюзивный и свежий контент.

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

Конечно, в таких вещах надо сдерживаться. А если все таки случилась простыня, следует отделить ее от ключевого контента.

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

Резюме

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

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

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