Главное
- КритичноНерабочие кнопки-якоря: 1
- ВажноНа телефоне в шапке нет меню разделов и нет кнопки меню
- ВажноТяжёлая первая загрузка: 1 482 КБ
- ВажноСтраницы без ссылок на них: 4 из 10
Проверено в браузере на двух размерах экрана: нажатие кнопок, отправка формы с вымышленными данными, ссылки, контраст, размеры кнопок и шрифтов, вес загрузки. Внешние ссылки без сети не проверялись.
Первый экран на телефоне, отмечены проблемные места.Сайт на экране
Компьютер, 1320 px: меню, телефон и кнопка записи видны сразу.
Вся главная на телефоне, колонки слева направо; красные рамки это места находок.Находки по приоритету
1КритичноНерабочие кнопки-якоря: 1
- index.html: ссылка «Оставить заявку» (в окне консультанта, открывается плавающей кнопкой) ведёт на #form, а элемента с таким id в коде нет. Проверено нажатием: страница не прокручивается.
Что сделать: Привязать к существующим блокам (форма записи, калькулятор). Главная кнопка окна консультанта и пункты меню это путь до заявки: человек нажимает и остаётся на месте.
2ВажноНа телефоне в шапке нет меню разделов и нет кнопки меню
- На ширине 1320 px меню видно, на 375 px блок навигации скрыт и кнопки-«бургера» нет (проверено на 10 страницах из 10).
- Главная на телефоне длиной около 10 экранов (7967 px): к нужному разделу можно добраться только прокруткой.
Что сделать: Добавить кнопку меню (или компактную панель якорей: услуги, цены, вопросы, контакты). Раздел должен находиться за 1–2 касания.
3ВажноТяжёлая первая загрузка: 1 482 КБ
- При первом открытии главной на телефоне загружается 1 482 КБ (4 запроса, без учёта прокрутки); ориентир нашего стандарта: страница без картинок до 500 КБ, картинки лёгкие.
- Картинки тяжелее 300 КБ: img/found.jpg (452 КБ), img/walls.jpg (378 КБ), img/roof.jpg (484 КБ), img/hero2.jpg (404 КБ).
Что сделать: Пережать картинки в WebP под размер блока; hero-изображение 150–200 КБ. Скорость на боевом хостинге проверяется отдельно после запуска (в этой проверке сайт работал локально).
4ВажноСтраницы без ссылок на них: 4 из 10
- Файлы news.html, service-fundamenty.html, service-krovlya.html, service-steny.html есть на сайте, но ссылок на них нет ни в меню, ни в тексте.
Что сделать: Добавить пункты меню и ссылки из блока услуг; страницы услуг должны открываться кликом из каталога услуг.
5ВажноНизкий контраст: кнопка «РАССЧИТАТЬ СМЕТУ», 2,62:1
- Кнопка «рассчитать смету»: 2,62:1 (для обычного текста нужно не меньше 4,5:1, для крупного жирного не меньше 3:1).
Что сделать: Затемнить цвет кнопки или сделать текст тёмным; проверить на экране телефона на улице, при ярком свете такая кнопка читается плохо.
6ВажноМелкие элементы для нажатия: 10 из тех, что меньше 44 px
- На главной при 375 px элементов меньше 44 px по ширине или высоте: 10. Примеры: «К содержимому» 125×27 px; «СтройУрал» 128×30 px; «Подробнее →» 113×27 px; «+7 (900) 000-00-00» 154×39 px; «info@example.ru» 135×39 px.
Что сделать: Увеличить высоту кнопок и ссылок до 44 px (отступы вокруг, а не размер текста); кнопки «Заказать» в таблице цен сделать во всю ширину ячейки.
7ЖелательноМелкий шрифт (меньше 14 px): 10 элементов на главной
- Основной шрифт 17 px, а ярлыки и подписи мельче. Примеры: «РАССЧИТАТЬ СМЕТУ» 13,6 px, «Ориентировочно» 13,76 px, «Предварительная оценка» 13,76 px.
Что сделать: Подписи и метки довести до 14 px и выше, при светлом на тёмном фоне 16 px.
8ЖелательноПлавающая кнопка консультанта занимает часть экрана телефона
- Круглая кнопка 64×64 px закреплена в правом нижнем углу на 375 px и остаётся поверх контента при прокрутке.
Что сделать: Проверить на реальных телефонах, что кнопка не закрывает цены, кнопки «Заказать» и поля формы; при необходимости прятать её при показе формы.
Известно заранее: в демо так задумано
СправочноКонтакты и ссылки в демо вымышленные
- Примеры: https://t.me/example, mailto:info@example.ru, tel:+79000000000; форма в демо отвечает «Это демонстрационная форма: заявка пока никуда не отправляется».
Что сделать: Подключить реальные контакты и отправку заявок в почту, мессенджер или CRM клиента.
Все проверки сразу
| Проверка | Итог | Что измерено |
|---|---|---|
| Навигация на телефоне | замечание № 2 | На телефоне в шапке нет меню разделов и нет кнопки меню |
| Кнопки-ссылки на блоки страницы | замечание № 1 | Нерабочие кнопки-якоря: 1 |
| Доступность страниц | замечание № 4 | Страницы без ссылок на них: 4 из 10 |
| Контраст текста | замечание № 5 | Низкий контраст: кнопка «РАССЧИТАТЬ СМЕТУ», 2,62:1 |
| Зоны нажатия на телефоне | замечание № 6 | Мелкие элементы для нажатия: 10 из тех, что меньше 44 px |
| Размер шрифта | замечание № 7 | Мелкий шрифт (меньше 14 px): 10 элементов на главной |
| Плавающая кнопка | замечание № 8 | Плавающая кнопка консультанта занимает часть экрана телефона |
| Форма заявки | в порядке | Форма заявки: 3 поля + согласие, кнопка 55 px; у полей есть подписи, автозаполнение (name, tel), для телефона цифровая клавиатура. |
| Подсказки при ошибках в форме | в порядке | проверено: пустая отправка показывает «Напишите имя, не короче двух букв» и «Введите телефон в формате +7 900 000-00-00 |
| Первый экран на телефоне | в порядке | виден заголовок h1 и кнопки: «РАССЧИТАТЬ СМЕТУ», «РАССЧИТАТЬ СТОИМОСТЬ» |
| Телефон в шапке | в порядке | ссылка tel: есть в шапке, нажатие вызывает звонок |
| Горизонтальная прокрутка | в порядке | на 375 px страница не шире экрана (10 страниц) |
| Битые внутренние ссылки | в порядке | проверено 209 внутренних ссылок, на отсутствующие файлы ссылок нет; 22 внешних ссылок не проверялись (нет выхода в сеть) |
| Ошибки в консоли | в порядке | на 10 страницах ошибок нет |
| Скорость загрузки | замечание № 3 | Тяжёлая первая загрузка: 1 482 КБ |
Порядок исправлений
Сначала (мешает дойти до заявки)
- Нерабочие кнопки-якоря: 1 (№ 1)
- На телефоне в шапке нет меню разделов и нет кнопки меню (№ 2)
- Тяжёлая первая загрузка: 1 482 КБ (№ 3)
- Страницы без ссылок на них: 4 из 10 (№ 4)
- Низкий контраст: кнопка «РАССЧИТАТЬ СМЕТУ», 2,62:1 (№ 5)
- Мелкие элементы для нажатия: 10 из тех, что меньше 44 px (№ 6)
Затем (улучшает удобство)
- Нет находок
Потом (доработки)
- Мелкий шрифт (меньше 14 px): 10 элементов на главной (№ 7)
- Плавающая кнопка консультанта занимает часть экрана телефона (№ 8)
Опция «Тестирование на ошибки»
- Чек-лист по страницам (до 30) в формате «где, шаги, ожидаемое, фактическое, скриншот» — находки по главной странице выше это образец такого списка
Не измерялось в этом примере: скорость на боевом хостинге (сайт проверялся локально, указан вес загрузки), поведение реальных посетителей (карты кликов, записи сессий), проверка на реальных телефонах разных производителей (проверка шла в эмуляции Chromium), внешние ссылки.
Демонстрационный пример кворка «Юзабилити-аудит сайта». Проверенный сайт и его данные вымышленные. Цифры получены автоматической проверкой в браузере.