Устаревший дизайн сайта

Открываю сайт клиники, хочу записаться к врачу. Шапка со стеклянными кнопками, бегущая строка «акция до 2017», переливающийся логотип. Вижу прошлое. В прошлом — мой страх, что и лечение там же.

Слайдер на главной меняет три баннера за секунду. Я не успеваю прочитать ни один. Кнопки — объёмные, как пуговицы пальто. Навожу курсор — всплывает тень толщиной с палец.

Шрифт мелкий, серый на сером. На мобильном всё едет: меню перекрывает форму, цены уезжают за край. Пальцем попадаю не туда, потому что интерактивная область меньше ногтя.

Фото — из стоков с улыбками на все тридцать два и идеальными халатами. В одном кадре виден водяной знак. На другом — розетка европейского стандарта. Клиника у нас, а впечатление чужое.

Иконки разноформатные, одна в ретро-стиле, другая из другой эпохи. Отступы пляшут. На одной странице — три разных оттенка зелёного. Похоже на шкаф с разными дверцами.

Внизу счётчик посетителей, как на сайтах из школьного информатика. Рядом — «Мы в Одноклассниках» и кнопка для IE8. Копирайт: «© 2014–2019». Жив ли проект?

Форма записи просит отчество и индекс. Звёздочек много, подсказок нет. Ошибки показываются красным текстом вверху страницы, которого я не вижу. Вижу только усталость.

Страница «О нас» открывается в новом окне. Вкладки мигают, как гирлянда. На одной — таблица из Word с неровными границами. На другой — PDF вместо текста.

Адрес спрятан в картинке. На карте точка не кликается. Телефон без пробелов, номер трудно набрать с первого раза. Кнопка «Позвонить» не звонит.

Сайт чувствует себя музеем. Я пришёл за действием, попал в экспозицию. Иду дальше — туда, где настоящее.

Когда критично, а когда нет

• Медицинские услуги, финтех, страхование, госуслуги у частных операторов: визуальная старость снижает ощущение безопасности и качества.
• Дорогие, дизайн-зависимые покупки: интерьер, техника, мода, косметика, образование — внешний вид транслирует уровень.
• SaaS, мобильные сервисы, стартапы: интерфейс — часть продукта, устаревший вид = сомнение в развитии и поддержке.
• Холодный трафик и конкурентные ниши: пользователь сравнивает по первому экрану, старый UI проигрывает без шанса.
• Мобильный трафик >50%: неадаптивность напрямую ломает сценарии и режет конверсию.

• Монополии и квазимонополии: ЖКХ, узкие B2B-поставщики, когда альтернатив почти нет.
• Бизнесы с офлайн-доверием и потоком по рекомендациям: локальные мастера, клиники с именем, когда сайт — визитка.
• Форумы, сообщества, базы знаний с лояльной аудиторией: ценность — в контенте и людях, не в визуале.
• Внутренние корпоративные порталы и сервисы с «заложенной» аудиторией: важнее функциональность.
• Маркетплейсы/агрегаторы с стандартизированными карточками и фильтрами: решают цена, рейтинг, сроки, а не эстетика витрины.

Что об этом говорят пользователи

• Да нормально всё, можно пользоваться.
• Ну, как в старые добрые, мне ок.
• Мне без разницы, лишь бы работало.
• Цвета странные, но терпимо.

• На главной слайдер сам листается, не успеваю прочитать оффер. Кажется, что сайт старый и суетливый.
• На iPhone 17 текст в меню мелкий, кнопки близко, промахиваюсь. Похоже, мобильную версию давно не трогали.
• В карточке товара маленькие и шумные фото, логотипы партнёров старого образца. Думаю, информация не обновляется.
• Кнопка «Купить» с глянцевым бликом, без состояния наведения. Визуал из 2010-х, доверия меньше.
• В «О нас» новости двухлетней давности и сертификаты в jpg. Складывается впечатление, что компания не активна.

Решение проблемы

• Определите цель: что должно измениться в поведении пользователя и в метриках.
• Соберите инвентаризацию: экраны, компоненты, шрифты, цвета, иконки, фото, тексты.
• Выделите ключевые сценарии: найти, понять, сравнить, оформить, оплатить, связаться.
• Задайте принципы: контраст, иерархия, читабельность, фокус на действии, доступность.
• Постройте основу: сетка, масштаб типографики, интервалы, цветовая палитра, состояния.
• Соберите UI-кит и мини дизайн-систему: кнопки, поля, карточки, уведомления, навигация.
• Уберите визуальный мусор: слайдеры, лишние рамки и тени, клипарт, мигающие баннеры.
• Пересоберите навигацию: короткие заголовки, плоская структура, видимые пути назад.
• Обновите контент: актуальные офферы, логотипы, даты, юридическая информация, контакты.
• Замените медиа: крупные чистые фото, SVG-иконки, современный формат изображений.
• Сделайте адаптив: точки перелома под реальные устройства, удобные зоны нажатия.
• Проверьте доступность: контраст, фокус, клавиатурная навигация, альтернативные тексты.
• Прототипируйте и тестируйте на людях из целевой аудитории. Смотрите, где тормозят.
• Запускайте поэтапно: сначала ключевые страницы и сценарии, затем остальное.
• Зафиксируйте регламенты: как добавлять блоки, тексты и медиа, кто отвечает за актуальность.
• Отслеживайте метрики и обратную связь. Чините узкие места, держите систему в тонусе.

Гипотезы, как увеличить конверсию

• Если упростить главный экран до одного оффера, доказательства и одной кнопки, то конверсия в заявку может увеличиться за счёт того что уходит шум и внимание концентрируется на действии.
• Если заменить мелкий серый текст на контрастный кегль и увеличить интервалы, то конверсия в заполнение формы может увеличиться за счёт того что читать проще и ошибок меньше.
• Если сделать адаптивную шапку с коротким УТП и фиксированной кнопкой в зоне большого пальца, то конверсия в звонок может увеличиться за счёт того что целевое действие всегда под рукой.
• Если обновить карточку товара: крупные фото, понятная цена, один главный CTA, то конверсия в добавление в корзину может увеличиться за счёт того что товар становится яснее и надёжнее.
• Если привести визуальный стиль к единой дизайн-системе и убрать артефакты 2010-х, то конверсия в регистрацию может увеличиться за счёт того что сайт выглядит современно и безопасно.