As part of today's Mobile AV Club, we watched Mike Stern's Designing Intuitive User Experiences talk at WWDC 2014

In his talk, Mike presents five fundamental ideas, he calls the Top 5 Characteristics of Intuitive Apps:

1. Platform Savvy
   • Mike talks about the importance and the strength of using specific idioms, platform-specific conventions
   • The first time I heard about rubber banding and learnt from fellow Shopifiers what it means.
2. Easy to Navigate
   • The app answers these fundamental questions at every state:
     
     • Where am I?
     • Where else can I go?
     • What will I find when I get there?
3. Clear
   • Language
   • Animation
4. Simple
   • The 80 / 20 rule
5. Focused
   • Think Big, Start Small

As you can probably already tell, my personal favourite is the ease to navigate. When talking about navigation, Mike shares the folowing concepts and pieces of advice:

• Progressive Disclosure
• Be predictable
• Make selection obvious
• Maximize continuity
• Provide hints
• Less is more (because skimming = skipping)

And out of these, the one I learnt the most from, was Mike's example on how to make selection obvious. As he sais, this point, on its own, is really obvious but worth emphasizing nevertheless: selection needs to be immediately obvious. The iOS tab bars are depicted here as the supporting example:

The iOS tab bars use color and shape to make selection obvious. Why isn't just one enough then? As Mike puts it, let's say we didn't have enough time to design a totally different set of icons for the active or selected state. Let's take the World Clock tab as our example:

So instead of designing a new icon—one that's also either filled in, or has a different width like the ones shown in the previous example of the iOS tab bar—we just use the off state, but we tint it red, and we put that into the interface.

Now here is where I had my Aha! moment: just as a common practice, Mike suggests to take a screenshot of your app, and to bring it into the graphic design tool of your choice, then desaturate it, and make sure that you can still clearly see state and selection. Right off the bat, you can see that the selection is a lot less obvious. And it's really not obvious if you're color blind.

With a different set of icons designed for the active and selected state, here is how the filled in tab bar icon would look like when desaturated:

With the filled in tab bar icon, it's still at least possible to see what selection, if the color red looks like gray to you. And in full colour, the selection is even more obvious:

This is a case of doing the right thing for accessibility and improving the experience for everyone.