Holehan’s Patterns

About

Settings Patterns


(:toc Pattern Overview:)

The Scanning Labels pattern is work in progress.
Discuss? or login to edit Scanning Labels!

Scanning Labels

Summary

Labels can be best scanned if they are right aligned.

Illustration


Right Aligned Labels


Context

Your settings page consists of various settings lined up from top to bottom. Each setting is accompanied with a label. You are now looking for a way to combine both setting and label. For users distinguishing the labels from each other should be quick. Connecting labels with accompanying settings should be reliable and error-free.

Problem and Forces

Aligning labels can be done in three ways:

  • A top aligned label is just above the repective setting. This offers the best connection betwen label and setting. However, scanning is a little bit slower. Top aligned labels take a lot space.
  • Left aligned labels make scanning easy. However with labels of different length, the connection between label and setting becomes more and more difficult.
  • Right aligned labels are ending directly at the beginning of the settings widget. This offers the best connection between label and setting. The label lenght is growing to the left side of the widget. Scanning times are slightly slower.

Examples


Opera Label Placement

Keynote right aligned labels


Solution

Right align labels. Studies have shown this offers the best compromise between reading labels and connecting them with the respective setings.

Rationale

Code Snippets

Show Code Example

[Get Code]
  1. #include <iostream.h>
  2.  
  3. main()
  4. {
  5.     cout << "Hello World!";
  6.     return 0;
  7. }

Related Patterns

Group Settings

Literature

Categories: Settings

· Login