Minimal Graphics

Things uses graphics sparingly, using a limited number of simple icons in carefully chosen locations to guide the eye and suggest meaning. Icons are used to label primary lists on the Home screen, for example, but not for individual to-do items themselves. This gives lists visual weight as top-level containers.

Jürgen: If you overuse icons, users will stop paying attention to them, and you've only added visual clutter. On the other hand, if you use icons in specific places while omitting them in others, you can use them to communicate the difference of certain parts of your interface. It's important not to use icons just to add visual candy. You should use them only to communicate meaning. (Of course, as long as you succeed at that, it doesn't hurt to make them beautiful as well!)

When you navigate to the detail screen for a to-do, for example, you'll see items both with and without icons. All the items that show secondary information about the to-do—notes, tags, and so on—have icons describing each type of info. The action buttons below the info fields, however, have no icons. This has two advantages: first, the title and notes fields both use text and the icons help the user distinguish them from one another. Second, by using centered blue text instead in the buttons instead of icons, we tell the user that they are fundamentally different from the info fields. It's easy to figure out which elements are part of the to-do item and which parts are buttons for action.

An early sketch (left) for the task detail screen included icons to differentiate descriptive data for the task, and the final design (right) further distinguished the buttons at screen bottom.
An early sketch (left) for the task detail screen included icons to differentiate descriptive data for the task, and the final design (right) further distinguished the buttons at screen bottom.

Figure 4-23. An early sketch (left) for the task detail screen included icons to differentiate descriptive data for the task, and the final design (right) further distinguished the buttons at screen bottom.