Мы выделили 5 основных пунктов, по которым можно определить юзабилити сайта. Список спорный и в основном касается продающих сайтов. И да, эти пять пунктов — среднее арифметическое опыта, полученного при обработке заявок на конкурс «Юзабельный вебпроект». Думаете, мы раздали слонов и забыли?
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/2df/6a7/228/2df6a7228c8cd885037ed285f99b81dd.png)
оригинал картинки
Когда мы предложили дать бесплатные комментарии по юзабилити всем желающим, нам пришло 166 заявок. На каждый сайт мы тратили до получаса.
Ошибки, само собой, повторялись. Голова пухла, а мы продолжали писать одинаковые комменты. Результатом марафона стал ниже приведенный чеклист.
Сразу оговоримся, что мы не оцениваем юзабилити в вакууме, нам важно, чтобы сайт работал, т.е. «продавал». Товары, услуги, идеи — не важно. Речь может идти о бесплатном веб-сервисе, для которого транзакцией станет регистрация посетителя.
Итак, мы пишем ТЗ для сайта, придумываем полезные разделы, включаем в список и статьи, и новости, и каталог продукции — судя по всему, это будет идеальный сайт! И на главной странице будет видно все это великолепие. Пользователь должен оценить каждую частицу информации, которой мы заботливо наполнили наше детище.
Я открываю сайт и вижу размытое пятно.
Нет, я не вижу интересных новостей, не вижу самые популярные товары, не вижу вашего телефона и не вижу всех разделов каталога.
Почему?
Наверное, потому что я вижу этот сайт впервые. Вы потратились на контекстную рекламу, поисковое продвижение, и вот, наконец, ваш клиент зашел на сайт. Десять раз продублированная информация, разделы, спрятанные друг в друге, изобилие пунктов меню, длинные тексты, нестандартный дизайн, претендующий на оригинальность — все это, по правде говоря, сбивает с толку, отнимает время, раздражает и отпугивает.
Меню в идеале должно быть одно и начинаться в левом верхнем углу. Я захожу в дом через подъезд и не ожидаю, что меня попросят воспользоваться окном.
Горизонтальное или вертикальное?
Разделы
Подменю и подразделы
Информация не должна дублироваться. В двух разных меню не должно быть одинаковых пунктов.
Во-первых, когда я вижу большое количество элементов на странице, я уже мысленно напрягаюсь. «Так, здесь много разделов, много информации. Как мне найти нужную?»
Во-вторых, я впустую трачу время, чтобы осознать, что текст дублированный. Думаете, «это всего пара секунд»? В интернете счет на них и идет. Лишняя секунда — напрягает.
Из правила есть исключения.
А вдруг посетитель сайта не увидит информацию в одном месте — давайте просто разместим ее в нескольких одновременно?
Правда в том, что каждый элемент должен иметь свое, единственно возможное место. Когда он необходим, его очень просто найти.
Выделять элементы следует логически и графически.
Прочитав следующий абзац, дизайнеры, которые когда-либо рисовали анимированные шапки в пол-экрана и сайты-шедевры флэш-анимации, поставят посту минус.
Нестандартный дизайн зачастую не имеет ничего общего с юзабилити. Красиво, но нефункционально.
В лучшем случае из-за желания выделиться располагают главное меню справа. Арабам, наверное, удобно. Но большая часть планеты читает слева направо и поэтому начинает осмотр сайта с левого верхнего угла.
Именно там все привыкли видеть логотип, щелкнув по которому всегда можно попасть на главную страницу. Под ним все привыкли видеть основное меню, при помощи которого можно попасть в основные разделы сайта.
Устанавливать новые стандарты и бросать вызов консервативным устоям — благородная затея. Но пожалуйста, не просите меня наливать чай в чашку через отверстие сбоку.
Очень часто основная транзакция между посетителем и владельцем сайта — телефонный звонок или выход на связь любым другим способом.
Зачастую контактная информация скромно указана в подвале или на отдельной странице «Контакты», ссылка на которую есть только в нижнем меню. Иначе говоря, в мертвой зоне. Какого черта? Все ведь затевалось исключительно для того, чтобы посетитель мог позвонить, поговорить с любезным (дай бог) консультантом и сделать, наконец, покупку.
Так почему бы не разместить контакты на каждой странице и на видном месте, например, в шапке или хотя бы на первом экране?
То же относится к другим транзакционным элементам: кнопкам «Добавить объявление» или «Регистрация» и т.п.
Предположим, мы все сделали правильно, и теперь готовы заполнить главную страницу. Что на ней должно быть?
Чем меньше — тем лучше. Если посетитель увидит понятное меню и удобные навигационные элементы, он сам найдет то, что нужно. Может, ему хватит и телефонного номера.
Главная страница должна отвечать на вопрос «О чем этот сайт?» Если это неочевидно (а чаще всего это так), на главной должны быть пояснения. Максимально конкретные.
Я захожу на сайт и думаю:
Описание сайта в одно-два предложения можно и нужно поместить под логотипом. Например, такое: «Интернет-магазин эксклюзивного кошачьего корма. Доставка в Екатеринбурге и по всей России».
Итак, в шапке — логотип, пояснение, контакты. Где-то рядом — главное меню. А оставшееся место чем забить?
Не надо его «забивать». Минимализм рулит. Конечно, мы хотим обратить особое внимание пользователя на эксклюзив и новенькое. Или может быть, хотим поставить твиттеровский виджет. Это можно. Ключевые слова здесь — эксклюзивный и свежий контент.
Вы, конечно, можете поставить нам в упрек, что уж вы-то, SEO-шники, никогда не упустите возможность насытить текст поисковыми запросами чуть более чем полностью, превратив его в простыню. И будете правы.
Конечно, в таких вещах надо сдерживаться. А если все таки случилась простыня, следует отделить ее от ключевого контента.
Первый контакт с сайтом — чрезвычайно важен. Даже если вы озаботились созданием специальных входных страниц, главная — это лицо. И по ней пользователь будет судить, интересны вы ему или нет.
Чтобы заинтересовать посетителя, вы должны попробовать «продать продукт» вживую. Все вопросы, сомнения и возражения, которые продемонстрирует «потенциальный покупатель», необходимо проработать на сайте.
Держа эту идею в голове, пройдитесь по чеклисту:
у меня одно-два меню, они понятные и логичные,
информация дублируется, только когда это необходимо,
дизайн привычный и понятный с первого взгляда,
контакты и другие транзакционные элементы на видном месте,
о чем сайт, понятно по главной; его нельзя перепутать с сайтом смежной тематики.
Вы можете с нами не согласиться, но мы считаем, что если у вас пять галочек — у вашего сайта хорошее юзабилити.
![](https://habrastorage.org/getpro/habr/post_images/2df/6a7/228/2df6a7228c8cd885037ed285f99b81dd.png)
оригинал картинки
Когда мы предложили дать бесплатные комментарии по юзабилити всем желающим, нам пришло 166 заявок. На каждый сайт мы тратили до получаса.
Ошибки, само собой, повторялись. Голова пухла, а мы продолжали писать одинаковые комменты. Результатом марафона стал ниже приведенный чеклист.
Сразу оговоримся, что мы не оцениваем юзабилити в вакууме, нам важно, чтобы сайт работал, т.е. «продавал». Товары, услуги, идеи — не важно. Речь может идти о бесплатном веб-сервисе, для которого транзакцией станет регистрация посетителя.
Первый контакт
Итак, мы пишем ТЗ для сайта, придумываем полезные разделы, включаем в список и статьи, и новости, и каталог продукции — судя по всему, это будет идеальный сайт! И на главной странице будет видно все это великолепие. Пользователь должен оценить каждую частицу информации, которой мы заботливо наполнили наше детище.
Я открываю сайт и вижу размытое пятно.
Нет, я не вижу интересных новостей, не вижу самые популярные товары, не вижу вашего телефона и не вижу всех разделов каталога.
Почему?
Наверное, потому что я вижу этот сайт впервые. Вы потратились на контекстную рекламу, поисковое продвижение, и вот, наконец, ваш клиент зашел на сайт. Десять раз продублированная информация, разделы, спрятанные друг в друге, изобилие пунктов меню, длинные тексты, нестандартный дизайн, претендующий на оригинальность — все это, по правде говоря, сбивает с толку, отнимает время, раздражает и отпугивает.
Главное меню
Меню в идеале должно быть одно и начинаться в левом верхнем углу. Я захожу в дом через подъезд и не ожидаю, что меня попросят воспользоваться окном.
Горизонтальное или вертикальное?
- Если в меню мало пунктов, его можно сделать горизонтальным, если больше 5 — делайте вертикальным.
- Если меню представляет собой список (например, список услуг), делайте его вертикальным.
- Если сомневаетесь, делайте меню вертикальным.
Разделы
- Названия должны быть однозначными. Пользователь должен понять, что находится в разделе до того, как туда пойдет, а не после.
- Если в меню больше 9 пунктов, упрощайте его. Объединяйте пункты под заголовками или помещайте в подменю.
Подменю и подразделы
- Хорошо, когда подменю раскрываются по клику, а не при наведении.
- Подразделы должны быть видны всегда, когда я нахожусь в «материнском» разделе.
- В подменю должно быть только то, что однозначно относится к этому разделу. Лучше сделать отдельный раздел, чем добавлять подпункт «до кучи».
- Используйте «хлебные крошки».
Дублирование информации
Информация не должна дублироваться. В двух разных меню не должно быть одинаковых пунктов.
Во-первых, когда я вижу большое количество элементов на странице, я уже мысленно напрягаюсь. «Так, здесь много разделов, много информации. Как мне найти нужную?»
Во-вторых, я впустую трачу время, чтобы осознать, что текст дублированный. Думаете, «это всего пара секунд»? В интернете счет на них и идет. Лишняя секунда — напрягает.
Из правила есть исключения.
- Хлебные крошки. Дублируют ссылки в меню по определению.
- Контактная информация. Если требуемая транзакция предполагает телефонный звонок, значит телефон должен быть на каждой странице.
- Атрибуты контента. Например, параметры товара должны быть указаны и в каталоге (кратко), и на странице товара (полностью).
- Ключевые слова. В рамках текстов могут повторяться. Но сами тексты не должны дублироваться по смыслу.
- В гипермаркетах без определенной направленности «сумки для ноутбуков» могут попасть одновременно в раздел «Ноутбуки» и «Сумки».
- Актуальное дублирование. Иногда одна и та же информация одинаково актуальна в нескольких местах: телефонный номер на страницах, посвященных разным услугам одной организации, инструкция по установке программы на странице для скачивания и на странице справки, и т.д. Как правило, она не занимает много места.
Привлечение внимания
А вдруг посетитель сайта не увидит информацию в одном месте — давайте просто разместим ее в нескольких одновременно?
Правда в том, что каждый элемент должен иметь свое, единственно возможное место. Когда он необходим, его очень просто найти.
Выделять элементы следует логически и графически.
- Каждый элемент должен находиться там, где я, скорее всего, буду его искать. Сначала подумайте, какие вопросы задает клиент, когда приходит на сайт: «А они доставят товар в мой город?», «Где я могу найти стиральную машину с вертикальной подачей?» и т.д. А затем выстраивайте иерархию согласно этой логике, объединяя общее и выделяя частное.
- Элемент должен быть заметен сам по себе. Только не надо больших красных букв, всплывающих подсказок и громоздких блоков. Просто отделите элементы друг от друга, а активные элементы сделайте похожими на активные (кнопки, вкладки, пункты меню, ссылки).
Нестандартный дизайн
Прочитав следующий абзац, дизайнеры, которые когда-либо рисовали анимированные шапки в пол-экрана и сайты-шедевры флэш-анимации, поставят посту минус.
Нестандартный дизайн зачастую не имеет ничего общего с юзабилити. Красиво, но нефункционально.
В лучшем случае из-за желания выделиться располагают главное меню справа. Арабам, наверное, удобно. Но большая часть планеты читает слева направо и поэтому начинает осмотр сайта с левого верхнего угла.
Именно там все привыкли видеть логотип, щелкнув по которому всегда можно попасть на главную страницу. Под ним все привыкли видеть основное меню, при помощи которого можно попасть в основные разделы сайта.
Устанавливать новые стандарты и бросать вызов консервативным устоям — благородная затея. Но пожалуйста, не просите меня наливать чай в чашку через отверстие сбоку.
Транзакционные элементы
Очень часто основная транзакция между посетителем и владельцем сайта — телефонный звонок или выход на связь любым другим способом.
Зачастую контактная информация скромно указана в подвале или на отдельной странице «Контакты», ссылка на которую есть только в нижнем меню. Иначе говоря, в мертвой зоне. Какого черта? Все ведь затевалось исключительно для того, чтобы посетитель мог позвонить, поговорить с любезным (дай бог) консультантом и сделать, наконец, покупку.
Так почему бы не разместить контакты на каждой странице и на видном месте, например, в шапке или хотя бы на первом экране?
То же относится к другим транзакционным элементам: кнопкам «Добавить объявление» или «Регистрация» и т.п.
Главная страница
Предположим, мы все сделали правильно, и теперь готовы заполнить главную страницу. Что на ней должно быть?
Чем меньше — тем лучше. Если посетитель увидит понятное меню и удобные навигационные элементы, он сам найдет то, что нужно. Может, ему хватит и телефонного номера.
Главная страница должна отвечать на вопрос «О чем этот сайт?» Если это неочевидно (а чаще всего это так), на главной должны быть пояснения. Максимально конкретные.
Я захожу на сайт и думаю:
- «Да, я вижу, что это интернет-магазин, но что он продает?»
- «Да, я понял, что это сайт про мишек Тедди, но что это: интернет-магазин, сайт производителя, клуб любителей?»
- «Да, я понял, что это новостная лента, но какова тематика?»
- «Стоматологическая клиника. Она хотя бы в моем городе?»
- «Ага, это что-то про интернет. Блин, да я и так в интернете! Вроде бы, это не Хабр, что нового я тут найду?!»
Описание сайта в одно-два предложения можно и нужно поместить под логотипом. Например, такое: «Интернет-магазин эксклюзивного кошачьего корма. Доставка в Екатеринбурге и по всей России».
Итак, в шапке — логотип, пояснение, контакты. Где-то рядом — главное меню. А оставшееся место чем забить?
Не надо его «забивать». Минимализм рулит. Конечно, мы хотим обратить особое внимание пользователя на эксклюзив и новенькое. Или может быть, хотим поставить твиттеровский виджет. Это можно. Ключевые слова здесь — эксклюзивный и свежий контент.
Вы, конечно, можете поставить нам в упрек, что уж вы-то, SEO-шники, никогда не упустите возможность насытить текст поисковыми запросами чуть более чем полностью, превратив его в простыню. И будете правы.
Конечно, в таких вещах надо сдерживаться. А если все таки случилась простыня, следует отделить ее от ключевого контента.
Первый контакт с сайтом — чрезвычайно важен. Даже если вы озаботились созданием специальных входных страниц, главная — это лицо. И по ней пользователь будет судить, интересны вы ему или нет.
Резюме
Чтобы заинтересовать посетителя, вы должны попробовать «продать продукт» вживую. Все вопросы, сомнения и возражения, которые продемонстрирует «потенциальный покупатель», необходимо проработать на сайте.
Держа эту идею в голове, пройдитесь по чеклисту:
![](https://habrastorage.org/getpro/habr/post_images/3e6/f56/7f4/3e6f567f4d65c700f0236067e1b85a0b.gif)
![](https://habrastorage.org/getpro/habr/post_images/3e6/f56/7f4/3e6f567f4d65c700f0236067e1b85a0b.gif)
![](https://habrastorage.org/getpro/habr/post_images/3e6/f56/7f4/3e6f567f4d65c700f0236067e1b85a0b.gif)
![](https://habrastorage.org/getpro/habr/post_images/3e6/f56/7f4/3e6f567f4d65c700f0236067e1b85a0b.gif)
![](https://habrastorage.org/getpro/habr/post_images/3e6/f56/7f4/3e6f567f4d65c700f0236067e1b85a0b.gif)
Вы можете с нами не согласиться, но мы считаем, что если у вас пять галочек — у вашего сайта хорошее юзабилити.