Your SlideShare is downloading. ×
Tyson Kallberg, Designing for Usability, WarmGun 2013
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tyson Kallberg, Designing for Usability, WarmGun 2013


Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. designing for usability five dimensions of prototyping fidelity - intro about me - overview: prototypes as designers, dimensions, examples
  • 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. 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. 5 dimensions of prototyping - new to me > but, good mental framework - this is like the good/fast/cheap triangle
  • 5. visual sketch of pixel-perfect mock? - simple, visual fidelity
  • 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. breadth how many use cases do you cover? - how many things can I do
  • 8. depth happy path, or all the edge cases? - validation errors, loading states, etc…
  • 9. data lorem ipsum or real data? - using real data -> better yet user’s data - most often overlooked
  • 10. full product - all the things caution that following examples are just ‘typical’
  • 11. paper - basic visuals - potential for good breadth - fast to get up and running
  • 12. motion after effects, quartz composer - animation tests, transitions - can be high on data/interactivity, typically is not
  • 13. click-through fireworks, invision, keynote - can be strong in many dimensions -> takes a lot of time
  • 14. examples - examples are of all very focused prototypes - solves problems faster than photoshop
  • 15. font prototype - needed to test fonts quickly in situ - fast html prototype - bare-bones implementation
  • 16. - image in the background, text is all html elements - simple controls at bottom to change fonts - easy to test new fonts
  • 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. *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. - ! 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. - 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. another balanced game
  • 22. a super back-and-forth game * note stripped out overtime in example*
  • 23. really lopsided game notice basic visual fidelity
  • 24. - brought through 30 or so games - noticed lots of different shapes * Story about playoff game at office *
  • 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. Old: 100+ assets + 2 colours Goal: 1-5 assets, 2 colours
  • 27. - used curves to extrapolate a palette from 2 colours
  • 28. - this was the final palette (also in QC), had to build prototype of screen
  • 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. - some logic in here about reverse text colour over different bgs
  • 31. - was able to hand over equations to devs after - app can be built out of 2 colours + 2 assets
  • 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. questions? @tysonkallberg