Designing the UI of Things for iPhone

We recently shared some early interface sketches of Things for a presentation on iPhone User Interface Design.

You can also visit the official product pages for Things for iPhone and Things for Mac.

To-Do List

Out of curiosity, we tried to recreate the look of the Mac version in some early Photoshop mockups.

It looked nice but it didn't feel right. Here's a sketch of what we did instead ...

... and the final screenshot.

Toolbar or Tab Bar?

One of the first major design decisions was to either have a Tab Bar or a Toolbar.

We liked the idea of a Tab Bar very much as it allowed to quickly browse your tasks from different perspectives (by Projects, by Tags, by Due Date, Search, ...)

But we soon realized that we definitely needed a toolbar. In order to manipulate the current list, the user needs a set of tools (Create New To-Do, Mark For Today List, Move To-Do, ...) And we wanted these tools to be easily accessible in the toolbar.

We also found that we would have needed more than 5 tabs. So some of them would have been hidden inside the "..."-tab.

The final sketch for the home screen with a Toolbar instead of a Tab Bar:

An early screenshot (using the icons of the Mac version):

The final screenshot (new icons):

Quick Entry

A very early sketch:

This is a sketch of the Quick Entry as we implemented it in the 1.0 release ...

... and a screenshot.

Our original Quick Entry dialog of the 1.0 release wasn't very "quick". Tapping on the "+" in the toolbar brought up the Quick Entry dialog, but you couldn't start typing right away. You still had to tap on the title.

So we went back to the drawing board. We tried to find a solution where the user could start typing right away, but the additional details (due date, tags, notes) were not hidden behind the keyboard.

Another approach:

This is how we implemented it for the 1.1 update:

After tapping on the details button:

Today Toggle Mode

We deemed it very important that the user is able to quickly mark multiple to-dos for the Today list. So we came up with a Today Toggle Mode (similar to the default Edit mode).

Sketch:

Final Screenshot (due items are always in the Today list, so they cannot be un-marked. We show this with the red color):

Detail View

Final Screenshot:

What we like about this design:
- Clear separation between To-Do data and action buttons.
- No accidental editing possible if you only want to view the data (you have to tap on Edit first).
- Easier differentiation between list and detail views through the use of the plain and the grouped table style, respectively.

Some more pictures