The document discusses more effective approaches to designing and prototyping user interfaces. It advocates sketching early ideas, prototyping functionality quickly through coding, and testing prototypes with users from the start. Specific tips include sketching often for efficiency, prototyping instead of wireframing to allow for early testing, avoiding creating comprehensive visual comps, and eliminating redundant steps from traditional design processes. The document shares examples from companies like Google that employed rapid prototyping and testing to help inform their design of new products like Google Glass.

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

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

3. Plan
Design
Develop
Test
Build
MeasureLearn
What about agile or lean?

4. ¡Mentirosos!
(Liars!)

5. The traditional point of first contact...
Requirements
Research
Ideate
Design
Code
Launch

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

7. But it’s ok. We can fix that.
Research/Understand Ideate Design
CodeTest
and repeat...
& Design & Code & Ideate & Code
& Ideate & Design

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

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

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

11. Understanding the problem.

12. Ideation through sketching.

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

15. Wireframes. Or are they...

16. Wireframes. Or are they...

17. Testable. ASAP.

18. Sketches are prototypes in waiting.

19. prototyping on paper

20. The usual suspects:
Balsamiq Axure InDesign Keynote PowerPoint

21. Try a storyboarding app.
Briefs Flinto Proto.io

22. HTML/CSS/JS

23. Developers need love too.

24. Fake it.
localStorage.setItem(‘username’, ‘Gary’);
var username = localStorage.getItem(‘username’);
$(‘div.userinfo’).prepend(‘<h2>’ + username + ‘</h2>’);
=======================================================
<h2>Gary</h2>

25. Make your client fall in love.

26. Time to test.

27. “OK, but what about design?”

28. Mockups = Useless

29. Try zooming your comps out.

30. Style tiles use time efficiently.

31. Design in the browser.

32. Use the right tool for the job.

33. Let’s see some examples:

34. Google Glass

35. “We were working with the HUD literally on my first 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

37. “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 figure out.”
Tom Chi, Google

38. Incantor

39. Our first prototype.

40. Look, I’m no Olivander. Ok?

41. Here’s how we overcame my lack of magic.

42. We made the nav work without looking.

43. Let’s wrap up.

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

45. Thanks!