Что такое юзабилити сайта

Про юзабилити сайта слышали многие. Хотя, как ни странно, порой даже опытные «продвиженцы» затрудняются четко сформулировать, что это такое…

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

Usability – это современный термин, которым обозначают качество и удобство пользовательского интерфейса.

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

Важным родственным термином является также UI (User Interface) – пользовательский интерфейс, который необходимо сделать простым и интуитивно понятным. Сегодня мы будем рассматривать Usability и UI в контексте веб-приложений (SaaS-решений, лендингов и прочих страниц).

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

Основные требования к современным интерфейсам

Чтобы пользователь смог воспользоваться сервисом или заказать продукт, оказавшись на определенном сайте, его интерфейс необходимо оптимизировать по 5 параметрам:

1. Обучаемость. Показатель того, насколько интуитивно понятным является интерфейс, насколько быстро пользователь понимает, как получить нужный результат.
2. Эффективность. Скорость решения пользователем своей задачи.
3. Запоминаемость. Легко ли пользователю будет разобраться с интерфейсом при повторном визите.
4. Минимизация ошибок. Интерфейс должен создаваться так, чтобы вероятность совершения пользователем ошибки стремилась к нулю.
5. Удовлетворенность (счастье пользователя). Посетитель должен быть доволен результатом работы с ресурсом.

Полезность (Utility)

Наряду с Usability важным показателем качества интерфейса является также полезность (Utility). Данный параметр определяет, насколько интерфейс помогает пользователю в решении поставленной задачи.

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

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

Таким образом, качественный, полезный и удобный дизайн должен соответствовать трём критериям:

1. Полезность. Предусмотрен доступ ко всем ключевым функциям, необходимым пользователю.
2. Юзабилити. Целевые действия выполняются просто, пользователь хорошо ориентируется в интерфейсе.
3. Баланс. Должны соблюдаться оба вышеперечисленных критерия.

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

Usability – ключевой фактор успеха в электронной коммерции. Удобство и простота совершения покупки или получения услуги – решающее конкурентное преимущество. Попав на ваш сайт, пользователь останется на нём и не уйдёт к конкурентам.

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

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

Что дает продуманность юзабилити?

Благодаря продуманному юзабилити сайта, можно будет получить высокую конверсию. То есть высокий процент соотношения посетителей и клиентов. Если навигация сайта была продумана, он подтолкнет потенциального клиента на заказ, регистрацию, скачивание прайса и т.д. При этом нельзя сразу же набрасываться на пользователя с предложением купить как можно скорее. Это даже отпугнет его. Однако и медлить – тоже нельзя. Потеряв нить, задумавшись о том, что, собственно говоря, делать дальше, посетитель, возможно, просто покинет сайт и пойдет искать другие компании, у которых с юзабилити все в порядке.

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

12 принципов юзабилити Web-ресурса

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

В качестве типичного примера можно привести выделение ссылок подчеркиванием и синим цветом. Другие же варианты оформления могут сбить с толку.

Первое. Дизайн – это залог доверия к ресурсу. Сайт ни в коем случае нельзя перегружать обилием второстепенных деталей. Любой элемент оформления сайта должен помогать, а не отвлекать. Дизайнер должен в первую очередь ответить на вопрос: можно ли обойтись без вот этого нововведения, которое он задумал? И, если ответ утвердительный, без него и нужно обходиться.

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

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

Второе. Контент. Здесь очень много тонкостей. Ибо контент – собственно и есть то, для чего посетитель зашел на сайт. Главный фактор юзабилити в этом отношении – максимально удобное восприятие текста и изображений. Текст должен быть структурирован, информативен, уникален и оптимизирован – для чтения и для поисковиков.

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

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

• Разбить его на несколько более мелких текстов – и каждый поместить на отдельной странице;
• Составить оглавление с якорями, по которым пользователь сайта мог бы переходить на нужный абзац.

Говоря про контент, стоит напомнить, что это – не одни лишь тексты. Это также видео, звуки, изображения, таблицы… Особенно нужно уделить внимание видео и картинкам. Все они должны быть в максимально хорошем качестве. Благо фотографировать и снимать ролики неплохо «обучены» сегодня и смартфоны. Вряд ли покупатель будет доверять магазину, который предлагает ему из рук вон плохо снятый и смонтированный ролик, смазанные фото и тем более – позаимствованные с других сайтов. В идеале даже самая, казалось бы, малозначительная фотография должна быть уникальной, а не взята с другого ресурса.

Изображения всегда должны соответствовать тексту. Например, если страница посвящена работе компании, то не будет лишним сфотографировать сотрудников в процессе работы. То же самое касается и видеороликов.

А вот с ведением таких популярных сегодня блогов нужно быть поосторожнее. Если все-таки было решение завести вспомогательный блог, либо канал на Ютубе, в Инстаграме и т.д., то нужно позаботиться и о его регулярном наполнении. Блог, состоящий из пары статей и обновляющийся раз в полугодие, будет скорее играть отрицательную роль, нежели положительную.

Отдельно стоило бы поговорить о текстах. Касательно них нужно помнить про три важных момента:

1. Как можно больше конкретики. К примеру, не голословно утверждать, что «у нас самые низкие цены в регионе», а конкретно указывать, что «стоимость телевизора … модели – 23 000 рублей».
2. Не нужно говорить, что клиент получит. Лучше сделать упор на то, что ему станет лучше после заключения сделки или покупки. Например: не сообщать, что «вы получите современный качественный телевизор», а: «теперь вы станете смотреть свои любимые телепередачи в еще лучшем качестве».
3. Призыв к совершению действия. Он должен присутствовать в виде повелительного наклонения: Позвоните, обратитесь, оставьте заявку и т.д.

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

Четвертое. С пользователем нужно общаться. Даже после того, как он совершил заказ. Ведь цель коммерческого сайта – не заставить купить, а побудить после этого купить еще раз и еще раз… Посетителю необходимо всегда оказывать помощь, указывать ему на то, что делать дальше, как выполнить то или иное действие. Человек никогда не должен чувствовать, что его оставили один на один со своими трудностями. Иначе он вполне справедливо почувствует, что единственно, для чего он здесь нужен, – это заставить его заплатить деньги.

Пятое. Нужно предусмотреть возможность отменить любое действие. Пользователь должен иметь возможность и передумать. К примеру, соцсети или мессенджеры дают возможность восстановить аккаунт после его удаления. А Интернет-магазин должен дать возможность отменить заказ даже если тот уже был оформлен и пошел в обработку. Или исправить свои контактные данные. Или внести изменения в уже сформированный заказ. Все это будет лишь положительно сказываться на юзабилити и повышать доверие к сайту.

Шестое. Предлагать помощь нужно ненавязчиво. Так сегодня в моду вошли внезапно выскакивающие на весь экран предложения о звонке, об общении с менеджером, о регистрации и т.д. Бывает даже так, что закрыть это предложение бывает невозможно, либо заветный крестик приходится искать слишком долго. Подобного рода подход не вызывает ничего, кроме раздражения. Как тот консультант в магазине бытовой техники, что подлетает уже на подходе к витрине и начинает торопливо предлагать новую модель Айфона.

Седьмое. Разговор с пользователем должен происходить на понятном ему языке. Делать упор на обилие специализированных терминов в случае с простым посетителем не просто глупо, но и бесполезно: тот просто не поймет ничего, пожмет плечами – и уйдет на другой сайт. Например, человек, находящийся в поисках мобильного телефона, вряд ли будет вникать в особенности ARM-архитектуры процессора. Ему важнее знать, запустится ли его любимая игрушка, не будут ли тормозить сайты.

Восьмое. Когда сайт уже работает достаточно долгое время, не стоит подвергать его резким и значительным изменения. Ребрендинг – это, конечно, хорошо. Но он должен происходить максимально плавно. Если вдруг завтра посетитель зайдет на хорошо знакомый сайт – и не обнаружит там привычных меню на своем месте, форм заказов и привычной структуры расположения контента, он как минимум потратит массу времени на то, чтобы привыкнуть к новому интерфейсу. И не факт, что все проведенные изменения – пусть и с благими намерениями – ему придутся по вкусу.

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

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

Девятое. Все самые важные возможности должны присутствовать на самом видном месте. Это не заставит посетителя, например, искать кнопку заказа или форму обратной связи.

Если же разделов очень много (особенно это бывает актуальным для порталов), то не будет лишним ввести карту сайта. По крайней мере, заблудившийся пользователь сможет всегда сориентироваться по ней – и перейти на уже знакомые разделы.

То же самое касается и так называемых «хлебных крошек» – то есть навигационной цепочки, которая обычно размещается в верхнем блоке контента. Она наглядно демонстрирует то, по какой схеме был совершен переход на страницу.

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

Одиннадцатое. Обязательно должно присутствовать поле для поиска по сайту. Причем, поле должно быть достаточно длинным и заметным. Обойтись одной лишь кнопкой с изображением лупы – не самый лучший вариант.

Двенадцатое. Касательно дизайна сайта, должно присутствовать всегда больше свободного места. Просто так психологически более комфортно воспринимать материал. Если же буквально каждый квадратный сантиметр страницы чем-то занять, то от этого посетитель, вполне возможно, будет испытывать один лишь дискомфорт. Тенденция современного юзабельного дизайна – минимализм. На странице должно присутствовать не больше, но и не меньше того, что действительно важно.

При этом наиболее важная информация не должна теряться среди обилия второстепенной.

Сплит-тестирование

Лучший способ определить, какой интерфейс удобнее и понятнее для пользователей – провести сплит-тестирование или A/B-тест. Данный подход включает 3 шага:

1. Выбирает репрезентативная группа.
2. Пользователям предлагаются разные варианты дизайна.
3. По результатам их взаимодействия с сайтом выявляется более удобный интерфейс.

В общем случае с сайтом это проводится так: используя технические средства – это может быть самописный код или специализированный сервис для сплит-тестирования, например Google Optimize – готовится 2 версии структуры / дизайна страницы и показывается одинаковому количеству пользователей. Обычно это все или какая-то часть посетителей сайта, половина из которых отправляется на 1 вариант страницы, другая половина – на 2. По результатам статистики, поведенческих факторов и количеству конверсий на каждом варианте определяется наиболее успешная версия интерфейса.

A/B тест является чисто техническим мероприятием, в которое не должны вмешиваться маркетологи. В зависимости от уровня конверсии, продолжительность эксперимента может быть разной. Но обычно достаточно, чтобы целевое действие совершили 5-10 пользователей.

Важно учитывать следующие моменты:

1. Сравнивать можно только результаты, полученные в один период времени и в равных условиях.
2. После каждого обновления дизайна обязательно требуется тестирование.
3. Тестировать интерфейс имеет смысл только при большой посещаемости (тысячи посетителей в день).
4. Исследование на небольших выборках может дать повышенную точность за счет кучности результатов (продолжительное тестирование не так эффективно).

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

Забота о мобильном пользователе

Как показывают многочисленные опросы и отзывы от реальных пользователей Сети, многие пользуются Интернетом со смартфонов и планшетов. Это действительно очень удобно посреди рабочего дня, в дороге, на учебе и т.д. Поэтому упускать столь большой кусок аудитории было бы крайне неразумно.

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

Необходимо будет продумать интерфейс и его юзабельность с точки зрения использования сенсорного экрана.

Еще один важный момент – впрочем, не только для мобильного пользователя – это скорость загрузки страницы. Даже сегодня, когда скорость Интернета измеряется в гигабитах, этот параметр остается актуальным. Редко кто станет ожидать более пяти секунд, если страница никак не желает загружаться. В большинстве случаев, раздраженный пользователь просто прекратит загрузку – и уйдет к конкурентам.

Следовательно, оптимизацию изображений и кода сайта никто еще не отменял.

Наличие технических проблем на сайте

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

Тестирование юзабилити

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

• С качественной. То есть должно проанализировать то, насколько ресурс выполняет возложенные на него функции, как грамотно реализована структура, подготовлен контент. Необходимо перепроверить наличие дублирующегося контента, битых ссылок, пересмотреть внешний вид и т.д.;
• С количественной. Под этим подразумевается скорость загрузки страниц, скорость поиска того или иного функционального элемента.

Работы по тестированию можно проводить своими силами, с привлечением добровольных тестировщиков, а также посредством специальных сервисов. Ведутся споры относительно того, нужны ли профессиональные тестировщики, либо простые пользователи. В принципе, не повредит показать новый сайт 5-6 своим знакомым и попросить их, например, найти и заказать на сайте определенный товар. А затем – подробно объяснить, что именно вызвало затруднения.

Разумеется, после того, как ошибки были выявлены, они должны быть немедленно исправлены. А затем – снова провести тестирование.

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