Uxpin Interaction Design Unlocked Volume I - Designing The Details

Interaction Design Unlocked
Volume I: Designing the Details
Copyright 2015 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
Poetry in Interaction Design: The Importance of Copy
Why Copy is Essential in Interaction Design
The Variability of Context
10
The Different Forms of Copy
12
Conclusion
21
White Space in Interaction Design:

Applying the Hidden Power of Nothing
22
Empty Causes
23
Macro and Micro
25
Passive and Active Space
28
Minimalism
32
Conclusion
36
Attraction in Interaction Design:

Creating Love at First Sight
37
More than Meets the Eye
38
Not Just a Pretty Face: the Functional Role of Visuals
40
Not Just Physical: The Emotional Connection of Visuals
44
Conclusion: Its Whats Outside that Counts
48
The Secret Ingredient:Microinteractions
49
What is a Micro-Interaction Anyway?
50
Four Parts of Micro-Interactions
51
Details With a Purpose
52
Micro-Interactions in Practice
54
Conclusion
56
The 5 Psychology Secrets for

Enduring Interaction Design
57
Design for Comfort and Predictability
60
Connect Emotionally
62
Design with Mental Triggers
64
Design With Simplicity
67
Conclusion
69
Delight In Interaction Design:

4 Examples Deconstructed
70
Only the Best Icing
71
Conclusion
84
Interaction Design Tutorial:The Navigation Drawer
85
How to add a come back
92
How to show the navigation drawer on swipe

to the left and hide it on swipe to the right
94
How to make left-side navigation drawer
96
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
Carrie Cousins has more than 10 years experience in the media

industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way
too much time planning football and basketball trips and obsessing over stats.
Follow me on Twitter
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.
Poetry in Interaction Design:

The Importance of Copy
by Jerry Cao
Lets start by examining a human interaction thats not always prioritized in interaction design. Believe it or not, the words on a page
are oftentimes the most important element of interaction design.
Language is what separates man from the beasts. Users naturally
scan for words, which makes copy one of the most natural pathways
for influencing behavior. Well-written copy presented in the right
typography makes your design feel humanly familiar.
Photo credit: Poetry Books. Chilli Head. Creative Commons.
Our ability to rapidly communicate with words is the reason why

the three-toed sloths arent ruling the world right now. Language is
a bit like our claim-to-fame as a species, but it is a multi-faceted and

complicated tool that can just as easily cut your hand as aid you.
The words you choose in your interface copy, even if the message
seems meaningless to you, directly affect the users impressions of
your brand especially since it only takes users about 10 seconds to
decide if theyll stay on a site.
Your copy as your mouthpiece is a silent but powerful medium. In
this piece, well explore the different applications of copy in interaction design.
Why Copy is Essential in Interaction Design

Interface copy is your side of the dialogue between your product
and your user, and you should always approach interactions as a
conversation. In fact, words are the first dimension of interaction
design, followed by visuals, space, time, and behavior.
Photo credit: MailChimp Voice & Tone
Just like the way you speak in everyday life, your words and how
you use them reflect your personality in design. This personality
of words is creates the voice and tone of the design just as much as
the images, visual hierarchy, colors, icons, and animations.
The tone of interface copy creates the context for interactions. After
a few words, the user will be able to gauge how serious or casual
the interaction will be, whether or not the product is what theyre
looking for, and even the overall quality of the company.
Photo credit: Dunckelfeld
Words are also themselves interactions as users scan a website. They

form mental images, create emotional connections, and suggest next
steps.
For example, on the homepage of German design agency Dunckelfeld, you can see how the words The Fast And the Curious complements the mesmerizing background showing snippets of life from
geometric patterns to camels in a desert. The sharp copy enhances
10
the videos effect of showing the user that this is an agency who can
spot the beauty in everyday moments (and presumably incorporate
them into their work).
Now imagine how the design would feel if the headline said something
typical like Better ideas today. The illusion of wonder is destroyed,
and the background video feels meaningless.
It doesnt matter if you sound sophisticated or blunt, if you use big
words or small, if you speak the Queens English or prefer abbreviations... what matters is that your tone matches the visual design
thats what entices people into interacting with the design.
The Variability of Context

Taking the above point a step further, the context surrounding your
product determines the best tone and other language choices you
make. The golden rule is that no one rule will apply in every circumstance... but similar contexts will have similar best practices.
When isolating the context youre working with, theres two areas
to focus on:
1. The Medium App or website? Home page or About Us page?
Chosen content or pop-up? Each will have different expectations
from the users, and so the text will need to be modified appropriately for the best results.
11
2. The Audience Who is reading the text? Targeting your specific audience is one of the fundamentals of communication since
the dawn of time, whether designing an ecommerce website or
editing an ancient Greek play.
The rules for a specific medium tend to be pretty common sense you
shouldnt try to fit a paragraph inside a single call-to-action button.
What you dont know by instinct, you can always discover by checking around the Internet with some popular examples.
Writing for a specific audience, on the other hand is one of the hardest skills to learn.
Photo credit: UXPin
12
The key element here is knowing who your audience is in the first
place. For that, the more you know, the better. Demographics are a
good start: age, gender, ethnicity, social/economic status, education
level different tones appeal more and less to each different type.
From there, you can get into more personable features.
Are your target users impatient, impulsive, or generally rushed? If
so, shorter, independant blocks of text will be better than eloquence
and flow. Are they avid readers? If so, you may be able to win their
hearts with well-paced paragraphs that tell a story (like what Blue
Bottle coffee does).
These personality traits are difficult to discover, so we recommend
falling back on your user research. As we explain in Web UI Design
Best Practices, personas act like another person in the room when it
comes to design decisions. Print out your persona and stick it on a wall
being able to see demographics, personality traits, and behavioral
patterns will save you a lot of stress throughout the design process.
The Different Forms of Copy

Its true that interaction design is a dominantly visual medium.
What we said about tone holds true equally if not more-so for visuals
if your company wants to exhibit a calm and relaxing personality,
heavy use of reds is a poor choice. But a site or app cant rely exclusively on visuals.
13
We can categorize when copy is most essential by the forms it takes.

Below weve listed the some common forms of copy for interaction
design.
(Note that we dont discuss actual content, like news articles or blogs.
This article is about language in interaction design language in written content is a topic that could fill a library on its own.)
1. Greeting
All sites and apps welcome their users, even if its not an explicit
Welcome to our site!. A prominent greeting, even if just one or
two words, can put the user a little more at-ease right from the
start, not to mention easily distinguish the home page from the rest.
Photo credit: Webdesign Agency Weblounge
Within moments of landing on Weblounges home page, you know

who they are and what they do. Even if you know nothing about
them going in, you can gauge their style and personality by their
14
language (words like expertise and awesome are all signals).

As a more subversive motive, their greeting even funnels the users
focus into their calls-to-action, and gives more incentive to click.
Their choice of serif fonts and italic styles in the headline enhances the message with a strong sense of professionalism, although
these fall more under visual representation.
Like we said before, your site interface must create a conversation with the user. In this case, the headline explains the agencys
expertise, so it makes sense that its presented in a more traditional typeface. The more casual copy beneath, with words like
awesome, is better presented as a serif font. Its the same effect
as someone formally introducing themselves, then diving into
lighter conversation.
2. Navigation
Even the most minimalistic sites use words in their navigation
bar and buttons (even if theyre triggered on hover). The only
other alternatives would be to no buttons or navigation bars at all
(which you usually only see on some single-page sites), or representing each option with an icon metaphor, as with the Facebook
example below.
Photo credit: Facebook
15
That works in some situations, but would be problematic with

abstract pages like Portfolio or Products. At their core, words
are symbols, albeit highly stylized ones.
The word home represents in sight and sound that place your
return to at the end of the day. The idea remains the same whether its represented by a drawing of a square with a triangle on
top, or a string of four specific letters. The advantage that words
have over visual metaphors, though, is their range: theyre able
to express complex concepts like portfolio in a way that every
speaker of the same language will immediately comprehend. A
drawing of a portfolio, however, is open to interpretation and
misinterpretation.
So most sites choose to simplify things by uses words in their
navigation menu. This may seem pretty direct home for home
page, help for the help page but its the subtleties that matter.
Do you say My Account, Your Account, or simply Account.
Contact, Contact Us, or add some enthusiasm with Contact
Us Now!
Photo credit: Urban Influence
The site for Urban Influence favors simplicity with one-word navigation hints, then breaking that rhythm with their call-to-action.
Remember to choose your words carefully for top navigation and
16
buttons. Save is not the same as Proceed, and Lets go! isnt
as clear as just simply stating the action.
3. Instructions
Sometimes, even the best interfaces arent self-explanatory. If
a certain procedure risks confusing the user, maybe its best to
spell it out for them. These explanations can range from short
to long, sometimes being a single line, sometimes a step-by-step
instructional. They can also be dry or humorous their primary
purpose is communicating useful information, with personality
a secondary concern.
Photo credit: Pepe Jeans: Extreme Catwalk
For their Extreme Catwalk jeans page, Pepe Jeans uses a simple
scroll down for the free fall experience to ensure that everyone
knows how to use the site. While the mouse icon with the prominent scroll wheel might be enough on its own, the copy actually
entices people by telling them the fun experience thats triggered
by scrolling.
17
4. Feedback
As described in Interaction Design Best Practices, feedback is how
you communicate directly with users in response to their actions.
Feedback is a core aspect of interaction design because it encourages users and provides a sense of security. As UX consultant Joe
Napoli suggests, feedback helps provides four types of answers
to users:
1. Location What page the user is visiting
2. Current status Whats happening on the page, and if the
user is any closer to their goal
3. Next steps What will happen next, and how the user can
trigger it
4. Validation If any errors were made, or any outstanding actions required
Photo credit: Starbucks
One of the most common feedback messages is the confirmation

that a signup was successful, as with the Starbucks example above.
18
Not only is it nice to be appreciated with a warm welcome or

thank you, but the feedback message also signals that the signup
process is finished so that we can move on. This Starbucks feedback page also allows for furthering ulterior motives after the
signup is a good time to plug buying a Starbucks card, completing
the profile, or downloading their app.
Error messages, too, fall under this category, although they would
sometimes have equal claim to instructions if they explain how to
handle the problem. Language is especially important for error
messages, as a means to soften the blow of there being an error
in the first place. When used with skill (and a bit of humor), word
choice can actually turn a bad experience into a good one, as with
amusing 404 pages.
Photo credit: Hootsuite
Hootsuite adds a little humor and furthers their bird brand identity
with their 404 page. Their use of bird-related humor and clever
19
reasons for having arrived there turn what could have been a
damaging user experience into a surprisingly positive one.
5. Calls-to-Action
Anyone in sales will tell you the importance of wording when
closing a deal.
Just as with navigation, the key to language in calls-to-actions subtlety. Because you are limited to only a few words within a button,
each one must be weighed and optimized. If you dont know the
significance a single word can have, look at this example from
Organizing for America, provided thanks to Smashing Magazine.
Photo credit: Jacob Gube via Smashing Magazine.
The single word now goes a long way by infusing the CTA with
an energy and attraction the word donate alone cant match.
You dont need to know why a single word can create this effect,
as long as you can recognize the results.
In a much more direct fashion, we again see how words have the
power to entice users into interacting with the design in a way
thats valuable to the business.
20
6. Data
The most basic use of language in a site or app is data: the companys addresses, phone numbers, legal text thats required to be
there, etc. Theres very little wiggle-room on the data itself (except
for visual choices, such as font or size), but the introduction of the
data can be adapted to your tone.
Photo credit: Welikesmall
The digital agency Welikesmall adds a little spice to an otherwise

bland contact page. All the necessary information is there numbers, address, email, even social media links but jokes like for
a good time call... add a little something extra and memorable,
which is good for adding a bit of delight to the experience.
21
Conclusion
As Basecamp suggests in their excellent online book Getting Real, If
you think every pixel, every icon, every typeface matters, then you
also need to believe every letter matters.
You cant separate copy from design because its all part of the same
interface. Know your user, know your constraints, and make sure
you have clear and interesting copy to complement the design.
White Space in Interaction

Design: Applying the Hidden
Power of Nothing
by Jerry Cao
Your design lives within a finite screen. There is only so much that
can be said, done, and offered within that tiny box, and so every last
pixel is valuable real estate.
Photo credit: Bureauhub architecture... Forgemind ArchiMedia. Creative Commons.
Of course even amateur designers know not to overload a single

page, but when it comes to exactly how much white space to include,
sometimes even seasoned designers might draw a blank.
White Space in Interaction Design: Applying the Hidden Power of Nothing
23
White space, or negative space as its also known the two terms
are used interchangeably refers to any screen space between existing elements. It doesnt need to to be white, or even blank (if, for
example, youre using a patterned, colored, or textured background).
Negative space creates a vacuum of content, which then draws more
attention to the existing content.
In this article, well discuss the how to apply one the most powerful
tools in a designers toolbox: nothing at all.
Empty Causes
As we described in the free e-book The Zen of White Space in Web
Design, negative space has been a part of aesthetic theory from the
very beginning.
Photo credit: Im alone/Explored. Vinoth Chandar. Creative Commons.
In digital design, though, this emptiness holds more weight, so to

speak. Negative space isnt just visually appealing, it must fulfill the
24
more practical roles of balancing the visual hierarchy and leading

the users eyes to strategic points of interaction. Moreover, if there
is text present, white space must also create the most legible and
readable environment on top of its other duties.
In general, white space directly affects the following areas:
Eye-scanning The space between bigger elements (macro white
space) affects how the user scans the page, and when used properly can guide the users sight to notice whichever elements you
want. This is helpful for creating a brand identity and increasing
user interactions.
Legibility The space between smaller elements (micro) like letters, lines of texts, list items, and sometimes icons will affect how
clearly and quickly each can be read and possibly selected.
Aesthetics When looking at the big picture, white space plays
a big part in the visual organization (and therefore aesthetics) of
the interface. For example, random clustering of content rarely
looks good.
Luxury Generous white space infuses your page with an air of
elegance and sophistication.
To better understand how to apply it, we can categorize the different
types of white space (macro and micro), as well as the different ways
to use them (passive and active).
25
Macro and Micro

Where and how white space is used on a page will affect its role. To
simplify this, we can break these types up into macro and micro.
1. Macro White Space

Macro white space refers to the spacing between large elements.
This is the spacing used for:
General composition
Separating different elements
Text columns
Margins
Padding
Space within actual graphics/images
Macro white space heavily affects the users visual flow, either
gently nudging or forcefully push their attention where you want.
The rule here is that larger distances push harder. You want to
strike a balance, however, because too much white space violates
Gestalt Principles and weakens the relationships between objects.
Lets look at art director Tomasz Wysockis site for an example of
how white space entices user interaction.
The first thing most users will notice is the pages title, Digital Art
& Experiments in an atypical sans-serif typeface. In conjunction
with the texts size, the white space surrounding the title funnels
26
the users attention there from both sides. The top and bottom
menus, too, also attract attention, though not as much since they
only have space on one side. Overall, the white space does its job
of drawing attention, but the design is actually deceptively simple.
Photo credit: Tomasz Wysocki
Wysocki actually uses the white space as a blank canvas for surprising us with the richness of his work. Upon hovering over any
of the bottom navigation, we are treated to a full-page background
image of the work. The effect creates an almost childlike joy of
discovery: we stumble into a blank space, only to find that each
drawer is filled with visual delight.
You can see below how dramatically the screen transforms upon
hover:
27
Photo credit: Tomasz Wysocki
By using white space as a tool for luring users into his work, Wysocki creates an experience that is strangely addictive. After the first
work appears, we want to see what else hes hidden from us it
feels counterintuitive from a discoverability standpoint (since
youd want to reveal the most important content), but it works
because its executed with the perfect level of intrigue.
2. Micro White Space

On the other hand, when designers mention micro white space,
they are referring to the space between smaller elements, or the
elements within greater elements. These include:
Letters
Lines of Text
Paragraphs
List Items
Buttons & Icons
Micro white space is used mostly for the overall clarity of the site,
specifically legibility of typography (how clearly you can distin-
28
guish each letter). When adding space in and around text, youll
want to strike the balance between just enough to aid clarity, but
not so much that it distracts from more important elements. Its
usually a good idea to set the line height (vertical space between
lines) to around 1.5x your type size.
As we mentioned when discussing the Gestalt principles in our Web
UI Design for the Human Eye, putting elements in close proximity
also suggests they function similarly. Micro white space can help
suggest a relationship between buttons or links, and mimicking
this spacing elsewhere reinforces a pattern, which increases recognition (and learnability) with use.
While macro and micro are the types of white space, each can be
used either passively or actively, which well explain now.
Passive and Active Space

The application of white space all depends upon context.
As we said above, the more space used, the stronger the pull. But
you dont always want the strongest pull possible for every element
on a page, not to mention how much screen real estate that would
consume.
Lets look at how passive and active space help create balance in
negative space.
29
1. Passive Space
Think of passive white space as the bare minimum.
Without enough white space, a site becomes illegible and frustrating to navigate, as effort is required to make sense of the jumble.
Passive white space is however much white space is required to
make the site comprehensible.
Photo credit: Resonate 15
In the above example, take a look at the spacing between the

words/links at the top navigation bar. Also, look at the text at the
bottom and the spacing between the letters, words, and lines. Do
you notice anything out of the ordinary? You shouldnt, theyre all
spaced so as not to draw attention. Thats passive spacing.
For macro white space, passive spacing means adding enough
borders and margins to clarify the distinctions between elements
and avoid confusion. For example, putting enough space between
a login navigation bar and a site navigation bar at the top of the
screen.
30
For micro white space, this means spacing out letters, lines of text,
and paragraphs to maximize readability, and spacing items in a list
or menu to make them individually easy to spot when scanning
(in other words, removing clutter).
Passive applications should feel organic and natural. In fact, the
main purpose of passive white space is that it goes unnoticed.
What makes it passive is that it doesnt draw attention to itself. It
simply looks normal.
The moment when enough space is used that it starts to stand out,
then it becomes active.
2. Active Space
Using white space actively is attempting to influence your users
visual flow. Surrounding an element with a large amount of white
space is a great way to get it noticed.
Photo credit: 1000: Chrome Experiments
There are actually a lot of elements on the above page: navigation

tabs, social media links, even legal information. However, the
31
most prominent is clearly the interactive 1000 graphic thats

dead center. By shrinking and pushing the other elements to the
corners, the designers at Chrome Experiments actively maximize
the space around the element they want the users to interact with
most.
Likewise, minimizing the amount of space between a smaller
line and the one proceeding may be a good way to hide it, as is
often seen with legal requirements or copyright information. See
how, below, the line FiberSensing is an HBM Brand is displayed
without drawing too much attention.
Photo credit: HBM FiberSensing
Macro white space is often used actively to draw attention to the

pages single main focus, or to separate more important elements
from the pack.
However, it can also be used with micro white space. Mark Boulton explains in an A List Apart piece that he sometimes applies
32
active spacing around a particular quote or paragraph within a

block of text in order to draw attention to it. This is great way to
emphasize the most useful points of your content to users who
are just scanning.
At this point, were getting into the strategic use of varying amounts
of white space. This could be thought of as different degrees of
minimalism, which well explain below.
Minimalism
The more white space you use, the more minimalistic your page becomes since youll need to remove elements to prevent clutter.
Minimalism is a design philosophy thats neither good nor bad - it
simply states that you remove any noise so users can focus on the
content. As you trim away the bells and whistles, the remaining content stands proud amidst the elegance of space.
Like we described in The Zen of White Space in Web Design, minimalism affects your site in a couple ways: the amount of elements
present, and the perception of luxury.
1. Amount of Elements
The less elements you have on your page, the more powerful each
individual element becomes.
33
If you have only one thing on your page, even tucked away in
the corner, it will become the sole focus of your user. If you have
a hundred tiny things, your users will either begrudgingly sift
through them for their point of interest, or more realistically, just
give up from choice paralysis.
This is relevant because the easiest way to increase the white space
at your disposal is reducing the number of elements on the page.
But we know thats much easier said than done. Minimalism as a
philosophy applies to any site - you never want to fill the screen
with anything the user doesnt need. Minimalism as an aesthetic,
however, is not appropriate for every site since content-heavy
sites wont be able to support the bare look.
When it comes to minimalism, remember that the aesthetic is the
byproduct and not the goal. The only way youll achieve the right
level of minimalism is to subtract just enough interface objects
until the design almost fails, then test the design with users, stopping when you hit the tipping point.
Photo credit: voghi
34
The site for the Italian fashion brand voghi keeps it simple and
beautiful. There are only two clickable elements on the screen: the
hamburger menu at the side and the arrow at the bottom. With
the contact information minimized at the right, the lack of competing visuals focus the attention on the gorgeous graphic, which
then leads attention to the arrow.
How you balance the significance of your items is up to you. Some
pages have only one clickable link to ensure the user goes where
the designer wants. Other sites have many menus of pulldown
submenus to ensure that the user chooses exactly the option they
want. As Kayla Knight suggests, you could consider removing taglines, Featured Content, and simplifying your navigation. Of
course, that all depends on your brand and product.
2. Perception of Luxury
Minimalism has become synonymous with luxury, and its use immediately conjures an atmosphere of sophistication, fashion, and
elegance. Fashion websites are notorious users of minimalism in
their digital designs but its rare to find those same designs for
bargain or mass-market firms.
The perception of luxury has a direct correlation to the amount
of white space:
Heavy white space is seen as luxurious, high-end, or sophisticated, and as such expensive.
35
Balanced white space is seen as, well, balanced affordable

but still quality.
Little white space is seen as cheap, low-quality, and the clutter
is also displeasing to look at.
Photo credit: Amazon
Compare the fashion website voghi we first examined to this

screenshot from Amazon. Amazon is more cluttered and includes
more navigation options and promotions. Both sites sell high-end
fashion products, but which do you think a typical fashionable
user would prefer? What about a reasonable, price-saver type of
shopper?
This applies to macro and micro space, but also and most importantly to the images used within the site itself. Browsing the
photography from fashion websites, youll notice more artistry
applied than the average photography from, say, an electronics
website.
36
Ultimately, youll always want to start first and foremost with the
needs of your users. Research your users, create useful personas,
then consider how white space can frame content so they can best
accomplish their goals.
Conclusion
As a visual art, interaction design cant neglect one of its most fundamental artistic principles. Nor should it the power of white space
goes far beyond aesthetics and can be used strategically to further
the more business-related goals of interaction design.
At the bare minimum level, its use facilitates the basic functions of
a site or app like readability and navigation. But in the hands of an
expert, the smart use of white space transforms otherwise plain interfaces into designs that users want to interact with.
Attraction in Interaction Design:

Creating Love at First Sight
by Jerry Cao
Theres no denying that visuals are important to interaction design,
but exactly how important may surprise you.
While visual representation is often listed as the second dimension of
interaction design (the others being words, space, time, and behavior), in many ways it is the first. As visual mediums, sites and apps
communicate primarily in visuals, and even written language must
be presented in fonts, size, etc. Perhaps even more important, as
sight-based creatures, humans are accustomed to making split-second decisions on appearance alone. These instantaneous responses
are deeply linked with emotions, and so your interfaces look will
directly and immediately affect how your user feels about the site
the key to a successful UX.
In this piece, well explain how and why an interfaces effectiveness
really is only skin-deep.
Attraction in Interaction Design: Creating Love at First Sight
38
More than Meets the Eye

We can easily notice when we see something we like (and something
we dont), but on a subconscious level theres so much more at play.
When scientists say humans are sight-based creatures, its not just a
casual comment theres a surprising amount of data showing that a
large portion of the human brain is devoted to sight alone, especially
in comparison to the other senses.
But, because youre a sight-based human, well make our point better
showing rather than telling. Read the word below:
BLACK
For most people, the brain comprehends only the color red, even
though the word represents a different color. The word itself is basic
enough that any first-grader can recognize, yet still the sight of the
color red dominates the communication of the color black.
In an eye-opening TED Talk, data journalist and infographic expert
David McCandless points out the sheer depth visuals have on our
brains, most of which is subconscious. He conveys his point with an
analogy to computer processing:
Your sense of sight is the fastest. It has the same bandwidth as
a computer network. Then you have touch, which is about the
speed of a USB key. And then you have hearing and smell, which
has the throughput of a hard disk. And then you have poor old
39
taste, which is like barely the throughput of a pocket calculator.

And that little square in the corner, a naught .7 percent, that's
the amount we're actually aware of. So a lot of your vision the
bulk of it is visual, and it's pouring in it's unconscious.
Think of the impact this will have on interaction design. Your users
will notice the eye-catching elements of course, but every choice of
color, font, icon symbol, layout location every pixel on the screen
is being processed on a level that youre user doesnt even realize.
Appearance even goes as far as to affect the users perception of how
well a product functions.
When it comes to entering our credit card information on the web,
trust always becomes a factor. A fascinating Stanford study on how
users access website credibility revealed that almost half of all users,
46.1%, determined if a site was trustworthy based on looks alone.
Such visual minutiae as layout, typography, font size, and even color
scheme were all pivotal factors.
Other studies provide similar evidence on the power of aesthetics on
a products perceived value. An experiment by Masaaki Kurosu and
Kaori Kashimura tested two ATMs in which the only difference was
the aesthetic placement of the screen and buttons. Users reported
that the more visually attractive one worked better, even though the
functionality was the same.
40
The role of aesthetics goes far beyond looking nice. Its consequences on a product are massive, both conscious and unconscious, both
real and perceived.
Not Just a Pretty Face: the Functional Role of Visuals

Being the dominant communication method puts a lot of responsibility on visuals, but you can use this to your advantage by having it
alleviate the dependency on other avenues. Visuals can serve many
different functions in an interface, but carry the most weight in the
following areas.
1. Navigation
If your sites navigational system is simple and its pages basic, you
can get away with a completely visual navigation bar. Your users
will inherently prefer this, as it requires less effort than reading
words of course its a miniscule difference in brainpower, but
the golden rule of IxD is making the user think as little as possible. A strictly visual navigational system will feel easier and more
intuitive to the user.
Facebook and LinkedIn take advantage of this when they can, with
their icon-based navigational bars for managing accounts:
Photo credit: LinkedIn
41
Of course, you cant use symbols to represent every type of page,

and both Facebook and LinkedIn fall back on words for more
complex navigational options.
2. Drawing Attention
Even when relying on words and other methods of communication,
visuals will still complement and influence the message. What this
means for interaction design is that visuals draw attention to the
items that your users should interact with.
In the above LinkedIn example, just look how the red squares
around the 1 stand out against the gray tones behind it. This
ensures that users notice these new messages or alerts.
Attention-drawing visuals are essential for notifications and navigational elements that are necessary for your user to see in order
to properly interact with the interface. However, drawing attention
also has a strategic use, for example, promoting calls-to-action.
Photo credit: Opera
42
In the Opera example above, the call-to-action button is displayed

predominantly in the center of the screen, and given a vibrant
green color to make it stand out against the white background. Its
likely one of the first things the user will see on the page.
3. Feedback
Feedback is a fundamental part of any interaction it is, after all,
the difference between one-sided and two-sided communication.
But while feedback might make you think of wordy error messages or pop-up windows, visual feedback can be much more subtle.
The appeal is that visual feedback gives the user the same security and sometimes enjoyment of confirming their interactions
are successfully registered, but without the somewhat involved
cognitive processes as reading a block of text or the distraction of
an unexpected pop-up window.
Photo credit: Huncwot
43
The homepage for Huncwot uses this well. The four navigational
choices are displayed simply enough, but when each one is hovered
over, a visual appears behind it and the text changes color. First,
this signals to the user that theyre input was registered, but on a
deeper level, this also adds fun and excitement to the navigation
process. Even though the user may already know where they want
to go, they will still probably hover over all four choices just to see
what the visuals are like.
4. Affecting Behavior
More and more studies are showing how an interfaces visuals can
affect the users behavior, especially in the realm of ecommerce
with closing a sale. As this Smashing Magazine article points out,
proper visuals can literally make you more money.
Amongst other things (read the article for the full list of tips), a
companys sales rate increases when the secure areas of the form
are set apart, in the above example with a different background
and icons denoting security like the lock. When it comes to the
checkout process, even the slightest IxD misstep will scare off a
sale. Details like this one add up to put the user at ease enough to
follow through.
44
Not Just Physical: The Emotional Connection of Visuals

Writing for UX Mag, Morgan Brown and Chuck Longanecker describe
what they call designing for the gut. This refers to the emotional
connection formed between a user and the product, built upon their
continued satisfaction, enough to keep them using the product. Its
this gut reaction that is at the core of a good UX, more-so even than
a logical acknowledgement that the product serves its function well.
This gut reaction is equal to, if not better than, the products actual
functionality.
What does this gut reaction have to do with visuals?
As Don Norman explains in Emotion & Design: Attractive Things Work
Better, millions of years of evolution have created in humans (and
most of the animal kingdom) split-second decision-making instincts
formed largely from immediate emotional responses. In the life-ordeath situations of our prehistory, we and our animal brethren didnt
have time to logically deduce the pros and cons or different tactics
we simply acted to save our lives.
Years later, the life-or-death situation have mostly vanished, but the
gut instincts remains. And these, you might have guess, are greatly
influenced by sight.
Take, for example, that feeling of fear and exhilaration that comes
from staring down from a great height. That sight alone induces an
adrenaline spike, a rush that sparked our fascination with extreme
45
sports. Another example is the joy that comes from the sight of delicious food, the reason behind the food television trend. We know the
food on TV is not available to be eaten, that its just an image but
this image is enough to evoke an emotional response in us.
In interaction design, we can categorize the influence of visuals into
three primary categories: first impressions, identity, and the improvement of usability through relaxation.
1. First Impressions
In the beginning, we mentioned how certain usability studies
determined that appearance both (A.) was the main factor most
users considered when deciding trustability, and (B.) that users
perceived more aesthetic products as more functional. These are
the results of how a products appearance forms its first impression.
Because our instincts have evolved such that we make quick decisions based on what we see, first impressions can make or break a
site or app. First impressions always tend to rely on sight; sight is
most often the first way we experience a product, and interacting
with it on a substantial enough level to form an educated opinion
takes time and effort we dont always have. An initial impression
based on sight, however, is both quick and easy.
Studies show that users will judge the value of the site most critically within the first 10 seconds. This, alone, proves the importance of a first impression. In order to hold your users attention
46
and prove your worth, you must visually establish an emotional

connection that appeals to their gut responses.
2. Identity
The history of marketing shows us one of the most effective ways
to establish an emotional connection is appeal to the identity of
the user. This means people who view themselves as traditional will want to use products that look traditional, people who
view themselves as cutting edge will want to use cutting edge
products, and so on. This also means, all other things being equal,
a cutting edge person will not want to use a product that looks
traditional, not matter what its usability is like.
Visuals give off a personality just as a person exhibits their own
personality. Your interfaces visual representation will attract, and
be attractive to, those with the same personality type.
Photo credit: Dior
47
Take the website for the fashion brand Dior. The most prominent
visual is the large-spread fashion photograph, with all the luxury
and sex appeal youd expect from a fashion brand. This appeals
to users who consider themselves fashionable... such a strategy
on, say, a site promoting a monster truck rally would not go over
so well.
3. Relaxation Improves Usability

As Norman continues to explain in his article, products that we
find visually appealing put us as ease, biologically. This relaxation
impacts how our brains and bodies function themselves, which
could possibly explain why, in the Japanese ATM study, users had
less difficulties with the attractive ATMs. The theory holds that,
because the users were more taken by the attractive ATMs, they
were more relaxed and thus were able to use the interface with
less stress.
If this theory holds true, then establishing an emotional connection
through visuals not only increases the perceived usability, but the
actual usability. Designers, then, should dedicate equal time and
energy to optimizing their interfaces appearance as they do its
functionality the two are one-in-the-same.
48
Conclusion: Its Whats Outside that Counts

Weve grown up thinking that passing judgements based on looks was
superficial. Snippets of wisdom like, its whats inside that counts, and
dont judge a book by its cover, while well-intentioned, may have
lead us astray. Modern science is painting quite a different picture
visuals are what counts. They are what formulates our opinions and
our emotions, whether we like it or not. In that case, we must throw
out conventional wisdom and replace it with another, overlooked
piece of traditional wisdom: what you see is what you get.
The Secret Ingredient:

Microinteractions
by Carrie Cousins
Its likely that you started your day with a micro-interaction. By turning off the alarm on your mobile phone, you engaged with a user
interface in a single moment.
You will continue to engage throughout the day in these moments
with your digital devices. Each one is a micro-interaction. Each one
is probably so small you dont think about it. And each one works
because of that simple fact.
As a designer, recognizing the invisibility of micro-interactions is
just as important as designing them. You have to create something
that feels human and accomplishes a task, making the life of a user
easier. You also have to focus on a design that can work in a variety
of environments and does not need any instruction or explanation.
Like we described in Web Design Trends 2015 & 2016, all great designers must learn how to design the perfect moment. In this post,
well take a look at how to do just that.
The Secret Ingredient: Microinteractions
50
What is a Micro-Interaction Anyway?

A micro-interaction is any single task-based engagement with a device.
Micro-interactions happen all around you, from the toggle of an onoff switch to skipping from one song to the next on a music player to
liking a social media post to replying to a text message. Most of these
engagements are things users rarely think about when it comes to
how they work or look (as long as they are working properly).
Photo credit: Slack
Micro-interactions tend to do, or help you do, several different things:

Communicate a status or bit of feedback
See the result of an action
Help the user manipulate something
So in practice, micro-interactions include moments or actions for elements. Stop and think about all the times you come in contact with
a micro-interaction every day.
Microinteractions impact things like:
51
Turning things off or on

Commenting in any digital medium
Changing a setting or process
Viewing a notification or message
Sliding down the screen on a mobile device to refresh content
Interacting with a data element, such as checking the weather
Accomplishing any single task
Connecting devices, such as those for multi-player games, or printing from your laptop
Sharing or liking a photo or video on a website
Each of these interaction types lead users to a path of more human-centered design. This concept of making devices more human-like in
their moments is a key to adoption and usability.
Four Parts of Micro-Interactions

One of the most famous work on micro-interactions is from Dan Saffer,
who wrote the book quite literally on this topic. Saffer, director of
interaction design at Smart Design, focuses on a four-part structure
for micro-interactions in his excellent article.
Photo credit: UXPin
Trigger: Initiates an action

Rules: What happens in the interaction
52
Feedback: How you know whats happening

Loops and Modes: What happens next
Every interaction includes these parts to create a cycle for how things
work. According to Saffer, most people dont even know or think
about micro-interaction contact unless something goes wrong.
Details With a Purpose

When it comes to the design of micro-interactions, it can be tricky or
even considered boring by some. The design elements are so small
and can happen so quickly that designers might easily forget the
details. Dont make that mistake.
The importance of micro-interactions cant be over-emphasized.

These are the details that make users love or hate an app or website.
53
This simple, wonderful usability is why you choose one alarm clock
or weather app over another. And someone had to design that.
When you get down to the visual design of these elements, keep a
few things in mind:
Micro-interactions must live on through repeated use. Whats
fun and quirky on first use might become annoying after 100 uses.
Be cautious of gimmicks or odd design cues.
Simplicity rules. Simple type, simple language, simple colors,
and simple design. Dont make the design any more complicated
than the action.
Give each micro-interaction a human voice. Text should read
like people talk, not like a machine.
Add a fun divot with animation, but dont go crazy. Consider the
bouncing icon in the dock of your MacBook as a program loads. It
lets you know the program is responding with a simple animation
but does not get in the way of what you are doing.
Create a visual harmony with other elements. If your app has
a blue color scheme, micro-interactions should use the same hues
so that the visual connection to the parent design or app is there
for users.
Dont overthink it. Overdesigning a micro-interaction can be
lethal. Lets go back to the simplicity of the text message notification. Just a simple, singular display on the screen with enough
54
information to be effective who the message is from, what the

message contains and a way to respond.
Consider each detail with care. Because micro-interactions are
so small, every element of the design matters. Ensure that every
detail, down to the last pixel, is perfected before launch.
Think about further adaptations or how subsequent micro-interactions will work. Does the exact same thing happen every
time for every user? Or are there changes to the micro-interaction
over time? (Consider the alarm that gets louder each time after
the snooze button is hit.) These smart details will set the best micro-interactions apart from everything else.
As we describe in the free e-book Web Design Trends 2015 & 2016,
these interactions can also push a user to make finalize decisions or
abandon it all together. If theyre done poorly, users will flee out of
your app and may never come back again.
Micro-Interactions in Practice
While micro-interactions are everywhere, Google is really beginning
to lead the charge with ideas of how to design them effectively. In
its material design documentation, micro-interactions are explained
like this:
Responsive interaction encourages deeper exploration of an app
by creating timely, logical, and delightful screen reactions to user
55
input. Each interaction is thoughtful, perhaps whimsical, but

never distracting. What will happen if I touch this screen? And
then this icon?
What it all boils down to is user appeal. The guidelines specifically
in the authentic motion section help you visualize and create animations that feel lifelike. While all micro-interactions are animations,
it is becoming increasingly so. Try to pinpoint a device micro-interaction that does not contain an animated element. (It will be a
challenge for sure.)
Photo credit: Apple - Nike Running App
The Apple Watch is another device where pretty much every interaction is an example of a micro-interaction because the device is
designed for singular notifications. Although, as LukeW points out,
the interactions dont always work out the best for that and could
be better.
56
However, each app features a design that gives the user one bit of
information on the screen and provides one opportunity to engage.
This is not true of only the Apple device, but all super-small screen
devices, including watches, music players and even fitness trackers.
Conclusion
Micro-interactions are an important part of almost every digital design project. Youll be hard-pressed to design a website or mobile app
that does not include some element, or moment, that a user needs
to interact with.
The key to making these moments almost invisible and completely
functional to the user is in the details. Design with care. Think about
how people work with and use their devices and mirror common
patterns of thought as you design these small bits. Dont overthink
the aesthetics, and focus on direct action with the principles of micro-interactions in mind as you go.
The 5 Psychology Secrets for

Enduring Interaction Design
by Jerry Cao
Its becoming more important every day for your designs to connect
more with users and include a human element. Website and user
experience design needs to feel real, from aesthetics to interactions
to motion perceived and real to emotional connection.
The problem designers most often encounter when thinking about
users is not thinking about them as actual people. It sounds a little
crazy, right? But we are not talking about designing robots here.
Humanistic design creates an engaging experience that users can
connect with physically and emotionally.
Here are a few ways to do it.
1. Your Mantra: Humans Come First

The first step is saying it out loud: Humans come first.
Now repeat it until you hear this phrase echo in your head before
and during the design and planning phases of every project. And
the way to do that is to actually be more human. Be intentional
The 5 Psychology Secrets for Enduring Interaction Design
58
in actions, interactions and design. Most of all, empathize with

your users.
Photo credit: Reebok
One way to ensure that youre designing for humans is to create a

user persona. You can use fictional identities composed from researching your users. This will help eliminate you guessing about
your users and will allow to design with their needs in mind.
For example, the persona process we follow at UXPin looks like this:
Review usage data in our app, segmenting users based on overall engagement. For example, these segments might include
people who started a trial but didn't buy, people who started a
trial and bought, etc. Once we've defined the segments, we look
at behavior based on events created in KISSMetrics.
59
For qualitative data, we interview ~30 users total from all segments to try to understand the "why" behind the data.
Based on quantitative data and interviews, we can start plotting
out patterns that eventually form our user personas.
Photo credit: UXPin
You need to create things people want. Step back and evaluate every
website or app you frequent. Do you feel like you are part of the design? Is it personal? It is intuitive and easy? Thats human.
60
Design for Comfort and Predictability

There are a few elements in the design process that you just cant
change, like device type and screen size. But you can affect how
things render and how comfortable your designs are to use in different environments.
For a design to feel right, it must be comfortable to use.
Photo credit: Rosenfeld Media, Creative Commons 2.0
Thumb patterns on mobile devices need to be reachable and

accessible. Think about different phone, and hand, sizes when
considering element such as buttons or swipe actions.
Think about typeface size. Users should not squint to read the copy.
Provide contrast that will stand up in varying conditions. While
desktop users are most likely to view a website indoors, users
might look at a screen in other lighting conditions with their various devices.
61
Photo credit: Bugaboo Strollers
Motions and movement should mirror real-life. (Look at the

360-degree rotation of the stroller above.) Think about the physics
of a ball rolling. Now imagine that ball on a mobile phone screen:
which way should it roll? (To the lowest point of gravity as the
phone is moved because balls always roll downhill.) Perfecting
these microinteractions go a long way towards creating a delightful experience.
The more comfortable users feel, the more likely theyll continue to
interact with your product.
62
Connect Emotionally
Focus on the one emotion your project should convey. Dont get
wrapped up in trying to create multiple emotional experiences. Do
one exceptionally well.
The emotional connection is two-pronged:
1. Your design should create a relationship between users and your
product.
2. Your design should create relationships between users.
There are a variety of ways to create an emotional connection with

your users. Color is a good way to stir emotions in people. Contrast,
complementary colors and vibrancy all tug at the heartstrings in
different ways. Colors evoke different moods in people as well. For
example:
63
Red: Conjures up passion, and gets the blood pumping with excitement.
Orange: Gives a whimsy lightheartedness to a design.
Green: Promote prosperity, both physically and financially.
Purple: Conveys the lap of luxury.
Photo credit: Felt App
But color is but one aspect that goes into nurturing an emotional bond.
Copywriting and visuals also play a role. Felt Apps marketing site has
light copy with a conversational tone. The photos are all moments
that one might experience in life mementos of the past. The colors
are earth tone, mostly browns with a splash of red from the one envelope. All of these elements alone dont add up to an emotion, but
together these all craft the feeling of nostalgia.
64
Emotional connections are established in a variety of ways. Brand

loyalty, for example, stems from emotional connection. The type of
emotion is determined by the tone, message and design choices you
make. For example, a photo of people crying can cause concern for
users why are the people in the photo upset and how can they be
helped?
Design with Mental Triggers

Understanding a little human psychology goes a long way when it
comes to design.
But you dont have to enroll in college again to use those tools. Spencer Lanoue broke down Psychological Triggers That Make UX Design
Persuasive from an academic research standpoint for you.
Photo credit: Laerepenger
65
Heres what the concepts look like (and how they relate to design):
1. Do something for other people. And they will return the favor.
Look at the example above, take the quiz and you can save money.
2. People look at the behavior of others. Especially when they
are not sure how to act. Include a social stream in your design
to make users feel like part of a bigger group.
3. Users want what they cant have. The scarcity principle is why
limited-time deals work so effectively.
4. Users tend to fall in the middle when it comes to making
choices. Most people will be drawn to the center. As recommended by Hicks Law, more choices leads to decision paralysis,
so choose carefully.
5. People are drawn to what is relevant to them right now. Consider beacons, notifications or check in tools to be in the moment.
6. People remember elements that stand out. Use contrast to
create focus.
7. People require timely feedback. Know the Power of 10 when
it comes to interaction design. As Jakob Nielsen stated, users need
feedback within 0.1 seconds to feel like they still control the experience. If it takes longer than 1 second for your interface to respond, the feeling of control quickly disintegrates. Whether the
66
feedback is purely visual or text-based (like a modal window),

make sure its clearly understood and uses a conversational tone.
Photo credit: Bose
Bose is a good example. The site takes a few seconds to load, but the
smooth loading animations makes the wait feel less tedious. As you
hover over each product, the smoothly triggered animations makes
the user feel like theyre playfully browsing through a rolodex. The
interface also features contrasting bars of colors to capture the users
attention, drawing them immediately to the products.
While it may feel manipulative, the use of psychological trigger allows
you to further your ability to reach out to the human on the other
end of the screen.
67
Design With Simplicity

A wise man once said, the design is in the details. Simplicity always
strengthens the details.
Websites such as Facebook, Twitter and Instagram thrive on this human
factor. People are sharing their lives with other people. The design
and interface is simply the vehicle that gets them there. Now think
about the designs of each of these websites. All of these platforms
started with simple tools for sharing and while they have grown in
complexity over the years, the core usability is still easy to learn.
Photo credit: The University of Sydney
Start with simple visual elements:

Color: Stick to one or two colors that are high in contrast. Keep
cultural considerations in mind, especially if your website is designed for an international audience.
68
Typography: The first rule of typography is that it must be legible

(letters are easy to discern) and readable (words and sentences are
easy to understand). All main body copy should be set at a level
that is comfortable for the eye. Start with a sans serif style and
include plenty of space between lines. For the best visual comfort,
consider size and the number of characters per line.
Space: More space makes a design feel open and inviting. Cramped
lettering or elements that are too close together feel chaotic and
jarring. Its a tricky balance though, because wide open spaces can
sometimes create the feeling that something is missing. A good
approach is to subtract elements from your design until it breaks,
then working your way back over the threshold.
Micro-interactions: Design interactions and notifications work
in an almost invisible way. Like a simple hover animation, they
add visual polish while giving users instant feedback. Follow the
12 principles of animation.
Prototyping your design is a good way to see if these visual elements
work or not. While doing so, look for where you can trim because as
the old adage goes, less is more.
69
Conclusion
Designs with a human touch just feel right. It might be intangible,
but its undeniably powerful.
Think of interactions between people. Most communication happens
using common languages, such as speech or even posture or gestures.
Its usable communication.
Its the very same thing when it comes to designing a website or app.
The most stripped-down purpose is to communicate something with
users. Creating a simple, easy-to-understand method for this communication is always the quickest route to success.
Delight In Interaction Design:

4 Examples Deconstructed
by Jerry Cao
Some websites provide us a service, other websites make us smile
but the best ones do both. Weve examined the role played by copy,
space, and microinteractions. Now lets see it all comes together with
a special splash of emotion.
In the context of interaction design, delightful designs are those that
give us that special feeling that keeps us coming back.
Photo credit: Duolingo
Delight In Interaction Design: 4 Examples Deconstructed
71
But a product that only offers delight no substance, just gimmicks

and colorful mascots dont last long in our minds when the initial
glamour fades.
The examples well explain are the ones that go above and beyond.
They serve their purpose first and foremost, and then offer that little
something extra. And while no one can really put into words what
that little something extra actually is, you can get a good idea by
looking at the examples below.
Only the Best Icing

Before analyzing the examples, lets talk a little about how delightful
interactions fit into design as a whole.
Photo credit: UXPin via Aarron Walter
Writing for Treehouse Blog, Aaron Walter explains delightful design

through Abraham Maslows Hierarchy of Needs, a classic theory of
psychology published in 1943. The theory essentially ranks the priority
72
of human needs, starting with fundamentals like food and oxygen,

and topping it off later with inessentials like self-actualization.
Converting the idea to web design, Walters proposes a new hierarchy
of needs:
Photo credit: UXPin via Aarron Walter
Delight is not essential for a useful interface. A website can still be

successful as long as its functional, reliable, and usable even if
it has a dry and ugly interface (just look at Craigslist). But, a sites
thats delightful without being functional will, sooner or later, lose
its appeal. The most important factors are the more practical ones.
But thats not to say delight isnt important. As Don Norman explains,
humans evolved to make decisions based on emotions more-so than
logic. In fact, he continues to show that delight can even improve
usability by creating an atmosphere of enjoyment, a product relaxes the user, which in-turn allows their mechanical processes to run
smoothly, increasing learnability and ease-of-use.
73
Delightful design is the icing on the cake, but only the very best icing
sometimes even the best part of the cake. A dry and bland cake is
unappetizing, and if there are better options available (more colorful
and sugary options), hungry users will choose them. But, on the other hand, no matter how delicious and tasty your icing is, not many
people can stomach eating icing alone.
Lets explain what we mean. These following sites are the whole
package: a solid premise, a functional interface, comprehensive usability... and that little something extra.
1. Bitly
Bitly is a good place to start, as its a well-known brand these days.
The reason its popular is because, in the earlier era of the Internet,
it provided a service that was greatly appreciated. Bitly shortens
URLs to only a few characters, making them bite-sized so that,
when sharing links, you dont overwhelm people with long streams
of incoherent letters and numbers. Its a perfect example of how,
with a little ingenuity, you can create your own niche-market
where no one else has looked before.
Thats the core appeal of Bitly, and wed guess that, with a less
interesting interface, theyd still have some success on the fulfilling that service. But what makes them stand out is the delightful
interaction design.
The site executes its simple functionality flawlessly. Users only
need to copy and paste the link in the top left corner, and a side
74
menu immediately slides out to show the new shortened link

along with simple icons that allow for archiving, editing, tagging,
or sharing the link.
Photo credit: Bitly
You can go from the most complex link to an automatically-tracked

short URL in 1 click, which creates a momentary sense of magic.
When framed inside of its fun colors and blowfish cartoon characters, the overall experience is certainly memorable. Add in the
intuitive link-tracking and metrics display, and the experience becomes slightly addicting you want to see which links are clicked
more than others, and investigate why.
As UX designer Ben Rowe explains, theres two layers to delightful design: the surface layer and the deeper layer of flow. In this
case, the mascots and fun visual design comprise the surface layer,
while the passively magical interaction design forms the much
more important layer of experiential flow.
75
2. Medium
Delightful design is not simply fun colors and cartoons. As Rowe
was saying, the experience builds a stronger connections, so delightful design relies on empowerment through usability which
requires far more than just a cutesy mascot.
One of the most popular blogging platforms, Medium uses a trademark minimalist style, a heavy dose of white, and no cartoons or
wild colors whatsoever. The reason its on our list of delightful
sites is the simple yet powerful experience.
Their minimalism extends beyond looks: by refocusing on the actual
experience of writing, the site is naturally easy to use and understand for first-timers. You arent distracted by widgets, plugins, or
any themes to select. Thats not to say the style is bland or lacking
the elegant typography, intuitive controls, and infinitely-scrolling
news feed all create a visually distinct first impression.
Photo credit: Medium
76
But beyond the surface layer of visual delight, the simplicity is

only a vehicle for the user to concentrate on writing. Medium is
the perfect example of invisible design because it provides just
enough interface to accomplish the core user goal, then gets out
of the way and lets the magic happen on its own.
Photo credit: Power of Minimalism
Through an applaudable use of hover and hidden controls, Medium

offers all the essential options to its users (upload images/video,
embedding content, etc.) without bogging them down. Unlike a
traditional Wordpress experience which feels more like being in
77
content management mode, Medium combines the writing and

uploading process into one creative flow.
To take it a step further, the editing interface looks nearly identical
to the live interface, which makes users feel like theyre adding
their genius to a blank slate instead of switching between states.
The paper-like layout entices you with the anticipation of creation,
empowering even the most amateur blogger to be like Hemingway
in front of a typewriter.
Medium offers extra finishing touches reflecting their ingenuity.
Each post shows an average reading time so you know what youre
getting into. On a purely functional level, the interface even allows
for users to copy/paste images straight from Google Docs without
drag-and-dropping or re-uploading (a nice surprise for bloggers
who have grown use to the tedious task).
Photo credit: Medium
None of these subtleties are required for a decent blogging platform, but they elevate the design to a delightful level precisely
because they are unexpectedly helpful. These features dont just
make users smile, they make them better at what they do. If you
want to create meaningful delight, always strive to incorporate
these magical discoverables into your interaction design.
78
3. Carbonmade
What happens when you mix a solid experience with fun colors
and cartoons? You get something like Carbonmade, a site that allows professionals to create online portfolios painlessly.
Photo credit: Carbonmade
The deeper level of their delightful experience the important

base of the pyramid is the ease with which users can create their
online portfolios. As the creators explain, the inspiration for the
site came from their personal irritation at how expensive or annoying it was posting their own illustrations online.
On first impression, the site certainly fulfills the surface layer of
delight with stylized elements appropriate for its designer user
base: lighthearted copy, vibrant colors, and generous use of fun
79
animal icons. The visual treatment certainly captures your attention. In fact, the onboarding message even boldly claims that
Carbonmade will drop users right into the experience without any
boring tutorials or explanations.
As you dive a bit deeper, youll see theyve certainly fulfilled their
promise with a smooth experience that feels like the Medium of
portfolio sites. Create your project, drag and drop the works youd
like to show off, type in the text in the left-hand sidebar, and the
changes automatically reflect in a true WYSIWYG interface.
80
Want to update your profile? Just type it in the sidebar, and youll
see the new text exactly as it would look live. Instant gratification.
81
While more advanced users will need to upgrade to a paid plan

for more personalization, even the free plan has helped the user
build a ready-for-primetime portfolio in less than 30 minutes from
start to finish.
Like Rowe suggests, that frictionless functionality is what gives
the delightful interface its meaning. Users arent using a tool
to build their portfolio, theyre actually building their portfolio.
Carbonmade isnt just simple its unexpectedly simple from the
welcome message to publication.
The learning curve is virtually nonexistent and users immediately
enter a deep flow of accomplishment right from the first click. The
slick visuals simply ease the user along that path of empowerment.
4. MailChimp
Last but not least is MailChimp, an ideal balance of usefulness
and delight. Like Bitly, MailChimp fulfills a fairly technical niche,
one so practical they could theoretically survive with a barebones
interface. What takes them actually thrive is their smooth functionality wrapped in cheeky humor and visually friendly design.
MailChimp specializes in sending mass-emails, a subject that inherently sounds impersonal and cold, which should explain why
they market themselves as putting a more personable face on it. By
being a warmer,friendlier, funner tool that packs just as much
under the hood as its competitors, MailChimp transforms a dry
task into an inviting experience.
82
Photo credit: MailChimp
Their delightful design is good business since its a core differentiator in the market.
Photo credit: MailChimp
The no-clutter interface, straightforward choices, and conversational multiple-choice forms boils down a complex discipline
into a simple and emotionally validating experience. MailChimp
83
even generates a fun high-five screen after you send a campaign,

an experience thats so memorable that some users even tweet
themselves high-fiving the monkey right back.
But aside from the cute monkey mascot Freddie, the entire site
also feels friendly and lively. The sans-serif fonts give a casual air,
and the tone of the text is simple and light (certainly no accident).
Photo credit: MailChimp Launch
Combining fun cartoons with tongue-and-cheek messages like This

is your moment of glory, MailChimp even softens the nervousness
of sending your first email campaign. The actions and reactions
of the interface feel less like an email marketing app and more
like an empathetic instructor that understands you.
The humor and mascot are all part of the surface layer of delight.
But when we dive deeper, we see that the conversational feedback
84
and effortless task flow helps MailChimp connect with users on

a more intangible level. The product instructs, entertains, and
facilitates. As a result, even the most novice email marketer feels
like a pro and thats a truly unforgettable experience.
Conclusion
Delightful design can be added to any website, in varying degrees
of lightheartedness or elegance. Weave in your elements of delight
so that it doesnt distract from usability, and youll create a state of
pleasurable functionality.
The ultimate goal of delightful design empowering users while creating an invisible emotional connection. Its not an easy task, but it
will absolutely makes your product stand out.
Never forget that people dont buy better products, they buy better
versions of themselves.
Interaction Design Tutorial:

The Navigation Drawer
by Ben Gremillion
Now that weve explained some of the fundamentals for subtle interaction design, lets apply some of the principles in this hands-on
lesson.
Youll learn how to build a sliding drawer as a smooth microinteraction for introducing navigation to users. Well show how to lay it out,
how to apply the right interactions, and set the correct timing so the
experience feels snappy.
Interaction Design Tutorial: The Navigation Drawer
86
The navigation drawer is one of the most popular, modern, web and
mobile patterns. When the space is limited and your primary navigation pattern isnt crucial for the business goal, nothing works better
than the good ol drawer.
The drawer panel allows you to hide the navigation beyond the left
or right edge of the screen and reveal it only after users actions. This
pattern can be particularly useful if you want your user to focus on
the main content.
Prototyping the drawer used to require certain code skills, but with
the latest addition of advanced animation editor, UXPin made it as
easy as 1-2-3. It takes no more than 10 minutes to create a full-blown
navigation drawer. Let me walk you through the process step by step.
1. First, we have to specify the width of the canvas. Well do it with
the responsive breakpoint. If youre designing for the iPhone 5s
then choose 320px.
87
2. With the canvas ready, its time to start designing. Add the top
bar and background using Box elements. The box is available
in General Web UI library. Using variety of UXPins libraries
you can quickly build whatever you want.
3. For a quick navigation, use search (shortcut: cmd+f on Macs,

ctrl+f on PCs).
88
4. Dont forget to add the infamous hamburger icon or any other

symbol representing menu (use search to browse all the icons
libraries in UXPin).
5. When your main screen is ready, build the drawer menu. Place
it outside of the canvas. To start with, it should touch the right
edge of your main screen.
6. Select every element constituting the menu and group them together (cmd+g on Macs, ctrl+g on PCs; or button in the top menu).
For easy future reference, change the groups name Drawer.
89
Depending on your design of the main screen you might also

want to group to help with the fluidity of the animation.
7. Time for interactions. Left-click on the hamburger icon and

from the properties manager menu choose interactions with
the click (tap) trigger and add advanced animation instead
of action. Thats your first step to great navigation drawer.
90
8. In the advanced animations editor, select all of the elements

and drag them to the left. The far right edge of the menu should
touch the edge of the 320px-width canvas.
9. Were almost there. Time to make things smoother. In the top

menu choose the kind of animation you would like to use. Im
going to use Elastic with Ease In.
91
10. You got it. Just click save and simulate your design using UXPin
Preview or send it directly to your mobile phone.
Its ready!
Do you want to make it even better? Take a look at some advanced

options for the navigation drawer.
92
How to add a come back

1. We have to start with something slightly counter-intuitive. Bear
with me. Since each element can only have one advanced animation with the same trigger assigned, we need to drop a hot
spot (element available in General Web UI library) anywhere
outside of the canvas.
2. Now click on your hamburger icon and enter into edit mode of
your advanced animation.
93
3. While in Advanced Animations Editor move your hotspot directly above the hamburger icon and add Advanced Animation to it.
4. You just entered advanced animation within advanced animation. Sounds scary, right? Have no fear. UXPin will automatically
add a come back as the second step in the animation, so just
click save.
5. Might be hard to believe, but youre done! Check your design in
UXPin preview. Smooth, huh?
94
How to show the navigation drawer on swipe to the left

and hide it on swipe to the right
Ah, swipes! They used to be impossible for prototyping tools. Not for
UXPin though! Let me walk you through the process.
1. Click on the main content group and add interaction: trigger on
swipe left with action: advanced animation.
2. In advanced animation editor, move all of the content to the left.

The right edge of the navigation drawer should touch the right
edge of the canvas. Click on the main content group and add interaction: trigger on swipe right, action advanced animation.
95
UXPin will automatically generate a come back to the previous

state. Click save.
3. Done! Test it on the UXPin preview, or send it to your mobile

phone.
96
How to make left-side navigation drawer

Time for the real troublemaker. Lets create left-side navigation
drawer.
1. Click on the drawer navigation and in its properties set horizontal position (x) to 200. It will disappear from the screen, but
dont worry! Trust me, everything will be fine.
2. Add an advanced animation to the hamburger icon.

3. In the advanced animation editor, open layers.
4. Select Drawer from the list of layers and change its horizontal
position (you can use the top bar) to 0px.
97
5. Now, just move the main content group to the left and click save.
6. To add a come back on the left-swipe, edit the advanced animation attached to the main screen and add swipe-left animation
while inside of the animations editor.
7. Done! Test it on UXPin preview, or send it to your mobile phone.
Hope you enjoyed this tutorial. Now play with UXPin on your own!
The possibilities are endless.
Everything you ever wanted

in a UX Design Platform
Complete prototyping framework for web and mobile

Collaboration and feedback for any team size
Lo-fi to hi-fi design in a single tool
Integration with Photoshop and Sketch
Start using it now!
www.uxpin.com

Uxpin Interaction Design Unlocked Volume I - Designing The Details

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uxpin Interaction Design Unlocked Volume I - Designing The Details

Uploaded by

Copyright:

Available Formats

Interaction Design Unlocked

Volume I: Designing the Details

Copyright 2015 by UXPin Inc.

All rights reserved. No part of this publication text may be uploaded

Poetry in Interaction Design: The Importance of Copy

Why Copy is Essential in Interaction Design

The Variability of Context

The Different Forms of Copy

White Space in Interaction Design:

Macro and Micro 

Passive and Active Space

Attraction in Interaction Design:

More than Meets the Eye

Not Just a Pretty Face: the Functional Role of Visuals

Not Just Physical: The Emotional Connection of Visuals

Conclusion: Its Whats Outside that Counts

The Secret Ingredient:Microinteractions

What is a Micro-Interaction Anyway?

Four Parts of Micro-Interactions

Details With a Purpose

The 5 Psychology Secrets for

Design for Comfort and Predictability 

Design with Mental Triggers

Design With Simplicity

Delight In Interaction Design:

Only the Best Icing

Interaction Design Tutorial:The Navigation Drawer

How to add a come back

How to show the navigation drawer on swipe

How to make left-side navigation drawer

Jerry Cao is a content strategist at UXPin where he gets to put

Carrie Cousins has more than 10 years experience in the media

Ben Gremillion is a Content Designer at UXPin. Previously, he

Poetry in Interaction Design:

Photo credit: Poetry Books. Chilli Head. Creative Commons.

Our ability to rapidly communicate with words is the reason why

Poetry in Interaction Design: The Importance of Copy

a bit like our claim-to-fame as a species, but it is a multi-faceted and

Why Copy is Essential in Interaction Design

Photo credit: MailChimp Voice & Tone

Poetry in Interaction Design: The Importance of Copy

Photo credit: Dunckelfeld

Words are also themselves interactions as users scan a website. They

Poetry in Interaction Design: The Importance of Copy

The Variability of Context

Poetry in Interaction Design: The Importance of Copy

Photo credit: UXPin

Poetry in Interaction Design: The Importance of Copy

The Different Forms of Copy

Poetry in Interaction Design: The Importance of Copy

We can categorize when copy is most essential by the forms it takes.

Photo credit: Webdesign Agency Weblounge

Within moments of landing on Weblounges home page, you know

Poetry in Interaction Design: The Importance of Copy

language (words like expertise and awesome are all signals).

Photo credit: Facebook

Poetry in Interaction Design: The Importance of Copy

That works in some situations, but would be problematic with

Photo credit: Urban Influence

Poetry in Interaction Design: The Importance of Copy

Photo credit: Pepe Jeans: Extreme Catwalk

Poetry in Interaction Design: The Importance of Copy

Photo credit: Starbucks

Poetry in Interaction Design: The Importance of Copy

Why Copy is Essential in Interaction Design

The Variability of Context

The Different Forms of Copy

Macro and Micro

Passive and Active Space

More than Meets the Eye

Not Just a Pretty Face: the Functional Role of Visuals

Not Just Physical: The Emotional Connection of Visuals

Conclusion: Its Whats Outside that Counts

The Secret Ingredient:Microinteractions

What is a Micro-Interaction Anyway?

Four Parts of Micro-Interactions

Details With a Purpose

Design for Comfort and Predictability

Design with Mental Triggers

Design With Simplicity

Only the Best Icing

Interaction Design Tutorial:The Navigation Drawer

How to add a come back

How to make left-side navigation drawer