DESIGN, HONESTYAND EMOTIONSCYNTHIA SAVARD SAUCIERUX Designer, TP1PATRICK WILLIAMSCreative Director, TP1RDV DESIGN 2013@TP1
I AM NOT SMART ENOUGH TOTELL YOU WHAT“GOOD”DESIGN IS.
BUT HE IS.Hello, I’mDieter Rams.
ACCORDING TO DIETER RAMS,GOOD DESIGN:1. Is innovative2. Makes a product useful3. Is aesthetic4. Makes a product understand...
INDUSTRIALDESIGNUses design to createvirtual and physicalsolutions.DESIGNCreates an interfacebetween needs andproblems.
which one better represents its function?VSAccording to Dieter Rams’ principles,
“EVIL” SKEUOMORPHISM.The second scoop smacks of
A BWhich 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 theartefact fashioned from the new material, but wa...
SkeuomorphismFlat designMinimalismPhotorealism
SkeuomorphismFlat designMinimalismPhotorealismISPHOTOREALISMA BAD THING?
IS PURPLE A BAD THING?That’s like asking,I like purple...
SkeuomorphismFlat designMinimalismPhotorealismISSKEUOMORPHISMA BAD THING?
SOMETIMES, YES. VERY, VERY BAD...
SO WHY DO WE USE IT THEN?UH...
BECAUSE OF MUSCLEMEMORYReason #1
4YRS2YRS6YRSBECAUSE OF METAPHORSReason #2Does not understandmetaphorsLiteralunderstandingContextualunderstanding
SOFTWARE IS ANY SET OF MACHINE-READABLE INSTRUCTIONS THAT DIRECTS ACOMPUTER’S PROCESSOR TO PERFORM SPECIFICOPERATIONS. THI...
DRAWING SOFTWARE IS LIKE ASKETCHBOOK, BUT ON YOUR SCREEN.OH!Defining “software” with a metaphor:
BECAUSE OF AFFORDANCEReason #3
BECAUSE OF PATH DEPENDENCEReason #4[A set of past decisions that may impact future decisions. Historicalparticularities wh...
SkeuomorphismFlat designMinimalismPhotorealismIS FLAT DESIGNTHE SOLUTION ?
Microsoft thinks so...
HONEST DESIGNis adhering to the natural constraints of the medium.
FALSE TRUEA pixel does not have depth.Giving it a shadow does not respect “honest design”.
THE TOOLS OF HONEST DESIGN1. Little Big Details2. Feedback Over Time3. Consistent Forms4. Smart Metaphors5. Microcopy6. “A...
LITTLE BIG DETAILSTool #1
Example A - Scroll Bar
Example B - Deleting on Github
Example C - Search in Prefences
FEEDBACKOVER TIMETool #2
- LayerVault’s Progressive ReductionExample A
Example B - The application is not frozen
CONSISTENT FORMSTool #3
RechercheExample A - Inconsistencies between the bar and the search field
bouton 1 bouton 2Example B - Inconsistent use of drop shadows
SMART METAPHORSTool #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 2Example - Mailchimp Website
ALMOST FLATTool #6
Example A - Letterpress uses depth and shadows
Example B - Gmail uses a few metaphors
TO SUMMARIZE1. Be consistent when usingmetaphors.2. If you opt for flat design, useinteractions to enrich yourinterface.3....
CASE STUDY
BOOKHow can this age-old object continue to evolve?
WHAT ARE THE ORIGINS OFTHE BOOK?
Tablet Scroll Book eBoo
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 s...
TRAPS
ABSTRACT REFERENCE POINTSReference points shift when I increase the font size.
USELESS SKEUOMOSPHISMReally!??
DECORATE. THEN DECORATE SOME MORE.
SOME SUGGESTIONS...
NEW METAPHORSMa bibliothèqueRomansBandesdessinéesCuisineDesigngraphiqueNouvelles[ 2 ][ 8 ] [ 3 ][ 1 ]Designintérieur[ 4 ]Q...
NEW METAPHORSMa bibliothèqueRomansBandesdessinéesCuisineDesigngraphiqueNouvelles[ 2 ][ 8 ] [ 3 ][ 1 ]Designintérieur[ 4 ]Q...
FEEDBACK OVER TIMEChapitre 1La découverte du jourLorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhonc...
FEEDBACK OVER TIMELorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinte...
LITTLE BIG DETAILSChapitre 1La découverte du jourLorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhonc...
CONCLUSION1. Remember where the product comes from.2. Don’t neglect the product’s basic functions in favour of new possibi...
THANK YOUCYNTHIA SAVARD SAUCIERUX Designer, TP1PATRICK WILLIAMSCreative Director, TP1@PATSVEK@CYNTHIASAVARD
Industrial designHonest designAlmost flatConsistent formsAffordanceSmart metaphorsMicrocopyTrapsSkeuomorphismLittle big de...
Design, honesty and emotions
Design, honesty and emotions
Upcoming SlideShare
Loading in...5
×

Design, honesty and emotions

2,793

Published on

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.

Published in: Design, Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,793
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
75
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Design, honesty and emotions"

  1. 1. DESIGN, HONESTYAND EMOTIONSCYNTHIA SAVARD SAUCIERUX Designer, TP1PATRICK WILLIAMSCreative Director, TP1RDV DESIGN 2013@TP1
  2. 2. I AM NOT SMART ENOUGH TOTELL YOU WHAT“GOOD”DESIGN IS.
  3. 3. BUT HE IS.Hello, I’mDieter Rams.
  4. 4. ACCORDING TO DIETER RAMS,GOOD DESIGN:1. Is innovative2. Makes a product useful3. Is aesthetic4. Makes a product understandable5. Is unobtrusive6. Is honest7. Is long-lasting8. Is thorough down to the last detail9. Is environmentally-friendly10. Is as little design as possible
  5. 5. INDUSTRIALDESIGNUses design to createvirtual and physicalsolutions.DESIGNCreates an interfacebetween needs andproblems.
  6. 6. which one better represents its function?VSAccording to Dieter Rams’ principles,
  7. 7. “EVIL” SKEUOMORPHISM.The second scoop smacks of
  8. 8. A BWhich calculator incorporates elements of skeuomorphism?
  9. 9. BOTH.Which calculator incorporates elements of skeuomorphism?
  10. 10. “An element of design or structure that serves little or no purpose in theartefact fashioned from the new material, but was essential to theobject made from the original material.”SKEUOMORPHISM
  11. 11. SkeuomorphismFlat designMinimalismPhotorealism
  12. 12. SkeuomorphismFlat designMinimalismPhotorealismISPHOTOREALISMA BAD THING?
  13. 13. IS PURPLE A BAD THING?That’s like asking,I like purple...
  14. 14. SkeuomorphismFlat designMinimalismPhotorealismISSKEUOMORPHISMA BAD THING?
  15. 15. SOMETIMES, YES. VERY, VERY BAD...
  16. 16. SO WHY DO WE USE IT THEN?UH...
  17. 17. BECAUSE OF MUSCLEMEMORYReason #1
  18. 18. 4YRS2YRS6YRSBECAUSE OF METAPHORSReason #2Does not understandmetaphorsLiteralunderstandingContextualunderstanding
  19. 19. SOFTWARE IS ANY SET OF MACHINE-READABLE INSTRUCTIONS THAT DIRECTS ACOMPUTER’S PROCESSOR TO PERFORM SPECIFICOPERATIONS. THIS INCLUDES PROGRAMS, PROCEDURES,ALGORITHMS AND DOCUMENTATION, WHICH ARE STORED AS FILES IN MEMORY OR ON AHARD DRIVE...ZZZ...Defining “software” without a metaphor:
  20. 20. DRAWING SOFTWARE IS LIKE ASKETCHBOOK, BUT ON YOUR SCREEN.OH!Defining “software” with a metaphor:
  21. 21. BECAUSE OF AFFORDANCEReason #3
  22. 22. BECAUSE OF PATH DEPENDENCEReason #4[A set of past decisions that may impact future decisions. Historicalparticularities which, although justified at the time, are no longer optimal orrational.]
  23. 23. SkeuomorphismFlat designMinimalismPhotorealismIS FLAT DESIGNTHE SOLUTION ?
  24. 24. Microsoft thinks so...
  25. 25. HONEST DESIGNis adhering to the natural constraints of the medium.
  26. 26. FALSE TRUEA pixel does not have depth.Giving it a shadow does not respect “honest design”.
  27. 27. THE TOOLS OF HONEST DESIGN1. Little Big Details2. Feedback Over Time3. Consistent Forms4. Smart Metaphors5. Microcopy6. “Almost Flat”
  28. 28. LITTLE BIG DETAILSTool #1
  29. 29. Example A - Scroll Bar
  30. 30. Example B - Deleting on Github
  31. 31. Example C - Search in Prefences
  32. 32. FEEDBACKOVER TIMETool #2
  33. 33. - LayerVault’s Progressive ReductionExample A
  34. 34. Example B - The application is not frozen
  35. 35. CONSISTENT FORMSTool #3
  36. 36. RechercheExample A - Inconsistencies between the bar and the search field
  37. 37. bouton 1 bouton 2Example B - Inconsistent use of drop shadows
  38. 38. SMART METAPHORSTool #4
  39. 39. Example A - Using a dial to indicate when the next bus is coming
  40. 40. IPHONE SWIPE... IN REAL LIFE
  41. 41. Example B - “Branded Interaction”Clear Path
  42. 42. MICROCOPYTool #5
  43. 43. Examples - Persuasive Microcopy
  44. 44. exemple 2Example - Mailchimp Website
  45. 45. ALMOST FLATTool #6
  46. 46. Example A - Letterpress uses depth and shadows
  47. 47. Example B - Gmail uses a few metaphors
  48. 48. TO SUMMARIZE1. Be consistent when usingmetaphors.2. If you opt for flat design, useinteractions to enrich yourinterface.3. Respect the natural constraintsof the medium you’ve chosen.They can still be a source ofcreativity.4. Be careful to avoid pathdependence.
  49. 49. CASE STUDY
  50. 50. BOOKHow can this age-old object continue to evolve?
  51. 51. WHAT ARE THE ORIGINS OFTHE BOOK?
  52. 52. Tablet Scroll Book eBoo
  53. 53. METAPHORS USED• Pages• Book binding• Bookmark• Library• Highlighter
  54. 54. 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, fontsize, background colour)Basic functions New functions
  55. 55. TRAPS
  56. 56. ABSTRACT REFERENCE POINTSReference points shift when I increase the font size.
  57. 57. USELESS SKEUOMOSPHISMReally!??
  58. 58. DECORATE. THEN DECORATE SOME MORE.
  59. 59. SOME SUGGESTIONS...
  60. 60. NEW METAPHORSMa bibliothèqueRomansBandesdessinéesCuisineDesigngraphiqueNouvelles[ 2 ][ 8 ] [ 3 ][ 1 ]Designintérieur[ 4 ]Québécois[ 7 ][ 12 ]VS
  61. 61. NEW METAPHORSMa bibliothèqueRomansBandesdessinéesCuisineDesigngraphiqueNouvelles[ 2 ][ 8 ] [ 3 ][ 1 ]Designintérieur[ 4 ]Québécois[ 7 ][ 12 ]
  62. 62. FEEDBACK OVER TIMEChapitre 1La découverte du jourLorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinterdum blandit mollis. Suspendisse vehiculasuscipit nunc suscipit ullamcorper. Donec sedplacerat tellus. Fusce eleifend convallis lacus, sedmollis sem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquam porttitorcondimentum tortor, commodo accumsan quammollis non.Donec nec lectus consequat mi aliquet commodo veleget erat. Integer nulla urna, varius vitae pulvinar et,suscipit ac tortor. Aenean elit mauris, adipiscing etmollis a, pulvinar dapibus leo. Sed accumsan ornaresollicitudin. Donec euismod, sem quis varius rutrum,sapien tortor sodales metus, a posuere dui neque inleo.Chapitre 2Au gré de la nuitLorem ipsum dolor sit amet, consecteturadipiscing elit. Cras cursus rhoncus leo velposuere. Integer interdum blandit mollis.Suspendisse vehicula suscipit nunc suscipitullamcorper. Donec sed placerat tellus.Fusce eleifend convallis lacus, sed mollissem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquamporttitor condimentum tortor, commodoaccumsan quam mollis non.Donec nec lectus consequat mi aliquetcommodo vel eget erat. Integer nulla urna,varius vitae pulvinar et, suscipit ac tortor.HALF PAST NOON HALF PAST MIDNIGHT
  63. 63. FEEDBACK OVER TIMELorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinterdum blandit mollis. Suspendisse vehiculasuscipit nunc suscipit ullamcorper. Donec sedplacerat tellus. Fusce eleifend convallis lacus, sedmollis sem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquam porttitorcondimentum tortor, commodo accumsan quammollis non.Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinterdum blandit mollis. Suspendisse vehiculasuscipit nunc suscipit ullamcorper. Donec sedplacerat tellus. Fusce eleifend convallis lacus, sedmollis sem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquam porttitorcondimentum tortor, commodo accumsan quammollis non.Aliquamporttitorcondimen-tum tortorLorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinterdum blandit mollis. Suspendisse vehiculasuscipit nunc suscipit ullamcorper. Donec sedplacerat tellus. Fusce eleifend convallis lacus, sedmollis sem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquam porttitorcondimentum tortor, commodo accumsan quammollis non.Lorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinterdum blandit mollis. Suspendisse vehiculasuscipit nunc suscipit ullamcorper. Donec sedplacerat tellus. Fusce eleifend convallis lacus, sedmollis sem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquam porttitorcondimentum tortor, commodo accumsan quammollis non.Aliquamporttitorcondimen-tum tortor
  64. 64. LITTLE BIG DETAILSChapitre 1La découverte du jourLorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinterdum blandit mollis. Suspendisse vehiculasuscipit nunc suscipit ullamcorper. Donec sedplacerat tellus. Fusce eleifend convallis lacus, sedmollis sem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquam porttitorcondimentum tortor, commodo accumsan quammollis non.Donec nec lectus consequat mi aliquet commodo veleget erat. Integer nulla urna, varius vitae pulvinar et,suscipit ac tortor. Aenean elit mauris, adipiscing etmollis a, pulvinar dapibus leo. Sed accumsan ornaresollicitudin. Donec euismod, sem quis varius rutrum,sapien tortor sodales metus, a posuere dui neque inleo.Chapitre 1La découverte du jourLorem ipsum dolor sit amet, consectetur adipiscingelit. Cras cursus rhoncus leo vel posuere. Integerinterdum blandit mollis. Suspendisse vehiculasuscipit nunc suscipit ullamcorper. Donec sedplacerat tellus. Fusce eleifend convallis lacus, sedmollis sem consectetur in. In sed magna felis, sitamet condimentum nunc. Aliquam porttitorcondimentum tortor, commodo accumsan quammollis non.Donec nec lectus consequat mi aliquet commodo veleget erat. Integer nulla urna, varius vitae pulvinar et,suscipit ac tortor. Aenean elit mauris, adipiscing etmollis a, pulvinar dapibus leo. Sed accumsan ornaresollicitudin. Donec euismod, sem quis varius rutrum,sapien tortor sodales metus, a posuere dui neque inleo.PORTRAIT LANDSCAPE
  65. 65. CONCLUSION1. Remember where the product comes from.2. Don’t neglect the product’s basic functions in favour of new possibilitiesoffered by the medium.3. Only use metaphors when necessary.4. Just because the graphic metaphors have been removed, that doesn’t makethe book any less a book.
  66. 66. THANK YOUCYNTHIA SAVARD SAUCIERUX Designer, TP1PATRICK WILLIAMSCreative Director, TP1@PATSVEK@CYNTHIASAVARD
  67. 67. Industrial designHonest designAlmost flatConsistent formsAffordanceSmart metaphorsMicrocopyTrapsSkeuomorphismLittle big detailshttp://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=fLzWtUvdGz0IMAGESDieter RamsIce cream scoop 1Ice cream scoop 2CalculatorProgressive reductionSkeupmorphismKorg appLittle big detailsProgressive reduction"Still loading"Contacts appSmart metaphors“Wash me”Almost flat: LetterpressAlmost flat: Gmail appWindows 8http://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.jpgVIDEOSIDEASSkeuomorphism and digitalCriticism of skeuomorphismCriticism of skeuomorphismBranded interactionDefinition of skeuomorphismEbookMicrocopyHonest designDefinition of flat designAlmost flatVoice and toneAffordanceDieter Rams’ 10 principles of good designVisual metaphorsDesk and library metaphorsApple’s design revolutionCriticism of Windows 8The flattening of designFlat design does not replace skeuomorphismhttp://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.htmlhttp://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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×