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

 
Утверждаю:
Председатель Совета Директоров ГК  "АэМэС"
_____________________________ Рудых Д.Б.
"________" _______________________201__г.

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

 

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

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

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

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

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


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


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

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

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

Почему? 

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



Главное меню 

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

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

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

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

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



Разделы 

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

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



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

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

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

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

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


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


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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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



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

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

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

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

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



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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

Резюме 

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


  • Держа эту идею в голове, пройдитесь по чеклисту: 

  • у меня одно-два меню, они понятные и логичные, 

  • информация дублируется, только когда это необходимо, 

  • дизайн привычный и понятный с первого взгляда, 

  • контакты и другие транзакционные элементы на видном месте, 

  • о чем сайт, понятно по главной; его нельзя перепутать с сайтом смежной тематики. 




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

Comments