We're Doing It Wrong: Prototyping the Future of the Web

Slide 1

Slide 1 text

We’re Doing It Wrong Prototyping the Future of the Web Steve Hickey — @stevehickeydsgn UX Designer & Developer at Fresh Tilled Soil

Slide 2

Slide 2 text

Requirements Research Ideate Design Code Launch A brief “reminder” of waterfall.

Slide 3

Slide 3 text

Plan Design Develop Test Build Measure Learn What about agile or lean?

Slide 4

Slide 4 text

¡Mentirosos! (Liars!)

Slide 5

Slide 5 text

The traditional point of ﬁrst contact... Requirements Research Ideate Design Code Launch

Slide 6

Slide 6 text

“D t!” **** ... and its result.

Slide 7

Slide 7 text

But it’s ok. We can ﬁx that. Research/Understand Ideate Design Code Test and repeat... & Design & Code & Ideate & Code & Ideate & Design

Slide 8

Slide 8 text

Step 1 → Step 2 → Step 3 → Step 4 = Very Pretty BULLSHIT

Slide 9

Slide 9 text

“Design is not just what it looks like and feels like. Design is how it works.” Today’s obligatory Steve Jobs quote.

Slide 10

Slide 10 text

“Form ever follows function.” A grating reminder of something we all claim to know, from architect Louis Sullivan.

Slide 11

Slide 11 text

Understanding the problem.

Slide 12

Slide 12 text

Ideation through sketching.

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

“Great is the enemy of good.” Paraphrased from Voltaire, an enlightened dude.

Slide 15

Slide 15 text

Wireframes. Or are they...

Slide 16

Slide 16 text

Wireframes. Or are they...

Slide 17

Slide 17 text

Testable. ASAP.

Slide 18

Slide 18 text

Sketches are prototypes in waiting.

Slide 19

Slide 19 text

prototyping on paper

Slide 20

Slide 20 text

The usual suspects: Balsamiq Axure InDesign Keynote PowerPoint

Slide 21

Slide 21 text

Try a storyboarding app. Briefs Flinto Proto.io

Slide 22

Slide 22 text

HTML/CSS/JS

Slide 23

Slide 23 text

Developers need love too.

Slide 24

Slide 24 text

Fake it. localStorage.setItem(‘username’, ‘Gary’); var username = localStorage.getItem(‘username’); $(‘div.userinfo’).prepend(‘

’ + username + ‘

’); =======================================================

Gary

Slide 25

Slide 25 text

Make your client fall in love.

Slide 26

Slide 26 text

Time to test.

Slide 27

Slide 27 text

“OK, but what about design?”

Slide 28

Slide 28 text

Mockups = Useless

Slide 29

Slide 29 text

Try zooming your comps out.

Slide 30

Slide 30 text

Style tiles use time eﬃciently.

Slide 31

Slide 31 text

Design in the browser.

Slide 32

Slide 32 text

Use the right tool for the job.

Slide 33

Slide 33 text

Let’s see some examples:

Slide 34

Slide 34 text

Google Glass

Slide 35

Slide 35 text

“We were working with the HUD literally on my ﬁrst day at work. And learning a tremendous number of things that you couldn’t possibly just guess or estimate, or print out on a spreadsheet, or a project map, and that sort of thing.” Tom Chi, Google

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

“Your ears can take a lot more weight than your nose… So if you can create a system where the ear becomes a fulcrum, then the perceptual weight disappears. This took me about two hours to ﬁgure out.” Tom Chi, Google

Slide 38

Slide 38 text

Incantor

Slide 39

Slide 39 text

Our ﬁrst prototype.

Slide 40

Slide 40 text

Look, I’m no Olivander. Ok?

Slide 41

Slide 41 text

Here’s how we overcame my lack of magic.

Slide 42

Slide 42 text

We made the nav work without looking.

Slide 43

Slide 43 text

Let’s wrap up.

Slide 44

Slide 44 text

1) Sketch a lot, it’s quick and eﬃcient. 2) Stop wireframing, start prototyping. 3) Test early and often. 4) Avoid comps for every screen and state. 5) Eliminate redundant parts of your workﬂow. 6) Process is not a straight line.

Slide 45

Slide 45 text

Thanks!