Главное Свежее Вакансии Образование
1 123 14 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Юзабилити решает: 7 улучшений на сайте, которые заставят клиентов покупать

Сайт − это отличный инструмент продаж. Сейчас все это понимают. Поэтому им обзаводится даже шаурмичная палатка «У Армена». Почему какие-то ресурсы эффективны, а другие просто висят мертвым грузом? Аспектов много. Один из них − юзабилити (удобство для пользователя). С юзабилити нужно работать постоянно, учитывая этот критерий на всех стадиях разработки сайта. Ниже специалисты INTEC расскажут об элементах юзабилити, которые больше всего влияют на удобство и дадут несколько советов по их оптимизации.

1. «Шапка» (хедер)b_5a9cdf7d4e368.jpg

Когда шапка сайта цепляет взгляд

Шапка − это первое, что бросается в глаза, когда вы заходите на сайт. Генри Дэвид Торо однажды сказал: «Мы растрачиваем нашу жизнь на мелочи… Простота, простота, простота!». Это цитата отлично отображат смысл шапки сайта. Он должна быть компактной, простой в восприятии и максимально информативной.

  • Не стоит делать хедер слишком высоким. Важно, чтобы в первый экран попадало, расположенное ниже «шапки», основное предложение сайта.
  • Шапка должна содержать логотип компании и слоган-подстрочник, который кратко рассказывает о деятельности компании. Логотип следует располагать с левой стороны, со ссылкой на главную страницу. Такое расположение − это своего рода негласный отраслевой стандарт.
  • Хедер должен содержать контактные данные компании − телефон и почту. Делать их нужно в форме текста, а не картинкой, чтобы пользователи могли при необходимости их скопировать. Поверьте, они будут вам благодарны.
  • Отличный вариант − разместить в шапке кнопки для вызова формы заявки («Оставить заявку», «Заказать обратный звонок» и т. д.). В случае, если посетитель не захочет или не сможет позвонить, у него будет возможность дать вам знать, что с ним следует связаться.

2. Навигаци

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

  • Компактная структура меню. В большинстве случаев лучше использовать древовидную структуру с раскрывающимися пунктами.
  • Не больше двух-трех уровней вложенности, чтобы пользователям было легко ориентироваться.
  • Визуально показывайте пользователю пункт меню, в котором он находится. Обычно для этого используют выделение цветом.
  • При наличии нескольких уровней вложенности, используйте метод «хлебных крошек».
  • В объемном каталоге используйте раскрывающиеся пункты меню. Так вы уйдете от длинных «портянок», сложных для восприятия.
  • Если сайт состоит из большого количества страниц, имеет смысл предусмотреть поисковую строку. Убедитесь, что она работает корректно. Это огромный плюс для масштабного интернет-магазина.

3. Веб-формы

b_5a9ce09287bb4.jpg

Когда просят заполнить 10 обязательных полей в форме заказа

Этот элемент крайне важен для коммерческой успешности сайта, ведь именно он влияет на конверсию. Идеальная веб-форма должна отвечать таким требованиям:

  • Содержать минимум полей (если поле обязательно для заполнения, расскажите почему). Забудьте про квесты в виде объемных форм, клиент зашел к вам, чтобы сэкономить время, а не пообщаться. Иначе он пошел бы в обычный магазин. Покупки в интернете − это про экономию времени. Предоставьте ее.
  • Иметь пример заполнения поля (формат телефонного номера, адреса и т.д.).
  • Обязательные к заполнению поля должны быть отмечены красной звездочкой (*).
  • Данные, которые вводятся в обязательных полях, должны проверяться на предмет корректности. Например, телефон вводится с помощью цифр и определенных символов; в электронном адресе должен присутствовать символ «@».
  • Пользователю нужно сообщать об успешной отправке данных, указывая, какими будут ваши дальнейшие действия («позвоним», «сообщим по электронной почте» и т. д.).
  • Поля формы следует очищать только после того, как данные веб-формы будут успешно отправлены.
  • В соответствии с Законом РФ «О персональных данных», на каждой веб-форме должен размещаться чек-бокс с текстом о согласии на обработку персональных данных. Причем, этот текст должен ссылаться на документ, размещенный на сайте и содержащий политику конфиденциальности.

4. «Подвал» или футер

b_5a9ce1902e9e6.jpg

Когда увидел, что в футере нет контактной информации

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

  • Ссылки на пользовательское соглашение с информацией о персональных данных.
  • Контактной информации из хедера. Оставляйте «Контакты» на видном месте. Так, пользователю будет проще с вами связываться.
  • Копирайта разработчика в формате «год создания сайта − текущий год».
  • Ссылок на основные разделы сайта, для быстрого перехода пользователей в нужный раздел.

5. Графика

b_5a9ce19fa71ca.jpg

Специалист по юзабилити причесывает картинки на сайте

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

  • Они должны быть высокого качества.
  • Фото должны быть уникальными (для SEO это тоже полезно).
  • Фото должны быть удобными для просмотра. Это значит, что пользователь должен иметь возможность просматривать их в увеличенном размере, а также листать их.
  • Фотографии должны иметь описание (это особенно относится к галерее выполненных заказов).
  • Помните, что графические элементы − отличный способ оживить страницу, старайтесь максимально эффективно использовать эту возможность.

6. Адаптивная верстка

b_5a94ece9a8659.jpg

Адаптивность активирована

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

7. Контент

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

Как победить конкурентов

Многие компании пренебрегают анализом конкурентов. И совершенно зря! Интернет-среда постоянно меняется и совершенствуется. Нужно быть очень гибким и приспосабливаться. Анализ фишек и слабых мест конкурентов, позволит определить, в каком направлении двигаться. Обратите внимание − не копировать, а анализировать! Тут принципы маркетинга в действии, смотрим на конкурентов и делаем лучше, обращая их недостатки в свои преимущества. Например, если вы видите у конкурентов навязчиво выскакивающий онлайн-чат и мелькающую кнопку обратного звонка, откажитесь от этого. Формы обратной связи с большим количеством полей и кислотным оформлением − аналогичная история. Главное − думать о потребностях пользователя

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Елена Казанцева
Добрый день.
Спасибо большое за статью.
Трубная компания "7 диаметров" https://pipe7d.ru/ продает трубы в изоляции и трубопроводную арматуру.
Данная статья была для нас очень полезной.
Ответить
Олеся Полева
Весьма познавательно)))
Ответить
Паша Королик
Полезная информация не только для начинающих, но и для тех, кто давно в теме.
Ответить
Макс 73937
Неплохо, но все это уже есть в сети - на самом деле нужны примеры, конкретные примеры на сайтах.
Ответить
INTEC - технологии роста
Создание и продвижение сайтов, услуги интернет-маркетинга
Макс 73937
Я имею ввиду, что например "графика" - как можно точно определить что именно это фото подойдет - помимо того что оно уникальное?
Ответить
INTEC - технологии роста
Создание и продвижение сайтов, услуги интернет-маркетинга
Волшебник INTEC
Просто уникальное фото не подходит. Важно качество фото. Возможность со всех сторон посмотреть товар. Тут важно задумываться о пользователе. Например, если вы продаете телефоны, клиенту будет интересно рассмотреть телефон со всех сторон в хорошем разрешении, с возможностью открыть фото в режиме быстрого просмотра. Мы имитируем личное присутствие клиента. Именно фото помогает принять решение о покупке. И желательно чтобы фото было на нейтральном белом фоне.
Ответить
Макс 73937
Понятно, что то вроде обзора...
Ответить
Виталий Ситник
Полезно, особенно для начинающих.
Ответить
Tykhon Ivanov
Да уж, эта статья - ещё один холодный душ на горячие мечты тех, кто считает, что вести свой сайт - легко!
Ответить
Эля Субботина
Неплохо всё. Понятно просто .
Ответить
Timur Khakimov
Для многих ниш десктоп работает для 40%. Было бы круто почитать про мобильное юзабилити
Ответить
Мария Шестова
Спасибо большое про статью.
Подцепил для себя полезные моменты которых буду придерживаться.
Фруктовые корзины в подарок https://arenaflowers.ru/podarochnye-korziny/korzini-s-fruktami/ с бесплатной доставкой по Москве
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.