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