Бывает же такое: вложил круглую сумму в разработку сайта, а он не продает. Конверсия маленькая, посетители даже не скроллят страницу. Сталкиваясь с такой проблемой, некоторые решают направить все силы в продвижение, думая, что трафик все исправит. Скорее всего они потеряют деньги, не окупят вложения и разочаруются в работе подрядчика. Однако, велик шанс, что подрядчик тут ни при чем.
Я бы хотела пролить свет на такую вещь как юзабилити сайта, дать людям незнающим почву для размышлений. Если вы не знакомы с этим словом, то добро пожаловать! Погнали.
Юзабилити, если коротко, это удобство использования (вашим продуктом: сайтом/приложением и пр.). Уровень этого удобства зависит от двух критериев:
- Наличие элементов UX (юзер экспириенс)
- Управление вниманием
Разберем каждый отдельно, чтобы понять, что же такое юзабилити, из чего оно строится и с чем его едят.
Наличие элементов UX (или пользовательский опыт)
Зайдем с метафоры, чтобы дать определение. Вы заходите в темную комнату и хотите включить свет. Так вот UX про то, как расположить выключатель там, где вы будете ожидать его найти. Скорее всего, на вкладке «О компании» вы рассчитываете найти информацию о компании, а на мобильной версии вы привыкли видеть раскрывающееся меню, а не список вкладок.
Слева – пример стандартного меню-гамбургер, справа – плохо адаптированная мобильная версия меню
Однако бывает в наше время так, что пользовательского опыта в определенных сценариях не хватает – его еще нет. Например, личный кабинет. Все понимают, где расположено лого или меню, но где должен располагаться личный кабинет и как он должен выглядеть единого ответа нет.
Для этого существуют UX-исследования. Где расположить кнопку личного кабинета, оставить ли меню на странице личного кабинета – на эти и многие другие вопросы дают ответ UX исследования.
Итого, что мы имеем: разрабатывая сайт, необходимо за основу брать пользовательский опыт. Это сделает конечный продукт понятным, удобным и не будет вызывать дискомфорт.
Управление вниманием
Важно, что пользователь видит первым, что – вторым, а что – третьим. На странице расположено море информации, элементов и наша задача – определить путь пользователя до того момента, пока он не совершил нужное нам действие и направить его. Например, что пользователь должен увидеть, прежде чем в конце нажать на кнопку или как сделать так, чтобы он нажал на кнопку первым делом. Это и есть управление вниманием.
Мы можем управлять вниманием пользователя с помощью двух инструментов:
- Иерархия (или контраст). Контраст, то есть видимые различия сильно привлекают внимание пользователя и позволяют направить его взгляд по нужной траектории. Закрепим важные моменты, которые заставляют взглянуть на один заголовок раньше другого:
- размер шрифта больше
- плотность шрифта больше - капс
- толщина шрифта больше - жирный
- черный цвет раньше, чем серый
- чем выше и левее находится, тем больше он просматривается
Например, заголовок мы расположим внизу справа, а описание сверху слева. Сначала пользователь прочтет описание и только потом – заголовок. На пути пользователя можно расположить различные элементы: те, что выше будут замечены раньше.
2. Графика. Графика целиком и полностью про изображения: фото и прочие иллюстрации. На изображения пользователь обращает внимание в первую очередь, а какая последовательность есть среди изображений? Сначала обращают внимание на:
- Цветные фото // потом на чб
- Теплые цвета // потом на холодные
- Лица // потом объекты
- Внизу // вверху
Больше всего внимания привлекают насыщенные изображения с большим количеством деталей. Это называется графический вес, на который влияет цвет, размер и место изображения. Чем больше вес, тем больше внимания.
Используя определенные элементы мы определяем некий маршрут который пользователь должен пройти. Наша основная задача сделать этот путь очевидным. В первую очередь мы руководствуемся юзер экспириенсом, только потом думаем про управление вниманием и вот почему.
Представьте ситуацию – вы ищите вилку. На автомате вы открываете ящик на кухне, в котором она всегда лежит, но не в этот раз. Пока вы двигались исключительно на юзер экспириенсе. Не достигнув цели вы осматриваете кухню, замечаете пустую коробку от торта, который вы съели полчаса назад. Понимаете, что вы ели вилкой, смотрите в раковину, где все же находите ее. Этот пусть вы построили сами и прошли сами, заметили некоторые элементы и сделали вывод.
Например, макет сайта FRED. Каждая кнопка и ссылка интуитивно понятны, а иерархия в текстах наглядно показывает, как должна выстраиваться приоритезация: сначала заголовок, потом основная информация, после – доп.информация.
Макет сайта FRED
Подводя итоги, стоит отметить, что удобство решает. Юзабилити нужно анализировать и дорабатывать, чтобы пользователю было удобно пользоваться продуктом. Ему ничего не стоит закрыть вкладку и выбрать другое заведение, из которого он закажет еду, но вы теряете КЛИЕНТА. И запомните, маркетологи/дизайнеры/руководители, вы можете сделать бесконечно красивый сайт, но в первую очередь он должен быть удобным и понятным.
Что с этим делать?
Теперь вы спросите – «А что с этим делать?». Во-первых, вы можете самостоятельно начать анализировать сайты конкурентов и подмечать важные и удобные для вас детали, а после реализовывать их на своем сайте.
Второй вариант – вы можете скачать нашу книгу «Ваш сайт не продает? 41 причина почему». В ней собраны основные ошибки, которые мешают продажам, в том числе ошибки и по юзабилити.
Третий вариант (самый простой) – можете заказать аудит юзабилити у специалистов. В этом мы тоже сможем вам помочь. Например, можно написать в ТГ @fredizh или на корпоративную почту [email protected].