Supporting the User’s Mental Models: A User Centered Approach to Designing

When disposing of a document on my laptop, I drag it to the “recycling bin” just as I would any documents I printed out. The process a document undergoes to be recycled in actuality bears no resemblance to how I would recycle documents outside of my computer-mediated space. Instead, an address is deleted from the hard drive’s index so that the storage space can be overwritten the next time the computer needs to save to the hard drive. The useful, mental metaphor, however, has effectively taken place of what actually occurs because it is much simpler than the reality. Designing for the user involves using our real-world experiences to help users assimilate and understand what occurs on their computers. The recycling bin, and other metaphors of that ilk, is a mental model. These models help to bridge the gap of comprehension for the less tech-savvy users who need the shortcut to absorb new concepts into their existing knowledge base. Though the user may be completely wrong in their perception of what is actually happening their understanding of the model helps him or her to successfully accomplish their goals.

Eliminate Implementation Models

An implementation model is the opposite of a mental model. It is when something has been designed to reflect the underlying details of a system. In turn, these models have no regard for a system’s users and instead aim to please the computer-savvy. Design solutions such as creating wireframes and running usability tests can also serve as great ways to ensure that the applications support users’ mental models and not the underlying implementation model.

Wireframes aim to illustrate the initial design ideas for an end product. It is the interface equivalent of a blueprint that illustrates layout and spatial relationships and shows how certain interface elements will be distinguished from others. The principle benefit of the wireframe is that they can be designed and adjusted quickly, so that elements that impede a user’s ability to understand the application’s purpose can be identified and adjusted with ease. When designing wireframes, pay attention to the Three R’s: requirements, reduction, and regularity. Requirements, though they may seem obvious in the creation of any project, need special attention because sticking to what is absolutely necessary will better ensure that the product will accomplish its intended purpose. Reduction implies peeling back to the requirements for the project and making sure to reduce interfaces to their core as much as possible. Finally, regularity is about making it appear as if your design elements are all intentional with consistency in areas such as font and font size, spacing, colors for related elements and so on.

Prototype the Design

Basically, prototypes are the interactive version of a set of wireframes. Actually going through the intended tasks and navigating the site to get through a series of screens can be quite revealing as to where adjustments need to be made to ease user navigation. Substantial changes in the way in which a user navigates a site can be costly and time consuming after a site has been created. During the prototype stage, however, changing the entire behavior of an interaction is fast, cheap, and easy. The prototype provides a clear picture of how the final project will work and allows the designer to work with the product directly very early in the process so that it can be refined until it is perfected.  They can be created on paper with sketches of wireframes, simple HTML of web pages without regard to details such as color, with click through mockups, or even on Flash.

Source: Hoekman, Robert Jr. (2007). Designing the Obvious. Berkeley, CA: New Riders.