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.
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.
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):
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:
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):
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.
