Tyson Kallberg, Designing for Usability, WarmGun 2013


Published on

Designing for Usability: Asana's 5 Dimensions of Prototyping Fidelity

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tyson Kallberg, Designing for Usability, WarmGun 2013

  1. 1. designing for usability five dimensions of prototyping fidelity - intro about me - overview: prototypes as designers, dimensions, examples
  2. 2. prototypes are like unicorns - prototypes are a lot like ‘the unicorn’ (designer-engineer hybrid) > next ‘big thing’ for the design process > idea better than reality - skill-set mismatch for most people * How many people can build something faster in code as they can in a graphics app?
  3. 3. so what about the rest of us? - take stock of your skill set find specific problems to prototype build a solution that is just as specific don’t get lost in the weeds best prototypes explore things ‘photoshop’ can’t
  4. 4. 5 dimensions of prototyping - new to me > but, good mental framework - this is like the good/fast/cheap triangle
  5. 5. visual sketch of pixel-perfect mock? - simple, visual fidelity
  6. 6. interaction click-through prototype or fully interactive? - granularity of interactions
 > do I tap on the screen anywhere and it advances vs. every button does what it should
  7. 7. breadth how many use cases do you cover? - how many things can I do
  8. 8. depth happy path, or all the edge cases? - validation errors, loading states, etc…
  9. 9. data lorem ipsum or real data? - using real data -> better yet user’s data - most often overlooked
  10. 10. full product - all the things caution that following examples are just ‘typical’
  11. 11. paper - basic visuals - potential for good breadth - fast to get up and running
  12. 12. motion after effects, quartz composer - animation tests, transitions - can be high on data/interactivity, typically is not
  13. 13. click-through fireworks, invision, keynote - can be strong in many dimensions -> takes a lot of time
  14. 14. examples - examples are of all very focused prototypes - solves problems faster than photoshop
  15. 15. font prototype - needed to test fonts quickly in situ - fast html prototype - bare-bones implementation
  16. 16. - image in the background, text is all html elements - simple controls at bottom to change fonts - easy to test new fonts
  17. 17. data visualization - background on problem: integrate infographics problems with most infographics (worse than tabular data, narrative) goal: focus on the narrative of the game (hockey!) use of QC > brought in feed data > used QC to ‘sketch’ visualizations numerous tests, but these are the interesting ones
  18. 18. *How many people know what Hockey is? *How many people have watched Hockey? *How many people care about Hockey? - x,y coords of plays - plays are coloured - notice rink - notice predictable locations of different plays - can be played out over-time - seen on websites today - noisy
  19. 19. - ! x axis: where play is on ice (side) y axis: time HRs are period breaks dot colour, again, playtype - common problem of all graphs, noise NOISE == everything looks the same
  20. 20. - stripped out ‘noisy’ plays - focused on shots + goals - x-axis: time - y-axis: shot differential > home shot == line goes up > away shot == line goes down - dots are goals, green home, red away *shape is what’s interesting*
  21. 21. another balanced game
  22. 22. a super back-and-forth game * note stripped out overtime in example*
  23. 23. really lopsided game notice basic visual fidelity
  24. 24. - brought through 30 or so games - noticed lots of different shapes * Story about playoff game at office *
  25. 25. colour system - problem: old white label app, required tons of assets, needed to reduce assets > needed to be flexible enough for dozens of brands - again built in quartz - used real data from brands
  26. 26. Old: 100+ assets + 2 colours Goal: 1-5 assets, 2 colours
  27. 27. - used curves to extrapolate a palette from 2 colours
  28. 28. - this was the final palette (also in QC), had to build prototype of screen
  29. 29. - built elements ‘natively’ in QC - allowed for quick tweaking of curves live with colours - allowed us to test edge cases like pure whites, blacks, same colours
  30. 30. - some logic in here about reverse text colour over different bgs
  31. 31. - was able to hand over equations to devs after - app can be built out of 2 colours + 2 assets
  32. 32. every prototype is different • don’t build more than you need • answer questions that aren’t easily
 solved with mockups • use the technique that fits the task
  33. 33. questions? @tysonkallberg
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.