Post on 28-Jan-2015
description
transcript
Design Essentials for DevelopersImproving understanding, communication and collaboration
© 2011 EffectiveUI, Inc.
Why hello there.
RJ OwenSenior Software ArchitectEffectiveUI@rjowenrj.owen@effectiveui.com
Michael SalamonLead Experience ArchitectEffectiveUI@michael_salamonmichael.salamon@effectiveui.com
Tweeting our session?Use the hashtag: #effectiveui
© 2011 EffectiveUI, Inc.
Who are you?
© 2011 EffectiveUI, Inc.
Design Essentials for Developers
© 2011 EffectiveUI, Inc.
A common language
© 2011 EffectiveUI, Inc.
Developers do design already...
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
What we’re going to fit in today:
DesignResearch
InteractionDesign
Graphic
Design
© 2011 EffectiveUI, Inc.
Making intent visible and emotional.
DesignResearch
InteractionDesign
Graphic
Design
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
“Effective use of the Language of Form”
– Paul Rand
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
© 2011 EffectiveUI, Inc.
More than the sum of it’s parts.
© 2011 EffectiveUI, Inc. Emergence image from Wikipedia.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
Exposing intent through actions and feedback.
DesignResearch
InteractionDesign
Graphic
Design
© 2011 EffectiveUI, Inc.
Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
© 2011 EffectiveUI, Inc.
(Don Norman’s) Design Vocabulary
VisibilityAffordancesFeedbackMappingConstraintConsistency
© 2011 EffectiveUI, Inc.
Visibility
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
Affordance
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
Feedback
© 2011 EffectiveUI, Inc.http://www.flickr.com/photos/meganbarton/3023756556/
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.http://www.flickr.com/photos/docsearls/181012863/
Mapping
© 2011 EffectiveUI, Inc.
http://www.flickr.com/photos/docsearls/181012863/
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
Constraints(preventing errors before they can occur)
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
Consistency(in the way visual objects are used)
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
© 2011 EffectiveUI, Inc.
Defining, validating, and auditing an application’s intent.
DesignResearch
InteractionDesign
Graphic
Design
© 2011 EffectiveUI, Inc.
What is design research?
© 2011 EffectiveUI, Inc.
Research and the design process
© 2011 EffectiveUI, Inc.
Research and the development process
© 2011 EffectiveUI, Inc.
1. Analyze the design, you expert you.
© 2011 EffectiveUI, Inc.
2. Validate your hunches with quick user interviews.
© 2011 EffectiveUI, Inc.
How many people to interview?
Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
© 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
© 2011 EffectiveUI, Inc.
What to say? Where to go?
© 2011 EffectiveUI, Inc.
Demo
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
© 2011 EffectiveUI, Inc.
Analyze your results.Turn your results into findings.Summarize the findings in terms of a set of agreed-upon design heuristics.
© 2011 EffectiveUI, Inc.
In Conclusion…
© 2011 EffectiveUI, Inc.
Don’t disrespect your designers.
© 2011 EffectiveUI, Inc.
Do appreciate beautiful design: graphic, interactive, and otherwise.
© 2011 EffectiveUI, Inc.
Do validate hunches, and validate those with quick user interviews.
© 2011 EffectiveUI, Inc.
Don’t useComic Sans
© 2011 EffectiveUI, Inc.
DON’T USEYELLOW ON
WHITE
© 2011 EffectiveUI, Inc.
DON’T USEALL CAPS
WITH SCRIPTS
© 2011 EffectiveUI, Inc.
Don’t put Drop Shadows on EVERYTHING
Don’t put Drop Shadows on EVERYTHING
© 2011 EffectiveUI, Inc.
Don’t make the logo bigger.
© 2011 EffectiveUI, Inc.
Do feel empowered to design!
© 2011 EffectiveUI, Inc.
Thanks!(any questions?)
© 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 Resuce of Art - Twenty-six Essays
• http://www.slideshare.net/EveFife/humancentered-design-and-the-intersection-of-the-physical-and-digital-worlds?from=ss_embed
• http://imaginaryforces.com/featured/3/415