Создание сайтов. Важные принципы и приемы юзабилити сайта .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Если только это дозволительно в вашем случае, дайте пользователям возможность авторизоваться у вас на сайте через их аккаунты в популярных соцсетях (см. главу 23 «Интеграция сайта с соцсетями: дисциплина и социализация»).

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

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

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

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

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

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