Основы юзабилити сайтов: кратко и по делу
"Чем тяжелее этим пользоваться, тем меньше мы стараемся этим пользоваться"
Мы не будем долго распинаться, и объяснять, что юзабилити это важно, что от этого напрямую зависят Ваши продажи и эффективность расходовиня маркетингового бюджета... раз уж Вы читаете эту статью, то вероятно, Вы это и так понимаете.
Не заставляйте пользователя думать
По версии Стива Круга является главным законом юзабилити, мы с ним полностью согласны.
На сайте недолжно быть двусмысленности, все элементы должны быть очевидными. Пользователь должен сразу ухватить всю страницу. В идеале, она должна быть на столько простой, что Ваша соседка Тетя Маша, взглянув на сайт, сразу бы поняла что тут к чему.
Это касается всего: пунктов главного меню, кнопок, элементов навигации, специальных предложений, социальных кнопок (что это, "поделиться" или ссылка на их "VK"?).
Если Вы способны запомнить всего один закон юзабилити, то запоминайте именно этот закон.
По отдельности подобные вопросы не представляют серьезной опасности, но они имеют особенность накапливаться, постепенно влияя на уровень лояльности пользователя и в итоге... в итоге он просто закроет Ваш сайт и нажмет следующую ссылку в поисковой выдаче.
Вот список главных вопросов, о которых ,ни в коем случае, не должен задумываться пользователь:
Запомните, если Вы не заботитесь о юзабельности сайта, качестве дизайна, качестве фотографий своей продукции, то это подрывает доверие пользователя как к самому сайту, так и к бреду, которому он пренадлежит.
Негативное впечатление от сайта прямо проецируется на Ваш продукт.
Как мы (на самом деле) просматриваем сайты
Разрабатывая интерфейсы сайтов, мы (почему-то) думаем, что пользователь будет дотошно проходить по каждому разделу, от странице к странице, "прочитывая" контент, как если бы он читал интересный журнал.
Но это не так. На самом деле пользователь усваивает контент урывками, пробегая по страницам сайта глазами, обращая внимание на заголовки, перечисления, буллиты и иконки. Натыкаясь глазами на первую заинтересовавшую его ссылку, он со спокойной душой кликает по ней, не испытывая угрызений совести по поводу того, что он пропустил ,возможно, что-то интересное.
Мы пишем для него целое литературное произведение, а он воспринимает его, как билборд, проносясь мимо на скорости 100 км. в час.
Итак, важные факты:
- Мы не читаем страницы, мы их просматриваем
- Мы всегда спешим. Держите это в голове и делайте сайт именно для спешащего человека.
- Мы уверены, что нам не нужно читать все подряд. Мы уливливаем из контента только те слова-маячки, которые соответствуют нашей текущейзадаче.
- Предоставляя пользователю 4 строчки текста на странице, будьте уверены - он их прочитает. Предоставляя пользователю 4 абзаца, он все равно прочитает 4 строчки, но какие именно?
- Большинство пользователей кликнет на первой ссылке, показавшейся им подходящей и не будет искать идеально подходящей ссылки.
- Мы не задумываемся над тем, как это работает. Мы не читаем инструкций, мы смело бросаемся вперед. Будьте готовы, что пользователи начнут колоть орехи печатью (в первую очередь это касается интернет-сервисов).
- Если это однажды сработало, я буду использовать это постоянно. Так складывается эмпирический пользовательский опыт (не путать с UX дизайном). Поэтому, если пользователь привык видеть корзину в правом верхнем углу, размещайте ее именно там.
Хороший дизайн, как хорошая витрина магазина: при нем все кажется лучше, чем на самом деле (к слову, это относится и к маркетингу).
Дизайн VS Юзабилити
Когда-то давно, мы все учились читать газеты. Не сами буквы. Мы учились взаимодействовать с ней. Мы поняли, что крупный шрифт, это заголовки, что газета читается колонками, что мелкий шрифт под фото, это скорее всего комментарий к самой фотографии и т.д. Точно также каждый из нас учился взаимодействовать с веб-сайтами (именно тот эмпирический опыт взаимодействия, который упоминался выше).
При этом, научившись взаимодействовать с одной газетой, мы могли совершенно спокойно взаимодействовать с другой, используя наш накопившейся опыт. Даже если бы мы приехали в другой город, нас бы все равно выручил наш опыт взаимодействия.
Мы взяли этот пример не просто так, изначально, интернет-верстка делалась по образу и подобию газетной и полностью перенимала их опыт. Сейчас у интернет среды есть свой собственный опыт взаимодействия, который ушел далеко вперед. Все эти обычаи взаимодействия возникают из чьих-то уникальных идей и потом, если они работают, эти идеи тиражируются и перенимаются (спасибо конкурентам) по всему интернету. Пользователи привыкают к ним и воспринимают как само-собой разумеющееся.
Важно помнить, что этот устоявшийся опыт взаимодействия пользователя с сайтом очень полезен, Вам следует использовать его. Ведь идеи тиражируются только если они хорошо работают.
Но дизайнеры ,зачастую, неохотно используют устоявшиеся идеи. Зачастую, они стремятся изобрести велосипед, когда нужно сесть и ехать. И это очень хорошо, иначе мы бы застряли в каменном веке... но
Вы можете сколь угодно заботиться об эстетической составляющей дизайна, но ровно до тех пор, пока это не мешает главной цели создания сайта.
Сушите текст!
Ни кто не любит читать. В своем старании разжевать пользователю информацию и попытках охватить все аспекты продукта или услуги, мы пишем огромные трактаты не понимая, что рискуем отпугнуть пользователя. Он просто не захочет разбираться в написанном и убежит. Большинство Ваших текстов можно сократить вдвое, не потеряв ни капли смысла.
Никаких вступительных текстов на посадочных страницах, никаких приветствий!В машине нет лишних деталей. В тексте не должно быть не нужных предложений. Если Вы не можете сказать о своем продукте больше десяти слов, визуализируйте их, не стоит заполнять пространство шаблонными изречениями.
Напишите свой продающий текст для сайта и выкиньте из него половину слов. Потом перечитайте снова и выкиньте еще половину.
Сушка текста позволит Вам убить сразу двух зайцев:
- Снизить уровень визуального шума на страницах.
- Убрать лишний контент и оставить лишь действительно важную информацию (которую пользователь точно прочитает).
Что нужно знать о главной странице сайта?
Главная страница должна решать следующие задачи:
Функциональные:
- Показать мне то, что мне нужно (основной товар или услугу).
- Показывать мне то, что мне пока не нужно (дополнительные товары/услуги).
- Быть главной транспортной развязкой (совмещать в себе все возможные пути по сайту).
- Вызывать доверие к сайту, а значит и бренду. (Впрочем, как и любая другая страница, иконка, картинка или баннер).
Главная страница должна отвечать на следующие вопросы пользователя:
- Что это за сайт (тематика)?
- Что он содержит?
- Что я могу здесь сделать?
- Почему я должен выбрать именно этот сайт?
Слоган сайта
Если у Вас стартап или очень редкая и не очевидная тематика, то естественно, мы захотим донести основную идею сайта до пользователя как можно быстрей. Первым делом мы подумаем о нейминге - постараемся запихнуть суть идеи в название. Если решим что этого не достаточно, нам на помощь придет слоган, но его тоже может не хватить и визуально, он не притягивает внимание на страничке. Мы можем описать описать саму идею в контенте сайта, но не факт что пользователи станут читать наш текст.
Тут то нам и придет на помощь слоган сайта, который обычно располагается между логотипом и номером телефона ( по середине Вашего хедера) и содержит до восьми слов. Он обычно пишется крупным шрифтом и в силу своего расположения, психологически воспринимается как описание всего сайта (заголовок сайта, если хотите). Если и этого окажется недостаточно, используйте баннеры в слайдере и далее - инфографику в самом контенте главной страницы.
Самая распространенная ошибка - пренебрегать советами по юзабилити, думая, что в этом нет необходимости, все и так очевидно. Помните, что это "очевидно", скорее всего, только для Вас, ведь Вы сами проектировали свой сайт или являетесь специалистом в этой области. Посторонний человек может иметь другой образ мышления или багаж знаний.
10 важных советов:
Сегодня, конкуренция в интернете идет за каждый клик. Если пользователь понимает, что Вы тратите его время, он просто откроет следующую вкладку в поисковой выдаче.
01 Не ограничивайте пользователя. Делая плашку товара в каталоге, разрешите ему кликать в любое место плашки, а не только на кнопку "подробнее", или текст описания, или фото товара. Сделайте ее единым кликабельным полем.
02 Уменьшайте визуальный шум. Не следует слишком перегружать страницы, как информацией, так и графикой. Не следует единовременно давать пользователю множество альтернативных путей по сайту, ему будет сложно принять решение. На фонящих страницах Вы даже не сможете разместить конверсионную кнопку, она будет теряться на общем пестром фоне. Поэтому исходите из того, что все является визуальным шумом, пока не доказано обратное.
03 Хлебные крошки. Очень важный элемент навигации для больших сайтов и интернет магазинов. Проблема интернет-магазина в том (в отличае от магазина физического), что в нем нет реальных ориентиров и направлений, мы не можем встать и осмотреться, само понятие "здесь" очень размыто. Представьте себе пользователя, кликнувшего на ссылку в поисковой выдаче. Он словно телепортировался в космос и единственный ориентир для него будет навигация в виде наших "хлебных крошек", он сможет сразу понять в каком разделе каталога он находится и , в случае необходимости, сможет подняться на уровень выше и выбрать другой товар в разделе каталога (кнопка назад в этом случае вернет его обратно на поисковик, а нам это не нужно).
На кнопку "назад" делается 40% всех кликов в интернете.
04 Структура сайта. Всегда планируйте структуру сайта, навигацию и структуру меню на этапе прототипирования сайта. Вплоть до последнего уровня вложенности страниц. Навигация это и есть весь Ваш сайт.
05 Не больше трех кликов? Эксперты уже давно спорят о том, какое максимальное количество кликов может сделать пользователь на сайте, перед тем как потеряет к нему интерес. Чаще всего можно услышать цифру в промежутке от четырех до пяти. Но на самом деле, не так важно сколько кликов сделает пользователь, если эти клики очевидны, оправданы и не требуют моральных затрат. Каждый клик, требующий размышлений, стоит нескольких очевидных, не забывайте это.
06 Главное меню всегда неизменно. Это аксиома. Независимо от того, на какой странице находится пользователь, неизменный внешний вид главного меню дает ему понять, что он находится на том же сайте, что и был один клик назад. В большинстве случаев, мы бы посоветовали оставлять неизменным весь хедер, но тут возможны отступления (хедер главной страницы может отличаться от всех остальных.
07 Что нужно знать о вкладках? Как и все удачные решение в веб-дизане, вкладки получили широкое распространение. Все дело в том, что визуально, человек способен легко воспринимать то, что одна вещь находится спереди другой. Вкладки самоочевидны, сложно найти человека, который интуитивно не опознает перед собой вкладку. Вкладки создают ощущение физического пространства, продвижения между разделами. Но важно помнить, что вкладки должны быть четко прорисованы, создавая иллюзию, что одна из них находится впереди, только это даст эффект выскакивания выбранной вкладки вперед.
Важно: одна из вкладок должна быть всегда активна по умолчанию.
08 Цвет и навигация. Выделять логические разделы сайта разными цветами - хорошая идея. Мы можем выделять цветом разделы внутри страницы, окрашивать отдельные страницы или их логические группы. Но важно помнить, это может показаться удивительным, но есть очень большая группа людей (примерно 30%), которая просто не будет осознавать, что в цвета заложена какая-то логика. Мы сейчас говорим именно о навигационной, логической составляющей текста, здоровенную красную кнопку "купить" конечно заметят все (если она выделяется по отношению к остальному дизайну).
09 Выпадающие списки стоит делать только для общеизвестных понятий, таких как валюты, списки стран и городов в алфавитном порядке. Но если я ищу что-то, что мне не известно, мне уже сложно будет в нем разобраться.
10 Финальный шаг - тестирование. Человек, увидевший впервые Ваш сайт, должен без особых затруднений ответить на вопросы:
- Что за тематика сайта?
- На какой странице я сейчас нахожусь?
- Каковы главные разделы сайта
- Что я могу сделать на этом уровне
- Где я нахожусь в общей структуре сайта
- И, если все угадано верно, понять, как совершить целевое действие (покупка, заказ, регистрация - зависит от целей создания сайта).