Following Instructions

Following instructions is a big part of life. Most of the interfaces we use are easy enough to figure out; even this faucet, which favors form over function, only took me a few seconds of experimentation.

Since it’s mostly used by adults for a brief hand-washing, it doesn’t need a red “hot” knob and a blue “cold” knob. The only affordance is the stick coming out of the top, so you just wiggle that until water comes out of the faucet. 

Doors are also generally well-suited for their purpose. A user simply has to unlatch them with a knob or a handle or a bar, and then either push or pull them. The only time we might need to be instructed in their use is if the door itself is malfunctioning. I recently saw such a door- the bar had some kind of problem and could only be pushed at the mid-point. If a user pushed it anywhere else, it would jam. There was an earnest homegrown attempt to instruct users through color and text.

I stood to one side and watched as three people in a row pushed on the red part of the bar and jammed the door. What’s the problem?

The main issue is the large text, “Press to Exit”. This is a bright signal, and it confirms our understanding of the operation of the bar-latch door design; push on the bar. Since most people don’t anticipate having an issue using a door, it’s likely that they scan the sign and simply do what they think they’re supposed to do; push the bar anywhere. They’re leaving a facility, so it’s a transitional time that is probably occupying their thoughts and there’s not much at all to spare for low-risk issues like potentially pushing the wrong part of the bar. 

Since the bar is the affordance that we want them to focus on, I would have put a very simple message there. I’d also dump the red tape- colorblind visitors won’t benefit from it, and it’s just noise to those with normal vision. Here’s what I would have done.

The green tape is just bright enough to co-opt attention, and the message is simple and located exactly where the action needs to take place. 

Design improvements like this are not earth-shaking, especially given the low risk associated with failing to follow the instructions. However, identifying error-prone conditions and addressing them regardless of risk is crucial for building trust in any interface.

The UI of Comedy

Jerry Seinfeld is a master of stand-up comedy. Many people think they’re funny, but to make a career of it is a lot of work. As Seinfeld himself says, “I’m playing a very difficult game, and if you’d like to see someone who’s very good at a difficult game, that’s what I do.”

Designing interfaces between humans and technology is also a difficult game, and there are some striking similarities between what Jerry Seinfeld does and what we do. Let’s take a look at what helps Seinfeld be as funny as he is.

He’s got a “Movie Theater” bit in which he pokes fun at the “Please pick up any trash that may be on the floor” request that sometimes plays after the credits. Essentially, his stance is that it’s part of an unspoken arrangement between us, the movie-going public, and the nameless, faceless theater owners. They overcharge us for snacks, so we get to toss the wrappers on the floor.

Here’s how you and I might deliver it.

“Movie theaters are ripping us off. We pay way too much for stuff we shouldn't even be eating. And that’s fine! We get it! But in return, when I’ve finished my soda, I’m not going to get up and find a trash can for the empty cup, because the theater owner is overcharging me and I feel like taking revenge. So, I simply drop the cup onto the floor.”

Is it funny? Meh.

Here’s how Seinfeld delivers it.

Now *that’s* funny! Why?

Because he said less words and added a few simple gestures that most of us “get” without even thinking about it. And that’s the secret- he basically offloaded details that would have required us to think by turning them into these visuals;

1. “Seated holding a cup”- In the second image above, Seinfeld has crouched down slightly and is pretending to hold something cylindrical. When we combine this visual with the movie theater context, we can quickly infer that he’s seated in a movie theater watching a movie while drinking a soda. So he doesn’t have to give us these details verbally. He can just set up the joke by saying “In return, when I am done with something”
2. “Smiling, dropping the cup on the floor”- Four words ("I open my hand") and a smile allow us to re-experience that guilty pleasure of littering in a movie theater AND feel good about “getting” the joke despite the minimal information.

OK, so he's creating a very engaging, simple experience through what is apparently a sophisticated understanding of human perception and cognition. But can we really say that Seinfeld is aware of this offloading? In 2012, he gave a fascinating interview to the New York Times in which he discussed the lengthy process of iterating a joke until it’s just right. As an example, he mentioned a joke about marriage being a game of chess played on a board that’s made of moving water with pieces that are made of smoke. He struggled with this joke for three years, until one night, he had a breakthrough.

“The breakthrough was doing this”— Seinfeld traced a square in the air with his fingers, drawing the board. “Now I can just say, ‘The board is flowing water,’ and do this, and they get it. A board that was made of flowing water was too much data. Here, I’m doing some of the work for you. So now I’m starting to get applause on it, after years of work. They don’t think about it. They just laugh.”

He simplified the interface to the joke and found success. Striving for the same thing in the UX world might not make you as rich and famous as Jerry Seinfeld, but simple, clean UIs generally result in higher success rates, more conversions, and better user engagement. And that's what we're here for.

The Mass Pike- Information Design at 70 mph

Making good decisions is harder than it sounds. In theory, we look at the options and carefully weigh the pros and cons of each before choosing the one that makes the most sense. In practice, if the sensible choice doesn’t match what our emotions are telling us, we “go with our gut”. This is code for “make a poor choice”.

Not all decisions are created equal; choosing a spouse is not the same as choosing a donut, but they all involve paying attention. Since there’s often new information involved with making a decision (otherwise you’d know what to do without thinking about it), we have to pay attention to that new information so that we can evaluate its impact on the choice before us. Decision support tools are at their best when they feed us new information carefully through attention management. Too much new information can be overwhelming, and this can cause us to make emotional decisions rather than logical ones.

I drive on the Massachusetts Turnpike almost every day. It’s a toll road; when you drive onto “the Pike” you take a ticket, and when you get off you have to pay a fee based on how far you traveled. There are also two large plazas on the eastern section of the Pike that are not associated with getting on or off, they are mainly for suburban commuters getting in and out of Boston. These are called “toll plazas”. It used to be common to see confused drivers at the Toll Plazas gazing at the signs while trying to decide which lane to use. It’s been many months since I last saw someone trying to back out of the wrong lane.

Why?

Two things; first, they reduced the number of choices from five (seen in the image at left) to two;

1. EZPass (electronic payment via transponder)
2. Cash Only

Fewer choices make decision making easier because there’s less information to actively think about. The Massachusetts Turnpike Authority also improved the signage before the tolls to pre-load the decision-making process. Driving a car is not exactly challenging for most people, but it does require sustained attention to the road and traffic. Good information design should be able to support a driver even at 70 mph and help them to make the decision long before they actually reach the toll plaza. Let’s take a look at the signs on the Pike to see how well they manage our attention.

About two miles from the toll plaza, a small yellow sign is seen. It has only two pieces of information on it, “TOLL PLAZA” and “2 MILES”. This is ideal, because consumers of this information are traveling at high speed. They can take their attention safely away from the road for a second or two at most. They can’t attend to more than a little bit of novel information, so it needs to be easy to read and understand, like this sign. Only one of the pieces of information is likely to be unfamiliar to some drivers (“TOLL PLAZA”), and since it’s still two miles away, there’s time to think about what it might mean without much pressure. 

One mile later, another sign appears, much larger and with flashing lights at each corner. This has also only one new piece of information, “CAUTION”. Drivers have now been primed that there is a toll plaza coming up (whatever that is), and they should be cautious. They also know it’s about a minute or so away. So far, these two signs show good attention management.

About a half mile from the toll plaza, drivers are told that there is a choice coming up. The choices are “EZPass” or “Cash Only”, and they are presented on one sign. Even though there’s eight separate data points on this sign, we’ve already seen most of them. The only really new information is that we’re going to have to pay some money up ahead. The driver just needs to decide between “EZPass” and “Cash Only”, which can easily be processed as a choice between purple and green. Imagine how much harder it would be for drivers to process the information on this sign if they had not seen the previous two signs.

Now that the driver has made the choice, the signs guide them to the correct lane primarily through color. The signs can be split without risk to our ability to pay attention because the information is not new, only the location is. The driver does not need to read the text; they just need to align themselves under the correct sign.

By the time the driver reaches the toll plaza, they are no longer making a choice; they are simply acting on an earlier choice and using the subtle cues that they have been carefully fed to get through the toll plaza without incident.





By directing driver attention to the right signal at the right time, the information designers have enabled drivers to make a decision within the context of an attention-heavy task. It’s impressive, and even more importantly, it’s effective; I can’t remember the last time I saw a driver trying to reverse out of an EZPass lane to avoid the $50 penalty.

Bad Apple

I love my iPhone, and I think that Apple really knows how to connect with consumers. They impress me with the way they often anticipate my needs, and with the high level of intuition that characterizes many of their interfaces. So, on the rare occasion that I come across a design flaw in an Apple product, I see it as a good learning opportunity because if Apple fell prey to it, it’s likely I will too.

I mostly use my iPhone for texting and phone calls. Emails next, then apps. I very rarely play games, watch videos, or listen to music. A little googling told me that many people report that they also use their iPhones for communications first, entertainment second.



Even more important than my usage habits is my behavior. I actually answer most incoming calls. To do this, I “slide to answer” by running my thumb from left to right. This unlocks the iPhone and answers the call. This is my mental model for "taking a call", honed over years of iPhone use.



When I am done, the “slide to answer” strip has been replaced by a red “End” strip that I tap to end the call. Simple.



If I’m using the iPhone for something else when the call comes in I’ll see a red “Decline” button at bottom left and a green “Answer” button at bottom right. Also simple. There's no need to "slide to answer" because the phone is unlocked.

So what's the problem? Like I mentioned, I also use my phone for texting and email. When I'm done, I don't lock the phone, I simply put the phone in my pocket because I know it will eventually lock itself. If a call comes in before the phone locks however, I run afoul of a fatal design flaw in which the interface not only fails to support me, it actually accomplishes the opposite of my goal.

In this case, I have left the mental model of "using an active, unlocked phone" behind and have switched to a "locked phone on standby in my pocket" model. When the phone rings, I employ my default “take a call” mental model and I "slide to answer" (and unlock) from left to right. But because the phone is still unlocked, the “answer call” UI has a red “decline” button where my thumb begins its “slide to answer" and I lose the incoming call.

In other words, I have an existing mental model that is very strong and very effective for the most common use case, which (for me) is answering a call on a locked iPhone. The problem is that I cannot easily interrupt this model when I realize it is the wrong response because it consists of a series of actions that have blended into one single routine. So even though when answering a call on an unlocked iPhone I sometimes have time to notice that the "Decline" button is visible rather than the "slide to open" affordance, it's too late. I click the "Decline" button when what I really wanted to do was take the call. Now I'm in recovery mode and I'm mad at Apple because they did not follow through with the mental model that they asked me to create in the first place.

Apple's Human Interface Guidelines is a classic, and is followed by many designers. The Apple standard for action buttons is to place the primary action to the right of the secondary, which is the opposite of Windows. In most cases, it makes sense to follow the standard. In this case, it could be argued that a departure from the standard is justified. For me, this was the most important lesson of the experience; let the use case drive the interaction, not the standards.

Apple designers, if you are reading this, please reverse the order of the buttons to support the most common use case, answering a call. I will use the "hush" button to decline calls. There may be an even better design solution out there, but for now this will support me just fine.

National School Bus Glossy Yellow

In a previous post, I discussed the importance of reserving the brightest signal in your interface for the most common task. Look at the iPhone; there are four mechanical controls (on, wake/sleep, silence, volume up/down). Three are located on the edges of the device, with only the "on" button found on the face.


Given that the face of the iPhone is a smooth piece of black glass, the "on" button is the brightest signal (at least until it has fulfilled its purpose), which is exactly what you would expect. What makes it especially effective is that the location is within easy reach of the holder’s thumb, and I will even suggest that for the holder, the location actually makes sense; they would have been looking for the button to be located here even if it was actually somewhere else. For Apple designers to have chosen any other location would have been counter-intuitive.
So what they did, I imagine, is look for the brightest signal location within the basic design prior to having added any controls. When held in one hand, the face of the iPhone is accessible only by the thumb. Pushing a button on the bottom of the iPhone face is a comfortable motion. Once they had identified that location, they placed the most commonly-used control there.

Where else might we look for examples of this "signal location effect"?

Take a look at this picture; what types of vehicles can you see?

If you’re American or Canadian, you were probably able to identify a school bus. For those who are unfamiliar with the North American school bus, it’s the long yellow-orange (the official color name is National School Bus Glossy Yellow) bus in the middle distance. It’s a “Type C”, which is the most common of the four styles. There are five manufacturers of Type C school buses, and they all follow a rigid set of design standards; in other words, they all look very similar and are unlikely to be mistaken for anything else. Many of you identified the school bus in the photo above even though quite a bit of it is obscured.



Here’s another view of a school bus, a Type A. The brightest signal is the words “SCHOOL BUS” at the top center. What makes them bright? Mostly these contrast effects-
Size- They are the largest letters
Case- "All caps" carries a connotation of importance
Location- Right in the middle of the top zone.

So what’s the problem? Redundancy. Most drivers already know this is a school bus, in fact we could identify one of these by shape, color or size. Why is redundancy a problem in this case? Because if you read the back of a school bus, you’ll see at least three other pieces of information that are actually quite important. They are safety-related, and violating them could cause injury and/or a hefty fine to the violator. And the bright signal of the "SCHOOL BUS" sign co-opts driver attention and overwhelms these other pieces of information.

Take a look at this one. You should be able to see the following items that drivers need to be aware of;


· Unlawful to pass info ($250 fine AND license suspension for first offense, up to $1,000 fine in California)
· Railroad crossing info
· Stay back 100 feet

Each of these is more important to drivers than the SCHOOL BUS sign. We know it’s a school bus; we may not be familiar with these other critical safety instructions. To complicate matters, these safety instructions have been formatted poorly. They are harder to read than they need to be because they are not in sentence case. Using all capital letters robs us of our ability recognize whole words when reading and can force us to decode each word a letter at a time. Even worse, the "Unlawful to pass" sign is not placed in proximity to the lights that will actually be flashing. And when the lights flash, they carry their own brightness that will draw attention away from the signage that tells drivers what to do.


The following items are also important, and equally muted in the face of the bright SCHOOL BUS signal.
· Emergency door
· The brake and indicator lights
· The bus number, MS159
· The license plate

Here’s a possible redesign. The brightest signal location, the top-center spot, has been reserved for the most important piece of information; Do not pass when lights are flashing. An added bonus is that the lights that will flash are on either side of the signage, which satisfies our grouping instinct and simply makes sense. The “Stay back” information has been placed where it will have greatest impact, at eye level with drivers who are directly behind it and need to stay back.

And, for little kids who may be walking to the bus and are unsure, I have placed the “School Bus” sign at their eye level.

When designing an interface, look for an existing signal location and build from there. The design will come together more logically and will support the task more effectively.

Reassuring the participant(s)

I recently visited a large financial institution in Toronto to conduct some field research with their Fraud Management team. It's a pretty serious environment, with almost no privacy for the agents; low cube walls and constant monitoring of their activities either visually or through listening to their phone calls. No cell phones are allowed, and there is a "clean desk" policy that means the work environment is predictable and impersonal.

So, when I was led to a block of Loss Prevention Agents by their manager, they looked somewhat alarmed. I found out later that it's business-only with the managers, and the agents did not know what to expect when I approached. They certainly didn't think it would be a potentially-welcome break from the routine. I knew my first task was to put them at ease in order to gather usable results.

What did I do? I smiled (always a good start) and said "Don't worry, nobody is in trouble, I'm only here to see how you guys are using our product. You can't give me a right answer or a wrong answer, I'm just interested in what you normally do in the course of a regular work day."

I could see them relax, glance at each other and smile, and then go back to work. It's always part of our protocol to reassure individual participants, but this was the first time I had to reassure an entire group!

A bag with that?

I've always been highly susceptible to subtle visual and aural cues that guide behavior. At a self-checkout earlier this evening, I zipped through the "Pay Now" stuff and was about to leave when I heard an electronic voice say "Please remember to take your bags". The command came as I was retrieving my receipt, so my attention was elsewhere. Instinctively, I pawed open one of the plastic bags. Now, I was buying a gallon of paint and had no conscious intention of putting it in a bag. It has a handle already. I caught myself as I was lifting the can, and realized that it was the use of the word "bag" that had got me. I left the store without another bag to stuff in the kitchen drawer.

Now if the voice had said something like "Please remember to take your purchases", I would have been fine. If I was buying items too numerous to carry, I would have taken a bag through necessity. There must be some reason that the designers of the self-checkout chose the word "bag" though...right? Why are they trying to get us to take the bags?

My vote is for the advertising provided by the bag. Frequent shoppers, such as homeowners and/or parents, may have mental shopping lists represented in long-term memory by a store name or logo. Seeing the logo on a bag could easily bring the latent need to the surface and generate a shopping trip, and a few more bags.

Conflict of Interest- Chairs

I was working at my desk yesterday when I realized it was almost 1:00PM. It occured to me that I should eat lunch...I was actually hungry. Then it occurred to me that even though I often get hungry before 1:00PM, I rarely eat lunch until later.

I began to wonder why I was reluctant to eat lunch; OK, so my usual fare (King Oscar sardines, Wasa crackers, apple, water) is nothing to be eager about, but why would I be avoiding it?

So, I went down to the cafeteria, grabbed a couple of napkins (the sardines are in oil), and picked a table. As I sat down, my calves banged painfully into a horizontal metal rod that spans the two front legs of the chair. Was this what made me reluctanct to eat lunch?


While pondering that, I began to think about why the cafeteria is full of uncomfortable chairs. Maybe the Cafeteria Management prefers chairs that employees don't want to spend a long time sitting in? Does that make them last longer?

Most likely, the Facilities Department simply required inexpensive, durable chairs that are stackable. The chairs certainly fulfill those requirements, but I imagine that there were several options. I checked, and there is indeed a version of the same chair that has the support rod spanning the back legs.

When designing, developing, or selecting something that others are going to use, run a pilot test first. Even two or three users can save you from expensive re-work. I recently deployed a 32-question survey; a pilot user caught a subtle issue that would have compromised several of the questions and prevented me from making some interesting correlations. I've been including pilot tests for years in my work, but there are times when I am tempted to skip it. Make sure to include this step in your plans; a little work now can save you a lot of regret later.

Big Signal for Common Tasks

The power of visual cues to guide user behavior is well known- size and color, for example, are often employed in various interfaces to call attention to the affordance that most users will be looking for most of the time. Large green “Start” buttons on copiers make them easy to use because the most common task is initiated by the most obvious control. The depth of this connection is always impressive when seen in action.

In an effort to relieve my five year-old’s cabin fever, I asked him to come outside with me to fill up the windshield washer reservoir in my car. It’s a brand new sedan, with a complex engine compartment.





I showed him the windshield washer fluid first, and then I opened the hood and said “Where do you think it goes?”

With less than a half-second’s consideration, almost instantly, he pointed at the lid to the reservoir.

“Why do you think it goes there?” I asked.
“Because it’s the same color as the washer stuff”.

The conscious design choice of the blue color for the lid of the reservoir acts pre-attentively to associate the object with the “washer stuff”, which is in the “locus of attention” (see Jef Raskin for more). Almost everything else in the engine compartment is either black or unfinished metal. Even before working memory can process the query and engage in problem-solving, there is a bias towards the large blue “cap”-object.

So, the motorist is happy because they will almost certainly succeed in their task with little to no effort. The designers applied an appropriate signal to the affordance that will be most frequently used. Other preliminary tasks, like opening the bottle of washer fluid and poking at the foil cover, can actually be more challenging than figuring out where to pour the stuff.

We’ve seen that the brightest signal will co-opt our attentional faculty. There will be a bias towards that signal that will require effort for the user to overcome. Violating that expectation through using a color other than blue for either the reservoir cap OR the fluid will impact the user's experience. Predicting and accounting for this behavior is an important part of user-centered design.

Ahead or Up?

The drive to school in the morning sometimes produces amazing insights. This morning I was asked "How do you go up?"

After a few moments of thinking, I responded with "What made you ask that question?"

"There was a sign back there that said to go up...how do you make a car go up?"

"Oh...I see." Now, I could answer the question directly, but there was an opportunity to see into the mind of a child here, so I didn't want to pass that up. "Well, it means to go straight ahead, not up."

"Oh..."

Pause. Long pause.

Me- "How would you draw a picture that tells someone to go straight?"

"I don't know."

"Well, think about it and draw a picture of it for me."

"OK"

I haven't seen the picture yet, but the point is that it's good to be looking out for these opportunities to encourage creative expression, especially in children. There's so much to be learned from a mind that has not yet been informed by common conventions, like up actually meaning straight when it comes to street signs.

The Monster in the Light

The purpose of speaking with users about products and interfaces is to align them more closely with user expectations and abilities. Observing the users as they attempt tasks, listening to them, and querying them for more details are all elements of what I call "looking for the monster in the light". Compiling the data to eventually produce actionable recommendations is the goal, but the value of the recommendations is deeply linked to the accuracy of the data.

When my two year-old began waking up in the middle of the night last week, I wanted some immediately actionable recommendations. So, I needed some accurate data to analyze.

I decided to conduct a contextual inquiry. As I carried him back to his bed, I began the interview.

"Do you want a drink of water?"
"No"
"Are you cold?"
"No"
"Do you want different pajamas?"
"No"
"So, do you want to go back to sleep?"
"Yes"

I put him in his bed.

"OK, now close your eyes."
"Can I hold your hand?"
"Yes...why do you want to hold my hand?"
"Because..."
"Because what?"
"...monster."
"Monster? Where?"
"...in the light."

My experience with his older siblings told me that no amount of convincing him otherwise will work; he sees a monster in the light.

So, I asked him to show me; he pointed to the light in the ceiling. At this point, I was stumped. I know that it's just a light. So, I changed my vantage point. I lay down on his bed and saw...a light fixture in the ceiling. Not a monster. But I know my kids, so I tried to look at the light like a child would look at the light, and suddenly, there it was; a monster.



There is a nightlight on the other side of the room that was casting a shadow across the ceiling light. As I looked at it, the sockets inside the frosted glass dome became eyes, the knob that holds the dome to the fixture became a nose, and the shadow of the dome became a hat.

Not exactly what I would call a monster, but I haven't been two for a *long* time.
So when usability professionals are interacting with users, there is a very delicate process taking place. We're trying to preserve normalcy as much as possible , so that the user behaves as they would if they were actually engaged in the task- but it's difficult to remove your own perceptions and sensibilities from the observation process.

Kind of like looking for the monster in the light. You have to divest yourself of everything that you know about the product or interface, which can smooth the underlying user-perceived reality.

PS- I moved the nightlight to the other side of the room, and we all sleep soundly now.

Creative Thought ,Part Three of Three- Focusing

As the cycle of creative thought matures, we enter the second “focusing” stage and move from identifying correlated items to causally related items. During this phase, we refine the idea, gradually narrowing our options as we seek to arrive at a conclusion. We also move into the realm of direct, conscious thought in the working memory space, and we let the mind direct its higher cognitive functions to consider the potential solution for appropriateness and validity. However, working memory is self-limiting for efficiency, and can hold a handful of items at most. We can extend its capacity through representing its output graphically, thereby preserving the creative idea and offloading the burden from working memory to a medium that we can still leverage. The use of imagery specifically can produce greater success than text alone, as our minds are extremely well suited for image recognition and recall. Since the vast majority of the experiential content that we encounter everyday is made up of shapes, colors, spatial relationships and other non-textual inputs, the mind needs to store much more than just words. The creation of a graphic artifact can increase comprehensibility of a concept or problem through pictorially representing things that are harder to store in short-term (working) memory if presented textually. Again, working memory is limited, so a bulleted list detailing the physical characteristics of a person is less efficient than a simple drawing, which conveys the same information but in a format that is a better fit with the cognitive power of the mind. The visualization of the creative thought has further benefits in that working memory can now better analyze the output…missing items are more obvious, new connections can be made, and causal relationships made evident.

Creative Thought Part Two- Brainstorming

The early stage of creative cognitive activity is familiar to most, and is often known as “brainstorming”. This “anything goes” phase of a creative session is characterized by the free-form generation of long lists of items. Since this material typically includes the final product, albeit in an embryonic state, it is critical to obtain as much raw material as possible. This phase of almost subconscious tapping of the mind should be sustained until a suitable amount of data has been generated, but the mechanics of this associative phase and the pre-disposition of the mind to reach conclusions introduce their own limitations. As the mind traverses long-term memory, it gradually narrows its options and resists returning to the associative state that results in novelty. This can be problematic if the creative process has not proven fruitful, and more incubation is necessary. In the words of Donald Norman, “People tend to focus on the active hypothesis and once focused find it difficult to change even in the face of contradictory evidence.”

Let's look at what must happen cognitively during this phase. First, by definition, creative thought is implicitly novel. That means that it cannot already exist in the mind. Rather, existing memories must be combined through association to form new insights. The associative nature of the mind encourages creative thought by allowing thought to wend through various regions, retrieving more data along the way. As previously mentioned, the mind will soon turn to pattern and routine, and the opportunity for creativity may be lost. The use of a visualization technique such as a “Mind Map” can play an important role in encouraging the preservation of this associative mode. Through writing or drawing a key concept of the task on a blank page, branching sub-topics can be added and then further extended. As elements of creative thought are added to the visualization, we can prolong this associative brainstorming phase and mine the rich store of potential contained in our long term memory through this external mirror.

Up next- Focusing.

Grouping

In order to rapidly make sense of novel situations and interfaces, our minds will "smooth" things. It's important to note that this smoothing will override reality if reality is too difficult to comprehend. We don't like the unknown as it may contain threats, which in turn incur stress. So, a great deal of cognitive resources are devoted to decoding and understanding that which is in front of us at any given time.

Since this decoding can't take too long (our defensive mechanisms "demand" a response and attentional resources cannot be pointed at one thing for too long) our minds will actively engage in parsing scenes by grouping elements. We seek relationships where none may exist simply because it helps us to understand, and if we understand, we can formulate a response. A preattentive feature that can be used effectively to indicate grouping is similarity. This can be further broken down into text size, color, and shape. Items within a scene that share any of these characteristics are liable to be grouped preattentively, especially if they share proximity. A good example of this can be seen by looking up at the stars on a clear night- Orion. The three-star belt with the four-star extremity square seems to "pop" out at the eye. Why? The stars are roughly the same size, color, and intensity, and easily "form" a geometric shape.

The grouping instinct was demonstrated to me by my own mind a few years ago. I went to a library to conduct some research and approached a study table. No one was sitting there, but a crumpled paper bag from a bakery was on the table. Instinctively, I looked around for an owner; not seeing anyone that fit my definition of an owner, I sat down and immediately felt uncomfortable. A thought occurred to me- "Anyone looking at the table will assume the bag is mine, because it is close to me and because an inanimate object like this bag has to have an owner; it can't get around by itself". A few minutes later, a student came to the table, looked at the bag, and then looked at me.

I found it easy to believe that he had grouped me with the bag. He thought it was mine.

After a few more minutes, I saw that a computer station had opened up, and I decided to move. As I picked up my papers and bag, I watched the person who had joined me. He didn't look at me, but he did look at the crumpled bag.

I also found it easy to believe that he was now grouped with the bag.

Implications for information design are that users will group elements of your interface, whether those groupings are real or not, simply in an attempt to understand. Since this is the case, use color and shape carefully, as these can act as confirmational cues to a user-created group that may not reflect reality. This may in turn cause confusion and unsatisfactory experiences.

Form vs. Function

Here's a chart I just pulled from MOSS 2007. The stylized tubular column looks great, but makes it difficult to determine what the number is. Look at the two columns on the right.

For quick analysis of numbers, use simple line charts. Our eyes are excellent at determining line-length, but far less able to judge area.

Creative Thought

The human mind is a marvel. It allows us to experience life through managing our senses, it directs our emotions, it maintains our bodies, and it has produced each technological, medical, and societal advancement in human history. As is well known, it contains billions of neurons, each capable of holding an event or sensation for later recall. In order to allow humans to occupy a dominant role in the world, it is designed for maximum efficiency in the areas of communicating and survival, and it is here that we encounter the first signs of the limitations of the mind. When we ask the mind to perform tasks that are less directly related to its core functions, the very same traits that act as facilitators turn into hindrances. Creative thought is one such task…the mind excels at recording experiences and storing them in long term memory as what is termed “knowledge” and can later be rapidly searched to identify opportunities for advancement or countering perceived threats, but creative thinking must extent beyond the known. Breaking free of the limitations of the mind requires external assistance, which can be effectively offered through the use of information visualization.

The demand for creative output exists within almost all spheres of human experience. Regardless of the nature of the task, there are common cognitive requirements that characterize this mode of thought. Once tasked with engaging in the creative process, the creator and the eventual output will move through a number of stages. The initial preparation stage sees the creator assembling the raw materials that will be used to address the task, such as understanding and evaluating previous efforts. As the creator enters the second incubation stage, the process typically recedes to the subconscious, where associations between the raw data gathered in the first stage can be made. Ideally, this phase will see the crystallization of creative thought into a rough solution in the third illumination phase. The final verification phase involves the refining and communicating of the new thought. These four phases can be arguably combined into two categories, unconscious brainstorming and conscious focusing. An examination of these two models will lead us to understand how the mind’s strengths and weaknesses can be manipulated through visualization.
Models of the first category will focus on the presence of associational mechanisms as related to creative success. This mode of thought is more intuitive, and can reveal connections that are not obvious, but may contain potential solutions. However, the mind does not predictably enter this spontaneous state of defocused attention. Models of the second category will be constructed on the premise that “the expression of a creative insight requires a high level of skill, knowledge, and/or technique that depends upon continuous problem solving” (Dietrich 2004). This focused mode of thought, while potentially more manageable and therefore predictable (i.e. applying a trial and error approach), can limit the amount of raw data available in working memory to about four items, which presumably affects the level of innovative thought that is possible. Research has also shown that performing at a high level of concentrated thought over time is draining to the attentional system, and cannot be sustained. It is further suggested that these two categories may not be mutually exclusive, but may be cyclical phases of a single, integrative model.

Stay tuned for the first phase, Brainstorming.

Respect User's Time for Better Satisfaction Rates

I was a member of a team earlier this year that conducted a competitive analysis in which we examined user satisfaction rates for two websites. While task success rates were not significantly different, task times were.

We were able to correlate this to a positive reponse to the question "Would you recommend this site to your friends?". Shorter task times meant that users were more likely to promote your site.

So, optimizing task times may be an important part of building a network of site promoters. More to come as I conduct additional studies this fall.

Multimedia Learning

Documenting our experiences for various purposes has been a human constant since creation. The use of imagery in various cultures to accomplish this could be ascribed to the lack of a written language, such as the petroglyphs of the American Southwest, or to the prevalence of illiteracy, such as the religious icons of Russian peasantry. We might equally acknowledge that imagery is an instinctively powerful medium, and has been used throughout history for that reason. Why is this so? We can certainly point to the speed of visual perception, or its permanence. But imagery, which Stephen Kosslyn terms “a basic form of cognition (that) plays a central role in many human activities”, can be used to tap into long term memory. Images are encoded into the brain via the ventral and dorsal systems, which are inputs to associative memory. Working memory processes visual and verbal information through two separate channels, and learners can use both effectively to select and organize new information that can be integrated and passed into long term memory as a schema. It is important to note that textual information alone, such as this page, may be encoded and processed via the visual channel. However, studies have shown that inclusion of images with text increases the likelihood that the learner will employ both channels, and therefore create the potential for deeper learning. This approach is not foolproof however, and instructional designers must create artifacts that complement cognitive architecture, or risk overloading working memory.

Coding information into memory through using both visual and verbal channels is known as dual-coding theory. An image viewed by a learner is encoded by the visuospatial sketchpad component of working memory as an imagen. Descriptive text in proximity to the image is generally encoded by the phonological loop component of working memory as a logogen, but may also be encoded via the visuospatial sketchpad. The internal representation between the image and the text must also be encoded in working memory…this referential connection is key for successful integration with long term memory. Memory for this integrated information may be improved by the two systems acting as load-balancers for working memory, and perhaps also through the enhanced information maintenance ability of working memory when text is bound to an image through proximity. Presenting the learner with visual and verbal explanations that are positioned next to each other, rather than simply found on the same page, is termed the contiguity effect, and has been shown to enable deep learning of this dual-coded information through effective construction of referential connections that are stored and retrieved from long-term memory in the form of schemata.

However, dual-coding can actually incur cognitive load if not employed carefully. If the visual and verbal explanations are not closely integrated on the page, working memory must be directed to locating and comparing the referents. Known as the split-attention effect, this reduces working memory’s capacity to support learning. Dual-coding based instructional design can also incur working memory load if textual descriptions merely redescribe an image or diagram. This redundancy effect requires working memory to differentiate between unnecessary and essential information, a non value-added process with deleterious results. These cognitive load effects highlight the potential risk of combining images with text inappropriately for both domain experts and novices, which can be further understood when seen in context with some functions served by placing images in text. Decorational images are just that, decoration with no educational component. An image of a seagull placed next to a passage about the ocean would add no value, and would likely elicit the redundancy effect. Representational images depict the actual textual descriptions, and depending on their complexity may incur the split-attention affect. Organizational images complement the structure of the text, and would likely provide the desired benefits of dual-coding theory as they support the text rather than competing with it. With this background, the use of imagery to drive knowledge transfer can produce deep learning and practical benefits.

Windows Server 2008

I was logging on to a Windows Server 2008 box for the first time recently, and was tripped up by 15 years of routine. I entered my login information, and clicked a large button below the entry fields. Take a look:



















I expected to see a desktop, but was surprised to see this:

It happened once more before I realized that I was hitting a button that said "Switch User"; the action I was seeing was entirely normal. However, it was so difficult for me not to hit that button! Not only is it a big button, and not only is it located right where the "OK" button is located on all previous server login screens, but it is designed with a half-glare effect that makes reading the light text/dark background instruction effortful.


The correct action is to hit the little circle with the arrow in it, seen just to the right of the entry field in the top image. It has taken me several days to get used to that. I wonder what drove Microsoft to change their design for logging in? There's no apparent benefit, and the seemingly-minor problem that it caused adds to a probably-undeserved bias against the company.

It seems obvious, but routine governs so much of what we do that to ask users to reset a routine that they have developed in the course of using your product or interface should not be undertaken lightly. In the coming weeks, I'll be writing about steps I took recently with a major non-profit to mitigate the effects of change.

Nordstrom- Decison-making in Online Shopping

Traditional brick and mortar retail outlets are often complemented by a click and mortar counterpart. Rather than competing with each other, these two channels can work together within a company to increase sales. For example, a visitor to a store may be interested in an item, but defer the purchase for an unknown reason. On the way out of the store, a large sign promoting the URL of the store’s website allows the visitor to see the item again from the comfort of their home, without pressure, and possibly complete the sale. A web surfer abandons a cart, but notices on the website that there is a retail outlet nearby. A desire to actually see and handle the item prior to purchase is easily fulfilled, and the sale is made. A well-designed website should either leverage an online consumer’s prior knowledge to facilitate a choice process, or improve the consumer’s mental model to increase the chance of a later sale in a physical store.

Nordstrom is a high-end retailer with two stores in Massachusetts. The stores are not conveniently located for all Massachusetts residents, nor are they open 24 hours a day, seven days a week. If a customer does venture into a store, they may or may not find an associate to help them, but they will certainly be able to create or enhance a mental model of the store, with various schemata for items of special interest. Once at home, can these mental models be activated via the always-on internet? A visit to the Nordstrom.com website presents us with images of mannequin-like models wearing the latest fashions…these stylized poses could trigger memories of similar poses seen in the in-store displays. A prominent “free shipping” banner anticipates the online shopper’s concern that shipping charges will raise the true price of their potential purchases, and make the online browser comfortable enough to be a potential online shopper. A large array of shopping categories is evident, including men’s suits. Can we use prior knowledge to convince someone to purchase a suit online? Surely the fitting process is a time-honored part of purchasing a garment? If we browse for men’s suits, we soon see images of trim, young men wearing elegant suits. These models often have a body shape that enhances the appearance of the clothing. The selection process dictates that we use existing mental models of ourselves to encode these images into memory, possibly selecting details regarding the age, hairline, and physique of the models that may confirm an idealized self-image. The images are then abstracted, further reducing the fidelity of the percept as it is encoded, and then interpreted by using general schematic information, presumably about ourselves in this case, to compensate for the reduction. Finally, the image is integrated into our memory store by modifying our existing schema of ourselves. It has been proposed that ego plays a major role in the acquisition and organization of knowledge. This process could theoretically cause the online shopper to encode a mental model of themselves wearing a Nordstrom suit, possibly even adopting some of the physical characteristics of the models to result in an idealized version of the self. This would perhaps fulfill the personal fitting process to some extent, and may create a positive affective response within the consumer towards the purchase.

Other possibilities for combining the best qualities of the online and in-store experiences include the activation of a “purchase” schema through a well-worded “Add to Shopping Bag” link. A “shopping bag” in the context of Nordstrom could suggest a completed sale, which (in the store) is placed into a bag, further influencing the choice process. The more familiar “Shopping Cart” text used by most websites would potentially invoke a “supermarket” shopping schema, which would be a poor fit with the Nordstrom brand. The next screen reverts to using the expected online language for completing the sale, “Proceed to Checkout”. Many adult users, who may not be accustomed to spending $1000 on a garment sight-unseen, will likely be accustomed to obeying the instruction to “Proceed to Checkout” on other websites and will therefore possess an “online purchase” schema. This familiar term may help them to invoke this schema, overcome any remaining reluctance, and complete the purchase.

Schemata allow humans to operate with high efficiency. However, schema creation and invocation is not an exercise in high-fidelity recording and storing of experiences, but is a highly processed method of internalizing information. Understanding these processes can help predict user behavior and allow us to design for better performance.