Дизайн — статьи о сайтах
Страница «Услуги и цены» у мастерской обычно растёт сама: сначала набойки и подмётки, затем молнии, растяжка, чистка, ремонт сумок и ремней. Посетитель же приходит с одним вопросом, например: «Сколько стоит заменить молнию на сапоге и сколько ждать?». Если ответ спрятан в середине сплошного текста, человек уйдёт и позвонит в другую мастерскую. Ниже описано, как построить такую страницу, чтобы нужный фрагмент находился за пару касаний.
Что мешает читать длинную страницу мастерской
Посетитель часто смотрит сайт с телефона, стоя на улице или в коридоре, и быстро прокручивает страницу. Читать он не собирается, он ищет свою услугу. Мешают обычно четыре вещи: вступление о «богатых традициях» на два экрана, прайс из сорока строк без группировки, цена и срок в разных местах страницы, телефон только в самом низу. Сокращать всё подряд не нужно. Нужно сделать так, чтобы страницу можно было просматривать, а не только читать подряд.
Оглавление со ссылками-якорями в начале страницы
Сразу под заголовком поставьте короткий список разделов. Каждый пункт ведёт к своему блоку: для этого заголовку блока задают идентификатор, а в списке делают ссылку на него. Называйте пункты словами клиента, а не словами из рекламного буклета. Подойдут «Каблуки и набойки», «Подошва», «Молнии», «Растяжка», «Сумки и ремни». Названия вроде «Наши направления» ничего не объясняют.
Оптимально 5–8 пунктов. На телефоне делайте их крупными, с отступами, чтобы палец не попадал в соседнюю строку. В конце каждого блока добавьте ссылку «К списку услуг», тогда не придётся долго прокручивать страницу назад.
Единая схема для каждого блока услуги
Когда все блоки устроены одинаково, глаз привыкает и находит нужное, не читая текст целиком. Вот условный пример фрагмента страницы (цифры и сроки в нём заменены пропусками, подставьте свои):
- Заголовок: «Замена молнии на сапогах».
- Что входит: одна фраза, например «снимаем старую молнию, подбираем похожую по длине и цвету, вшиваем новую».
- Срок: «обычно от … до … рабочих дней».
- Цена: «от … ₽ за одну молнию», а ниже строка о том, от чего она зависит: длина, тип молнии, материал голенища.
- Когда нужен осмотр: «Если материал у молнии порван, точную стоимость назовём после осмотра».
- Действие: ссылка «Позвонить» и адрес, куда принести обувь.
Порядок «что делаем — срок — цена — условия — связаться» повторяйте в каждом блоке без исключений.
Прайс-лист, который не теряется на телефоне
Таблица из четырёх столбцов на узком экране либо сжимается до нечитаемого размера, либо уезжает вбок. Надёжнее оставить два столбца: название услуги и цена. Срок и пояснения можно вынести под название мелким, но читаемым шрифтом. Строки сгруппируйте подзаголовками («Каблуки», «Подошва», «Молнии»), а не выстраивайте в одну длинную колонку.
Следите за единицами измерения. Для набоек важно написать, что цена указана за пару, а для ремня уточнить, что это за одну вещь. Если стоимость зависит от материала или состояния обуви, скажите об этом одной строкой над таблицей, а не мелкими сносками со звёздочками. Если цены менялись, укажите, на какую дату прайс актуален: устаревшая цена вызывает больше недоверия, чем её отсутствие.
Контакты и кнопки на длинной странице
Телефон должен быть и в шапке, и после прайса. Номер оформите как ссылку для звонка, тогда на смартфоне он набирается одним касанием. Рядом поставьте адрес, часы работы и пояснение, как найти вход, например «вход со двора, вторая дверь». Такие детали экономят звонки с вопросом «как пройти».
Не повторяйте большой блок контактов под каждой услугой, это перегрузит страницу. Достаточно короткой строки «Позвонить» в конце блока и полного блока контактов в конце страницы. Закрепляя панель с кнопкой звонка, проверьте, что она не занимает заметную часть экрана и не перекрывает текст.
Как оформить текст внутри блоков
Абзацы держите в 2–4 строки. Перечисления («принесите чистую обувь, возьмите квитанцию, сообщите, когда нужно забрать») оформляйте списком, а не строкой через запятую. Размер основного шрифта на телефоне должен быть не мельче обычного для чтения, а текст должен хорошо читаться на фоне. Полезен отдельный короткий блок «Что мы не берём в ремонт»: он избавит и вас, и посетителя от лишних звонков.
Проверочный список перед публикацией
- В начале страницы есть оглавление, и каждый пункт ведёт к своему блоку.
- Названия разделов совпадают с тем, как клиент называет проблему.
- Все блоки услуг построены по одной схеме.
- У каждой цены понятно, за что она: за пару, за штуку, за пог. метр, «от» или фиксированная.
- Прайс читается на узком экране без горизонтальной прокрутки.
- Указано, на какую дату актуальны цены и сроки.
- Номер телефона нажимается, адрес и часы работы видны без поиска.
- В конце блоков есть ссылка возврата к списку услуг.
Последняя проверка простая: дайте телефон знакомому, который не видел сайт, и попросите найти цену и срок замены набоек. Если он справился быстро, структура работает. Если искал долго, посмотрите, где он остановился, и поправьте именно это место.
