Heather Daggett discusses the fastest & most effective ways to (mis)use code for prototypes, from initial ideation to refinement & execution at the Grace Hopper Conference 2016.
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Ideas to Execution: (Mis)using Code for Prototypes
1. PAGE 1 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
#GHC16
2016Ideas to Execution: (Mis)using
Code for Prototypes
Heather Daggett
@heatherndaggett
2. PAGE 2 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
What is a prototype?
A prototype is whatever it takes to bring an idea to life
as quickly as possible.
Tom Chi, Rapid Prototyping (YouTube)
3. PAGE 3 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
Why prototype?
• Determine usability, desirability, & feasibility
before investing major effort
• Provoke product team with new ideas
• Show, don’t tell
• Experiment, gain insights, fail fast & fail often
4. PAGE 4 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
Why prototype… with code?
• No limitations!
• Open source web development = giant prototyping
toolbox
• Endless APIs, toolkits, StackOverflow tips, etc. that you can
hack together to meet your prototype needs
• Easily flex from low to high fidelity
• Fidelity = how closely the prototype resembles the final
product
• Not just how it looks
5. PAGE 5 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
What you’ll learn today
The fastest & most effective ways to (mis)use code for
prototypes, from initial ideation to refinement &
execution.
Global variables are OK!
Copying & pasting code is OK!
6. PAGE 6 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
Before you
prototype…
What questions are
you trying to
answer?
7. PAGE 7 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
High-fidelity prototype
8. PAGE 8 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
High-fidelity prototype: superficial feedback
Beautiful!
I love those
icons
Can we use
brighter hero
image?
Can we make
the photos
bigger?
What’s with the
striped
shoes???
9. PAGE 9 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
Low-fidelity prototype
10. PAGE 10 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
Low-fidelity prototype: functional feedback
Can I see if I
wore it
already?
Could I pin this
outfit?
Can I save
outfits?
How can I show
only my favorite
outfits?
11. PAGE 11 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
“The fidelity of your
prototype should
match the fidelity
of your thinking.”
- Jared Spool
12. PAGE 12 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
6 dimensions of fidelity
1. Visual
2. Content
3. Breadth
4. Depth
5. Interaction
6. Motion
13. PAGE 13 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
1. Visual fidelity (low)
“Bootsketch”
Bootstrap theme
Use images of
sketches in place
of components
Without code:
Prototyping on Paper
http://popapp.in
14. PAGE 14 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
1. Visual fidelity (high)
Use Chrome to
inspect & copy
styles from
production code
(Right-click >
Inspect)
Use a CSS
framework like
Bootstrap,
Foundation, or
Skeleton
15. PAGE 15 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
2. Content fidelity
Use “lorem ipsum”
generators for testing
layouts independent of
content
Bacon ipsum dolor sit amet salami ham
hock ham, hamburger corned beef short
ribs kielbasa biltong t-bone drumstick
tri-tip tail sirloin pork chop.
For longer lists, use JSON
arrays to avoid headaches
later
16. PAGE 16 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
3. Breadth (scope)
• Low breadth = only a few actions
implemented
• Consider displaying a message
when user clicks something that
isn’t implemented
• High breadth = most/all actions
implemented
• Use events to add similar, yet
distinct functionality to multiple
actions
— Example: 50 tax topics, pass the topic
to the handler and use data binding to
customize a placeholder page. “Did
you have {{ topic }} in 2015?”
17. PAGE 17 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
4. Depth (logic)
• Do you validate
inputs?Present a different
response based on the
user’s choice? Perform
real calculations?
Don’t worry about validating
inputs, unless you are testing the
validation mechanism itself
• Conditionals & calculations: code is always more
flexible than any prototyping tool
• Variables and if statements (global variables!)
• Inline conditionals (AngularJS example)
18. PAGE 18 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
5. Interaction
• Use a JS library or find examples on
• It’s probably been done before – don’t bother chaining
pointer events like mouseup/mousedown/mousemove or
touch events like touchstart/touchmove/touchend
19. PAGE 19 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
6. Motion
• CSS transitions?
• GreenSock Animation Platform
(GSAP)
• Sequenced timelines
• Works great with SVG (scalable vector
graphics)
• License for commercial use – Velocity.js
is a free option
• Bonus: using code means you speak
the same language as developers,
preserving design intent
20. PAGE 20 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
Experiment and
find what works
fastest for you!
21. PAGE 21 | GRACE HOPPER CELEBRATION 2016 | #GHC16
PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
Thank you
Feedback?
Download at http://bit.ly/ghc16app
or search GHC 16 in the app store
Rate and review the session
on our mobile app
Editor's Notes
Endless tools – what tools? Prototyping tools like… - i’ll get into these later covwer a few
While not an endorsement, these are the tools we use...
Explain misuse – breaking the rules of “proper” coding you learn in computer science to bring ideas to life as quickly as possible
Don’t necessarily do things the “right way” – the “fast way”
1
Let’s say you make a high fi prototype of whats in your closet
I’m making my Clueless closet app, and this is the first mockup I get feedback on. Why you don’t go hi-fi too soon - adjust to design questions.
Hi-fi prototype: superficial feedback
More about visual affordances and less about interactions. The feedback tends to be superficial, since it looks too polished and seems like so much work is already done and decided. This should be the last step.
Too early
The hazards of hi fi… if on slideshare without voiceover
Why closet app? Whats the benefit?
To get general feedback on a concept, low-fidelity paper prototypes are great.
Low-fi prototype: functional feedback
You get more feedback on how they would use the app, and anyone can contribute to the sketch
Use numbering in titles – where am i?
Tools – include logos
Visual – lorem ipsum generator, bacon ipsum example chuck norris?
Depth = how robust is the prototype
Pointer – mouseup and mousedown chained together vs. library detecting swipe
jQuery mobile for widgets like drag & drop
Add visuals – less detail or more visuals? Screen capture video
No translation needed
Link to something? Keep up to date.. Where I’ll keep track of latest proto tools… research if someone already has a list?