Spatial model

This introduction to Dialer describes its main elements, the basic functions they provide, and the architecture that holds them together.

Detailed descriptions are provided in other sections. For a guide to these sections, consult the overview.

Anatomy

The Dialer UI includes 4 main types of views and various recurring elements, such as the app bar for providing primary navigation. These views and elements are described in the table below and shown in the sections that follow.

View type	Elements included	Displayed when...
Browsable contacts (Recents, Contacts, Favorites, and detail views)	App bar (or app header, in detail views) Browsable contact space (list, grid, or detail view)	The user is browsing contact and call information or placing a call to a contact
Dialpad	App bar Dialpad	The user is entering a phone number to place a call
In-call	In-call status screen Control bar	A call is in progress
App control (Search and Settings)	App header Search or settings overlay	The user is searching for a contact or adjusting app settings

Browsable contact views

Anatomy of the Dialer app — 1. App bar with primary navigation tabs and app controls
2. Browsable contact space

This is the default arrangement of the app bar and contact space. Depending on screen dimensions, primary navigation and app controls may be stacked, rather than kept in a single horizontal bar.

Dialpad and in-call views

Anatomy of In-call control bar — 1. In-call status screen
2. Control bar

App-control views (Search and Settings)

Anatomy of search — 1. App header / search bar
2. Search overlay

Anatomy of settings — 1. App header
2. Settings overlay

Primary navigation (app bar)

Primary app bar navigation consists of exposed tabs:

Dialer navigation switching tabs — Users can select the Recents, Contacts, or Favorites tabs on the app bar to navigate among these views of contacts. Users can also select Dialpad to place calls using the dialpad.

Spatial model of Dialer navigation — Selecting a tab on the app bar replaces the current view with a different top-level app view

App controls

App controls on the right side of the app bar provide access to in-app search and settings functions (represented by the magnifying-glass and gear icons, respectively).

App controls spatial model — When an app control is selected, it opens an overlay on top of the browsable content, and the app bar changes to an app header

Browsable content space

In the browsable contact space, users can scroll vertically through contacts and navigate through z-space into individual contact details, down one level of hierarchy.

Because navigating through multiple levels increases the driver’s cognitive load, in Dialer there are only two levels of contact: the primary level and contact details.

Navigating Dialer contacts — The top-level view of browsable contacts lets users select and call a contact – or navigate down a level, as shown here, to view contact details

Dialpad

Users can select the Dialpad tab to display a dialpad for placing a call. If a partially entered number uniquely corresponds to a phone number in contacts, the match is displayed and the user can place a call without having to enter the full number.

Dialpad tab portrait orientation with recognized contact — Dialpad with partially entered phone number, list of matching contacts, and call button

In-call status screen and control bar

When a user places or answers a call within Dialer, the in-call status screen displays the contact name, call status or duration, and an in-call control bar for call management.

Dialpad calling and control bar — When a call is placed but unanswered, the in-call status screen displays “Calling...”

In-call screen and control bar — When a call is answered, the in-call status screen displays the call’s duration