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.
4. 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
10. “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
20. 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:
21. DRAWING SOFTWARE IS LIKE A
SKETCHBOOK, BUT ON YOUR SCREEN.
OH!
Defining “software” with a metaphor:
23. 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.]
50. 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.
56. 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
64. 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
65. 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
66. LITTLE BIG DETAILS
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 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.
PORTRAIT LANDSCAPE
67. 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.
68. THANK YOU
CYNTHIA SAVARD SAUCIER
UX Designer, TP1
PATRICK WILLIAMS
Creative Director, TP1
@PATSVEK@CYNTHIASAVARD
69. Industrial design
Honest design
Almost flat
Consistent forms
Affordance
Smart metaphors
Microcopy
Traps
Skeuomorphism
Little big details
http://vimeo.com/42674279
http://vimeo.com/58022280
http://vimeo.com/11970647
http://vimeo.com/52584608
http://www.youtube.com/watch?v=kdTbHSQXGWo
http://vimeo.com/3860979
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/