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

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

Юзабилити сайта складывается из множества факторов, рассмотрим самые важные.

Шапка сайта

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

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

Навигация по сайту

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

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

Главные критерии правильной навигации:

8. Навигация интуитивно понятна, пользователь легко понимает, как с ней работать.
9. В навигации прослеживается чёткая логика, понятен принцип её построения.
10. Навигация информативна, пользователь сразу может найти всю необходимую ему информацию.
11. Все ссылки следует делать текстовыми, а не графическими.
12. Их цвет должен отличаться от цвета основного текста.
13. Они должны реагировать на курсор – менять цвет или размер, выделяться подчёркиванием и т.д.
14. Не перегружайте меню, делайте его удобным и понятным. Старайтесь не использовать многоуровневые раскрывающиеся списки.

Тексты на сайте

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

15. Наличие заголовка.
16. Заголовок должен иметь более крупный шрифт, чем основной контент, и хорошо читаться.
17. Должна соблюдаться иерархия размера шрифта заголовков: наиболее крупный у заголовка страницы, более мелкий у подзаголовка и т.д.
18. На 2000 символов текста следует делать хотя бы один подзаголовок.
19. Используйте хорошо читаемый и достаточно крупный шрифт.
20. Используйте шрифт без засечек, он лучше всего воспринимается и не утомляет глаза.
21. Шрифт должен хорошо выделяться на странице. Лучше использовать классический вариант – тёмный шрифт, светлый фон.
22. Выравнивайте текст по левому краю. Выравнивание по центру и по ширине лучше не использовать. По центру можно выравнивать только заголовки.
23. Все перечисления лучше оформлять как маркированные или нумерованные списки. Наличие списков улучшает ранжирование сайта.
24. Используйте фотографии и рисунки, иллюстрирующие содержание контента.
25. Размер фотографий следует оптимизировать для использования в сети. Для больших снимков это примерно 100 Кб, для маленьких – не больше 50 Кб.
26. Прописывайте ко всем фотографиям подписи в ALT-теге, раскрывающие их суть.
27. На страницах со списками услуг желательно сразу указывать расценки или вставлять скрипты калькуляторов, чтобы пользователь мог сам рассчитать величину оплаты.
28. Желательно в контенте делать ссылки, ведущие на другие страницы ресурса.
29. Можно вставлять кнопки, позволяющие делиться ссылками на страницы в социальных сетях.
30. Если текст коммерческий, например, речь идёт о продаже товара или услуги, в конце обязательно должен быть призыв к конкретному действию – телефонному звонку, выбору товара, перехода на форму оформления заявки и т.д.

Каталог товаров

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

31. Иметь чёткую структуру, быть интуитивно понятным.
32. Не должно быть слишком большого количества уровней вложенности. При большом количестве подуровней пользователь может в них запутаться, не суметь просто и быстро найти нужный ему товар. Кроме того, это усложняет индексацию сайта поисковыми системами.
33. Наличие фотографий товаров в каталоге обязательно, их отсутствие очень сильно снижает продажи. Покупатель должен видеть, что выбирает. Лучше размещать сразу несколько изображений.
34. Уникальные фото следует защищать от копирования «водяными знаками» с адресом ресурса или названием компании.
35. Товары в упаковке должны иллюстрироваться несколькими фото – в упаковке и в распакованном виде.
36. Предусмотрите возможность увеличения фотографий для их детального рассмотрения. Очень удобно, когда можно рассматривать в окошке увеличенный участок фотографии, передвигая изображение мышкой.
37. Делайте подробное и понятное описание для всей представленной продукции. Можно делать два описания – короткое и длинное, более полное.
38. Выделяйте цветом, шрифтом, указателями и т.д. товары со скидками, чтобы сразу привлекать к ним внимание.
39. Не забывайте указывать цену. Если на товаре нет цены, указано «Цена по запросу» или что-то подобное, это резко снижает уровень продаж.
40. Кнопка «Добавить в Корзину» должна быть хорошо видна.
41. Обязательно указывайте информацию о наличии и количестве конкретного товара на складе.
42. При наличии нескольких похожих товаров, отличающихся только цветом или размером, предусмотрите возможность выбора конкретного интересующего клиента товара.
43. Полезно дать клиентам возможность оставлять отзывы о товарах, качестве обслуживания и т.д.
44. Если товара на складе нет, должна быть возможность оформить предварительный заказ, и отмечена информация о сроках его выполнения.
45. Очень полезно наличие фильтра для сортировки товаров по интересующим клиента параметрам. Например, по бренду производителя, типу товара, цене, размеру и т.д.
46. Вместе с данными по основному товару следует давать информацию по его аналогам, близким по стоимости и функциональности моделям, сопутствующим товарам.

Несколько полезных рекомендаций

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

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

Юзабилити форм

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

47. Форма должна иметь чёткий заголовок, поясняющий её назначение.
48. Форма должна иметь интуитивно понятный дизайн, облегчающий её заполнение.
49. Обязательно должна присутствовать короткая инструкция, поясняющая правила заполнения формы.
50. Не вставляйте в форму поля, не обязательные для заполнения. Чем она проще и понятнее, тем лучше.
51. Поля, которые обязательно должны быть заполнены, следует как-либо выделить. Чаще всего для этого используют знак * с соответствующим пояснением под формой или перед ней.
52. В полях формы или рядом с ними должны быть подсказки с примерами заполнения. При наличии подсказок в поле они должны исчезать сразу после начала его заполнения.
53. Поля формы должны быть достаточно большими, шрифт хорошо читаемым.
54. Избегайте капчи в формах и вообще любых препятствий для их быстрого заполнения и отправки.
55. Размер формы должен быть достаточным для её удобного восприятия и заполнения.
56. Кнопки формы должны отзываться на наведение курсора – менять цвет, всплывать и т.д. Форма курсора при наведении его на кнопку должна меняться на «палец». Внешний вид кнопки должен сразу давать понять, что это именно кнопка.
57. Скрипт формы должен предусматривать вывод сообщения об ошибке при неверном заполнении полей с указанием ошибочных строк и рекомендациями по устранению ошибок.
58. После удачной отправки формы должно появиться соответствующее сообщение. Кроме того, полезно указать, что должен далее сделать или ожидать отправитель. Например – «Наш менеджер свяжется с Вами в течение 15 минут», «Ответ будет отправлен на указанный Вами email» и т.п.

Полезные рекомендации

59. Анализируя свой сайт, поставьте себя на место пользователя. Вы впервые зашли на этот ресурс – что Вы видите, на что обращаете внимание? Удобен ли сайт, понятна ли навигация, сложно ли пользователю найти нужную информацию, заказать товар?
60. Обязательно проверьте, как работает регистрация на сайте, оцените работу «Личного кабинета», функцию восстановления пароля.
61. Проверьте, как выглядит сайт в популярных браузерах.
62. Оцените, насколько корректно сайт отображается на мобильных устройствах.
63. Проверьте корректность работы всех форм и элементов сайта, зайдя на него как обычный пользователь.
64. Проверьте корректность переходов по всем ссылкам на страницах сайта.

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

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