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

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

• На что влияет юзабилити;

• Зачем нужен его аудит;

• Что входит в аудит;

• О сервисах, которые помогают оценить текущее юзабилити.

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

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

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

• Конверсия;

• Повторные визиты;

• Процент отказов;

• Глубина просмотра страниц;

• Время на сайте;

• И так далее.

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

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

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

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

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

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

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

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

• Слишком много ненужных функций.

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

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

• Сайт вынуждает пользователей регистрироваться.

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

• Усложнение форм захвата.

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

• Некликабельный номер телефона.

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

• Владелец сайта не воспринимает работу с юзабилити как непрерывный процесс.

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

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

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

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

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

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

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

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

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

1. Поработайте над скоростью загрузки.

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

2. Сделайте мобильную версию сайта.

   Трафик с мобильных устройств постоянно растёт. Поэтому сайт, адаптированный под мобильные — маст-хэв в 2021 году.

3. Поработайте над исправлением типичных ошибок.

   На сайте не должно быть битых ссылок, пустых разделов, дублей страниц, неоптимизированных изображений, дублирования мета-тегов (title и description) и т.д.

4. Следите, чтобы всё работало правильно.

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

   Контент

5. Избавьтесь от лишней информации.

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

6. Сделайте так, чтобы тексты было легко читать.

   Да, тексты читают мало и невнимательно. С этим остаётся только смириться. Но вы можете сделать так, чтобы вся важная информация всё-таки дошла по пользователя. Для этого можно использовать:

   • Абзацы. Большое текстовое полотно очень неудобно и скучно читать

   • Подзаголовки. Они помогают быстрее найти нужный раздел

   • Списки. Структурированная информация воспринимается легче

   • Иллюстрации. Если что-то можно наглядно показать, не пытайтесь объяснить это на пальцах

   • Таблицы. Некоторую информацию проще воспринимать в виде таблицы. Например, сравнения товаров

7. Задавайте оптимальную длину строки.

   Строка не должна быть ни слишком длинной, ни сверхкороткой. Иначе пользователь будет уставать от чтения ваших текстов. Оптимальная длина — 70-80 символов с пробелами.

8. Поработайте над качеством графических материалов.

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

9. Важную информацию вынесите на главный экран.

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

10. Сделайте контакты заметными. 

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

11. Не допускайте ошибок в текстах.

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

12. Покажите пользователю, что контент есть не только на первом экране, но и ниже.

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

13. Облегчите восприятие информации.

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

14. Подумайте как закрыть главные потребности пользователей.

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

15. Общайтесь с пользователем.

    Когда человек взаимодействует с сайтом, он должен получать какую-то отдачу. Например, пользователь положил товар в корзину. Сайт должен отреагировать на это действие и показать сообщение вроде: “Товар X успешно добавлен в корзину”. Когда система играет в молчанку, пользователь находится в постоянном стрессе: “А если товар не добавился в корзину?”, “А вдруг мой заказ не получили?”, “Это у меня пропал интернет, или с сайтом что-то не то?”.

    Дизайн

16. Не бойтесь оставлять пустое место.

    На страницах сайта должен быть “воздух”. Не стоит заполнять всё пространство текстами и картинками. Иначе сайт будет выглядеть перегруженным.

17. Поработайте над акцентами.

    Чем крупнее объект, тем больше внимания он будет привлекать. А значит самыми крупными должны быть важные моменты — кнопка с лид-формой, ключевое преимущество, видео с демонстрацией товара и т.д. 

18. Не используйте слишком резких визуальных эффектов.

    Не добавляйте мигающие объекты, бегущую строку и другие эффекты, которые могут раздражать и отвлекать пользователей.

19. Проверяйте контрастность шрифта.

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

20. Придерживайтесь одного стиля.

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

21. Используйте универсальные символы.

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

22. Не помечайте различия только цветом.

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

23. Размещайте привычные элементы в ожидаемых местах.

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

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

24. Сделайте формы регистрации и заказа как можно проще.

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

25. Если без длинных форм не обойтись, разбейте их на шаги.

    Так воспринимать информацию намного проще. А ещё важно показывать прогресс. Например, можно написать: “шаг 2 из 5”. Если человек заполняет форму, но при этом не знает, сколько времени займёт процесс, он начинает нервничать.

26. Не раздражайте пользователей бесконечными попапами.

    Если за один визит пользователю приходится закрыть 5 разных всплывающих окон с акциями и формами захвата, вряд ли он захочет вернуться. То же самое и с попапами, которые вылетают раз в какое-то время. Если пользователь закрыл окно, не надо надоедать ему снова.

27. Следите, чтобы онлайн-консультант не навязывался.

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

    
    

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

28. Проработайте карточки товаров/услуг.

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

    
    

29. Подробно распишите условия доставки и возврата.

    Это упрощает клиентам жизнь и повышает доверие к компании.

30. Сделайте корзину удобной.

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

    
    

31. Предложите совершить быструю покупку.

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

32. Прямо говорите о наличии и отсутствии товара.

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

33. Подумайте, как сделать фильтры более удобными.

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

    Навигация

34. Сделайте поиск по сайту более умным.

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

35. Поработайте над удобством меню.

    Не мудрите с названиями пунктов: не “наше предприятие”, а “о компании”; не “расположение”, а “контакты”. Также пунктов не должно быть слишком много, а в само меню не стоит добавлять слишком много уровней. Лучше остановиться на 2-3.

    
    

36. Сообщайте пользователю о том, что сейчас происходит.

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

37. Дайте возможность вернуться на главную с любой страницы.

    Обычно это можно сделать по клику на логотип компании в шапке сайта.

38. Сообщайте пользователям, где они сейчас находятся.

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

39. Давайте возможность вернуться на шаг назад.

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

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

40. Сделайте кнопки удобными.

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

41. Названия кнопок должны чётко говорить о том, что произойдёт после нажатия.

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

42. Делайте призывы чёткими и заметными.

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

    Ссылки

43. Сделайте так, чтобы ссылки с альтернативными сценариями взаимодействия открывались в новом окне.

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

44. Выделите ссылки из основного текста.

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

45. Добавьте хлебные крошки.

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

46. Добавьте внутреннюю перелинковку.

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

    Ошибки

47. Сделайте сообщения об ошибках более понятными.

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

    То же самое и с менее заметными ошибками. Например, пользователь вводит неправильный формат номера телефона. Если после сообщения об ошибке человек не понимает как её исправить — значит этот момент на сайте плохо проработан.

48. Постарайтесь предотвратить возможность ошибки.

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

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

49. Не заставляйте пользователей считать в уме.

    Например, если вы указываете скидку, сразу пишите как изменится итоговая цена. 

50. Сохраняйте информацию о предыдущих действиях пользователя.

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

51. Разместите в подвале сайта ссылки на аккаунты в соцсетях.

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

52. Обеспечьте быстрый доступ к службе поддержки.

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

53. Адаптируйте таблицы под мобильные устройства.

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

54. Дайте возможность взаимодействовать с сайтом с помощью клавиатуры

    Например, это удобно, когда человек заполняет форму. Так проще переходить от одного поля к другому.

55. Предлагайте выбор

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

56. Не требуйте создавать слишком сложных паролей.

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

57. Адаптируйте контент для людей с ограниченными возможностями.

    В некоторых сферах это официальное требование. 

Итого

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

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