1. Design Essentials for Developers
Improving understanding, communication and collaboration

2. © 2011 EffectiveUI, Inc.
Why
hello
there.
RJ Owen
Senior Software Architect
EffectiveUI
@rjowen
rj.owen@effectiveui.com
Michael Salamon
Lead Experience Architect
EffectiveUI
@michael_salamon
michael.salamon@effectiveui.com
Tweeting our session?
Use the hashtag: #effectiveui

3. © 2011 EffectiveUI, Inc.
Who are you?

4. © 2011 EffectiveUI, Inc.
Design Essentials for Developers

5. © 2011 EffectiveUI, Inc.
A common language

6. © 2011 EffectiveUI, Inc.
Developers do design already...

7. © 2011 EffectiveUI, Inc.

8. © 2011 EffectiveUI, Inc.
What we’re going to fit in today:
Design
Research
Interaction
Design
Graphic
Design

9. © 2011 EffectiveUI, Inc.
Making intent visible and emotional.
Design
Research
Interaction
Design
Graphic
Design

10. © 2011 EffectiveUI, Inc.

11. © 2011 EffectiveUI, Inc.
“Effective use of the Language of
Form”
– Paul Rand

12. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

13. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

14. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

15. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

16. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

17. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

18. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

19. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

20. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

21. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

22. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

23. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

24. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.

25. © 2011 EffectiveUI, Inc.
More than the sum of it’s parts.

26. © 2011 EffectiveUI, Inc. Emergence image from Wikipedia.

27. © 2011 EffectiveUI, Inc.

28. © 2011 EffectiveUI, Inc.

29. © 2011 EffectiveUI, Inc.

30. © 2011 EffectiveUI, Inc.

31. © 2011 EffectiveUI, Inc.

32. © 2011 EffectiveUI, Inc.

33. © 2011 EffectiveUI, Inc.
Exposing intent through actions and feedback.
Design
Research
Interaction
Design
Graphic
Design

34. © 2011 EffectiveUI, Inc.
Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg

35. © 2011 EffectiveUI, Inc.
(Don Norman’s) Design Vocabulary
Visibility
Affordances
Feedback
Mapping
Constraint
Consistency

36. © 2011 EffectiveUI, Inc.
Visibility

37. © 2011 EffectiveUI, Inc.

38. © 2011 EffectiveUI, Inc.

39. © 2011 EffectiveUI, Inc.

40. © 2011 EffectiveUI, Inc.
Affordance

41. © 2011 EffectiveUI, Inc.

42. © 2011 EffectiveUI, Inc.

43. © 2011 EffectiveUI, Inc.
Feedback

44. © 2011 EffectiveUI, Inc.http://www.flickr.com/photos/meganbarton/3023756556/

45. © 2011 EffectiveUI, Inc.

46. © 2011 EffectiveUI, Inc.
http://www.flickr.com/photos/docsearls/181012863/
Mapping

47. © 2011 EffectiveUI, Inc.
http://www.flickr.com/photos/docsearls/181012863/

48. © 2011 EffectiveUI, Inc.

49. © 2011 EffectiveUI, Inc.
Constraints
(preventing errors before they can occur)

50. © 2011 EffectiveUI, Inc.

51. © 2011 EffectiveUI, Inc.
Consistency
(in the way visual objects are used)

52. © 2011 EffectiveUI, Inc.

53. © 2011 EffectiveUI, Inc.
Interactive elements should be visible,
recognizable, reactive (feedback), safe,
and consistent.

54. © 2011 EffectiveUI, Inc.
Defining, validating, and auditing
an application’s intent.
Design
Research
Interaction
Design
Graphic
Design

55. © 2011 EffectiveUI, Inc.
What is design research?

56. © 2011 EffectiveUI, Inc.
Research and the design process

57. © 2011 EffectiveUI, Inc.
Research and the development
process

58. © 2011 EffectiveUI, Inc.
1. Analyze the design, you expert you.

59. © 2011 EffectiveUI, Inc.
2. Validate your hunches with quick user
interviews.

60. © 2011 EffectiveUI, Inc.
How many people
to interview?
Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html

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

62. © 2011 EffectiveUI, Inc.
What to say? Where to go?

63. © 2011 EffectiveUI, Inc.
Demo

64. © 2011 EffectiveUI, Inc.

65. © 2011 EffectiveUI, Inc.

66. © 2011 EffectiveUI, Inc.
Analyze your results.
Turn your results into findings.
Summarize the findings in terms of
a set of agreed-upon design heuristics.

67. © 2011 EffectiveUI, Inc.
In Conclusion…

68. © 2011 EffectiveUI, Inc.
Don’t disrespect your designers.

69. © 2011 EffectiveUI, Inc.
Do appreciate beautiful design:
graphic, interactive, and otherwise.

70. © 2011 EffectiveUI, Inc.
Do validate hunches, and validate those with
quick user interviews.

71. © 2011 EffectiveUI, Inc.
Don’t use
Comic Sans

72. © 2011 EffectiveUI, Inc.
DON’T USE
YELLOW ON
WHITE

73. © 2011 EffectiveUI, Inc.
DON’T USE
ALL CAPS
WITH SCRIPTS

74. © 2011 EffectiveUI, Inc.
Don’t put Drop
Shadows on
EVERYTHING

75. © 2011 EffectiveUI, Inc.
Don’t make the logo bigger.

76. © 2011 EffectiveUI, Inc.
Do feel empowered to design!

77. © 2011 EffectiveUI, Inc.
Thanks!
(any questions?)

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