Closely hews to Drilldown, in widgets, which may reveal some of these things... Doesn't talk about New Page as a pattern, cause it's not. Also... see above for Display of Info, slide to side and stuff also do this.

Intro: Revealing More Information

It's not magic! The audience stares at the man on stage in complete concentration, hoping to catch a glimpse of his strategy. The man waives a black bowler’s hat around, showing it’s form and empty contents to the interested spectators. Next, he places a red silk handkerchief  in front of the hat. Shouting “Viola!”, the man drops the cloth and reaches into the hat. Amongst the “Oooos!” and “Ahhs!” of the audience, a white rabbit is revealed from the inside of the magician’s hat.

Context is key

Magic tricks are exciting because we are challenged to figure out what just happened and how it fooled us. We’re left to ponder and to discuss, amongst each other, the magician’s strategy and skill. This curiosity of what and how information is revealed is entertaining to us. But, this guessing is not acceptable when designing mobile interfaces. On mobile devices, we want to eliminate the confusion. Our users are not stationary. They’re everywhere and they want information quickly, easy to locate, easy to identify, and easy to manipulate.

Understanding Our Users with Norman's Model

The reason why magic works to confuse us, is because it takes advantage of our cognitive processing capabilities. Donald Norman says that there are two fundamental principles of designing for people: provide a good conceptual model; and make things visible (Norman: 1988). A conceptual model, or known more today as a mental model, is a mental representation, built from our prior experiences, interactions, and knowledge, of how something works. It’s our representation of how we perceive the world.

The second principle, make things visible, is based on the idea that after we have collected, filtered, and stored information, we must be able to retrieve it to problem solve for carrying out our tasks.  Norman indicates that this principle is made up of smaller principles such as mapping, constraints, affordances, and feedback.

Mapping describes the relationship between two objects and how well we understand their connection. On mobile devices, we’re talking about display-control compatibility. On a mobile device, controls that resemble our cultural standards, are going to be well understood. For example, let’s relate volume with a control. If we want to increase the volume, we expect to push the volume button up. If we want to read more information in a paragraph, we can scroll down, click on a link, or tap on an arrow. Problems occur when designs create an unfamiliar relationship between two objects. On the iphone, in order to take a screen shot, you must hold the power button at the same time as the home button. This is very confusing and impossible to discover unless you research this on Apple’s site.

Affordances are used to describe that an object’s function can be perceived based on it’s properties. For example, a handle on a door affords gripping and pulling. The properties of the door handle- it’s relative height to our arms reach, the cylindrical shape fits within a our closed grasp- make this very clear. If an object is designed well and it clearly communicates it’s affordance, we don’t need additional information attached to the design to indicate it’s use. On mobile devices, we understand that physical buttons afford pushing and screen buttons afford touching, selecting, and clicking. If we cannot recognize the object as a button, then the user will ignore it or not understand how to interact with it.

Feedback is used to describe the immediate perceived result of an interaction. It confirms that action took place and presents us with more information. In a car, you step on the accelerator. That action has an immediate result. The feedback is that you experience the car moving faster. On mobile devices, when we click or select an object, we expect an immediate response. Feedback can be experienced in multiple ways:  A button may change shape, size, orientation, color, and / or position. A notification or message may appear, or a new page might open up. Feedback can also appeal to other senses using haptics or sounds. Always design actions that result in a feedback. This will limit confusion and aggravation while making the user’s experience more satisfying.

Constraints describe restrictions of behavior. They can be both natural and cultural. They can be both positive and negative. Remember the toy with cut out spaces resembling geometric shapes.  A child is to take a wooden shape and fit it though the space that matches.  A sphere fits into the circle cut out, the cube fits inside the square, a square could not fit in the triangle slot, etc. So the objects size and shape are constraints in making the correct fit. Those are examples of natural constraints. Cultural constraints are applied to socially acceptable behaviors.  For example, it’s not socially acceptable to steal from someone or throw your mobile phone at the person next to you! When designing mobile interfaces, use constraints to reduce or prevent user error. When you accidentally press delete instead of save, you should be provided a constraining confirmation message that requires your action. When designing to reveal information, use constraints of the size of the viewport, or have unimportant buttons become inactive.

Norman’s model of design is a framework that should be referred to when using patterns to revealing more information. For more of a complete understanding of his model, refer to his book, The Design of Everyday Things.

Patterns for Revealing More Information A valid way of thinking about the entire topic of interactive design is that it is about displaying information. This chapter in particular is concerned with components whose sole task is to present more information required by the user. These patterns have been developed and refined based on how the human mind processes patterns, objects, and information:

• Windowshade
• Pop-Up
• Hierarchical List
• Returned Results