Files
openstack-manuals/doc/contributor-guide/source/ux-ui-guidelines/ui-text-guidelines/ui-panel-formatting.rst
Rodrigo Caballero 1d00f3ef16 Adds the UX Personas descriptions.
This User Experience personas are meant to help developers
identify the target audience for their work.
This is the first pass for the content.
The intent is to provide the general information for all five personas
in a consistent manner.

Additional content such as infographics, comparison tables, etc., will
be part of subsequent additions.

Partial-bug: #1603420

Change-Id: I8fa4e0de762b97f44137c2ea48c0a9ee5b8bc61a
Implements: blueprint ux-personas
Signed-off-by: Rodrigo Caballero <rodrigo.caballero.abraham@intel.com>
2016-07-25 10:28:57 -05:00

1.7 KiB

Use recommended UI panel formatting

It is important to use consistent style and placement for text and icons in the UI.

Workflow navigation text

Use default values for page or window title bars, side navigation, fonts, and text size. For example, tab titles must be a smaller text size than the section heading.

Similarly, the node item title must be a smaller font than the page or window title. If necessary, you might have to shorten the node item title in order to maintain the default width.

Note

The image below is not to scale. It is only intended as a reference for the various UI elements mentioned.

UI text cheat sheet

Icons

Be selective when deciding to use icons instead of text. It is often difficult for users to understand the intent of an icon. New icons should be thoroughly reviewed and tested by the user experience project. That said, icons can improve usability in specific instances.

For example:

  • You have limited space.

  • The icon is quickly recognizable.

    Note

    Consider global audiences and whether the icon is recognizable across cultural differences.

  • The icon enhances design appeal.

If you decide to use an icon, follow these tips:

  • Keep the design simple and consistent.
  • Keep the location of individual icons consistent. Users recognize and expect patterns which help to establish meaning and function.
  • Ensure the icon is quickly recognizable and memorable. For help, work with the UX project.
  • If there is space, consider adding a text label to the icon.