• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design Essentials for Developers 08.31.11
 

Design Essentials for Developers 08.31.11

on

  • 1,470 views

To help designers communicate more effectively with each other and provide a vocabulary for clear and productive UX feedback.

To help designers communicate more effectively with each other and provide a vocabulary for clear and productive UX feedback.

Statistics

Views

Total Views
1,470
Views on SlideShare
1,470
Embed Views
0

Actions

Likes
4
Downloads
30
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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
  • Video here?

Design Essentials for Developers 08.31.11 Design Essentials for Developers 08.31.11 Presentation Transcript

  • Design Essentials for Developers
    • Improving understanding, communication and collaboration
  • Why hello there.
    • RJ Owen
    • Senior Software Architect
    • EffectiveUI
    • @rjowen
    • [email_address]
    Michael Salamon Lead Experience Architect EffectiveUI @michael_salamon [email_address] Tweeting our session? Use the hashtag: #effectiveui
  • Who are you?
  • Design Essentials for Developers
  • A common language
  • Developers do design already...
  •  
  • What we’re going to fit in today: Design Research Interaction Design Graphic Design
  • Making intent visible and emotional. Design Research Interaction Design Graphic Design
  •  
  • “ Effective use of the Language of Form” – Paul Rand
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imagin ary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • Images from “Paul Rand Retrospective” by Imaginary Forces.
  • More than the sum of its parts.
  • Emergence image from Wikipedia.
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • Exposing intent through actions and feedback. Design Research Interaction Design Graphic Design
  • Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
  • (Don Norman ’s) Design Vocabulary
    • Visibility
    • Affordances
    • Feedback
    • Mapping
    • Constraint
    • Consistency
  • Visibility
  •  
  •  
  •  
  • Affordance
  •  
  •  
  • Feedback
  • http://www.flickr.com/photos/meganbarton/3023756556/
  •  
  • Mapping
  • http://www.flickr.com/photos/docsearls/181012863/
  •  
  • Constraints (preventing errors before they can occur)
  •  
  • Consistency (in the way visual objects are used)
  •  
    • Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
  • Defining, validating, and auditing an application’s intent. Design Research Interaction Design Graphic Design
  • What is design research?
  • Generative research methods informance contextual inquiry shadowing digital diaries etc.
  • Evaluative research methods hueristic analysis expert review usability testing etc.
  • Developers can do evaluative research to validate your hunches. We call this “expert review.”
  • 1. Analyze the design, you expert you. Steps for Expert Review:
  • 2. Validate your hunches with quick user interviews.
  • How many people to interview?
      • Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
  • Who to interview? http://good-times.webshots.com/photo/ http://www.kenrockwell.com/katie/2008.htm http://wingstoafrica.com/mali-pictures-part-2.html
  • What to say? Where to go?
  • Demo
  •  
  •  
  • Analyze your results.
    • Turn your results into findings.
    • Summarize the findings in terms of a set of agreed-upon design heuristics.
  • In Conclusion…
  • Don ’t disrespect your designers.
  • Do appreciate beautiful design: graphic, interactive, and otherwise.
  • Do validate hunches, and validate those with quick user interviews.
  • Don ’t use Comic Sans
  • DON ’T USE YELLOW ON WHITE
  • DON ’T USE ALL CAPS WITH SCRIPTS
  • Don’t put Drop Shadows on EVERYTHING
  • Don ’t make the logo bigger.
  • Do feel empowered to design!
  • 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
  • Thanks! (any questions?)