Дизайн — статьи о сайтах
В сервисе аренды автомобилей макет страницы — не просто картинка. За блоком с ценой стоят даты, залог, пробег, требования к водителю и наличие машин. Если выяснять это после отрисовки, одна правка тянет за собой другие. Ниже порядок, который помогает сократить число возвратов на доработку.
Почему правки в аренде авто идут цепочкой
Страница зависит от данных. Допустим, на макете цена выглядит как «от N ₽ в сутки». Потом выясняется, что она меняется от срока аренды, а залог и допуслуги считаются отдельно. Тогда придётся переделать карточку, фильтр, форму бронирования и письмо с подтверждением. Дизайнер тут не виноват: на старте не было исходных правил.
Что решить до того, как начнётся отрисовка
- Главное действие страницы. Это может быть бронирование онлайн, заявка с обратным звонком или проверка доступности на даты. От выбора зависят кнопки и порядок блоков.
- Ответственный за условия. Нужен один человек, который подтверждает тарифы, залог, лимиты пробега и требования к водителю. Формулировки условий должны приходить от вас или вашего юриста, а не придумываться в процессе дизайна.
- Источник данных. Нужно понимать, что подтягивается из учётной системы (наличие, цены), а что вносится вручную (описания, фото).
- Точки выдачи и возврата. Определите, один у вас адрес или несколько и можно ли вернуть авто в другом месте.
Пример: карточка автомобиля с блоком бронирования
Это условный фрагмент, а не описание реального проекта. Слева находится галерея, справа — название «Компактный кроссовер, автомат» и строка «Цена зависит от срока: N ₽ в сутки при аренде 1–2 дня, M ₽ при 7 днях и дольше». Ниже идут поля «Получение: дата, время, место» и «Возврат: дата, время, место», затем кнопка «Проверить доступность». Под формой размещена короткая таблица: минимальный возраст и стаж водителя, размер залога и порядок его возврата, лимит пробега, правила по топливу, разрешён ли выезд за пределы региона.
На этом фрагменте стоит задать конкретные вопросы:
- Что видит клиент, если на выбранные даты машины нет: пустую страницу, похожие модели или предложение сдвинуть даты?
- Где показывается итоговая стоимость и из чего она состоит: аренда, допуслуги, залог?
- Залог выводится рядом с ценой или только в условиях? Решите это осознанно, чтобы клиент не узнал о нём в конце формы.
Какие состояния страницы нужно показать в макете
Чаще всего согласуют «идеальный» вид, а проблемы вскрываются при запуске. Попросите отрисовать:
- отсутствие свободных авто на выбранные даты;
- ошибку в датах, например возврат раньше получения;
- сбой расчёта цены или недоступность данных;
- длинное название модели и разное число фотографий;
- мобильную версию с постоянно доступной кнопкой бронирования;
- экран после отправки заявки: что дальше, когда ответит менеджер, как изменить данные.
Как провести согласование в два круга
Первый круг — каркас без оформления: порядок блоков, тексты, поля формы, подписи кнопок. Его проверяют вы и сотрудник, который каждый день работает с бронированиями: он быстрее заметит, чего не хватает клиенту. Второй круг — визуальный макет на реальных данных трёх-четырёх автомобилей разных классов, а не на одной удачной модели.
Правки лучше собирать одним списком от одного ответственного. Помечайте каждую: «ошибка в данных», «новое требование» или «вопрос вкуса». Новые требования стоит оценивать отдельно, иначе они незаметно превращаются в переделку согласованного.
Проверочный список перед подписанием макета
- Назначено лицо, подтверждающее тарифы и условия аренды.
- На макете реальные названия моделей, подписи и примеры цен, без «Lorem ipsum».
- Понятно, как цена зависит от срока, и это видно в карточке.
- Залог, возраст и стаж водителя, пробег показаны там, где клиент принимает решение.
- Нарисованы состояния: нет машин, ошибка дат, сбой данных, успешная заявка.
- Проверена мобильная версия формы и главной кнопки.
- Известно, какие данные поступают автоматически, а какие вносятся вручную.
- Правки второго круга разделены на ошибки и новые требования.
Если большинство пунктов закрыто, макет можно передавать в разработку: вероятность, что после этого придётся менять структуру страницы, заметно ниже.
