0
designing for usability
five dimensions of prototyping fidelity

- intro about me
- overview: prototypes as designers, dim...
prototypes are like unicorns

- prototypes are a lot like ‘the unicorn’ (designer-engineer hybrid)

> next ‘big thing’ for...
so what about the rest of us?

-

take stock of your skill set
find specific problems to prototype
build a solution that is ...
5 dimensions of prototyping

- new to me

> but, good mental framework
- this is like the good/fast/cheap triangle
visual
sketch of pixel-perfect mock?

- simple, visual fidelity
interaction
click-through prototype or fully interactive?

- granularity of interactions


> do I tap on the screen anywhe...
breadth
how many use cases do you cover?

- how many things can I do
depth
happy path, or all the edge cases?

- validation errors, loading states, etc…
data
lorem ipsum or real data?

- using real data -> better yet user’s data
- most often overlooked
full product

- all the things
caution that following examples are just ‘typical’
paper

- basic visuals
- potential for good breadth
- fast to get up and running
motion
after effects, quartz composer

- animation tests, transitions
- can be high on data/interactivity, typically is no...
click-through
fireworks, invision, keynote

- can be strong in many dimensions -> takes a lot of time
examples

- examples are of all very focused prototypes
- solves problems faster than photoshop
font prototype

- needed to test fonts quickly in situ
- fast html prototype
- bare-bones implementation
- image in the background, text is all html elements
- simple controls at bottom to change fonts
- easy to test new fonts
data visualization



-

background on problem: integrate infographics
problems with most infographics (worse than tabular...
*How many people know what Hockey is? 
*How many people have watched Hockey?
*How many people care about Hockey?
- x,y coo...
-

!

x axis: where play is on ice (side)
y axis: time
HRs are period breaks
dot colour, again, playtype

- common problem...
- stripped out ‘noisy’ plays
- focused on shots + goals
- x-axis: time
- y-axis: shot differential

> home shot == line go...
another balanced game
a super back-and-forth game
* note stripped out overtime in example*
really lopsided game
notice basic visual fidelity
- brought through 30 or so games
- noticed lots of different shapes
* Story about playoff game at office *
colour system

- problem: old white label app, required tons of assets, needed to reduce assets

> needed to be flexible en...
Old: 100+ assets + 2 colours
Goal: 1-5 assets, 2 colours
- used curves to extrapolate a palette from 2 colours
- this was the final palette (also in QC), had to build prototype of screen
- built elements ‘natively’ in QC
- allowed for quick tweaking of curves live with colours
- allowed us to test edge cases...
- some logic in here about reverse text colour over different bgs
- was able to hand over equations to devs after
- app can be built out of 2 colours + 2 assets
every prototype is different
•

don’t build more than you need

•

answer questions that aren’t easily

solved with mockup...
questions?

@tysonkallberg
Tyson Kallberg, Designing for Usability, WarmGun 2013
Tyson Kallberg, Designing for Usability, WarmGun 2013
Tyson Kallberg, Designing for Usability, WarmGun 2013
Tyson Kallberg, Designing for Usability, WarmGun 2013
Upcoming SlideShare
Loading in...5
×

Tyson Kallberg, Designing for Usability, WarmGun 2013

1,303

Published on

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

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,303
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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.

×