Ошибки в веб-дизайне редко выглядят как ошибки. Сайт открывается, макет аккуратный, дизайнер сдал работу в срок — а посетители уходят со второго экрана, отдел продаж жалуется на пустые обращения, а владелец не понимает, почему трафик есть, а заявок нет. Мы регулярно разбираем чужие сайты в рамках аудита и видим, что проблемы повторяются от проекта к проекту. Ниже — те, что встречаются чаще всего, и порядок, в котором мы их проверяем.
Перегруженная страница вместо понятной
Самая частая ошибка — желание показать сразу всё. На первом экране одновременно оказываются слайдер с тремя предложениями, всплывающее окно с подпиской, виджет чата, баннер акции и меню на двадцать пунктов. Каждый элемент по отдельности осмысленный, вместе они не дают посетителю понять, куда смотреть.
Мы исходим из простого правила: у экрана есть одна главная задача. На первом экране это ответ на вопросы «куда я попал» и «что здесь можно сделать». Всё, что не помогает ответить, переносится ниже или убирается. Проверяется это легко: покажите страницу человеку, не связанному с проектом, на пять секунд и спросите, чем занимается компания. Если он не отвечает, дело не в цветах.
Отдельная разновидность перегрузки — попытка выделить всё сразу. Когда на странице пять кнопок одинаковой яркости, ни одна из них не выделена. Акцент работает только на контрасте с окружением, поэтому основное действие должно быть одно, а второстепенные оформляются спокойнее.
Текст, который трудно читать
Второе место по частоте занимает типографика. Светло-серый текст на белом фоне, кегль в двенадцать пунктов, строка длиной во весь широкий экран, три гарнитуры на одной странице — всё это встречается регулярно и всё это мешает читать.
- Контраст основного текста и фона должен быть достаточным, чтобы страница читалась при дневном свете на телефоне. Ориентир для проверки — рекомендации WCAG, соотношение 4,5:1 для обычного текста.
- Длина строки — примерно 60-80 символов. На широком мониторе текст без ограничения по ширине читается тяжело: глаз теряет начало следующей строки.
- Межстрочный интервал для основного текста — около полутора кегля. Плотно набранный абзац выглядит компактно в макете и отталкивает на живой странице.
- Гарнитур достаточно одной-двух. Иерархию проще строить размером и насыщенностью, чем сменой шрифта.
Доступность здесь не благотворительность. Люди с ослабленным зрением, посетители с телефона на солнце и пользователи дешёвых матриц — это заметная доля аудитории, и уходит она первой.
Навигация, в которой непонятно, где ты находишься
Посетитель почти никогда не начинает знакомство с главной страницы: он приходит из поиска или рекламы сразу на внутреннюю. Поэтому каждая страница должна отвечать на три вопроса — что это за раздел, как вернуться на уровень выше и что делать дальше.
Что мы обычно правим: возвращаем хлебные крошки, приводим названия пунктов меню к языку клиента вместо внутренней терминологии компании, убираем выпадающие списки третьего уровня, которые на тачскрине невозможно открыть. Отдельно проверяем поиск по сайту: если он есть, он должен находить товары и статьи по опечаткам и синонимам, иначе от него больше вреда, чем пользы.
Мобильная версия по остаточному принципу
Мобильный трафик давно превышает десктопный на большинстве коммерческих сайтов, но макеты до сих пор рисуют от широкого экрана, а телефон получают сжатием. Результат предсказуем: горизонтальная прокрутка, кнопки шириной в палец рядом друг с другом, таблица прайса, уезжающая за край, фиксированная шапка, закрывающая треть экрана.
Мы проверяем адаптивность не на переключателе устройств в браузере, а на реальных телефонах — минимум на iOS и Android, в двух браузерах. Эмулятор не показывает, как ведёт себя клавиатура при вводе в форму, как страница реагирует на поворот экрана и что происходит с фиксированными элементами при прокрутке. Именно там и находятся неприятные сюрпризы.
Скорость загрузки, о которой вспоминают последней
Дизайн и скорость связаны сильнее, чем кажется. Тяжёлые фоновые видео, галереи из неоптимизированных фотографий, шрифты в шести начертаниях, четыре сторонних виджета — всё это решения дизайнера и маркетолога, а не только программиста.
Что даёт эффект в первую очередь: изображения в современных форматах и в нужном размере, отложенная загрузка того, что находится ниже первого экрана, объединение и минификация стилей и скриптов, кэширование на стороне сервера, ревизия сторонних скриптов. Последнее часто оказывается самым результативным: на сайтах с историей мы находим счётчики давно закрытых рекламных кампаний и виджеты, которыми никто не пользуется годами.
Анимация и интерактив ради интерактива
Анимация полезна, когда объясняет: показывает, что кнопка нажата, откуда появилось окно, куда делся удалённый элемент. Она вредна, когда задерживает. Плавное появление блоков при прокрутке выглядит выигрышно в презентации макета и раздражает при третьем визите, а на медленном устройстве превращается в мигание.
Слайдер на первом экране — отдельный сюжет. По нашим наблюдениям, дальше первого кадра доходят единицы, а остальные предложения фактически не показываются никому. Если у компании три равнозначных направления, честнее вывести три карточки, чем прятать два предложения за автопрокруткой.
Формы, которые отпугивают
Форма — место, где дизайн превращается в заявки, и там же теряется больше всего посетителей. Типичные ошибки: восемь обязательных полей вместо двух, отсутствие подсказки о формате телефона, ошибка проверки, показанная только после отправки, отсутствие внятного подтверждения, что заявка ушла.
- Оставляйте обязательными только те поля, без которых менеджер не сможет перезвонить.
- Проверяйте ввод по ходу заполнения и объясняйте, что именно не так, рядом с полем.
- Показывайте состояние кнопки после нажатия, иначе посетитель отправит заявку трижды.
- После отправки выводите отдельную страницу или заметное сообщение — это же место, где считаются цели аналитики.
- Добавьте согласие на обработку персональных данных отдельным непредустановленным чекбоксом.
Как мы проверяем сайт
Аудит удобнее вести по списку, чтобы не оценивать сайт по впечатлению. Ниже сокращённая версия того, с чем мы работаем.
| Что проверяем | Как выглядит проблема | К чему приводим |
|---|---|---|
| Первый экран | Слайдер, попап и чат одновременно, непонятно, чем занимается компания | Один заголовок, одно действие, понятное описание услуги |
| Читаемость | Серый текст мелким кеглем, длинная строка | Контраст по WCAG, строка 60-80 символов, интервал 1,5 |
| Навигация | Нет хлебных крошек, меню на три уровня | Плоская структура, крошки, понятные названия разделов |
| Мобильные | Горизонтальная прокрутка, мелкие кнопки | Проверка на живых устройствах, зона нажатия от 44 px |
| Скорость | Тяжёлые изображения, лишние сторонние скрипты | Оптимизация картинок, отложенная загрузка, ревизия виджетов |
| Формы | Много обязательных полей, ошибки только после отправки | Минимум полей, подсказки по ходу, подтверждение отправки |
| Аналитика | Счётчик стоит, цели не настроены | Цели на заявки и звонки, отчёт по устройствам |
С чего начинать, если ошибок много
Переделывать всё сразу почти никогда не нужно. Мы сортируем найденное по двум признакам: сколько посетителей задевает проблема и сколько стоит её исправить. Сначала идут дешёвые правки на массовых страницах — контраст текста, зона нажатия кнопок, сокращение формы, вес изображений. Затем структурные вещи: пересборка навигации, переработка каталога, редизайн первого экрана.
Второе правило — менять по одному и смотреть на данные. Если за неделю переделать главную, форму и меню, останется только гадать, что сработало. Аналитика и запись сеансов дают ответ дешевле, чем спор о вкусах внутри команды.
Если вы подозреваете, что сайт теряет посетителей, но не понимаете где, посмотрим на него со стороны. Проведём аудит юзабилити и консалтинг по сайту, соберём список проблем с приоритетами и оценим, что даст результат в первую очередь.
