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


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].


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


4/98


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


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/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/


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/


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


10/98


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.


11/98


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


12/98


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


13/98


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/


14/98


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/


15/98


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/


16/98


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/


17/98


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


18/98


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


19/98


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/


20/98


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/


21/98


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


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/


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/


24/98


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


25/98


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/


26/98


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


27/98


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


28/98


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


29/98


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


30/98


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/


31/98


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/


32/98


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


33/98


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


34/98


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/


35/98


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/


36/98


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.


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


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


39/98


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


40/98


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/


41/98


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/


42/98


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/


43/98


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/


44/98


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


45/98


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/


46/98


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


47/98


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


48/98


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.


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


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/


51/98


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/


52/98


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/98


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/


54/98


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


55/98


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


56/98


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.


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


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


59/98


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


60/98


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


61/98


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


62/98


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:


63/98


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/


64/98


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/


65/98


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

Documents

Uxpin Interaction Design Unlocked Volume I - Designing the Details