DUOLABS
Work

Tablet-ready navigation

We extended a phone navigation app so that one app runs on both phones and tablets. The tablet case we designed for was a tablet mounted in the car and used as the navigation unit. Since the screen is read while driving, simply enlarging the phone layout would make guidance harder to read and controls clumsier, so we designed a structure that keeps shared features in one place and manages each device's screen differences separately. The work ran from the app structure to the tablet screens and support for different resolutions.

Launch
2012
Client
A navigation software company
Type
Vehicle & Navigation
01 / 04

Shared features in one place, screen differences split by device

We designed the app structure so that a single navigation app supports both phones and tablets. Shared features such as route search and guidance stay as they are, and only the screen layouts that differ by device are managed separately. A feature fix is made in one place, while each screen can still be tuned to its device's size.

Shared features in one place, screen differences split by device
02 / 04

A tablet layout that gives the map, guidance, nearby info, and controls more room

The tablet navigation screen is laid out in four parts: the map, route guidance, nearby information, and the control area. Rather than stretching the phone screen, we rebuilt each of the four areas to be wider and easier to read on the larger surface. How much room each area gets was decided around a tablet used as the navigation unit inside the car.

A tablet layout that gives the map, guidance, nearby info, and controls more room
03 / 04

In-car screen rules set so a quick glance while driving is enough

A tablet navigator sits in the car and is read while driving, so legibility and ease of operation came first. Drivers cannot look at the screen for long, so guidance text and distances have to be readable at a glance. We also tuned the screens so that operations finish in a few taps.

In-car screen rules set so a quick glance while driving is enough
04 / 04

Maps and guidance that hold steady across sizes and resolutions

Phones and tablets differ in screen size and resolution, so a single layout used as-is makes the map and guidance look misaligned. We adjusted the screen structure for each device's size and resolution so that the map and guidance screens display reliably on any of them. This work widened the base of the earlier phone version to a larger screen, and it carried into the next version that supports several devices together.

Maps and guidance that hold steady across sizes and resolutions

Highlights

01

One app structure that serves both phones and tablets

02

A tablet screen with wider map, route guidance, nearby info, and control areas

03

Support for each device's screen size and resolution

Insights

Read the blog