Юзабилити решает: 7 улучшений на сайте, которые заставят клиентов покупать
1. «Шапка» (хедер)
Когда шапка сайта цепляет взгляд
Шапка − это первое, что бросается в глаза, когда вы заходите на сайт. Генри Дэвид Торо однажды сказал: «Мы растрачиваем нашу жизнь на мелочи… Простота, простота, простота!». Это цитата отлично отображат смысл шапки сайта. Он должна быть компактной, простой в восприятии и максимально информативной.
- Не стоит делать хедер слишком высоким. Важно, чтобы в первый экран попадало, расположенное ниже «шапки», основное предложение сайта.
- Шапка должна содержать логотип компании и слоган-подстрочник, который кратко рассказывает о деятельности компании. Логотип следует располагать с левой стороны, со ссылкой на главную страницу. Такое расположение − это своего рода негласный отраслевой стандарт.
- Хедер должен содержать контактные данные компании − телефон и почту. Делать их нужно в форме текста, а не картинкой, чтобы пользователи могли при необходимости их скопировать. Поверьте, они будут вам благодарны.
- Отличный вариант − разместить в шапке кнопки для вызова формы заявки («Оставить заявку», «Заказать обратный звонок» и т. д.). В случае, если посетитель не захочет или не сможет позвонить, у него будет возможность дать вам знать, что с ним следует связаться.
2. Навигаци
Навигация является важнейшим элементом юзабилити, так как именно с этим блоком пользователи взаимодействуют чаще всего. Есть различные варианты реализации навигации, но мы остановимся на ее основных принципах:
- Компактная структура меню. В большинстве случаев лучше использовать древовидную структуру с раскрывающимися пунктами.
- Не больше двух-трех уровней вложенности, чтобы пользователям было легко ориентироваться.
- Визуально показывайте пользователю пункт меню, в котором он находится. Обычно для этого используют выделение цветом.
- При наличии нескольких уровней вложенности, используйте метод «хлебных крошек».
- В объемном каталоге используйте раскрывающиеся пункты меню. Так вы уйдете от длинных «портянок», сложных для восприятия.
- Если сайт состоит из большого количества страниц, имеет смысл предусмотреть поисковую строку. Убедитесь, что она работает корректно. Это огромный плюс для масштабного интернет-магазина.
3. Веб-формы
Когда просят заполнить 10 обязательных полей в форме заказа
Этот элемент крайне важен для коммерческой успешности сайта, ведь именно он влияет на конверсию. Идеальная веб-форма должна отвечать таким требованиям:
- Содержать минимум полей (если поле обязательно для заполнения, расскажите почему). Забудьте про квесты в виде объемных форм, клиент зашел к вам, чтобы сэкономить время, а не пообщаться. Иначе он пошел бы в обычный магазин. Покупки в интернете − это про экономию времени. Предоставьте ее.
- Иметь пример заполнения поля (формат телефонного номера, адреса и т.д.).
- Обязательные к заполнению поля должны быть отмечены красной звездочкой (*).
- Данные, которые вводятся в обязательных полях, должны проверяться на предмет корректности. Например, телефон вводится с помощью цифр и определенных символов; в электронном адресе должен присутствовать символ «@».
- Пользователю нужно сообщать об успешной отправке данных, указывая, какими будут ваши дальнейшие действия («позвоним», «сообщим по электронной почте» и т. д.).
- Поля формы следует очищать только после того, как данные веб-формы будут успешно отправлены.
- В соответствии с Законом РФ «О персональных данных», на каждой веб-форме должен размещаться чек-бокс с текстом о согласии на обработку персональных данных. Причем, этот текст должен ссылаться на документ, размещенный на сайте и содержащий политику конфиденциальности.
4. «Подвал» или футер
Когда увидел, что в футере нет контактной информации
Нижняя часть сайта может использоваться для быстрого перехода в нужный раздел, а также размещения:
- Ссылки на пользовательское соглашение с информацией о персональных данных.
- Контактной информации из хедера. Оставляйте «Контакты» на видном месте. Так, пользователю будет проще с вами связываться.
- Копирайта разработчика в формате «год создания сайта − текущий год».
- Ссылок на основные разделы сайта, для быстрого перехода пользователей в нужный раздел.
5. Графика
Специалист по юзабилити причесывает картинки на сайте
Графическая информация воспринимается мозгом в несколько раз быстрее, чем текстовая. Поэтому, представленные на сайте фотографии, должны отвечать следующим требованиям:
- Они должны быть высокого качества.
- Фото должны быть уникальными (для SEO это тоже полезно).
- Фото должны быть удобными для просмотра. Это значит, что пользователь должен иметь возможность просматривать их в увеличенном размере, а также листать их.
- Фотографии должны иметь описание (это особенно относится к галерее выполненных заказов).
- Помните, что графические элементы − отличный способ оживить страницу, старайтесь максимально эффективно использовать эту возможность.
6. Адаптивная верстка
Адаптивность активирована
Современный сайт должен быть обязательно адаптирован под мобильные устройства. Не важно продаете вы трубопроводную арматуру или услуги дизайна. Кроме того, с помощью такой оптимизации можно добиться улучшения поведенческих факторов и охвата еще большей аудитории.
7. Контент
Чтобы пользователям было легче находить нужную информацию на сайте, уделяйте должное внимание структуре текста и его оформлению, логической последовательности и оптимизации контента под SEO и LSI. Чтобы этот показатель соответствовал существующим стандартам, к созданию контента следует привлекать профессиональных копирайтеров.
Как победить конкурентов
Многие компании пренебрегают анализом конкурентов. И совершенно зря! Интернет-среда постоянно меняется и совершенствуется. Нужно быть очень гибким и приспосабливаться. Анализ фишек и слабых мест конкурентов, позволит определить, в каком направлении двигаться. Обратите внимание − не копировать, а анализировать! Тут принципы маркетинга в действии, смотрим на конкурентов и делаем лучше, обращая их недостатки в свои преимущества. Например, если вы видите у конкурентов навязчиво выскакивающий онлайн-чат и мелькающую кнопку обратного звонка, откажитесь от этого. Формы обратной связи с большим количеством полей и кислотным оформлением − аналогичная история. Главное − думать о потребностях пользователя