Улучшаем юзабилити сайта: 64 совета, как сделать сайт удобнее

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

Проверка шапки сайта

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

Проверьте, что в шапке сайта находится:

1. Логотип компании.
2. Информация о видах деятельности.
3. Телефон или другая контактная информация.
4. Предпочтительно указывать в шапке городской номер телефона. Для компаний, работающих с несколькими регионами – номер 8-800- для бесплатных звонков из других городов.
5. Рядом с телефоном указано время работы компании.
6. Номер телефона прописан текстом, а не картинкой.
7. Шапка не перегружена лишними элементами, отвлекающими внимание.

Проверка навигации сайта

Анализ навигации входит в стандартный анализ юзабилити сайта. На сайте может быть горизонтальное меню и вертикальное меню.

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

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

Навигация должна быть:

1. Интуитивно понятной пользователю.
2. Логичной, т.е. выстроенной по какому-то понятному принципу.
3. Информативной. Проверьте, что в меню имеются все обязательные разделы. Их список мы разбирали в статье «Как правильно разработать и оптимизировать структуру сайта?»
4. Ссылки в меню должны быть набраны текстом, не картинками.
5. Цвет ссылок должен выделяться и не совпадать с цветом основного текста на сайте.
6. Ссылки должны реагировать на наведение курсора. Например, у ссылки должен меняться цвет, появляться или исчезать подчеркивание.
7. Избегайте перегруженного меню. Это усложняет навигацию на сайте.

Проверка оформления текстов на страницах

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

1. В тексте имеется заголовок.
2. Заголовок набран самым крупным шрифтом и хорошо выделяется.
3. Соблюдается иерархия заголовков, а именно: самым крупным шрифтом набран заголовок, подзаголовки – средним шрифтом, основной текст – шрифтом меньше, чем у подзаголовков.
4. В тексте имеется минимум один подзаголовок на экран текста.
5. Основной шрифт достаточно крупный и хорошо читается.
6. На сайте использован шрифт без засечек.
7. Цвет шрифта достаточно контрастный по отношению к фону сайта. Оптимальный вариант: черный шрифт, белый фон.
8. Выравнивание текста сделано по левому краю. Это самый удобный вариант для чтения с экрана. Выравнивание по ширине использовать не рекомендуется.
9. Перечисления оформлены в виде списков – нумерованных или ненумерованных.
10. В тексте используются фотографии, иллюстрирующие факты из текста.
11. Проверьте, что фотографии оптимизированы к размещению в Интернете и имеют небольшой размер в Кб. Оптимально – 50-100 Кб для крупных снимков и менее 50 Кб для небольших изображений.
12. Все фотографии имеют описания в ALT-теге, указывающие, что изображено на фотографии.
13. В текстах с описанием услуг имеются прайс-листы либо калькуляторы для расчета примерной стоимости услуги.
14. В тексте имеются ссылки на другие разделы сайта (по принципу «Википедии»).
15. Рядом с текстом находятся кнопки социальных сетей, позволяющие делиться ссылкой на страницу.
16. В конце коммерческих текстов имеется призыв к действию либо ссылка на форму обратной связи, контакты компании.

Проверка каталога товаров

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

1. Имеет логичную и понятную структуру.
2. Имеет минимальный уровень вложенности для данного числа товаров. Не стоит делать в каталоге множество уровней, т.к. сложный каталог может запутать пользователей, усложнить навигацию и создать трудности при индексации сайта поисковыми системами.
3. Все товары в каталоге имеют фотографии. Оптимально размещать несколько фотографий для каждого товара.
4. На уникальных фотографиях, сделанных специально для сайта клиента, должен быть водяной знак с адресом (URL) сайта.
5. Если в качестве фотографии товара используется изображение его упаковки, добавьте вторую фотографию с содержимым упаковки, показывающем сам товар и его комплектацию. Например, на сайте интернет-магазина детских товаров у настольных игр в качестве фотографии была только упаковка игры, а что внутри – покупатель не мог увидеть.
6. На сайте должна быть возможность увеличить фотографию товара, чтобы рассмотреть продукт в деталях.
7. По возможности товары должны иметь подробное описание. На карточках товаров должны быть подробные технические характеристики.
8. Акционные товары и товары со скидками должны выделяться в каталоге и привлекать к себе внимание.
9. Стоимость товаров должна быть набрана крупным шрифтом, чтобы клиент сразу видел цену.
10. Кнопка «Добавить в корзину» должна быть крупной и хорошо заметной.
11. В каталоге товаров должна выводиться информация о наличии товаров на складке. Если товаров осталось немного – указываться количество товара (в штуках).
12. Если товар имеет несколько размеров или расцветок, должна быть возможность выбора конкретного размера и расцветки при добавлении товара в корзину.
13. Рекомендуется предусмотреть возможность оставлять отзывы или оценивать товары.
14. Если товара нет в наличии, но ожидается его поставка, рекомендуется выводить информацию об этом и предлагать оформить предварительный заказ.
15. В разделах каталога необходимо предусмотреть возможность сортировать товары по важным для клиентов параметрам. Как минимум, по стоимости и популярности.
16. В карточке товара необходимо выводить список сопутствующих товаров и аналогов с более высокой и более низкой ценой.

Советы для владельцев интернет-магазинов:

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

Если у Вас небольшой каталог (до 100 товаров) и ассортимент обновляется редко, рекомендую заказать уникальные тексты для всех карточек товаров. Найти автора текстов можно, добавив проект на наш сервис. Вы получите достаточно много откликов, если будете платить от 100 руб. за 1000 знаков текста. Качественные рекламные тексты, способные не только улучшить позиции сайта, но и поднять продажи, можно получить при бюджете от 300 руб. за 1000 знаков.

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

Проверка юзабилити форм

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

1. Форма должна иметь заголовок, обозначающий, что это за форма (форма регистрации, заказа и т.д.).
2. После заголовка желательно добавить короткую инструкцию по заполнению формы, буквально 1-2 предложения.
3. Поля, обязательные для заполнения, должны быть выделены. Как правило, для выделения используют знак *.
4. Желательно исключить из формы поля, не обязательные для заполнения. Любое лишнее поле снижает конверсию формы.
5. Рядом с полями или непосредственно в полях необходимо разместить подсказки с примером заполнения форм. Если подсказка находится в поле, при активации поля она должна исчезать.
6. На коммерческих сайтах формы должны быть без капчи. Любая капча ухудшает юзабилити формы и является дополнительным препятствием для пользователей.
7. Поля формы должны быть достаточно большими, чтобы пользователю было удобно вводить информацию.
8. Дизайн формы должен учитывать современные тенденции и быть интуитивно понятным пользователям, учитывать их пользовательский опыт.
9. Кнопки в форме должны реагировать на наведение курсора мыши. Например, менять цвет.
10. При наведении курсора на кнопки последний должен меняться на «палец», чтобы пользователь понял, что перед ним кнопка и на нее можно нажать.
11. Если пользователь пытается отправить неверно заполненную форму, должна выводиться ошибка с рекомендациями, что сделано неверно и как исправить проблему.
12. После отправки формы должно выводиться уведомление, что форма отправлена, и указываться время реакции на сообщение пользователя (например: «Вам ответят в течение 24 часов»).

Иные проверки

1. Попытайтесь взглянуть на сайт глазами типичного пользователя. Что Вам удобно или неудобно? Отметьте это в отчете по результатам анализа юзабитили.
2. Проверьте, работает ли регистрация на сайте, восстановление пароля, функции личного кабинета.
3. Для улучшения юзабилити важно, чтобы сайт приемлемо выглядел во всех популярных браузерах. Проверьте данный факт. Отметьте в отчете выявленные проблемы.
4. Откройте сайт на мобильных устройствах. Проверьте, что сайтом удобно пользоваться, можно легко просматривать информацию, находить нужные разделы, отправлять заявки.
5. Проверьте, что на сайте работают сортировки, формы подбора.
6. Если на сайте имеется возможность оформить заказ, пройдите все этапы оформления заказа. Если Вам что-то показалось неудобным, подумайте, что можно улучшить.

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

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