THE OMNI SHOW

Brent Simmons: You're listening to The Omni Show. Get to know the people and stories behind The Omni Group’s award winning productivity apps for Mac and iOS. Music!

[MUSIC PLAYS]

Brent: I'm your host, Brent Simmons. This is a special episode. OmniFocus 3 for Mac just shipped and we're celebrating. Woo! Yay!

Ken Case: Yay!

Joel Page: Ahhh...

Brent: Well, this is actually recorded in August, but you're hearing this on ship day. So, we're pretending. I'm sure that sounded like a pretend celebration. Anyway, we're also going to be talking about the updated, but still familiar, design in the Mac app.

Brent: In the studio with me today is Ken Case, CEO of The Omni Group, Dave Messent, OmniFocus Prime Minister, and Joel Page, user experience designer. Say hello, Ken.

Ken: Hello, Ken.

Brent: Say hello, Dave.

Dave Messent: Hello, Dave.

Brent: Say hello, Joel.

Joel: Hi.

Brent: You can't break my streak, man, you have to say, "Hello, Joel."

Joel: Hello, Joel.

Brent: Thank you! So we're shipping. I'm just so—

[Sound of a La Croix seltzer can opening]

Brent: Yes. Now we're shipping! Press the buttons. So it's actually pretty exciting. When you're actually hearing this, we are very excited and of course nervous in the office, because ship days are always nervous-making days too, but very exciting and fun days. And, of course we're all looking forward to a surprise game day at some point in the future. Or game half day or however that works.

Ken: Right now the actual ship day itself is going to be a surprise. We know that it's going to be in September. We know that it will be when Mojave launches, but we, of course, don't know when that will be. So, I guess people hearing this, when they hear this podcast, they'll know when it is.

Brent: Oh, that's true.

Dave: And we'll know in advance, we just don't know right now.

Ken: Right, yeah. We assume that Apple is going to tell us at least a few weeks in advance, like they have every other year.

Dave: Boy, I sure hope they do. I don't know if we'll ship the exact same day as Mojave, but we're trying to time it pretty closely.

Brent: Yeah, okay.

Joel: Doesn't Apple usually tell us like a day or two ... "Better submit your apps." Like that?

Ken: Yeah, they usually give us a week’s notice for iOS and a little more than that, maybe two weeks, for Mac. Sometimes a week and a half, it varies. Usually lately it's been a week and a half, so that's what we're guessing.

Dave: But a false sense of security could be a killer.

Ken: Yeah. So, we need to be ready to ship, sort of, any time in the month, and that's where we are.

Brent: And if you're listening, you know all the answers to the questions that we actually have at the moment. Lucky you. So we did a new design. How did this happen? What was the impetus? I mean, OmniFocus 2 ... I thought it was a pretty nice looking app. Well, we've gone and all made it look different and everything. What happened, Ken?

Ken: Well, I talked actually about this a little bit in the road map at the beginning of the year. That when we designed OmniFocus 2, we were designing that, echoing the design changes that Apple was making in iOS 7. So they were going for very thin text, much more spartan UI in general. They were moving — it was sort of a reaction to the skeuomorphic designs of iOS 6 and earlier. And they were looking for something that was much more clean and that would emphasize the user’s content. But along the way, we lost some of the affordances that you get around seeing the differences between icons, around the readability of text when it gets too thin for some people that ... it just made it hard for them to see. And Apple has backed away from that in the years since then. This is our chance I guess to just sort of follow suit.

Dave: That's right. And we did follow suit earlier in the year, in OmniFocus 3 for iOS. So, we kinda beefed up the icons a little bit and focused a little bit more on heavier text and little bit bolder design, heavier design. And we're now bringing that across on the Mac, where we previously had an app that was a lot of different shades of gray—

Brent: Many of them very nice.

Dave: Yeah. Very nice shades of gray. But we're definitely going a little bolder in OmniFocus 3 for Mac.

Brent: I heard the word “blobular” used, was that you, Joel?

Joel: Yeah. That's my pet description for the treatment of the icons and the iconography in both the iOS and the macOS app now. Solid instead of line art, and the elimination of sharp corners wherever possible. So, what used to be a rectangle is now a roundrect, that sort of thing. I find that these rounder shapes are more friendly, less intimidating, which I think is important for these ... some of our user base, for sure. And I was trying to think of a good way to describe it and… “globular” and “blobby” and… “blobular.”

Brent: Yeah. Alright. Yeah. So let's just go through different sections of the app and talk about the thinking. Maybe back up one step before that. Before you really started designing the individual sections, did you kind of start over from scratch or ...

Joel: Yes. That was the ... not a mandate but it was, "Why don't you start over from scratch?" So, my initial designs, months and months ago, were really quite a long ways away from OmniFocus 2. I wanted to distance the new look as much as possible, and then over time we wound up walking back certain elements, certain portions, to be more Mac-like, more OmniFocus-like and I hate to use the word “compromise,” but it's ... there's an inbetween and I'm not going to use the coasters this time for that one.

Brent: Dave, you used the metaphor in our pre-interview that it was kind of like we had a concept car, and then there's the car you actually drive.

Dave: Yeah. I don't know if any of the listeners are fans of concept cars, but that's certainly something that I was really into as a kid, reading the Boys' Life magazine with the cool concept cars, and that sort of thing. You see these concept cars get trotted out in magazines and at car shows, and they look like the car of the future, and they don't have steering wheels, or they don't have ... They look different from the cars you see on the road in almost every way. But, there's certain things about a car that just have to be there. And so, when these concept cars actually make it into production, you find that they're a little less radical than they looked on stage.

Joel: Sure. “Radical.” That's a very ... you know, months ago Grayson described my initial designs as being “opinionated,” which they were. But, radical, I like that quite a bit.

Dave: So, just like pedestrian safety standards dictate the way you can shape a bumper on a car, macOS dictates the way you can have a toolbar or not have a toolbar on a window, and what happens when a toolbar-less window goes full screen and expects to have a toolbar that drops down from the top of the window. Those are the sorts of things you run into when you start prototyping the more radical designs.

Brent: So, the toolbar, let's start there. That's, as I recall in the concept car version, the toolbar was super light gray or even totally white?

Joel: The very first designs, it wasn't even there. I was looking at say, an app like Contacts. Which is just a window with the stop light buttons up in the upper left corner for closing it or maximizing it or minimizing it. I initially was thinking about, what's in the toolbar that everybody pretty much always needs? And just had mocked up some dedicated, borderless buttons in the upper right hand corner. And then the sidebar would extend all the way to the top of the window view, instead of stopping at where the normal toolbar would be. But, we ran into a number of constraints, as Dave had mentioned. If you take a window such as that, and you make it full screen, you're going to get a toolbar no matter what.

Brent: Ah.

Joel: So, in that case a compromise, I suppose, is that we took away the title bar from the toolbar. So, the toolbar is very similar to Safari's where the close, minimize, and zoom buttons are in line with the toolbar buttons.

Brent: Oh, right.

Joel: And, it's shorter, you don't get any descriptive text underneath the buttons but there's a setting to always show the tool tips when you're mousing over, and not even delay, so that's what we ultimately decided to go with.

Brent: And so, with a less tall toolbar, we get little extra space back in that main window.

Joel: That's true.

Brent: ...which we can use for stuff, which is cool. So does this toolbar help minimize distraction?

Joel: I'd say so. The default set of toolbar buttons in shipping 3.0 is fewer than in version 2?

Dave: I think it's significantly fewer. We took a hard look at what we were putting in the toolbar, compared it to iOS where we have much more limited space and said, “Well, if we're getting away with this on iOS, let's give it a shot, at least as the default, on Mac.”

Brent: Right. It's still customizable like any other toolbar right?

Dave: Absolutely.

Brent: I noticed that the colors have been updated throughout in this new release. And, Ken, was that again from the iOS experience? Learning bolder colors are more interesting than the monochrome that was more en vogue at some period of time ago?

Ken: We’ve always thought that colors can help give people a sense of place. We used that somewhat in OmniFocus 2, to help people. We would change the sidebar color a little bit based on which Perspective you were in, and so on, to help people know where they were as they were navigating through the app. But yeah, in line with doing something a little more bright and friendly, we decided to brighten up the colors of the text in more places. And, we restored some of the colors that we used to use in OmniFocus 1 to indicate status of tasks. So, for example, when a task becomes due, its text turns red. And that's a preference setting because some people find that too distracting.

Brent: Sure.

Ken: But for others, that was a really useful affordance. It was one of the first things they missed when we removed that from OmniFocus 2. So that's now one of the default options available in OmniFocus 3.

Brent: That's cool. In fact, I really like having my tasks yell at me in red. "Do this now!" So the sidebar, probably the more noticeable dramatic changes as that sidebar is now dark. The colors, I think, really pop on that. It looks great, and for me it's a wonderful separation between sidebar stuff and my actual content. How did that come to be, Dave?

Dave: Well it was one of the things about Joel's initial designs where everyone said, "Yes. This looks really great. This looks really dynamic. This looks radical."

Brent: Let's call it rad for short. I just came up with that.

Dave: Yeah. “The rad bar.” But it's not like it's really that radical. There are plenty of apps that have a light content area with a dark sidebar. Lots of folks use Slack, for example. And that's not a reason to do something just because other people are doing it. But, we did like the way it looked. We thought it really emphasized that content area and made the sidebar recede. We've gotten some feedback to the contrary from our first couple of rounds of testers. We're definitely hearing that feedback and I'm looking to add an option for something a little less radical. But, unfortunately that's not going to make it into our initial release. So, most folks will be seeing “the rad bar” for a little bit longer.

Brent: Okay.

Dave: And hopefully, most people like it. I think.

Brent: Yeah. I think so.

Dave: The overwhelming reaction when people launch the app for the first time after getting invited to the test has been very positive. People seem excited about the change from a kind of less in your face look to the more dynamic look that we have.

Ken: Yeah, I feel like there were a few weeks that went by before we even heard our first bit of feedback. Oh, the dark sidebar is now drawing my eye too often. But, mind you that person wasn't alone. Pretty soon, we started hearing from others as we invited more — several thousand people — to start testing the app.

Dave: Sure. Also I think that person really wanted to give it a chance.

Ken: Sure. Yeah, that's probably true.

Dave: Which is a great thing about our testers, is that they're really interested in evaluating the design based on how they're using the app.

Ken: Yeah. I appreciate the patience that a lot of them have gone through as we've iterated on a lot of this stuff. Today's round of testers actually had some feedback that I saw on Twitter that I just really enjoyed, which, sort of spoke to why we were making these sorts of changes in the first place. One was:

Very first impression: beautiful, renewed, modern. I like it! Good job folks! 👏🏻 🙌🏻

Ken: That was from @viniciusmlara. Another from @wilderbailey that says:

A little feedback for @kcase, I have been using OmniFocus on my Mac since day one, and I think the leap you folks have made with Version 3 is just as large as the first version being made available. The result is efficient, elegant, and just seems magical upon use.

Ken: So, nice job, Joel.

Brent: Wow. Good deal.

Joel: I can recall showing initial mockups and then the whole iteration process. It reminds me of many years ago where — not saying it's difficult to throw a new design concept at somebody, but if you're showing off something to a group of folks, a large group of folks that work here, and you get the, "oooh" of consensus, you know you're on the right trail. And so far, the dark sidebar and the brightly colored large Perspective header text have been the two big “oooh!” things when people first see them.

Brent: Also, Joel, you had said at one point that you wanted to make it look more like a publication. I think you were referring to the main outline.

Joel: Yes. The main outline. I think the influence, inspiration is looking at the News app on iOS, and now on macOS and Mojave, is where the section headers are these big, thick, heavy, bold fonts that are ten points bigger in size than the headline text. And, their use of colors for different categories. I just took that without anybody telling me to and said, "I want to make it look like that."

Brent: And does the big, bold, colorful text have a UI benefit, aside from just looking cool? Because it does look cool.

Ken: Let me think about that ... does it have...

Dave: I can answer that one.

Brent: Dave!

Dave: We've seen our testers do some cool stuff because of the wayfinding that that provides. Previously, in OmniFocus 2 for Mac, you were looking at your tab bar and your window title to see what you might be looking at, which are smaller elements that don't ...

Brent: They don't stand out like that.

Dave: Not as scannable. So now we have a nice large title, which is also showing some summary information under it. So, it's not just only decoration.

Joel: Oh yeah. The expectations bar that was on the bottom of the outline view that told you how many projects, how many actions, that sort of stuff, that is gone now and that information is now tucked neatly underneath the top Perspective title.

Brent: I like that.

Dave: It almost looks like a little by line or something.

Joel: Yeah. Like a publication! Eh!

Ken: Mm-hm...

Dave: So, the nice thing about having those big titles is that you can have cool windows that don't have a sidebar or an inspector showing, that are still completely usable and navigable, and you can maybe put four up on one work space and see ...

Brent: Oh yeah. Sure.

Dave: And easily be able to track those different panes.

Brent: So I notice the outline itself just looks somehow magically better. Joel, how did you do that?

Joel: Mostly through using typography: font size and weight. Whatever a parent or super parent row is, be it a folder or a tag that has tasks, projects and action groups, that sort of thing, and indentation. Where tasks are indented from their parents. In version 2, to try to save horizontal space, things were pretty flush left, and using different visual cues to let you know that you're looking at a project, versus an action, or versus a folder. That sort of thing. So, making use of that indentation level gets it more back into that hierarchical list idea. One of the things that I've found in working on some of the other applications here, is that negative space can really be your friend. It breaks up visual monotony, and can provide a pretty good divider without the divider actually being there. That said, we have kept the horizontal rules between tasks and projects and folders, whereas we don't on iOS. The reason we're keeping them on the Mac is it's certainly possible to have a very wide window — and I'm gesticulating wildly with my hands right now, although you can't see it — and so being able to scan one row across such a great distance, those horizontal lines inbetween actions and projects really, really helps.

Dave: One other thing, I agree that the negative space helps. The “blobular” aspect has gotten in there also. The change to some of the glyphs that we use in the header rows, just makes them stand out just a little bit more.

Joel: The big header row that we've thrown the same icons that live over in “the rad bar” way over to the right hand side of the view, more or less in line with status circles if you're looking at your stuff in fluid mode. Or, just at a nice margin, otherwise. That's another kind of visual dynamic, breaking up the same thing over and over and over and over again. The disclosure triangles in version 2 were line art meant to be typographical to fit in well with the text that's right next to them. Now, they are filled in and solid and flat, and that also provides a good bit of dynamic for being able to scan one side of the view versus the other, and figure out what you're looking at.

Ken: The whole app, I think, does a better job now in version 3 of passing what some of our testers have referred to as the squint test, where you squint at it and make sense of what things refer to what, just by what you're able to see through reduced vision. So obviously that means it's just that much easier for anybody to see what's going on and particularly anybody with visual impairments that are trying to deal with that, and looking at the screen.

Joel: Or even if you're doing the — what is that thing where all your windows get small and tile around? Is it Exposé?

Dave: It used to be called Exposé, but —

Brent: Now it's called Bonjour.

Joel: No!

Joel: Yeah, like in the Exposé thing. So you have this big window and now it's like one fifth the size or one sixth the size that it used to be, and you can easily look at OmniFocus 3 in that mode and tell, "Oh. That's OmniFocus 3. That's not Mail." That's not, you know.

Dave: Yeah. Very true.

Brent: So an example of redesign that I really like, because it's fairly subtle, and not glamorous, and it's just the work you have to do, is in the inspectors. A lot of our users may not even notice that the inspectors are any different. But I'm weirdly a big fan that, because it's just kind of a boring change but it's the right change.

Dave: It's interesting that you're “weirdly” a big fan, because I remember you being an advocate for these changes.

Ken: Does it seem weird at all to you?

Brent: Well, I was weirdly a big fan before hand. That's why I was an advocate. And now to see it done, I'm like, yeah, this is cool. So what happened with the inspectors, Dave?

Dave: Well, we're using a larger control size, which I think has the biggest impact. We're using the same control size that you would see in the iWork apps, for example. Whereas before we were using the smaller control size, which let us get a lot more in, but I think the larger controls look friendlier.

Brent: Yeah.

Dave: And you don't see those small controls in very many apps anymore, I think.

Brent: Right. As pixels have shrunk, those controls get smaller.

Dave: Have they shrunk?

Brent: Yeah. I'm sure they have.

Dave: Okay.

Brent: At least I think that's what's happening!

Dave: I don't know.

Ken: Or our eyes have gotten older or something?

Brent: I refuse to believe that.

Dave: And then the other change is that we had a very strong central alignment of those inspector panes previously. We had a really strong center line where our labels were coming off to the left and our controls were coming off to the right and that was a super nice arrangement and took a lot of doing.

Brent: Yeah.

Dave: But, now we have a ... it's not really fully justified, but we have a strong left edge and a strong right edge with controls and labels. And sometimes we're splitting rows where we didn't used to, to allow just a little bit more space. Or a control that's a little bit easier to interact with without multiple clicks, that sort of thing.

Joel: Yeah, the move from menus to segmented controls, I think for a novice user, they can see all of the options that apply to see the selection—

Brent: It's discoverable?

Joel: Yes. A lot more discoverable that way.

Ken: And it's fewer clicks.

Brent: Fewer clicks. Sure.

Ken: Just click straight on that new option.

Brent: And so then we had to do even more of a redesign, of course, for the repeats because there's new features and stuff there. There's also tags, of course, are in the inspector now. That's a new feature.

Brent: So I think the last thing to really get some design touching is the custom Perspectives, which are more powerful now. So what did we do there? Ken?

Ken: Well, most of the big changes in custom Perspectives, we talked about it in an earlier episode, because we made the changes on iOS to begin with, and really this came out of feedback that we got during the iOS testing process, as we gave our customers their first chance to use tags. They said, "Okay, well having multiple tags on items are great. But now I want to build a view that says I'm looking at something that has this tag, but not that tag, or these two tags together." All sorts of interesting combinations. So we ended up, in OmniFocus 3 for iOS, creating these Perspective rules. Of course then for OmniFocus 3 for Mac, that was one of the first things that we wanted to bring back. Up until that point, before we started the iOS TestFlight, we'd been developing pretty much with feature parity between the Mac app and the iOS app. And then when we put the iOS app into TestFlight we thought, oh we need to iterate on this quickly, based on the feedback, and we kind of let the Mac app go behind as we figured out, well what is it we're building exactly?

Ken: So, when we came back to the Mac, one of the first things we knew we needed to do — we'd already implemented tags there, but we didn't have the custom Perspectives. So we started building those. The Perspectives that we built on iOS, we had to build all of the interface ourselves. On Mac we thought, well there's this great interface element that's already used, provided by Apple, called the ... sorry, what is that thing called?

Brent: It's the Predicate Editor.

Ken: The Predicate Editor. Yes. We use that in OmniOutliner, I believe, as well. So we thought we would use that and sort of convey some of the same rules, editing and information. And it turned out to be a little more work than we were expecting.

Dave: Yeah, we thought, well hey, folks are used to making smart playlists, folks are used to making Mail rules ...

Brent: Same thing?

Dave: They use the same controls. Yes but... It turns out that the Predicate Editor doesn't do everything that we'd like it to. So we did have to make some compromises in terms of the ways that you pick these different rules. We ended up putting popovers on top of popovers in a couple of cases, that I think we'd rather not.

Brent: Ah, yeah.

Ken: And really long lists of rules in places where we would have loved to ...

Dave: There's some limitation on what you can do in the controls in those rows. But, we're pretty sure that as we start implementing more types of rules, which is something that we definitely want to do as we keep developing OmniFocus 3, that that will be the time in which we can start working on a more custom implementation that lets us focus a little more on usability and beauty...

Brent: Yeah.

Dave: ... and less on utility.

Brent: Sounds good. Hey, we shipped. Yay!

Dave: Yay!

Ken: Whew!

Joel: Yay!

Brent: Oh my goodness. Well, I think that just about covers it unless you guys think of something we haven't gone over that we should.

Joel: I don't make use of custom Perspectives, but I like the ability to color them as you see fit.

Brent: Yeah?

Joel: This has been done on iOS and now on the Mac. It makes for some very bright and colorful interfaces.

Dave: But only if you want.

Joel: Only if you want.

Brent: Don't have to have color.

Dave: You can have the teal back if you want.

Joel: Oh, well the thing is you could, if you were thinking, color your Perspectives based on priority.

Dave: Mind blown.

Joel: I know. Something that is not as important could be a very desaturated version of the color that you like.

Brent: Sure.

Joel: Or one that's like really hot, just make it that fire engine red.

Dave: Can we work aromatherapy into this somehow?

Joel: Not until someone invents smell-o-vision.

Brent: On that note... Thanks Ken, thanks Dave, thanks Joel. Ken, everyone knows where to find you on the web, but I'm going to ask anyway. Where can people find you on the web?

Ken: You can find me at our website, OmniGroup.com, but on Twitter you'll find me at @kcase.

Brent: And Dave, where can people find you on the web?

Dave: Well Brent, I'm still on Twitter.

Brent: You're still on Twitter.

Dave: At least as we're taping this, as I like to say. But my Twitter account is @dmessent.

Brent: Remarkably similar to your name.

Dave: Yes.

Brent: Amazing. I'd also like to thank our intrepid producer, Mark Boszko. Say hello, Mark.

Mark Boszko: Hello, Mark.

Brent: And especially, I want to thank you for listening. Thank you. Muuuuuusic ...

[MUSIC PLAYS]

[LAUGHTER at Brent's silly-sounding “Muuuuuusic”]