Tips for talking about visual design for UX - ConveyUX

  • 438 views
Uploaded 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 …

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
438
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
4
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Tips for talking about Visual design for UX Tania Schlatter
  • 2. Graphic design background
  • 3. Early dynamic web applications
  • 4. Visual UI design gets done in a variety of ways – by the engineers ad-hoc
  • 5. by committee heads in the clouds holy war
  • 6. by designers psychic short-order cook “rock star”
  • 7. I think better communication can help.
  • 8. Tips from “Crucial Conversations” • Dialog is the essential ingredient • To have dialog, go from personal meanings to pool of shared meaning
  • 9. Share ideas and opinions to develop a “pool of shared meaning”
  • 10. Lack of shared meaning leads to arguing and debating http://fromtheeditr.blogspot.com/2012/08/water-polo-new-favorite-brutal-sport.html
  • 11. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  • 12. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  • 13. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  • 14. Psychic short-order cook design Ad-hoc design “Rock star” design Heads in the clouds design Holy war design
  • 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. 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. Psychic short-order cook design Ad-hoc design “Rock star” design Holy war design Heads in the clouds design
  • 18. Psychic short-order cook design Ad-hoc design “Rock star” design Holy war design Heads in the clouds design
  • 19. 1. Identify what to talk about • Layout/position • Typography • Color • Imagery • Controls, SIGNIFIERS & motion
  • 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. Layout/position placement of elements in relation to one another
  • 22. Typography design design design design DESIGN DESIGN typeface & fonts
  • 23. Color choice of color and use
  • 24. Imagery choice of imagery and use
  • 25. Controls, SIGNIFIERS & movement choice of control, presentation of affordances (signifiers) & behavior
  • 26. 2. Characterize
  • 27. Characterize in 1 word?
  • 28. Characterize in 1 word?
  • 29. Measurement of perceived aesthetics • User perception consists of two main dimensions
  • 30. Classical well organized clear clean symmetrical http://www.flickr.com/photos/edwardlangley/8318320976/
  • 31. Expressive originality using special effects http://www.flickr.com/photos/wwarby/4790992757/
  • 32. Strategic decisions about visual characteristics
  • 33. Strategic decisions about visual characteristics Audience? Goals?
  • 34. Strategic decisions about visual characteristics Audience? Appeal to all, express brand Goals? Appeal to few, express self
  • 35. 3. Assess Vs.
  • 36. Things appear / don’t appear as we expect (in)consistency
  • 37. Important things do / don’t look important hierarchy / no hierarchy
  • 38. Effective differentiation / not enough / too much personality
  • 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. 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. 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. Thank you! I’d love to hear from you @taniaschlatter http://www.linkedin.com/in/taniaschlatter tania@nimblepartners.com