Мы регулярно разбираем чужие сайты — при аудите, редизайне, подготовке коммерческих предложений. И раз за разом видим одни и те же ошибки, причём независимо от бюджета и отрасли. Сайт производителя за миллион рублей и сайт небольшой мастерской могут страдать от одинаковых проблем: непонятного первого экрана, нечитаемого текста, форм, которые хочется закрыть. Ниже — самые частые из них, сгруппированные по зонам сайта, с объяснением, почему они вредят и как их исправить.
Ошибки стратегии: дизайн без понимания задачи
Самые дорогие ошибки совершаются до того, как дизайнер откроет графический редактор. Если не определено, кто посетители сайта, с какой задачей они приходят и что должно произойти в итоге, дизайн будет оцениваться по принципу «нравится — не нравится». А вкусы владельца бизнеса, его заместителя и дизайнера совпадают редко.
Дизайн для владельца, а не для клиента
Классический пример: директор производственной компании хочет на главной большой видеоролик о заводе, историю предприятия и фотографии руководства. Его клиенты — снабженцы, которые приходят за прайсом, сроками и техническими характеристиками. Красивый ролик они пролистывают, а прайс ищут в подвале. В итоге сайт нравится директору и раздражает тех, ради кого он существует.
Копирование конкурентов
Референсы полезны, но перенос чужого решения без понимания его логики часто не работает. Лидер рынка может позволить себе минималистичную главную, потому что его знают и он получает трафик по брендовым запросам. Новичку с тем же дизайном нужно сначала объяснить, кто он такой и почему ему можно доверять.
Лекарство одно — начинать с анализа: кто аудитория, какие у неё вопросы, по каким сценариям она движется. Эту работу мы закладываем на старте каждого проекта, и она описана в разделе этапы работы.
Ошибки первого экрана
У первого экрана одна задача — за 3–5 секунд объяснить, куда попал человек и что ему здесь делать. Ошибки здесь стоят дороже всего, потому что от них зависит, начнёт ли посетитель вообще знакомиться с сайтом.
Абстрактный слоган
«Мы создаём будущее вместе» не говорит, что компания продаёт. Заголовок должен называть продукт или услугу и пользу: «Металлоконструкции под заказ с монтажом за 3 недели».
Слайдер вместо смысла
Пять сменяющихся баннеров с разными сообщениями. Пользователь видит первый слайд, а остальные — случайно. Одно сильное сообщение работает лучше пяти.
Нет следующего шага
Красивая картинка и текст, но непонятно, куда нажать. Должна быть основная кнопка с конкретным действием и, возможно, второстепенная.
Ещё одна частая проблема — первый экран, который на мобильном телефоне целиком занят фотографией, а заголовок и кнопка оказываются ниже. Проверяйте макеты на реальной высоте экрана популярных смартфонов, а не на вертикальной полосе в редакторе. Подробно о том, что должно быть на первом экране, мы писали в статье про первый экран сайта.
Ошибки визуальной иерархии и типографики
Иерархия показывает, что на странице главное, что второстепенное и в каком порядке читать. Когда она нарушена, глаз не знает, за что зацепиться, и пользователь начинает хаотично сканировать страницу или уходит.
Всё одинаково важное. Пять кнопок разных цветов на одном экране, три заголовка одинакового размера, плашки «Хит», «Новинка», «Скидка» на каждой карточке. Когда выделено всё, не выделено ничего. Правило простое: на экране одно главное действие с акцентным цветом, остальные — визуально тише.
Мелкий и бледный текст. Основной текст 13–14 пикселей светло-серым цветом на белом фоне выглядит изящно в макете на большом мониторе. На смартфоне, особенно на улице, его невозможно прочитать. Минимум для основного текста — 16 пикселей на мобильных, контраст — не ниже 4,5:1.
Слишком много шрифтов. Три-четыре разные гарнитуры на одной странице создают ощущение беспорядка. Как правило, достаточно одного шрифта с несколькими начертаниями или пары: акцентный для заголовков и нейтральный для текста.
Длинные строки. Текст во всю ширину экрана монитора — 150–200 символов в строке — тяжело читать: глаз теряет начало следующей строки. Комфортная длина — 60–80 символов.
Хаотичные отступы. Расстояния между блоками выбраны на глаз, и связанные элементы стоят дальше друг от друга, чем несвязанные. Подпись оказывается ближе к соседней картинке, чем к своей. Помогает единая шкала отступов с шагом 4 или 8 пикселей.
Ошибки навигации и форм
Эти ошибки проявляются не на скриншотах, а в процессе использования сайта, поэтому их часто пропускают при утверждении макетов. Между тем именно они чаще всего напрямую стоят заявок и заказов.
| Ошибка | Почему вредит | Как исправить |
|---|---|---|
| Пункты меню на языке компании | Посетитель не понимает, что внутри раздела «Решения» | Называть разделы так, как ищут клиенты: «Ворота», «Заборы», «Монтаж» |
| Гамбургер-меню на десктопе | Основные разделы скрыты, их реже открывают | Показывать главное меню целиком, если позволяет ширина |
| Ссылки неотличимы от текста | Пользователь не замечает переходов | Цвет плюс подчёркивание или другой явный признак |
| Длинная форма для простой заявки | Каждое лишнее поле снижает отправки | Оставить только необходимое: имя и телефон или e-mail |
| Плейсхолдер вместо подписи поля | Подсказка пропадает при вводе | Видимая подпись над полем |
| Ошибки только после отправки | Человек исправляет всё заново и раздражается | Проверять поле сразу после заполнения и объяснять ошибку |
Отдельно отметим всплывающие окна. Окно с предложением подписки, которое появляется через две секунды после входа, закрывает контент и раздражает. Окно на мобильном, которое не помещается на экран и не закрывается, — прямой путь к уходу посетителя. Если без всплывающих окон нельзя, показывайте их по осмысленному триггеру: после прокрутки большей части статьи или при попытке уйти со страницы, и проверяйте, как они закрываются на смартфоне.
Ошибки доверия: сток, анонимность, отсутствие доказательств
Посетитель, который впервые видит компанию, ищет признаки того, что ей можно доверить деньги. Дизайн либо помогает ему их найти, либо прячет. Самая распространённая ошибка — стоковые фотографии там, где ожидаются реальные: «команда» из моделей в одинаковых рубашках, «наш офис» с видом на чужой небоскрёб, «наш цех», который пользователь уже видел на трёх других сайтах. Люди хорошо распознают сток, и вместо доверия он вызывает обратный эффект.
Вторая ошибка — анонимность. Нет адреса, нет фото сотрудников, нет реальных проектов с деталями, отзывы без имён и подробностей. Даже если компания работает много лет, сайт выглядит как однодневка. Третья — доказательства, спрятанные глубоко: сертификаты в отдельном разделе, кейсы в подвале, гарантии упомянуты одной строкой в договоре. Всё это стоит выносить к тем местам, где человек принимает решение: рядом с ценой, формой заявки, кнопкой заказа.
Ошибки мобильной версии
На большинстве коммерческих сайтов доля мобильного трафика превышает половину, а в некоторых нишах доходит до 80%. При этом дизайн по-прежнему часто рисуют сначала для десктопа, а мобильную версию «адаптируют» в последний момент. Результат предсказуем.
- Кнопки и ссылки не меньше 44×44 пикселей, между соседними элементами достаточно места для пальца.
- Телефон и мессенджеры кликабельны и доступны из шапки, а не только из подвала.
- Таблицы не ломают вёрстку: прокручиваются горизонтально или перестраиваются в карточки.
- Фильтры каталога открываются в отдельной панели с кнопкой «Показать N товаров».
- Поля форм вызывают нужную клавиатуру: цифровую для телефона, с символом @ для e-mail.
- Липкие элементы — шапка, чат, баннер cookie — не занимают больше четверти экрана в сумме.
- Страница корректно отображается в горизонтальной ориентации и при увеличенном системном шрифте.
Лучшая профилактика — проектировать мобильную версию одновременно с десктопной, а проверять — на настоящих устройствах, а не только в эмуляторе браузера. Разница в ощущениях между «посмотреть на экране компьютера» и «попробовать большим пальцем на ходу» огромна.
Забытые состояния и мелочи, которые портят впечатление
Дизайнеры рисуют идеальный сценарий: товары в наличии, корзина заполнена, форма отправилась успешно, у статьи красивая обложка. Но реальный сайт гораздо чаще оказывается в неидеальных состояниях, и если они не продуманы, разработчик делает их «как получится».
Что нужно отрисовать дополнительно: пустую корзину с предложением вернуться в каталог, пустую выдачу поиска с подсказками, страницу 404 с навигацией и поиском, товар не в наличии с возможностью подписаться на поступление, ошибку оплаты с понятным объяснением, состояние загрузки каталога, карточку с очень длинным названием и без фотографии. Также стоит проверить, как выглядят блоки, когда контента меньше или больше, чем в макете: два отзыва вместо шести, заголовок в три строки вместо одной.
Простое упражнение перед утверждением макетов: возьмите самый длинный реальный заголовок товара или услуги и самую короткую реальную цену и подставьте в карточку. Затем — товар без фото и без скидки. Если карточка развалилась, её надо переделать до вёрстки, а не после.
К мелочам, которые портят впечатление, относятся и устаревшие детали: копирайт в подвале с давно прошедшим периодом, новости, последняя из которых опубликована много лет назад, ссылки на неработающие соцсети. Посетитель делает вывод, что компания не следит за сайтом, а значит, может не следить и за качеством работы.
Как избежать ошибок: короткая памятка
Почти все перечисленные ошибки предотвращаются не талантом дизайнера, а процессом. Начинайте с целей и сценариев, а не с референсов. Проектируйте структуру и прототипы до визуального дизайна. Проверяйте макеты на реальном контенте и реальных устройствах. Отрисовывайте все состояния, а не только идеальный путь. После запуска смотрите на поведение пользователей и регулярно исправляйте найденное.
Если сайт уже работает и вы узнали в этом списке свои проблемы, не обязательно начинать всё заново. Многие пункты исправляются точечно за несколько дней. Если же ошибок много и они системные — от структуры до мобильной версии, — разумнее обсуждать редизайн с предварительным аудитом, чтобы не повторить их в новой версии.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
