A UX State of Mind

Author Archive

Two Weeks with Maemo, Part I; Nokia N900 Review

by Brian on Sep.08, 2010, under Mobile Computing

You Follow Sports, I Follow Mobile Tech

Many people don’t know this, but I loved Maemo, Nokia’s open-source mobile operating system, before I had ever experienced it. Like a kid with a crush on a movie star, I remember subscribing to the mailing list last October at maemo.nokia.com so I would be notified by e-mail when the N900 came out.

Come on, Linux on a mobile phone? I had often fantasized of Ubuntu being my Windows replacement, so maybe Maemo would be the platform to finally replace Symbian.

Enter Paul

Now, almost a year later, I get to meet my celebrity crush… Thanks to the folks at WOMworld, I get to spend two weeks getting up close and personal with an N900. Of course, I’ll be writing about it!

Not Your Typical Review

My situation is different from most tech reviewers, though. Most product reviews are intended to report facts; they very scientific, clinical in their approaches, explaining a device’s specifications and so on. That’s fine, but it’s been done already for the N900.

I’m going to tell you how it relates to my life.

As a mobile tech geek, my mobile plays a huge role in my life. It’s my memory, my brain, my umbilical cord to the world and the digital “me.” In other words, this review is going to be very personal.

I’ll try to be as impartial as I can; I am also currently using an HTC Desire, a wonderful Android phone, my first touchscreen device, and the inevitable benchmark of comparison. I’m also aware of the broader issues involved in the maturity of the Maemo and Android platforms, especially when it comes to apps.

Thanks for reading; stay tuned for more!

2 Comments :, , , , , , , , , , more...

Our “Duty of Vision,” According to Philippe Starck

by Brian on Jun.01, 2010, under Outside the Box

I watched a nice TED talk by Philippe Starck yesterday, where he thinks about design in the context of our evolution and the human “story.”

Click here to see the talk.

At around the middle of his talk (7:03 in the video), he starts describing what he calls our “duty of vision,” framing it as the angle of vision we humans (“mutants” in the context of his story) should look while walking. I found his metaphor so wonderfully visual that I drew it on paper while watching the video and decided to make a digital version here.

You may not agree with everything Starck says, but he does a great job of putting design and our duty as humans in perspective of our story. Watch the video, I promise it’s worth the 17 and a half minutes!

Philippe Starck's Wonderfully Visual Metaphor for Humanity's Focus While Moving Forward

Leave a Comment :, , , , , , , , , , , , , , , , more...

Café au Design: Exploiting Affordance to Communicate Purpose and Function

by Brian on May.14, 2010, under Usability is everywhere

Annotated Photo of the Saeco Odea Coffee Machine Interface

Visual hierarchy communicates the relative importance of these three controls. 1: "Brew" button, 2: "Foam" button, 3: Water knob.

I was in a restaurant the other day and came across this wonderful coffee machine, the Saeco Odea. Two things caught my eye; first, the huge “coffee” button smack in the middle of the machine’s face and second, the apparent lack of many other controls.

There are three other buttons, but they’re for maintenance stuff; I won’t get into them here.

This is what the design tells me:

  1. The big button with a coffee mug on it is my most important button and will be used most frequently.
  2. If I want to froth milk, I can do so with the knob next to the steam wand that looks just out-of-place enough to be noticed.
  3. This (well-marked) knob allows me to quickly adjust how “big” the coffee is going to be that comes out when I press button number 1.

How It Looks

There’s no way I can miss that huge button; it’s like the big, fat green button on a copier for “gimme one copy.” It affords instant activation of the machine’s default action, “make coffee.”

I love that the water knob is basically a part of the big button. They’re positioning (and the lightweight feel of turning the knob) gives me the feeling that it’s not a problem for me to change the amount of water for each and every coffee I make, if I want to. I’ve seen coffee machines where you have to set the water level with buttons each time (like an alarm clock); that makes me reluctant to customize my coffee, giving the water level a more “set in stone” feeling.

There are two good things about the steam adjustment knob. Firstly, it’s a knob and not a button, which one also sees often in coffee machines. I’m no expert milk frother, but if I was, I’d sure love to have something to twist to make the machine do what I want. Secondly, it’s placed so as to break one usability guideline in favor for another…

How It Works

Grouping Stages In Processes or Tasks (Diagram)

Here, we see that the process of making coffee (blue) is localized in the center, while frothing milk (yellow) is all on the left.

The brilliant thing about putting the steam knob to the left side over the steam wand, instead of in the middle with the rest of the controls, is that it creates a task-based control grouping.

The machine exists for one purpose: to make coffee. Some coffee preparations require frothing milk, so the machine does that, too. That’s it.

The two are separate processes though, with no shared control elements. The Odea cleverly separates them so that task 1, making coffee, is in the front and center of the machine. As you can see in the picture to the right, these steps go in a straight line from the bottom, up.

  1. Place mug under the dispenser
  2. Adjust amount of water
  3. Press the button

Similarly, task 2, frothing milk is localized and separated from task 1. Again, from the bottom, up.

  1. Place mug under the steam wand.
  2. Activate and adjust the steam for the milk.

Why I Love It

Service in a restaurant can be fast-paced; there is usually too little time to learn how to use a new coffee machine. With clear affordances and visual hierarchy, one knows in a glance how to work this one. Even experienced, routine use is made faster this way. There is no menu through which to navigate and no options to select, just one button to press. The button is big too, also making things faster (Fitts’ Law, anyone?).

All this means a simple, fluid user experience that is almost like an afterthought, letting people just make coffee. Isn’t that the point, after all?

Leave a Comment :, , , , more...

Three Ways to Upgrade Your Corporate Web Presence and How You Can Screw Them Up

by Brian on May.06, 2010, under Tutorials

The landscape of the web has changed so that a static website just doesn’t cut it for a company’s web presence. This makes me happy, because it’s wonderful to see the intriguing and interesting ways businesses engage their customers on the web. Here are three relatively simple but effective strategies businesses can employ to that end:

  1. Spread the word by increasing online traffic
  2. Leverage social networking and blogging to promote a brand
  3. Make sales easier via online purchasing

These are great things to do, but like all things, even the greatest ideas are ruined by poor execution. What often happens is that a web designer will go to town and whip out an awesome solution that fits the agreed specifications, but the organization isn’t set up the right way to handle it. Things go wrong, projected goals are not achieved, and the designer often gets the blame.

  • Designers: Perform a thorough requirements analysis at the beginning of every project and tailor your promises and project goals accordingly.
  • Managers: Realize that a designer can build you a great tool and tell you how to use it, but it’s up to you and your organization to use it right.

1: Increasing Online Traffic

Very simple: you’ve got a website, and you want more people to look at it. It takes more than a redesigned website to really attract more eyeballs (though standards-compliance and SEO do help).

How It Goes Wrong

No relationship to offline marketing

I’ve talked to lots of managers who think that “if you build it, they will come.” Not so! Traditional print and media (TV, radio) marketing can get the word out that you have a great website, especially if you specify that it’s new. You could even offer web-only coupons and post a sign at your points-of-sale about their availability. The point is to make your part of the internet relate to customers’ real-life experience of your business.

Ignoring mobile

People have internet-connected devices in their pockets, why aren’t more businesses using this to their advantage? Ways to leverage this could be as simple as putting your website’s web address in a 2D barcode on flyers or as extensive as building your own location-activated mobile app.

Pushing business goals over user experience

This happens way too often, because businesses often don’t realize they’re doing it. Business goals dictate that customers should be shown certain bits of information when visiting the website (ads, company information, information about that new product), but users may have other goals for their visit. The trick to balancing these goals is showing users only as much of “your” content as they are willing to look at to get to “their” content. Think of it in terms of TV: watchers will only sit through a certain amount of commercials to watch a given show. The more interesting the TV show (the content on your website they want to see), the more commercials (content you want them to see)  they’ll sit through to see it. If you push too much of “your” content on them, they’ll not come back to your website.

2: Get Social and Engage Customers

Lots of managers hear about other companies using sites like Twitter or Facebook (in Germany WKW, the Netherlands Hyves) to engage customers, and they want to do it, too. It’s a relatively new thing, so most people have the wrong ideas about it, plus it’s so complex that it’s become its own field of marketing. Building a compelling presence in social media takes resources and a clear corporate image: don’t do it unless you’re ready.

How It Goes Wrong

Fire and Forget

Social media and (micro-)blogs are great for engaging people in a conversation. What gets forgotten (or many just don’t realize) is that it’s not just about setting up a profile somewhere and leaving it alone. Like any conversation, it’s only interesting when both sides are active, meaning that to engage customers in a conversation, a company must be and stay engaged, too.

There needs to be someone in your organization who is responsible for continually adding content and making sure your social media presence does not get static or boring. If your content doesn’t change for while, people will forget you.

Censoring Customer Input

Another thing that kills a conversation is when only one side is talking and blocks what the other side wants to say. When writing a corporate blog, for example, it is tempting to delete or not approve negative comments. Deleting frank comments on your Facebook fan page’s wall is another example if this.

Instead of putting the muzzle on sources of feedback (easy but bad), try conversing with them and coming to the root of why they write negative things about you (hard but very good). You’re not catering to this one person but to everyone who notices your open conversation happening and is inspired by the fact that you stand by your products and services so much that you are willing to take the time to discuss them online. You read me right: inspired. This works best if your organization is clear and open about its goals and values.

3: Let People Buy Your Stuff Online

What could be better than making it so that your customers can buy your products from in bed? Online stores are great, and they make it easy for people to spend their money on your stuff. Like social media though, it’s not a stand-alone sales booster; work and resources have to be in place to use an online shop properly, and your business must be ready for it. An effective online shop requires a stable and working supply chain: don’t do it unless you’re ready.

How it Goes Wrong

Overcomplicated Pricing Models

Most online stores deal with manufactured goods that are easy to price, e.g. this item costs that much, period. However, some companies deal in intangible or highly-customizable goods and services like caterers, ISP’s, or consultants. The first thing potential customers want to do is find out a general figure of how much “something like that” might cost. It goes wrong when 1) prices are omitted completely, making your e-shop a wish-list generator (annoying) or 2) prices given in your e-shop are incomplete or wrong (bad). While some (especially salespeople) may disagree with me on point #2, I see false pricing as having a worse impact on customer experience than not giving them a price at all (ethics notwithstanding).

If customers understand your pricing model, and they can order online, they are much more likely to buy something than if they have to guess or wait for a quote. This is true even if the known price of the immediate buy is higher than the unknown or ambiguous price of the delayed buy.

There are plenty of ways to do this right. Caterers could charge a base price for each basic product and a fixed fee for each addition or customization. ISP’s often take the McDonald’s approach and have packages from which customers can choose. Consultants’ pricing is hard to simplify without screwing clients, consultants, or both; an e-shop isn’t for everyone!

Unprepared Organization

Like using social media, an e-shop is its own entity, something that must me attended, maintained, and monitored with enough resources to sustain it. If all customer orders are going to one person’s inbox who also works as a manager on the factory floor, many will fall through the cracks. This creates a situation where your website promises something your organization can’t deliver.

Similarly, if your production is already maxed out by current demand (or if your consultants are maxed out with the current workload), it’s disastrous to make it easier for customers to buy more stuff. This also creates a situation where your website promises something your organization can’t deliver.

When you promise things and don’t deliver, people stop liking you. Make sure that the organization is ready for any additional resources an e-shop may require and your production can keep up with increased demand. This will allow you to promise big and deliver big, hopefully letting you earn big.

In Summary

Designers: Don’t see design in a vacuum! Learn about business and organization, at least enough to view your work in context and alert clients to the potential pitfalls of misusing your creation. Oh, and while you’re at it, practice your “Dammit, Jim, I’m a designer, not a miracle worker!” speech.

Managers: Don’t see design in a vacuum! Try to understand the business ramifications of what you commission to have made for you and/or listen to designers when they try to explain them. Oh, and stop blaming your website for things that are your organization’s fault!

Leave a Comment :, , , , , , , , , , , more...

I Don’t Know What A Browser Is, but I’ve got 500 Friends Online

by Brian on Apr.16, 2010, under Psychology in Design

Users of computing technology used to be categorizable into either the elite bourgeoisie of programmers and tech enthusiasts who built their own computers or the mainstream proletariat whose computer literacy was just enough to type e-mails and use some basic spreadsheet functions. With computing (and especially the internet) having become as entwined in human activity as it has, a third “class” of computer user has developed. In short, we’re looking at a collective user pool made up of 1) creators, 2) consumers, and 3) power consumers.

Three Types of Computing Technology Users

Users of computing tech tend to fall into one of three groups: 1) Creator, 2) Consumer, and 3) Power Consumer. (Click to enlarge)

Now, before I jump into the topic, I would like to say that these groups are not homogeneous. Within each of these groupings  lies a wide spectrum of “computer literacy,” tastes, tendencies, and characteristics. Some parts of these groups could even be considered to overlap. In any case, this is only my simplified model to help me understand what to expect from users.

How Things Were

Before computing was so mainstream, you basically just had the people who made computers and wrote programs (creators) and the people to whom they sold computers and software (consumers). Creators knew a whole lot, and consumers knew very little, so the knowledge gap between the two groups was huge.

Now Computers Are Everywhere

Almost everybody has some form of computer now or has at least been exposed to computing technology. In the developed world, we have our home and/or work computers, maybe a smartphone or feature phone with Java games, a digital music player, home cinema setup with HDTV, and countless embedded computers in places we don’t even notice them anymore. The BoP is seeing amazing growth in mobile phone adoption, so people in developing areas are also becoming increasingly exposed to computing tech.

What this means is that the gap is closing, technology is democratizing many of the activities which could only be carried out by professionals with special equipment, and a third archetype of user is emerging. This third archetype is known as N-Gen, the Net-Generation, and Generation Y, but I prefer to focus on behavioral instead of demographic characteristics and call them power consumers.

Here are some of those behavioral characteristics I mentioned:

  • Like good pilots, they may not understand the mechanics of the equipment they’re using, but they can use the hell out of it.
  • These users are imaginative and innovative, often coming up with creative and unforeseen ways to use the things they have.
  • They tend to be socially oriented in that most of their usage of computing tech has some social aspect.
  • Consumers often become power consumers as soon as computing tech reaches a sufficient level of relevance to justify the extra effort of learning more.

That last point provides my basis for departing from the generation-based nomenclature typically used for this type of user. By thinking of them as Net-Gen’ners, designers and developers automatically have a picture of tweens, teens, and twenty-somethings in their heads which automatically creates a set of assumptions which are then falsely applied. This kind of thinking also excludes users of other demographics who exhibit the same behavior and characteristics.

Why Is That So Bad?

By lumping all power consumers into the “young user” demographic category, which marketers have for so long targeted as the new favorite retail demographic, we forget the needs of older people and those in emerging markets at the BoP. Many ICT4D‘ers believe that tech consumers in such areas are severely limited by either the technology available to them, their ability to use that technology, or both. Projects like Gary Marsden’s Big Board show that users in developing areas tend to innovate beyond designers’ expectations, behavior that shows a level of savoir-faire (ok savvy then) beyond that of “just” a consumer.

Why This Is Relevant

We as designers can cater to these users by better tailoring computing technology to their needs. Do you remember the i-Opener from the 90′s? It was an inexpensive machine that just did internet. It was perfect for people like my aunt, who at the time was pretty darn spiffy for having an e-mail address and using it. The best part, it was $99; she didn’t have to pay for unnecessary computer stuff she’d never use, and it was just enough for her.

Mobile phone manufaturers are also going this route by making products for ”…younger users who are beyond the needs of a feature phone but really don’t need a full-fledged smartphone…” – Christina Warren. Joints like the Sidekick, Kin, and (my favorite) the Puma Phone offer power consumers the features they want for a lesser price than a fully-tricked-out smartphone would cost.

By trimming the fat, so to speak, we can optimize the price-to-value ratio of a product, which is especially important on the other half of the digital divide. Poor people in developing areas and in the developed world make big sacrifices to afford what they need to use computing technology that is relevant for them. Let’s please not forget them while getting caught up in “tween-fever!”

http://mashable.com/2010/04/12/kin-is-brilliant/
Leave a Comment :, , , , , , , , more...

First Do No Harm: Toward a Hippocratic Oath for Designers

by Brian on Mar.12, 2010, under Psychology in Design

Primum non nocere

First, do no harm. This phrase represents the concept of non-maleficence in medicine, purporting that it is sometimes better to do nothing than to do something harmful. It is a core tenet of medical ethics, taught to medical students around the world.

So why don’t design students get mandatory classes in design ethics?

Whitney Hess wrote a great article called, Guiding Principles for UX Designers, the title of which is self-explanatory. Her #2 guideline, don’t hurt anyone, is reminiscent of the Hippocratic Oath (again, medicine) but her explanation is much more general than what I’m getting at here.

First, Do Not Overdesign

Non-maleficence in medical ethics is in place to prevent medical practicioners from intervening when the intervention risks causing more harm than help. Design intervenes in the way things work, look, feel, behave, etc. by making decisions for users, consumers, clients, etc. so that they have to make the fewest decisions possible. That’s why we learn design, so that we know which decisions we should be making for other people.

Overdesign then, in this context, is making decisions for a user that impede the user’s freedom in ways that detract from her user experience.

Notice the two components there:

  1. Impeding users’ freedom
  2. Detracting from user experience

Component number two is important, because I am not trying to denounce the practice of impeding users’ freedom across the board. That’s what designers do. It only becomes a problem when users actually want or need the “freedoms” we “design away.”

Apple, for example, uses its closed iPhone/iPod+iTunes platform as a unique selling point. It takes away the freedom of downloading apps and music wherever you want but gives users added security and a more robust user experience. This is like my mom cooking me dinner: I have no “freedom” in what she makes, but I  know for (damn) sure that it’s going to taste wonderful. Linux operating systems, on the other hand, are more like cooking yourself; you have ultimate freedom in what you have for dinner, but it will only be good if you are skilled enough to make it good.

Dinner and Hegel’s Dialectic

Diagram of Freedom in User Experience

Different UX philosophies imply different power structures between user and system. N.B. The term "casual user" refers not to users who use their systems casually but to those, who do not want to configure things, they want their systems to "just work."

Hegel’s Master-slave Dialectic (Herrschaft und Knechtschaft) illustrates how a Master is dependent on her slave on multiple levels. The principle is applicable to almost any relationship where one entity performs actions to the benefit of another; they might as well also be referred to as Lord-servant, Teacher-learner, Citizen-government, or User-system.

To reuse my example above, if my mom is cooking for me, I don’t have the freedom to choose what is served for dinner. This means that even though my mom is technically the “slave” (only because she’s cooking dinner) in this example, she is in the real position of power, because she makes the decisions on what I will eat. I give up my freedom willingly to have a wonderful meal. Once I learn more about cooking, I may want to cook for myself, trading ease-of-dinner for the freedom to customize and eat what I want.

So What Does That Mean for Design?

As designers, we are in charge of crafting systems for Users or slaves for Masters. In many instances, especially when we are designing for users who crave simplicity and ease-of-use above all else, because they do not have the time or patience to customize.

People trust us designers to make decisions to improve their lives.

In that, we have power. With great power comes great responsibility. It is our duty to take this power seriously and not, though negligence, misplaced good intentions, fear, or control-freakiness, abuse our power by overdesigning and making so many decisions for users that their experience is constrained and frustrating.

As a designer, I hereby swear to first, do not overdesign.

Yeah, that means doing my best to strike the perfect balance between simplicity and function, security and freedom. That’s where the art part of design comes in, and that’s why design is fun. If we had a designer’s oath, what do you think should be in it?

Leave a Comment :, , , , , , , , , , more...

6 Ways Make Your Party Pix POP with Photoshop

by Brian on Mar.05, 2010, under Tutorials

Original Party Pic

(Click to enlarge) The Original Party Pic. Feel free to download this to follow along with the tutorial or use your own party pic!

Here is a photo of me with a good friend of mine in Antwerp for her birthday party a while back. Yes, we are singing karaoke in the photo and yes, we were fabulous (that’s my story, and I’m sticking to it!).

As you can see, the flash washes out our features a bit, the composition could be more interesting, and the background is busy enough to distract from the subjects.

I like my party pix nice and high-contrast, with deep, dark blacks and rich colors. Before doing anything with the image though, I’m going to save it under a different filename, so I can keep the original.

1. Cropping the photo

I enjoy breaking the convention of the typical digital camera aspect ratio, so I’ll first crop the photo to give it more of a “widescreen” feel. Hopefully, this will make the photo more interesting. The crop tool can be invoked by either pressing c or clicking on the crop tool icon in the tool palette crop tool in photoshop.

party pic - cropped

Here's the pic, cropped

2. Sharpening it Up

Image of The Smart Sharpen Dialogue in Photoshop

The Smart Sharpen Dialogue in Photoshop

Before tweaking any color or light stuff, let’s go ahead and make it a bit sharper. There’s nothing wrong or out-of-focus with this image, but I personally would like to open smart sharpen and subtly sharpen it up. This can be found under Filter > Sharpen > Smart Sharpen. There are other sharp filters there, but smart sharpen provides the most control.

To keep it subtle, I’m keeping the amount low and holding myself to a radius of 2 pixels. The important thing is to not over-sharpen the image, which could put halos on the more pronounced edges.

3. Adjusting the Levels

Levels Dialogue Photoshop

Levels Dialogue Photoshop

So now, it’s time to do something about the general light situation… Let’s start by adjusting the levels of the image by selecting Image > Adjustments > Levels... or pressing Ctrl+L (Windows).

I usually don’t mess with the output levels, preferring to play with the input levels instead. As you can see in the screen snippet on the right, there is a long tail on the left side of the histogram, which I find common in party pics and pics taken with mobile phone cameras.

For this photo, I’m moving the black level (black, up-pointing triangle below the histogram) up to the edge of the histogram to make the shadows darker. I also moved the midpoint (greys) more toward the right, making the mids darker, too.

Party Pic - Levels Adjusted

Here it is after adjusting the levels

4. Adjusting Hue (and Saturation)

Screen snippet of Photoshop's Hue/Saturation dialogue

Adjusting the red colors' hue... slightly

After adjusting the levels, I see that the shadows on my friend’s face look a bit too red. In other words, we want to change the red colors on there to something less red without affecting the rest of the colors.

Photoshop’s Hue/Saturation adjustment dialogue does the trick! It’s under Image > Adjustments > Hue/Saturation… or pressing Ctrl+U.

To limit the changes to the red areas, we can select Reds from the drop-down menu. I only shifted the hue to the right by 5, because more than that would make the both of use look yellow. See the effect:

Image showing effect of adjusting hue

Notice the change in the red shadow on her face here.

It’s also clear that my poor friend has red-eye in this photo, so we can use a quick and dirty method of removing it (more thorough method here).

Since it’s the quick and dirty method, I won’t go into it here in detail, but I just used the wand tool (press w or click image of wand tool icon in photoshop in the tool palette) to select the red pixels in her pupils. I then used hue/saturation to lower the lightness to the point that the pupils became more dark grey than red.

5. The Burn Tool

Adjusting the levels helped to compensate for the flash washing out our features, but we can further enhance the effect with the burn tool, which can be invokes by pressing o or clicking in the tool palette. The burn tool takes whatever color you pass it over and makes it darker. The opposite is the dodge tool.

For this image, I just burned midtones in our faces and arms to bring out the details and burned shadows on our clothes and my friend’s hair.

image after burn tool(Click to enlarge) Here is the picture after burning some midtones and shadows on the subjects.

(Click to enlarge) Here's the image after burning the background.

To bring out the subjects a bit more though, we can burn some of the background to subdue it. For this, I will increase the size of the brush and stay away from the subjects. My approach here was to gradually darken the background more moving outward, so that the edges of the image are almost black while the area around the subjects remains a bit lighter.

6. Faux Bokeh

Another way to make subjects stand out from the background more is blurring the background. Usually, this is done by using clever focus settings when taking the picture, but we can fake it with Photoshop. The word bokeh comes from Japanese and refers to the aesthetic quality of out-of-focus areas in an image, but people also use it to refer to the “blurred background” effect.

We can find the blur tool in the tool palette . All I am going to do is blur the background around the subjects while trying not to overdo it but still achieving a pop-out effect.

Final image after tutorial

(Click to enlarge) Here's the final image after blurring the background.

And That’s It!

Thanks for reading and please feel free to comment, especially if you’ve got suggestions on how to do it better.

Leave a Comment :, , , , , , , , , , , , , , more...

Usability in Salsa Dancing: Models in Learning and Communication

by Brian on Feb.25, 2010, under Psychology in Design

Picture of Two People Salsa Dancing

Salsa Dancers in a Club

When we try to understand things, we model them so that we can more easily comprehend the elements of concepts and phenomena that we need to accomplish our goals. Why then do we not apply the idea of modeling more often in learning and communication?

What is a Model, Really?

A model is a simplified representation of some reality, designed to allow us to more quickly comprehend that reality. A mental model, on the other hand, is the representation of that reality in our minds. The big difference is that mental models are inside our heads, and we cannot share them, whereas other models are explicit; they can be seen, shared, and compared.

Diagram of Models and how We Use Them

Models are representations of reality we use to enhance our mental models of reality. As our mental models become more detailed and accurate, we learn.

Take a car as an example. A car is an system that exists in reality. A child has a very simple mental model of a car that comprises of a general idea of what it is for and perhaps how to open doors and windows. When a person learns to drive, s/he increases the detail of her/his mental model by using explicit models like driving manuals and computer simulation programs. A driver’s mental model thus includes things like how to start the car, turn radius, clutch operation, etc.

Auto mechanics have even more detailed mental models of a car, because they know more about its inner workings. A driver knows that when s/he turns the steering wheel, the wheels turn as well. A mechanic knows that turning the steering wheel turns the steering shaft, which turns the pinion, which moves the rack, which pulls the tie rod and steering arm, etc. The mechanic’s mental model is more detailed than the driver’s, because s/he needs to know more to fix cars than the driver needs to know to drive them.

Using Models to Communicate

Since mental models are inside our heads, we need to use explicit models when trying to share our mental models of things with others. This is communication, and teachers do it by drawing on chalkboards, designers do it by drawing sketches and building prototypes, and parents do it when they tell their kids they were flown in by a stork.

Diagram of Learning Curve

Learning a simple model of a concept in the beginning makes learning at an advanced stage easier than trying to learn advanced concepts from the start.

The problem is that models are not always used where they could be useful. In an educational or training context, some classmates of mine and I discussed whether it is better to learn how to do something the “right way” from the beginning (what I call here straight-up learning) or to learn an easy way first to master the basic concepts, then learn the “right way” later. The discussion was in salsa class, and the debate was if it is better to learn an easy version of the Salsa Casino step before learning the real step or to learn the real step from the beginning.

My position is that the learning curve is steeper (faster skill aquisition across time) with learning the model first. Indeed, when we learned the advanced step, there was a sort of delay caused by having to first “unlearn” our learned habit of the easy step. However, with the easier step in the beginning, we were already able to learn some figures and turns before learning the advanced step. From the perspective of learning experience, it would have been much more frustrating and have delayed the reward of successful learning if we would have been taught the advanced step from the beginning.

So, What Does That Mean?

When designing a training course or class curriculum for complex concepts or procedural knowledge, please consider doing your learners/students the favor of teaching them a simplified version of the concept before throwing them into the deep end immediately. They’ll learn faster and have a better time doing it!

Furthermore, when communicating, try to remember that the closer your explanation or model is to your audience’s mental model, the quicker and better they’ll understand what you’re trying to say. Happy modeling!

1 Comment :, , , , , , more...

In-Situ Procedural Guidance: Saving Lives with a Checklist

by Brian on Feb.08, 2010, under Outside the Box

The Problem

Doctors and surgeons are highly-trained individuals and professionals worthy of our trust. However, over 100,000 people die in surgery each year (in the US).

One Solution

A checklist! Atul Gawande ported the successful procedural checklist used in aviation to surgery. He developed the checklist, piloted it, and wrote a book to tell the tale.

In a recent interview with Jon Stewart at the Daily Show, he mentioned that the tasks we take on steadily increase in complexity, so even experts can be helped by reminder mechanisms like checklists.

Watch the Daily Show Clip:

Why I Love It

There are a bunch of things I love about this. Gawande saw a problem and is trying to solve it using something that already works somewhere else, rather than wasting time trying to reinvent the wheel. Taking things that already work and using them successfully for other things is innovation, too!

Secondly, I agree that the things we do are getting more complex, but there are also temporal factors like stress that play a role. Checklists provide clear guidance on what to do, a distinct path of action to follow in complex situations that require attention to lots of details. The best thing about them though, is that they are used during the situation for which they were made. Instruction manuals provide even more detailed information, but they are usually put away somewhere or to dense with information to use in a hurry.

Screenshot of Xplorer², highlighting the on-screen sidebar help

Xplorer², a file management program, gives procedural instructions in a sidebar on-screen.

This goes to show that having procedural information close at hand makes it easier to answer the question, “so what do I do now?” Xplorer², a file management program and very cool and powerful alternative to Windows Explorer, automatically activates a sidebar with procedural instructions upon first installation. This brilliant feature provides a nice equivalent to the checklist, even though the sidebar’s focus is novice users, while the checklist is for expert professionals.

In any case, consider making procedures more usable by adding some mechanism for in-situ procedural guidance. If you’ve got information available and people aren’t using it, try reducing it to its most crucial elements so that it can be used in a time-sensitive, possibly stressful context.

2 Comments :, , , , , , , , more...

Grocery Shopping Made as Easy as 1-2-3-4

by Brian on Feb.03, 2010, under Usability is everywhere

The Problem: What to Buy?

A shelf in a super market

Being confronted with lots of choices at once can be daunting.

Being confronted with an entire supermarket of dinner possibilities may be daunting, especially if you aren’t a master chef or don’t have a lot of time to peruse the aisles. For each item, one has to answer at least three questions:

  1. Do I feel like eating this?
  2. Is this compatible with what I just bought?
  3. Am I getting a good price for this?

This is assuming you even know how to answer these questions. When shopping for groceries, especially when I’m in a hurry, I tend to stick to the basics and get the same things. If I were a more practiced chef, I could probably make these kinds of decisions quicker, but here’s one way I can get away with being less than stellar in the kitchen.

One Solution: 1 + 2 + 3 + 4 “Pakketvoordeel”

Shelf with Pakketvoordeel in Albert Heijn

The Dutch supermarket Albert Heijn has devised a brilliant way to make dinner shopping easier

Here comes Albert Heijn to the rescue! Albert Heijn (http://www.ah.nl)  is a Dutch supermarket chain that represents the high end of the countries’ supermarket spectrum with more selection, better service, and higher prices than most other supermarkets in the Netherlands.

The “pakketvoordeel” (Dutch for “package deal”) system groups a pre-selected array of easy-to-prepare food items into four groups. These four groups are distributed in a shopping cabinet into four shelves in such a way that any food items out of any one of the groups is compatible with any food item from any of the other groups and getting one food items from each group gives you a “complete meal.”

Oh, and all of the items in the shelf are labeled with a number from one to four, to make sure you don’t fall for the “I’ll just put it the wrong shelf” trick they do at supermarkets. Still can’t make up your mind as to which meat should go with which rice under which sauce and side? There are recipes on the front shelf that tell you which combination of elements makes up which meal.

Pakketvoordeel shelves in AH

Any food item from each of the four groups is compatible with food items from the other groups

The perhaps best part is that any combination of food items from all four groups always costs nine Euro. Remember the three questions you have to ask yourself when you shop freestyle? With the “pakketvoordeel,” everything’s compatible with everything else, and it always costs the same, effectively taking away two decisions you have to make.

Why I Love It

This takes away much of the guesswork involved in grocery shopping. Instead of having to make three decisions, I make just one: eat it or not? It’s the typical trick of reducing the number of possible choices to guide users (in this case “shoppers”) into making a decision. It’s easier for the user, and it’s profitable for the vendor. How many times have you refrained from buying something like cookies, because you couldn’t decide which ones you wanted?

How It Could Be even Better

If there were a color-coding system or perhaps a vertical grouping scheme dividing the recipes, it would make choosing the right ingredients for each recipe faster and easier. This illustrates the grouping more explicitly without taking away the ability to “cheat” and mix-match.

Leave a Comment :, , , , , , more...

Expand your world


Bookmark and Share

Meta