From Deception to Clarity

Deception From

toClarityStephen Hay, dsgnday Amsterdam

T H O U G H T S O N D E C E P T I O N I N W E B D E S I G N

– DA R W I N O R T I Z

“People tend to see what they expect to see.”

Design decisions.

CancelOK

Cancel OK

Cancel OK

Cancel OK

Cancel OK

Cancel OK

Purchase yearly subscription to our newsletter

By pressing Cancel, you are purchasing a yearly subscription. By pressing OK, you are purchasing a monthly subscription. If you do not wish to purchase anything, close your browser and get the hell off the internet.

People who stand to gain something from you have motive to deceive.

I ♥ Deception

Principles, Techniques, and Ethics of Stage Magic and Their Application to Human Interface DesignBruce “Tog” Tognazzini (1993)

– B R U C E “ TO G ” TO G N A Z Z I N I

“A trash can instead of a dialog requesting track and sector identification for zero-overwrite is simulation.”

Benevolent Deception in Human Computer InteractionEytan Adar (University of Michigan), Desney S. Tan (Microsoft Research), Jaime Teevan (Microsoft Research), 2013

Deception can be found in UIs all around us.

https://www.flickr.com/photos/roboppy/7364621250/

Good vs Evil

Stupid Patterns

Dark Patterns

darkpatterns.org

“Roach Motel”

http://darkpatterns.org/at-twitch-tv-more-colors-means-give-us-money/

“Bait & Switch”

€

Why people use dark patterns

Rather than deceiving users, enable them to do what you’d like them to do.

Deceit is the low-hanging fruit of persuasion

– B J F O G G

“By focusing on simplicity of the target behavior, you increase Ability.”

A behavior model for persuasive design: behaviormodel.org

Motivation Ability

– DA R W I N O R T I Z

“The audience must never be made to work.”

Clarifying techniques

1. Use fewer propsAdd only the necessary to your UI

rijksmuseum.nl

rijksmuseum.nl

2. Use a memory hookBe consistent

3. Visually clarify the propsMake it clear what everything does

“Don't stand in the elevator when sheets of paper are flying around to the side of the elevator.”

4. Visually clarify the layout(That says it all)

5. Make the hidden visibleIf it needs to be there, put it there.

We make cars.

SCROLL DOWN PAST THIS MODERN VARIATION OF A FLASH INTRO TO FIND SOME ACTUAL CONTENT.

6. Eliminate time lagsDesign for performance

7. Eliminate interruptionsAvoid distractions from the task at hand

8. Procedural directnessDesign fluid procedures

Delight vs Frustration

:-) :-(

– H E N N I N G N E L M S , M AG I C A N D S H O W M A N S H I P

“…some deceptions are permissable, others are unforgivable. No one expects a poker player to tell the truth about the cards he

holds. However, if you try to deceive by dealing from the bottom of the deck, you may got shot and will certainly be shunned.”

Thank you!@stephenhay the-haystack.com responsivedesignworkflow.com