• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design, honesty and emotions
 

Design, honesty and emotions

on

  • 2,696 views

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. ...

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.

Statistics

Views

Total Views
2,696
Views on SlideShare
2,528
Embed Views
168

Actions

Likes
11
Downloads
61
Comments
0

3 Embeds 168

http://www.tp1.ca 158
http://www.pinterest.com 7
https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design, honesty and emotions Design, honesty and emotions Presentation Transcript

    • 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 understandable5. Is unobtrusive6. Is honest7. Is long-lasting8. Is thorough down to the last detail9. Is environmentally-friendly10. Is as little design as possible
    • 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 was essential to theobject made from the original material.”SKEUOMORPHISM
    • 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. THIS INCLUDES PROGRAMS, PROCEDURES,ALGORITHMS AND DOCUMENTATION, WHICH ARE STORED AS FILES IN MEMORY OR ON AHARD DRIVE...ZZZ...Defining “software” without a metaphor:
    • 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 which, although justified at the time, are no longer optimal orrational.]
    • 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. “Almost Flat”
    • 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. Respect the natural constraintsof the medium you’ve chosen.They can still be a source ofcreativity.4. Be careful to avoid pathdependence.
    • 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 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
    • 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 ]Québécois[ 7 ][ 12 ]VS
    • NEW METAPHORSMa bibliothèqueRomansBandesdessinéesCuisineDesigngraphiqueNouvelles[ 2 ][ 8 ] [ 3 ][ 1 ]Designintérieur[ 4 ]Québécois[ 7 ][ 12 ]
    • 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
    • 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
    • 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
    • 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.
    • THANK YOUCYNTHIA SAVARD SAUCIERUX Designer, TP1PATRICK WILLIAMSCreative Director, TP1@PATSVEK@CYNTHIASAVARD
    • 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/