Дизайн приложения для аренды авто: редизайн главного экрана аренды, до и после

У приложения аренды на главном экране одна задача: довести человека до машины, которую он хочет. В первом черновике ниже есть всё, что нужно водителю, но он открывается формой из пяти полей, кричит «скидка 25%» в баннере, который указывает в никуда, а машины оставляет напоследок, размером 100 на 60 пикселей с характеристиками шрифтом 8 px.

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

Весь экран, до и после

Черновик джуниора

Исправлено

Слева машины самое маленькое, что есть на экране. Прежде чем водитель увидит хоть одну, ему приходится миновать пять полей формы, чекбокс, кнопку, баннер и три выпадающих списка. Каждая машина это миниатюра 100 на 60 с характеристиками 8 px и кнопкой BOOK.

Справа экран читается в том порядке, в котором водитель принимает решение: где, какого типа, какая машина. Поиск это одно поле 48 px, фото машин 350 на 190, а текст от 13 до 18 px против 8-15 px в черновике.

Что изменилось, в цифрах

Правка 1: сверните форму в одно поле

До

После

Форма «Найти авто напрокат» с местом получения, местом возврата, датой получения, датой возврата, чекбоксом возраста водителя со ссылкой «Изменить», оранжевой кнопкой «Искать авто» и строкой мелкого шрифта. Против одного скруглённого поля: лупа, «Получение в SFO» и «8 до 10 нояб.» у правого края.

Черновик просит водителя заполнить форму, прежде чем показать хоть одну машину. Большинство ответов уже известны: возврат там же, где получение, возраст 25+, даты в эти выходные. Но форма всё равно спрашивает всё это с одинаковым весом, так что единственное, что водитель должен решить, получает не больше внимания, чем четыре поля, которых он не коснётся.

Исправленный экран оставляет два важных ответа, где и когда, и кладёт их в одно поле. Тот же приём использует Uber в поле пункта назначения. Нажмите на него, и откроется шторка с возвратом, временем возврата и возрастом водителя, так что ничего не удалено, а лишь перенесено на один тап дальше.

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

Правка 2: поставьте акцию на реальную машину

До

После

Оранжевый баннер на всю ширину: СКИДКИ ДО 25% В ЭТИ ВЫХОДНЫЕ!!! со звёздочкой «*действуют условия» справа. Против высокой карточки машины: плашка «25%» на фото, Sport Coupe, 2 места и автомат, $89/день и зачёркнутые $119.

Баннер «скидки до 25%» не говорит, на что именно. Водителю приходится листать и гадать, к какой машине это относится, а три восклицательных знака и «действуют условия» шрифтом 10 px читаются скорее как предупреждение, чем как предложение.

На исправленном экране скидка сидит на той машине, к которой относится. Маленькая плашка на фото говорит «25%», а в строке цены $89/день и рядом старые $119. $119 минус 25% это $89,25, так что цифра честная, а у акции наконец есть что продавать. Turo делает так же, с акцией на самой карточке, а не над ней.

Правило на вынос: у акции должен быть объект. Привяжите её к тому, на что скидка.

Правка 3: замените три выпадающих списка одним рядом

До

После

Три одинаковых выпадающих списка «Тип», «Цена» и «Места», у каждого стрелка. Против одного ряда чипов-таблеток: «Все» выбрано чёрным, затем «Электро», «Внедорожник», «Купе» и «Кабриолет», уходящие за правый край.

Выпадающий список прячет варианты, пока по нему не нажмут, так что водителю надо открыть «Тип», чтобы узнать, что есть электро, внедорожники и купе. А три списка рядом придают «Цене» и «Местам» тот же вес, что и единственному фильтру, которым люди реально пользуются, типу машины.

Чипы показывают варианты без тапа. Выбранный чип залит чёрным, ряд листается, а последний чип обрезан краем экрана, что говорит водителю: есть ещё. «Цена» и «Места» никуда не делись, теперь они открываются из фильтров поля поиска.

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

Правка 4: дайте каждой машине фото на всю ширину

До

После

Четыре строки под заголовком «Популярные авто», у каждой фото 100 на 60, название, строка характеристик 8 px, цена и оранжевая кнопка BOOK. Против двух карточек на всю ширину: фото 350 на 190 с сердечком, затем название и цена в одной строке и одна строка деталей под ними.

Это и есть продукт, а черновик отдаёт ему меньше всего места. При 100 на 60 машина это цветное пятно. Строка характеристик упаковывает места, коробку, топливо, разгон до 100, страховку и рейтинг в 8 px, так что ничего не прочесть, а всё вместе конкурирует с ценой.

Исправленная карточка даёт машине фото 350 на 190 со скруглёнными углами и ставит название и цену за день в одну строку. Под ними одна строка деталей 13 px, места и коробка. Кнопки BOOK нет, потому что вся карточка и есть кнопка: нажмите, и на странице самой машины будут характеристики, рейтинги и «Забронировать».

Правило на вынос: список товаров это список фото. Всё, что не фото, не название и не цена, уходит на один тап глубже.

Мелкие правки

• Один фирменный цвет. Оранжевый (#FF5A1F) отмечает плашку «25%» и больше ничего. В черновике он на баннере, кнопке поиска, чекбоксе, ссылке «Изменить», четырёх кнопках BOOK и активной вкладке.
• Поля побольше. 20 px с обеих сторон вместо 14 слева и 12 справа, 14 между блоками.
• Спокойнее шапка. В черновике сердечко и колокольчик стоят рядом с логотипом. В исправленной шапке остался колокольчик, а сердечко теперь вкладка «Избранное».
• Плавающая панель вкладок. Четыре вкладки («Поиск», «Поездки», «Избранное», «Профиль») в плавающей панели 62 px, и третья машина уходит под неё, что говорит: страница продолжается.
• Один стиль значков. В панели черновика значки были вперемешку залитые и контурные, теперь все контурные.
• Названия под задачи. «Бронирования» стали «Поездками», а «Поиск» стал полем наверху.
• Вырезанный текст. «Авто недели» и строка про разгон исчезли, потому что ни то ни другое не помогало выбрать машину.

Проверьте своё приложение аренды

Получите файл Figma

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

Бесплатный файл Figma

Редизайн главного экрана аренды авто, до и после

Оба экрана и каждая часть как компонент Figma. Бесплатно, только просмотр, продублируйте к себе в черновики.

Открыть в Figma

FAQ

Как проектировать главный экран приложения аренды авто?

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

Сколько полей должно быть в поиске аренды авто?

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

Куда ставить скидку в аренде авто?

На ту машину, к которой она относится. Плашка на фото и старая цена, зачёркнутая рядом с новой, например $119 и $89/день, говорит водителю, что со скидкой и на сколько. Баннер, указывающий в никуда, так не умеет.

Типы авто лучше делать выпадающими списками или чипами?

Чипами, если вариантов около пяти. Листаемый ряд показывает «Все», «Электро», «Внедорожник», «Купе» и «Кабриолет» без тапа, а чип, обрезанный краем экрана, показывает, что есть ещё.

Какого размера должны быть фото машин в приложении аренды?

На всю ширину колонки, около 350 на 190 пикселей на телефоне. Миниатюра 100 на 60 превращает машину в цветное пятно, и водитель не может её оценить.

Источники

• Оба экрана наши, спроектированы и измерены в Figma. Приложение Torque, цены и характеристики выдуманы, марки и модели не названы. Макет следует Turo: белый фон, одно поле поиска и карточки машин на всю ширину с ценой под фото. Поиск в одно поле следует полю пункта назначения в Uber.
• $119 минус 25% это $89,25, показано как $89/день.
• Значки из Phosphor (MIT). Строка состояния нарисована по измеренному скриншоту реального iPhone.
• Фото с Pexels: Dextar Studio, Jae Park, miata7 MX-5, Furkan Ceylan и Can AGBULUT.
• Впервые опубликовано как карусель в App Brainy.