Главное
- КритичноНерабочие кнопки-якоря: 2
- ВажноНа телефоне в шапке нет меню разделов и нет кнопки меню
- ЖелательноНизкий контраст: кнопка «Связаться», 3,58:1
- ЖелательноМелкие элементы для нажатия: 33 из тех, что меньше 44 px
Проверено в браузере на двух размерах экрана: нажатие кнопок, отправка формы с вымышленными данными, ссылки, контраст, размеры кнопок и шрифтов, вес загрузки. Внешние ссылки без сети не проверялись.
Первый экран на телефоне, отмечены проблемные места.Сайт на экране
Компьютер, 1320 px: меню, телефон и кнопка записи видны сразу.
Вся главная на телефоне, колонки слева направо; красные рамки это места находок.Находки по приоритету
1КритичноНерабочие кнопки-якоря: 2
- index.html: ссылка «Оставить заявку» (в окне консультанта, открывается плавающей кнопкой) ведёт на #form, а элемента с таким id в коде нет. Проверено нажатием: страница не прокручивается.
- index.html: ссылка «Расчёт» ведёт на #calculator, а элемента с таким id в коде нет. Проверено нажатием: страница не прокручивается.
Что сделать: Привязать к существующим блокам (форма записи, калькулятор). Главная кнопка окна консультанта и пункты меню это путь до заявки: человек нажимает и остаётся на месте.
2ВажноНа телефоне в шапке нет меню разделов и нет кнопки меню
- На ширине 1320 px меню видно, на 375 px блок навигации скрыт и кнопки-«бургера» нет (проверено на 2 страницах из 2).
- Главная на телефоне длиной около 18 экранов (14811 px): к нужному разделу можно добраться только прокруткой.
Что сделать: Добавить кнопку меню (или компактную панель якорей: услуги, цены, вопросы, контакты). Раздел должен находиться за 1–2 касания.
3ЖелательноНизкий контраст: кнопка «Связаться», 3,58:1
- Кнопка «связаться»: 3,58:1 (для обычного текста нужно не меньше 4,5:1, для крупного жирного не меньше 3:1).
Что сделать: Затемнить цвет кнопки или сделать текст тёмным; проверить на экране телефона на улице, при ярком свете такая кнопка читается плохо.
4ЖелательноМелкие элементы для нажатия: 33 из тех, что меньше 44 px
- На главной при 375 px элементов меньше 44 px по ширине или высоте: 33. Примеры: «К содержимому» 125×27 px; «АвтоПульс» 128×30 px; «Заказать» 67×24 px; «+7 (900) 000-00-00» 154×39 px; «info@example.ru» 135×39 px.
Что сделать: Увеличить высоту кнопок и ссылок до 44 px (отступы вокруг, а не размер текста); кнопки «Заказать» в таблице цен сделать во всю ширину ячейки.
5ЖелательноМелкий шрифт (меньше 14 px): 18 элементов на главной
- Основной шрифт 17 px, а ярлыки и подписи мельче. Примеры: «Связаться» 13,6 px, «Акция» 11,84 px, «до 31 октября» 13,76 px.
Что сделать: Подписи и метки довести до 14 px и выше, при светлом на тёмном фоне 16 px.
6ЖелательноПлавающая кнопка консультанта занимает часть экрана телефона
- Круглая кнопка 64×66 px закреплена в правом нижнем углу на 375 px и остаётся поверх контента при прокрутке.
Что сделать: Проверить на реальных телефонах, что кнопка не закрывает цены, кнопки «Заказать» и поля формы; при необходимости прятать её при показе формы.
7ЖелательноВ форме записи 18 переключателей дня и времени
- День и время выбираются из 18 кнопок-переключателей, плюс обязательные поля: brand, name, phone.
Что сделать: Показывать ближайшие 3–4 слота, остальные по кнопке «Другое время»; на телефоне меньше прокрутки до кнопки «Записаться».
Известно заранее: в демо так задумано
СправочноКонтакты и ссылки в демо вымышленные
- Примеры: https://t.me/example, https://vk.com/example, https://wa.me/79000000000, https://youtube.com/@example, mailto:info@example.ru; форма в демо отвечает «Это демонстрационная форма: заявка пока никуда не отправляется».
Что сделать: Подключить реальные контакты и отправку заявок в почту, мессенджер или CRM клиента.
Все проверки сразу
| Проверка | Итог | Что измерено |
|---|---|---|
| Навигация на телефоне | замечание № 2 | На телефоне в шапке нет меню разделов и нет кнопки меню |
| Кнопки-ссылки на блоки страницы | замечание № 1 | Нерабочие кнопки-якоря: 2 |
| Доступность страниц | в порядке | все 2 страниц открываются по ссылкам с сайта |
| Контраст текста | замечание № 3 | Низкий контраст: кнопка «Связаться», 3,58:1 |
| Зоны нажатия на телефоне | замечание № 4 | Мелкие элементы для нажатия: 33 из тех, что меньше 44 px |
| Размер шрифта | замечание № 5 | Мелкий шрифт (меньше 14 px): 18 элементов на главной |
| Плавающая кнопка | замечание № 6 | Плавающая кнопка консультанта занимает часть экрана телефона |
| Форма заявки | в порядке | Форма заявки: 3 поля + согласие, кнопка 55 px; у полей есть подписи, автозаполнение (name, tel), для телефона цифровая клавиатура. |
| Подсказки при ошибках в форме | в порядке | проверено: пустая отправка показывает «Напишите имя, не короче двух букв» и «Введите телефон в формате +7 900 000-00-00 |
| Путь до записи | в порядке | форма записи расположена на 14,4 экрана от верха; к ней ведёт кнопка в первом экране (Записаться на диагностику); обязательных шагов: 5 (brand, day, name, phone, time) |
| Форма записи | замечание № 7 | В форме записи 18 переключателей дня и времени |
| Первый экран на телефоне | в порядке | виден заголовок h1 и кнопки: «Связаться», «Записаться на диагностику» |
| Телефон в шапке | в порядке | ссылка tel: есть в шапке, нажатие вызывает звонок |
| Горизонтальная прокрутка | в порядке | на 375 px страница не шире экрана (2 страниц) |
| Битые внутренние ссылки | в порядке | проверено 54 внутренних ссылок, на отсутствующие файлы ссылок нет; 19 внешних ссылок не проверялись (нет выхода в сеть) |
| Ошибки в консоли | в порядке | на 2 страницах ошибок нет |
| Скорость загрузки | в порядке | первая загрузка главной на телефоне 545 КБ (норма до 1 МБ); сжатие и кэш на сервере настроены в .htaccess |
Порядок исправлений
Сначала (мешает дойти до заявки)
- Нерабочие кнопки-якоря: 2 (№ 1)
- На телефоне в шапке нет меню разделов и нет кнопки меню (№ 2)
Затем (улучшает удобство)
- Низкий контраст: кнопка «Связаться», 3,58:1 (№ 3)
- Мелкие элементы для нажатия: 33 из тех, что меньше 44 px (№ 4)
Потом (доработки)
- Мелкий шрифт (меньше 14 px): 18 элементов на главной (№ 5)
- Плавающая кнопка консультанта занимает часть экрана телефона (№ 6)
- В форме записи 18 переключателей дня и времени (№ 7)
Опция «Тестирование на ошибки»
- Чек-лист по страницам (до 30) в формате «где, шаги, ожидаемое, фактическое, скриншот» — находки по главной странице выше это образец такого списка
Не измерялось в этом примере: скорость на боевом хостинге (сайт проверялся локально, указан вес загрузки), поведение реальных посетителей (карты кликов, записи сессий), проверка на реальных телефонах разных производителей (проверка шла в эмуляции Chromium), внешние ссылки.
Демонстрационный пример кворка «Юзабилити-аудит сайта». Проверенный сайт и его данные вымышленные. Цифры получены автоматической проверкой в браузере.