Familiarity in User Experience

It’s often said that familiarity breeds contempt, but in user experience it could be said that familiarity breeds happiness. Or at least it breeds less head scratching. The more familiar we are with something, the less our cognitive processes have to kick in and figure out how to respond to that something. Familiarity leads to automatic response. It’s for this reason that we know what to do when we encounter a door for the 3000th time – we instinctively reach for the door knob (instead of alternatives such as kicking down the door).

This basic human trait, combined with our natural tendency to seek the path of least resistance, means that on the path to seeking “innovation” in digital user experience, we shouldn’t neglect the benefits of incorporating familiar images (generally referred to as skeuomorphic design) and words, to engage the user and create an emotional connection (gestures are also essential in user experience and I’ll talk about that in another post).

Back to images and words…the classic, bin icon has been around for ages and survived many evolutions in digital design. The continued popularity of this icon can be attributed to the fact that from a user standpoint, there’s practically no learning curve – the action of waste disposal that it represents perfectly matches the purpose of a bin in the physical world. It may not be the sexiest of icons but it works.

Shazam Delete
Shazam relies on a classic icon to delete tagged music

The “+” symbol, often used to symbolize creation/addition of a new item is another classic example of design incorporating familiar concepts. Along with our ABC’s, addition is one of the first things we learn as children and the “+” symbol is stamped into our brains from a pretty early age. So what could be more natural than reusing that same concept in the digital realm?

Feedly Add to Feed         Spotify New Playlist Edited
The “+” symbol has always felt natural for add/create/include actions

Aside from icons, the use of real world imagery can also help in conveying a lot to a user. Take the iStudiez app. The day view of the planner uses a book, complete with a bookmark, to display items that are due that day. Rather than simply displaying a list of items, the incorporation of the book lends a more “organic” feel to something that would otherwise feel quite dull and dreary.

iStudiez Day View
iStudiez image choice breathes life into the interface

The book imagery instantly conveys to the user the various functions that will be possible in the app. It indicates to the user that the app is functionally complete and can handle all the tasks that would normally be accomplished with a physical planner.

When using imagery from the physical world, it should look as natural as possible, giving the user the impression that they could step into it. Let’s take for example, the two images below, both of which come from book reading applications.

Aldiko         Moon Reader Bookshelf
Battle of the bookshelves: Aldiko (left) and Moon Reader (right)

Both applications provide a bookshelf display, which is excellent for a book lover as it instantly brings up images of countless hours spent at the bookstore or the library (for those old enough to remember what libraries are). The Aldiko app uses a wood bookshelf, while Moon Reader goes for the metallic variety. Since both exist in the physical world, the question of which one to use will be determined by factors such as the type of audience that is being targeted (this is where it pays to define your personas and targets), the type of brand image one wants to convey (this is where it pays to have a clear image of your mission, values, what differentiates you from the competition, etc.) or which one will is aesthetically pleasing (which can be rather subjective).

Aside from icons and images, words also play a key role in user experience. Consider a term like “Favorite”. It’s present in most applications and works well because there’s little risk of misinterpreting what a “favorite” is. But what about a “humdinger”? It’s meaning is most likely less obvious to all, even though it still means “favorite”. The use of region-specific terms such as “humdinger” should generally be avoided (no one wants to pull out the dictionary when using an app). But if you insist on using such terminology, then the use of an appropriate icon to support and give meaning to the word is definitely essential, as is the case with music app Soundwave.

Soundwave Humdinger
The heart icon speaks volumes

These few examples hardly cover all the ways in which images and words affect us, but they show that in user experience it’s not so much about reinventing the wheel. It’s often about presenting the same old wheel in a new light. Easier said than done but therein lies the fun.

Leave a Reply

  • Best read while sipping
    a cup of tea...
  • My Visual Brief
    Our web-based tool to help clients communicate more effectively with the designers about their aesthetic preferences and likes.
    Check it out
  • twitter rss