UI Design Patterns for the Web, Part 1

Web UI Design
Patterns 2016
Volume 1
User Input, Controls, and Navigation

Copyright © 2016 by UXPin Inc.
All rights reserved. No part of this publication text may be uploaded
or posted online without the prior written permission of the publisher.
For permission requests, write to the publisher, addressed “Attention:
Permissions Request,” to hello@uxpin.com.

Index
Designing Great UX With UI Patterns 9
Pattern Recognition: A Useful Shortcut 10
Examples of Common User Interface Patterns 12
Top-down vs. Bottom-up UX Design Approach 14
The Risk of Breaking Patterns 17
Breaking Patterns for Delight 18
The Power of Prototyping for Testing Patterns 19
Different Levels of UI Patterns 23
Conclusion30
Collecting Input 31
Mad Libs Forms 32
Input Hints 34
Forgiving Formats 37
Undo39
Default Values Autocomplete 42
Inline Validation 45
Contact Forms 49
Keyboard Shortcuts 52
Expandable Inputs 55
Natural Language Inputs 58
Immediate Immersion (Lazy Signups) 61
Social Login 63
Stepped Forms (Wizards) 66
Completeness Meters (Progress Bar) 70

User Controls 73
Drag-and-Drop Actions 74
Flagging/Reporting78
Discoverable Controls 81
Overflow Menus 84
Context Menus 87
Morphing Controls 89
Direct Manipulation of Content Data 92
WYSIWYG Text Editor 94
Navigation Wayfinding 96
Searches97
Notifications99
Jump to Section 102
Sticky (Fixed) Navigation 105
Vertical Navigation 108
Slideouts (Drawers) 112
Popovers116
Modals119
Calls to Action 123
Featured Content 126
Recommendations129
Related Content 132
Recently Viewed (History) 135
Next Steps 138
Walkthroughs (User Onboarding) 141
Links to Everything 144

Jerry Cao is a content strategist at UXPin where he gets to put
his overly active imagination to paper every day. In a past life, he
developed content strategies for clients at Brafton and worked in
traditional advertising at DDB San Francisco. In his spare time he
enjoys playing electric guitar, watching foreign horror films, and
expanding his knowledge of random facts.
Follow me on Twitter
Co-founder and head of product, Kamil previously worked as a
UX/UI Designer at Grupa Nokaut. He studied software engineer-
ing in university, but design and psychology have always been
his greatest passions.
Follow me on Twitter @ziebak
Ben Gremillion is a Content Designer at UXPin. Previously, he
was a Design Writer at ZURB. He started in newspaper design,
saw a digital future, and learned HTML/CSS in short order. He
later earned an Adobe Certification, and learned up regex, PHP,
MySQL, and other impressive-sounding acronyms. He also builds
and maintains a CMS for webcomic artists, and participates in
bi-annual NaNoWriMo challenges.
With a passion for writing and an interest in everything anything
related to design or technology, Matt Ellis found freelance writing
best suited his skills and allowed him to be paid for his curiosity.
Having worked with various design and tech companies in the past,
he feels quite at home at UXPin as the go-to writer, researcher,
and editor. When he’s not writing, Matt loves to travel, another
byproduct of curiosity.

Designing Great UX
With UI Patterns
Any discussion of UI design will eventually return to UI patterns.
As described in the free e-book Web Design for the Human Eye, UI pat-
terns originate as solutions to common usability problems, and their
effectiveness correlates directly with their popularity and adoption.
That means the more a certain pattern is used, the more powerful it
becomes... which means more sites will start using it.
Photo credit: Free Web UI Kit

In this piece, we’ll dive into the anatomy of UI patterns and how to
select them as shortcuts to meeting user explanations. We hope you’ll
see UI patterns as not just reusable design best practices, but also as
a foundation for you to mold the overall UX.
Pattern Recognition: A Useful Shortcut
Usability is about people and how they understand and use things,
not about technology.
Steve Krug, Don’t Make Me Think
Pattern recognition is a cognitive process during which we look at a
stimulus, and try to match it with what we already know.
Photo credit: Vinoth Chandar. Creative Commons.
It’s a form of heuristic, or shortcut that we use to solve a problem.
Heuristics make up what Gerd Gigerenzer first called the “adaptive
toolbox” – a set of rules that we use to make decisions in situations
that are limited in time, resources, or information.

If a situation is new to us, we’ll reach into our adaptive toolbox to
see if we’ve encountered anything similar before.
We learn various patterns through interacting with the web, both as
users and as designers. So when we interact with the web, we attempt
to match what we see with what we know already – if we’re after a
specific item in a store, for example, previous experience tells us that
we can (and should) be able to search for it in a very specific way.
Photo credit: Ebay
This recognition and learning allows us to navigate the web quickly
and efficiently using heuristics, instead of thinking through an inter-
action from scratch every single time. We look for patterns of inter-
action that, in the past, have led to success by minimizing time and
maximizing reward. If we don’t find these patterns, we will often look
for another page that will offer us that familiarity and expediency.
These shortcuts do sometimes lead us astray, but more often than
not, they work. Interaction designers need to be intimately familiar
with these patterns and expectations.

Examples of Common User Interface Patterns
Design patterns are a way of documenting a common solution to a
design problem.
There are many excellent pattern libraries out there – UI Patterns,
Yahoo's Pattern Library, and PatternTap to name but a few fantastic
resources – but here are a few examples of common design and user
interface patterns, and the problems they solve:
• The hamburger menu: It’s controversial these days and people
are now questioning whether this is actually a design pattern, or
just bad design. Regardless, it’s ubiquitous, and allows for more
space on mobile devices.
Photo credit: ETQ Studios
• Breadcrumbs: A way of allowing your users to feel safe and
well-oriented when navigating a hierarchical site.
Photo credit: Newegg

• Account registration: A way of gathering information from the
user in order to offer them something in return; the opportunity
to buy, for example. Patterns might range from a shortened form
to a social sign-in.
Photo credit: Squarespace
• Continuous scroll: A way of consuming a large amount of content
that may not be displayed on a single page right away. Perfect for
visual storytelling.
Photo credit: Fornasetti

• Availability (e.g., Skype): Know quickly if someone is available,
unavailable, or away with a traffic light system.
Photo credit: Skype
• The FAQ: Offers the users an easy-to-find space to get answers to
common questions.
Photo credit: Yelp
Top-down vs. Bottom-up UX Design Approach
This is where we can start thinking about neurodesign: using these
neuroscience basics to make our jobs easier (or more complicated,
depending on how you see it). We also must remember that users
perceive the web differently from those who create it.

When we build for the web, we use design patterns along the way as
we discover various design problems. We often make this journey
from the bottom up: we start with the problem before us and its
various elements, and then attempt to create a cohesive experience.
As we break an interface into its atomic components, we immerse
ourselves in sub-problems, goals, tasks, and information architec-
tures and flows.
Photo credit: Narek Khachatryan.
This is why, after a while, we become oblivious to problems with our
design – we cannot see it as a whole.
However, users don’t interact with an interface this way. They do so
from the top down.
Users don’t see the parts but their sum, and use prior knowledge of
rules to guide their interactions. They look for patterns in what we’ve
built that match up to past experience with similar products or sites
(known as external consistency), to help them navigate much faster.
This method of processing is fast, but sometimes wrong – especially
if the interface has somehow deviated from the status quo.

Photo credit: Abduzeedo
Therefore, we should ensure that the site interface is consistent with
user expectations and with itself. For example, if you choose a cards
UI pattern, most users know how to navigate the content due to the
pattern’s popularity. To prevent confusion, you must also implement
the pattern consistently throughout your site.
It’s our job to guide the user, to make this processing as easy and as
satisfying as possible, and to make sure that they recognize just enough
patterns in our interfaces to feel comfortable. External consistency
(similarity to competitors or other sites) isn’t always necessary, but
internal consistency - consistency within the product - is paramount.
You’ll build user confidence, trust, and safety.

The Risk of Breaking Patterns
In our desire to innovate, we want to develop new and novel ways
of doing things. Our attempts, however, can also alienate users.
For example, in a previous post for UXPin, we mentioned the design
of Ello, a social network which aimed to be minimal and innovative,
but broke with far too many patterns.
Photo credit: Cloudfront
For example, a button should look clickable. If they don’t, there had
better be an excellent reason (and a way for users to learn it). Every
time we break a pattern, we want to be sure that we’re asking our-
selves a few difficult questions:
• Why are we breaking that pattern?
• Have we created a new one – and is it better?
• Will our users be able (and willing) to learn that new pattern, and
quickly?
Those aren’t easy questions to answer, so think hard before choosing
to break from a well-established pattern – is it worth it?

Breaking Patterns for Delight
Of course, we shouldn’t abandon all innovation and just stick with
what we know – design patterns aren’t the be-all and end-all. They’re
simply a baseline for layering your own creativity. People are capable
of learning and recognizing new patterns, particularly when those
patterns result in rewards.
For example, consider the dopamine reward system we just discussed.
We mentioned that if a user expects a reward and gets one, this meets
expectations. If they expect a reward and don’t get one, this breeds
dissatisfaction.
Photo credit: Interaction Design Best Practices
However, what if they don’t expect a reward? Even better, what if
they don’t expect a reward, but we give them one?
Yes, we break from a pattern, but we can do so in a place where the
user doesn’t necessarily expect it, and we can win them over. We can
strengthen new patterns by rewarding when users don’t expect it,
therefore reinforcing that new method of interaction. This moment
of delight is, in our opinion, the key to innovation and a successful
break from pattern and status quo.

Photo credit: MailChimp
Of course, it’s difficult to find these situations, these opportunities
to delight a user when they don’t expect it – after all, how are we
expected to know when users will be particularly pleased by some-
thing if they don’t even know it yet? This is where testing comes in.
The Power of Prototyping for Testing Patterns
Design “considerations” beat design patterns. Test and decide,
don’t just copy things like the hamburger icon.
Jeffrey Zeldman,
in reference to the hamburger.
The only way we can find which patterns to break and when is to try,
to experiment and see the results.
These experiments come in the form of thoughtful, well-conceived
user tests. We need to be aware of the pattern we’re trying to break

and how the user perceives it, why we’re trying to break it, and how.
With a prototype, we can tightly control and test the pattern itself,
even if the user isn’t aware of that control.
For example, in UXPin, we can create a rapid prototype with the
existing UI libraries. We can then validate the effectiveness of those
patterns (and the overall design functionality) by starting a remote
usability testing session. Write down the core tasks, invite users, then
start experiencing the moment of truth.
The reason that prototyping (and testing in general) is so useful is
because often, people can’t articulate what they need. User testing
allows them to show us instead. Users behave normally, while we
observe and listen to their reactions.

Here’s a sample process for improving upon existing patterns:
• Identify the design problems – As design thinking dictates, re-
search your users (ethnography, interviews, surveys, to name a
few) to uncover the main pain points.
• Study existing design patterns – Once you know the problems
to solve, explore sites or apps with patterns that target the same
user issues.
• Prototype your design – Start with existing patterns as a baseline,
and work from them, or change them completely. Whatever you’re
doing, ensure that your assumptions at the start are clear. Create a
low fidelity prototype and feel free to add some creative nuances.
• Test your design with at least 5 users – Choose whatever meth-
ods make the most sense based on time and budget. Steve Krug’s
Rocket Surgery Made Easy provides an excellent starting point.
In a pinch, hallway usability tests involving a couple coworkers
is always better than nothing.
• Learn from the results and iterate – Since you started in low
fidelity, incorporate your learnings as you increase fidelity. If it
serves the users, feel free to add elements of delight to make the
patterns more interesting. Continue testing and iterating until the
design is finalized.
There’s no need to try too hard – where the user expects a reward,
we should give them one (or at least offer an excellent reason for not

doing so). However, we can certainly explore opportunities to break
from pattern and create new delightful methods of interaction.
Photo credit: UXPin
When it comes to improving old patterns; study the underlying problem
and ask why the pattern is so useful. As Jeffrey Zeldman says above,
consideration beats pattern. Previously-successful design patterns,
applied without consideration, will only harm your product.
There’s a quote by Henry Ford, likely overused to the point of cliche,
but it’s true: “If I’d asked my customers what they wanted, they’d
have said a faster horse.”
When it comes to interaction design, we can and should follow pat-
terns in a considered way. It’s perfectly fine and often preferred – for
a variety of good reasons. After all, we have accepted it as a pattern
for a reason.
But when we make no effort to innovate and stick only to patterns,
we’re just building the faster horse.

Different Levels of UI Patterns
Anders Toxboe, founder of the exhaustively thorough UI Patterns.com,
explains that patterns can be used on different levels, in different
ways. Extending beyond the classifications based on what they do,
patterns can be further classified by how they’re used. For example,
some patterns are flexible and change depending on the type of site,
while others are stagnant no matter where they appear.
We’ll describe these patterns based on Toxboe’s UI Pattern Pyramid
(perhaps the best analogy for understanding patterns).
1. Design Consistency
Patterns of consistency are created for a more logical experience
across your site.
For example, while you might get a bit creative with how you
design a photo carousel on your site, consistency patterns ensure
that the 3 dots are always centered on the middle image. If the
position were to change from page to page, friction increases be-
cause users need to relearn the interface.
Photo credit: OWL Carousel

It’s worth noting that there is some room for customization – the
location of the dots varies, sometimes outside the pictures, some-
times superimposed over them. The key is to pick a style and stick
with it.
As we described in the free e-book Consistency in UI Design, you
first want to design the UI pattern in a way that feels familiar to
users based on their existing knowledge (external consistency).
When it comes time to then build those patterns on your site, you
want to make sure the patterns are internally consistent as well.
Photo credit: Paul Robert Lloyd
It’s hard to track how to balance personalization with consistency,
so we recommend creating a front-end style guide. This is a global,
quick-reference guide so all team members know the guidelines
for each pattern. In the style guide for his website, Paul Robert
Lloyd (above) lists all the patterns choices unique to his site. For
more examples of style guides, check out the free pocket guide An
Overview of Style Guides for Modern Designers.

2. Design Strategy
Consistency patterns are purely tactical, while strategic patterns
are where you make the most important decisions.
As Toxboe suggests, these strategic patterns (which he refers to as
“patterns of flow) help users flow through your site. For example,
both the sidebar and controversial hamburger menu are patterns
of flow – they are both different ways of helping users navigate
through a site.
Aside from choosing between different strategic patterns, you can
also execute each pattern in different ways.
Let’s take, for example, the controversial hamburger icon. Love
it or hate it, the fact is that it’s a popular pattern today. It’s also
fairly versatile. Let’s compare the different treatments on the aw-
wward-winning sites Vangarde Music and ThinkBlink.
Once you click the menu on both sites, the differences are quite
apparent.
Photo credit: Vangarde Music

Photo credit: ThinkBlink
As before, Vangarde chooses a more stylistic, flashy approach,
opening an unconventional side-scrolling menu with grab-and-
scroll functionality, and featuring more of its artistic flair, at the
cost of presenting all menu options at once. ThinkBlink keeps it
simpler, opening up a standard, five-item menu of text-only la-
bels, set against a monochrome background. Navigation is more
traditional on ThinkBlink (which makes sense for an audience of
potential clients), and more unconventional for Vangarde (which
might suit their artistic audience).
However, both sites keep the essentials the same. The look of the
icon – a signifier – is nearly identical, and once clicked the icon
turns to a X for cancelling on both sites. The heart of the flow
pattern is the same, but sites are able to customize the look or
interactivity to suit their users.

3. Design Context
Last are patterns only applicable to specific types of sites. These
are appropriate only for certain situations, and so fit the narrow
margin at the top of the pyramid. Further, while they’re appli-
cation is very precise, their functions tend to be broad – think of
the pattern for step-by-step checkout, which is only applicable to
ecommerce sites, but is open to a broad range of variations.
For this reason, context patterns are often chosen early in the de-
sign process since it’s immediately obvious that ecommerce sites
need a checkout pattern and portfolio sites need a gallery pattern.
Photo credit: Amazon
Amazon did not invent the step-by-step checkout process, but they
utilize it because it’s practical. The pattern breaks up the otherwise
complicated checkout process into individual steps, so as not to
overwhelm the shopper and scare them off at the crucial moment.
As a pattern, the step-by-step checkout is used often... however only
with ecommerce sites. Free-to-use sites like Facebook or Google
have no use for such a pattern.
4. Putting It All Together
Toxboe’s Pattern Pyramid was not simply a creative choice. It re-
alistically reflects the pattern selection process.

You start at the top, selecting only a few contextual patterns de-
pending on your site. These often shape the layout and/or infor-
mation architecture.
For example, if you’re building a portfolio site, you know you’ll need
a page for samples of your work, which will affect the navigation
of the entire site. That’s why these are selected early on, general-
ly in the wireframing phase (you can learn more about making
structural design decisions in our free Guide to Wireframing).
Photo credit: Dunckelfeld via awwwards
You then move to the middle phase, where you choose more pat-
terns that you personalize to help users move through your site.
For example, if you’re building an agency portfolio site, do you
select a cards-based design pattern or an animated slider? The bulk
of design work usually focuses on wireframing, prototyping, and
then testing decisions made during this middle stage of UI design.

Photo credit: AH via awwwards
Last are the consistency patterns. These are the most granular, but
also the easiest to incorporate, since there’s little room for variation.
If you dictate that each card on the portfolio site is 400×400 pixels,
then you need to build every card to that spec. You can specify
these patterns during later stages of design, whether as the result
of usability testing insights, or as you start increasing fidelity.

Conclusion
By taking advantage of generally understood knowledge, patterns
save your users time in learning new interface systems, while also
solving any number of problems for you at the designing end.
In fact, patterns are just creative design solutions that were so ef-
fective, more and more sites started using them until they became
commonplace. That’s what makes patterns such a valuable design
tool... as long as you know enough about them to choose the right
one for the right job.
Now, let’s get started by exploring the best patterns for web design.

Collecting Input
Mad Libs Forms 32
Input Hints 34
Forgiving Formats 37
Undo39
Default Values Autocomplete 42
Inline Validation 45
Contact Forms 49
Keyboard Shortcuts 52
Expandable Inputs 55
Natural Language Inputs 58
Immediate Immersion (Lazy Signups) 61
Social Login 63
Stepped Forms (Wizards) 66
Completeness Meters (Progress Bar) 70

Patterns for Collecting Input 29
Mad Libs Forms
OKCupid
Oscar
Moof
1. Problem
Entry fields are too vague or too mundane.

2. Solution
A fill-in-the-blank format provides context to the information, and
lightens the mood. This format adjusts to natural thought processes,
rather than appearing like a data-collection machine. Mad libs are
more relaxed and explain the function clearly to avoid confusion,
especially compared to single-word descriptions of other form
fields. On top of that, they also provide the opportunity to show-
case your site’s personality. Studies even suggest this pattern can
lead to an increase in conversions.
The OKCupid example above demonstrates the subtle but effective
advantage. Simply having the boxes with orientation and gender
would be enough, however it would require a moment to figure
out. The Mad Libs format circumvents that moment, and rein-
forces user involvement with a personal touch, just by adding a
simple “I am a... ”
3. Tips
• Underlining the input field is more natural and informal than
a form box, reminiscent of mad libs and other games.
• Phrase as a first person narrative, or as the user’s command
to the system.
• While this pattern adds life to standard data entry like sign-ups,
it can have the opposite effect with too much information. If
you need more than a few sentences, a more traditional form
field strategy would be faster.

Input Hints
Tumblr
Yelp
The Weather Channel
Yell

1. Problem
Entry fiends are confusing, with users often entering incorrect
information.
2. Solution
The easiest ways to clarify what to type in a form field are examples
or hints, usually defaulted directly in the field (oftentimes grayed
out). This pattern is almost always prefered to form field labels,
and avoids cluttering up the screen. Plus, it goes hand-and-hand
with the mad libs pattern above.
HTML5 makes it easy to include text that as a placeholder inside
the input field. Alternatively, the hints can appear as a popover
while hovering.
As shown above, The Weather Channel automatically determines
your location through geotracking and uses that as the home page
– but the site also allows searching. Since the magnifying glass icon
is a bit vague in this context (could mean search either locations
or the site content), the site provides a hint, even including the
three types of data it accepts.
3. Tips
• If you can, use resources like geotracking or user research to
fill in the most likely answers (like Yell does above).
• If a field accepts more than one variation, give multiple or al-
ternating examples. Yelp’s hint (“tacos, cheap dinner, Max’s”)

shows that type of food, price, and specific restaurants are all
searchable.
• Make the input hint disappear once the user clicks into the
search field.
• Limit your hint to just a few words, otherwise you actually in-
crease the cognitive load.

Forgiving Formats
Airbnb
Twitter
IMDb
1. Problem
It’s unclear which format to use for a form field.
2. Solution
Accept multiple formats.
Making all relevant formats acceptable puts the duty of inter-
preting the data on the system rather than the user, minimizing
cognitive load. This is a huge space-saver compared to different
form fields for each format, and it streamlines the UX so that the
user goes to the same place in different circumstances. Forgiving
formats provide users a great deal of freedom and convenience,

reducing the likelihood that they blame themselves for the sys-
tem’s UX shortcomings.
This patterns opens some doors, as well. For example, Twitter can
give the users several choices for logging in (phone number, email,
or username). Even if the users start typing without looking at the
input hint, the likelihood of error is minimal.
3. Tips
• Typically, this works best with input hints pattern above, so the
user knows they have options. You can bypass this step, how-
ever, if the input hints add unnecessary length. For example,
Airbnb does not include input hints since writing “ZIP, Country,
State, Province... ” etc. would defeat the purpose.
• Works great for logins, where users can choose between their
username, email, etc., depending on which is easiest for them
to remember.
• A must for database sites (like IMDb), which specialize in dif-
ferent categories of content.
• This pattern has its limitations in the backend. Verify with your
developers whether the scope of information is narrow enough
for the system to handle.

Undo
Asana
Gmail
Facebook
UXPin

1. Problem
Mistakes derail the user’s task flow, or cause them to backtrack.
2. Solution
Allowing your users to undo actions is a necessary precaution.
The undo option creates a forgiving UI in general, which gives the
user the confidence to experiment.
The option to undo is empowering to the user, as it gives them
more control without hassling them with repetitive requests for
confirmation. Instead of holding the user’s hand and doing things
for them, the undo option is a safety net while they learn to ex-
plore on their own.
Perhaps the most famous and well used example is Gmail. For im-
portant actions, a small box appears explaining the situation and
offering the choice to undo. If the action is justified, the user can
simply ignore the window and go about their work – the window
fades away after a few moments, anyway. Gmail even lets you
“unsend” emails within 30 seconds.
3. Tips
• The undo option should always be unobtrusive, usually a small
pop-up window that goes away when ignored. If the undo op-
tion requires confirmation for every scenario, it can be just as
distracting to the user flow as an error. The exception is actions
with severe consequences that don’t occur often. For example,

permanently deleting a project in UXPin requires confirmation,
but moving an email to a different folder in Gmail does not.
• Don’t go overboard with how often this option comes up. The
goal is to make the user’s flow go faster, after all, so minimize
distractions.

Default Values Autocomplete
Google
Twitter
Weather Underground

Travelocity
1. Problem
User input takes too much time or effort.
2. Solution
By anticipating the user’s input, you save them time and effort, and
create an interface that feels intuitive and personal. Ideally, the UI
should adapt and “learn” from the user to improve accuracy with
usage, but even some available default values based on popular
choices from other users is better than nothing.
Autocomplete is a well-established best practice, and 82% of the
top-grossing e-commerce sites use it.
Google searches more or less mastered this pattern, having im-
plemented it since 2008. Because users tend to search the same

things more than once, by remembering search history, Google
saves time and creates a far more convenient experience.
Twitter, too, handles this well, and takes it a step further. Search-
ing a specific name brings up a link directly to their profile; if you
don’t click on the profile link, the search instead brings up all the
possible results for that and similar accounts. Offering the link
simply saves the user a step.
3. Tips
• Highlight differences between the inputted information and
suggested information (e.g., input text is bold weight, while
suggested terms are standard weight).
• According to the Baymard Institute’s research, allow for key-
board navigation. Once a user scrolls down past the last item,
they should return to the top of the list. The ESC key should
allow users to exit the list.
• As the same Baymard Institute study suggests, present less than
10 items (and without a scroll bar) so the information doesn’t
become overwhelming
• Once the user has input enough information for a recommended
item, use color to highlight that choice.

Inline Validation
eBay
OKCupid

Geeklist
Blogspot
1. Problem
The user has to redo an entire page of forms if one of them is
wrong, or simply desires more feedback during the input process.
2. Solution
Providing instant feedback is generally good UI advice, but for
form fields it’s even more practical. Filling in forms is bad enough,
but it’s exceptionally frustrating if you must review all your work
because the incorrect field is not highlighted.

Let your user know if the data is valid or not ASAP. Data entry
becomes more interactive and less robotic, plus errors are dealt
with quickly and with minimum consequences. Mistakes and typos
are inevitable, so accounting for them is just responsible design.
Moreover, individual sites have their own criteria for things like
usernames or passwords, which the user might ignore or assume.
In this case, prompt feedback doubles as instructions.
Even when there are no errors, feedback is usually welcome to
the users, who appreciate a discreet sign that everything’s going as
it should. For example, OKCupid includes “Ahh, Brooklyn” when
the user inputs a Brooklyn zip code. This confirms that the system
understood the zip code, and shows the site’s fun personality.
3. Tips
• Helpful for checking username or URL availability straightaway.
• Highly recommended with long forms or when the data is com-
plex – whenever the chances of error are elevated.
• Provide in-line feedback in real-time if possible (e.g., for pass-
words that are too short, email addresses that don’t match, etc.).
Fixing mistakes takes much less time and effort when the user
is still in close proximity to the form field.
• As with all feedback, inline validation speaks for your brand,
and so is an opportunity to showcase your brand’s personality.
For example, Geeklist provides feedback on the user’s password

in terms of “time to crack.” Make sure the feedback is simple,
clear, and human.
• Consistency standards recommend that mistakes are highlighted
in red or yellow. Pair the colors with text for improved acces-
sibility for color-blind users.

Contact Forms
W Design Agency
Anakin
Prospek

Weblounge
1. Problem
You want a fast way for customers to contact you.
2. Solution
The contact form is surpassing the traditional contact page lately.
Contact forms are more interactive than only stating your ad-
dress, phone number, and email. They are like big calls-to-action
for your entire company. As a prompt for direct user interaction,
they are more effective than “putting your information out there
and hoping for the best.”
This makes them especially important for agencies and portfolio
sites, as you can see by our examples above.
The style, tone, and formality can change. W Design Agency makes
the classic approach look modern with a hero photo background

and translucent boxes, while Anakin goes for something complete-
ly original. The important thing is that users are encouraged to
reach out, and that the interface makes it easy.
3. Tips
• Lead-in to the contact form with some enticing copy, even if
small. While the form alone is self-explanatory, a small message
builds urgency and makes it more personal.
• Assure the user the message will be read within a certain time-
span (usually 24 hours), so they don’t feel like their request is
going into the black hole of general inboxes.
• Contact forms are an ideal page/section for extraordinary vi-
suals, partly because of the empty space, and partly to further
persuade the user.
For inspiration, see Awwwards’s 25 Impressive Contact Forms.

Keyboard Shortcuts
Google Docs
Asana

Dropbox
1. Problem
Some functions take too long to perform.
2. Solution
Any way you can hasten the user task flow is worthwhile, and that
includes keyboard shortcuts. This pattern reduces a function’s steps
and a task’s total amount of time, plus it also helps personalize
the controls to the user.
Because mostly experienced users take advantage of “hot keys,”
this is a great way to BUILD familiarity without distracting begin-
ners away from the basics.
While standard functions like Copy Paste are expected on all
sites, you should still create new shortcuts for functions specific to
your site. This is what Asana and Dropbox do to make their own
interfaces easier.

3. Tips
• Especially useful for repetitive actions, such as organizing tasks
in Asana.
• If you use dropdown menus for functions, place the hotkey next
to the name as a reminder.
• When possible, use the universally accepted hotkeys to min-
imize the new material your users must learn. For example,
Ctrl+Z (Cmd+Z, Mac) should be your first choice for an undo
command default.
• Allow users to customize hotkeys, as they probably already
have their own preferences.
• The standard is to display hotkeys in a modal rather than a
separate page.

Expandable Inputs
Twitter
The New York Times
Medium

LittleThings
1. Problem
Unused input windows are cluttering the screen.
2. Solution
In the same vein as discoverable controls, expandable inputs stay
out of sight until they’re needed. This is typical for optional text
input, such as commenting or creating a post, but is widely used
for search bars.
This pattern also applies to the amount of text in the input field
– only add more lines if the user types in that much content. To
conserve even more space, limit the size of the window to accom-
modate small comments, then expand it as needed.
This pattern works well with social media sites, where users some-
times browse and other times post. Twitter places their posting box
(with a casual input hint) at the top of the screen for maximum
visibility, but uses expandable inputs to save that valuable upper
screen space.
Likewise, search functions – usually situated at the top – are often
expandable. The New York Times site even grays out the rest of
the page, so users can focus only on the search bar.

3. Tips
• Don’t hide essential functions. Expandable windows should
only be optional.
• To save even more space, add input hints within the lines of
the expandable form.
• When making a search field expandable, you can also try an-
imating the navigation bar so that it shrinks or disappears.
Alternatively, you could make the expandable search field a
dropdown that expands upon clicking.

Natural Language Inputs
Google Calendar
Remember the Milk

Google
1. Problem
The user doesn’t know how to enter data.
2. Solution
The natural language format allows users to enter information in
whatever way is most natural to them. Just like the mad libs and
forgiving formats patterns, this puts the duty of interpreting the
data on the system rather than the user. Think of it as an exten-
sion of the forgiving format pattern. The drawback is extra effort
in the back-end, but the convenience it adds to the UX tends to be
worth it.
This is especially useful for calendars, with many different ways
to say the same time. The natural language pattern eliminates the

user having to figure out the formal time and date. Words and
phrases like “tomorrow,” “next Saturday,” and “in two weeks” are
understood by the system, which can calculate the formal date on
its own. Google Calendar even goes a step further and assumes am
or pm, deducing that you probably don’t have a meeting at 3am.
3. Tips
• Don’t assume everything – if an input is unclear, add a confir-
mation. This slight inconvenience is a lot better than inputting
the wrong data.
• Account for common spelling errors and slang.

Immediate Immersion (Lazy Signups)
eBay
Airbnb
SoundCloud
1. Problem
Users don’t want to sign up until they’ve used the site.
2. Solution
Immediately immerse your users into the site by allowing them
to use (most of) it freely without signing up. More consequential

features should still require logging in, but letting the users “try
before they buy” so-to-speak effectively hooks them into signing
up, as opposed to scaring them away by demanding their email
address too soon.
This works especially well for ecommerce sites, where users are
free to windowshop all they want, and are only required to log in
when it’s time to buy. Airbnb takes advantage of this, too, allowing
users to find their place first and sign in afterwards.
Because immediate immersion is about enticing users, you can
even show them all the features, even if they require signing in.
SoundCloud lets users listen to tracks or playlists without signing
in, but not features like favoriting or adding a track to your play-
list. However, the UI is shown just as if the user already signed
up. This shows the user the available options, familiarizes them
with the layout, and lures them into joining.
3. Tips
• Present regular features (i.e., sales notifications) as “bonuses”
for signing up.
• Don’t alter the site’s appearance or UI, even if some features
require sign-up. Your users are learning how to use the site,
even before signing up.
• Highly recommended for sites with paid memberships, or where
registration requires personal or sensitive data.

Social Login
Spotify
Ancestry
Huffington Post

StumbleUpon
1. Problem
Signing up and/or logging in are too involved.
2. Solution
The increasingly popular social login pattern simplifies accessing
accounts into one or two steps. The social login option is one less
password and username to remember.
This pattern usually uses the logins from, in order of importance:
1. Facebook
2. Twitter
3. Google +
If there’s only one choice, it’s always Facebook. Twitter is also
common, and sometimes there are options for Google+.

An added benefit to this pattern is access to the user’s social media
information. A site can easily display comments, ratings, or Likes
from Facebook friends or other sites’ contacts.
As you can see by the examples, there’s a lot of flexibility in how
you present the choices. Sites like Huffington Post list out the
names of several different social sites, while Ancestry has only a
tiny Facebook icon next to the sign-in information.
3. Tips
• Not everyone uses social media, so always include the tradi-
tional email account option.
• Situate the social login options in a place where they easy to
see, like the top of the page. This makes sure that users don’t
waste time filling out their account information before realizing
there’s another option.
• While social log-in is extremely convenient, it might also worry
some users that the site will take advantage of the information.
Add reassuring microcopy that the site will never post without
the user’s consent. The copy usually appears on the confirma-
tion modal (step 2 of the social log-in process) next to the “OK”
button.

Stepped Forms (Wizards)
MailChimp

Delta
Amazon

1. Problem
A service or function requires an excessive amount of data input.
2. Solution
When there’s a large amount of data entry, as with certain services
or purchases, break up the process into smaller sections presented
one at a time. As recommended in Interaction Design Best Practices,
this makes inputting much more manageable, even though it’s the
same amount of information.
Moreover, sometimes early data influences later data. For example,
choosing between international or domestic delivery will change
the shipping options. For these situations, a stepped form creates
the right pace by preventing unnecessary information.
Stepped forms also apply to onboarding and tutorials, where
explaining everything all at once would be too heavy. In these
circumstances, limit yourself only to the information that’s neces-
sary from the start. For example, a home address and credit card
number aren’t needed until the user makes their first purchase.
You can see this pattern with almost every major airline’s site,
including Delta above. Booking a airplane ticket requires more
information than other purchases, and all that information on a
single page would appear daunting. Airlines can better custom-
ize the steps based on the early answers – choosing first class or
business class will bring up different seat selection pages.

3. Tips
• Use the completeness meter pattern (described next) to show
users how long the total process will take.
• Large amounts of input are taxing on users, even with the
stepped form. Eliminate any data that isn’t necessary, and keep
the number of steps to the bare minimum.
• If your form requires 5+ steps, consider adding a “Steps Left”
pattern to show how many remain.
Design web patterns faster with UXPin (1000+ built-in elements)

Completeness Meters (Progress Bar)
Quora
UXPin
LinkedIn
Fitocracy

Amazon
1. Problem
The user is anxious about how long certain processes take, and
may leave because it’s taking too long.
2. Solution
Give the user context about their progress and the total process
with a completeness meter.
Completeness meters are usually seen in four fields:
1. Onboarding/tutorials
2. Profile completion
3. Form completion
4. eCommerce checkout
... but they’re not limited to these. For example, some airline sites
problem completeness meters for passengers choosing their seat
and other ticket specifications. Any multi-step function can and
have a completeness meter.
The metrics for completeness meters vary. Percentages or number
of steps are standard, although there’s room for creativity. LinkedIn,
for example, gives nicknames like “All Star” to match the amount
of the profile the user filled in.

Completeness meters serve the dual function of both alleviating
user concerns about time commitment, and incentivizes them for
deeper interaction. Incomplete things tend to make people uneasy,
and when it’s something as easy to finish as a profile, users usually
just do it.
3. Tips
• While unnecessary, completeness meters on profiles encourages
users to fill them out more completely.
• If your metric is the number of steps, try phrasing such as “Step
# out of #” to concisely tell both how many steps there are total,
and how far along the user is at the moment.
• If the amount of steps is daunting, try consolidating the steps
into bigger, umbrella steps. For example, Amazon’s checkout
completeness meter lists only four steps (“sign in,” “shipping
payment,” “gift options,” “place order”). However, the “shipping
payment” step alone consists of three or four smaller steps.
Their abbreviated format, though, appears more manageable.

User Controls
Drag-and-Drop Actions 74
Flagging/Reporting78
Discoverable Controls 81
Overflow Menus 84
Context Menus 87
Morphing Controls 89
Direct Manipulation of Content Data 92
WYSIWYG Text Editor 94

User Controls 71
Drag-and-Drop Actions
Google Drive
DeviantArt

User Controls 72
UXPin (Photoshop Sketch integration)
Trello

User Controls 73
1. Problem
Moving and organizing content is too much effort.
2. Solution
The drag-and-drop functionality is a preferred method of organi-
zation for most users: it’s intuitive because it’s based on reality,
and often something user try instinctually when first using a UI.
Drag-and-drop provides a level of direct manipulation that other
methods can’t match. While it’s more organic with the gesture
controls of mobile, it has already become ingrained on desktop
sites as the most effective way to rearrange items in a list, or move
documents from one place to another.
Deviant Art cleverly uses drag-and-drop as a shortcut to their favor-
ite feature. Rather than clicking a series of commands to favorite a
piece of art, users can simply click on the piece they like, and move
the cursor slightly. This movement triggers the favorite pulldown
menu, and the user can now drag-and-drop the piece there. Over
time, users can create their own personalized inspiration gallery.
3. Tips
• Give some visual indication that drag-and-drop is available.
This could be something obvious like Google Drive’s large no-
tification, or it could be more inconspicuous, such as changing
the colors of the window’s borders.

User Controls 74
• For responsive web apps, the drag-and-drop action in the desk-
top version helps create a snappier design and strengthens
consistency across mobile devices.

User Controls 75
Flagging/Reporting
Pinterest
Tumblr
Airbnb

User Controls 76
Etsy
1. Problem
Inappropriate content gets in the way of user task flows.
2. Solution
Let users report inappropriate content (or other users) for admin-
istrator review and removal. Inappropriate content could mean
a variety of things:
• Obscene content, whether images or text
• Offensive, insulting, or bigoted content
• Content that is mislabelled, misplaced, or categorized incorrectly
• Spam and solicitations
• Violations of site policy
• Copyrighted work
• Descriptions/solicitation of illegal acts
This pattern takes the pressure off you to regulate every piece of
content that comes through your site, and gives the users them-
selves some authority, which they appreciate.
For sites in which interaction between users is a core part of the
experience, an option to report other users takes more priority
(especially for dating sites). Airbnb gives the option to report users
– quite blatantly under their greeting on their profile. Airbnb is

User Controls 77
as much about the hosts as their location, so being notified about
suspicious users is better for business.
3. Tips
• The option to flag or report is essential for sites with user-gen-
erated content, but it doesn’t have to be stand out. Having a
small flag icon in the corner (Pinterest), or even tucking the
option in a pull-out menu (Tumblr) are acceptable.
• If the questionable content was posted directly on the user’s page,
the action of flagging/reporting can also double as removing it,
saving them an extra step.

User Controls 78
Discoverable Controls
Pinterest
Spotify

User Controls 79
imgur
Medium
1. Problem
Displaying controls for each piece of content clutters the screen.
2. Solution
Hide the controls until they’re needed. Discoverable controls (a.k.a.,
hover or hidden controls) are one of the most useful UI patterns,

User Controls 80
and widely adopted. They are so popular, in fact, that if users are
confused, they will now hover over questionable items expecting
something to appear.
Discoverable controls are an effective space-saver without sacri-
ficing user functions. Just look at Pinterest, one of the early pro-
ponents of the pattern – imagine how busy the screen would be
if every post had all the controls visible at all times.
This pattern also makes the controls more comprehensive, espe-
cially together with the card grid (a common pairing). Discoverable
controls make it clear which card the controls apply to. Universal
controls can get confusing with multiple posts, so having the con-
trols appear within the post itself clears this up.
3. Tips
• A practical necessity for the cards layout, when the user is able
to interact in multiple ways with each card. Controls reveal
themselves upon hover for desktop and tap for mobile.
• Avoid using discoverable controls for essential actions, as they’re
always a chance they’ll go undiscovered. As a rule of thumb,
ask yourself if users can still enjoy the interface without these
controls – if so, it’s safe to hide them.
• For more information, interaction design expert Dan Saffer
discusses modern solutions for discoverability.

User Controls 81
Overflow Menus
Spotify
AOL

User Controls 82
Behance
1. Problem
Too many options are cluttering the screen.
2. Solution
Move the extra options to a second menu. Overflow menus are a
smaller, more manageable alternative to slideouts.
Overflow menus present all the secondary options that aren’t nec-
essary and keep them hidden unless they’re needed. These could
hide links (like the extra page links in AOL’s grid icon) showcase
controls, as with Spotify or more detailed features (like the ad-
vanced search in Behance).
In fact, Behance demonstrates the ideal use of the overflow menu:
detailed search is a useful but not primary feature, and so can be
hidden from the main screen.

User Controls 83
3. Tips
• Animating the appearance of an overflow menu, such as sliding
out, adds weight to it and reinforces the connection with the
triggering element.
• Treat overflow menus as slideouts, but smaller. The same rules
apply to both, such as only including secondary content and
using recognizable icons.

User Controls 84
Context Menus
Google Drive
Gmail
Dropbox

User Controls 85
1. Problem
Certain contextual controls clutter the screen view.
2. Solution
A specific kind of hidden controls similar to overflow menus, con-
text menus offer contextual controls, specific to certain types of
content. These are typically activated by right-clicking.
The controls within context menus change depending on the
content. For example, in Google Drive, the context menu offers
different options for folders and documents.
3. Tips
• Use common tasks for the site so that the user does not have to
return to the toolbar every time they wish to use them.
• As a default, CRUD (create, read, update, delete) functions work
well

User Controls 86
Morphing Controls
YouTube
Pinterest

User Controls 87
imgur
Quora
1. Problem
Some controls don’t need to be displayed at the same time, and
clutter the screen.
2. Solution
Morphing controls save screen space and make a more logical
interface. The most obvious example, from YouTube and almost
every video site, is the play button that becomes a pause button
– the play and pause functions never need to be displayed simul-
taneously.

User Controls 88
This pattern works great for usability, as related but opposing
functions are located in the same space, which matches how the
user perceives and therefore search for the actions.
3. Tips
• This works well with undo functions, such as Pinterest’s Like
and Unlike.
• Be consistent with both functions’ appearances, i.e., don’t change
the font or text size.

User Controls 89
Direct Manipulation of Content Data
Twitter
Asana
Wunderlist

User Controls 90
1. Problem
There are too many steps to manipulating content.
2. Solution
Eliminate extra steps by allowing users to edit, delete, or add con-
tent in the same mode. Essentially, the less steps the user takes,
the better, so this pattern is about increasing efficiency.
Twitter users can drag photos into the tweet without opening the
Media menu, and Wunderlist users can edit the names of their
tasks by simply clicking on them.
Asana, though, handles this pattern the best: without opening a
new menu or switching screens, the user can add a new task, edit
an existing task’s name or details, assign a task to a project, change
the task’s privacy settings, comment on the task, unfollow it, or
reorganize the order of tasks.
3. Tips
• To see where in your UI you can implement direct manipula-
tion, try listing out the steps of a given task and analyzing them
for redundancies. For example, to send an email, a user might
click the new email button, click in the content menu, and
start typing. A shortcut would be to have the user already in
the content menu after clicking the new email button, saving
them an extra step.

User Controls 91
WYSIWYG Text Editor
Gmail
Medium
Quora

User Controls 92
1. Problem
The user is unsure about how different text formats will appear.
2. Solution
A WYSIWYG text editor shows the users precisely how their text
will look when finished, eliminating all the confusion about dif-
ferent formats and superseding markdown formatting, preview
modes, or HTML code.
Just like the direct manipulation pattern above, WYSIWYG text
editors save steps and time. Seeing the final product as they write
it combines steps, which is why this pattern is implemented in
almost all blogging and email platforms.
3. Tips
• Don’t neglect fonts – if your site uses a specific font, have that
as the default.
• Use this pattern for sites in which users will spend time scruti-
nizing content (e.g. portfolio template sites, blogs, etc.)
Design web prototypes faster with UXPin (1000+ built-in elements)

Navigation Wayfinding
Searches97
Notifications99
Jump to Section 102
Sticky (Fixed) Navigation 105
Vertical Navigation 108
Slideouts (Drawers) 112
Popovers116
Modals119
Calls to Action 123
Featured Content 126
Recommendations129
Related Content 132
Recently Viewed (History) 135
Next Steps 138
Walkthroughs (User Onboarding) 141
Links to Everything 144

Searches
Facebook
YouTube
Wikipedia
New York Times
UXPin

1. Problem
User is looking for something specific and doesn’t know where it
is or wants a direct route there.
2. Solution
One of the most basic and popular patterns, including a search
option is a navigation necessity. Typically a search bar in the up-
per-right corner, this feature finds related content within the site,
saving the user time in going where they want.
3. Tips
• If you’re tight on space, use an expandable input bar coupled
with a magnifying glass icon. The New York Times even has a
dropdown search bar when the user clicks the icon at the top.
• The more content you have, the more prominently you want to
display your search feature. For example, content-heavy Face-
book and YouTube break from the upper-right corner norm and
have their searches in the upper-left and upper-center.
• The autocomplete pattern further saves the user time and may
even suggest content or proper wording.
• If the user can search for multiple criteria, use the input hint
pattern to explain (i.e., Facebook).

Notifications
Twitter
LinkedIn
Google Apps

UXPin
Quora
1. Problem
The user doesn’t know when others are interacting with them, or
when new content is available.
2. Solution
Notifications have been popularized by social media sites as a way
for users to know when others are interacting with them. However,
it’s since spread to sites and web apps, with notifications available
for new content, products, comments, or sales. The user, of course,
selects which items they’d like notifications for.
Google actually integrates notifications across multiple products.
This means that when a user logs into Gmail, they can receive
quickly check to see if anyone responded to their comment on
YouTube.

3. Tips
• The most generally accepted icon for notifications is a bell.
• Notifications are almost always marked by a colored and circled
number next to the appropriate icon. Choose a color that will
stand out, as the point of notifications is to attract attention to
new material.
• Occasional product updates are fine, but don’t abuse notifica-
tions with too much self-promotional news. This weakens the
impact for worthwhile news.
• If a user has not logged in for quite some time (e.g., one week or
more), consider adding a quick notifications summary modal
to highlight important events.

Jump to Section
Wikipedia
Tumblr

eBay
The Hugo
1. Problem
Browsing or returning to certain sections on a page involves too
much scrolling.
2. Solution
A jump-to option, whether a text link or icon, saves the user time.
As an optional feature, this should not draw too much attention

from the main text, but it certain helps provide anchoring points
for long-scrolling sites.
For long text-based content, adding links to the table of contents is
a quick solution. This is a simple and practical solution that’s been
around for awhile with Wikipedia as the most known example.
But with the increasing popularity of infinite-scrolling sites, par-
ticularly with user-generated content, the option for jumping to
the top of the page has become a pattern. This lets users return to
familiar ground in case they get lost, or want to visit another page.
3. Tips
• A return-to-top button usually goes unused since people can just
scroll quickly, but it may be helpful for infinite-scrolling sites.
For this reason, the option should be small and unobtrusive,
like Tumblr’s and eBay’s tabs, “stuck” to the side scrollbar.
• Unnecessary if you use an effective sticky navigation bar (de-
scribed below).
• For a step-by-step runthrough of how to create jump-to links
in HTML, read this article from HubSpot.

Sticky (Fixed) Navigation
Facebook
Craigslist

Mashable
Mint
1. Problem
Users get disoriented and lost when long-scrolling, or returning to
the main navigation menu requires too much backtracking.
2. Solution
Implement a fixed navigation menu that stays in place when the
page is scrolled, nicknamed “sticky” navigation. While the top nav-
igation menu is most common, sides and bottom are also common
(but more obtrusive).
As a site with an infinite-scrolling feed, Facebook uses a sticky top
navigation menu well. It gives users the always-present option to

“change course,” if they suddenly want to search something spe-
cific, check their profile, or see their notifications.
Craigslist even uses sticky navigation on three sides, and two on
the top. The bottom and first top menus are universal to the site,
allowing users to go anywhere. The left menu and second top
menus are specific to the current page, helping to refine searches,
or start new searches for that field, respectively.
3. Tips
• Since they always occupy a portion of the screen, sticky navi-
gation menus should be as small as possible.
• Highly recommended for single-page sites, which otherwise
would lack any form of navigation menu.
• For the sake of mobile experience, shrink the sticky navigation
for smartphone users. This microinteraction draws attention
to the menu so the user knows it’s there if they get lost. If your
menu is already quite compact, you can try changing the colors
upon scroll (Mint) to draw attention through contrast.
• If your site features a mosaic of images in a card format, a sticky
navigation is not advised since it can get lost in the noise when
users scroll downwards. To learn more, check out this article
on the pros and cons.

Vertical Navigation
Facebook
Gmail

Wikipedia
YouTube

1. Problem
There are too many important links that don’t fit across a hori-
zontal navigation menu.
2. Solution
For more room, use a vertical navigation menu on the side. This
allows you to list important sections in the most space-efficient
way – as long as those links are necessary.
Vertical navigation can be used by sites with many pages that want
to give their users all the options. This format also keeps the top
and bottom of the screen free for either content, or more general
navigation options.
Just like jump to navigation, this pattern emerged to suit the needs
of long-scrolling sites. It’s well-suited for sites with user-generated
content, and can be combined with other patterns like slideouts
and sticky navigation.
Sites like Facebook, YouTube, and Wikipedia all take advantage
of vertical navigation. While each of these sites has an excess of
content, the reason they chose this pattern is an excess of pages.
The benefit of vertical navigation is allow users to move freely
between pages – not individual pieces of content.
3. Tips
• Because vertical navigation lists take up a lot of space, consider
hiding them as slideouts (described below).

• Don’t limit yourself to the left side – a right-side vertical naviga-
tion menu can make your site stand out. The left side is better
for visibility with the F-pattern (see Chapter 5) and main navi-
gation, but if your list is simple, it doesn’t matter where it goes.
• To get creative you can also try combining the vertical naviga-
tion and jump-to pattern to create a minimalist navigation like
what you see on Born Fighters.

Slideouts (Drawers)
New York Times
Wired

DeviantArt

1. Problem
The navigation menu takes up too much space.
2. Solution
Hiding the navigation menu as a pull-out menu or slideout gives
your users the options they want, without wasting space – having
your cake and eating it, too.
This pattern is best known on mobile devices where space is scarce,
popularized mostly through the hamburger icon. The current
iteration of this pattern takes many forms: the hamburger icon
(New York Times) is still popular, but is now rivaled by the grid
icon (Wired), or a simple “Menu” button that acts like a hamburger
menu (DeviantArt).
Slideouts are very flexible in what they can contain. Small slide-
outs will contain textual links, while bigger slideouts showcase
rich icons and even photos (e.g., a profile photo for a social app).
Moreover, slideouts are often used for standalone functions, such
as chat windows. Facebook, Gmail, and other sites keep these
windows tucked away when they’re not in use.
3. Tips
• Use recognizable icons, such as the grid, so your user knows
on sight how they work. For the most clarity, you can even use
a “MENU” label.

• Pay attention to the animation as the menu pulls out. This is key
to maintaining the illusion that the menu is actually tucked away.
If you make the drawer slide out too quickly, all the information
at once will overwhelm the user. Give the animation roughly
200–300ms to play out the sliding motion, moving towards the
upper end of the spectrum as your items increase (check out
this tutorial).
• Create contrast between the slideout menu items and the menu
background.

Popovers
Netflix
Rotten Tomatoes

Bing
Dropbox
1. Problem
The user wants more information without losing their place on
the current page.
2. Solution
Usually activated by hovering, popovers add the details that would
take up too much room to display permanently. They are similar
to hover controls, but with information.
The appeal of popovers is that they don’t disrupt the user’s task
flow as much as going to a separate page. This makes them great

for browsing through a large amount of content, where the user
can call up more details about only the choices that interest them.
Look at Netflix: showing details for every movie would mean less
entries per page, which makes browsing more difficult. With their
current UI, when something catches the user’s eye, they can learn
about it without interrupting their browsing.
3. Tips
• Popovers work perfectly with the card layout: designers can
display a large amount of content option in manageable doses,
and conserve space in each card by listing some information
in popovers.
• A small pointer keeps track of which entry the popover relates
to, especially useful for close textual links like Rotten Tomatoes.

Modals
Shutterfly
Monster Jobs

UXPin
Fitocracy
1. Problem
User is not noticing or interacting with important content.
2. Solution
Because they require interacting, modals are a surefire way to
communicate important information. Like popovers, modals

provide additional information without the user leaving the page.
The key difference, though, is that modals demand a click, even if
it’s to click “Skip” or “OK.”
Modals typically have two uses:
• Draw the user’s attention to a feature they might be unaware of
• Promotion
For example, if you visit the site for Gap outside of the U.S., a
modal notifies you about international shipping in your area, and
provides links to its international sister sites. Similarly, Fitocracy
uses modals to point out and explain how certain features work.
The other popular use for modals is site promotion. Often, sites
use call-to-action modals to increase conversions on signups, sales,
newsletter subscriptions, etc.
3. Tips
• Differentiate the background when the modal pops up to draw
attention. This usually means fading the landing page, but a
creative filter can also work as long as it’s not distracting.
• Allow users to close the modal either by clicking outside the
box or tapping the ESC key
• If forcing users to click is a concern, have your modal automat-
ically minimize itself and become a call-to-action button on the
landing page. Use animation to make the correlation clear.

• A multi-page modal works great for onboarding tutorials, as
users can still see the normal screens behind them.
• Modals can also show when users leave a site, as one last chance
to regain their attention.
• For email subscription modals, trigger them once a user scrolls
partway through the content so you don’t annoy them. Learn
how to create a modal that won’t annoy mobile users in this
tutorial.

Calls to Action
Squarespace
Sunglass Hut

Eventbrite
1. Problem
Users need a clear next step on the page.
2. Solution
Influence users with calls to action in the form of obvious buttons
inviting them towards an action, whether buying, signing up, or
simply visiting certain content.
The most important factor for CTAs is visibility – they should be
noticed, without being too flashy. In fact, CTAs should be the among
the first elements the user sees; after all, they are synonymous
with business goals and therefore integral to the site.
The CTAs on Squarespace are clear and noticeable. Their black-
and-white color scheme attracts attention, the succinct and direct
wording leaves no room for misinterpretation, and their fixed
position keeps them on the screen permanently to add constant
urging.

3. Tips
• Colors are an effective way to get your CTA noticed. Atten-
tion-grabbing colors such as orange and green are good, as is
using a color that contrasts with the background, such as white
against black. For a more thorough analysis of colors in web
design, check out free Color Theory in Web UI Design.
• Another method for visibility is location. Situate CTAs in the
most seen areas on the screen. While these change depending
on your layout (see Chapter 5), the top is usually a safe spot.
The only sure solution, however, is to A/B test the position.
• As we see with Squarespace, making CTAs sticky gives them
extra emphasis, plus ensures they’re permanently on the screen.
• Consider ghost buttons as a flat-inspired alternative to the tra-
ditional CTA button. Ghost buttons fill with color as users hover
over, adding an element of visual delight.
• Don’t neglect microcopy – it’s your elevator pitch. For tips on
writing specifically for CTA buttons, read Magdalena Georgie-
va’s piece for HubSpot.

UI Design Patterns for the Web, Part 1

More Related Content

What's hot

Viewers also liked

Similar to UI Design Patterns for the Web, Part 1

More from Lewis Lin 🦊

Recently uploaded

In this document

UI Design Patterns for the Web, Part 1