Разбираем интерфейс сервиса «Гараж» в приложениях авто-классифайдов

Привет, это дизайн-команда Noknok Digital, мы делаем дизайн интерфейсов для продуктовых компаний. Сейчас мы много работаем с автомобильной тематикой и хотим поделиться разбором сервиса «Гараж» в приложениях Авито, Авто.Ру и Дром.

Это большой функциональный раздел, который давно есть в приложениях классифайдов, но почему он то редко встречается в приложениях автодилеров.

Этот сервис может повысить ценность для пользователей и увеличить ретеншн. Рассмотрим лучшие практики у компаний, которые давно его развивают.

Местоположение сервиса зависит от специализации приложения. Например, он может быть доступен как на главном экране, так и спрятан за несколькими уровнями меню.

Рассмотрим, где находится сервис в популярных авто-классифайдах.

Авто.ру

У Авто.ру нет привычного личного кабинета внутри навигационной панели. Вместо этого они используют бургер-меню, внутри которого есть множество функций, в том числе и «Гараж». Превью сервиса никак не выделяется на фоне других функций.

Авито

«Гараж» находится в профиле пользователя. Чтобы попасть туда, нужно открыть личный кабинет через навигационную панель и проскроллить вниз. Все сервисы и внутренние продукты оформлены списком, поэтому тут «Гараж» тоже ничем не выделяется.

Дром

Чтобы открыть сервис, нужно тоже перейти в личный кабинет. В приложении Дрома на блоке «Гараж» сделан акцент — он больше, по сравнению с превью других услуг и сервисов.

Рассмотрим, как можно добавить автомобиль в сервис в каждом из классифайдов.

Авто.ру

Поставить машину в «Гараж» можно двумя способами: ввести автомобильный номер или ввести / отсканировать VIN. Оба флоу достаточно простые и состоят из несколько шагов.

Авто.ру — Добавление по автомобильному номеру

При выборе опции появляется поле, которое стилизовано под автомобильные номера. Это нативно помогает пользователю понять, куда и что вводить.

После отправки формы на валидацию появляется приятная анимация загрузки, которая отвечает контексту сценария: мы ждем, пока наш авто найдут в справочнике.

Эта анимация — одна из многих микровзаимодействий в приложении, которая сильно влияет на лояльность. Не знаю, как все, но от таких анимаций и мелких деталей я суперсильно кайфую.

Когда авто найден, выводятся его данные, чтобы пользователь проверил — точно ли это его машина.

Если машину не удалось найти, вы увидите экран ошибки. Удобно, что при этом сразу предлагаются альтернативные варианты решения задачи. Ведь каждому хочется получить пояснения, почему авто не нашлось, и что на это могло повлиять.

Авто.ру — Добавление по VIN автомобиля

Если выбрать эту опцию, откроется форма с единственным полем ввода.

Внутри него есть аккуратная иконка, которая позволяет отсканировать СТС и не вводить ничего вручную. При сканировании СТС появится приятная анимация, которая попросит перевернуть телефон.

При добавлении авто есть классные фичи — это добавление «бывшей» машины и «мечты». Это не только забавно выглядит, но и полезно — можно отслеживать появляющиеся предложения по автомобилю мечты.

Авито — Добавление по автомобильному номеру

В «Гараже» Авито есть одно поле для ввода — либо автомобильного номера, либо VIN. Если вы пока не добавили сюда авто, вместо раздела «Гараж» Авито будет показывать только небольшое описание сервиса.

После ввода номера ждем, пока наша тачка найдется. Если все ок, то мы увидим экран, на котором можно убедиться, правильный ли номер мы ввели. Подтвердив, что это наш автомобиль, мы попадаем внутрь самого раздела.

Авито — Добавление по VIN автомобиля

Добавление по VIN работает также как Авто.ру, но если автомобиль не найден, то можно добавить его вручную.

Дром — Добавление по автомобильному номеру

На Дроме так же можно добавить свою машину, введя автомобильный номер или отсканировав СТС. При клике на раздел «Гараж» мы сразу попадаем на красивый стилизованный инпут.

Во время ввода номера открывается специальная клавиатура — в зависимости от типа вводимых данных там блокируются ненужные символы. Это отлично закрывает боль опечаткок — например, быстро вводя символы, вы не спутаете цифру 0 и букву О. Я часто нажимаю ненужные кнопки при добавлении авто в «Гараж» Авито, поэтому я выражаю большой респект дизайнерам Дрома, которые смогли выжать максимум функциональности из такого просто действия.

Дром — Добавление по VIN автомобиля

Внизу расположена кнопка, которая открывает второй способ добавления тачки — через сканирование СТС. Тут тоже все просто: открывается экран камеры, и нужно поместить СТС в красную рамку, которая становится зеленой, если все сделано правильно. Также можно загрузить фото СТС, чтобы считать информацию.

Указав автомобильный номер или отсканировав СТС, мы попадаем на экран заполнения данных автомобиля (как на Авто.ру). Мы можем пока пропустить этот шаг или сразу заполнить данные.

Функционал карточек во всех приложениях похож, но у каждого есть свои фишки, в зависимости от специализации продукта

Авто.ру — Основная информация об автомобиле

На первом экране находится краткая информация об автомобиле (марка, модель, госномер ) + его фото. Есть возможность отредактировать данные, добавить информацию (например, пробег), установить свое фото и даже записать панораму. Если потом создать объявление о продаже этого авто, то туда подтянутся эти данные.

Авто.ру — Ремонт и обслуживание

В разделе находится каталог дилеров, к которым можно записаться для обслуживания автомобиля. Тут же есть возможность отправить заявку на ОСАГО или КАСКО со скидкой от сервиса.

Ниже расположен блок с акциями и скидками на автотовары, размещенные в Яндекс.Маркете. Товары выводятся без привязки к марке вашего авто.

Авто.ру — Оценка и продажа авто

При указании пробега появляется оценка авто. На превью отображается краткая информация о диапазоне цен и сроках самостоятельной продажи, а по клику на раздел открывается подробная оценка с указанием факторов, влияющих на цену, графиком изменения цен в объявлениях и вариантами продажи.

Кнопка «Продать» формирует объявление о продаже вашего авто, куда переносятся внесенные данные о машине. Перенос можно сделать из раздела с оценкой авто или из дополнительного меню. Продажа доступна в двух вариантах: самостоятельно или с помощью специалистов Авто.ру.

Авто.ру — Интеграции с сервисами

Приложение интегрировано с такими сервисами, как Яндекс.Сплит, Яндекс.Маркет, Госуслуги, ГИБДД и другими партнерами.

Благодаря интеграции с Госуслугами права на автомобиль и СТС доступны в виде QR‑кода. Актуальные данные загружаются из базы ГИБДД, при необходимости есть возможность оформить ДТП по Европротоколу.

Также партнеры Авто.ру предоставляют акции на свои товары и услуги: так, можно получить скидку на КАСКО и ОСАГО, выгодно закупиться на Яндекс.Маркете и воспользоваться другими уникальными предложениями от партнеров.

Авто.ру — Дополнительная информация об автомобиле

В гараже есть еще ряд интересных функций: бортжурнал с возможностью прочитать и написать что-то про свой авто, рейтинг автомобилей с их плюсами и минусами, блог со статьями по автотематике, калькулятор транспортного налога.

В общем, функций много, но пользоваться ими не очень удобно. Так, часть информации в бортжурнале и статьях иногда повторяется. А если добавлено несколько автомобилей, то статьи выводятся по всем маркам вперемешку.

В сервисе есть данные об отзывных кампаний марки и возможность получать оповещения, если они появились. Информация здесь максимально полная, со ссылкой на источник.

Авто.ру — самое функциональное из всех приложений в этой выборке, но из-за этого возникает ощущение чрезмерности информации. Например, здесь часть дублируются блоки с одними и теми же данными, которые удлиняют карточку гаража, но при этом новой информации в себе не несут.

Обилие сервисов, баннеров с акциями и кнопок вызывает «баннерную слепоту» и, как следствие, важную информацию можно просто не заметить. Например, баннер «Отчет Авто.ру в подарок!» встречается два раза с разницей в один экран. А буквально через несколько экранов отчет уже предлагают купить, а не получить бесплатно. У пользователей, которые невнимательно вчитываются в текст (а таких много) такая информация может вызвать противоречие.

При этом хочется отметить приятный UI, и то, что большинство функций все-таки несут пользу.

Авито — Основная информация об автомобиле

На первом экране дана краткая информация об автомобиле: марка, модель, VIN, фото автомобиля, отчет Автотеки и срок действия полиса ОСАГО. При этом нет возможности изменить параметры автомобиля, добавить свое фото или несколько авто.

Авито — Ремонт и обслуживание

Авито выводит промоблоки с предложениями по продаже деталей и услуг, а при переходе по ним срабатывает фильтр по данным нашего авто, и мы получаем выдачу релевантных объявлений из других разделов Авито.

Авито — Оценка и продажа авто

Автоматической оценки здесь нет, и продать авто прямо из раздела «Гараж» не получится — объявление придется создавать отдельно.

Авито — Интеграции с сервисами

Если у вас есть ОСАГО, информация по страховке сразу же будет здесь показана. Также у вас будет возможность продлить полис по лучшим ценам с помощью сервиса Сравни.ру.

Авито интегрировано со своим же сервисом Автотека, который предоставляет отчет об авто.

Авито — Дополнительная информация об автомобиле

Есть информация об отзывных компаниях, и из-за того, что в карточке не так много информации, этот блок хорошо заметен. Данные о компаниях даются в общем виде, без ссылок на источники. Пуши о появлении новой информации тоже настроить нельзя.

Блок с отзывными компаниями есть во всех трех приложениях, но я сразу заметила его только в «Гараже» Авито — благодаря тому, что интерфейс там чистый и не нагруженный баннерами. Однако наиболее полную информацию я нашла уже на Авто.ру — со ссылкой на источник и списком VIN, участвующих в отзывной компании.

Авито — Выводы по карточке авто

У «Гаража» Авито меньше функций, по сравнению с Авто.ру и Дромом — например, нет кнопки «Продать авто» и оценки стоимости. Упор в приложении сделан на подбор авто и переход по объявлениям внутри самого Авито. Даже кнопка «Найти запчасти» — фиксированная на всей странице. Но интерфейс здесь чистый и не нагруженный, как в других приложениях.

Дром — Основная информация об автомобиле

Первый экран показывает информацию об автомобиле: марку, модель, год, автомобильный номер. Также можно указать дополнительную информацию и установить фото автомобиля. Поддерживается добавление нескольких авто.

У Дрома есть фича отслеживания расходов на авто по разным категориям: топливо, ТО, мойка, парковка, шины и др. Можно вносить и анализировать свои траты по конкретному автомобилю.

Дром — Ремонт и обслуживание

На Дроме есть каталог автозапчастей, и в карточке автомобиля выводится объявления, релевантные для данной модели.

Дром — Оценка и продажа авто

Как и на Авто.ру, здесь есть функция оценки авто, но тут она более ограничена — указывается примерная цена с отметкой о том, что оценка дается для автомобиля в нормальном состоянии. Для некоторых автомобилей есть график с динамикой изменения цены.

Есть возможность опубликовать объявление о продаже авто напрямую из «Гаража». Но отсутствуют бесплатные предложения от специалистов Дрома по продаже авто — как, например, на Авто.ру.

Дром — Интеграции с сервисами

Данные об ОСАГО подгружаются автоматически, если они есть. Также приложение интегрировано с сервисом Дром.ОСАГО, где можно выбрать лучшее предложение от страховых компаний.

Дром — Дополнительная информация об автомобиле

Есть еще ряд интересных функций — например, при указании комплектации подгружается объем топливного бака, расход и вид топлива. Удобно, что эта информация всегда под рукой. Удобно, что в «Гараже» отображаются штрафы, если они есть. Так же, как и в Авто.ру, здесь можно рассчитать транспортный налог.

В рубрике «Вопросы и ответы» можно почитать информацию и отзывы о конкретной модели, а также узнать ее плюсы и минусы. В Дроме статьи не создают хаоса — как, например, на Авто.ру — а наоборот, дополняют информацию благодаря тому, что все блоки логично следуют друг за другом и не дублируются.

Дром — Выводы по карточке авто

Карточка авто в «Гараже» Дрома создает впечатление, что продакты и дизайнеры, в первую очередь, думали о пользователе. Нет ощущения навязывания услуг, и можно легко отслеживать информацию о своей машине без раздражающей рекламной информации.

В каждом приложении сервис «Гараж» обладает своими плюсами и минусами — в зависимости от того, какие функции выполняет сам классифайд.

Если вам интересна тема UX и интерфейсов, заходите в наш телеграм-канал, где мы проводим регулярные разборы. А чтобы заказать UX/UI аудит или дизайн интерфейса, пишите в ТГ @julanova