Tweet
Tweet

Slide 1

Slide 1 text

Prototyping with the Browser Stack

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

team .com

Slide 5

Slide 5 text

Thank you!

Slide 6

Slide 6 text

I am not a graphic designer.

Slide 7

Slide 7 text

But I do make decisions about our app every day.

Slide 8

Slide 8 text

A prototype is a quick and cheap implementation of an idea that helps you answer some questions.

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

Why prototype?

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

As a developer I’m biased toward jumping right into the technology, and ignoring the people actually using what I’m making.

Slide 14

Slide 14 text

Prototyping is about taking a step back, admitting that I don’t have all the answers, and working to find them.

Slide 15

Slide 15 text

Maileron A different kind of success story. http://www.flickr.com/photos/horiavarlan/5285239068/

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

We started working on Maileron, and quickly realized we hated it.

Slide 18

Slide 18 text

We really lucked out.

Slide 19

Slide 19 text

How do we go about building a prototype in the browser?

Slide 20

Slide 20 text

A Practical Example Fast Video Switching for Think Vitamin Membership

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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?

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

http://fast-browsing-prototype.heroku.com/

Slide 25

Slide 25 text

Database Routing and URLs Business Logic Views and Templates Typical App

Slide 26

Slide 26 text

MySQL Rails Router Models and Controllers ERb Rails App

Slide 27

Slide 27 text

JSON and HTML5 Local Storage HTML5 History API JavaScript Handlebars.js, Eco, jQuery Browser App

Slide 28

Slide 28 text

Many of these features require modern browsers.

Slide 29

Slide 29 text

Start with Save As... Or a good boilerplate

Slide 30

Slide 30 text

Templating: Handlebars.js http://handlebarsjs.com

Slide 31

Slide 31 text

{{header}}

{{#items}} {{#first}}
  • {{name}}
    • {{/first}} {{#link}}
  • {{name}}
    • {{/link}} {{/items}} Data { header: “Best Songs Evarrr!!!”, items: [{name: “You’ve lost that loving feeling”, url: “http://rdio.com/yltlf”}]} Template

    Slide 32

    Slide 32 text

    Blocks {{#list}}...{{/list}}

    Slide 33

    Slide 33 text

    Expressions {{value}}

    Slide 34

    Slide 34 text

    Other great features: • Helper functions - factor out common code. • Speed - Faster than most JavaScript templating languages. • Precompilation - Even faster loading and execution.

    Slide 35

    Slide 35 text

    No content

    Slide 36

    Slide 36 text

    No content

    Slide 37

    Slide 37 text

    Routing and URLs: HTML5 History API

    Slide 38

    Slide 38 text

    Change the URL var stateObj = { foo: "bar" }; history.pushState(stateObj, "title", "new-url.html");

    Slide 39

    Slide 39 text

    http://bit.ly/single-page

    Slide 40

    Slide 40 text

    Monitor for URL Changes window.onpopstate = function(event) { showVideo(event.state.video); }

    Slide 41

    Slide 41 text

    Monitor for URL Changes window.onpopstate = function(event) { if (document.location.pathname == “first-steps”) { showVideo(0); } }

    Slide 42

    Slide 42 text

    HTML5 Local Storage The database key value store in your browser.

    Slide 43

    Slide 43 text

    localStorage.getItem(“video-5-rating”); localStorage.setItem(“video-5-rating”, 5);

    Slide 44

    Slide 44 text

    localStorage.getItem(“video-5-rating”); localStorage.setItem(“video-5-rating”, 5);

    Slide 45

    Slide 45 text

    No content

    Slide 46

    Slide 46 text

    JSON and HTML5 Local Storage HTML5 History API JavaScript Handlebars.js, Eco, jQuery Browser App

    Slide 47

    Slide 47 text

    How do we answer questions with a prototype?

    Slide 48

    Slide 48 text

    Have some questions!

    Slide 49

    Slide 49 text

    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?

    Slide 50

    Slide 50 text

    You probably won’t be able to answer all of your questions.

    Slide 51

    Slide 51 text

    You know the answer to some questions

    Slide 52

    Slide 52 text

    Find some people to test it on. Ideally in person, you’ll get more out of it.

    Slide 53

    Slide 53 text

    Don’t worry about testing the “right” way.

    Slide 54

    Slide 54 text

    No content

    Slide 55

    Slide 55 text

    http://usertesting.com Pay people to test your app.

    Slide 56

    Slide 56 text

    Beg people to test it on Twitter

    Slide 57

    Slide 57 text

    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.

    Slide 58

    Slide 58 text

    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.

    Slide 59

    Slide 59 text

    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.

    Slide 60

    Slide 60 text

    http://www.flickr.com/photos/millermz/5003480644/ Data Collection Super Powers

    Slide 61

    Slide 61 text

    Ask them to complete a survey Wufoo and Google Docs are great for this!

    Slide 62

    Slide 62 text

    Analytics, Analytics, Analytics Google Analytics, Clicky, ClickTale

    Slide 63

    Slide 63 text

    Be a little tricky! Do they click through to see pricing? Do they click on the buy button?

    Slide 64

    Slide 64 text

    Did they smile? Did they come back after the test?

    Slide 65

    Slide 65 text

    At the end of the day, this is about making a great product that your customers love to use.

    Slide 66

    Slide 66 text

    Thank You • @commondream • http://commondream.net • [email protected] • http://github.com/commondream