Design, honesty and emotions

DESIGN, HONESTY
AND EMOTIONS
CYNTHIA SAVARD SAUCIER
UX Designer, TP1
PATRICK WILLIAMS
Creative 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
DESIGN
Uses design to create
virtual and physical
solutions.
DESIGN
Creates an interface
between needs and
problems.

which one better represents its function?
VS
According 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
IS
PHOTOREALISM
A BAD THING?

IS PURPLE A BAD THING?
That’s like asking,
I like purple...

Skeuomorphism
Flat design
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
Literal
understanding
Contextual
understanding

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
IS FLAT DESIGN
THE SOLUTION ?

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”

Example B - Deleting on Github

Example C - Search in Prefences

- LayerVault’s Progressive ReductionExample A

Example B - The application is not frozen

Recherche
Example A - Inconsistencies between the bar and the search field

bouton 1 bouton 2
Example B - Inconsistent use of drop shadows

Example A - Using a dial to indicate when the next bus is coming

Example B - “Branded Interaction”
Clear Path

Examples - Persuasive Microcopy

exemple 2
Example - Mailchimp Website

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.

BOOK
How can this age-old object continue to evolve?

WHAT ARE THE ORIGINS OF
THE BOOK?

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

ABSTRACT REFERENCE POINTS
Reference points shift when I increase the font size.

USELESS SKEUOMOSPHISM
Really!??

DECORATE. THEN DECORATE SOME MORE.

NEW METAPHORS
Ma bibliothèque
Romans
Bandes
dessinées
Cuisine
Design
graphique
Nouvelles
[ 2 ]
[ 8 ] [ 3 ]
[ 1 ]
Design
intérieur
[ 4 ]
Québécois
[ 7 ]
[ 12 ]
VS

NEW METAPHORS
Ma bibliothèque
Romans
Bandes
dessinées
Cuisine
Design
graphique
Nouvelles
[ 2 ]
[ 8 ] [ 3 ]
[ 1 ]
Design
intérieur
[ 4 ]
Québécois
[ 7 ]
[ 12 ]

FEEDBACK OVER TIME
Chapitre 1
La 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 2
Au 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
mollis non.
mollis non.
Aliquam
porttitor
condimen-
tum tortor
mollis non.
mollis non.
Aliquam
porttitor
condimen-
tum tortor

LITTLE BIG DETAILS
Chapitre 1
mollis non.
leo.
Chapitre 1
mollis non.
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 YOU
CYNTHIA SAVARD SAUCIER
UX Designer, TP1
PATRICK WILLIAMS
Creative Director, TP1
@PATSVEK@CYNTHIASAVARD

Industrial design
Honest design
Almost flat
Consistent forms
Affordance
Smart metaphors
Microcopy
Traps
Skeuomorphism
Little big details
http://vimeo.com/42674279
http://www.youtube.com/watch?v=kdTbHSQXGWo
http://www.youtube.com/watch?v=lAfOuhsJJsQ
http://www.youtube.com/watch?v=WPs3E1-3UaE
http://www.youtube.com/watch?v=GCyiDaM3boc
http://www.youtube.com/watch?v=fLzWtUvdGz0
IMAGES
Dieter Rams
Ice cream scoop 1
Ice cream scoop 2
Calculator
Progressive reduction
Skeupmorphism
Korg app
Little big details
Progressive reduction
"Still loading"
Contacts app
Smart metaphors
“Wash me”
Almost flat: Letterpress
Almost flat: Gmail app
Windows 8
http://www.aa13.fr/design-objet/le-bon-design-dieter-rams-13334
http://supremehousewares.com/icecreamscoop-icecream.aspx
http://gadgets.boingboing.net/2009/02/10/antifreeze-ice-cream.html
http://iphonesoft.fr/2011/09/03/bons-plans-app-store-du-3-septembre-2011
http://layervault.tumblr.com/post/42361566927/progressive-reduction
http://skeu.it/page/2
http://www.soundpad.fr/application/synthes-intrusments-virtuels/korg/korg-ims-20-ipad
http://littlebigdetails.com/
http://layervault.tumblr.com/post/42442865260/implementing-progressive-reduction
http://andrewayala.tumblr.com/
Application contact pour iPad
http://patterntap.com/pattern/bus-arrival-clock-bus-oclock
http://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-awesome
http://www.iclarified.com/28627/gmail-app-now-supports-swiping-between-messages-gets-edit-mode
http://img.clubic.com/05100494-photo-windows-8-cp-metro.jpg
VIDEOS
IDEAS
Skeuomorphism and digital
Criticism of skeuomorphism
Criticism of skeuomorphism
Branded interaction
Definition of skeuomorphism
Ebook
Microcopy
Honest design
Definition of flat design
Almost flat
Voice and tone
Affordance
Dieter Rams’ 10 principles of good design
Visual metaphors
Desk and library metaphors
Apple’s design revolution
Criticism 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-uis
http://www.matthewmooredesign.com/branded-interactions/
http://sachagreif.com/what-skeuomorphism-is-and-isnt/
http://www.metagramme.com/writing/ebooks-and-design-humans
http://bokardo.com/archives/writing-microcopy/
http://alistapart.com/article/material-honesty-on-the-web
http://branch.com/b/flat-design-needs-a-new-name?ref=group
http://www.matthewmooredesign.com/almost-flat-design/
http://voiceandtone.com/
http://www.interaction-design.org/encyclopedia/affordances.html
http://fr.wikipedia.org/wiki/Dieter_Rams
http://www.persee.fr/web/revues/home/prescript/article/colan_0336-1500_1996_num_109_1_2705
http://www.sigchi.org/chi95/proceedings/tutors/ams_bdy.htm
http://zing.ncsl.nist.gov/hfweb/proceedings/marcus/index.html
http://www.fastcodesign.com/1670760/will-apples-tacky-software-design-philosophy-cause-a-revolt
http://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/

Design, honesty and emotions

Recommandé

Recommandé

Contenu connexe

Similaire à Design, honesty and emotions

Similaire à Design, honesty and emotions (20)

Plus de TP1

Plus de TP1 (15)

Dernier

Dernier (20)

Design, honesty and emotions