Design Essentials for Developers 08.31.11
-
Upload
effectiveui -
Category
Technology
-
view
112 -
download
2
description
Transcript of Design Essentials for Developers 08.31.11
![Page 1: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/1.jpg)
Design Essentials for DevelopersImproving understanding, communication and collaboration
![Page 2: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/2.jpg)
© 2011 EffectiveUI, Inc.
Why hello there.
RJ OwenSenior Software [email protected]@effectiveui.com
Michael SalamonLead Experience ArchitectEffectiveUI@[email protected]
Tweeting our session?Use the hashtag: #effectiveui
![Page 3: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/3.jpg)
© 2011 EffectiveUI, Inc.
Who are you?
![Page 4: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/4.jpg)
© 2011 EffectiveUI, Inc.
Design Essentials for Developers
![Page 5: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/5.jpg)
© 2011 EffectiveUI, Inc.
A common language
![Page 6: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/6.jpg)
© 2011 EffectiveUI, Inc.
Developers do design already...
![Page 7: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/7.jpg)
© 2011 EffectiveUI, Inc.
![Page 8: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/8.jpg)
© 2011 EffectiveUI, Inc.
What we’re going to fit in today:
DesignResearch
InteractionDesign
Graphic
Design
![Page 9: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/9.jpg)
© 2011 EffectiveUI, Inc.
Making intent visible and emotional.
DesignResearch
InteractionDesign
Graphic
Design
![Page 10: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/10.jpg)
© 2011 EffectiveUI, Inc.
![Page 11: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/11.jpg)
© 2011 EffectiveUI, Inc.
“Effective use of the Language of Form”
– Paul Rand
![Page 12: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/12.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 13: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/13.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 14: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/14.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 15: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/15.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 16: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/16.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 17: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/17.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 18: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/18.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 19: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/19.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 20: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/20.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 21: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/21.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 22: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/22.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 23: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/23.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 24: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/24.jpg)
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
![Page 25: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/25.jpg)
© 2011 EffectiveUI, Inc.
More than the sum of its parts.
![Page 26: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/26.jpg)
© 2011 EffectiveUI, Inc. Emergence image from Wikipedia.
![Page 27: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/27.jpg)
© 2011 EffectiveUI, Inc.
![Page 28: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/28.jpg)
© 2011 EffectiveUI, Inc.
![Page 29: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/29.jpg)
© 2011 EffectiveUI, Inc.
![Page 30: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/30.jpg)
© 2011 EffectiveUI, Inc.
![Page 31: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/31.jpg)
© 2011 EffectiveUI, Inc.
![Page 32: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/32.jpg)
© 2011 EffectiveUI, Inc.
![Page 33: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/33.jpg)
© 2011 EffectiveUI, Inc.
![Page 34: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/34.jpg)
© 2011 EffectiveUI, Inc.
Exposing intent through actions and feedback.
DesignResearch
InteractionDesign
Graphic
Design
![Page 35: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/35.jpg)
© 2011 EffectiveUI, Inc.
Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
![Page 36: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/36.jpg)
© 2011 EffectiveUI, Inc.
(Don Norman’s) Design Vocabulary
VisibilityAffordancesFeedbackMappingConstraintConsistency
![Page 37: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/37.jpg)
© 2011 EffectiveUI, Inc.
Visibility
![Page 38: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/38.jpg)
© 2011 EffectiveUI, Inc.
![Page 39: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/39.jpg)
© 2011 EffectiveUI, Inc.
![Page 40: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/40.jpg)
© 2011 EffectiveUI, Inc.
![Page 41: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/41.jpg)
© 2011 EffectiveUI, Inc.
Affordance
![Page 42: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/42.jpg)
© 2011 EffectiveUI, Inc.
![Page 43: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/43.jpg)
© 2011 EffectiveUI, Inc.
![Page 44: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/44.jpg)
© 2011 EffectiveUI, Inc.
Feedback
![Page 45: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/45.jpg)
© 2011 EffectiveUI, Inc.http://www.flickr.com/photos/meganbarton/3023756556/
![Page 46: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/46.jpg)
© 2011 EffectiveUI, Inc.
![Page 47: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/47.jpg)
© 2011 EffectiveUI, Inc.
Mapping
![Page 48: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/48.jpg)
© 2011 EffectiveUI, Inc.
http://www.flickr.com/photos/docsearls/181012863/
![Page 49: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/49.jpg)
© 2011 EffectiveUI, Inc.
![Page 50: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/50.jpg)
© 2011 EffectiveUI, Inc.
Constraints(preventing errors before they can occur)
![Page 51: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/51.jpg)
© 2011 EffectiveUI, Inc.
![Page 52: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/52.jpg)
© 2011 EffectiveUI, Inc.
Consistency(in the way visual objects are used)
![Page 53: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/53.jpg)
© 2011 EffectiveUI, Inc.
![Page 54: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/54.jpg)
© 2011 EffectiveUI, Inc.
Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
![Page 55: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/55.jpg)
© 2011 EffectiveUI, Inc.
Defining, validating, and auditing an application’s intent.
DesignResearch
InteractionDesign
Graphic
Design
![Page 56: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/56.jpg)
© 2011 EffectiveUI, Inc.
What is design research?
![Page 57: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/57.jpg)
© 2011 EffectiveUI, Inc.
Generative research methods
informancecontextual inquiryshadowingdigital diariesetc.
![Page 58: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/58.jpg)
© 2011 EffectiveUI, Inc.
Evaluative research methods
hueristic analysisexpert reviewusability testingetc.
![Page 59: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/59.jpg)
© 2011 EffectiveUI, Inc.
Developers can do evaluative research to validate your hunches. We call this “expert review.”
![Page 60: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/60.jpg)
© 2011 EffectiveUI, Inc.
1. Analyze the design, you expert you.
Steps for Expert Review:
![Page 61: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/61.jpg)
© 2011 EffectiveUI, Inc.
2. Validate your hunches with quick user interviews.
![Page 62: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/62.jpg)
© 2011 EffectiveUI, Inc.
How many people to interview?
Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
![Page 63: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/63.jpg)
© 2011 EffectiveUI, Inc.
Who to interview?
http://good-times.webshots.com/photo/
http://www.kenrockwell.com/katie/2008.htm
http://wingstoafrica.com/mali-pictures-part-2.html
![Page 64: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/64.jpg)
© 2011 EffectiveUI, Inc.
What to say? Where to go?
![Page 65: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/65.jpg)
© 2011 EffectiveUI, Inc.
Demo
![Page 66: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/66.jpg)
© 2011 EffectiveUI, Inc.
![Page 67: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/67.jpg)
© 2011 EffectiveUI, Inc.
![Page 68: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/68.jpg)
© 2011 EffectiveUI, Inc.
Analyze your results.Turn your results into findings.Summarize the findings in terms of a set of agreed-upon design heuristics.
![Page 69: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/69.jpg)
© 2011 EffectiveUI, Inc.
In Conclusion…
![Page 70: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/70.jpg)
© 2011 EffectiveUI, Inc.
Don’t disrespect your designers.
![Page 71: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/71.jpg)
© 2011 EffectiveUI, Inc.
Do appreciate beautiful design: graphic, interactive, and otherwise.
![Page 72: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/72.jpg)
© 2011 EffectiveUI, Inc.
Do validate hunches, and validate those with quick user interviews.
![Page 73: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/73.jpg)
© 2011 EffectiveUI, Inc.
Don’t useComic Sans
![Page 74: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/74.jpg)
© 2011 EffectiveUI, Inc.
DON’T USEYELLOW ON
WHITE
![Page 75: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/75.jpg)
© 2011 EffectiveUI, Inc.
DON’T USEALL CAPS
WITH SCRIPTS
![Page 76: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/76.jpg)
© 2011 EffectiveUI, Inc.
Don’t put Drop Shadows on EVERYTHING
Don’t put Drop Shadows on EVERYTHING
![Page 77: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/77.jpg)
© 2011 EffectiveUI, Inc.
Don’t make the logo bigger.
![Page 78: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/78.jpg)
© 2011 EffectiveUI, Inc.
Do feel empowered to design!
![Page 79: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/79.jpg)
© 2011 EffectiveUI, Inc.
But you don’t have to take our word for it…
•Jakob Nielsen– Ten Usability Heuristics: http://www.useit.com/papers/heuristic/heuristic_list.html– Heuristic Evaluation: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
• Bill Buxton: Sketching User Experience Design• Donald Norman: The Design of Everyday Things• William Lidwell, Kritina Holden, Jill Butler: Universal Principles of Design• Robin Williams: The non-designers design book• Mental Modeling by Indi Young• Re-imagining the Design of Everyday Things (slideshare) • Stephen Few: Information Dashboard Design - The Effective Visual Communication of Data• Rudolf Arnheim: To the Rescue of Art - Twenty-six Essays
•Lindsay Moore and Austin Brown: Human Centered Design and the Intersection of Physical and Digital Worlds:http://www.slideshare.net/EveFife/humancentered-design-and-the-intersection-of-the-physical-and-digital-worlds?from=ss_embed
• Original Paul Rand video: http://imaginaryforces.com/featured/3/415
![Page 80: Design Essentials for Developers 08.31.11](https://reader035.fdocuments.us/reader035/viewer/2022081516/54c813d14a7959ee7a8b45a7/html5/thumbnails/80.jpg)
© 2011 EffectiveUI, Inc.
Thanks!(any questions?)