Дизайн сайта для бизнеса оценивают по тому, насколько легко с ним работать: человек с первого экрана понимает, что вы делаете, читает текст без усилий и попадает пальцем по кнопке. По исследованиям Стэнфорда, люди быстро оценивают сайт по одному внешнему виду. Основное можно проверить самому: контраст текста, размер кнопок, всплывающие окна на телефоне и год в подвале.
- 4,5:1минимальный контраст обычного текста к фону по WCAG 2.2
- 24 × 24CSS-пикселя, минимальный размер кнопки или ссылки по WCAG 2.2
- 4 500+человек участвовали в стэнфордских исследованиях доверия к сайтам
- 13 из 69сайтов с годом в подвале показывают не 2026 год
По чему посетитель судит о сайте
Стэнфордская лаборатория убеждающих технологий составила 10 правил доверия к сайту по итогам трёх лет исследований, в которых участвовали больше 4 500 человек. Шестое правило про внешний вид, и в нём сказано (перевод наш): «люди быстро оценивают сайт по одному визуальному оформлению».
В том же правиле есть оговорка: оформление должно соответствовать цели сайта. Сайту автосервиса не нужно выглядеть как сайт банка, ему достаточно выглядеть как аккуратный автосервис.
Правила опубликованы в 2002 году, и сайты с тех пор сильно изменились. Мы берём из них один вывод: по внешнему виду сайта человек решает, можно ли вам доверять, и оформление должно подходить под ваше дело.
Источники: Stanford Guidelines for Web Credibility · Stanford Web Credibility Research. Читали 6 октября 2026 года, перевод наш.
Контраст: текст должен читаться
Светло-серый текст на белом фоне смотрится изящно на большом мониторе. С телефона на ярком солнце его приходится разглядывать, и на этот случай есть числовая норма.
Международный стандарт доступности WCAG 2.2 на уровне AA требует контраст обычного текста к фону не меньше 4,5:1, а для крупного текста не меньше 3:1.
Попросите подрядчика назвать коэффициент контраста для основного текста и кнопок. Если цифры у него нет, это повод проверить.
Источник: WCAG 2.2, критерий 1.4.3, рекомендация W3C от 12 декабря 2024 года. Читали 6 октября 2026 года.
Кнопки под палец
На телефоне по ссылкам и кнопкам попадают пальцем, а не курсором. WCAG 2.2 в критерии 2.5.8 задаёт минимум: цель для нажатия не меньше 24 на 24 CSS-пикселя. Есть исключения, например когда вокруг маленькой кнопки достаточно пустого места.
Аудит Lighthouse от Google строже. Он отмечает кнопки меньше 48 на 48 пикселей, если хотя бы четверть области в пределах 48 пикселей от центра кнопки перекрывается с другой кнопкой.
Что ещё проверить на телефоне, разобрано в статье мобильная версия сайта.
Источники: WCAG 2.2, критерий 2.5.8 · Lighthouse, размер целей касания. Читали 6 октября 2026 года.
Всплывающие окна
Окно со скидкой на весь экран, которое выскакивает сразу после входа, мешает и человеку, и поиску. В справке Google сказано, что навязчивые диалоговые окна и межстраничные объявления «мешают Google и другим поисковым системам обрабатывать ваш контент. Это может сказаться на позиции ваших ресурсов в результатах поиска».
Вместо полноэкранных окон Google советует баннеры, «которые не занимают много места на экране». Скидку или опрос лучше показать полосой или блоком на странице, не закрывая её целиком. Как сделать опрос, который приносит заявки, разобрано в статье квиз для сайта.
Источник: Google Search Central, навязчивые межстраничные объявления и диалоговые окна. Читали 6 октября 2026 года.
Что показала проверка 135 сайтов
6 октября 2026 года наш скрипт открыл главные страницы сайтов местных компаний из нашей выборки: клиник, стоматологий, салонов красоты, фитнес-клубов и автосервисов. Открылись все 135. Мы искали год рядом со знаком © в тексте страницы: деталь мелкая, но по ней видно, следит ли кто-то за сайтом.
Собственные замеры 6 октября 2026 года. Скрипт видит только текст главной в коде страницы. Год, который подставляет скрипт в браузере, он не видит, поэтому 66 сайтов без года не значит 66 сайтов без года в подвале. Сайты взяты из открытых карт четырёх городов Подмосковья, названия не публикуем.
Когда дизайн чинить, а когда менять
Контраст, размер кнопок, всплывающее окно и год в подвале правятся без нового дизайна. Это точечные правки, их делают на действующем сайте.
Новый дизайн нужен, когда сайт плохо работает на телефоне, когда структуру страниц уже не исправить заплатками или когда бизнес изменился, а сайт рассказывает о старом. Как принять это решение, разобрано в статье переделать сайт или сделать новый, а как разложить страницы, в статье структура сайта.
Тяжёлые картинки и анимации замедляют сайт, поэтому после любой смены дизайна проверьте скорость по статье скорость сайта в PageSpeed.
Вывод наш.
Что проверить сегодня
Техосмотр сайта
Пять проверок, которые вы делаете сами, без программиста. Каждая про деньги: потерянную заявку, штраф или сайт, который однажды утром не открылся. Непонятные слова объяснены в словарике на каждом листе, галочки ставятся прямо в файле.
- 1Чей у вас домен
- 2Есть ли у вас ключи от сайта
- 3Форма заявки и персональные данные
- 4Доходит ли заявка до человека
- 5Видит ли ваш сайт Яндекс
Частые вопросы
Как понять, что дизайн сайта устарел?
Признаки видны без дизайнера: текст плохо читается с телефона, по кнопкам трудно попасть пальцем, при входе всплывает окно на весь экран, в подвале стоит старый год. Если сайт ещё и плохо работает на телефоне, стоит думать о новом дизайне.
Какой контраст текста нужен на сайте?
По WCAG 2.2 на уровне AA не меньше 4,5:1 для обычного текста и не меньше 3:1 для крупного.
Какого размера должны быть кнопки на мобильной версии?
WCAG 2.2 задаёт минимум 24 на 24 CSS-пикселя с исключениями. Аудит Lighthouse отмечает кнопки меньше 48 на 48 пикселей, если они стоят слишком близко к соседним.
Вредят ли всплывающие окна сайту в поиске?
Навязчивые окна могут. В справке Google сказано, что они мешают поисковым системам обрабатывать контент и это может сказаться на позициях. Google советует вместо них баннеры, которые занимают мало места.
Словарик
- Контраст
- Насколько текст отличается от фона по яркости. Записывается отношением, например 4,5:1.
- WCAG
- Международный стандарт доступности сайтов, его выпускает консорциум W3C.
- CSS-пиксель
- Единица размера на странице. На экране телефона он может занимать несколько физических точек.
- Lighthouse
- Инструмент Google, который проверяет страницу и выдаёт оценки и замечания.
- Межстраничное объявление
- Окно поверх всей страницы, которое закрывает контент.
- Подвал сайта
- Нижняя часть каждой страницы: контакты, реквизиты, год, ссылки на документы.
Ещё по теме
Делаем сайты, которые проходят техосмотр
Сайты мы тоже делаем сами: лендинг, визитку, каталог, интернет-магазин. Сдаём их по тому же регламенту техосмотра, по которому написан этот справочник.
- 1Сайта ещё нет. Соберём с нуля и в день сдачи передадим вам домен, доступы и документы.
- 2Сайт есть, но устарел или сделан криво. Переделаем и сохраним адреса страниц, которые уже знает поиск.
- 3Сайт работает, а заявок мало. Найдём, где они теряются, и доработаем.
Напишите в Telegram @vbiz_k, расскажите, что есть сейчас. Разговор бесплатный, платной бывает только сама работа.
Нашли проблему в своём сайте?
Пришлите ссылку, скажу, что чинить первым. Любой разговор бесплатный, платной бывает только сама работа.
Написать в Telegram