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.
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.
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.
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.
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.
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.
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).
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.
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.