Uxpin Interaction Design Unlocked Volume I - Designing the Details
Transcript of Uxpin Interaction Design Unlocked Volume I - Designing the Details
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
1/98
Interaction Design Unlocked
Volume I: Designing the Details
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
2/98
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 [email protected].
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
3/98
Index
Poetry in Interaction Design:The Importance of Copy 7
Why Copy is Essential in Interaction Design 8
The Variability of Context 10
The Dierent 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 37More 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
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
4/98
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
5/98
Interaction Design Tutorial:The Navigation Drawer 85
How to add a come back 92
How to show the navigation drawer on swipe
to the le and hide it on swipe to the right 94
How to make le-side navigation drawer 96
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
6/98
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 Braon and worked in
traditional advertising at DDB San Francisco. In his spare time he
enjoys playing electric guitar, watching foreign horror lms, 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 on-
line publications. Carrie is also a sports fanatic and spends way
too much time planning football and basketball trips and ob-
sessing 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 Certication, 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.
https://twitter.com/jerrycao_uxpinhttps://twitter.com/carriecousinshttp://www.getgrawlix.com/http://www.getgrawlix.com/https://twitter.com/carriecousinshttps://twitter.com/jerrycao_uxpin -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
7/98
Poetry in Interaction Design:The Importance of Copy
Lets start by examining a human interaction thats not always pri-
oritized 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
by Jerry Cao
https://www.flickr.com/photos/chillihead/13444741/https://creativecommons.org/licenses/by/2.0/https://creativecommons.org/licenses/by/2.0/https://www.flickr.com/photos/chillihead/13444741/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
8/98
8Poetry in Interaction Design: The Importance of Copy
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 secondsto
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 inter-
action 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
http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/http://www.smashingmagazine.com/2014/07/21/how-do-you-design-interaction/http://www.smashingmagazine.com/2014/07/21/how-do-you-design-interaction/https://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttps://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttp://voiceandtone.com/success-message/http://voiceandtone.com/success-message/https://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttps://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttp://www.smashingmagazine.com/2014/07/21/how-do-you-design-interaction/http://www.smashingmagazine.com/2014/07/21/how-do-you-design-interaction/http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
9/98
Poetry in Interaction Design: The Importance of Copy 9
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 toneof the design just as much asthe 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 Dunckel-
feld, you can see how the words The Fast And the Curious comple-
ments the mesmerizing background showing snippets of life from
geometric patterns to camels in a desert. The sharp copy enhances
http://alistapart.com/article/personality-in-designhttp://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/http://www.dunckelfeld.de/en/http://www.dunckelfeld.de/en/http://www.dunckelfeld.de/en/http://www.dunckelfeld.de/en/http://www.dunckelfeld.de/en/http://www.dunckelfeld.de/en/http://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/http://alistapart.com/article/personality-in-design -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
10/98
Poetry in Interaction Design: The Importance of Copy 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 abbrevi-
ations... 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 circum-
stance... 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 appro-priately for the best results.
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
11/98
Poetry in Interaction Design: The Importance of Copy 11
2. The Audience Who is reading the text? Targeting your specif-
ic audience is one of the fundamentals of communication since
the dawn of time, whether designing an ecommerce website orediting 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 check-
ing around the Internet with some popular examples.
Writing for a specific audience, on the other hand is one of the hard-
est skills to learn.
Photo credit: UXPin
http://www.uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://www.uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201 -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
12/98
Poetry in Interaction Design: The Importance of Copy 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, educationlevel 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 inWeb 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 Dierent 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 exclu-
sively on visuals.
https://bluebottlecoffee.com/our-storyhttps://bluebottlecoffee.com/our-storyhttp://studio.uxpin.com/ebooks/web-ui-design-best-practices/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201https://bluebottlecoffee.com/our-storyhttps://bluebottlecoffee.com/our-story -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
13/98
Poetry in Interaction Design: The Importance of Copy 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 writ-
ten content is a topic that could fill a library on its own.)
1. GreetingAll 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
https://www.weblounge.be/en/https://www.weblounge.be/en/https://www.weblounge.be/en/https://www.weblounge.be/en/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
14/98
Poetry in Interaction Design: The Importance of Copy 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 enhanc-
es 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 conversa-
tion with the user. In this case, the headline explains the agencys
expertise, so it makes sense that its presented in a more tradi-
tional 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 repre-
senting each option with an icon metaphor, as with the Facebook
example below.
Photo credit: Facebook
http://www.awwwards.com/websites/single-page/http://facebook.com/http://facebook.com/http://www.awwwards.com/websites/single-page/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
15/98
Poetry in Interaction Design: The Importance of Copy 15
That works in some situations, but would be problematic with
abstract pages like Portfolio or Products. At their core, words
aresymbols, 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 wheth-
er 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 Infuence
The site for Urban Influence favors simplicity with one-word nav-
igation hints, then breaking that rhythm with their call-to-action.
Remember to choose your words carefully for top navigation and
http://urbaninfluence.com/http://urbaninfluence.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
16/98
Poetry in Interaction Design: The Importance of Copy 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 Catwalkjeans 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 prom-
inent scroll wheel might be enough on its own, the copy actually
entices people by telling them the fun experience thats triggered
by scrolling.
http://www.pepejeans.com/media/extremecatwalk/http://www.pepejeans.com/media/extremecatwalk/http://www.pepejeans.com/media/extremecatwalk/http://www.pepejeans.com/media/extremecatwalk/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
17/98
Poetry in Interaction Design: The Importance of Copy 17
4. Feedback
As described inInteraction 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 encour-
ages users and provides a sense of security. As UX consultant Joe
Napoli suggests, feedback helps provides four types of answers
to users:
1. LocationWhat 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 ac-
tions required
Photo credit: Starbucks
One of the most common feedback messages is the confirmationthat a signup was successful, as with the Starbucks example above.
http://studio.uxpin.com/ebooks/interaction-design-best-practices-tangibles/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://www.givegoodux.com/feedback-5-principles-interaction-design-supercharge-ui-5-5/http://www.givegoodux.com/feedback-5-principles-interaction-design-supercharge-ui-5-5/https://www.starbucks.com/account/create/successhttps://www.starbucks.com/account/create/successhttp://www.givegoodux.com/feedback-5-principles-interaction-design-supercharge-ui-5-5/http://www.givegoodux.com/feedback-5-principles-interaction-design-supercharge-ui-5-5/http://studio.uxpin.com/ebooks/interaction-design-best-practices-tangibles/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201 -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
18/98
Poetry in Interaction Design: The Importance of Copy 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 feed-back 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
https://hootsuite.com/404notfoundhttps://hootsuite.com/404notfound -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
19/98
Poetry in Interaction Design: The Importance of Copy 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 sub-
tlety. 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.
http://www.barackobama.com/http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/http://www.barackobama.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
20/98
Poetry in Interaction Design: The Importance of Copy 20
6. Data
The most basic use of language in a site or app is data: the com-
panys addresses, phone numbers, legal text thats required to bethere, 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 num-
bers, 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.
http://www.welikesmall.com/contact/http://www.webdesignerdepot.com/2013/12/take-ux-to-the-next-level-by-adding-delight/http://www.webdesignerdepot.com/2013/12/take-ux-to-the-next-level-by-adding-delight/http://www.welikesmall.com/contact/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
21/98
Poetry in Interaction Design: The Importance of Copy 21
Conclusion
As Basecamp suggests in their excellent online book Getting Real, Ifyou 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.
https://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.phphttps://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
22/98
White Space in InteractionDesign: Applying the Hidden
Power of Nothing
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.
by Jerry Cao
https://www.flickr.com/photos/eager/11924949604/https://creativecommons.org/licenses/by/2.0/https://creativecommons.org/licenses/by/2.0/https://www.flickr.com/photos/eager/11924949604/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
23/98
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 ex-
isting elements. It doesnt need to to be white, or even blank (if, forexample, 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
http://www.1stwebdesigner.com/negative-space-design/http://studio.uxpin.com/ebooks/white-space-web-ui-design-balance/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/white-space-web-ui-design-balance/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201https://www.flickr.com/photos/vinothchandar/6646251667/https://creativecommons.org/licenses/by/2.0/https://creativecommons.org/licenses/by/2.0/https://www.flickr.com/photos/vinothchandar/6646251667/http://studio.uxpin.com/ebooks/white-space-web-ui-design-balance/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/white-space-web-ui-design-balance/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://www.1stwebdesigner.com/negative-space-design/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
24/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 24
more practical roles of balancing the visual hierarchyand leading
the users eyes to strategic points of interaction. Moreover, if there
is text present, white space must also create the most legible andreadableenvironment 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 prop-
erly can guide the users sight to notice whichever elements you
want. This is helpful for creating a brand identity and increasing
user interactions.
LegibilityThe space between smaller elements (micro) like let-
ters, 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).
http://www.awwwards.com/understanding-web-ui-visual-hierarchy.htmlhttp://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211http://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211http://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211http://webdesign.tutsplus.com/articles/typographic-readability-and-legibility--webdesign-12211http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
25/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 25
Macro and Micro
Where and how white space is used on a page will affect its role. Tosimplify 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 Principlesand 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 conjunctionwith the texts size, the white space surrounding the title funnels
http://thenextweb.com/dd/2015/03/17/how-to-apply-optical-illusions-to-web-ui-design/http://theafrix.com/workhttp://theafrix.com/workhttp://thenextweb.com/dd/2015/03/17/how-to-apply-optical-illusions-to-web-ui-design/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
26/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 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 jobof drawing attention, but the design is actually deceptively simple.
Photo credit: Tomasz Wysocki
Wysocki actually uses the white space as a blank canvas for sur-
prising 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 uponhover:
http://theafrix.com/workhttp://theafrix.com/work -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
27/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 27
Photo credit: Tomasz Wysocki
By using white space as a tool for luring users into his work, Wysoc-
ki 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-
http://theafrix.com/workhttp://scottberkun.com/essays/26-the-myth-of-discoverability/http://scottberkun.com/essays/26-the-myth-of-discoverability/http://theafrix.com/work -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
28/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 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. Itsusually 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 rec-
ognition (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.
http://studio.uxpin.com/ebooks/visual-web-ui-design-colors-space-contrast/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/visual-web-ui-design-colors-space-contrast/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://www.uxbooth.com/articles/when-is-learnability-more-important-than-usability/http://www.uxbooth.com/articles/when-is-learnability-more-important-than-usability/http://studio.uxpin.com/ebooks/visual-web-ui-design-colors-space-contrast/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/visual-web-ui-design-colors-space-contrast/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201 -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
29/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 29
1. Passive Space
Think of passive white spaceas the bare minimum.
Without enough white space, a site becomes illegible and frustrat-
ing 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.
http://alistapart.com/article/whitespacehttp://resonate.io/2015http://resonate.io/2015http://alistapart.com/article/whitespace -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
30/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 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
http://1000.chromeexperiments.com/http://1000.chromeexperiments.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
31/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 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 Experimentsactively maximizethe 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 Boul-
ton explains in an A List Apart piecethat he sometimes applies
http://1000.chromeexperiments.com/http://www.fibersensing.com/http://alistapart.com/article/whitespacehttp://alistapart.com/article/whitespacehttp://alistapart.com/article/whitespacehttp://alistapart.com/article/whitespacehttp://www.fibersensing.com/http://1000.chromeexperiments.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
32/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 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 whoare 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 be-
comes 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 con-
tent stands proud amidst the elegance of space.
Like we described in The Zen of White Space in Web Design, mini-
malism 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.
http://studio.uxpin.com/ebooks/white-space-web-ui-design-balance/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/white-space-web-ui-design-balance/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201 -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
33/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 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 siftthrough 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, stop-
ping when you hit the tipping point.
Photo credit: voghi
http://uxmyths.com/post/712569752/myth-more-choices-and-features-result-in-higher-satisfachttp://www.voghi.it/en/http://www.voghi.it/en/http://uxmyths.com/post/712569752/myth-more-choices-and-features-result-in-higher-satisfac -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
34/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 34
The site for the Italian fashion brand voghikeeps 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. Withthe contact information minimized at the right, the lack of com-
peting 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 ta-
glines, 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 im-
mediately 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 spaceis seen as luxurious, high-end, or sophisti-
cated, and as such expensive.
http://www.voghi.it/en/http://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/http://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/http://www.voghi.it/en/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
35/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 35
Balanced white spaceis seen as, well, balanced affordable
but still quality.
Little white spaceis seen as cheap, low-quality, and the clutter
is also displeasing to look at.
Photo credit:Amazon
Compare the fashion website voghiwe 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 im-
portantly 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.
http://www.amazon.com/http://www.voghi.it/en/http://www.voghi.it/en/http://www.amazon.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
36/98
White Space in Interaction Design: Applying the Hidden Power of Nothing 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 bestaccomplish their goals.
Conclusion
As a visual art, interaction design cant neglect one of its most funda-
mental 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 in-
terfaces into designs that users wantto interact with.
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
37/98
Attraction in Interaction Design:Creating Love at First Sight
Theres no denying that visuals are important to interaction design,
but exactly how important may surprise you.
While visual representation is often listed as thesecond dimension of
interaction design(the others being words, space, time, and behav-
ior), 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-sec-
ond 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.
by Jerry Cao
https://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttps://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttps://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttps://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-designhttps://www.interaction-design.org/ux-daily/177/the-five-languages-or-dimensions-of-interaction-design -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
38/98
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 somethingwe 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
showingrather 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, whichhas the throughput of a hard disk. And then you have poor old
http://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?language=enhttp://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?language=en -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
39/98
Attraction in Interaction Design: Creating Love at First Sight 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 thebulk 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 credibilityrevealed 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 Kashimuratested 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.
http://simson.net/ref/2002/stanfordPTL.pdfhttp://simson.net/ref/2002/stanfordPTL.pdfhttp://www.sigchi.org/chi95/proceedings/shortppr/mk_bdy.htmhttp://www.sigchi.org/chi95/proceedings/shortppr/mk_bdy.htmhttp://www.sigchi.org/chi95/proceedings/shortppr/mk_bdy.htmhttp://www.sigchi.org/chi95/proceedings/shortppr/mk_bdy.htmhttp://simson.net/ref/2002/stanfordPTL.pdfhttp://simson.net/ref/2002/stanfordPTL.pdf -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
40/98
Attraction in Interaction Design: Creating Love at First Sight 40
The role of aesthetics goes far beyond looking nice. Its consequenc-
es 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 responsi-
bility 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 possi-
ble. 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
https://www.linkedin.com/https://www.linkedin.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
41/98
Attraction in Interaction Design: Creating Love at First Sight 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 nav-
igational 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
http://www.opera.com/http://www.opera.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
42/98
Attraction in Interaction Design: Creating Love at First Sight 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. Itslikely 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 messag-
es or pop-up windows, visual feedback can be much more subtle.
The appeal is that visual feedback gives the user the same secu-
rity 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
http://huncwot.com/http://huncwot.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
43/98
Attraction in Interaction Design: Creating Love at First Sight 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. Aecting 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.
http://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/http://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
44/98
Attraction in Interaction Design: Creating Love at First Sight 44
Not Just Physical: The Emotional Connection of Visuals
Writing for UX Mag, Morgan Brown and Chuck Longanecker describewhat 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 inEmotion & 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-or-
death 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
http://uxmag.com/articles/how-to-design-for-the-guthttp://www.jnd.org/dn.mss/emotion_design_at.htmlhttp://www.jnd.org/dn.mss/emotion_design_at.htmlhttp://www.jnd.org/dn.mss/emotion_design_at.htmlhttp://www.jnd.org/dn.mss/emotion_design_at.htmlhttp://uxmag.com/articles/how-to-design-for-the-gut -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
45/98
Attraction in Interaction Design: Creating Love at First Sight 45
sports. Another example is the joy that comes from the sight of deli-
cious 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 butthis 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 improve-
ment 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 deci-
sions 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 crit-
ically within the first 10 seconds. This, alone, proves the impor-
tance of a first impression. In order to hold your users attention
http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
46/98
Attraction in Interaction Design: Creating Love at First Sight 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 tradition-
al 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
http://www.dior.com/home/en_ushttp://www.dior.com/home/en_us -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
47/98
Attraction in Interaction Design: Creating Love at First Sight 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 appealsto 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.
http://www.jnd.org/dn.mss/emotion_design_at.htmlhttp://www.jnd.org/dn.mss/emotion_design_at.html -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
48/98
Attraction in Interaction Design: Creating Love at First Sight 48
Conclusion: Its Whats Outside that Counts
Weve grown up thinking that passing judgements based on looks wassuperficial. 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.
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
49/98
The Secret Ingredient:Microinteractions
Its likely that you started your day with a micro-interaction. By turn-
ing 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 de-
signers must learn how to design the perfect moment. In this post,
well take a look at how to do just that.
by Carrie Cousins
http://studio.uxpin.com/ebooks/web-ui-design-trends-2015-2016/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://studio.uxpin.com/ebooks/web-ui-design-trends-2015-2016/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201 -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
50/98
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 on-
off 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 el-
ements. Stop and think about all the times you come in contact with
a micro-interaction every day.
Microinteractions impact things like:
http://slack.com/http://slack.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
51/98
The Secret Ingredient: Microinteractions 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 print-
ing 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-cen-
tered 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
http://www.wired.com/2013/12/human-centered-design-matters/http://www.wired.com/2013/12/human-centered-design-matters/http://www.amazon.com/gp/product/1491945923http://smartdesignworldwide.com/http://microinteractions.com/what-is-a-microinteraction/http://uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://microinteractions.com/what-is-a-microinteraction/http://smartdesignworldwide.com/http://www.amazon.com/gp/product/1491945923http://www.wired.com/2013/12/human-centered-design-matters/http://www.wired.com/2013/12/human-centered-design-matters/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
52/98
The Secret Ingredient: Microinteractions 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.
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
53/98
The Secret Ingredient: Microinteractions 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 notifi-
cation. Just a simple, singular display on the screen with enough
http://thenextweb.com/dd/2015/05/06/6-simple-tips-for-designing-copy-on-the-web/http://thenextweb.com/dd/2015/05/06/6-simple-tips-for-designing-copy-on-the-web/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
54/98
The Secret Ingredient: Microinteractions 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-in-
teractions 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 mi-
cro-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 appby creating timely, logical, and delightful screen reactions to user
http://studio.uxpin.com/ebooks/web-ui-design-trends-2015-2016/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201https://www.google.com/design/spec/animation/responsive-interaction.html#https://www.google.com/design/spec/animation/responsive-interaction.html#http://studio.uxpin.com/ebooks/web-ui-design-trends-2015-2016/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201 -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
55/98
The Secret Ingredient: Microinteractions 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 ani-
mations that feel lifelike. While all micro-interactions are animations,
it is becoming increasingly so. Try to pinpoint a device micro-in-
teraction 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 inter-
action 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.
https://www.google.com/design/spec/animation/authentic-motion.htmlhttps://www.apple.com/watch/app-store-apps/http://www.lukew.com/ff/entry.asp?1951http://www.lukew.com/ff/entry.asp?1951https://www.apple.com/watch/app-store-apps/https://www.google.com/design/spec/animation/authentic-motion.html -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
56/98
The Secret Ingredient: Microinteractions 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 screendevices, including watches, music players and even fitness trackers.
Conclusion
Micro-interactions are an important part of almost every digital de-
sign 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 mi-
cro-interactions in mind as you go.
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
57/98
The 5 Psychology Secrets forEnduring Interaction Design
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
by Jerry Cao
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
58/98
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 re-
searching 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 UXPinlooks like this:
Review usage data in our app, segmenting users based on over-
all 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 lookat behavior based on events created in KISSMetrics.
http://fitness.reebok.com/be-more-human/#/homehttp://designmodo.com/ux-documents/https://www.uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://kissmetrics.com/http://kissmetrics.com/https://www.uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://designmodo.com/ux-documents/http://fitness.reebok.com/be-more-human/#/home -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
59/98
The 5 Psychology Secrets for Enduring Interaction Design 59
For qualitative data, we interview ~30 users total from all seg-
ments 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 de-
sign? Is it personal? It is intuitive and easy? Thats human.
http://www.uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201http://www.uxpin.com/?utm_source=Interaction%20Design%20Unlocked%20Volume%201&utm_medium=anthology&utm_campaign=Interaction%20Design%20Unlocked%20Volume%201 -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
60/98
The 5 Psychology Secrets for Enduring Interaction Design 60
Design for Comfort and Predictability
There are a few elements in the design process that you just cantchange, like device type and screen size. But you can affect how
things render and how comfortable your designs are to use in dif-
ferent environments.
For a design to feel right, it must be comfortable to use.
Photo credit: Rosenfeld Media, Creative Commons 2.0
Thumb patternson 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 var-
ious devices.
https://www.flickr.com/photos/rosenfeldmedia/7171779486/in/photolist-bVKfbs-7ijKGVhttps://creativecommons.org/licenses/by/2.0/http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.phphttp://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.phphttps://creativecommons.org/licenses/by/2.0/https://www.flickr.com/photos/rosenfeldmedia/7171779486/in/photolist-bVKfbs-7ijKGV -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
61/98
The 5 Psychology Secrets for Enduring Interaction Design 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 delight-
ful experience.
The more comfortable users feel, the more likely theyll continue to
interact with your product.
https://www.bugaboo.com/US/en_US/strollers/bugaboo-runnerhttps://www.bugaboo.com/US/en_US/strollers/bugaboo-runner -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
62/98
The 5 Psychology Secrets for Enduring Interaction Design 62
Connect Emotionally
Focus on the one emotion your project should convey. Dont getwrapped 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:
-
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
63/98
The 5 Psychology Secrets for Enduring Interaction Design 63
Red: Conjures up passion, and gets the blood pumping with ex-
citement.
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 en-
velope. All of these elements alone dont add up to an emotion, buttogether these all craft the feeling of nostalgia.
http://www.feltapp.com/http://www.feltapp.com/http://www.feltapp.com/http://www.feltapp.com/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
64/98
The 5 Psychology Secrets for Enduring Interaction Design 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 youmake. 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. Spen-
cer Lanoue broke down Psychological Triggers That Make UX Design
Persuasivefrom an academic research standpoint for you.
Photo credit: Laerepenger
https://www.usertesting.com/blog/2015/05/12/6-psychological-triggers-that-make-ux-design-persuasive/https://www.usertesting.com/blog/2015/05/12/6-psychological-triggers-that-make-ux-design-persuasive/http://event.larepenger.no/en/en/http://event.larepenger.no/en/en/https://www.usertesting.com/blog/2015/05/12/6-psychological-triggers-that-make-ux-design-persuasive/https://www.usertesting.com/blog/2015/05/12/6-psychological-triggers-that-make-ux-design-persuasive/ -
7/26/2019 Uxpin Interaction Design Unlocked Volume I - Designing the Details
65/98
The 5 Psychology Secrets for Enduring Interaction Design 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 mon-
ey.
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 recom-
mended by Hicks Law, more choices leads to decision paralysis,
so choose carefully.
5. People are drawn to what is relevant to them right now.Con-
sider beacons, notifications or check in tools to be in the mo-
ment.
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 ex-
perience. If it takes longer than 1 second for your interface to re-
spond, the feeling of control quickly disintegrates. Whether the
https://en.wikipedia.org/wiki/Hick%27s_lawhttp://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/http://www.nngroup.com/articles/powers-of-10-tim