design, honesty and emotions
DESCRIPTION
Honest design is becoming aware of path dependence and using visual metaphors that are both whole and consistent. It’s concentrating on user interaction, rather than the layout of the interface. It’s also implementing feedback at precise moments, as well as using helpful interactions and subtle variations in order to create emotional connections.TRANSCRIPT
DESIGN, HONESTY AND EMOTIONS
CYNTHIA SAVARD SAUCIERUX Designer, TP1
PATRICK WILLIAMSCreative Director, TP1
RDV DESIGN 2013
@TP1
I AM NOT SMART ENOUGH TO TELL YOU WHAT
“GOOD”DESIGN IS.
BUT HE IS.Hello, I’m
Dieter Rams.
ACCORDING TO DIETER RAMS,GOOD DESIGN: 1. Is innovative
2. Makes a product useful
3. Is aesthetic
4. Makes a product understandable
5. Is unobtrusive
6. Is honest
7. Is long-lasting
8. Is thorough down to the last detail
9. Is environmentally-friendly
10. Is as little design as possible
INDUSTRIAL DESIGNUses design to create virtual and physical solutions.
DESIGN
Creates an interface between needs and problems.
which one better represents its function?
VSAccording to Dieter Rams’ principles,
“EVIL” SKEUOMORPHISM.The second scoop smacks of
A B
Which calculator incorporates elements of skeuomorphism?
BOTH. Which calculator incorporates elements of skeuomorphism?
“An element of design or structure that serves little or no purpose in the artefact fashioned from the new material, but was essential to the object made from the original material.”
SKEUOMORPHISM
Skeuomorphism
Flat design
MinimalismPhotorealism
Skeuomorphism
Flat design
MinimalismPhotorealism
IS PHOTOREALISMA BAD THING?
IS PURPLE A BAD THING?
That’s like asking,
I like purple...
Skeuomorphism
Flat design
MinimalismPhotorealism
IS SKEUOMORPHISM
A BAD THING?
SOMETIMES, YES. VERY, VERY BAD...
SO WHY DO WE USE IT THEN?
UH...
BECAUSE OF MUSCLE MEMORY
Reason #1
4YRS
2YRS
6YRS
BECAUSE OF METAPHORS
Reason #2
Does not understand metaphors
Literalunderstanding
Contextualunderstanding
SOFTWARE IS ANY SET OF MACHINE-READABLE INSTRUCTIONS THAT DIRECTS A COMPUTER’S PROCESSOR TO PERFORM SPECIFIC OPERATIONS. THIS INCLUDES PROGRAMS, PROCEDURES,
ALGORITHMS AND DOCUMENTATION, WHICH ARE STORED AS FILES IN MEMORY OR ON A
HARD DRIVE...
ZZZ...
Defining “software” without a metaphor:
DRAWING SOFTWARE IS LIKE A SKETCHBOOK, BUT ON YOUR SCREEN.
OH!
Defining “software” with a metaphor:
BECAUSE OF AFFORDANCE
Reason #3
BECAUSE OF PATH DEPENDENCE
Reason #4
[A set of past decisions that may impact future decisions. Historical particularities which, although justified at the time, are no longer optimal or rational.]
Skeuomorphism
Flat design
MinimalismPhotorealism
IS FLAT DESIGNTHE SOLUTION ?
Microsoft thinks so...
HONEST DESIGN is adhering to the natural constraints of the medium.
FALSE TRUE
A pixel does not have depth. Giving it a shadow does not respect “honest design”.
THE TOOLS OF HONEST DESIGN
1. Little Big Details
2. Feedback Over Time
3. Consistent Forms
4. Smart Metaphors
5. Microcopy
6. “Almost Flat”
LITTLE BIG DETAILS
Tool #1
Example A - Scroll Bar
Example B - Deleting on Github
Example C - Search in Prefences
FEEDBACKOVER TIME
Tool #2
- LayerVault’s Progressive ReductionExample A
Example B - The application is not frozen
CONSISTENT FORMS
Tool #3
Recherche
Example A - Inconsistencies between the bar and the search field
bouton 1 bouton 2
Example B - Inconsistent use of drop shadows
SMART METAPHORS
Tool #4
Example A - Using a dial to indicate when the next bus is coming
IPHONE SWIPE... IN REAL LIFE
Example B - “Branded Interaction”
Clear Path
MICROCOPYTool #5
Examples - Persuasive Microcopy
exemple 2
Example - Mailchimp Website
ALMOST FLATTool #6
Example A - Letterpress uses depth and shadows
Example B - Gmail uses a few metaphors
TO SUMMARIZE
1. Be consistent when using metaphors.
2. If you opt for flat design, use interactions to enrich your interface.
3. Respect the natural constraints of the medium you’ve chosen. They can still be a source of creativity.
4. Be careful to avoid path dependence.
CASE STUDY
BOOKHow can this age-old object continue to evolve?
WHAT ARE THE ORIGINS OF THE BOOK?
Tablet Scroll Book eBook / Touch tablet
METAPHORS USED
• Pages
• Book binding
• Bookmark
• Library
• Highlighter
THE USES OF A BOOK
• Read content
• Classify (in a library)
• Identify important passages (highlight)
• Share (lending it to someone)
• Annotate (in the margins)
• Rate content
• Use tools (research, translate)
• Earn trophies and badges
• Get statistics
• Customize content (brightness, font size, background colour)
Basic functions New functions
TRAPS
ABSTRACT REFERENCE POINTS
Reference points shift when I increase the font size.
USELESS SKEUOMOSPHISM
Really!??
DECORATE. THEN DECORATE SOME MORE.
SOME SUGGESTIONS...
NEW METAPHORS
Ma bibliothèque
Romans Bandesdessinées Cuisine
Designgraphique Nouvelles
[ 2 ] [ 8 ] [ 3 ]
[ 1 ]
Designintérieur
[ 4 ]
Québécois[ 7 ]
[ 12 ]VS
NEW METAPHORS
Ma bibliothèque
Romans Bandesdessinées Cuisine
Designgraphique Nouvelles
[ 2 ] [ 8 ] [ 3 ]
[ 1 ]
Designintérieur
[ 4 ]
Québécois[ 7 ]
[ 12 ]
FEEDBACK OVER TIME
Chapitre 1La découverte du jour
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor. Aenean elit mauris, adipiscing et mollis a, pulvinar dapibus leo. Sed accumsan ornare sollicitudin. Donec euismod, sem quis varius rutrum, sapien tortor sodales metus, a posuere dui neque in leo.
Chapitre 2Au gré de la nuit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor.
HALF PAST NOON HALF PAST MIDNIGHT
FEEDBACK OVER TIME
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Aliquam
porttitor
condimen-
tum tortor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Aliquam
porttitor
condimen-
tum tortor
LITTLE BIG DETAILS
Chapitre 1La découverte du jour
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor. Aenean elit mauris, adipiscing et mollis a, pulvinar dapibus leo. Sed accumsan ornare sollicitudin. Donec euismod, sem quis varius rutrum, sapien tortor sodales metus, a posuere dui neque in leo.
Chapitre 1La découverte du jour
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus rhoncus leo vel posuere. Integer interdum blandit mollis. Suspendisse vehicula suscipit nunc suscipit ullamcorper. Donec sed placerat tellus. Fusce eleifend convallis lacus, sed mollis sem consectetur in. In sed magna felis, sit amet condimentum nunc. Aliquam porttitor condimentum tortor, commodo accumsan quam mollis non.
Donec nec lectus consequat mi aliquet commodo vel eget erat. Integer nulla urna, varius vitae pulvinar et, suscipit ac tortor. Aenean elit mauris, adipiscing et mollis a, pulvinar dapibus leo. Sed accumsan ornare sollicitudin. Donec euismod, sem quis varius rutrum, sapien tortor sodales metus, a posuere dui neque in leo.
PORTRAIT LANDSCAPE
CONCLUSION
1. Remember where the product comes from.
2. Don’t neglect the product’s basic functions in favour of new possibilities offered by the medium.
3. Only use metaphors when necessary.
4. Just because the graphic metaphors have been removed, that doesn’t make the book any less a book.
THANK YOUCYNTHIA SAVARD SAUCIER
UX Designer, TP1PATRICK WILLIAMS
Creative Director, TP1
@PATSVEK@CYNTHIASAVARD
Industrial design Honest design
Almost flatConsistent forms
AffordanceSmart metaphors
MicrocopyTraps
SkeuomorphismLittle big details
http://vimeo.com/42674279http://vimeo.com/58022280http://vimeo.com/11970647http://vimeo.com/52584608http://www.youtube.com/watch?v=kdTbHSQXGWohttp://vimeo.com/3860979http://www.youtube.com/watch?v=lAfOuhsJJsQhttp://www.youtube.com/watch?v=WPs3E1-3UaEhttp://www.youtube.com/watch?v=GCyiDaM3bochttp://www.youtube.com/watch?v=fLzWtUvdGz0
IMAGESDieter Rams
Ice cream scoop 1Ice cream scoop 2
CalculatorProgressive reduction
Skeupmorphism Korg app
Little big detailsProgressive reduction
"Still loading" Contacts app
Smart metaphors“Wash me”
Almost flat: LetterpressAlmost flat: Gmail app
Windows 8
http://www.aa13.fr/design-objet/le-bon-design-dieter-rams-13334http://supremehousewares.com/icecreamscoop-icecream.aspxhttp://gadgets.boingboing.net/2009/02/10/antifreeze-ice-cream.htmlhttp://iphonesoft.fr/2011/09/03/bons-plans-app-store-du-3-septembre-2011http://layervault.tumblr.com/post/42361566927/progressive-reductionhttp://skeu.it/page/2http://www.soundpad.fr/application/synthes-intrusments-virtuels/korg/korg-ims-20-ipadhttp://littlebigdetails.com/http://layervault.tumblr.com/post/42442865260/implementing-progressive-reductionhttp://andrewayala.tumblr.com/Application contact pour iPadhttp://patterntap.com/pattern/bus-arrival-clock-bus-oclockhttp://www.broadsheet.ie/2011/03/24/ive-been-to-abbeyfeale-but-ive-never-been-to-edit-me/http://pguba.tumblr.com/post/34349385596/letterpress-the-app-is-awesomehttp://www.iclarified.com/28627/gmail-app-now-supports-swiping-between-messages-gets-edit-modehttp://img.clubic.com/05100494-photo-windows-8-cp-metro.jpg
VIDEOS
IDEASSkeuomorphism and digitalCriticism of skeuomorphism Criticism of skeuomorphism
Branded interaction Definition of skeuomorphism
Ebook Microcopy
Honest designDefinition of flat design
Almost flatVoice and tone
Affordance Dieter Rams’ 10 principles of good design
Visual metaphors
Desk and library metaphors
Apple’s design revolutionCriticism of Windows 8
The flattening of design Flat design does not replace skeuomorphism
http://designmodo.com/skeuomorphic-vs-digital-interfaces/http://www.wired.com/magazine/2012/01/st_thompson_analog/http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uishttp://www.matthewmooredesign.com/branded-interactions/http://sachagreif.com/what-skeuomorphism-is-and-isnt/http://www.metagramme.com/writing/ebooks-and-design-humanshttp://bokardo.com/archives/writing-microcopy/http://alistapart.com/article/material-honesty-on-the-webhttp://branch.com/b/flat-design-needs-a-new-name?ref=grouphttp://www.matthewmooredesign.com/almost-flat-design/http://voiceandtone.com/http://www.interaction-design.org/encyclopedia/affordances.htmlhttp://fr.wikipedia.org/wiki/Dieter_Ramshttp://www.persee.fr/web/revues/home/prescript/article/colan_0336-1500_1996_num_109_1_2705http://www.sigchi.org/chi95/proceedings/tutors/ams_bdy.htmhttp://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html
http://www.fastcodesign.com/1670760/will-apples-tacky-software-design-philosophy-cause-a-revolthttp://www.nngroup.com/articles/windows-8-disappointing-usability/http://bits.blogs.nytimes.com/2013/04/23/the-flattening-of-design/http://laurent.assouad.com/2013/non-le-flat-design-ne-remplace-pas-le-skeuomorphisme/