One of the most-requested features for Todo.txt Touch for Android is a homescreen widget that displays top priority tasks. Android widgets are subject to a set of even stricter visual and functional constraints than full-screen apps, so getting this feature right has been a challenge. Your smartphone’s homescreen is meaningful, precious real estate, and this app’s widget should treat it that way.
Visual design has never been my strength, so I decided to do this in public and learn from conversations and critiques along the way. On a late night last fall I dove into the widget’s design, posting screenshots to Google+ as I went, and iterating based on the critiques and suggestions I got in the comments for each. This is a summary of the progression of that process.
First, our requirements. In priority order, the Todo.txt Android homescreen widget should:
- Display a user’s top 3 prioritized tasks from todo.txt.
- Offer the ability to launch the fullscreen app.
- Offer the ability to quickly add a new task from the widget.
- Clearly communicate which app the widget is associated with, i.e., include some sort of Todo.txt branding.
Two important things to know: While 2.2 (Froyo) is shown in the screenshots, Todo.txt Touch’s target SDK is Android 1.6 (Donut). I approached this using Foursquare’s large widget as an example of good widget design.
Alpha 1
This was the first “it’s ugly but it it works” implementation, which essentially reuses the fullscreen app’s main interface.
Pros: Tasks are listed in priority order, with the right priority letter colors. The Add Task (+) button works. The widget is legible given any kind of wallpaper image, and the rounded corners and background color treatment make it look like the very useful Power Control widget.
Cons: The application logo and title take up way too much space. There’s too much unused space next to the + button. The + button also gets lost in the header, and doesn’t look like a tap target.
Alpha 2
Take two…
Pros: The application title no longer takes up an ungodly amount of space, and it no longer swallows up the the Add Task (+) button. Tasks appear at the top of the widget, flush with the top border, which gives them more visual priority.
Cons: If you read left to right, the application icon is the first thing you see when you look at this widget, which is not our priority. The most important information in this widget is not the application branding or UI, but the contents of the todo.txt itself. Lots of unused negative space here, especially at the bottom.
Beta 1
Cooking with gas…
Pros: The top 3 items in the todo.txt are the first thing you see when you look at this widget. It has all the functionality it needs (launcher, branding, add task) while prioritizing the user’s data over all else.
Cons: There’s still a whole lot of unused space between the application icon and the Add Task (+) button. The widget has even more unused space if a user’s tasks are not a certain length. The icon and the Add Task (+) button are unbalanced, size-wise.
Beta 2
Something worth testing on my actual phone…
Pros: All those of Beta 1, except the icon and Add Task (+) button are the same size and aligned, which is less consternating, visually.
Cons: After using this widget on my phone with my actual todo.txt for four months… Damn this is a big widget. Like the large Foursquare widget, you can’t fit much more on the screen this widget appears on. Also, with short tasks, there’s lots of wasted space. Wasted space annoys me, because it’s a disrespectful use of my precious homescreen real estate.
Release Candidate 1
Size matters…
Pros: Takes up a lot less space on the screen, and uses the space within the widget itself more efficiently. No matter how long or short a task is, it will appear the same in this layout. Cutting off every task at the same point with the ellipsis gives each equal visual weight but still achieves the widget’s information display goal; it’s still obvious what each task is about. Lengthy tasks don’t show up as busy wrapping walls of text.
Cons: The font here is small and may affect legibility. The tap targets are also small—perhaps too small. The + button doesn’t look enough like a button. The background color feels dark and depressing.
While I think this version is good enough for v1 release, there’s still more work to do. Users should have the ability to choose a light, dark, or transparent background for this widget, depending on their preference and wallpaper choice, and perhaps even a portrait layout. Those are on the roadmap.
In the meantime, a new release of Todo.txt Touch for Android, finally with a homescreen widget, will be available some time next week is available now.
