Does a UI walkthrough mean they blew it?

July 16, 2013 Graham Siener

Last year, an article was making the rounds proclaiming:

If you see a UI walkthrough, they blew it

Having been continually assaulted by shouting tutorials I was firmly in this camp. It makes sense at face value, since this is should be a good litmus test for simplicity and conveying purpose. It reminded me of If Mario Was made in 2010, a commentary on the tragic fall of game design from the thoughtful genius of Miyamoto to the tourettes-inspired Facebook posts of unlocked achievements.

My mind was made up, and I vowed to not make the same mistakes. Since then, a confluence of events pushed me to question the assumption that there’s no room for heavy-handed guidance or aiding context.

App Club

Our story begins with a suggestion — “let’s start an app club.” The idea was to hold the equivalent of a book club, except each week we’d choose one iPhone app that we would use for the week leading up to our meeting. We’d then reconvene to discuss what we liked, what we hated, and where we could borrow. This sounded like a great idea, but I found it hard to stay disciplined; I’d use the app a couple of times but couldn’t find real traction. During my best go, I had launched the app no more than 5 times. I coudn’t put a name to it, but I knew app club wasn’t for me.

A month later, we did some initial testing of the mobile app we were building with users. We had aspirations of building a simple, focused interface that would help new users get up to speed quickly. The overall feedback was positive, but it was hard to ignore something we heard several times: “I didn’t really know what to do.”

People had seen paper prototypes, and we had talked some focus groups through the initial on-boarding of the app. Pushing out our beta was the first real test without context or handholding…and we failed by not pitching our value proposition to the clients.

Distraction

Wizards and tutorials are a pain to build and even more annoying to maintain. I was skeptical that we needed to resort to such solutions. After more thought about the medium I’m beginning to come around. On mobile devices, you’re never guaranteed that your app will be used consistently and uninterrupted. As a thought exercise, how often do you do something besides play a game for more than 5 minutes? During those 5 minutes, how often did you look away? How many times did you jump out of the app to answer a text message, etc?

Given that we’re still defining interactions on a mobile touch device, and given our lack of attention I believe it’s okay to give a pass to mobile apps that are trying to bridge this cognitive gap and keep us on track.

Techniques to Watch

I don’t have all the answers to where that balance lies, but here are a few patterns I hope to borrow heavily from:

1361911226107-gogobot-edu

Coach Marks

are Apple’s term for specifically guiding a user by pointing out a control/interaction. Apple actually introduced this in 1995 (!), back when we were all learning a new interface (the GUI). The main aspect of the coach marks is that they are dimmed out when the appear behind the guide window itself

While they might seem cheesy, they shortcut the cognitive processing somebody performs when looking at a novel interface.

Microinteractions

…which begs the question, “Why are we creating so many new patterns for interaction?” As Dan Saffer describes in his book, Microinteraction, the limited space plus introduction of touch and gestures provides the opportunity for ‘Invisible triggers.’ Triggers refer to actions that you initiate while using a product. An invisible trigger could be hitting the Volume Down button on an iPhone while it’s ringing to mute it. It turns out that iOS is chock full of these triggers, yet you may never discover them except via trial and error or word of mouth. App developers have taken a cue from Apple and gone nuts with these (often non-intuitive) gestures. Which leads me to…

Progressive Reduction

Coined by LayerVault, Progressive Reduction refers to the gradual removal of context as a user becomes an expert. This screenshot represents a feature they call Signposting.tumblr_inline_mhqdarUqK51qz4rgp

Within LayerVault, all of your revisions are private. Signposts allow you to pluck revisions from a design’s timeline and expose them to a client or teammate. It’s incredibly useful but also slightly ambiguous at first.

Our Signposting button starts out as a large icon with a label. When you’ve demonstrated proficiency, we remove the label. After you’ve become a total pro, we de-emphasize the button altogether.

LayerVault creates a proficiency profile for every user — when you’re an expert, they get out of the way.

Still Evolving

As we get comfortable with the new normal of spending our time on underpowered, under-internetted devices, we’ll continue to discover and refine techniques that kickstart the process of understanding. When discussing the theme of coaching with a colleague of mine, Steve Berry, he mentioned that “Instructions are the list of things you did wrong.” Funnily enough, an art teacher of his had used that line in a completely analog context. Clearly we have been down this road before, but it’s important to recognize that mobile is a new interface that requires more actively providing context to get past the distractions of our splintered attention.

Which techniques and patterns have you found to be effective in mobile?

About the Author

Biography

Previous
Rails 4 Gotchas
Rails 4 Gotchas

In order to get some pivots up to speed on Rails 4 in anticipation of our clients’ needs, we’ve been upgrad...

Next
Josiah Carlson – Scaling Postgres with Some Help from Redis
Josiah Carlson – Scaling Postgres with Some Help from Redis

Josiah Carlson presents a number of detailed examples of how to build on the strengths of Postgres while us...

×

Subscribe to our Newsletter

!
Thank you!
Error - something went wrong!