Дизайн — статьи о сайтах
Сайт шиномонтажа чаще всего открывают с телефона: человек стоит рядом с машиной, едет по городу или заметил спущенное колесо. Ему нужны несколько фактов и возможность сразу действовать. Если для этого приходится увеличивать текст, искать номер в подвале и угадывать, работает ли мастерская сейчас, он вернётся к поиску и откроет следующий сайт. Ниже описано, что стоит проверить и поправить.
Какие вопросы должен закрыть мобильный экран
Посетитель сайта шиномонтажа обычно хочет узнать пять вещей: где вы находитесь, открыто ли сейчас, сколько стоит нужная услуга, можно ли записаться и как с вами связаться. Каждый ответ должен находиться не глубже одного нажатия от первого экрана. Это удобно проверять так: возьмите телефон, откройте главную страницу и засеките, как быстро нашёлся ответ на каждый вопрос. Всё, что вы искали дольше нескольких секунд, стоит вынести выше.
Пример первого экрана страницы «Замена колёс»
Ниже условный фрагмент. Адрес, часы и цены в нём подставлены для примера, их нужно заменить своими.
- Заголовок: «Сезонная замена колёс на ул. Примерной, 12».
- Строка статуса: «Сегодня открыты до 20:00». Её лучше обновлять автоматически по графику работы, а не вписывать вручную.
- Три крупные кнопки одна под другой: «Позвонить», «Записаться», «Маршрут». Первая — ссылка вида tel: с номером, вторая ведёт к форме, третья открывает адрес в картографическом приложении.
- Ниже короткая строка: «Замена комплекта R15–R17 — от ___ ₽» с пометкой, что входит в цену, и ссылкой «Весь прайс».
Карту с интерактивным масштабированием на этом экране лучше не размещать. Она тяжёлая, а при прокрутке пальцем страница нередко начинает двигать карту вместо текста. Хватит адреса, подсказки, как въехать во двор, и кнопки «Маршрут».
Прайс, который читается в узкой колонке
Широкая таблица на телефоне либо уменьшается до нечитаемого размера, либо уезжает за край экрана. Для мобильной версии разбейте прайс на карточки по услугам: название, диаметр колёс, цена и пояснение, что в неё входит.
- Указывайте, за что цена: за одно колесо или за комплект из четырёх.
- Разделяйте диаметры и типы автомобилей, если цена зависит от них, например группами «R13–R16», «R17–R19», «R20 и больше».
- Слово «от» поясняйте: от чего цена может вырасти, например при низком профиле или грузовом автомобиле.
- Рядом с карточкой разместите кнопку «Записаться на эту услугу», чтобы выбранная позиция попадала в заявку.
Форма записи: оставьте только нужные поля
Каждое лишнее поле на телефоне — это ещё один набор текста экранной клавиатурой. Для записи обычно достаточно телефона, имени, желаемого дня и времени и либо диаметра колёс, либо марки автомобиля. Остальное уточнит администратор при звонке.
- Для телефона задайте тип поля tel, чтобы открывалась цифровая клавиатура.
- Размер шрифта в полях — не меньше 16 px: на ряде телефонов при меньшем размере страница сама приближается при вводе.
- Расстояние между кнопками и полями должно позволять попасть пальцем, не задев соседний элемент.
- После отправки покажите понятное сообщение: что заявка принята и как с вами свяжутся. Срок указывайте только тот, который вы действительно выдерживаете.
Отдельно решите, нужна ли запись по времени вообще. Если вы работаете по живой очереди, честнее написать «Записаться можно по телефону, в часы наплыва возможно ожидание», чем показывать форму, на которую некому отвечать.
Скорость в сезон наплыва
Осенью и весной на сайт приходит больше посетителей, и многие из них открывают его на мобильном интернете с нестабильным сигналом. Фотографии бокса и оборудования сохраняйте в размере, близком к реальному размеру на экране, и используйте современные форматы сжатия. Тяжёлые слайдеры, видео в фоне и чат-виджеты, закрывающие кнопку звонка, лучше убрать. Сезонный баннер с акцией не должен занимать весь первый экран. Проверить страницу можно в бесплатных инструментах Lighthouse или PageSpeed Insights, но ориентироваться стоит и на собственное ощущение с обычного телефона.
Проверочный список для мобильной версии
- Номер телефона нажимается и сразу запускает звонок.
- Адрес, часы работы и кнопка «Маршрут» видны без прокрутки или после одной прокрутки.
- Текст читается без увеличения, ссылки и кнопки не расположены вплотную друг к другу.
- Прайс не требует горизонтальной прокрутки и объясняет, за что указана цена.
- Форма записи содержит не больше пяти полей, а при вводе телефона открывается цифровая клавиатура.
- Всплывающие окна и баннеры закрываются с первого нажатия и не перекрывают контакты.
- Страница открывается за приемлемое время при мобильном интернете, а не только по Wi-Fi.
- Проверка выполнена минимум на одном Android-телефоне и одном iPhone, в вертикальной ориентации.
Если список показал несколько проблем, начните с контактов и первого экрана: они сильнее всего влияют на то, дойдёт ли посетитель до звонка или заявки. Прайс и форму можно доработать следующим шагом.
