Lines Matching full:navigation
1 page.title=Providing Descendant and Lateral Navigation
2 parent.title=Designing Effective Navigation
8 next.title=Providing Ancestral and Temporal Navigation
37 <p>One way of providing access to the full range of an application's screens is to expose hierarchical navigation. In this lesson we discuss <em>descendant navigation</em>, allowing users to descend 'down' a screen hierarchy into a child screen, and <em>lateral navigation</em>, allowing users to access sibling screens.</p>
40 <img src="{@docRoot}images/training/app-navigation-descendant-lateral-desc.png"
41 alt="Descendant and lateral navigation" id="figure-desc">
43 <p class="img-caption"><strong>Figure 1.</strong> Descendant and lateral navigation.</p>
49 <img src="{@docRoot}images/training/app-navigation-descendant-lateral-children.png"
55 <p>Descendant and lateral navigation can be provided using lists, tabs, and other user interface patterns. <em>User interface patterns</em>, much like software design patterns, are generalized, common solutions to recurring interaction design problems. We explore a few common lateral navigation patterns in the sections below.</p>
66 <p>For section-related screens, offering touchable and keyboard-focusable targets in the parent is generally the most straightforward and familiar kind of touch-based navigation interface. Examples of such targets include buttons, fixed-size list views, or text links, although the latter is not an ideal UI (user interface) element for touch-based navigation. Upon selecting one of these targets, the child screen is opened, replacing the current context (screen) entirely. Buttons and other simple targets are rarely used for representing items in a collection.</p>
69 <img src="{@docRoot}images/training/app-navigation-descendant-lateral-buttons.png"
70 alt="Example button-based navigation interface with relevant screen map excerpt. Also shows dashboard pattern discussed below." id="figure-buttons">
72 <p class="img-caption"><strong>Figure 3.</strong> Example button-based navigation interface with relevant screen map excerpt. Also shows dashboard pattern discussed below.</p>
92 <img src="{@docRoot}images/training/app-navigation-descendant-lateral-lists.png"
93 alt="Example list-, grid-, and carousel-based navigation interfaces with relevant screen map excerpt" id="figure-lists">
95 <p class="img-caption"><strong>Figure 4.</strong> Example list-, grid-, and carousel-based navigation interfaces with relevant screen map excerpt.</p>
98 <p>There are several issues with this pattern. Deep, list-based navigation, known as <em>drill-down list navigation</em>, where lists lead to more lists which lead to even more lists, is often inefficient and cumbersome. The number of touches required to access a piece of content with this kind of navigation is generally very high, leading to a poor user experience—especially for users on-the-go.</p>
111 <p>Using tabs is a very popular solution for lateral navigation. This pattern allows grouping of sibling screens, in that the tab content container in the parent screen can embed child screens that otherwise would be entirely separate contexts. Tabs are most appropriate for small sets (4 or fewer) of section-related screens.</p>
114 <img src="{@docRoot}images/training/app-navigation-descendant-lateral-tabs.png"
115 alt="Example phone and tablet tab-based navigation interfaces with relevant screen map excerpt" id="figure-tabs">
117 <p class="img-caption"><strong>Figure 5.</strong> Example phone and tablet tab-based navigation interfaces with relevant screen map excerpt.</p>
126 of tab navigation such as using a drop-down list in the Action Bar (<a
131 <p>There are some obvious immediate benefits of tabs over simpler list- and button-based navigation:</p>
149 <p>Another popular lateral navigation pattern is horizontal paging, also referred to as swipe views. This pattern applies best to collection-related sibling screens, such as a list of categories (world, business, technology, and health stories). Like tabs, this pattern also allows grouping screens in that the parent presents the contents of child screens embedded within its own layout.</p>
152 <img src="{@docRoot}images/training/app-navigation-descendant-lateral-paging.png"
153 alt="Example horizontal paging navigation interface with relevant screen map excerpt" id="figure-paging">
155 <p class="img-caption"><strong>Figure 6.</strong> Example horizontal paging navigation interface with relevant screen map excerpt.</p>
158 <p>In a horizontal paging UI, a single child screen (referred to as a <em>page</em> here) is presented one at a time. Users are able to navigate to sibling screens by touching and dragging the screen horizontally in the direction of the desired adjacent page. This gestural interaction is often complemented by another UI element indicating the current page and available pages, to aid discoverability and provide more context to the user. This practice is especially necessary when using this pattern for lateral navigation of section-related sibling screens. Examples of such elements include tick marks, scrolling labels, and tabs.</p>
161 <img src="{@docRoot}images/training/app-navigation-descendant-lateral-paging-companion.png"
