Visual Design for Productivity
— How small changes made a big difference
As an design experiment, I made CSS modifications to my favourite task manager app — Toodledo. The results were illuminating.
Where Am I??
Every website needs to help the user find their bearings with navigation cues.
Top Level Navigation
Toodledo has a three level content hierarchy (seen left to right):
- Seven ribbon tabs
- A sidebar list
- Main task pane
Here’s the sidebar (before):
It often takes me a second look to discern which icon is selected.
Using a color accent solves that problem:
Next, the ribbon also doesn’t have labels. But lucky for us, the breadcrumb bar DOES include the name of the selected icon. Unlucky for us, however, no one sees it, thanks in part to banner blindness:
Lucky again for us, though, a simple splash of color is enough of a hint:
Visual Hierarchy
Looking at the whole page, the content looks flat and overwhelming (before):
After:
Key changes:
- more distinct sidebar selection (white on light blue instead of white on whitesmoke-ish)
- use color to visually separate sidebar and main task pane
- A more dominant task title (using font weight and dimmed font color for secondary fiends “Folder”, “Tag”, etc)
- use color (blue vs. black font) instead of value (grey vs black background) to distinguish row section dividers from task titles so they don’t compete for for visual dominance in the hierarchy.
With these changes, I’m no longer half lost every time I switch pages. Where I am in the content hierarchy is now viscerally clear.
Furthermore, focus is not taken away from the task titles. This leads to our next topic…
Faster Scanning of Tasks
The most frequently used function of a task manager is the reading and review of the task lists. After all, tasks lists are made in the first place so that we can come back later and select something else from them. In other words, we write each list once and read it later multiple times. Therefore, that list better be easy for our eyes to scan.
As we saw above, dimming the secondary task fields (Folder, Tag, Due Date, etc) helps the user find the task title:
But let’s also take a closer look at the font used to display the task:
The current task title font is Arial.
Not bad, but we can do better.
A font with more unique letter shapes should make unique words more recognizable, thus accelerating visual scanning.
After:
This is the font Crete Round.
Try it yourself. These two task lists are styled differently but identical in content. See if one is easier to read:
Did one perform better than the other? The latter did for me.
It seems minuscule at first — fractions of a second saved during the handful of times a a person reads their task lists each day. But if you consider the unconscious resistance to lists that are hard to read, leading to ineffective reminders and tasks not completed, the effects start to become real.
Subtle, but cumulative.
A Different Authoring Experience
The majority of what we type at the computer is either
- communicating to someone else (e.g. writing emails, Medium articles, etc), OR
- communicating to software (e.g. typing a Google search, typing our shipping address, etc).
Authoring a task is the rare, third kind of communication: communicating with ourselves. This is makes it a more personal experience.
Let’s also assume what you’re writing is important, here (otherwise, you wouldn’t bother writing a task reminder in the first place, right?).
So how can we convey that via design?
Again, we look to typography.
Among other things, fonts are chosen for their personality and tone. Since each user has their own unique tone and personality, then to some extent, the font choice is a matter of personal preference. But let’s agree the font should at least be:
- different from that of the rest of the app
- a reminder to the user that what they’re writing is more important than what they usually type.
Take a look at these two prompts:
Doesn’t the latter evoke more thoughtfulness? As if we’re writing something important and personal?
Not surprisingly, the same goes for later displaying the task:
Which of these above do you think will motivate me more to call Ralph and share the good news? The former looks like the subject line of an email, but the latter looks more like a handcrafted message.
Again, I think font choice for task titles is a matter of personal preference, so I advocate for letting the user choose a custom font. I personally like Crete Round, so that’s what’s shown above.
Conclusion
All these little changes started to add up. To my pleasant surprise, I found myself getting more done, enjoying the process more than before, and giving more attention to the tasks that needed it. In the end, that’s what I most want from my productivity apps.
The CSS is live and usable as a Stylish skin. There are other improvements beyond what I mentioned above.
You can apply the skin and view the raw CSS here: Toodledo Lightskin.
Screenshots. Unskinned & Skinned:
