Частые ошибки в юзабилити сайта

В своей практике веб-дизайнер часто сталкивается с понятием юзабилити. Об этом показателе говорят как об одном из ключевых. Но что же он подразумевает?

Юзабилити (от англ. usability — удобство использования) — это показатель того, насколько пользователю удобно и легко пользоваться сайтом.

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

Ранжирование

Поисковые системы (например Google, Яндекс, Mail.ru, Rambler) непрерывно анализируют поведение пользователей на сайтах, их поведенческие паттерны (длительность нахождения на странице, самые популярные и непопулярные страницы, процент отказов и уходов с сайта). Те сайты, которые пользователи считают наиболее удобными (т.е. проводят там больше всего времени) попадают в топ поисковой выдачи, что, в свою очередь, помогает продвижению сайта и продуктов бренда. Именно поэтому так важно позаботиться о юзабилити интерфейса сайта.

Конверсия и продажи

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

Репутация бренда

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

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

В этом материале мы разберем основные правила и принципы юзабилити интерфейса сайта, рассмотрим основные ошибки, которые совершают при проектировании интерфейса, и найдем способы их исправить.

Для того, чтобы улучшить юзабилити сайта необходимо проанализировать:

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

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

Итоги взаимодействия с сайтом. Все ли первые точки касания приводят пользователя к совершению целевого действия? Эффективно ли выстроена перелинковка страниц? Удовлетворен ли пользователь после совершения покупки? Если нет, то почему?

Повторный контакт с сайтом. Захочет ли пользователь вернуться на сайт вновь? При каких условиях происходит повторный контакт с сайтом?

Ситуации, при которых пользователь может уйти с сайта. Какие ошибки возникают на сайте? Как избежать их?

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

Основные принципы и правила

Информируйте о текущей ситуации

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

Говорите на понятном языке

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

В дополнение к первому пункту о важности информирования пользователей хочется добавить, что необходимо найти золотую середину между полезными и бесполезными статусами. Вполне достаточно использовать три статуса: «Обработка заказа», «Сборка» и «Доставка на место выдачи/в постамат». А, например, статусы «В сортировке», «Отгрузка в пункт выдачи» могут быть непонятны для пользователей и вызывать лишние вопросы.

Не отказывайтесь от традиций

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

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

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

Делитесь важной информацией

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

Отдавайте предпочтение простоте и лаконичности

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

Есть 3 типа самых популярных ошибок новичков:

Функциональные ошибки юзабилити

Функциональные ошибки — ошибки в проектировании, которые существенно затрудняют работу пользователя на сайте.

Сложное меню

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

Неработающие кнопки

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

Отсутствие адаптивности

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

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

Обязательная регистрация

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

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

‍

Бесконечные всплывающие окна

Если вы приняли решение использовать на своем сайте всплывающие баннеры с рекламой и различного рода поп-апы, позаботьтесь о том, чтобы они были:

Автоисправления

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

Маленькие, но важные кнопки

Согласно закону Фиттса, размер кнопки на странице должен быть пропорционален частоте ее использования. Кроме того, чем больше размер кнопки, тем легче пользователю нажать на нее. Поэтому при проектировании страницы нужно позаботиться о том, чтобы кнопки СТА были достаточно большого размера. При разработке мобильных версий сайтов нельзя использовать кнопки размером меньше 30px.

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

Тупиковый сценарий

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

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

Малое количество точек входа

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

Отказ от использования сетки

Использование сетки — это must-have в современном дизайне интерфейсов. Сетки позволяют сделать дизайн собранным, аккуратным, эстетически приятным и гармоничным с точки зрения композиции. Есть на сайте сетка или нет, сможет точно определить только дизайнер. Однако пользователь почувствует, что сайт выглядит неряшливо. Отказ от сетки осложняет создание адаптивов для мобильной версии сайта.

Отсутствие кнопки призыва к действию

Такие страницы, как «Главная», «Каталог», «Коммерческие разделы», «Акции» и другие, должны содержать в себе какой-либо призыв к действию. Этот призыв материализуется в виде кнопки СТА (от англ. call to action — призыв к действию). Данная кнопка может быть представлена в виде кнопки «Купить», «Заказать», «Оформить доставку», «Узнать о скидке больше», «Вперед на распродажу» и т.д.

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

Визуальные ошибки

Ошибки в визуальном оформлении — это такие ошибки, которые делают сайт менее эстетичным и визуально привлекательным для пользователя.

Графические изображения низкого качества

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

Много визуального шума

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

Излишняя декоративность

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

Слишком большое количество анимации

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

Содержательные ошибки

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

Отсутствие иерархии

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

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

Полотна текста

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

Слишком мало информации

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

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

Одна из основных ошибок при оформлении карточки товара или услуги на сайте — чрезмерная краткость. Чем больше информации вы предоставите о продукте/услуге, тем больше у покупателя будет причин, чтобы остановиться именно на вашем предложении. Используйте оригинальные изображения вашего продукта с разных ракурсов, предусмотрите возможность добавления видео. Добавьте блок, где пользователи смогут оставлять комментарии о продукте.

Отсутствие реального контента

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

Проблемы с размещением документов

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

Автовоспроизведение видеороликов и музыки

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

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

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

Отсутствие прайса и тарифов

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

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

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

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

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