Settings Editor

MacOS system preferences

What

Provide an easy-to-find, self-contained page or window where users can change settings, preferences, or properties. Divide the content into separate tabs or pages, if you need to manage large numbers of settings.

Use when

You are designing any of the following applications or tools, or something similar:

  • An application that has app-wide preferences.
  • An operating system, mobile device, or platform that has system-wide preferences.
  • A site or app for which a user must sign in—users will need to edit their accounts and profiles.
  • An open-ended tool to create documents or other complex work products. Users may need to change the properties of a document, an object within a document, or some other item.
  • A product configurator, which allows people to customize a product online. (This is really a different pattern, however, with slightly different requirements and constraints. See the Product Configurator pattern at Welie.com.)

Why

Though both use forms, a Settings Editor is distinct from a Wizard, and it has very particular requirements. A user must be able to find and edit a desired property without being forced to walk through a prescribed sequence of steps—random access is important. To aid findability, the properties should be grouped into categories that are well labeled and make immediate sense.

Another important aspect of Settings Editor design is that people will use it for viewing existing settings, not just changing them. The design needs to communicate the values of those settings at a glance.

Experienced users have strong expectations for preference editors, account settings, and user profiles being in familiar places and behaving in familiar ways. Break these expectations at your own peril!

How

First, make it findable. Most platforms, both mobile and desktop, have a standard place to find application-wide preferences—follow the conventions, and don’t try to be overly clever. Likewise, websites where people sign in usually put links to account settings and profiles where the username is shown, often in the upper-right or -left corner.

Second, group the properties into pages, and give those pages names that make it easy to guess what’s on them. (Sometimes all the properties or settings fit on one page, but not often.) Card-sorting exercises with representative users can help you figure out the categories and their names. An outrageously large number of properties may require a three- or four-level hierarchy of groups, but be careful that users don’t get frustrated at having to click 53 times to reach commonly needed properties.

Third, decide how to present these pages. Tabs, Two-Panel Selector, and One-Window Drilldown with an extensive page “menu” on the top page seem to be the most common layouts for Settings Editors.

The design of the forms themselves deserves an entire chapter. See Chapter 8 for patterns and techniques used in forms.

Finally, should you immediately apply changes that the user makes, or offer Save and Cancel buttons? That may depend on the type of settings you’re working with. Platform-wide settings seem to be applied immediately when changed; settings on websites mostly use Save buttons; and application settings and preferences can go either way. It may not be a huge usability issue in any case. Follow an established convention if there is one, or see what the underlying technology requires; test it with users if you still have open questions.

Examples

Windows 7 offers the “outrageously large number of properties” that require a deep hierarchy of pages. The three screenshots below illustrate the journey from the top of the Settings Editor down to the page that lets you change the desktop theme. (There’s one more level, too—if you want to change the desktop icons or some other obscure thing, you need to launch a dialog from a link on the last screen.)

Windows 7 system settings editor

Yahoo! and Facebook both use tabs to present the pages of their profile editors. The Yahoo! example is actually two-level; see the tabs across the top.

Yahoo! profile settings

Facebook profile settings

Amazon has one single link for all account-related information: “Your Account” (below). This Menu Page (Chapter 3) lists account settings alongside order information, credit card management, digital content, and even community and wish-list activity. The clean, tight page organization is terrific—if I have any questions about what’s going on with my relationship to Amazon, I know I can find it somewhere on this page. (Contrast this to Facebook, which habitually obscures certain profile information behind complicated design.)

Amazon account settings