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

В 2001 году Джефри Зелдман (Jeffrey Zeldman) в своей книге «Реализуй свой талант в вебе» (Taking Your Talent to the Web) высказал идею о том, что пользователь, который пришел на сайт, будет очень расстроен, если не найдет нужную ему информацию в 3 клика. Это правило дизайна уже более 15 лет считается догмой, от которой не отступает ни один разработчик. (https://www.uie.com/articles/three_click_rule/)

В исследовании «Эффективные стратегии по созданию категорий» (https://www.uie.com/articles/strategies_categories/) говорится, что, действительно, имеются данные для магазинов e-commerce сферы, подтверждающие частично эти зависимости: чем больше страниц просмотрел пользователь, тем меньше вероятность того, что он что-то купит. Однако зачастую причина отказа от покупки не в том, что пользователь не нашел необходимой позиции товара за 3 клика, а в том, что его не устроило что-то другое (возможность добавления товара в корзину, его оплата, не понятные интуитивно поля для ввода информации, и прочее).

Эти же размышления подтверждают данные исследования Джошуа Портера, которые были опубликованы на сайте User Interface Engineering (Технология интерфейса пользователя). (https://www.uie.com/articles/three_click_rule/). В исследовании говорится, что пользователь не теряет желания получить результат, если число кликов увеличивается. Он может уйти со страницы поиска уже на втором клике, либо пролистать 30 страниц информации и что-то купить, либо совершить какое-либо иное конверсионное действие. Если речь идет о разработке мобильного сайта или приложения, это правило не работает вовсе: сокращение числа кликов за счет больших объемов информации существенно усложняет работу с сайтом и мешает находить нужный контент. Именно поэтому в мобильной разработке информацию делят на части и выдают последовательно, чтобы человек успел ее прочитать и проанализировать. (http://www.cmsmagazine.ru/library/items/graphical_design/design-rules-you-need-to-break/). Также особенным образом выделяют конверсионные элементы страницы (кнопки покупки, обратного звонка, заявки и т.д.), чтобы при беглом просмотре с мобильного устройства посетитель обратил на них внимание.

Таким образом, для адекватного восприятия информации пользователю не так важно «правило 3 кликов», как другие характеристики страницы, влияющие на юзабилити интернет-магазина.

Удобство «оформление заказа» на фоне контента страницы.

Кейс: привлечь внимание пользователя к кнопкам «оформления заказа», обеспечить возможность покупки товара в один клик.

Реализация: Люди читают только 28% текста на странице (http://www.nngroup.com/articles/how-little-do-users-read/). Именно поэтому ключевые моменты, к которым необходимо привлечь внимание, требуют контрастного выделения информации.

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

Комментарий Евгения Усенко, директора по электронной коммерции компании re:Store:

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

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

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

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

На четвертом этапе происходит выписка заказа. Она отображается в кратком виде и представляет собой информацию о составе заказа и дальнейших действиях пользователя. У покупателя также есть возможность оставить отзыв на Яндекс.Маркете и зарегистрироваться на сайте в «один клик».

Корректное отображение сайта на всех типах устройств (десктоп, мобильные устройства).

Кейс: разработать мобильную версию сайта/приложение, адаптивный дизайн основной версии сайта.

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

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

Результат/комментарий Сергея Цымбаревича, коммерческого директора консалтинговой компании «Джей лаб»:

По предварительным оценкам Google, только 36,5% сайтов удобны для мобильных пользователей. Если сайт не адаптирован под мобильные девайсы, большие объекты, такие как широкие изображения, создают негативный пользовательский опыт из-за необходимости постоянной прокрутки страницы влево-вправо. Слишком мелкий текст невозможно прочесть без увеличения, а масштабирование, в свою очередь, приводит к увеличению числа скроллов. Если клиент уже готов совершить покупку, но ему нужно тысячу раз прокрутить страницу, чтобы добраться до кнопки “Купить”, нет ничего удивительного в том, что он покинет сайт и найдет более функциональный инструмент для совершения покупки.

Несмотря на то, что адаптивный дизайн и мобильная версия сайта создают позитивный пользовательский опыт, в первое время может наблюдаться спад в метрике. Это не страшно, такой спад с легкостью окупится в дальнейшем с увеличением количества просмотров, совершенных покупок и, в итоге, с увеличением средней стоимости заказа. Даже если вначале процент конверсии уменьшится из-за увеличения количества посетителей, пользователи будут возвращаться чаще, что будет способствовать выстраиванию более долгосрочных отношений с клиентами. У нас есть наглядный пример того, как бизнес может увеличить прибыль, представив себя в мобильном пространстве. После запуска нового приложения суши-бар «Манга» удвоил объемы доставки готовых блюд, продажи повысились на 30%, а оборот – на 26%. Приложение оказалось настолько успешным, что владелец суши-бара сейчас работает над подобным приложением для дочерней сети пиццерий.

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

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

WapStart