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 dialpad
1. Dialpad
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 example
Selecting the Settings control (as shown here) on the app bar opens an overlay that allows users to modify app settings. The Search control brings up an overlay with a keyboard and search bar. Closing the search or settings overlays returns users to their prior location in the app.
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
App controls spatial model
Selecting a contact’s link from a top-level contact view opens the next level down with more detail

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, horizontal orientation
Initial view of the dialpad
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