Skip to Content Skip to Navigation

User Experience Toolkit

Button Regions

Placement of buttons/functions should normally follow the region patterns below.

screen shot of add button

Regions

  1. Page Functions (primary): Normally reserved for the user's final actions on the page.
  2. Page Functions (secondary): Email, print and other non-final step page level actions. These are normally supplementary and may not be frequently used.
  3. Back Button: The back button should be able to be avoided in many situations, but when necessary should be located in the lower left. The left side location mirrors the browser's back button location and also keeps it from being mixed in with primary page functions.
  4. Block Functions (primary): If a block level function should be prominent and conspicuous - it can be located at the above left of a block. Buttons to add items to a table or list use this region.
  5. Block Functions (secondary): Secondary block functions are similar to page level secondary functions but pertain only to a specific block.
  6. Row Functions: Secondary block functions are similar to page level secondary functions but pertain only to a specific block.
  7. Block Functions (within component): Sometimes it is necessary to place block level functions within a block (i.e. within tabs or expandables). The lower right (terminal) area of the block's location are recommended for such functions.
  8. Contextual Functions: Functions that are related specifically to a certain value or atomic section of the interface should be placed as close to their related output.

Thanks for the feedback! It will help us improve your experience.