Canon Bootstrap

Summary

UX Patterns consist of UI Components that have been arranged and combined into templatized views. Our patterns and widgets have been tested and tweaked for optimal usability and to meet user needs. These patterns accelerate design and development processes by providing a framework for most interactions in an application.

How do I use UX patterns?

Different roles benefit in different ways:

  • UX Designers use patterns to ensure consistency and accelerate decision making when designing application workflows.
  • Interaction Designers can grab markup from patterns to facilitate rapid prototyping.
  • Front-End Developers can reference components that make up each pattern and know exactly what is needed to build views.
  • Back-End Developers can reference UX patterns to help inform the construction of back-end logic based on standard workflows.

The hub and spoke nav model here describes a flat, simple application architecture. Our model uses three main page types:

Actions are kept in context on these pages by way of the popover component. Building your application to follow this model will help users keep a consistent mental picture of the application structure and ensure they accomplish their goals quickly and intuitively.

How it works

  • Each large "hub" is related to a UX Pattern (details below on this page)
  • Each "spoke" coming off a hub represents a UI Component within the pattern
  • Use List Views as navigational hubs and for managing and assessing many items
  • Use the Detail View to present item details and show child items with their own set of actions and details
  • Use the Create View when items have complex configuration settings or need a help section to guide users through the creation process

Adherence Rating: 2

Content

Markup

<div>Coming soon...</div>

List View

Though extremely useful as a navigational hub, the real power of list views is that you can use them to do these three things:

  1. Quickly find items
  2. Easily assess item health
  3. Perform actions without drilling down

Complex Components:

Simple Components:

Adherence Rating: 3

Content

Markup

<div>Coming soon...</div>

Create View

Use this pattern to create a single item or product. The content of the Create View can be broken into 3 main parts:

  1. The Create Form allows you to break workflows into sections:
    1. Configure the product
    2. Select important options
    3. Add related items
  2. The Right Sidebar contains help text and links about best practices and next steps for further use or configuration.
  3. The Back link points to the list view you came from.

Complex Components:

Simple Components:

Adherence Rating: 3

Content

Markup

<div>Coming soon...</div>

Detail View

Use this pattern for details about a single item or product. The content of a detail view can be broken into 3 main parts:

  1. The Details Component summarizes the product or item you are viewing. Combine with the components listed below for navigation, status details, and embedded actions.
  2. The Right Sidebar contains help text and links about managing the product in view.
  3. The Back Link points to the list view you came from.

Complex Components:

Simple Components:

Adherence Rating: 3

Content

Markup

<div>Coming soon...</div>