Ideas to Execution: (Mis)using Code for Prototypes

PowerPoint Presentation

Ideas to Execution: (Mis)using Code for PrototypesHeather Daggett@heatherndaggett

#GHC162016

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED 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)

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY

2

Why prototype?Determine usability, desirability, & feasibility before investing major effortProvoke product team with new ideasShow, dont tellExperiment, gain insights, fail fast & fail often


3

Why prototype with code?No limitations!Open source web development = giant prototyping toolboxEndless APIs, toolkits, StackOverflow tips, etc. that you can hack together to meet your prototype needsEasily flex from low to high fidelityFidelity = how closely the prototype resembles the final productNot just how it looks

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Endless tools what tools? Prototyping tools like - ill get into these later covwer a fewWhile not an endorsement, these are the tools we use...4

What youll learn todayThe 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!

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Explain misuse breaking the rules of proper coding you learn in computer science to bring ideas to life as quickly as possibleDont necessarily do things the right way the fast way

15

Before you prototype

What questions are you trying to answer?

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY High-fidelity prototype

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Lets say you make a high fi prototype of whats in your closet

Im making my Clueless closet app, and this is the first mockup I get feedback on. Why you dont go hi-fi too soon - adjust to design questions.

Hi-fi prototype: superficial feedback

High-fidelity prototype: superficial feedback

Beautiful!I love those icons

Can we use brighter hero image?

Can we make the photos bigger?

Whats with the striped shoes???

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY 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 voiceoverWhy closet app? Whats the benefit?

Low-fidelity prototype

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY To get general feedback on a concept, low-fidelity paper prototypes are great.

Low-fi prototype: functional feedback

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?

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY You get more feedback on how they would use the app, and anyone can contribute to the sketch

The fidelity of your prototype should match the fidelity of your thinking.

- Jared Spool

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY 6 dimensions of fidelityVisualContentBreadthDepthInteractionMotion

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Use numbering in titles where am i?

Tools include logos12

1. Visual fidelity (low)Bootsketch Bootstrap theme

Use images of sketches in place of componentsWithout code:Prototyping on Paper http://popapp.in


13

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

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED 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

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Visual lorem ipsum generator, bacon ipsum example chuck norris?15

3. Breadth (scope)Low breadth = only a few actions implementedConsider displaying a message when user clicks something that isnt implementedHigh breadth = most/all actions implementedUse events to add similar, yet distinct functionality to multiple actionsExample: 50 tax topics, pass the topic to the handler and use data binding to customize a placeholder page. Did you have {{ topic }} in 2015?

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED 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 users choice? Perform real calculations?Dont worry about validating inputs, unless you are testing the validation mechanism itself

Conditionals & calculations: code is always more flexible than any prototyping toolVariables and if statements (global variables!)Inline conditionals (AngularJS example)

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Depth = how robust is the prototype17

5. InteractionUse a JS library or find examples on Its probably been done before dont bother chaining pointer events like mouseup/mousedown/mousemove or touch events like touchstart/touchmove/touchend

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Pointer mouseup and mousedown chained together vs. library detecting swipe

jQuery mobile for widgets like drag & drop

18

6. MotionCSS transitions?GreenSock Animation Platform (GSAP)Sequenced timelinesWorks great with SVG (scalable vector graphics)License for commercial use Velocity.js is a free optionBonus: using code means you speak the same language as developers, preserving design intent

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Add visuals less detail or more visuals? Screen capture videoNo translation needed19

Experiment and find what works fastest for you!

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Link to something? Keep up to date.. Where Ill keep track of latest proto tools research if someone already has a list?20

Rate and review the session on our mobile app

Thank you

Feedback?Download at http://bit.ly/ghc16app or search GHC 16 in the app store

PAGE # | GRACE HOPPER CELEBRATION 2016 | #GHC16PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY 6 dimensions of fidelityVisualContentBreadthDepthInteractionMotion

LOWHIGH

Beginning stages(What should we build?)Finishing stages(How should we build it?)


Ideas to Execution: (Mis)using Code for Prototypes

Technology

Transcript of Ideas to Execution: (Mis)using Code for Prototypes