Юзабилити-ошибки

1. Непонятно, о чём сайт
2. Неудобная навигация по сайту
3. Неполный или неудачно размещенный контент
4. Неадаптивный дизайн
5. Низкая скорость загрузки страниц сайта

Веб-сайт — онлайн-представительство вашего бизнеса. Это виртуальный офис, витрина, место для работы с клиентами, поставщиками, партнерами и даже инвесторами. Сделайте его максимально комфортным для всех этих людей! Как?

Очень просто — посмотрите на веб-ресурс глазами обычного пользователя и оцените:

• насколько удобно передвигаться по разделам;
• как быстро загружаются страницы;
• легко ли найти нужный товар или услугу;
• видны ли контактные данные

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

По данным американской компании “3.7 Designs”, 48% онлайн-покупателей не могут совершить заказ и уходят из-за неудобства сайта.

Вы можете вкладывать деньги в SEO, контекстную рекламу и SMM, а продажи не взлетят, только потому, что клиенты не нашли то, что искали.

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

Непонятно, о чём сайт

Когда пользователь впервые попадает в интернет-магазин, он должен с первого взгляда понимать:

• где то, что он ищет;
• в чём уникальность торгового предложения;
• какие выгоды от покупки на этом сайте;
• как осуществить покупку. 

Выделяйте 3 основные точки, которые сразу дадут понять клиенту тематику и цель сайта. В интернет-магазине это могут быть:

• логотип и слоган;
• блок с товарами;
• конверсионные кнопки;
• корзина.

Неудачный пример торговой площадки выглядит так:

Множество блоков и полная неразбериха.

А вот, как просто выглядит другой ресурс:

Интригующий слоган на главном экране, понятное меню в шапке сайта.

Неудобная навигация по сайту

Если в интернет-магазине:

• нелогичное распределение товаров или услуг по категориям;
• отсутствие внутреннего поиска;
• нагромождение пунктов меню

это затрудняет передвижение покупателя по разделам и отдаляет его от желаемой покупки.

Пример неправильного оформления:

Помните про правило 3 кликов в юзабилити → добраться до товара в три шага:

1. Раздел.
2. Подраздел.
3. Товар.

Располагайте главное меню на всех страницах в одном месте — дайте возможность пользователю в любой момент переходить в интересующий его раздел. 

Пример правильного оформления:

Для удобства оставляйте на карточках товара “хлебные крошки” — навигационную цепочку.


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

Неполный или неудачно размещенный контент

Дайте клиентам максимальную информацию о товарах или услугах:

• структурируйте описание, характеристики и технические параметры в карточках товаров;
• загружайте качественные фотографии с функцией зумирования, покажите товар с разных сторон;
• используйте видеообзоры;
• помещайте контактную информацию (номера телефонов, адрес, электронный адрес) на видимое место (шапка сайта) — тогда покупателю не придётся искать, как вам позвонить, написать или найти магазин (офис) оффлайн;
• выделяйте корзину и кнопки “Купить”, “Добавить в корзину”, “Заказать” ярким контрастным цветом;
• не переусердствуйте с “украшениями” — нефункциональными всплывающими элементами, которые отвлекают внимание покупателя;
• размещайте условия доставки, оплаты, возврата и гарантии в отдельных заметных блоках на карточках товаров —эти элементы всегда интересуют онлайн-покупателей.

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

Пример блока товаров с маленькими картинками и нечитабельным описанием:

Блок товаров с большими изображениями:

Неадаптивный дизайн

Не хотите тратить время и деньги на создание адаптивной версии сайта? Зря! В 2016-ом 44% онлайн-покупок в России (по данным компании «Nielsen») сделаны с мобильных устройств. Поэтому, позаботьтесь о том, чтобы ваши клиенты комфортно совершали покупки со своих смартфонов и планшетов. Адаптивный дизайн поможет корректно отобразить содержимое сайта на любом гаджете.

Зайдите в свой интернет-магазин с мобильного и посмотрите насколько вытянутыми стали страницы, и как неудобно кликать на мелкие элементы.

Пример неадаптивного сайта:

Пример адаптивного дизайна интернет-магазина:

К слову, “mobile-friendly design” — один из трендов веб-дизайна в 2017-ом году.

Низкая скорость загрузки страниц сайта

Длительная загрузка для интернет-магазина — не позволительная “роскошь”.  Вот несколько фактов от ресурса “Designers.hubspot.com”:

• 1 из 4 человек покинет веб-сайт, если он загружается дольше, чем 4 секунды;
• 74% пользователей мобильных устройств готовы ждать не более 5 секунд, пока сайт загружается;
• секундная задержка во времени загрузки может стоит вам потери 7% конверсии;
• 1 секунда задержки снижает удовлетворенность клиентов сайтом (а значит и вашей компанией) на 16%.

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

“Умные” сервисы подскажут вам, что именно тормозит загрузку, как с десктопных, так и с мобильных устройств.

Пример низкой скорости:

Пример допустимой скорости:

Оптимальная скорость загрузки сайта — 2-3 секунды.

Это лишь краткий обзор ошибок юзабилити, которые вы можете обнаружить и попытаться исправить самостоятельно. Если же вам нужен комплексный юзабилити-аудит, смело обращайтесь к профессионалам, которые сделают ваш сайт максимально комфортным для посетителей.