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.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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