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

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

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

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

Исправлено

Слева карта завалена кнопками, а шторка превращена в форму. Справа карта снова просто карта, а в шторке одно поле, четыре строки и четыре сервиса. Карта к тому же стала ниже, с 380 px до 270 px, так что важная шторка начинается выше.

Исправление 1: две кнопки на карте

До

После

Шесть кнопок четырёх форм и баннер против меню и кнопки геолокации.

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

В исправлении остаются две кнопки по 44 px: меню и геолокация. Круг поиска был вторым входом в тот же поиск, который уже есть в шторке. Баннер переехал в шторку и стал одной строкой.

Слоёв, пробок и блока зума на этом экране нет, и этот редизайн не рисует, где они живут, так что в реальном приложении им нужен дом. Для щипка пальцами по карте две кнопки не нужны.

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

Исправление 2: один вопрос вместо двух полей

До

После

Два поля адреса и кнопка обмена против одного поля, которое спрашивает «Куда».

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

Исправление спрашивает «Куда?» в поле высотой 52 px. Справа стоит чип «Сейчас», где живёт время: кто хочет поехать позже, меняет его, а все остальные его даже не читают. Кнопка обмена исчезла вместе с полем посадки.

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

Исправление 3: четыре сервиса в одном стиле

До

После

Шесть сервисов на шести цветах против четырёх на одном сером с одним зелёным.

Когда у каждого сервиса свой цвет, цвет перестаёт что-либо значить. Шесть плиток черновика зелёная, оранжевая, синяя, фиолетовая, розовая и голубая, каждая иконка повторяет цвет своей плитки, а текст 9 to 12 px. Ничто в этом ряду не подсказывает, какой сервис пассажир обычно выбирает.

Исправление рисует четыре сервиса, «Поездка», «Доставка», «Заказ заранее» и «Аренда», как крупные плитки на одном мягком сером фоне с иконками фирменного зелёного, #16A34A. Они достаточно широкие, чтобы и попасть пальцем, и сразу прочитать. Мото и XL на этом главном экране нет, и это компромисс, который редизайн не скрывает, потому что не рисует, куда они переехали.

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

Исправление 4: сохранённые места строками, с адресом

До

После

Чипы без адресов и две длинные строки недавних мест против строк с названием, адресом и областью касания.

Чип «Дом» говорит пассажиру, куда он едет, только если тот ему доверяет. Чипы черновика не показывают адрес, а недавние под ними это длинные строки вроде «Ferry Building, The Embarcadero, San Francisco, CA 94111», написанные до почтового индекса 12 px шрифтом.

Исправление превращает каждое место в строку: иконка, название жирным и короткий адрес под ним, «Дом, 24 Hayes St». Ferry Building это недавнее место, под ним «The Embarcadero», а город и индекс убраны, потому что пассажир и так в этом городе. Скидка 30% стала четвёртой строкой, с зелёной меткой и «Код NEWRIDE» под ней, того же размера, что и места.

Предложение никуда не делось. Оно просто больше не кричит поверх карты.

Правило на будущее: ярлык должен показывать, куда он ведёт, а промо может быть строкой.

Мелкие исправления

• Один левый край. Шторка в черновике использовала 14 px слева и 12 px справа. В исправлении по 20 px с обеих сторон.
• Один акцент. Черновик использовал жёлтый для баннера, зелёный для кнопки геолокации и шесть оттенков для сервисов. Исправление использует фирменный зелёный для активной вкладки, иконок сервисов и метки предложения, а для остального серый.
• Настоящая типографская шкала. Текст вырос с 9 to 12 px до размеров iOS 13 to 17 pt.
• Четыре вкладки, а не пять. «Главная», «Поездки», «Кошелёк», «Предложения» и «Аккаунт» стали «Главная», «Активность», «Кошелёк» и «Аккаунт». «Предложений» больше нет, потому что предложение теперь строка на главной.
• Карта короче. Карта стала с 380 px до 270 px в высоту, так что вопрос расположен выше.

Проведите аудит своего приложения такси

Скачайте файл Figma

В бесплатном файле оба экрана как компоненты, каждое исправление в виде пары до и после, переменные цветов и текстовые стили iOS.

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

Главный экран приложения такси, до и после

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

Открыть в Figma

FAQ

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

Карту с двумя кнопками, одно поле «Куда?» и несколько ярлыков под ним. Сервисы, сохранённые места и предложения место в шторке, а не на карте.

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

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

Как спроектировать поле поиска «Куда»?

Сделайте одно крупное поле с вопросом внутри и чипом «Сейчас» справа для времени. Не спрашивайте сначала место посадки, если карта уже показывает, где находится человек.

Как приложению такси показывать сервисы вроде Ride, XL и Package?

В одном стиле, крупными плитками, с иконками фирменного цвета. На главном экране помещаются четыре, остальным нужно своё место.

Как показывать промокоды в приложении такси?

Одной строкой в том же стиле, что и места, с коротким заголовком и кодом под ним. Баннер на карте закрывает то, что пассажиры пришли читать.

Какой размер шрифта использовать в приложении такси?

Шкалу текста платформы. Исправленный экран использует размеры iOS от 13 до 17 pt и кнопки карты по 44 px.

Источники

• Оба экрана наши собственные, нарисованы и измерены в Figma. Карта это наш собственный векторный рисунок улиц, парка и ручья. Ferry Building и Oracle Park это общедоступные достопримечательности Сан-Франциско; адреса дома и работы выдуманы. Без фотографий.
• Apple Human Interface Guidelines: Typography, для размеров текста iOS, использованных в исправленном экране.
• Apple Human Interface Guidelines: Accessibility, для размера области касания 44 pt.
• Впервые опубликовано как карусель в App Brainy.