Как понять, что сайт неудобный: восемь проверок за час без специалиста

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

Ниже восемь проверок, которые вы сделаете сами примерно за час. Они стоят ноль рублей, не требуют подрядчика и семь из восьми работают даже на сайте со ста посетителями в месяц. У каждой написано, что считать провалом, - с цифрой или нормой, а не «посмотрите, удобно ли».

Как понять, что сайт неудобный: короткий ответ и восемь проверок

Короткий ответ: сайт неудобный, если посторонний человек не проходит ваш главный сценарий до конца без подсказки и без вопросов. Все остальное - «мне не нравится», а это другая история и другая цена.

Чтобы спор не свелся к вкусу, есть определение. По ISO 9241-11:2018 юзабилити - степень, в которой человек достигает своей цели с результативностью, эффективностью и удовлетворенностью. На рабочий язык это переводится в три вопроса: дошел или нет, за сколько, что при этом чувствовал. Отсюда и требование, чтобы у каждой проверки был критерий провала.

Семь проверок из восьми не требуют счетчика - их можно начать прямо сейчас. Восьмую придется готовить заранее, почему - разобрано ниже.

Почему свой сайт нельзя проверить своими глазами

Владелец не может быть респондентом по собственному сайту. Он помнит, что телефон в подвале, а цена на второй вкладке, и не замечает, что кнопка не помещается под палец. Мешает не невнимательность, а знание.

• Вы знаете структуру наизусть и не ищете, а вспоминаете.
• Вы смотрите с большого экрана, где мышь точнее пальца.
• У вас закешированы шрифты и картинки: сайт грузится быстрее, чем у клиента.
• Вы залогинены в свои сервисы и не видите того, что видит человек с улицы.
• Вы знаете, что стоит за словами на кнопке, а клиент читает буквально.

Это верно и для тех, кто занимается интерфейсами каждый день. В проекте DUQQA мы не стали доказывать заказчику, что упаковка хорошая, а вышли с ней в розницу и опрашивали покупателей в «Золотом яблоке», «Л'Этуаль» и «Рандеву». Логотип прошел тест без единой правки. Упаковку переделали: люди сказали, что непонятен состав, - вынесли его на лицевую сторону. Взгляд профессионалов угадал одно из двух.

Если студия не увидела половину, владелец не увидит ничего. Отсюда правило: одна проверка из восьми делается чужими руками, остальные семь - с секундомером, а не на глаз.

Четыре проверки, для которых хватит телефона и секундомера

Проверка 1. Пройдите главный сценарий на своем телефоне, стоя, одной рукой. Именно одной: в самом цитируемом полевом наблюдении (Стивен Хубер, 1 333 человека, февраль 2013 года) 49% держали телефон одной рукой и только 15% работали двумя. Наблюдению тринадцать лет, экраны с тех пор выросли, так что это ориентир, а не сегодняшняя статистика. Провал: не дошли до цели или не дотянулись до кнопки.

Проверка 2. Найдите цену или срок доставки, не пользуясь поиском по сайту. Провал: не нашли за 30 секунд или полезли в поисковик.

Проверка 3. Отправьте свою форму с опечаткой: телефон на цифру короче, почта без собаки. WCAG 2.2 дает три требования, и нарушение любого - находка: сайт не назвал поле с ошибкой (SC 3.3.1), не подсказал исправление, хотя мог (SC 3.3.3), или стер введенное (SC 3.3.7).

Проверка 4. Дайте задание постороннему: «купи», «оставь заявку», «найди условия доставки». Сидите рядом и молчите - подсказка обнуляет проверку. Провал: не справился сам. Заодно посмотрите на размер кнопок, линейка есть.

Область нажатия бывает больше видимой иконки за счет отступов - самый дешевый способ закрыть находку. В России WCAG не закон, а отраслевая норма с проверяемыми порогами.

Четыре проверки в браузере: скорость, ширина, контраст и записи сеансов

Проверка 5. Откройте сайт на медленном интернете. Chrome DevTools, вкладка Network, список Throttling: профили 3G, Slow 4G и Fast 4G, свой профиль по скорости и задержке, отдельно - замедление процессора под слабый телефон. Провал: первый экран не собрался или отклик дольше секунды.

Шкалы времени две, и склеивать их в «сайт должен грузиться за две секунды» нельзя.

Проверка 6. Сузьте окно браузера до 320 пикселей или включите увеличение 400%. По WCAG 2.2, SC 1.4.10 Reflow контент должен читаться без прокрутки в двух направлениях. Провал: появилась горизонтальная прокрутка или текст обрезался; исключения - карты, схемы, видео. Проверка 7. Замерьте контраст основного текста чекером с пипеткой. Провал: ниже 4,5:1 (SC 1.4.3). Бытовой вариант - открыть сайт на улице в солнечный день.

Проверка 8. Посмотрите пять записей сеансов в Вебвизоре целиком, не перематывая. Ищите три вещи: как человек ищет то, что вы считали очевидным, клики по некликабельному и возвраты назад. Это единственная проверка, которой нужен счетчик.

Неудобный не значит убыточный: почему уходят с сайта

«Сайт неудобный» и «сайт не приносит заявок» - два диагноза с разной ценой лечения, хотя чек-листы считают их одним. Бывает неудобно и прибыльно, бывает удобно и бесполезно.

На проекте Таксимании конверсия в заявку на первом лендинге доходила до 25% в пике, а на втором сайте закрепилась около 10%. Формально показатель упал вдвое - при том что трафика стало намного больше: до 10 000 пользователей и от 1 000 до 2 000 заявок в месяц. Причина была не в интерфейсе, а в рынке: ниша аренды авто под такси переполнилась. Рост делится с клиентом: сайт и креативы на нас, рекламный бюджет и обработка заявок на компании.

• Проверки провалились, заявки есть - сайт продает вопреки себе, и каждая находка равна потерянным заявкам.
• Проверки провалились, заявок нет - начинайте с находок, они дешевле всего в починке.
• Проверки чистые, заявок нет - дело не в удобстве: смотрите доставляемость заявок, рекламу и трафик.
• Проверки чистые, заявки есть - не трогайте сайт, занимайтесь трафиком и предложением.

Третий случай разобран отдельно - восемь причин в порядке проверки, включая те, что лежат вне сайта: «Почему с сайта нет заявок». Проверки выше меряют интерфейс, а не рынок, поэтому и нужны отдельно от аналитики.

Что это дает: считаем в заявках, часах и рублях

Свой вечер экономит нижнюю ступень: проверки стоят ноль, платная панель начинается от 8 300 ₽, наш разбор - от 80 000 ₽. И выигрыш считают в заявках, а не в процентах.

Почему один процентный пункт, а не «плюс сорок процентов». В интернет-магазине «Сколько?Можно» мы разобрали путь клиента по CJM и тепловым картам до переделки, пересобрали магазин примерно за полгода в бюджете до 500 000 ₽ - и конверсия выросла примерно на процентный пункт, ровно на тот, который прогнозировали. Заявки и стоимость лида остались прежними, выросли время на сайте и взаимодействие с интерфейсом. Часы там сэкономила не витрина: загрузка партии товаров сократилась с недель до примерно двух часов за счет собственной админки и нейрогенератора.

Что делать с найденным списком: сортировка находок за полчаса

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

1. Выпишите находку одной строкой: где, что произошло, по какому критерию провал.
2. Поставьте оценку от 0 до 4 по частоте, тяжести обхода и повторяемости.
3. Отметьте шаг сценария: чем ближе к деньгам, тем дороже.
4. Разложите на две колонки: чинится текстом и настройками - упирается в структуру.
5. Первую колонку берите целиком, начиная с высоких оценок.
6. По второй соберите цифры за 12 месяцев и только потом решайте про переделку.

В первую колонку попадают подпись на кнопке, размер области нажатия, контраст, сообщение об ошибке в форме, вес картинок. Во вторую - порядок шагов, навигация, состав карточки, логика каталога. Считать надо потерянные заявки, а не проценты: находка на шаге, через который проходят все, дороже десяти находок там, куда заходят двое в месяц. Если почти все ушло во вторую колонку, разговор идет про переделку, а решается он цифрами за год - как именно, разобрано в статье «Редизайн сайта: когда пора».

Где самостоятельная проверка упирается в потолок

Восемь проверок ловят то, что видно руками и глазами. Дальше начинается граница метода.

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

Порядок цен, если дальше нужны чужие руки: UX-аудит от 80 000 ₽ и 1-2 недели, поток мелких правок - поддержка от 25 000 ₽ в месяц за 10-15 часов, переделка интерфейса - от 250 000 ₽. Со страницы услуги дословно: соберем список проблем по приоритету и скажем, что даст эффект быстрее всего, а дальше вы решаете, чинить своими силами или с нами. Что в платном разборе есть сверх самостоятельных проверок - в статье «Юзабилити-аудит сайта».

Переделывать мы советуем не всегда. На «Сколько?Можно» мы отказались от полной интеграции с 1С ради бюджета клиента, а заказчика отговорили от сверхкреативного магазина: архитектура интернет-магазина стандартизирована, усложнять привычную механику нельзя - интерес должен быть к бренду одежды, а не к интерфейсу. И даже если вы ничего не закажете, восемь проверок останутся при вас и повторяются после каждой правки бесплатно.