Presentation

We will take some quality time to review—and give feedback—for the following assignments which have been submitted so far:

  • Homepage Mockups

Designing for Emotion

Video

Don Norman: The three ways that good design makes you happy, on YouTube

Reading

Please read Chapters 1–3 in “Designing for Emotion,” which you can find in Doc Sharing in the eCompanion. The reading is 47 pages with lots of images. We will discuss the reading afterwards.

  1. Emotional Design, p. 1
  2. Designing for Humans, p. 17
  3. Personality, p. 29

Mental Model Defined

What users believe they know about a UI strongly impacts how they use it.

Jakob Neilsen

A mental model is what we believe to be true. This is generally based on our experiences. It affects how we assimilate new things into our existing knowledge.

A mental model is not necessarily the truth. In fact, individual users may come to your interface each with their own mental model. But in many cases, it’s okay if they don’t really understand how it works, if it simply works in a familiar way.

For users to feel good about your website, they need to feel as if they understand it. Making it as simple as possible for them to understand–even if that simple understanding is completely inaccurate–is what author Robert Hoekman, Jr. calls designing the obvious.

For example, we don’t need to know what changes our computer makes to the file structure when we choose to delete a file. We understand what a trash can is for, so most interfaces use the icon of a trash can for “throwing stuff away”.

Mac trash icon

Even the concept of file organization in an operating system matches closely with our mental model of a filing cabinet. Sheets of paper (files) go into folders with labels, and folders go into bigger, hanging folders that also have labels.

Mac Finder

The mental model of using a pencil is good enough for using the pencil tool in Photoshop, though the physical realities of graphite on paper versus electronic connections in a drive are vastly different.

Photoshop tools

Implementation Model

The implementation model is what we get when the underlying details of a system influence the design of the interface. For example, before we had icons of files and folders in an operating system, we had the command prompt. The command prompt forces us to remember obscure details about language and syntax far removed from the everyday experience of most people.

Implementation models often aim to please the geeks that create them, and they take very little thought about mental models to create them. In web applications, many implementation-model designs appear when there are far better ways to represent the functionality of the interface.

OLS attendance entry

For example, error messages in interfaces sometime are cryptic, and written in words that make sense to a developer. This is great in a production environment, but by the time users interact with your design, the error messages should be crafted to help them understand what is wrong, what to do about it, and how the application actually works.

Cryptic error message 1901152_10153832709485543_732653391_n

Another example is when interfaces show you every possible option and setting all at once. It’s like the programmers are showing off. But that simply overwhelms the user. Instead, users want to see only what is relevant to them while involved in a specific task at a given point in time. Hide everything else for now.

interface with too many choices at once

Because designers know too much, they form wonderful mental models of their own creations, leading them to believe that each feature is easy to understand. Users’ mental models of the UI are likely to be somewhat more deficient, making them more likely to make mistakes and find the design much more difficult to use.

Jakob Neilsen

Don’t assume that because something is possible and us geeks think it would be cool, that users will grasp it and make use of it. And don’t use labels on interface items that are meaningless to users. Use what they already know about.

Adobe Photoshop versus Photoshop Elements
Adobe Photoshop versus Photoshop Elements

Using Metaphors

A metaphor is when a thing is representative or symbolic of something else. Many web interface elements need to use metaphors in order to match the mental model of the user.

Let’s take a look at a good use of metaphor and mental model: Google Calendar. You can log in to your own and check it out if you have a Google account.

Metaphor for: a Real Calendar

Real calendars are generally made of paper and allow you to flip pages, and write on them to keep track of appointments, significant dates, or events.

The Interface

The Google Calendar interface has a lot in common with a paper-based calendar. It uses a grid to lay out the days of the week, and weeks of the month.

Google Calendar interface
Google Calendar interface

Click on an individual date, and a popup allows to to label an event or task, similar to jotting this down with a pencil.

Google Calendar add an item
Google Calendar add an item

Enter your event name. You can either click Create event and be done with it, of click Edit event to do more. Now is when the interface reveals all kinds of other functions that were hidden before, when you did not need them yet.

Google Calendar edit event
Google Calendar edit event

You can other reconfigure the interface considerably.

Google Calendar agenda and settings
Google Calendar agenda and settings

But what you are first presented with when you arrive is a familiar interface most of us can start using right away.

Finally, don’t forget that if a certain convention is used by the majority of website interfaces, that becomes part of a user’s mental model of how websites work. Which is not to sat you can’t deviate from that, but do be aware of that fact.

Basic website template
Basic website template