Принято считать, что UX (сокращение от user experience, «пользовательский опыт») - это про красивые интерфейсы. На сайте компании всё куда практичнее. Задача UX - убрать каждую мелочь, из-за которой посетитель может засомневаться, запутаться или махнуть рукой.
Ниже - детали, которые мы проверяем в первую очередь, когда трафик на сайте есть, а заявок не хватает. Ни одна из них не требует полного редизайна, а на исправление некоторых уходит меньше часа.
Содержание7 разделов
Основную работу делает первый экран
На смартфоне первый экран - это примерно то, что помещается над большим пальцем. На этом пятачке посетитель должен понять, чем вы занимаетесь, подходит ли ему ваше предложение и что делать дальше. Заголовок с названием услуги и района, обещание в одну строку, кнопка и подтверждение надёжности вроде рейтинга по отзывам сработают лучше любой анимации.
Слайдеры - самая частая жертва этого правила. Второго слайда мало кто дожидается, поэтому всё важное так и остаётся спрятанным за первым.
За каждое лишнее решение вы платите
Любой выбор на странице хоть немного, но тормозит посетителя. Три разные кнопки, каждая из которых ведёт в чуть другое место, меню из четырнадцати пунктов, всплывающие окна с подпиской на рассылку, которые выскакивают ещё до загрузки страницы. Человеку приходится думать, а где начинаются раздумья, там люди и уходят.
Оставьте на каждой странице одно главное действие и повторяйте его. Называйте кнопки одинаково по всему сайту. Выбирайте самые простые формулировки, даже если они звучат не так эффектно.
Формы, которые люди заполняют до конца
- Спрашивайте только то, что нужно для начала разговора: имя, телефон или email и пару слов о задаче.
- Размещайте подписи над полями, а не внутри них: там они исчезают, как только человек начинает печатать.
- Настраивайте на смартфоне подходящую клавиатуру, например цифровую для поля с телефоном.
- Показывайте ошибки рядом с полем, простыми словами и прямо во время ввода.
- Ясно подтверждайте, что сообщение ушло, и пишите, когда ждать ответа.
Рядом с каждой формой указывайте и номер телефона. Кому-то удобнее просто поговорить, а если услуга срочная, то и большинству.
Дизайн под большой палец
По кнопкам и ссылкам должно быть легко попасть пальцем: ориентир - не меньше 44 пикселей в высоту. Основной текст - не мельче 16 пикселей, чтобы никому не приходилось растягивать страницу двумя пальцами. Всему, что работает только при наведении курсора, например меню, которые раскрываются, когда над ними проводят мышью, нужна альтернатива, удобная для касаний.
Закреплённая панель внизу экрана с кнопками «Позвонить» и «Узнать цену» - одно из самых надёжных улучшений, которые мы делаем в мобильной версии. Проверяйте всё это на настоящем смартфоне, а не только на компьютере, сузив окно браузера до ширины телефона.
Развеять сомнения в нужный момент
Люди колеблются в предсказуемые моменты: прямо перед тем, как заполнить форму или позвонить, и сразу после того, как увидели цену. Именно здесь их и нужно успокоить. Строка под формой «В рабочее время отвечаем в течение 15 минут», отзыв клиента из соседнего района рядом с кнопкой, пометка о том, что расчёт стоимости бесплатный и ни к чему не обязывает.
Снимайте сомнения там, где они возникают: прямо у кнопки.
Доступный сайт обычно и удобнее
Хороший контраст, заметное выделение элемента в фокусе, правильные подписи к полям форм и осмысленный текст ссылок помогают тем, кто пользуется программами чтения с экрана, а заодно и всем, кто читает с телефона на ярком солнце. Для организаций в Онтарио, в которых работает 50 и более сотрудников, соответствие WCAG 2.0 AA - ещё и требование закона AODA.
Посмотрите, как пять человек пользуются вашим сайтом
Лаборатория для этого не нужна. Попросите пятерых человек, похожих на ваших клиентов, найти на сайте услугу и запросить расчёт, а сами молча наблюдайте. Бесплатные сервисы записи сессий, например Microsoft Clarity, показывают то же самое, но уже на всём трафике. Закономерности видны быстро: кнопка, которую никто не замечает, поле, над которым все зависают.
Исправьте то, что увидели, и посчитайте заявки до и после. Если трафика хватает, сравнивайте варианты между собой в A/B-тестах. Этот цикл лежит в основе нашей работы по оптимизации конверсии и UX/UI-дизайну.
