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

У экрана вождения одно правило: у водителя около секунды на взгляд, и за эту секунду следующий поворот должен читаться. Первый черновик ниже прячет поворот в предложение размером 11 px в зелёной плашке, а потом окружает дорогу семнадцатью элементами управления, рекламой и четырьмя метками на карте. В нём есть все функции, которые только может захотеть водитель, и ни одну из них невозможно прочитать на скорости.

Исправление сохраняет все функции. Оно делает следующий поворот самым крупным элементом на экране и убирает с дороги всё, что не касается ближайшей минуты.

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

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

Исправлено

Слева инструкция превращена в предложение. Водителю приходится читать «In 400 ft turn right onto 16th St, then continue for 0.2 mi and turn left onto Mission St» шрифтом 11 px, пока машина едет. Маршрут это тонкая линия в 4 px, машина это точка в 13 px, а реклама кофе и четыре метки спорят с дорогой за внимание. Панель вкладок занимает низ экрана, хотя за рулём никто вкладки не переключает.

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

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

Правка 1: превратите предложение в одну крупную инструкцию

До

После

Тонкая зелёная плашка с одной строкой мелкого текста, называющей два поворота, и рядом зелёная карточка с большой стрелкой поворота, «400 ft» и «16th St» и маленьким чипом «Then» со стрелкой налево, прикреплённым под её левым краем.

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

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

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

Правка 2: оставьте на карте две кнопки

До

После

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

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

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

Правило на будущее: чем меньше элементов можно нажать на ходу, тем меньше нажатий случается.

Правка 3: нарисуйте ограничение скорости как знак

До

После

Маленькая рамка с надписью LIMIT 25 и тёмный круг с надписью 23 mph, поставленные друг на друга у левого края карты, и рядом один белый чип со знаком ограничения скорости с надписью SPEED LIMIT и крупным 25, рядом с крупным 23 и маленьким mph.

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

Исправление рисует настоящий знак 48 на 60 pt с рамкой 2 px и числом 26 pt и ставит рядом текущую скорость 32 pt. Два числа бок о бок отвечают на один вопрос: не превышаю ли я? Для этого хватает взгляда, читать не нужно.

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

Правка 4: сократите поездку до того, что вы проверяете

До

После

Строка 10 px «18 min (4.2 mi), Arrive 9:59 AM, Fastest route, Light traffic» над пятью одинаковыми кнопками: Exit, Steps, Share, Search и Add Stop, и рядом белая панель с «18 min» крупным зелёным шрифтом, под ним 4.2 mi и 9:59 AM, красная кнопка End и шеврон.

Во время поездки водитель проверяет три вещи: сколько осталось, как далеко и когда я приеду. В черновике они лежат в строке 10 px вместе ещё с двумя фактами, а потом добавлены пять одинаковых кнопок с подписями 9 px капсом, так что «Exit», которая завершает поездку, выглядит так же, как «Share».

Исправление ставит оставшееся время 24 pt зелёным, под ним расстояние и прибытие и одну красную таблетку End. Красную, потому что завершение поездки это единственное действие, у которого есть цена. Steps, Share, Search и Add Stop уходят за шеврон, в одно касание от пассажира.

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

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

• Вторая карта. У исправленного экрана своя карта, обрезанная шире, с машиной низко на экране, так что маршрут уходит вверх и прочь от машины и показывает дорогу впереди, а не ту, что уже проехана.
• Чистая обводка. У маршрута белая обводка 14 px под синей линией 9 px, поэтому он читается и на жёлтых дорогах, и на серых кварталах.
• Без панели вкладок. Пять вкладок убраны с экрана вождения. Drive, Explore, Saved, Trips и Profile нужны, когда машина стоит.
• Одна форма кнопок. Только круги, 40 pt, чтобы цели для нажатия выглядели как цели.

Проверьте свой экран вождения

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

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

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

Редизайн навигации при вождении, до и после

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

Открыть в Figma

FAQ

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

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

Насколько крупной должна быть инструкция поворота в приложении для вождения?

Достаточно крупной, чтобы читаться с одного взгляда: в этом редизайне стрелка 52 pt, а расстояние 28 pt. Однострочное предложение в 11 px нужно читать, а у водителя нет времени читать.

Сколько кнопок должно быть на экране карты во время вождения?

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

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

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

Зачем убирать панель вкладок с экрана навигации?

За рулём никто не переключает вкладки, а панель отнимает место и внимание у дороги. Она возвращается, когда поездка заканчивается.

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

Красной, и это должен быть единственный красный на экране. Завершение поездки это единственное действие, у которого есть цена, поэтому оно получает единственный предупреждающий цвет.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение Waymark вымышленное, а 23 mph, ограничение 25, 18 min, 4.2 mi и 9:59 AM иллюстративны и одинаковы с обеих сторон.
• Маршрут проходит по реальным улицам района Mission в Сан-Франциско: Valencia St, 16th St и Mission St. Данные карты: OpenStreetMap contributors.
• Иконки: Phosphor Icons (MIT).
• Впервые опубликовано как карусель в App Brainy.