Jump to: navigation, search

UX/PatternsLibrary

< UX
Revision as of 17:22, 15 June 2015 by Piet Kruithof (talk | contribs) (Horizon Visual Specification)

Horizon Visual Specification

The intent of this wiki is to provide overall guidelines for implementing patterns for Horizon.

Assumptions:

  • The patterns will assume that the dev is using angular.js.
  • The patterns are intended to provide some guidance, but will not be overly prescriptive.
  • Patterns should be vetted through the community before being included in this wiki.
  • Community members should feel comfortable adding/editing this document.

Components

Patterns

Details Panel

The Details panel contains detailed information for an object in Horizon and is typically opened by clicking on the object name from a list in a panel. For example, you would typically click on an instance name from the Instance panel to view specific details for that instance.

Overall, you would need a Details panel if there is too much information to easily fit within a row in a table. For example, an Instance includes a source, flavors, quotas, and networks; way too much stuff to fit into a single row. In addition, the details panel should allow users to take an Action on a object based on the information displayed in the Details panel. For example, a user should be able to update the flavor for a specific instance within the Instance details panel.


Instance Details Panel.png


Wizard Modal

The wizard is a specific kind of modal that is intended to guide users though relatively complex actions such as launching an instance. They typically have steps that must be completed before the user can complete steps later in the workflow.

You should fight the temptation to combine steps in the menu to the right and found that design became visually cluttered and confusing to users. In some ways, the UI is a compromise between accommodation first time users, who want some hand holding, and advanced users that want to complete the wizard quickly. There is also the argument that more advanced users will likely use the CLI for these kinds of Actions.

Wikipedia has a description of wizards here.


Wizard-redline.png

Simple Modal

Responsive Tables