Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 28 2012


Paper Prototyping and 5 Analog Tools for Web and Mobile Designers

Designers love analog tools. No wonder. These tools lets us physically interact with interfaces and speed up the design process, like paper prototyping. What takes hours in the digital world can be sketched out in a matter of minutes.

That’s why analog methods of prototyping are especially valuable right at the beginning of projects – when speed matters the most. Working with paper, or perhaps a whiteboard, can accelerate the speed of our learning loops. Sketch, feedback, sketch, feedback, sketch feedback – you can go through dozens of iterations in one day and you’ll set solid foundations for the rest of the work. Consider it kind of premium insurance. Getting rough feedback quickly can save you a lot of work.

No wonder, according to research by Todd Zaki Warfel, paper prototyping is still the most commonly used prototyping method! Yes, while we tend to disagree if we should code prototypes or just use prototyping software, the use of analogue tools in our design process is unquestionable! Honestly, I don’t know any designer who is not going through early stage paper prototyping sessions.

Of course in paper prototyping we pay the price of low-fidelity and while it might not be a problem for your team to discuss lo-fi deliverables, in my experience, it’s always a problem for stakeholders. To avoid misunderstandings and accusations that you’re playing with paper instead of working, just make paper prototyping an internal method for your team.

Analogue methods are supported by User Experience pioneers such as Bill Buxton, author of Sketching User Experience and Carolyn Snyder author of Paper Prototyping. They highly recommend breaking away from the computer once in a while and collaboratively work on the analog side of the design moon. According to them, paper prototyping:

  • keeps all team members motivated (as they can easily participate in paper prototyping sessions)
  • lets designers iterate quickly and gather feedback very soon in the process
  • gives designers freedom since paper has no boundaries

And though many believe that the rise of tablets may end paper prototyping in the next couple of years, I’d disagree. The physical nature of paper prototyping, its speed and straight forward form (understandable by anyone), makes it unbeatable by any digital gadget. Tablet devices are just another medium of digital prototyping (perhaps better than computer, who knows…) than replacement of analog methods.

In recent years we can observe attempts to optimize paper prototyping by the creation of dedicated tools. I tried most of them and I’m addicted to some (UXPin, UI Stencils). They hugely improved my workflow. Dedicated paper prototyping tools gave me speed that exceeds everything that I tried before. I feel more professional with a well crafted notepad in hand than a crumpled piece of paper with messy sketches on it. This confidence helps me discuss my analog work both with teammates and stakeholders. Most of the tools that I present below have been around for couple of years and I guess they’re doing great.

My fingers are crossed for these brave entrepreneurs.

Have fun!

Note: At the end of article I listed some of my favourite printable templates – they are ready to use and FREE!

UXPin – Paper prototyping notepads

Popular paper prototyping notepads with an original idea. User Interface elements are printed on separate sticky notes, which let you quickly create prototypes and iterate by re-sticking parts of the interface. Additionally, notepads are equipped with a sketchbook (with printed browser/iPhone), project kick-off and personas forms, as well as diagramming, gridded, paper. Hard-covered, well-designed and beautifully crafted books are $29.99 with free DHL delivery to USA, Canada and EU, if you buy any 3 of them. Since people from Google, IBM, Microsoft use them – UXPin notepads has sort of become an industry classic.

Finished prototypes can be auto-converted into digital, HTML, wireframes by UXPin App and this is one of the coolest things I have ever seen in the User Experience Design field.

Phone Doo – Magnetic boards 

Little magnetic, erasable, boards let you quickly sketch your ideas, while keeping proportions of a real iPhone. Dotted grid also provides significant help in drawing interfaces. Whiteboard form makes them really iterative and agile-like. Imagine bringing these little boards to a scrum meeting and presenting your recent design work. People will be amazed! The small size makes them a perfect tool if you like to design while sitting in a cafe. Besides, they look so good. One pack of Phone Doo’s costs $15 + shipping via US Post ($15 for one pack to Europe).

UI Stencils

Precisely cut User Interface stencil help you sketch interfaces in an aesthetic way. Forget about messy sketches and create sketched beauties with straight lines. It really helps to communicate design ideas!

UI Stencils has created steel stencils for iPhone, Android, Windows Phone 7, Web and also several kind of special notepads with gridded browser, iPhone etc.

UI Stencils cost $26.95 + delivery (USA -> Europe, $6.50-$45 – depends on the delivery option)

Sketchbook – Sketchbook for Web & Mobile Design

Nicely crafted sketchbook with printed browser on every card. A simple, but highly useful tool that you can take with you to any meeting to quickly doodle an interface. It might not be revolutionary, but it’s certainly a “nice to have” tool. UX Sketchbook costs $12.95 + $13.95 shipping fee (USA -> Europe).

Behance Dot Grid Book

Simple notepad with a dotted grid on every page that is supposed to make it easy for us to sketch interfaces. $15 seems a little high for this simple book, but on the other hand it’s quality pays off.

Free printable templates

Kong Graph Paper

MBTI Sketching Paper for Ideation

MBTI A4 Sketching Paper

The tools listed above are more than enough to make your design process at least partially analog. If I can suggest anything, I’d recommend you try a couple of these tools, as well as the free templates, and check where they’re taking you. If you experience an increase in your process speed and a growing understanding of the design within your team, consider using them regularly!

May 01 2012


The Power of Paper Prototyping (Includes a Giveaway)

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

When planning the structure of a website or an app, I often begin by capturing my ideas on paper in the form of wireframes. I quickly sketch several possible layouts to see which form fits best: Should I use a two or three-column layout? What kind of navigation structure will the site have? How can I integrate a search bar? For exploring basic questions like these, nothing beats throwing together some quick-and-dirty paper prototypes. It’s a great way to get the creativity flowing, and when a sketch doesn’t work it’s always fun to crumple it up and play office basketball with the garbage can.

Does that mean that prototyping on paper is superior to using a wireframing software tool? Each has its own strengths that are useful at different stages of a project. In the initial brainstorming stage, I prefer the paper-based approach for the following reasons:

  • It’s fast, low-tech and low-cost. All you need to get started is paper and a pencil.
  • You can do it anywhere: on the couch, in your garden, or even while lying in bed.
  • Paper frees you from adhering to a particular style or following a set of predefined rules.
  • It’s fun, playful, and helps unleash your creative juices.

Later on, after having dealt with the basic layout questions, I refine my ideas on screen and enjoy the benefits of digital wireframing:

  • A wireframing tool lets me choose from ready-to-use template elements.
  • Existing wireframes are painless to modify.
  • Files can be versioned and easily be exchanged among team members.

If you are in the market for a good wireframe software, I can recommend PowerMockup, a wireframing tool developed by our company. PowerMockup is an add-on for Microsoft PowerPoint that provides a handy library of stencils for quickly sketching a layout.

5 Paper Prototyping Kits Up For Grabs

To promote the idea of paper prototyping and get you started, we are giving away five paper prototyping kits, each containing:

  • 3 Sketch Pads
  • 4 Sharpie Markers

The sketch pads contain a simple browser frame and come with 50 sheets of nice thick (100gms) A4 paper.

Instead of pencils or thin ballpoint pens, we include a package of Sharpie markers. The reason is simple: Due to its thickness, a Sharpie forces you to focus on the basic building blocks of your layout and minimizes the risk of getting lost in design details that will probably change later anyway. Sharpies encourage you to concentrate on the concept, which is why they are the perfect choice for early brainstorming sessions.

How to Enter the Giveaway

For a chance to win one of five paper prototyping kits, simply tweet about this post using the hashtag #protokit. The competition will run for the next seven days, ending May 8th, 2012. The winners will be picked randomly from all tweets received and contacted for shipping information (shipping will be done via DHL International to almost any location in the world).

There will be a small consolation prize for those not among the five lucky winners: a free paper browser PDF template for download so you can print your own sketching paper. Have fun with it!

August 05 2010


Designing with Paper Prototyping

Paper Prototyping

Paper Prototyping.

Prototyping is key to any successful design. Paper prototyping is usually the first step, but does it fit into a world where mobile devices are king? Yes, but not using the conventional method. Combine the physicality of the device and the power of paper prototyping and you have a solution that’s fit for the new era of computing.

Paper prototyping is a key component of the user-centered design (UCD) process and is a popular method among designers. The characteristics of paper prototyping lends itself to the iterative approach that is so valuable in the UCD process.

The basic premise of this method is that a paper prototype of a feature’s UI is crafted and then given to a user who will attempt to complete a task or a scenario. Evaluators record and analyze the results from these sessions, which are then used to create another prototype.

Designed for a simpler time

The method is great for designing UIs for desktop computers as the user’s fingers mimic the input of a mouse. Therefore, paper prototyping mobile touchscreen UIs would surely be perfect, right? No! It would make sense, but there are many more factors that need to be considered when designing and evaluating mobile touchscreen UIs.

When interacting with desktop computers, users will usually be in a “controlled” environment, in the comfort of their own homes or offices. Mobile devices can be used in the queue at Starbucks or simply when walking in the street, and therefore lack the luxury of that “controlled” world. These devices can be used in any environment and held in several different ways, and these are two key reasons as to why the standard paper prototyping method doesn’t lend itself to mobile devices. The hardware is as important as the software when it comes to mobile devices, and those that understand its strengths and constraints will create better overall solutions. Therefore, incorporating the physical device into the early prototyping stages is vital.

How to paper prototype

In the July/August 2009 edition of Interactions magazine, three academics from the School of Informatics at Indiana University suggested a technique that incorporated paper prototyping and the physical device—in their case, an iPhone.

Their method had several stages:

  1. Create the paper prototype.
  2. Digitize each screen by photographing or scanning.
  3. After importing, resize each image to fit the device’s screen.
  4. Save the resized images in a file format supported by the mobile device.
  5. Organize all the screen images into the correct order for the scenario.
  6. Upload the images to the mobile device.
  7. Explain to the user how to navigate through the scenario. In their case, swiping through the set of images on the iPhone.

The “Paper in Screen” method was a success for the Indiana University academics as it not only raised “issues on interface labels, content organization, and affordance,” but also facilitated “discussion on the overall utility of the application for realistic mobile scenarios of usage.”

During a recent academic assignment, I decided to implement the ‘Paper in Screen’ method, but chose to add an additional step to increase interactivity as well as return different types of issues.

Using iWeb to create the links

Using iWeb to create the links

After importing and resizing the images, I opened up Apple’s iWeb application. I set the webpage size to the iPhone’s resolution and then gave each image a separate page. Following this, I placed links on top of the buttons on my paper prototype which when clicked would send the user to another page. I then uploaded this to the Internet, and downloaded one of the many full-screen browsers for the iPhone. This allowed me to hide all the browser’s chrome and show only the prototype images. During this assignment, I was unable to find a solution that would store the HTML files locally and act correctly as a prototype. Due to this issue, this method requires an Internet connection, preferably Wi-Fi, however a decent 3G connection was more than satisfactory.

Final thoughts

A user working through the scenario

A user working through the scenario using the prototype in a full-screen browser.

This method allowed the user to interact with the prototype like they would with any other iPhone app—minus the animation—and me to test the prototype in real world environments. Conventional paper prototypes restrict users, requiring them to follow the specific order of screens set out by the designer. By making the prototype more interactive, you allow the user to deviate and make mistakes without requiring intervention from the designer. No intervention means the user will feel in control and relaxed, hopefully yielding more realistic results.

Merely adding one additional step to this method can change the types of evaluations and results you receive from paper prototyping yet still retain the inherent advantages found with the technique such as no coding involved, fast and cheap to mockup interfaces, as well as encouraging creativity from other designers and more importantly, the users.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!