Юзабилити и конверсия: заставляем сайт работать

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

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

Правило «Не заставляйте меня думать», введенное в широкий обиход Стивом Кругом, гуру дизайна интерфейсов, остается краеугольным камнем юзабилити. Подразумевается, конечно, не оболванивание аудитории: её лишь пытаются избавить от бесплодных размышлений и метаний там, где только возможно. Чтобы посетителю сразу было ясно, куда и зачем нажимать и что он получит. В конечном счете задача юзабилити – обеспечить ту степень предсказуемости сайта для посетителя, которая не губит, а, наоборот, подогревает его интерес к вашему предложению.

Важные принципы и приемы юзабилити

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

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

Нельзя сделать сайт для всех и каждого. Можно только для решения определенных задач какой-либо группы людей. Например, «карусель» – блок, в котором, сменяя друг друга, циклически прокручиваются кликабельные изображения, – будет к месту на новостном портале, но, возможно, окажется чужеродным в ньюс-блоке на сайте кадастрового ведомства. Вместе с тем многие требования к самим деталям интерфейсов поддаются формализации: в ту же «карусель» желательно не помещать больше пяти объектов, а если посетитель кликнул по модулю (например, по кнопке «Вправо» или«Влево»), то автоматическое «кружение» должно прекратиться – управление сразу же вверяется человеку.

Перечислим ряд принципов юзабилити, которые следует иметь в виду при разработке сайта. Итак, «сферический суперсайт в вакууме» выполнен с соблюдением следующих условий.

1 Интерфейс тяготеет к здоровому минимализму. Не постесняемся повторить: чем меньше действий человеку требуется предпринять для решения своей задачи и чем меньше у него отвлекающих факторов, тем лучше.

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

3 Главные элементы меню и значимые для навигации ссылки легкодоступны. Часто говорят, что вообще всю самую важную информацию надлежит размещать так, чтобы она была видна без прокрутки страницы. Спору нет, посетители предпочитают обходиться без скролла, однако если дать им понять, что ниже есть что-то небесполезное, они шевельнут колесико мышки. Так, по данным исследования компании cxPartners, если на первом экране контента чуть меньше ожидаемого, если там пустовато, то вероятность того, что пользователь прокрутит страницу вниз, ощутимо увеличивается.

4 Внутренняя перелинковка упрощает хождение по сайту. Это на сегодняшний день не только и не столько SEO-инструмент, сколько средство для увеличения связности сайта. Блок «Рекомендованные товары» тоже служит целям перелинковки.

5 Любая ссылка оформлена так, что сразу ясно, в какой раздел, на какую страницу она ведет. Человек не должен теряться в догадках, где он окажется, щелкнув по линку. Главные ссылки нуждаются в дополнительном визуальном выделении: иконками по соседству, особой палитрой и т. д.

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

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

Форма внутреннего поиска, коль скоро таковой внедрен на сайте, должна присутствовать на всех без исключения страницах. Ваш онлайн-сервис предполагает наличие пользовательских настроек? Обеспечьте доступ к ним в один, максимум в два клика.

7 Все интерфейсы подлежат обработке бритвой Оккама. Согласно постулату средневекового английского богослова Уильяма Оккама, не следует привлекать новые сущности без крайней на то необходимости. Если, например, на странице оформления заказа все формы подлежат заполнению, то незачем напротив каждой ставить красную звездочку и давать сноску: «Помечены обязательные к заполнению поля». Это всё равно что писать на двери работающего без выходных магазина: «Мы открыты в понедельник, вторник, среду,четверг, пятницу, субботу, воскресенье».Просто укажите над веб-формой: «Пожалуйста,заполните все поля».

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

Избегайте сложности и роскоши, вы не архитектор эпохи барокко. Если при заходе в интернет-магазин вы видите прогресс-бар – «Подождите, сайт загружается» – с призывом подождать пусть даже десять секунд, с какой степенью вероятности вы мигом закроете эту вкладку?

8 В пределах сайта нет режущей глаз анимации, пестроты баннеров, лишних ссылок (особенно ведущих вовне). Кстати, учтите: изображения на сайте не должны быть похожи на рекламные баннеры, иначе они будут вызывать отторжение у аудитории.

9 Визитер, впервые заглянувший к вам, меньше чем за пять секунд понимает назначение сайта и первичные принципы его устройства. По приводимой компанией UsabilityLab статистике, от 40 % до 90 % посетителей закрывают в браузере вкладку с сайтом в течение нескольких секунд, если не могут понять, о чем он. Люди не изучают веб-страницу методично и последовательно с первого мгновения, а сканируют ее взглядом, словно скользя по ней.

Выделяйте важнейшие фразы в тексте, ключевые характеристики товаров и услуг, призывы к действию (call to action) цветовым решением, расположением и т. д.

10 Принимается во внимание закон Фиттса. Согласно его переложению в плоскость веб-интерфейсов, время точного наведения на цель прямо пропорционально расстоянию до неё и обратно пропорционально её размеру. Иначе говоря, значимые элементы должны быть досягаемыми для посетителя, будучи достаточно крупными для того, чтобы тот не играл в снайпера. Ни в коем случае нельзя делать так, чтобы «попадание» курсором в чекбокс требовало чрезмерно точного прицела. Отсюда, однако, не следует, что любую кнопку подтверждения заказа надо сделать крупной, насколько только удастся.

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

11 Значимые элементы информативны, насколько только возможно. Например, тумблер в онлайн-сервисе «Яндекс. Диск». О чем говорит его внешний вид пользователю? Во-первых, единовременно он может находиться лишь в одном из двух положений. Во-вторых, надпись «Вкл.» дана на зелёном фоне, что ускоряет её восприятие: в быту таким цветом чаще маркируются разрешенные действия, открытый путь и т. д. «Выкл.», соответственно, на красном, запрещающем.

Пусть, например, раздел-вкладка сайта, на которой сейчас находится посетитель, будет выделена цветом, в отличие от прочих (правда, если все вкладки разных цветов, задумка провалится).

12 Ничто не обманывает ожиданий пользователей. Например, на сайте неплохой юзабилити-студии Uidg.ru по клику на красивые, привлекательные инфоблоки с надписями вида «Завершили юзабилити-аудит сервиса YouDo и предложили ряд улучшений. Теперь будет удобнее!» открываются не страницы с кратким описанием работ, а всего-навсего сайты клиентов компании. Между тем потенциальный клиент скорее ждет, что с титульной страницы его начнут убеждать кейсами, описанием приемов и методик.

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

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

15 Старайтесь использовать вместе не более семи однородных элементов (плюс-минус два в зависимости от ситуации); в меню – не более семи пунктов. Если объектов больше, разбивайте их на группы. Требование связано не с фэншуем или нумерологией, а сугубо с особенностями человеческого восприятия.

  Разработка сайтов для бизнеса Прайс

16 Не требуйте регистрации, как грабитель – кошелька. Особенно это касается интернет-магазинов. Исключения возможны, взять хотя бы проект Shopogoliq.ru. Как заметил руководитель компании Никита Халявин в интервью SeoPult.TV, введение обязательной регистрации на первой странице парадоксальным образом – хотя психологические объяснения у явления есть – повысило конверсию с 1,5 % до 4 %. Но если ваш сайт предполагает регистрацию (например, пользователи передают вам свои персональные данные или вам просто критически важно иметь как можно больше информации о своей аудитории), её форма должна быть легкодоступна. Чаще всего она размещается вверху справа.

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

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

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

19 Прибегайте к «социальным доказательствам». Иначе говоря, убедительно доносите до юзера информацию о том, что действие, к которому вы его призываете, до него совершили многие другие и не пожалели. Иногда уместно апеллировать к мнению авторитетов, иногда предпочтительно использовать отзывы ваших клиентов. Неплохо «одобрямс-блоки» реализованы на сайте OhMyStats.com – системы аналитики для интернет-маркетологов. Что немаловажно, они расположены рядом с кнопкой, по нажатии на которую посетитель переходит к оформлению тестового периода использования сервиса.

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

20 Капча на сайтах интернет-магазинов – скорее зло, чем добро. Хотел ваш клиент написать отзыв о товаре, а ему предлагают доказать, что он не робот. Учитывая, что капча капче рознь и иной раз можно три или четыре раза набрать кодовый набор символов ошибочно, вы рискуете навлечь на свою голову лишь проклятия.

  Разработка интернет-магазинов Подробнее...

21 Фотографии рядом с отзывами клиентов повышают доверие к самим откликам и к сайту. Разумеется, мы о подлинных снимках, а не о надерганных из фотостоков кадрах. Они дарят посетителю эмоции, а эмоции – это горючее, на котором тот преодолевает раздел за разделом, прорывается через каталоги товаров и платежные формы.