Assignment 2: Paper Prototyping (9/20)

Paper Prototyping: Going at it Old School

• When you think of new media and web design, the first tools that come to mind are generally not a pen and paper. However, through research and the final product that comes from paper prototyping websites, it is clear that creating a complex and thorough paper prototype of a web site will pave the way for your actual web design when it comes time to writing the codes and laying the tables. 

Paper Prototype example.

• Before we actually get into the definition and traditional methods of paper prototyping, understanding the importance and benefits of it should be outlined first:

1. You do not need to be a professional graphic artist to create one. Virtually any website or interface can be created and by anyone who has even the slightest drawing skills and can turn the ideas in their heads into tangible designs on paper. We all know what websites look like, as they generally follow a formula (navigation bar, logo, pictures, links), so playing around with the layout and user interface can be easy and provoke new, creative ideas from an entire company--not just the web design or graphic art team (http://www.paperprototyping.com/what.html).
   
   
2. Catch functionality problems before the site is live on the net. Believe it or not, many of the most basic functionality problems become apparent during the initial paper prototyping process. Because you have a multitude of people, from all different disciplinary skill backgrounds, reviewing and testing out the paper interface, you have that many more inputs and and problems that may have otherwise gone unnoticed will surface. Instead of having to go back to the code, you can just draw up the fix and it would be virtually cost-free and 10x more productive than having to fix and change things on the computer.
   
   As Jakob Nielson states, "...if you discover a needed design change early, [its] 100 times cheaper to make the change. The experience from both fields is clear: early is much better than late" (http://www.useit.com/alertbox/20030414.html).
   
   
3. Menus and Navigation. The success of any website relies solely on the heart of it's menu and navigational structure. The video below clearly illustrates a streamlined email paper prototype interface and just how far you can really go with prototyping. Notice the expanding menus and pop-ups that this design team crafted for the most comprehensive and effective prototype model. 

Redesign with Prototyping

• Often you may find that your website needs a revision or overhaul (and more than just a logo update). Instead of fidgeting with the code and involving a web designer, paper prototype the existing elements of the site and lay them out on a table. You now can see and touch your entire site and rearrange and align your site to match your new site model (which may not be apparent until you actually see the tangible pieces in front of you). 

A prototype meeting.

• "Especially in Web Design, paper prototypes can be used to probe the illegibility of a design: A high-fidelity design mockup of a page is printed and presented to a user. Among other relevant issues the user is asked to identify the main navigation, clickable elements, etc. Paper prototyping is also the recommended design testing technique in the contextual design process" (http://en.wikipedia.org/wiki/Paper_prototyping). 

The Bottom Line

• Prototyping is used by professionals across all industries and is a proven technique for crafting intuitive and clean websites. Priceline.com, in the mid 1990s, was a new idea and way for people to buy cheap plane tickets online. Would the interface work or be too confusing? Would the user trust the website based on its interface and design? Prototyping showed the team at Priceline.com that many of their original design thoughts would not have worked and if they had not used the paper prototype method as a preliminary design strategy, the site would have required a redesign from the code up (http://www.paperprototyping.com/what_examples.html).
• When you design a webpage on the internet, you are designing for a specific function and purpose. If your site achieves those goals, then it is then considered successful. Most web designers stand behind paper prototyping to get even remotely close to the success and beauty of a website that was first established using paper prototyping. This just goes to prove that before we move ahead with new media and digital design, it is important to start basic, with a pen and paper, and organize your thoughts in a tangible, moldable fashion to achieve your success and vision accurately and effectively. 

References:


http://www.paperprototyping.com/index.html
http://en.wikipedia.org/wiki/Paper_prototyping
http://www.nngroup.com/reports/prototyping/video_stills.html