On UI Walkthroughs

Max Rudberg doesn’t like them. He writes:

These apps have chosen to reduce details to achieve a minimal UI, but in the process the UI has also become harder to use. Unfortunately a UI walkthrough is quite an inelegant way to explain the core functionality of an app. It can be a frustrating obstacle before you can dive into an app, and you have to remember all of those new ways of using it once you get in.

The problem is mainly the lack of visual cues; there is no way to tell that sliding the main screen to the left will toggle the alarm on in Rise, or pinching a list in Clear will minimize it and take you up a level in the hierarchy. It’s not obvious, and what’s often called mystery meat.

Truthfully, walkthroughs don’t bother me; that said, I understand Rudberg’s point.

Instead, Rudberg prefers more direct cues -- namely, animations. Again, writing:

Arguably a less intrusive way compared to a walkthrough is to guide the user in the situation with UI hints. This can be done through slight visual cues and animations. A hint should not be a popup (it’s probably even more disruptive than a tutorial).

Some examples of clever explanation of UI gestures include Apple’s own camera lock screen sliders. Just tapping on the camera icon makes the screen jump, briefly revealing the camera UI behind the lock screen. This combined with the ridges above and below the camera tells the user to slide the lock screen up. Before this behavior the camera was activated by a mystery meat action; double tap the home button and a camera button would appear to the right of the Slide to unlock well. There was no way to find it unless you knew that double tapping the home button was possible in this screen.

Like I said, walkthroughs don’t bother me. However, were I forced to choose between the walkthrough method and what Rudberg proposes, I’d opt for the latter. Using subtle animations is less intrusive and arguably better for users. Using Rudberg’s comment about the camera icon on the iPhone’s Lock screen as an example, Apple did a great job in cueing users on what the button does. Tap it, and the button bounces playfully upwards, exposing the Camera app’s shutter button underneath. This should signal to the user that swiping up on the icon -- the lines above and below the button are also visual clues -- will open the Camera app. Even as a nerd, I can appreciate (and even prefer) this type of UI design.

(via John Gruber)