Familiarity & Learnability

by Jin, 10-28-08 // 16 comments
Kill Bill: Bride with katana on airplane

I’m a big fan of Quentin Tarantino’s film Kill Bill, since I grew up with the Hong Kong flicks it pays homage to. I’ve watched it countless times. Recently, I watched it again. This time I noticed something I never consciously thought of before.

On her journey to vengeance, Bride, the main character played by Uma Thurman is seen carrying a katana blade on the airplane and roaming freely in the airport. How come no security guards stopped her? How did she get her sword on the airplane to begin with?? I quickly answered myself those questions as fast I raised them. Kill Bill is set in a fantasy world created by Tarantino. Fans of his movies are used to the screen violence and devices he uses. Those who are seeing Kill Bill for the first time, are quick to adapt to the reality he creates and see what’s abnormal as logically sound within the boundary of the movie. He does this well because he establishes the consistent rules and visual cues early on in his movies.

Conventions are being used everywhere in our daily lives, from film to design, to help us adapt to something we are seeing for the first time. We know how to brew a cup of coffee with a new coffee maker without reading the instruction book; we don’t need to learn how to drive again when getting behind the wheel of a different car. In fact, very little thinking is involved because they are things we’re accustomed to, thanks to conventions and standards.

What about once in a while when a revolutionary product comes along that we have very little experience with? Its success will be determined by how quickly people can learn how it works. When it comes to using a new product, we like things that are intuitive.

Familiarity and learnability are two important design principles used when creating products. In my case, making usable web sites.

Familiarity

The degree to which a user recognizes user interface components and views their interaction as natural; the similarity of the interface to concrete objects the user has interacted with in the past. User interfaces can be familiar by mimicking the visual appearance of real-world objects, by relying on standardized commands, or by following other common metaphors.

Apple products

Take Apple for example, it’s known for its polished products. Apple’s success in product design isn’t entirely due to its visual appeal. Every single element from how it looks and how it functions, is consistent throughout all platforms from OSX desktop applications to Apple’s website, from iPhone to iPod and even the buttons on the hardware. This consistent use of conventional elements help the users to use any Apple product effortlessly, therefore the brand loyalty is created.

USA Today

Now let’s take a look at popular news/blog sites on the web. Long before the web, we were used to reading in print format and knew how to operate a mouse with a point and click on desktop applications. This makes migration to the web easier. Then newer conventions were created. Most news/blog sites share the same layout and navigation. Layout is heavily influenced by newspaper, and navigation is placed similarly on the left or top. Article headers are typically in bigger font size. This helps the readers not having to think too much about where to click, therefore spending more time to focus on the content.

Familiarity is created by the use of conventions. Steve Krug explains it best in his book Don’t Make Me Think:

All conventions start life as somebody’s bright idea. If the idea works well enough, other sites imitate it and eventually enough people have seen it in enough places that it needs no explanation. This adoption process takes time, but it happens pretty quickly on the Internet, like everything else.

This is very true. Look at the web sites we frequent, especially those of the same genre, we probably will find strong similarities among them. After all, why re-invent the wheel?

But if we, the designers, follow conventions all the time, then how will innovative designs ever be created? To create something new, there’s a risk for alienating the users and make our product less usable. This is where learnability comes in.

Learnability

A measure of the degree to which a user interface can be learned quickly and effectively. Learning time is the typical measure. User interfaces are typically easier to learn when they are designed to be easy to use based on core psychological properties, and when they are familiar. Familiarity may come from the fact that it follows standards or that the design follows a metaphor from people’s real world experience.

iphone touch interface

Again, let’s use Apple’s iPhone as an example. When the iPhone was first introduced, most people had never used a touch interface like it before, but it didn’t take anytime for people to learn it. In fact, most people didn’t even read the instruction book. Before the iPhone launched, Apple bombarded the TV with commercials. They not only served as advertisements but also training videos. This significantly reduced the learnability once people started using the iPhone. Of course, the iPhone already possesses many familiarities people are used to from using other Apple products.

Quoting Krug again:

Sometimes, though, particularly if you’re doing something original or ground-breaking or something very complicated, you have to settle for self-explanatory. On a self-explanatory page, it takes a little thought to “get it” – but only a little. The appearance of things, their well-chosen names, the layout of the page, and the small amounts of carefully crafted text should all work together to create near-instantaneous recognition.

Most blog sites have an established convention. The layout is pretty standard, with slight variations. This is a newspaper column influenced layout. When visiting a new site with such layout, it takes readers almost no effort to find where everything is, since they’re used to seeing them on the other sites.

8164 Layout

When I started designing this blog site, I wanted to do an experiment. First, I wanted to start from scratch without influence of any kind. Anything that’s not absolutely essential was eliminated. The goal is to give each article as much focus as possible. With this in mind, I decided to fix the navigation menu on the bottom of the screen. I felt this was a unique design. However, this design is very unconventional, therefore it may make it harder for the visitors to find or even notice the navigation bar.

As I predicted, the first two months since the site launched, I had a high bounce rate of 70% among new visitors. It was evident that people had a hard time locating the navigation. If people can’t find what they’re looking for on a web site, they quickly leave. (edit: I’d like to stress, this part of the article is not about teaching people how to design a layout. I feel this layout works for my site, with my intention. Thanks, Mark Aplet for bringing it to my attention).

Popup Notice

I started the next phase of my experiment at beginning of this month. I added a simple one-time-only pop-up box near the footer, instructing people how the site works. Since then, my bounce rate went down to 57%, an 18% decrease from before. There are still more changes I plan to do in the future.

Don’t Make People Think

The reason Don’t Make Me Think is my top favorite web design book is because it has so many applicable lessons in it, despite being written eight years ago (which is a hella long time in internet time).

Applying familiarity in our designs helps people to embrace the site; attention to learnability allows us to innovate without alienating new users. The two principles have opposite denotation, but compliment each other well.

16 comments

also feel free to contact me on twitter or via email
Dmitry 10-28-08

Great post Jin. This somewhat relates to another good article I read yesterday on the Lateral Action blog (http://lateralaction.com/articles/kurt-cobain-startup-success/) which talks about achieving success for your startup or blog. The essence of that post is that you should break the status quo by doing something different, and yet mix in familiar elements that are proven to be successful. I guess this could apply to web design also: innovate and do things differently to stand out and be remarkable, but at the same time make sure the fundamentals are there to ensure your visitors don’t get confused.

Michael C 10-28-08

I’ve been reading your blog for a while and I really enjoy it.

I have to say, I never imagined anyone would put Kill Bill in a web design article.. . But it makes a lot of sense to me.

Jin 10-28-08

@Dmitry, that’s a nice read! I love Nirvana.

@Michael, sometimes my mind wonders off to other things, then eventually gets back on topic. I may have ADD :)

Stefan Vervoort 10-28-08

Jin – Woow that’s a great read and definitely true! You are right about your blog layout, I didn’t know what to do before, but after you’ve posted that little pop-up thing, things have been easier for me and I guess lots of people more!

Jin 10-28-08

@Stefan, thanks! There will be other gradual changes too in the future. One day I’ll complete this site.

Janko 10-29-08

Excellent points. When everyone wants to be “another smashing magazine” it is hard to see something different. People are afraid.

Your blog really stands out. Looking forward to see your future changes.

andrew 10-29-08

great article. good job at explaining these things clearly. I am working on some designs right now that this will be helpful for me to have in mind.

[...] Familiarity & Learnability [...]

Calvin Froedge 10-29-08

Great post. I like your blog layout, and although I think the “Hi There” popup is unnecessary to find your navigation, I know some people aren’t as tech-savvy as the rest of us ;)

Jin 10-29-08

@Janko, Andrew thanks!

@Calvin, well, I wanted my layout to pass the “mom test,” as in, if my moother can find the navigation, then all is well :)

Mark Aplet 10-29-08

Jin,
I commend you for at least experimenting and least testing your theories against a standard. However I still do not think your navigation works well at all. I totally get what your trying to do. But It’s been tried before, and it has failed. Just like side scrolling websites. I understand peoples desire to want more, from their layouts. We want to be creative and be different. But IMO your design has to do more than have a little popup to explain to users where your navigation is. It was not until later that I noticed your popup instructions. At first I thought I entered a framed site without it’s parent.

If you have to explain to your visitors how to do something, or why your doing things differently then it sort of defeats the point of affordance. The simple act of moving your navigation forces users to relearn what they already know about websites. And learn a system that is unique to only your site. Your audience can probably handle this but this does not apply to the majority of sites. Most users will not care enough to relearn what they already know and understand for your site alone unless your something really special.

Now, you probably put your mom in front of your site and said. “Mom… can you find my navigation?” Of course she will, she’s looking for it specifically. Put her on yahoo or amazon and start moving the navigation bar around while she is trying to do something else and chances are she will writhe the site off and look elsewhere.

Again, I get the point of experimenting. Innovation brings new theories and better practices, however this article has brought nothing new to the table yet, and it’s still the same old rubbish.

Sorry Jin, it’s back to the drawing board. :(

Janko 10-29-08

Mom test, of course!! That’s one of the best usability testing methods :D

Jin 10-29-08

@Mark, I appreciate your thought out response.

To be clear, the example I used in my article about the popup is to illustrate how simple un-obtrusive instruction can help with learnability. It was not used to justify whether this site’s design is good or bad. I designed the site the way it is, for a specific goal in mind, and that is to emphasize on the content of the article. The article section follows the traditional convention format. The result of the design is merely the product of a thought process. I didn’t not start designing this site, thinking “I must be unique.”

However I still do not think your navigation works well at all. I totally get what your trying to do. But It’s been tried before, and it has failed. Just like side scrolling websites.

Sidescrolling design failed because of several factors. It’s not mouse scrolling or keyboard friendly. It also has issues with screen readers and flow/arrangement of the content. If the main links aren’t fixed, it makes it harder to navigate. I don’t see how my site shares any similarities. Every article or link is 2 clicks away.

It was not until later that I noticed your popup instructions. At first I thought I entered a framed site without it’s parent.

The popup is positioned so if the visitor does decide to go on and read the article, they’ll eventually notice it.

If you have to explain to your visitors how to do something, or why your doing things differently then it sort of defeats the point of affordance.

This I agree. I wouldn’t do on a client’s site. It’s the leisure of experimenting on my own site.

The simple act of moving your navigation forces users to relearn what they already know about websites.

I’d argue it depends on how easy the learning process is. Sometimes affordance alone aren’t self-explanatory enough, additional instruction is needed. This happens quite a bit in application design, or relaunch of a web redesign.

Now, you probably put your mom in front of your site and said. “Mom… can you find my navigation?” Of course she will, she’s looking for it specifically.

Now that wouldn’t be a good usability test would it? I know it passed the test because she discussed my articles with me from two states away. I did not tell her what to look for.

this article has brought nothing new to the table yet, and it’s still the same old rubbish.

Your criticism stops being constructive at this point. The point of this article isn’t about my site, it’s about two concepts I think that are important. Are you disagreeing with that? Granted, these concepts are not new, they existed long before web design, but I fail to see how they’re rubbish. Also, “new” is relative. Experienced designers should know this already. But to someone new to the field, it’s good to know.

Regardless, I thank you for taking the time reading and commenting.

/cheers

rich 10-30-08

In response to Mark

i prefer this site because of its experimentation in design…not sure how i first came across it, but that was why I came back a second time. The second time I came, I read an article–now I come back for the content. Design is so subjective that I guess we tend to be almost (red/blue dem/rep) about it. But on your own personal site, F*ck the rules; break them, make mistakes and find the art. I wish more personal sites made the user think, search…when its artist viewing artist, its all about aesthetics, curiosity, and art. My two cents–these days worth less than a penny.

Jin 10-30-08

@Rich, thank you for reading.

To be fair to Mark, after some email exchange, he pointed to me that the section where I wrote about the popup is a bit misleading for people who are new to design. My intention was to use it as an example to show how simple instruction can help with learnability. But in hindsight, I can see why some may interpret it as me showing how to design a layout. I have since updated that section of the article.

Thanks all.

[...] Familiarity & Learnability [...]