Дизайн — статьи о сайтах
Клиент пункта проката часто открывает сайт в неудобный момент: он уже начал ремонт, стоит в магазине стройматериалов или сидит в машине, а в другой руке у него что-то держит. Ему нужно быстро понять, есть ли нужный инструмент, сколько стоят сутки, какой нужен залог и как его забрать. Если ответы придётся искать, увеличивая текст и листая длинные таблицы, он позвонит в другой пункт. Ниже разберём, что именно стоит сделать на сайте.
Какие вопросы телефон должен закрыть на первом экране
Составьте список вопросов, которые клиенты чаще всего задают по телефону администратору. Обычно это одни и те же: «есть ли свободный?», «сколько за сутки?», «нужен ли залог?», «можно ли с доставкой?», «до скольки вы работаете?». Ответы на них должны быть видны без лишних действий. Подробности вроде полной комплектации, правил возврата и описания модели могут идти ниже или раскрываться по нажатию.
Каталог: как найти инструмент одной рукой
Многие не знают точное название нужной техники, зато знают задачу: просверлить бетон, срезать плитку, высушить стены. Поэтому рядом с обычными разделами («Электроинструмент», «Садовая техника») полезно сделать входы по задачам. Поиск разместите наверху и оставьте в нём подсказки. Фильтры уберите под кнопку «Фильтры», иначе они займут весь экран.
Плитки товаров делайте в одну-две колонки. На плитке должны быть название, цена за сутки и понятная пометка о наличии. Если наличие вы обновляете вручную и данные могут устареть, честнее написать «уточняйте наличие по телефону», чем показывать зелёную галочку, которой нельзя верить.
Карточка инструмента: условный пример структуры
Это схема для обсуждения, а не описание реального проекта. Допустим, карточка перфоратора на экране телефона устроена так, сверху вниз:
- название и модель, одно крупное фото;
- строка «Сутки: … ₽ · Залог: … ₽» (подставляются ваши значения);
- статус: «Свободен сегодня» или «Занят, освободится завтра»;
- способ получения: самовывоз с адресом или доставка, если она есть;
- тарифы короткими строками: «1 сутки — … ₽», «3 суток — … ₽ за сутки», «неделя — … ₽», а не широкой таблицей, которую приходится двигать вбок;
- комплектация: кейс, буры, зарядное устройство, чтобы клиент не гадал, что получит;
- внизу экрана закреплённая панель с кнопками «Позвонить», «Написать» и «Забронировать».
Закреплённая панель нужна потому, что карточка может быть длинной, а нужное действие должно оставаться под большим пальцем. Следите, чтобы панель не перекрывала текст и не закрывала поля формы при открытой клавиатуре.
Звонок и заявка: меньше полей, нужная клавиатура
Номер телефона оформляйте ссылкой вида tel:, чтобы звонок начинался одним касанием. То же относится к адресу: кнопка «Открыть на карте» удобнее, чем текст, который приходится копировать. Часы работы пишите рядом с кнопкой звонка, чтобы человек не набирал номер, когда пункт закрыт.
В форме брони оставьте то, без чего вы не сможете связаться: имя, телефон, желаемая дата. Комментарий сделайте необязательным. Для телефона задайте тип поля tel, чтобы открывалась цифровая клавиатура, а размер шрифта в полях не делайте меньше 16 пикселей, иначе часть мобильных браузеров будет приближать страницу при вводе. Не требуйте регистрацию ради одной заявки. После отправки покажите, что будет дальше, например: «Мы перезвоним в рабочее время и подтвердим бронь».
Условия выдачи, список документов и правила залога берите из ваших действующих договорных документов и не пересказывайте их по памяти. На сайте эти условия лучше выделить отдельным коротким блоком со ссылкой на полный текст.
Скорость и условия «в поле»: фото, связь, солнце
Мобильная связь в гараже, на даче или на стройке бывает слабой, а карточки инструментов обычно тяжёлые из-за фотографий. Загружайте изображения в размере, близком к реальному размеру на экране, а те, что находятся ниже первого экрана, подгружайте отложенно. Не ставьте на главную тяжёлые слайдеры и видео с автозапуском. Проверить страницу можно в PageSpeed Insights и в отчёте о базовых показателях сайта в Search Console, но главная проверка другая: откройте каталог на обычном телефоне через мобильный интернет.
Кроме того, на улице экран бликует, поэтому цену и кнопки делайте контрастными. Расстояние между кнопками должно быть достаточным, чтобы не попасть не туда мокрым или грязным пальцем.
Проверочный список перед запуском мобильной версии
- В коде страницы есть настройка viewport, текст читается без увеличения.
- Цена за сутки, залог и наличие видны в карточке без прокрутки вбок.
- Кнопки «Позвонить» и «Написать» нажимаются с первого раза, номер оформлен ссылкой.
- Фильтры каталога не занимают весь экран и открываются по кнопке.
- Форма брони содержит минимум полей, для телефона открывается цифровая клавиатура.
- Закреплённая панель не перекрывает текст и поля ввода.
- Адрес, часы работы и условия получения найти за два касания.
- Страница каталога открывается за приемлемое время на мобильном интернете, фотографии не тяжелее нужного.
- Устаревшие статусы наличия не показываются, либо вместо них есть пометка «уточняйте по телефону».
Дайте телефон с сайтом сотруднику, который не участвовал в разработке, и попросите найти конкретный инструмент и забронировать его на завтра. Места, где он замешкается, и нужно исправлять в первую очередь.
