Первое впечатление от вашего сайта складывается из его визуальной составляющей и удобства использования. Давайте обсудим, какие элементы на сайте требуют особого внимания, чтобы пользователи не покидали его до завершения покупки.
Эти советы предназначены в основном для многостраничных сайтов услуг и интернет-магазинов. Для лендингов (landing page) применяются другие правила юзабилити, которые в данной статье рассматриваться не будут.
Итак, что нужно сделать, чтобы улучшить юзабилити сайта?
Оптимизируйте верхнюю часть сайта (шапку)
Чтобы шапка сайта была максимально удобной и действенной, необходимо включить в неё следующие элементы:
Дескриптор
Это краткое описание того, что предлагает компания. Например, "Строительство деревянных домов в Подмосковье", "Доставка здорового питания" или "Индивидуальный пошив свадебных платьев". Когда пользователь заходит на сайт, он должен мгновенно понять, что ему предлагают и подходит ли это его запросам. Наиболее подходящее место для размещения дескриптора — справа от логотипа или под ним.
Конверсионные элементы
К конверсионным элементам относятся такие кнопки, как «Заказать звонок», «Оставить заявку», а также «Корзина» (в случае интернет-магазинов). Иконка «Корзина» традиционно размещается в правом верхнем углу шапки сайта. Она должна отображать количество добавленных товаров и/или сумму покупки.
В некоторых нишах, таких как «Изготовление пластиковых окон» и «Мебель на заказ», также актуальны кнопки вызова замерщика. Чтобы эти элементы привлекали внимание пользователей, они должны быть заметными и выделяющимися.
Контакты
Рекомендуется указывать на сайте один, максимум два номера телефона. Оптимальным вариантом является указание одного номера в формате «8 (800)…», поскольку такие звонки бесплатны для всех регионов. Избыточное количество номеров может вызвать замешательство у пользователей и перегрузить верхнюю часть сайта.
Если на сайте присутствует личный кабинет, рекомендуется разместить блок регистрации/входа в правой части шапки. Это поможет значительно улучшить юзабилити и поведенческую статистику сайта.
Закреплённая шапка сайта
Чтобы важная информация всегда оставалась доступной при прокрутке страницы, рекомендуется закрепить шапку сайта. Важно учесть следующие моменты:
- Шапка должна быть компактной по высоте (в пределах 40-70 px), чтобы не мешать просмотру содержимого страницы.
- Включать кнопку для перехода на главную страницу.
- Содержать контактный телефон и/или кнопку «Заказать звонок» для оперативной связи с компанией.
- Включать значок «Корзины» для быстрого доступа к оформлению заказа (в случае интернет-магазинов).
Закреплённая шапка зачастую представляет собой горизонтальное меню с ссылками на основные разделы сайта. Это упрощает навигацию и способствует улучшению юзабилити.
2. Проработайте главную страницу сайта
Главная страница должна эффективно презентовать ваш продукт или услугу, кратко рассказывать о предложении, мотивировать к совершению заказа и показывать, как это сделать. Поэтому недопустимо оставлять её полупустой или заполнять исключительно SEO-текстом.
Для повышения юзабилити главной страницы рекомендуется добавить следующие блоки:
Яркий баннер/баннеры
Они должны быть видны сразу при загрузке страницы. Желательно, чтобы на баннерах были представлены самые выгодные предложения и/или условия сервиса, такие как скидки на определённые категории товаров или акции.
Рис 6
Блок преимуществ
Чтобы улучшить юзабилити сайта, важно кратко и ёмко изложить основные преимущества вашей компании, товаров или услуг (в пределах 4–7 слов) и подкрепить их визуальными элементами. Иконки должны соответствовать содержанию и вызывать конкретные ассоциации у пользователей.
Ссылки на основные разделы сайта
Оформление данного блока с помощью ярких и привлекательных изображений позволит пользователям быстрее найти нужный раздел.
3. Проработайте элементы навигации
Пользователь должен легко находить нужные страницы и перемещаться между ними. Эффективная навигация способствует улучшению юзабилити сайта, что в свою очередь повышает лояльность пользователей, увеличивает глубину просмотра, время пребывания на сайте и другие важные показатели, которые можно отслеживать через Яндекс.Метрику и Google Analytics.
Разберём ключевые элементы навигации, требующие особого внимания.
Меню
Горизонтальное меню
Пункты меню должны отражать категории товаров и услуг. Важно, чтобы каждая категория имела не более трёх уровней. Например, в разделе «Посуда» при наведении курсора может выпадать два дополнительных списка: «Для сервировки стола» — «Салатники», «Бокалы», «Кружки» и т.д. Более сложные меню усложняют навигацию. Для тематик с большим количеством параметров (например, техника или ювелирные изделия) стоит включить тегирование по параметрам, а не только по типу изделия.
Вертикальное меню
Пункты этого меню должны отражать структуру сайта и текущее местоположение пользователя. Это можно сделать с помощью разноуровневых списков и цветового выделения.
Футер
Футер — это нижняя часть сайта. Здесь обычно размещают ссылки на важные разделы, но не обязательно дублировать структуру основного меню. В футере рекомендуется разместить:
- Контакты;
- Блок со ссылками на инфостраницы («О компании», «Фотогалерея», «Партнёрство», «Вакансии» и др.);
- Блок со ссылками на сервисные страницы («Доставка», «Оплата», «Условия возврата», «Гарантийное обслуживание» и т.д.);
- Ссылки на аккаунты компании в социальных сетях.
Кнопка навигации «Наверх»
Эта кнопка позволяет пользователю быстро вернуться к началу страницы. Она особенно полезна на сайтах с длинными страницами, например, в интернет-магазинах с большими каталогами. Кнопка обычно имеет вид круглой или прямоугольной иконки со стрелкой вверх и фиксируется внизу страницы (справа или слева), в стороне от основного контента.
Контентная перелинковка
Это ссылки, встроенные в текстовый (реже — графический) контент. Перелинковка особенно важна для информационных сайтов, где критична глубина просмотра и количество прочитанных материалов. Основные требования к таким ссылкам — их уместность и умеренное количество.
Для интернет-магазинов также важны такие элементы навигации, как тегирование (ссылки на конкретные группы товаров в каталогах), фильтры (функционал подбора по параметрам) и поиск.
4. Проработайте страницы товаров/услуг
Такие страницы можно разделить на три вида:
- Каталоги товаров или услуг
- Карточки товаров
- Страницы услуг
Рассмотрим каждую из них.
Каталожные страницы
Для повышения юзабилити на странице каталога обязательно должны присутствовать фотографии товаров, их названия, краткие описания, цены и кнопка для заказа. Желательно предусмотреть возможность покупки в один клик. Цена и кнопка заказа должны выделяться на фоне других элементов за счет размера и контрастных цветов.
Примеры каталогов товаров:
Для перехода в карточку товара рекомендуется сделать кликабельной всю область товарного блока, а не только наименование продукта.
Карточки товаров
Эффективная структура карточки товара включает следующие элементы:
- Изображения товара: лучше размещать слева. Пользователи должны иметь возможность рассмотреть продукт с разных ракурсов и увеличить изображение. Неактивные фото рекомендуется располагать в виде маленьких превью под основным изображением или сбоку от него.
- Основная информация: справа (сверху вниз) размещаются наименование продукта, цена, функционал изменения количества товара и конверсионные элементы. Краткое описание, главные характеристики или основные условия доставки и оплаты рекомендуется размещать до кнопок заказа.
- Видимая область (первый экран): фото, основная информация о товаре, цена и кнопка заказа должны находиться в первом экране просмотра, чтобы пользователю не приходилось скролить страницу.
- Детальные характеристики: лучше располагать под всеми вышеуказанными блоками во вкладках.
Примеры оформления карточек товаров:
Подчеркнем, что выбор карточки товара: описание, основные характеристики другое должно исходить из потребностей Вашей целевой аудитории
если у вас есть вопросы с радостью ответим на них в нашем telegarm-боте
Страницы услуг
На страницах услуг рекомендуется разместить следующие блоки:
- Краткое и ёмкое описание услуги с изображением, иллюстрирующим услугу;
- Ключевые выгоды для пользователя от заказа услуги именно в этой компании;
- Портфолио работ или примеры реализованных проектов, если это уместно для тематики;
- Отзывы клиентов, уже заказавших услугу;
- Простая форма заявки на услугу (открытая или во всплывающем окне).
Прочие элементы опциональны и их желательно размещать после указанных.
5. Проработайте функционал заказа
Формы захвата данных пользователя
Существуют два основных типа форм, которые чаще всего встречаются на сайтах: форма заказа обратного звонка и универсальная форма заявки. Основные принципы юзабилити для таких форм включают:
- Минимум полей. Если для заявки достаточно одного поля, оставьте только его.
- Минимум обязательных полей. Идеально — только поле для ввода телефона или email-адреса (в зависимости от предпочтительного типа связи для компании). В поле для ввода телефона рекомендуется добавлять маску, чтобы минимизировать риск ошибок. Обязательные поля следует отмечать, например, звёздочкой. Функционал проверки заполнения обязательных полей должен быть интуитивно понятным. Если пользователь не заполнил поле, его границы должны подсвечиваться красным цветом с надписью: «Пожалуйста, заполните обязательное поле».
- Отсутствие капчи. Если капча необходима для фильтрации ботов, рекомендуется использовать самую простую, например, reCaptcha от Google.
- Яркая и заметная кнопка отправки заявки.
- Наличие надписи о согласии на обработку персональных данных со ссылкой на политику конфиденциальности компании.
- Оповещение после отправки заявки. Пользователь должен знать, в течение какого времени с ним свяжутся после отправки формы.
Примеры форм заявки:
Страница «Корзины»
Основные принципы организации страницы «Корзины»:
- Визуализация товаров. Все товары, добавленные пользователем в «Корзину», должны быть отображены с фотографией, названием, ценой и количеством. Покупатель должен иметь возможность изменять количество, удалять товары и переходить из «Корзины» к карточке товара.
- Общая стоимость покупки. Общая сумма должна автоматически изменяться при добавлении или удалении товаров.
- Заметная кнопка оформления заказа. Кнопка начала оформления заказа или покупки в один клик должна быть яркой и заметной.
- Чёткое разделение шагов оформления заказа. Каждый этап (выбор способа доставки и оплаты, указание адреса) должен быть визуально отделён.
- Прозрачность стоимости доставки. Пользователь должен ясно видеть, сколько он заплатит за доставку каждым из способов, и итоговую сумму с учётом стоимости доставки.
6. Увеличьте скорость загрузки основных страниц сайта
Несмотря на обилие информации о важности скорости загрузки страниц, многие по-прежнему игнорируют этот аспект. Однако даже при высоком уровне юзабилити медленная загрузка страниц может нанести ущерб: большинство пользователей покинут сайт, если страница не загрузится в течение нескольких секунд.
Чтобы оптимизировать скорость загрузки, следует:
- Выбор ключевых страниц. На основе данных из Яндекс.Метрики и Google Analytics выберите страницы, которые приносят наибольший трафик и/или страницы, на которые планируется направлять трафик в ближайшем будущем.
- Тестирование скорости загрузки. Проверьте скорость загрузки этих страниц с помощью доступных сервисов, таких как Pagespeed Insights от Google.
- Реализация рекомендаций. Внедрите улучшения на основе рекомендаций сервиса. Если вы не являетесь специалистом в этой области, может потребоваться помощь веб-разработчика.
Конечно, эти рекомендации не охватывают всех возможных аспектов. Мы рассмотрели основные элементы сайта, которые важно проработать для улучшения юзабилити. Однако большинство советов касается десктопных версий сайтов.
Если доля мобильного трафика превышает 20% или вы планируете её увеличить, например, через запуск контекстной рекламы, создайте мобильную верстку или разработайте адаптивную версию сайта для удобного отображения на смартфонах. И не забывайте о проведении A/B-тестов — это оптимальный метод, если вы не уверены, что сработает лучше в конкретной ситуации!
Подчеркнем, что в это статье мы привели только базовые момент юзабилити.
Перед внедрение каких то изменений рекомендует пройти аудит юзабилити - записаться на него вы можете в нашем telegarm-боте
Благодарим за внимание.
Команда Виктори
8 (800) 201-99-42