Good designers copy! – Leveraging pre-existing interaction

I was having a discussion today about navigation flow that reminded me of something I think is critical when designing. Leveraging!

Now leveraging in the tech and design worlds is just a word that means you’re taking advantage of pre-existing information. What’s important to remember is that as a designer it is not always necessary to recreate something new. In fact some of the most well received products and services are things that share a common thread with something we as the user are already familiar with. This seems like an easy concept but so often companies fall short of this when building a web application.

I have a feeling I’ll be coming back to the iPod often but stay with me.

Image taken from iPod interface patent.
Image taken from iPod interface patent.

The original iPod and every subsequent iPod (excluding the iPhone and iPod Touch) follow this very simple hierarchical navigation.

Music->Artists->Artist->Albums->Songs
Music->Genres->Artists->Artist->Albums->Songs
Music->Albums->Songs

By now I assume this navigation is familiar to you and I shouldn’t have to explain the simplicity of how well it works. The click wheel makes it easy to zoom through this navigation and find what you what. Now lets say for example that you are about to introduce a new feature into the iPod that will require navigation. It makes little sense to attempt to create a new interface for navigation. The user has already learned and become an expert at the navigation you have created. Leveraging that implicitly learned skill is paramount.

A screenshot of the iPod application
A screenshot of the iPod application from the iPhone & iPod Touch

Now lets take the iPod interface of the iPhone (and iPod Touch) into account. The addition of the tab bar at the bottom of this interface takes your second level of navigation from the former example and creates starting points for them, and adds the ability to customize those starting points. The bottom tab bar is used in multiple applications throughout the iPhone so its not particularly necessary to use the same navigation. Take Clock for instance where each tab is a separate time related task. But the idea here is that at least with the iPhone when it comes to navigating a library of content, it is in an application developers best interest to mirror that pre-existing interface conventions and leverage that experience. Your application will carry the air of a first class iPhone citizen and your users will not be shaken by having to learn a new navigation scheme. This increases simplicity across the board.

So now that we have that concept in hand lets look at another example.

“Favoriting”

I realize it’s a made up word but it has become prevalent enough that I’m totally willing to accept it as a proper verb. Moving on … “Favoriting” something is a perfect example of an interaction people use on a regular basis across sites and it has a very expected interaction.

  1. Find Favorite button
  2. Click Favorite button
  3. Item is “Favorited”
Favorite?
Favorite?

Sites that share this interaction such as YouTube, Flickr, Digg (login is usually required to favorite) all leverage that interaction and thus overall simplicity is maintained. However sites that make this interaction difficult such as SlideShare lose all that pre-existing knowledge and thus create complexity and difficulty for a user. In this image we see what happens when a logged in user clicks the Favorite button. They are immediately presented with the option to add tags to the content. Now I see nothing wrong with adding tags, tags are good (but that’s another post). But here we are halted from our original action. Not only that but we are unsure if we even successfully “Favorited” the item. Here only by clicking “Save” do we get the action we were initially going for, requiring one more action. Also as an aside it’s interesting to note that there is no apparent area to add tags to content on Slideshare without “favoriting” a piece of content.

Conclusion

Leverage simple pre-existing design and interaction concepts. Your site (product, service, etc.) is not in a world unto itself and therefore has the opportunity to leverage pre-existing behaviors that users have already invested energy in learning. When introducing a feature look at other examples of that feature, and for where you can leverage others designs. Your users will thank you.