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/