Tips for talking about visual design for UX - ConveyUX

951 views
710 views

Published on

ConveyUX 2014 - Everyone wants to provide a great UX. Visual UI is part of that, but it is hard for teams to talk about. This presentation outlines familiar terms and simple approaches to talk about visual UI characteristics in a way that connects the visual to overall UX.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
951
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Tips for talking about visual design for UX - ConveyUX

  1. 1. Tips for talking about Visual design for UX Tania Schlatter
  2. 2. Graphic design background
  3. 3. Early dynamic web applications
  4. 4. Visual UI design gets done in a variety of ways – by the engineers ad-hoc
  5. 5. by committee heads in the clouds holy war
  6. 6. by designers psychic short-order cook “rock star”
  7. 7. I think better communication can help.
  8. 8. Tips from “Crucial Conversations” • Dialog is the essential ingredient • To have dialog, go from personal meanings to pool of shared meaning
  9. 9. Share ideas and opinions to develop a “pool of shared meaning”
  10. 10. Lack of shared meaning leads to arguing and debating http://fromtheeditr.blogspot.com/2012/08/water-polo-new-favorite-brutal-sport.html
  11. 11. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  12. 12. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  13. 13. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  14. 14. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  15. 15. Tips from “How to Talk so Kids will Listen & Listen so Kids will Talk” • Say what you see • Use few, straightforward words • Listen without judgement
  16. 16. State what you see to focus attention and response Reporting Not judging http://parade.condenast.com/224921/parade/kate-cronkite-reflects-on-watching-her-dad-walter-cronkiteannounce-jfks-assassination/ http://www.artofhustle.com/2011/05/can-we-tawk-joan-rivers-and-the-art-of-hustle/
  17. 17. Psychic short-order cook design Ad-hoc design “Rock star” design Holy war design Heads in the clouds design
  18. 18. Psychic short-order cook design Ad-hoc design “Rock star” design Holy war design Heads in the clouds design
  19. 19. 1. Identify what to talk about • Layout/position • Typography • Color • Imagery • Controls, SIGNIFIERS & motion
  20. 20. Art as TOOL for creating visual language & delivering the message • Layout/position • Typography • Color • Imagery • Controls, SIGNIFIERS & motion from Understanding Comics by Scott McCloud
  21. 21. Layout/position placement of elements in relation to one another
  22. 22. Typography design design design design DESIGN DESIGN typeface & fonts
  23. 23. Color choice of color and use
  24. 24. Imagery choice of imagery and use
  25. 25. Controls, SIGNIFIERS & movement choice of control, presentation of affordances (signifiers) & behavior
  26. 26. 2. Characterize
  27. 27. Characterize in 1 word?
  28. 28. Characterize in 1 word?
  29. 29. Measurement of perceived aesthetics • User perception consists of two main dimensions
  30. 30. Classical well organized clear clean symmetrical http://www.flickr.com/photos/edwardlangley/8318320976/
  31. 31. Expressive originality using special effects http://www.flickr.com/photos/wwarby/4790992757/
  32. 32. Strategic decisions about visual characteristics
  33. 33. Strategic decisions about visual characteristics Audience? Goals?
  34. 34. Strategic decisions about visual characteristics Audience? Appeal to all, express brand Goals? Appeal to few, express self
  35. 35. 3. Assess Vs.
  36. 36. Things appear / don’t appear as we expect (in)consistency
  37. 37. Important things do / don’t look important hierarchy / no hierarchy
  38. 38. Effective differentiation / not enough / too much personality
  39. 39. Dialog to share understanding & make informed decisions • Layout/position • Typography • Color • Imagery • Controls, SIGNIFIERS & motion audience business goals elements as “tools” characteristics principles
  40. 40. Clear communication internally will help lead to clear visual communication via UI identify characterize & say what you see with clear terms assess know the principles of good UI, and what is right for your users, app, and goals
  41. 41. Clear communication internally will help lead to clear visual communication via UI “It looks more important than the ‘buy now’ button.” “This orange button is different from the others.” identify characterize & say what you see with clear terms “It is more expressive because it is more important.” assess know the principles of good UI, and what is right for your users, app, and goals “Maybe it is too expressive.”
  42. 42. Thank you! I’d love to hear from you @taniaschlatter http://www.linkedin.com/in/taniaschlatter tania@nimblepartners.com

×