Дизайн — статьи о сайтах
В аренде автомобиля клиент не может потрогать машину до звонка, поэтому фотографии заменяют ему осмотр. Если они сложены в беспорядке, тяжело грузятся или показывают не тот автомобиль, человек уходит к конкурентам. Ниже описано, как выстроить фотографии в каталоге и на карточке машины.
Какие кадры нужны на карточке автомобиля
Начните с вопросов, которые клиенты обычно задают менеджеру, и превратите их в обязательный набор кадров. Один и тот же перечень для всех машин позволяет сравнивать их между собой.
- вид спереди в три четверти — главный кадр, он же миниатюра в каталоге;
- вид сбоку и сзади;
- салон спереди: руль, панель приборов, центральная консоль;
- задний диван и пространство для ног;
- открытый багажник — клиенты с детскими креслами и багажом смотрят на него в первую очередь;
- детали, которые влияют на выбор: коробка передач, навигатор, разъёмы, детское кресло, если оно входит в комплект.
Если снимки сделаны на другом экземпляре этой модели или взяты у производителя, честно напишите об этом рядом с галереей. Клиент должен понимать, что именно он увидит на выдаче.
В каком порядке расположить снимки
Первым ставьте внешний вид, затем салон, затем багажник и детали. Так галерея повторяет путь человека: сначала «нравится ли машина», потом «поместимся ли мы». Для всех автомобилей порядок должен быть одинаковым, иначе при сравнении двух карточек клиент будет искать нужный кадр заново.
Не делайте галерею на Flash: она не откроется на iPad и iPhone, а доля мобильных посетителей растёт. Надёжнее обычные картинки и скрипт, который при клике показывает увеличенную версию, а без скрипта просто открывает файл. Миниатюры под главным фото должны быть кликабельными, а у списка снимков должны быть видны стрелки «вперёд» и «назад».
Как подписать снимки и назвать файлы
Подпись под кадром отвечает на вопрос «что здесь показано и что это значит для арендатора». Фраза «Багажник, сиденья сложены, длинные предметы помещаются» полезнее, чем «Фото 5». Подписи нужны не к каждому снимку, а к тем, где есть что пояснить.
В атрибут alt вписывайте краткое описание: «Skoda Octavia, салон, вид на переднюю панель». Он помогает посетителям с отключёнными картинками и пользователям программ экранного доступа. Имена файлов тоже стоит делать понятными: octavia-salon-front.jpg вместо IMG_0457.jpg. Обещать позиции в поиске это не может, но порядок в файлах сильно облегчает вам же работу с каталогом.
Размер и вес файлов: чтобы каталог не тормозил
Фотография с камеры весит несколько мегабайт, и если выложить её как есть, страница с десятком машин будет грузиться очень долго, особенно через мобильный интернет. Подготовьте для каждого кадра три версии:
- миниатюра для списка и ленты под галереей, например 120×80 пикселей;
- средний размер для карточки, например 600–800 пикселей по ширине;
- увеличенная версия для просмотра по клику, которую загружают только по запросу.
Сохраняйте фотографии в JPEG с умеренным сжатием и сравнивайте результат на глаз: в салоне артефакты заметны на плавных переходах. Размеры картинок указывайте в коде страницы, чтобы текст не «прыгал» при загрузке. В списке автомобилей оставляйте только миниатюры, а не уменьшенные в браузере большие файлы.
Пример фрагмента карточки автомобиля
Условная страница «Skoda Octavia, 2010, механика». Заголовок и ключевые параметры: класс, коробка, объём багажника, число мест, условия залога указываются текстом. Ниже или справа находится галерея:
- главное фото 700×467 с подписью «Skoda Octavia, вид спереди»;
- под ним шесть миниатюр: сбоку, сзади, передняя панель, задний диван, багажник, детское кресло;
- под багажником подпись «Объём багажника — по данным производителя, см. характеристики»;
- строка «Фото конкретного автомобиля сделаны в марте» или «Фото модели, цвет может отличаться»;
- рядом с галереей кнопка «Проверить даты» — клиент не уходит с карточки.
Важно, чтобы кнопка бронирования была видна на экране одновременно с главным фото, а не оказывалась ниже трёх экранов.
Проверочный список перед публикацией
- У каждой машины есть единый набор кадров в одном порядке.
- Указано, снят ли конкретный экземпляр или модель вообще.
- Главный кадр одинаково кадрирован у всех автомобилей каталога.
- Галерея работает без Flash и открывается на планшете.
- В списке используются миниатюры, большие файлы грузятся только по клику.
- У файлов понятные имена, у снимков заполнен alt.
- Устаревшие фото удалены после смены комплектации, номеров или состояния салона.
- Страницу проверили на медленном соединении и на экране телефона.
