Practitioners-Guide-User-Experience-Design

THERE IS NOTHING WRONG WITH THE FAMILIAR
One of the best ways to make sure you’re not overtaxing your users’ interest in learning
new ways to navigate is to use established design patterns. Here’s a design pattern I’m
sure you’re familiar with: Where does the search box on most content and retail sites live?
Most of the page is taken up by articles or by product images and offers. The navigation is
at the top or maybe on the left. So where would you find search? Hopefully you answered
top right. Even in the Mac operating system, the search tool is placed there.
Design patterns shouldn’t be thought of as hard and fast rules; they are guidelines,
and sometimes there are good reasons to deviate from them. A good example of deviating
from the search pattern would be a search engine, like Google or Bing, where the main
purpose of the site is search. Then the best placement is most likely dead center. So even
something as universal as search, whose design pattern holds generally across the web,
breaks the rules when the context necessitates.
Another design pattern, which is rapidly gaining in popularity, was introduced by
Facebook in October 2011 to its mobile apps and websites. It’s known as the hamburger
button: three horizontal lines that resemble (sort of) two buns and a patty. This button
takes users to a menu underneath the main screen. I used the same pattern when designing
the Wall Street Journal’s iPhone app and mobile website. On one of the last projects I
worked on for the Journal, an editor involved in the design process was intent on having a
button labeled “menu” next to the hamburger because he was not a mobile Facebook user.
He didn’t think the hamburger was familiar enough. In the end the design team got the
final say, largely due to how many other apps we showed were using it, including one of
our own. The button was deemed easily learnable not only because so many of our users
were already familiar with it from our own app, but also because of the large overlap we
shared with the Facebook user base. Interestingly enough, Facebook has moved away
from this pattern because the hidden menu items prove too large a barrier to the level of
engagement Facebook is interested in across its very large and very diverse user base.
Facebook restored its tabbed interface to keep users aware of the sections most used in the
app: news feed, messages, notifications, and requests.
Exactly how is a design pattern defined? It is a trend in the placement, aesthetic
treatment, or interactivity of a feature. Some design patterns become so familiar that they
are expected and users can be annoyed if they’re not available—like scrolling up through
an article page on an iPhone! And remember, you never want to underestimate the
dissatisfaction caused by bucking familiarity. Trying to follow what is most familiar for
users of different devices can get tricky, even for people like me who do this for a living. I
use an iPhone for my personal calls and an Android for work matters. I can’t tell you the
number of times I’ve tried to swipe to delete something—an iOS feature—on my Android
phone.
But the love of familiarity doesn’t mean you can’t play around a little with a design
pattern. In fact, that can be a great way to innovate a better solution for your particular
product. Both Apple and Facebook made a modification to the Twitter pull-to-refresh
design that I found interesting—not because it was more innovative but because it
showcased the power of design patterns. Both the iOS Mail app and Facebook position