Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prototyping with the Browser Stack

commondream
October 08, 2011

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.

commondream

October 08, 2011
Tweet

More Decks by commondream

Other Decks in Design

Transcript

  1. A prototype is a quick and cheap implementation of an

    idea that helps you answer some questions.
  2. 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?
  3. 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
  4. As a developer I’m biased toward jumping right into the

    technology, and ignoring the people actually using what I’m making.
  5. Prototyping is about taking a step back, admitting that I

    don’t have all the answers, and working to find them.
  6. 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?
  7. <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
  8. Other great features: • Helper functions - factor out common

    code. • Speed - Faster than most JavaScript templating languages. • Precompilation - Even faster loading and execution.
  9. Change the URL var stateObj = { foo: "bar" };

    history.pushState(stateObj, "title", "new-url.html");
  10. 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?
  11. 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.
  12. 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.
  13. 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.
  14. Be a little tricky! Do they click through to see

    pricing? Do they click on the buy button?
  15. At the end of the day, this is about making

    a great product that your customers love to use.