Как улучшить юзабилити сайта: 55 советов и распространённые проблемы

Посмотреть
видео на:

DZEN VK VIDEO

В прошлых статьях “Что такое юзабилити” и “Юзабилити аудит сайта” мы уже рассказывали:

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

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

Почему важно следить за юзабилити сайта?

Проблемы юзабилити сайтов напрямую влияют на такие важные показатели, как:

• Конверсия;
• Повторные визиты;
• Процент отказов;
• Глубина просмотра страниц;
• Время на сайте;
• И так далее.

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

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

Представьте: вы зашли в магазин, чтобы купить конкретную вещь. Например, ваш друг посоветовал вам хороший пылесос, и вы точно знаете, что здесь он продаётся. И вот вы заходите, а продавец просто вас игнорирует. Вы несколько минут тратите на то, чтобы попытаться с ним заговорить, но вам просто отвечают: “Да-да, подождите секунду”, — и продолжают заниматься своими делами. Вы ждёте 5-10 минут, но ситуация не меняется. При этом других посетителей в магазине нет. Как вы поступите? Скорее всего просто уйдёте. Так же и с сайтом — если простейшие действия занимают у пользователя слишком много времени, он просто уйдёт к конкурентам. А вы недополучите прибыли и просто так сольёте деньги, которые уже потратили на его привлечение.

Самые распространённые ошибки в юзабилити

Наверно, самая главная ошибка — вообще не думать об удобстве сайта для пользователей. Сайт в этом случае делается для галочки, просто чтобы был.

Какие ещё проблемы юзабилити бывают?

• Компания концентрируется на красивом дизайне и забывает об удобном функционале. Обычно в таком случае владельцы сайта хотят выделиться на фоне конкурентов и сделать так, чтобы все задыхались от восхищения. Но пользователям нужно другое — они хотят ресурс, которым удобно пользоваться.
• Слишком много ненужных функций. Вам кажется, что вы совершили прорыв на рынке, добавив на сайт супер сложный функционал. Например, ваши клиенты теперь могут полностью построить свою квартиру и увидеть, как ваша плитка будет смотреться в готовом интерьере. Но проблема в том, что клиенты не хотят разбираться, как пользоваться этой функцией. Они хотят приехать в салон, потрогать плитку и подождать, когда ваш менеджер сам нарисует проект.
  Пример условный, но такое на рынке встречается довольно часто. Компаниям жаль потраченных на разработку денег, и они продолжают поддерживать функционал, который используют 1-2 клиента в месяц. Но лаконичность и минимализм это всегда лучше, чем перегруженность сайта.
• Сайт вынуждает пользователей регистрироваться. Да, собирать контакты очень важно. Но пользователь должен понимать ценность этой сделки и добровольно соглашаться на регистрацию. А если вы говорите: “Сначала поделитесь контактами, а потом мы расскажем вам о продукте”, — то только раздражаете пользователей. Особенно часто этим грешат мобильные приложения.
• Усложнение форм захвата. Когда пользователи вынуждены тратить слишком много времени, чтобы оставить заявку. Часто в форму добавлены совсем ненужные поля, которые не дают никакой важной информации, но отнимают время.
• Некликабельный номер телефона. Если вам нельзя позвонить, просто ткнув на номер телефона в шапке сайта, это настоящая беда. Редко когда человек захочет тратить время и вводить номер вручную.
• Владелец сайта не воспринимает работу с юзабилити как непрерывный процесс. Кажется, что достаточно один раз сделать классный сайт, и можно грести деньги лопатой. Но работа над юзабилити — процесс постоянный. Если вы не следите за поведением пользователей на сайте, в один прекрасный день можете не заметить, как уровень конверсии снизился до критического минимума и рекламный бюджет просто утекает впустую.

Кто занимается оптимизацией юзабилити?

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

Также в улучшении юзабилити могут участвовать диджитал-маркетологи. Их основная задача — анализ целевой аудитории и конкурентов. 

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

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

Улучшение юзабилити сайта: чек-лист

Давайте разберём, какие параметры улучшают юзабилити сайта.

Техническая сторона

• Поработайте над скоростью загрузки. Исследования говорят о том, что стандартно пользователи не готовы ждать загрузку дольше трёх секунд. Исключение могут сделать только для крупного и известного сайта (и то, если долгая загрузка — разовая история) или для сайтов госорганизаций.
• Сделайте мобильную версию сайта. Трафик с мобильных устройств постоянно растёт. Поэтому сайт, адаптированный под мобильные — маст-хэв в 2021 году.
• Поработайте над исправлением типичных ошибок. На сайте не должно быть битых ссылок, пустых разделов, дублей страниц, неоптимизированных изображений, дублирования мета-тегов (title и description) и т.д.
• Следите, чтобы всё работало правильно. Часто на сайте вдруг появляются ошибки, которые автоматически снижают юзабилити. Например, человек хотел оплатить покупку, но с платёжной системой возникли какие-то неполадки, и платёж не прошёл. Вы можете даже не увидеть новый заказ в системе, и если человек сам не напишет/не позвонит вам, просто потеряете клиента.

Контент

• Избавьтесь от лишней информации.О своём продукте всегда хочется рассказать как можно больше. Но обилие бесполезной информации убивает весь дизайн и комфорт от взаимодействия с сайтом.
• Сделайте так, чтобы тексты было легко читать.Да, тексты читают мало и невнимательно. С этим остаётся только смириться. Но вы можете сделать так, чтобы вся важная информация всё-таки дошла по пользователя. Для этого можно использовать:
  • Абзацы. Большое текстовое полотно очень неудобно и скучно читать;
  • Подзаголовки. Они помогают быстрее найти нужный раздел;
  • Списки. Структурированная информация воспринимается легче;
  • Иллюстрации. Если что-то можно наглядно показать, не пытайтесь объяснить это на пальцах;
  • Таблицы. Некоторую информацию проще воспринимать в виде таблицы. Например, сравнения товаров.
• Задавайте оптимальную длину строки. Строка не должна быть ни слишком длинной, ни сверхкороткой. Иначе пользователь будет уставать от чтения ваших текстов. Оптимальная длина — 70-80 символов с пробелами.
• Поработайте над качеством графических материалов. Все картинки и иллюстрации на сайте должны быть хорошего качества. Если вы дополняете тексты какими-то графиками и схемами, позаботьтесь о том, чтобы их можно было приблизить и рассмотреть подробнее. А ещё важно оптимизировать картинки, они не должны “весить”, как слон. Это очень влияет на скорость загрузки сайта.
• Важную информацию вынесите на главный экран. Когда человек только открывает ваш сайт, он сразу должен понимать, кто вы и чем занимаетесь.
• Сделайте контакты заметными. Не заставляйте пользователя обыскивать весь сайт в поисках телефонах или адреса вашего офиса. Лучше разместить эту информацию в шапке на главной странице. И, конечно, номер телефона должен быть кликабельным. Если человек зашёл на сайт с мобильного, он должен иметь возможность легко вам позвонить.
• Не допускайте ошибок в текстах. Орфографические и пунктуационные ошибки не добавляют очков вашей компании. Если не уверены в копирайтере, лучше поручить дополнительную проверку корректору.
• Покажите пользователю, что контент есть не только на первом экране, но и ниже. Для этого можно немного обрезать текст или иллюстрацию в нижней части экрана. Тогда будет очевидно, что страницу можно прокрутить вниз.
• Облегчите восприятие информации. Если у вас сложный продукт и без профессиональных терминов не обойтись, добавьте для пользователей подсказки. Они могут всплывать при наведении курсора на непонятное слово.
• Подумайте как закрыть главные потребности пользователей. Смотрите на ситуацию шире. Например, часто человек заходит на сайт, не чтобы увидеть время работы вашего офиса на неделю вперёд, а узнать открыты ли вы прямо сейчас. Дайте ему эту возможность.
• Общайтесь с пользователем. Когда человек взаимодействует с сайтом, он должен получать какую-то отдачу. Например, пользователь положил товар в корзину. Сайт должен отреагировать на это действие и показать сообщение вроде: “Товар X успешно добавлен в корзину”. Когда система играет в молчанку, пользователь находится в постоянном стрессе: “А если товар не добавился в корзину?”, “А вдруг мой заказ не получили?”, “Это у меня пропал интернет, или с сайтом что-то не то?”.

Дизайн

• Не бойтесь оставлять пустое место.На страницах сайта должен быть “воздух”. Не стоит заполнять всё пространство текстами и картинками. Иначе сайт будет выглядеть перегруженным.
• Поработайте над акцентами. Чем крупнее объект, тем больше внимания он будет привлекать. А значит самыми крупными должны быть важные моменты — кнопка с лид-формой, ключевое преимущество, видео с демонстрацией товара и т.д.
• Не используйте слишком резких визуальных эффектов. Не добавляйте мигающие объекты, бегущую строку и другие эффекты, которые могут раздражать и отвлекать пользователей.
• Проверяйте контрастность шрифта. Важно чтобы ваш текст, в том числе на кнопках и картинках, было легко прочитать. Поэтому буквы не должны еле-еле отличаться от фона. Чтобы проверить контрастность, можно провести небольшой тест: сделайте скриншот страницы и в любом редакторе переведите его в чёрно-белый. Если текст заметен и его легко прочитать, значит с контрастностью всё в порядке.
• Придерживайтесь одного стиля. Все страницы сайта должны быть похожи по стилистике, шрифтам, размерам заголовков, размерам кнопок и т.д.
• Используйте универсальные символы. Пользователям гораздо ближе и понятнее универсальные иконки и обозначения. Курсор в виде стрелки, иконка корзины, звёздочка, чтобы обозначить обязательные для заполнения поля, зелёный цвет для подтверждения, красный для отмены и т.д.
• Не помечайте различия только цветом. Старайтесь не выделять элементы только с помощью цвета. Используйте и другие визуальные подсказки. Например, подчёркивание, жирность шрифта, дополнительные иконки, текст и т.д. Так вы позаботитесь о пользователях, которые плохо различают цвета.
• Размещайте привычные элементы в ожидаемых местах. Например, кнопка закрытия окна обычно находится вверху справа, а логотип компании в левом верхнем углу.

Формы для заполнения и всплывающие окна

• Сделайте формы регистрации и заказа как можно проще. Во-первых, все поля должны иметь стандартные названия. Не заставляйте человека ломать голову и догадываться что вы имели в виду. Во-вторых, постарайтесь использовать как можно меньше полей. Вам действительно так нужен почтовый индекс? Если да, можно немного облегчить пользователю жизнь и сделать автозаполнение в зависимости от адреса. То же самое и с другими полями: подумайте, насколько это важная информация. Если нет — смело убирайте лишнее.
• Если без длинных форм не обойтись, разбейте их на шаги. Так воспринимать информацию намного проще. А ещё важно показывать прогресс. Например, можно написать: “шаг 2 из 5”. Если человек заполняет форму, но при этом не знает, сколько времени займёт процесс, он начинает нервничать.
• Не раздражайте пользователей бесконечными попапами. Если за один визит пользователю приходится закрыть 5 разных всплывающих окон с акциями и формами захвата, вряд ли он захочет вернуться. То же самое и с попапами, которые вылетают раз в какое-то время. Если пользователь закрыл окно, не надо надоедать ему снова.
• Следите, чтобы онлайн-консультант не навязывался.Онлайн-чат должен не перекрывать контент-сайта и всплывать слишком часто. Ещё лучше, если вы добавите настоящее фото сотрудника, а не картинку со стока. Это повысит доверие.

  

Специфика интернет-магазинов

• Проработайте карточки товаров/услуг. Описание товара должно отвечать на все потенциальные вопросы аудитории. “А можно ли мыть эту сковородку в посудомойке?”, “Что из параметров стола высота, а что глубина?”, “Есть ли это платье в других цветах?” — лучше, чтобы всю эту важную информацию можно было найти прямо в карточке товара.

  

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

  

• Предложите совершить быструю покупку. Не всем удобно заполнять форму и ждать подтверждения заказа от оператора. Если вы знаете, что части вашей аудитории проще сделать заказ по телефону, дайте им такую возможность.
• Прямо говорите о наличии и отсутствии товара. Не заставляйте человека испытывать надежду. Может быть он две недели искал ту самую плитку по всем магазинам, нашёл у вас и обрадовался. А вы перезваниваете и сообщаете, что сайт обманул и плитки у вас нет. Уровень удовлетворённости от пользования сайтом точно снизится.
• Подумайте, как сделать фильтры более удобными. В каталоге товаров у пользователей должна быть возможность видеть только те позиции, которые подходят под нужные критерии. Например, по цене, бренду, рейтингу, цвету и т.д.

Навигация

• Сделайте поиск по сайту более умным. На сайте не должно возникать ситуаций, когда человек допустил опечатку в слове, а поиск не понял, что он хотел сказать. Поиск — это один из самых важных инструментов взаимодействия с сайтом. Особенно, если речь идёт об интернет-магазине. Поэтому иногда, если сайт тебя не понимает, проще вернуться в Гугл и найти решение проблемы на другом ресурсе.
• Поработайте над удобством меню. Не мудрите с названиями пунктов: не “наше предприятие”, а “о компании”; не “расположение”, а “контакты”. Также пунктов не должно быть слишком много, а в само меню не стоит добавлять слишком много уровней. Лучше остановиться на 2-3.

  

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

Кнопки и призывы к действию

• Сделайте кнопки удобными.Они не должны быть крошечными, чтобы по ним не мог попасть ни палец, ни курсор. Кликабельным должен быть не только текст, а вся область вокруг. И самое главное — кнопки должны быть похожи на кнопки.
• Названия кнопок должны чётко говорить о том, что произойдёт после нажатия. Обычно на кнопках используют глаголы, которые отвечают на вопрос “Что сделать”: записаться, зарегистрироваться, получить предложение и т.д. Но лучше подстроить надпись под вашу сферу. Например, не “зарегистрироваться”, а “открыть банковский счёт”.
• Делайте призывы чёткими и заметными. Это поможет потенциальным клиентам быстрее принять решение. Кнопку с главным призывом можно сделать чуть больше и ярче остальных.

Ссылки

• Сделайте так, чтобы ссылки с альтернативными сценариями взаимодействия открывались в новом окне. Например, человек был в корзине и решил перейти на другую страницу, чтобы почитать условия доставки. Лучше, чтобы новая страница открылась в другой вкладке. Так вы не дадите пользователю отвлечься от основной цели.
• Выделите ссылки из основного текста. Стандартная история, когда ссылки в тексте подчёркнуты и выделены синим цветом. При переходе по ним цвет меняется на фиолетовый.
• Добавьте хлебные крошки. Это навигационная цепочка, где отображён весь путь пользователя, который привёл его в текущий раздел. Хлебные крошки нужны, чтобы человек в любой момент мог вернуться на два-три шага назад. Например, со страницы конкретного товара в раздел, где представлены все категории.
• Добавьте внутреннюю перелинковку. На каждой странице сайт должен предлагать пользователю другие разделы/статьи/товары, которые ему было бы интересно посмотреть. Это увеличивает среднее время, проведённое на сайте.

Ошибки

• Сделайте сообщения об ошибках более понятными. Если пользователь видит ошибку на странице сайта, это сразу вызывает стресс: “Что произошло? Это проблемы на сайте или с моим интернетом?”. Если понятно объяснить человеку, что на сайте сейчас проводятся работы или что такой страницы уже не существует, он будет понимать в чём дело и останется к вам лоялен.
  То же самое и с менее заметными ошибками. Например, пользователь вводит неправильный формат номера телефона. Если после сообщения об ошибке человек не понимает как её исправить — значит этот момент на сайте плохо проработан.
• Постарайтесь предотвратить возможность ошибки. Да, понятные сообщения об ошибках это хорошо. Но лучше, если вы вообще минимизируете возможность их появления. Дадите подсказки, объясните как работать с функционалом и т.д.

Другие важные мелочи

• Не заставляйте пользователей считать в уме. Например, если вы указываете скидку, сразу пишите как изменится итоговая цена.
• Сохраняйте информацию о предыдущих действиях пользователя. Взаимодействие с сайтом становится намного удобнее, если ресурс запоминает основные действия пользователя: меняет цвет ссылки, которую он уже открывал, отмечает элементы, которые человек уже просмотрел, показывает последние поисковые запросы и т.д.
• Разместите в подвале сайта ссылки на аккаунты в соцсетях. Компании, у которых есть соцсети, вызывают больше доверия и у поисковиков, и у пользователей.
• Обеспечьте быстрый доступ к службе поддержки. Если у пользователя возникают какие-то проблемы, быстро помогите ему их решить. Ещё лучше, если у человека будет выбор: связаться с поддержкой по телефону, написать в чате, оставить сообщение в мессенджере и т.д.
• Адаптируйте таблицы под мобильные устройства. Иногда сам ресурс хорошо выглядит на мобильных, но когда дело доходит до таблиц, начинаются проблемы.
• Дайте возможность взаимодействовать с сайтом с помощью клавиатуры. Например, это удобно, когда человек заполняет форму. Так проще переходить от одного поля к другому.
• Предлагайте выбор. Выбор это всегда хорошо. Пусть пользователь сам решит: пользоваться меню, или найти интересующий раздел по поиску; регистрироваться с нуля, или войти на сайт с помощью соцсетей.
• Не требуйте создавать слишком сложных паролей. Вряд ли аккаунт пользователя в интернет-магазине понадобится кому-то взламывать. Когда сайты, на которых сложный пароль не так важен, заставляют пользователя обязательно добавить в него буквы разного регистра, знаки и цифры, это только раздражает.
• Адаптируйте контент для людей с ограниченными возможностями. В некоторых сферах это официальное требование.

Итого

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

Проверку и повышение юзабилити сайта нужно проводить регулярно. Как минимум, можно следить за поведением пользователей на сайте через Яндекс.Метрику и Google Analytics. Это поможет вовремя заметить снижение поведенческих факторов и конверсии, провести более серьёзную аналитику и принять меры.



Пожалуйста оцените статью, нам это важно
вернуться к оглавлению