Jackson Fish Market
Posted on October 29, 2012 by hillel on Making Things Special

Unsung User Experience Heroes — Hide and Seek

One thing you constantly need to concern yourself with as a User Experience Designer is the “cognitive load” at every point in your experience. “Cognitive Load” is a fancy term for how much thinking the user has to do to parse through all the crap you’ve jammed onto the screen in front of them. “Less is more” is a cliche but that doesn’t make it any less true in this case. We often think we’re helping the user by putting more options at their finger tips. But our brains are constantly skimming what’s in front of us trying to find the one thing we need. The more there is to skim, the harder it is to find the one thing you want.

Now this is easier said than done because how do we figure out what to show and what to hide? Our best avenue here is to try and understand what the user does most of the time in this place. Show that one thing, and mercilessly bury everything else. But even if you’ve won that battle, how do you expose the items you just hid? If you’re designing software for devices with pointers – mice and trackpads, then your best friend is “hover”. Move that cursor around the screen and whatever you hover over has a little doodad that shows up inviting you to discover more about what that object can do. Macs and PCs have right-click (or contextual) menus. Those are really fantastic as they require no affordance at all on the screen. They have a universal entry point right on the mouse. But right click menus are used by a stubbornly smallish percentage of your users. So unfortunately they don’t really solve the problem universally. And even worse, putting the little doodad on the screen when you hover is becoming less and less possible… why? Touch screen devices have no hover state.

Touch interfaces are wonderful. Touch something and do it. Manipulate it with your actual fingers without the inconvenient intermediary of a trackpad, except… the touch screen has no idea where your finger is until it touches the screen. And by that time, you’ve “clicked” or in the parlance of the new UIs – “tapped”. Now, one might argue that some clever engineers will make use of that front facing camera on your phone or tablet, sense where your finger is and reintroduce the “hover” concept back into the UI and we’ll be all set. And to be honest, the engineers don’t even have to be all that clever. This has been done. There were tablets with pens that had a hover state. Move your pen tip around the interface without actually touching the screen and the cursor goes with you. Press down on the screen and you’ve “clicked”. Another variation has touching the screen turning into one big hover state and pressing the pen down (or the screen itself clicks in the case of finger use) and you’ve “clicked”. We’ve tried all these, and with love and respect to the people that have tried this, they all suck. None of these options will become mainstream user interface metaphors. And if they do, our claim is that they shouldn’t.

So what are our options in the touch universe for hiding those commands that we need handy but would like to remain out of the way?

  • Litter the screen with doodads. This is not a great choice, but it can do the trick. If your screen doesn’t have that many affordances in the first place, adding tasteful, subdued little glyphs throughout that the user can tap on to reveal more options is a respectable choice. Of course, visual design is your friend here to make the doodads as innocuous as possible.
  • A variation on the above option is the master doodad. On first use you show all the doodads along with an overlay showing that the way to turn them on is using a master doodad that’s always available on screen. It’s a little indirect, but if you’ve got lots of stuff to hide, and can use the master mode switcher consistently it may not be a terrible approach.
  • Scroll margins. The folks at Twitter realized that people would instinctively drag scroll their list of tweets to reveal tweets above the latest. And that’s exactly where they put their “Refresh” command. Just pull the list downwards and it reveals the refresh functionality. This is a really sweet bit of user interface design and a happy confluence of factors. The UI is hidden, but shows up as a result of what users will do instinctively without being taught. This is a great approach if the stars align, but often they don’t.
  • Tap and hold. This is the leading candidate right now to replace the right-click button on the mouse. It’s not awful, but it doesn’t feel smooth in the pantheon of all the other touch gestures you use.

One more candidate for exploration is pinch and zoom. This is the gesture that Apple brought to the world to scale photographs on your tiny phone screen. Pinch and zoom reveals more or less of the photograph depending on which action you’re taking. It’s pretty straight forward. Everyone knows it. What if you could pinch and zoom on other objects, not just photographs. We admit, it’s a leap, but we’re in favor of trying a world where pinch and zoom is a standard gesture users use to discover what’s “in” any object they see on the screen. Perhaps it will be too obscure and be relegated to the hall of underused power user functionality, but we think there’s a shot. Especially. if a really popular app tries it.

In the meantime, the options above will have to suffice for now.

Mainly though, even though on touch screens the options aren’t superlative to hide affordances, burying rarely used functionality is still a key technique to lighten that cognitive load on your user. And that makes everyone happy.

Join the discussion 2 Comments

  • Reply

    Sean O'Connor

    December 4, 2012 at 11:13 pm

    Have you had an opp to implement the “pinch / zoom” in a non-photographic context??

    • Reply

      Hillel

      December 5, 2012 at 8:58 am

      I feel like I saw someone do it, but now the specific example is escaping me. Maybe I just dreamed it. :) I haven’t gotten to do it… yet!

Leave a Reply