ТОП-10 ошибок в юзабилити сайтов крупных компаний

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

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

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

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

Ошибка №1. Использование на сайте слишком мелкого шрифта.

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

Например, посмотрите на названия разделов на сайте интернет-магазина 220 Вольт:
2016-04-25_17-24-57

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

Ошибка №2. Плохо работающий внутренний поиск по сайту.

Этот пункт очень важен, и особенно, для интернет-магазинов или сайтов с развитой структурой и большим количеством контента. Очень часто, когда пользователь впервые попадает на сайт интернет-магазина с широким ассортиментом и не знаком с его структурой, он, чтобы упростить себе задачу, пытается воспользоваться внутренним поиском. К сожалению, это слабое место многих сайтов (в том числе сайтов крупных компаний). Внутренний поиск по сайту либо вообще не выдает запрашиваемые товары, несмотря на то, что они есть в ассортименте магазина или выдает совершенно не то, что ожидает пользователь. Например, по запросу «чешки» на сайте интегратора спортивных товаров и услуг «Активизм» выдается вот такой результат:

2016-04-25_17-25-14

А на сайте онлайн-площадки объявлений «Из рук в руки», поиск не выдает никаких вариантов, хотя товары заданной категории на сайте присутствуют.

2016-04-25_17-25-27

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

Ошибка №3. Слишком сложная для визуального восприятия структура меню.

2016-04-25_17-26-05

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

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

Ошибка №4. Неактивная иконка «Корзины» на сайте интернет-магазина.

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

2016-04-25_17-26-42

Ошибка №5. Плохо продуманная структура карточки товара.

Рассмотрим карточку товара на сайте интернет-магазина «Ашан»:

2016-04-25_17-27-21

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

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

Ошибка №6. Неправильное использование ссылок в текстах и элементах.

Пример из карточки товара интернет-магазина «Пан Чемодан».

2016-04-25_17-27-51

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

Ошибка №7. Отсутствие кнопки «Закрыть» у всплывающих окон на сайте.

Еще один пример с сайта интернет-магазина «Пан Чемодан»:

2016-04-25_17-27-38

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

Ошибка №8. Долгая загрузка страниц сайта.

2016-04-25_17-28-06

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

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

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

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

Ошибка №9. Непродуманная подача информации.

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

В приведенном ниже примере, взятом с сайта туроператора Coral Travel, непонятно в чем в принципе заключается суть акции. Этого не понял ни один пользователь, участвующий в тестировании. Здесь даны определенные параметры акции, но не показаны преимущества, которые она дает. Непонятно, какую выгоду несет бронирование данного отеля для покупателя. Это приводит к тому, что акция становится непродуктивной.

2016-04-25_17-28-36

Ошибка №10. Неудачное оформление пагинации.

Возьмем пример с сайта интернет-магазина «Ашан»:

2016-04-25_17-28-56

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

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

Удобно и привычно воспринимать постраничную пагинацию вот в таком виде:

2016-04-25_17-29-04

Здесь мы сразу видим, что страница с контентом в данном разделе не единственная, а их много. В примере же с детским питанием, наличие дополнительных страниц не очевидно.

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

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