Улучшение юзабилити сайтов - "Правило уставшего курьера"

Юзабилити - это слово очень часто произносят с умным видом, но за ним стоит абсолютно простая вещь - уважение. Уважение к пользователю, который зашёл на ваш сайт. Быть может он только что проснулся или провёл 10 часов на ногах, или едет в метро, одной рукой держась за поручень. У него нет сил разбираться в вашем интерфейсе. Сделайте ему удобно - и он отблагодарит вас заказом.

Как я проверяю юзабилити - 4 простых теста

Тест 1. Однопальцевый

Откройте ваш сайт на телефоне. Держите телефон одной рукой, попробуйте найти и нажать кнопку "Заказать" или "Купить" большим пальцем, не перехватывая телефон. Получается? Или эта кнопка уехала в верхний левый угол, куда палец не дотягивается? Я проверяю так каждый сайт. Если кнопка не в зоне досягаемости большого пальца - я переношу её вниз.

Тест 2. Солнечный

Выйдите на улицу в солнечный день и откройте сайт на телефоне. Видно ли текст? Различима ли кнопка? Или всё слилось в бледное пятно? Контрастность - это не красивое слово или прихоть дизайнера. Это важное условие, при котором пользователь вообще может воспользоваться сайтом. Я проверяю цветовую схему на соответствие стандарту WCAG AA - минимальный уровень доступности.

Тест 3. Слабослышащий

Включите беззвучный режим и откройте видео на сайте. Есть ли субтитры? Понятно ли, о чём видео, без звука? Половина пользователей смотрит видео в транспорте без звука. Если ваше видео без субтитров - вы теряете большую половину аудитории.

Тест 4. Торопливый

Засеките 15 секунд. Откройте сайт на эти 15 секунд. Вы успели понять, что здесь предлагают и как это заказать? Если нет - провал. У пользователя не больше времени, чем у вас сейчас. Я убираю всё, что мешает понять суть за 15 секунд - витиеватые фразы, слайдеры, всплывающие окна.

Что я вижу на 9 из 10 сайтов?

• Кнопка "Купить" на мобильной версии приклеена к самому верху страницы. До неё невозможно дотянуться большим пальцем.
• Текст бледно-серый на белом фоне. Красиво? Возможно. Читаемо? Нет. Особенно на солнце.
• Форма заявки с 12 полями. Имя, фамилия, отчество, должность, компания, ИНН, телефон, email, комментарий, "откуда узнали", промокод, согласие на рассылку. Курьер бы просто плюнул и ушёл.
• Всплывающий чат через 2-3 секунды после входа на сайт. Закрывает пол-экрана на мобильной версии. Пользователь не читает и не напишет в этот чат - он в ярости ищет крестик.

Реальный пример

Сайт доставки пиццы. Красивый дизайнерский сайт, с плавной анимацией, с parallax-эффектом, но вот кнопка "Заказать" была в левом верхнем углу, а телефон - в правом нижнем. На мобильной версии пользователь не дотягивался ни до того, ни до другого. Курьер бы просто ушёл в другое место.

Я перенёс кнопку вниз, привязал её к нижней части экрана (sticky button). Добавил большой контрастный номер телефона на первый экран, а также упростил форму заказа до трёх полей. Конверсия с мобильных устройств выросла на 60% за две недели. Да, дизайн стал менее "воздушным", зато пиццу начали заказывать.