Page Types
Introduction
Page types illustrate likely arrangements of content and functionality that facilitate specific user tasks and can guide thinking about how to break down a complex user workflow across pages.
Page types can help you think about how to group and organize content and functionality to ensure that your users can find what they need, when they need it. Organizing the content and functionality across a series of pages and within pages in alignment to the steps your user is taking to complete their goals will make for a useful and usable product or service.
These page types aren’t intended to be exhaustive or prescriptive, instead page types are intentionally vague. The goal here is to facilitate thinking about how a page should be laid out and what components it should have. This collection of page types were created during the development of an enterprise application (the Kuali Student Information System) and therefore skew towards administrative functions. Your product or service may likely utilize different page types which are variations or combinations of those we present here.
Guiding Principles
- Be clear on a page’s purpose
- Ask yourself at each stage “what is the user trying to get done here/now?”
- Look at example page types that might match the purpose of your page.
- Consider what features of a page will support that task or goal.
- Guide the user — on each page have:
- A clear call to action
- A clear hierarchy — create a page structure using groups and headers to help users parse the page content
- A clear path through the page
- Clear feedback when action is taken
- Consider timing — Consider whether a user is completing a task or series of tasks in one sitting or over multiple sessions.
- Simplify the flow — Page types are a useful abstraction, but don’t lose sight of the higher level goals; consider:
- Are there places where steps can be eliminated?
- Does each page serve to aid the user in their goal?
Design Recommendations
Start Pages
Start pages are intended to suggest and facilitate paths to tasks and information deeper in the product or service hierarchy.
Purpose
- Understand where to start
- Understand what is possible/available
- Quickly find content, a function, or an object in the product or service
Typical Features
- Prominently featured search tool
- A hierarchy for browsing or drilling down
- Option to initiate one of many tasks
Search Page
Search pages support exploratory or targeted browsing of content or objects that lives in a product or service.
Purpose
- Find an object or collection of objects
- Enter criteria to return relevant records from a data set
- Unlike Manage pages, search results typically do not allow for bulk actions
Typical Features
- Parameter inputs (editable)
- Number of results
- Matching results
- Pagination
Variations
- Simple Search — A navigational search for an object using only one text input to perform the most likely kind of search, sacrificing control to minimize complexity for a user
- Advanced Search — A navigational search for content based on multiple criteria using more than one text input
- Faceted Search — A search whose results are filtered by selecting from categorized attributes contained within the result set
Item View Page
Item View pages present the details of an object or collection of objects, or items.
Purpose
View a read-only version of a data object
Typical Features
- Object type
- Object status
- For objects with many attributes, highlight or summary of the most important attributes
- Controls for manipulating the object (e.g. changing state, editing)
- Breadcrumbs which describe location in object hierarchy
Variations
- Quick View — A dialog containing a brief excerpt of a read-only record, used as a reference to help complete a larger task in the main view
- Multi-Page View — A read-only display of record with a large number of attributes and related data, divided by tabs or other navigation into segments visible one at a time
- Compare — A two-column read-only display of a record and a previous version or a peer record for side-by-side comparison
- Preview — A view of an object or collection that reveal the consequences of an action before the action is committed
Item Edit Page
Edit pages allow the updating of the data or details of an existing object or record. They may also allow creation of a new record or object.
Purpose
- Collect information to create a new record
- Change the details or data of an existing object
Typical Features
- Form fields
- Input validation
- One primary button & a way to abort changes
- Requiredness indication
- Disclosures masking additional inputs
Variations
- Quick Edit — A dialog containing a brief set of critical fields used to collect information to update an existing record, as an as-needed change to information visible in the main view.
- Multi-Page Edit — A long form distributed across multiple pages navigated using tabs or some other navigation mechanism (e.g. a wizard).
- In-place Edit — An entire page or section of a page or container that toggles between static information and editable fields without a page load.
Manage Page
Manage pages allow users to perform multiple or bulk actions on lists of one or more like entities.
Purpose
Perform bulk operations on a group of records or objects
Typical Features
- A command toolbar includes actions a user can take to affect one or more items in the group
- An optional detail panel includes read-only information about the group, to use as a reference to the bulk actions
- When applicable, each item in the list can include links to its own operations (e.g., Edit item, Delete item).
Confirm
Confirms are pages that are displayed after an action has been requested, but before it is initiated, to communicate the consequences of that action.
Purpose
Force an acknowledgement of the consequence of continuing an action
Typical Features
- Typically presented as a dialog
- Explanation of consequence
- Primary action button, with option to cancel
Variations
- Configurable Confirm — An editable form allowing the scope or configuration of a requested action to be changed before proceeding to initiate that action or process.