Ideas to Execution: (Mis)using Code for Prototypes
•Download as PPTX, PDF•
3 likes•1,179 views
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.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Ideas to Execution: (Mis)using Code for Prototypes
Similar to Ideas to Execution: (Mis)using Code for Prototypes (20)
More from Intuit Inc.
More from Intuit Inc. (20)
Recently uploaded
Recently uploaded (20)
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?