Thoughts on Usability: Natural vs Learned

Posted: May 16th, 2011

This is essay is a working draft. Version 2.

I think that there is a difference between something being easy to use, because it feels natural vs something that is easy to use, because we’ve learned how it’s suppose to work through time and repetition. Something can be easy because it is natural, we learn it quickly, almost without mental effort. Or something can be easy, because we’ve learned a particular behavior (design pattern). Both are learned, but one has a steeper, longer learning curve than the other.

In regards to web design, things that are easy to use are either something we’ve learned over time and it’s only easy to use, because we’ve learned a complex set of information (like how to use a computer), or it’s easy to use because it has parallels with the physical world, and thus, builds off of existing knowledge.

Natural

Take a real physical button. Like the keys you find on a piano. If you put a 3 year old kid in front of a piano, pretty quickly he’s going to figure out that if you push those buttons (keys) sound is going to come out. They look like something you should push on. Like they’re asking you to do it.

Another example is the wheel. It’s something we intuitively understand how to use. Push something that has wheels on it and it will roll. It’s easy, because it’s familiar.

Learned

On the other hand, there are things that are easy, because we’ve learned them over time and repetition. Like a link on a web page. When we see text underlined we know we can click it. There is actually a whole variety of steps we’ve learned to perform this seemingly simplistic task. We learned how to navigate the pointer on our screen. We learned that our mouse or trackpad will allow us to navigate the pointer  on our screen. We’ve learned to place that pointer on something we want to click on, and finally, we’ve learned that if we click on text that is underlined, it will load a new web page. This isn’t something we know because it’s natural, we know it because we took the time to learn it. For some of us, this was actually a challenge to get our heads around the first time we did it.

It’s easy now, because we’ve learned it over time with lots of repetition. We’ve seen it done over and over and over. This underlining of text is called a design pattern, because the underlined text (design) is used over and over (the pattern) to indicate a link on a website.

Learning a new design

When we encounter a new design, some are easier to learn than others. I think it depends on how close the design is from other things we’ve already learned in both the physical and virtual world. The further away a design solution is from something we’ve seen before the harder it is to understand it’s meaning. The closer a design solution is to something we’ve seen before, the easier it is to understand.

For something to be “closer”, it must resemble something we’ve seen before and the design message must also be similar to what is being referenced. The two designs that related to each other (one, being the one we’ve seen before and two being the new one we’ve just encountered), must have an accurate connection. If the design is similar, but the intended message is completely different, it’ll only confuse us.

Using design patterns

When using existing design patterns, we should consider how well known that design pattern is and how easy it is for someone who is unfamiliar with it to learn it.

This applies to many aspects of design. This can be very useful and important knowledge in usability design. When designing an interface, sometimes you want to use a simple icon without any text to represent something. It can be a way to clean up and simplify the interface. If what you want to repesent with an icon has a common and well understood visual that goes with it, you’re in luck. You can design an icon to match the visual and people will understand the meaning pretty easily.

People will only understand your icon if they’ve seen it used in the same way to represent the same thing over and over.

One well understood icon is the magnifying glass. It’s always used for search .

Everyone knows that this icon stands for searching. But we only know this because we’ve learned this through time and repetition. There is nothing about a real physical magnifying glass that lets you know it means search. A real physical magnifying makes things larger so they are easier to see (a related, but different meaning from search), but because we’ve seen it used for search so often and so consistently we know that it stands for search in the context of a website. Don’t get me wrong, I think it’s a smart icon to represent search.

Designing something new, there is no pattern, yet.

What becomes challenging is when you need to design an icon for something that is not universally understood. Say you have a new feature in a piece of software or you want an icon to represent an entire section of your website. Well, nobody knows what this icon means. No matter how talented and how hard a designer tries he/she isn’t going to be able to design an icon that everyone will know stands for whatever your designing for. The only way people will understand it is through time and repetition.

You can help your icon by putting text next to it to help give it additional meaning. This will help guide people in associating the meaning of the word to the meaning of the icon. Then, through time and repetition people will start to intuitively know what that icon stands for.

---