Tag Archives: design

Paper prototyping: A primer

Credit: Flickr user Samuel Mann

Credit: Flickr user Samuel Mann

Many great designs, products, websites and projects begin with paper.

And your ideas should begin with paper too.

Yes, it’s nice to start building a website or multimedia project and just see where it goes, but starting with rapid prototyping can help weed out bad ideas or help improve good ideas that are hampered by poor implementation. With paper prototyping, a rapid prototyping tool, anyone can make a prototype of an interactive design.

If a project can’t survive the paper prototyping stage, it almost assuredly would not be a good product once built. Paper prototyping saves money and time. And paper prototyping, as opposed to just making static mockups with paper or Photoshop, allows real users to test your website long before you get to the Photoshop and eventual programming stages.

Paper prototyping is also a way that non-designers and non-technical people can be involved in the design and development process. A lot of people have great ideas, but they can’t build the final product. But not everyone needs to be able to build the final product.

Bringing more people into the design and development process leads to better products. Innovation should not be the province of a small group of people, and paper prototyping can help democratize design, development and R&D.

A little background: Paper prototyping is a popular tool in the human-computer interaction field and became popular when major tech companies began adopting the technique. Now it is a tool you see throughout companies of all different sizes.

Paper prototyping is a user-centered design method. User-centered design involves users in the design process and can help lead to products that users prefer. User-centered design, however, is not about asking users what they want and expecting them to be designers, but rather it is about involving them in the design process and getting feedback.

Henry Ford is quoted as saying, probably apocryphally, “If I had asked people what they wanted, they would have said faster horses.” People at that time didn’t know they wanted an automobile; they just knew they wanted faster and easier ways to get around.

That’s the essence of user-centered design and usability testing. We observe people using our designs, interview them, give them surveys and use our expertise to figure out designs that meet those needs. We’re not asking people to design their own products.

Fast, cheap and early user testing

You can never do enough user testing, and user testing gets more expensive the later in the design and development process. User testing is best done throughout the entire design and development process, but you should get started early. Getting users in early can help avoid major mistakes that take a lot of time and money to fix later. Or, worse, major mistakes that never get fixed that mar a product forever.

Wait until your new website is built to test it with users? User testing will take time and cost a lot of money and it may be difficult to make substantive changes. If you wait that long you may build in serious usability issues that may never get fixed.

Imagine you spent months building a new website and you are already over budget once the website launches. You didn’t do any user testing before it launched. Well, where is the money going to come from to make fixes to the website? Building in user testing from the beginning will save you money and ensure that major mistakes are avoided. Start with paper prototyping.

Conducting user testing with paper costs very little money and can lead to changes that make the final product much better. Need to totally rethink your website navigation system? It’s a lot easier to do that with paper than with a live website with complex code to rework.

The biggest thing you are testing with a paper prototype is interaction design. What happens when a user clicks on that button on your website? How does a user find and buy a book on your online bookstore? How does a person sign up for your newsletter?

Wait, how can paper simulate interaction design?

How do you simulate the experience of using a website with paper? There is no keyboard, mouse or trackpad. One of the designers of a paper prototype serves as the computer and responds to user taps. Below you’ll see some videos where people are acting as the computer during a paper prototype usability test.

A user taps a link with her finger, and computer person places a new piece of paper to simulate navigating to a new part of the website. This can also be used to simulate JavaScript popovers.

The video below shows a paper prototype for a blood testing kiosk. Paper prototyping doesn’t just have to be used for websites and multimedia features, but that is the way most of you will end up using paper prototyping. The test below shows how several people used this prototype and includes an interview portion at the end with users about their experiences.

I like that the testers even gave the test takers a credit card to use to further make this prototype seem realistic. You’ll notice that several users were tested for this prototype, and it’s highly recommended that designers test their prototypes with several potential users. How many tests is enough?

If the first usability test with a user shows a show-stopping bug, stop testing and fix that with your paper prototype first.  There is no sense in testing an obviously broken design again. But let’s say your prototype generally works and you’re looking for ways to improve and iterate your design. I’d go with at least three users.

You might be thinking, why not 10, 20 or more? This should not be the only time you are testing your design. You’ll want to save some of those users for future iterations of your prototype, especially as you work your way up to medium and high fidelity prototypes. If you have a large pool of testers for every phase of your design, going with 5-10 each time would most likely be more illuminating.

This video shows the most impressive paper prototype I have ever seen. It’s a paper prototype for Hanmail.net, a Web mail service. Paper can simulate fairly complex user interfaces and interaction methods.

The photo below is a high-fidelity prototype of a mobile news site that I built with HTML, CSS and JavaScript. It started off as a sketch and went on to higher fidelity prototypes along the way. I user tested each step along the way from paper to the high-fidelity prototype. Because of the user testing I’ve done along the way, I feel confident that if it were to launch as a product, it wouldn’t have major usability issues.

That doesn’t mean I wouldn’t need to do additional usability testing, but rather my testing could be focused on improving an already solid design, rather than fixing a troubled one.


 The (basic) tools of paper prototyping

  • White printer paper
  • Pens
  • Markers
  • Glue sticks
  • Clear tape
  • Construction paper
  • Post-it notes (various sizes can be handy, but not required)
  • Tab dividers (make excellent navigation elements)
  • Scissors

These are just the basic tools. You can also print graphics and other interface objects off with a computer, but that isn’t necessary. You can use physical objects as well to help mockup elements.

A lot of people don’t recommend using rulers. I’m not dogmatic about this, but it’s important to keep in mind that you’re not trying for perfection here. You don’t want to slow yourself down by trying to make every line straight. It’s more important to spend your time getting feedback from users than it is to make a low-fidelity design look a little better.

Eventually your design will become higher fidelity, and that’s the appropriate time to care more about making sure the visual aspects look as good as possible.

How to conduct a usability test with a paper prototype

  • Find users —These should not be other people working on the project. People with as little knowledge as possible about your design and work will provide the best feedback.
  • Assign a person to be the computer — If you built the design entirely yourself, you’re the computer that the person interacts with. You’ll want to grab a friend to record the testing sessions so you can watch them later. If you have a team, assign one person to make your prototype respond to user inputs.
  • Record the test — Recording a test is recommended. This doesn’t replace observing the test, as you’ll see below, but there are several reasons to record a usability test. You can refer back to it later, you can show people who didn’t observe the test how it went. If you’re trying to convince someone that a design needs to be changed, showing them a video of users struggling with a design is a great place to start.
  • Conduct the test — Explain what users are supposed to do. Give clear tasks and scenarios. Let’s say we were testing Amazon.com. Here is a scenario you could give a user: “You are a big fantasy book fan. You just heard a new illustrated edition of The Hobbit came out in October 2013. Find the book, put it in your shopping cart and buy it.”
  • Think aloud  Have users think aloud while going through your test by speaking what they are doing and thinking. Are they confused? Why are they clicking on this? What do they expect to happen when they do that? This will help you understand what they are thinking while they use your prototype. It will also help you formulate questions to ask them when they are done.
  • Observe — Even though you are asking users to think aloud, they may not say everything you need to know. Users may be struggling with a site but still tell you they think it is relatively easy to use. This can be because users want to appease you or because they don’t want to appear to not be able to work a website. Regardless, observe what is happening. You’ll learn a lot by seeing how well users can complete various tasks with your prototype. Remember, you’re testing your design, not the user. I always make this clear to users.
  • Debrief — Ask users what they thought of the prototype, what they thought went well, what they thought didn’t go well, how they felt using your prototype, etc. If you noticed a user struggling with part of the prototype, specifically ask them about that.
  • Create a list of issues to fix — Based on the feedback that you got from users and what you observed while watching users, create a list of issues to fix. If there are a lot of issues, you may want to modify or create a new paper prototype. If it went fairly smoothly, it’s time to create a higher-fidelity prototype and get additional user feedback later.

Testing early and often saves money and time. Don’t let anyone tell you otherwise.

More resources and videos

Life’s too short to use ugly programs

This is one of the major reasons I use OS X. Software just looks much better on OS X than it does on Windows or Linux. The software coming from indepdent developers in particular is often very stunning.

Design soon becomes function. I write in Byword because it’s a beautiful text editing app that lacks chrome. I don’t want to see buttons and features that I don’t need. Too often in a Microsoft program I accidentally click on something that I don’t want.

If I’m going to spend 8+ hours a day staring at something, I’d at least like it to look good. I want it to be enjoyable.

I don’t think that’s asking too much.

Can newspapers innovate too fast? Is that what went wrong?

Can you innovate too fast? That’s what the Washington Post’s ombudsman Patrick B. Pexton wants to know:

One of the things that surprised and heartened me when I came to The Post 10 months ago was the tremendous amount of innovation going on.

Hardly a week goes by without the Web site or newspaper launching some feature, or a venture to attract more revenue, or a blog, or a social media innovation. Just since I have been here, The Post has redesigned its Web site; installed a new content management system; pioneered the Facebook social reader, which tracks and announces what your Facebook friends are reading; added a team of policy bloggers to Ezra Klein’s Wonkblog; revised its comment system for readers; added a ton more news videos online; started The Root DC, a site aimed at African American readers; and probably about 10 other things I can’t remember.

The answer to innovating too fast really depends on your position as a company. If you’re a dominate company, racking in profits, perhaps spending too much time and money on new stuff would be a mistake. Targeted R&D in the Apple mold produces better results than the spaghetti-on-the-wall R&D of Google. But there isn’t a newspaper company that is an Apple or a Google.

If you are a company in a besieged industry that is rapidly disappearing, I don’t think it’s possible to innovate too fast. Does anyone really think that the newspaper industry is in the situation it is in today because it innovated too fast?

But it is important to draw a distinction between new initiatives and innovation. Thus the proper questions are, “Are the new initiatives we are trying the correct ones? Are we spending our time wisely? Do we have the proper setup to ensure innovation?”

The Washington Post and many other news organizations are certainly trying a lot of new things. I wouldn’t call that innovation. New initiatives that resonate with users, drive traffic and ultimately help a news organization make money (and thus employ staffers) should be considered innovation. New initiatives that push journalism forward should be considered innovation and ultimately encouraged.

By this measure, I would say the Post and other news organizations need a lot more innovation. Particularly missing right now is innovation on the business model front. While The New York Times has been experimenting with different ways to make money, most notably its pay meter, I don’t recall any serious initiatives from the Post when it comes to business models. That’s innovation that the Post could sorely use.

Pexton does cite that several Post users complain that washingtonpost.com is becoming cluttered. I think that’s a fair point. I find Washington Post story pages to be distracting and hard to read (almost built for Instapaper and Reader to declutter them). This isn’t due to too much innovation, but rather far too little restraint.

This is an issue afflicting most legacy news organizations. The experience of focusing on and enjoying an individual story is rapidly disappearing beneath an avalanche of chrome: social media widgets, ads that are far too distracting and rarely relevant, polls that are unrelated to the story at hand, links to unrelated content on the site, newsletter signups, etc, etc.

My guess is that Pexton, and the employees at the Post agreeing with him, haven’t thought too deeply about what innovation at a news organization looks like. I’d suggest they check out the new tech news site The Verge. They have real innovation like story streams that allow them to create micro-blogs for big, ongoing stories. Their reviews feature layout and typography that makes them feel more like an interactive magazine spread, complete with very high-caliber video reviews and charts.

While the Post may have rolled out a new content management system and design (the site doesn’t look or feel much different to me, the end user), you can tell The Verge has a CMS unlike what traditional news outlets have. The site looks and feels different to end users. It’s what innovation feels like.

Perhaps Pexton should ask his colleagues why the Post’s website doesn’t look and feel nearly as a good as The Verge. There is no good reason it doesn’t.

The marriage of technology and the liberal arts

I don’t want to live in an ugly world. And neither did Steve Jobs.

Design matters.

Design isn’t just how a product looks — it’s how it works and feels. Steve Jobs and Apple made beautiful products, and I hope Steve’s commitment to a beautiful world lives on for many years to come. Beauty is more than just skin deep, especially when it comes to technology.

Steve made products that you were proud to display in your house. Products that you enjoyed using because design was an integral part of the product itself, not just a shell over some technology. Steve insisted on creating products that were design focused, because how you use and interact with a product is just as important than the technology itself.

Many think design is just veneer. That design is just style. That it’s not substance.

Good design is the core of substance. Good design makes something easy to use. Good design makes something fun to use.

I strongly prefer using products that are easy and fun to use. Without Steve Jobs, I think we would have many of the same technologies that we have today: personal computers with graphical user interfaces, smartphones with robust Web browsers, portable MP3 players, etc. But without Steve Jobs, I’m afraid we would live in a world with just technology and no design, culture or soul. This technology would be harder and less enjoyable to use, and I fear it would of the province of technologists alone.

Too many technologists and engineers don’t value design, usability and the liberal arts. Steve Jobs cherished them. As a technologist with a liberal arts background, Steve Jobs and Apple always spoke to me because they were more than just a computer company that only cared about computer components.

Apple under Steve designed computers and music players and software and phones and more that were a pleasure to use. For years I had to use Windows machines at work. They typically got the job done like Ford Crown Victoria does for a cab driver, but I rarely enjoyed using the actual machine. It always felt like using a machine.

I would go home at night, relax and work on personal projects on my Macs. I enjoyed the experience of just using a Mac. When I was away from my Mac and my beloved OS X (I used it full time from 10.1 onward), I would get antsy to get back to my computer. It was more than just a machine, it was my sidekick.

The difference between what Apple produces and what many other technology companies produce is that they make products that allow people to do something while also enjoying what they were doing. Steve and Apple make technology centered products that speak to non-technologists. To produce a truly great computer or phone or piece of technology, everything matters: the hardware, the software, the physical design, the user interface design.

Steve understood that better than anyone else, and I think it’s precisely because he didn’t see himself as a technologist alone. Steve cherished the arts. The world would be a better place if more people did.

Steve Jobs’s legacy is the marriage of technology and liberal arts.

Thank you Steve. You helped us live in a more beautiful world.

Style is substance

Stephen Fry explains how those who think Steve Jobs was just style over substance don’t get it:

As always there are those who reveal their asininity (as they did throughout his career) with ascriptions like “salesman”, “showman” or the giveaway blunder “triumph of style over substance”.  The use of that last phrase, “style over substance” has always been, as Oscar Wilde observed, a marvellous and instant indicator of a fool. For those who perceive a separation between the two have either not lived, thought, read or experienced the world with any degree of insight, imagination or connective intelligence. It may have been Leclerc Buffon who first said “le style c’est l’homme – the style is the man” but it is an observation that anyone with sense had understood centuries before, Only dullards crippled into cretinism by a fear of being thought pretentious could be so dumb as to believe that there is a distinction between design and use, between form and function, between style and substance. If the unprecedented and phenomenal success of Steve Jobs at Apple proves anything it is that those commentators and tech-bloggers and “experts” who sneered at him for producing sleek, shiny, well-designed products or who denigrated the man because he was not an inventor or originator of technology himself missed the point in such a fantastically stupid way that any employer would surely question the purpose of having such people on their payroll, writing for their magazines or indeed making any decisions on which lives, destinies or fortunes depended.

Episode 09: Babies like usability

Baby Sees The iPad Magic

This week we focus on usability, usability, usability. And babies. And walking.

What good is technology if it doesn’t make our lives easier? What good is technology if it’s not easy to use? What good is technology if it doesn’t help us do things we couldn’t do otherwise and help us do other things even better?

We start the show by focusing on iPhone and iPad applications that help with pregnancy,  birth and after the baby is born. Jeremy discusses which apps helped him and his wife out with their new baby.

The conversation then turns to walking, but don’t run away. I review the Fitbit, which is the geekest pedometer you’ll ever find. It’s not the cheapest, and some do more things, but it is the most usable and it really gives you great data.

Things are a little slow around the Interchange Project with Jeremy’s new baby and I have a few things that I need to wrap up this week. But next week and the rest of the year, we should be back with more great stuff.

Thanks for your support.

Listen to this week’s show:


Download the MP3

Show notes:

MySpace sold for $35 million, 5 years after being most popular site in the US

Just five years ago MySpace was the most popular site in the US and considered a bargain when it was sold for $580 million to News Corp. Now, MySpace was sold for just $35 million.

We’ll be talking more about MySpace’s rise and fall on the podcast this week. My initial thoughts on this are:

  • MySpace’s failure shows you what happens when an old media company such as News Corp. tries to manage a social network. The site stagnated incredibly and seemed to have no interest in trying to compete with Facebook. Constant innovation is required to be a successful website platform. If anything, people complain that Facebook makes too many changes. But change is necessary.
  • Usability and design matter. MySpace was hard to use because its design was so poor. It was a technological, design and usability backwater compared to Facebook.
  • Less is more. Facebook doesn’t allow much customization, certainly nowhere near what MySpace allowed users. Most people don’t have taste. Users’ poor design decisions made most people’s profiles a nightmare to use. We’re talking about huge background photos that made text hard to read, songs that started playing on load, photo galleries that popped up out of nowhere. It’s almost hard to believe that someone would make a social network like that.
  • Mobile sealed MySpace’s fate. Facebook has great mobile apps, particularly the iPhone app. Look at how many people are posting to Facebook these days from mobile apps. Facebook embraced mobile apps early, and has a product that meshes really well with mobile. Post a short status update on the go or share a photo or see what your friends are doing. Facebook is a great way to kill time, especially when you’re waiting on a friend to meet for coffee, or on a train, or are waiting to be seated at a restaurant. Facebook gets that mobile is the future.