Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ideas to Execution: (Mis)using Code for Prototypes

768 views

Published on

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.

Published in: Technology
  • Want to preview some of our plans? You can get 50 Woodworking Plans and a 440-Page "The Art of Woodworking" Book... Absolutely FREE ▲▲▲ http://ishbv.com/tedsplans/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get access to 16,000 woodworking plans, Download 50 FREE Plans... ♥♥♥ http://tinyurl.com/yy9yh8fu
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Ideas to Execution: (Mis)using Code for Prototypes

  1. 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. 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. 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. 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. 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. 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. 7. PAGE 7 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY High-fidelity prototype
  8. 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. 9. PAGE 9 | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Low-fidelity prototype
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×