Prototyping with the Browser Stack

This presentation from FOWA 2011 covers how to use the browser stack, especially HTML5 technologies, to prototype new features and answer questions about ideas with single page prototypes.

Transcript

1. Prototyping with the Browser Stack
4. team .com
5. Thank you!
6. I am not a graphic designer.
7. But I do make decisions about our app every day.
8. A prototype is a quick and cheap implementation of an idea that helps you answer some questions.
9. Questions Like • Does my idea engage my users? Does it make them smile? • Are people actually interested in purchasing my product? • Does a particular feature add value, or just clutter, to my product?
10. Why prototype?
12. Apple would love us to believe it's all "Eureka." But Apple produces 10 pixel-perfect prototypes for each feature. They compete — and are winnowed down to three, then one, resulting in a highly evolved winner. Because Apple knows the more you compete inside, the less you'll have to compete outside. - Adrian Slywotsky Steve Jobs and the Eureka Myth Harvard Business Review http://bit.ly/hbr-eureka
13. As a developer I’m biased toward jumping right into the technology, and ignoring the people actually using what I’m making.
14. Prototyping is about taking a step back, admitting that I don’t have all the answers, and working to find them.
15. Maileron A different kind of success story. http://www.flickr.com/photos/horiavarlan/5285239068/
17. We started working on Maileron, and quickly realized we hated it.
18. We really lucked out.
19. How do we go about building a prototype in the browser?
20. A Practical Example Fast Video Switching for Think Vitamin Membership
22. Some Questions • Would using JavaScript to load the next video create a smoother experience? • Would providing more information at the end of a video help users transition between videos? • Should the next video play automatically? • Would users give us a rating at the end of a video if we made that available?
24. http://fast-browsing-prototype.heroku.com/
25. Database Routing and URLs Business Logic Views and Templates Typical App
26. MySQL Rails Router Models and Controllers ERb Rails App
27. JSON and HTML5 Local Storage HTML5 History API JavaScript Handlebars.js, Eco, jQuery Browser App
28. Many of these features require modern browsers.
29. Start with Save As... Or a good boilerplate
30. Templating: Handlebars.js http://handlebarsjs.com
31. <h1>{{header}}</h1> {{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}} Data { header: “Best Songs Evarrr!!!”, items: [{name: “You’ve lost that loving feeling”, url: “http://rdio.com/yltlf”}]} Template
32. Blocks {{#list}}...{{/list}}
33. Expressions {{value}}
34. Other great features: • Helper functions - factor out common code. • Speed - Faster than most JavaScript templating languages. • Precompilation - Even faster loading and execution.
37. Routing and URLs: HTML5 History API
38. Change the URL var stateObj = { foo: "bar" }; history.pushState(stateObj, "title", "new-url.html");
39. http://bit.ly/single-page
40. Monitor for URL Changes window.onpopstate = function(event) { showVideo(event.state.video); }
41. Monitor for URL Changes window.onpopstate = function(event) { if (document.location.pathname == “first-steps”) { showVideo(0); } }
42. HTML5 Local Storage The database key value store in your browser.
43. localStorage.getItem(“video-5-rating”); localStorage.setItem(“video-5-rating”, 5);
44. localStorage.getItem(“video-5-rating”); localStorage.setItem(“video-5-rating”, 5);
46. JSON and HTML5 Local Storage HTML5 History API JavaScript Handlebars.js, Eco, jQuery Browser App
47. How do we answer questions with a prototype?
48. Have some questions!
49. Questions we had: • Is it worth the effort? • Does it make people smile? • Do users like automatically jumping to the next video? • Do users end up rating the videos? • Does the end of video overlay cause any confusion? • Should we add keyboard shortcuts for play/pause and navigating videos? • Should the videos autoplay?
50. You probably won’t be able to answer all of your questions.
51. You know the answer to some questions
52. Find some people to test it on. Ideally in person, you’ll get more out of it.
53. Don’t worry about testing the “right” way.
55. http://usertesting.com Pay people to test your app.
56. Beg people to test it on Twitter
57. Question: What did you think of the next/previous button functionality? Answer: Was pleasantly surprised with the next previous buttons. 2 things on that however. I hit next before watching to the end of a video and when I went back to it it didn't save my spot. Also, the button outline looks degraded.
58. Question: What did you think of the rating overlay at the end of each video? Answer: The rating was good, and did give a rating but looking at the count down timer I felt like I had to rush and make a selection.
59. Question: Did you smile at all while testing out this prototype? What made you smile? Answer: The moving from video to video with the previous/next buttons. And Nick just always makes me smile. He is a great teacher.
60. http://www.flickr.com/photos/millermz/5003480644/ Data Collection Super Powers
61. Ask them to complete a survey Wufoo and Google Docs are great for this!
62. Analytics, Analytics, Analytics Google Analytics, Clicky, ClickTale
63. Be a little tricky! Do they click through to see pricing? Do they click on the buy button?
64. Did they smile? Did they come back after the test?
65. At the end of the day, this is about making a great product that your customers love to use.
66. Thank You • @commondream • http://commondream.net • alan@commondream.net • http://github.com/commondream