DON'T
Don't change the page title as users interact with page contents
Powerful functionality and rich data are of limited value if they cannot effectively be consumed by their audiences. That's why presenting application content with great clarity is a crucial part of user experience design. This page describes how to structure the elements of your UIs to conform to a logical and effective information architecture.
Information architecture is the practice of organizing and describing content to maximize comprehension. Getting this right requires thinking about the top-level navigation of your application, the presentation of each individual field or control, and everything in between.
When designing each new interface, make sure that your choices allow users to accomplish their tasks with ease. Specifically, visitors to a page should find it intuitive to:
Use prominent titles to identify the content of each page. Be concise, but specific. For example:
A separate title may not be needed if the selected site page title adequately describes the purpose of the page.
Page titles should remain constant. Avoid changing the title to reflect user selections made on the page.
DON'T
Don't change the page title as users interact with page contents
DO
Keep the page title consistent even as page contents update
It should also be easy for users to tell where the current page is situated within a network of related pages, with clear navigation options to jump to those other interfaces.
A back navigation link reminds viewers that they're looking at the details of a selected item and provides an obvious way to return to the full list of items
Breadcrumbs describe the current page's position within a logical hierarchy of items. Breadcrumb links make it easy to jump to other parts of the same hierarchy.
While the simplest pages may only need to be described by a single title, many pages feature a varied collection of content and controls which benefit from structured organization.
Take time to explicitly define the structure of what you plan to show on each page: How many organizational levels will be required? Which groups should be children of which parent sections? Which groups are siblings of each other?
Select appropriate interface components to clearly express the page structure. Users should be able to easily identify and understand the organizational hierarchy. When selecting interface components to structure the information on a page, keep in mind that section labels, box labels, and rich text headers are more accessible than rich text items.
DO
Use a consistent and intuitive set of visual styles to represent the content structure of pages
In the example interface above, the hierarchy is expressed, in order, as follows:
DON'T
Don't make it hard for users to understand the structure of pages. Avoid layouts that create ambiguity and confusion.
In this example:
Users may find it difficult to consume pages with a lot of uniformly-presented content.
DON'T
Visual differentiation helps to reinforce separation of content groupings within a page, helping users to quickly scan for and understand the most important parts. Differentiate content by varying:
DO
This dashboard uses restrained differences in styling to make it easier for viewers to understand the content. Key performance indicator cards at the top of the page use large numbers and icons to highlight important values. Green and red text colors are used to supplement numeric values to make it easy to spot performance trends. User photos make it easier to scan for a particular person and also break up the visual uniformity of the data grid.
Avoid creating an unnecessary amount of visual differentiation as that results in clutter and reduces ease of comprehension.
DON'T
Don't use a wide range of colors to differentiate content, particularly when the colors won't have obvious meaning to viewers. The result could look cluttered and garish.
DONT
Don't use the same layout to represent different concepts on the same page. In this example interface, card layouts are used to demarcate content sections, act as selection toggles, and represent section header bars. The inconsistency and visual clutter make it hard for users to navigate the page.