Design mockups: OF2 with improved clarity

OmniFocus OmniFocus for Mac
#1

I care about OmniFocus since it’s a massive part of organizing my life. That’s why it was really sad to see that my great, 28 year old eyes got tired and dizzy while trying to look at OF2. It’s all various shades of faded black and I just felt drained of all will to live while staring myself blind at the drab, gray lists.

I’ve been passionate about design for nearly two decades and have some suggestions on how to increase content separation, visibility and also reducing the disorienting eye scanning of the default indentation.

Before:

Screen Shot 2014-04-08 at 10.07.02 PM.png1382×834 198 KB

After:

rexof2.png1382×834 196 KB

Here’s one that’s reducing the ridiculous amount of default indentation, to give a tighter, less disjointed and less disorienting project overview:

rexof2-tighter.png1382×834 196 KB

Here are links to all 3 so that you can swap between them via your web tabs to get the full impact of the differences:

Before: http://discourse.omnigroup.com/uploads/default/232/983430aa4c43b7bb.png

After, still OF2’s default indentation level (which feels disjointed and requires disorienting eye-scanning to follow the broken-up threads): http://discourse.omnigroup.com/uploads/default/235/b5e2593f366305a8.png

After, tighter indentation than OF2’s default to reduce the amount of eye-movement needed and make it easier to follow: http://discourse.omnigroup.com/uploads/default/237/74f9b69b37241883.png

.
The OmniFocus 2 GUI itself is great in many ways. It just needs some love.

To summarize:

  • There’s no content-separation (and someone seems to have tried to combat the disorienting grayness by using ridiculous amounts of indentation in an effort to make it slightly clearer).
  • Waiting tasks are way too visible and distracting (needs more fading since they’re almost the same color as available tasks and easily mistaken for one).
  • Next-tasks aren’t shown in any particular way anymore (the pink was great)
  • Sub-projects haven’t got enough separation (indentation and bold is a good first step but not enough).
  • The sidebar on the left is really bright and flat.
  • The default indentation is totally overboard and causes the eyes to scan left-to-right too much which makes it feel disjointed and disorienting.

Luckily, that’s all cosmetic. OmniFocus 2 seems better than OF1 in every other facet!

.
Edit: PSD with adjustment layers available for Omni wizards and anyone else who wants to have a look:

http://www.speedyshare.com/zeTuF/download/OF2designv2-dark-psd.zip

(if that doesn’t work, try http://www.speedyshare.com/zeTuF/OF2designv2-dark-psd.zip and click the underlined filename at the top, not the “Download” link at the bottom since that’s an advertisement).

Feel free to take the file and contribute your own design ideas to this thread. It’s conveniently split into various adjustment layers and colors and contrast can therefore be tweaked quite easily. I stayed true to an OmniFocus-like color scheme in my design, but feel free to do whatever you want!

7 Likes
#2

That’s quite good. I love it.

I did think that the interface was a little too ‘bright’ for me (not that good if you’re accustomed to working late at night. Flux does help but so does interface design).

Having the darker bar on the left is not only good for readability, but creating a visual distinction between the various 6 areas.

2 Likes
#3

Thanks. There’s really only one pressing issue with OmniFocus 2, and that’s the lack of visual distinction between UI elements and between the list elements.

I don’t intend to make more mockups, since the only point I wanted to get across was to show how a UI with less disjointed indentation and more visual distinction could look.

But, just for you I made a dark version of the less-indented theme after wondering what a dark UI might possibly look like. Note that it’s way harder to recolor a white UI to a dark one in photoshop so this could look twice as good and have better looking and more consistent colors if I had better access to source graphics files.

And here’s the dark link for tabbed comparison: http://discourse.omnigroup.com/uploads/default/242/649018fa0d2aad65.png

The PSD download links are available and updated for the dark theme in the 1st post, so that people can play around if they want to.

Also: To everybody clicking that Like button, thank you, however I’m pretty sure it helps more if you provide feedback for Omni in the thread.

#4

This is similar to what I’ve posted here: Are custom fonts/colors/styling in the outline view supported? [Supported in v2.5]

I like what you did to the toolbar with the lighter grey and the light black for the sidebar. It is much cleaner and more modern looking than the current “Windows NT grey”. I would, however, additionally use a lighter grey for the second sidebar and completely remove the statusbar at the bottom. It looks much more modern and cleaner compared to the current OF2 design.

Here is my dark theme I’ve posted a couple of days ago (I would use a lighter black for the sidebar like the one above):

#5

Yep, it’s just not me who thinks the sidebar needs a lot more depth.

[quote=“enigma2k, post:4, topic:934”]I like what you did to the toolbar with the lighter grey and the light black for the sidebar. It is much cleaner and more modern looking than the current “Windows NT grey”. I would, however, additionally use a lighter grey for the second sidebar and completely remove the statusbar at the bottom. It looks much more modern and cleaner compared to the current OF2 design.
[/quote]

Thanks. “Windows NT Gray” is a nice description. With all of the flatness and grayness, I did feel like I’d been transported back in time.

As for your feedback about the lighter toolbar around the top of the OF2 window, that was actually an accident. I used Cmd+Shift+4 and then Space to get the “window capture” tool in OS X, and did the capture with the OmniFocus window unfocused/in the background. I didn’t even notice it until now, I was so busy looking at the content area the whole time so it didn’t even occur to me.

The default toolbar color you’re speaking of is deeply built into OS X and difficult for programmers to override (and it’s also a bad idea to go against the user’s expected OS X window look). Here’s a list of what Omni Group can change, since these are all based on their own custom rendering viewport:

  • The leftmost sidebar (the buttons to switch areas).
  • The leftmost sidebar’s main area (the one with the project list).
  • The task outline in the center of the window.

If you feel like it, check the bottom of the first post and download the PSD and tweak away at those things. The PSD file is there to allow others to make design tests if they want to, and you’ve got ideas.

So try them out! ;-)

#6

I didn’t mean the dark version that you did for “savantier”. This is something that is just too depressing and not main-stream so it is fine if Omnigroup stays away from it. :)

I think it is a MUST that Omnigroup at least tweaks the sidebar so it gets more depth and separation from the main window. The grey sidebar is just horrible as it is right now and looks very dated. Omnigroup wanted to take design clues from iOS 7 but this Windows NT grey has nothing to so with iOS7.

#7

Not sure it needs the major indentation in your designs, but the few flashes of colour really highlight the need to bring back styles. A little colour makes it so much easier to focus on what to do. The coloured circles just don’t do it.

#8

[quote=“enigma2k, post:6, topic:934, full:true”]I think it is a MUST that Omnigroup at least tweaks the sidebar so it gets more depth and separation from the main window. The grey sidebar is just horrible as it is right now and looks very dated. Omnigroup wanted to take design clues from iOS 7 but this Windows NT grey has nothing to so with iOS7.
[/quote]

I disagree. I would rephrase that: “I think it is a MUST that Omni Group at least tweaks the main task list so that you have comfortable depth and separation between projects, subprojects, tasks, next tasks, waiting tasks, etc.”

I don’t care as much about the left-most sidebar. The extra UI depth thanks to the darker inactive sidebar buttons is just a really nice bonus, but it’s by no means something that matters.

I’m going to be staring at a tasklist 99% of the time, and I can’t use the current OF2 list since it’s extremely uncomfortable. It makes me completely blind thanks to the “it’s all just shades of faded black” monotone grayscale, which seriously gets in the way of easily and quickly showing me my next tasks, inactive/waiting tasks, projects, etc.

That’s the #1 issue with the UI: The critical data-list of the entire program is just a big textwall of shades of gray. Anything else that could be improved about the UI is secondary to the list that we will be staring at all day every day.

#9

Thanks for the support for bringing back colors! However, you’re mistaking the order of those two pictures. The major indentation that you dislike is Omni Group’s current value, which is absolutely over the top. It creates a broken, disjointed, disorienting “zig-zag” pattern for the eyes when reading through the list. That is why I also made a version which brought the indentation closer together to create a tighter and more cohesive reading experience:

Before (OF2 default): http://discourse.omnigroup.com/uploads/default/232/983430aa4c43b7bb.png

After (colorized for content separation and clarity): http://discourse.omnigroup.com/uploads/default/235/b5e2593f366305a8.png

After, tighter indentation (me reducing the default amount of indentation used by OF2): http://discourse.omnigroup.com/uploads/default/237/74f9b69b37241883.png

That is the most important takeaway point here.

A little bit of tasteful shading and a few more colors, and some tighter indentation, and voila, the UI suddenly helps the user to Omni- FOCUS (see what I did there?) on the tasks instead of just blinding the user with a huge wall of unmanageable grayscale text.

#12

Excellent work, slight recommendation – when you have something new (in terms of both image and prose), could you do it in a reply to the thread as opposed to an update to the original post?

I understand that people look at the original post when browsing threads first, but it is good to track the progression of the discussion this way.

#13

Yeah. I wanted to make sure everything was accessible in one easy location, but I took your advice and moved down the dark screenshot to the post it belonged to, since it was detracting from the clear, serious GUI in the 1st post. The dark one was just a fun throwaway test.

#14

I’ve got to leave now. If anyone saw my screenshots, you’ll no doubt have noticed the “Moving” project that was highlighted. I’m moving to a different country and I don’t have time to stay on this forum any longer.

My mission here has been accomplished: Showing people what an OmniFocus 2 GUI with clearer content separation would look like. Scrolling through the default GUI’s long list of black-and-white text makes it very difficult to visually know when to stop scrolling. It’s bad for general overview and clarity. With a few tasteful dashes of color, things can be made clear and beautiful. That’s the message here.

It’s ultimately up to you guys to email OFpreview@omnigroup.com with your feedback. I’ve done my part, and have even provided PSD files in the 1st post in case anyone wants to have a look at how this was done, or make their own variations.

This is in your hands now. So long and thanks for all the fish! I’m movin’! ;-)

#15

I agree. The current Omnifocus interface is very drab and the different sections run together too much. Even with Things, they’ve got some color in there to make it a bit easier on the eyes. I find OF 1 more distinctive and easier to use because of the color distinctions. OF2 is just WAY too bland. At least give the user the opportunity to add some colors of their own to different elements of the screen, so if you want to change the Inbox, Projects Contexts bar to dark grey, have at it! Make an app that the user can make their own, and so they will want to use it. If you need some inspiration, look at Todoist on the web. Clean UI, nice use of color, and very easy to look at and work with.