How To Prototype

Transcription

1 10 Z Y X Rapid Prototyping Jeremy Jackson Lead Technologist Prototyping: The Wright Way to Fail Fearing failure stifles creativity and progress. Instead, embrace failure and learn from it early on. Rapid prototyping can help you do just that. Method method.com

2 Embracing Failure On the morning of December 17, 1903, Orville and Wilbur Wright eyed another chance at getting their flying machine off the ground. The brothers and five other men humped their 600-pound machine over a quarter mile uphill and placed it on a 60-foot monorail. They had done the same thing three days earlier but crashed, breaking several parts in their flying prototype. This day was different. Undeterred by their failure a mere 72 hours ago, the flying machine made its way down the monorail and picked up speed. Wilbur ran along the side of the plane, steadying the wing. As the machine left the ground, a camera shutter opened, capturing one of the most inspiring moments in human history. Twelve seconds and 120 feet later, what was previously impossible was now a reality Communicate ideas more clearly with prototyping 04 Look for weaknesses and remedy failures early on That day, the Wright brothers finally arrived at an ultimate success, but the path was filled with disappointing detours and a daunting string of failures. Innovation and failure go hand in hand. Fearing failure stifles creativity and progress. If you re not failing, you re not going to innovate. Do your product or service a favor: embrace failure and blueprint a plan that affords you the opportunity to do it early and often. Rapid prototyping can help you do just that. Look for Failure and Iterate from Prototypes 02 Low fidelity prototypes, such as pen and paper sketches, help get ideas across 05 Iteration of the process leads to a successful, innovative solution 03 Prototyping, like design, is a cyclical and iterative process. Test and refine the prototype

3 Get Your Point Across Let s face it: in the world of interface design, image exports and slide decks are not the most effective way to convey an idea. Even for a system with just a modest amount of complexity, static visual renderings represent a decidedly small sampling of the entire solution. Instead, adapting the design process to include rapid prototyping will not only help communicate your ideas, but allow you to harness one of the virtues of creating something truly innovative: failure. Rapid prototyping is the process of quickly building the main feature paths of an interface. One of the largest benefits of prototypes is that they provide an easy way to get your idea in front of potential end-users and key client stakeholders. Getting the idea out of the designer s head and into a demonstrable format is an effective process for eliminating initial shortcomings and misplaced design assumptions. In tandem with design explorations, rapid prototyping is a cyclical and iterative process. The basic cycle allows for testing and refinement of the product or service early and often: ideate, prototype, test, analyze, refine, and repeat. The key understanding in adapting a design process into an iterative one is that failure must be expected and embraced. This process also creates opportunity to remedy those failures early on and more efficiently. The Good News Prototyping can occur at any phase in the design process and doesn t necessarily require specialized development knowledge. Deciding what and how to prototype depends on what the product or service s needs are, the questions to be answered, and the level of technical resources available. That said, effective results can be garnered from various levels of fidelity level that can be chosen to prototype in. Low-Fidelity Prototyping Starting the prototyping process at the pencil and paper level is the least expensive and fastest way to visualize and iterate on design ideas. It requires no specialized technical knowledge, but allows for translation of an idea out of a designer s head and into the physical world almost immediately. Good low-fidelity prototypes can be far more valuable for conveying interfaces than simply showing general content placement and page structure. Hand drawn screens can be very effective for communicating page flow and missing UI elements. When designing the NCAA March Madness On Demand iphone app, Method designers used a series of simple interface sketches to create an application walk-through. These sketches were then imported to a slide deck in Keynote, which provided a clear demonstration of important parts of the system screen flow to key stakeholders. Failures in the form of missing states, and interface elements were uncovered and easily remedied during this process. I have not failed, I ve just found 10,000 ways that won t work Thomas Edison Inventor, Scientist

4 Medium-Fidelity Prototyping Often executed as wireframes, medium-fidelity prototypes are intended to highlight only the most macro-aesthetic details of an interface s content and design. Usually executed in black and white or grayscale only, prototyping at this level can provide meaningful insights on the information architecture, screen flows, and high-level interaction points. Additionally, when showing a working wireframe prototype to an end-user or stakeholder, a design team can effectively evaluate how efficiently the design allows users to achieve their goals. Medium-fidelity prototyping can be effective in conveying a visual representation of an idea to stakeholders in the very early stages of the product lifecycle. When creating prototypes at this level, know exactly what you want to test. Then, develop just enough interface detail to gather meaningful results, which will inform necessary refinements. Perhaps the most beneficial aspect of prototyping at this level is that it provides a quick entry point to baseline user-testing. We recently used a wireframe-level prototype at Method to validate navigation structures and taxonomy for a very brandcentric e-commerce system. With just a few hours of commitment, we were able to gather meaningful data from real users. Medium-fidelity prototypes are perfect for high-level testing in areas such as navigational elements, screen flows and basic content presentation. High-Fidelity Prototyping High-fidelity prototypes are intended to portray the end-vision for the interface and usually include realistic content, refined interactions, transitions, and animated effects. Prototyping in high-fidelity is clearly the most time consuming way to prototype, but goes a long way in usability testing and design presentations. Because they show design directions as well as the interactive interface experience, high-fidelity prototypes have an important role in defining a vision for a product or service that executives can clearly visualize. Working prototypes with a high level of finish can easily be mistaken for the final product. When creating the prototype, resist the urge to pack in as many features as possible. Remain focused and ensure that the general idea for your product is being clearly conveyed. Gear your efforts toward the most used features. Try to demonstrate one third of the interface, at most. High-fidelity prototypes can take a variety of forms. They can be coded as working HTML, CSS and Javascript interfaces, or they can manifest themselves as non-interactive motion studies. Choose the technique that best tells your solution s story and allows to you test any weaknesses in the system. Thumbplay, a cloud-based streaming music service, partnered with Method to design their next generation app for webenabled televisions. Working in close collaboration, Method s designers and technologists create a fully animated, true-to-life prototype which allowed exploration of key service features and history states. The prototype was easily shared and demonstrated through a web browser, which was used for user testing and for Thumbplay s stakeholders to see the service come to life. This demonstration proved instrumental in validating a number of visual and user experience design decisions that were made throughout the design process, and in creating a successful service. Factors to consider when prototyping Be selective. Don t prototype every feature. In most systems, focusing your prototypes on the 20-30% of the application where the user will spend the majority of the time is generally sufficient to thoroughly test your idea. Rapid prototyping should be, well, rapid. Work quickly and don t necessarily worry about getting everything just exactly perfect. The faster you can express your ideas, the more time you ll have to identify failures and rework them. Prototypes don t need to live on. Don t waste time creating production-level code. The goal is to express an idea, no more. Ideally, not all of the ideas you test will work. That s the point. Prototyping gives you the opportunity to validate the good ideas and move on quickly from the bad ones.

5 Adapting your design process to an iterative one is to expect failure, but have the opportunity to remedy them. Interpret Feedback and Validate Ideas Maintain Focus Successful prototyping requires restraint and a deep understanding of the requirements, technical specifications, and how to process feedback. Core to this is an acknowledgement that, in order to be nimble, prototypes often only need to focus on the portions of the interface where the user will spend the majority of their time. It must be accepted that the prototype will not be exact or perfect because it is not the end product. The prototype is simply the expression of an idea and the means by which to test and validate that idea. A technical understanding of the system s limitations is critical to creating a successful product. While the desktop or mobile browser is a really great way to show prototypes, it does not always reflect the reality of the end platform the product was intended and designed for. If a product prototype is for a web enabled TV or set-top box software, the limitations of the product s platform must not be forgotten. A mobile browser s processing capabilities may be superior to today s web-tv or set-top box, and therefore not an accurate system to prototype on. Once a successful prototype has been created, the compelling process to evolving the product or service can begin. At this point, the idea can be tested, quickly allowing for bad ideas to be killed off and the good ideas to be iterated on. It s natural selection for interface design. Feedback must be interpreted and implemented with precision and focus. Not all feedback is good. Like any design presentation, seeking feedback on a prototype is best kept in small groups. As feedback comes in, the scope of the project must be monitored to maintain focus on parsing the feedback within the areas that were set out to test. Creating something innovative is indeed a risky undertaking. To do it, you have to crash often before you are able to fly. Famed inventor of the Dyson vacuum, James Dyson crashed frequently over the 15 years it took for him to craft 5,127 prototypes of his bagless vacuum cleaner. Although he eventually got it right, there was no singular defining ah-ha moment. Dyson s is an extreme example to be sure, but his feelings on failure ring true to any healthy, iterative design process: On the road to invention, failures are just problems that have yet to be solved. 1 Rather than shy away from failure, prototype and use what you learn to your product s advantage. 1 No Innovator s Dilemma Here: In Praise of Failure by James Dyson

6 10 Rapid Learning Prototyping Play the Game By By Jeremy Adam Jackson Dole, Design Researcher Lead Technologist About the the Author Jeremy need text is a Lead Technologist at Method. His areas of expertise are in front-end technologies, where he crafts lean, accessible, and refined custom interfaces. With nearly a decade of experience, he has created many prototypes and successful products for a variety of brands, most recently for Comcast and Time Warner Cable. About Brands as Patterns This is the Tenth Issue next More to come marks Method s 10 year anniversary, and we are only looking forward. Written by our own industry leaders, we are launching the About series, which will focus on gamechanging topics that will fundamentally impact 2010 today s marks Method s brands and 10 their year search anniver-fosary, revenue and we streams. are only looking forward. new Written by our own industry leaders, we are launching the series, which will focus on game changing topics that will fundamentally impact today s brands and their search for new revenue streams. Cable s Lost Generation Unlocking the Infinite Library Entertain Me Now Cable s Lost Generation Place, Space and the Mobile Interface Unlocking the Infinite Library Gaming for Behavior Change Entertain Me Now Changing Retail Currency Place, Space and the Mobile Interface Let s Get Physical (with Services) Mind the Gap Innovation: Wrapped, Packed and Stacked Parenting 101 What s So Funny About Innovation? The Consumer as King(pin) Rapid Prototyping Wrap It, Pack It, and Stack It Brands as Patterns Power to the People Welcome to the Metaverse

7 About Method Method is a brand experience agency with offices based in San Francisco, New York and London. Our clients are best described as owners of progressive, era-defining brands, and include Google, Comcast, Nordstrom, Sony, Samsung, Nokia, Microsoft, Time Warner, Intel, and BBC. Collaboratively, we help them create products, services and businesses that are smart, beautiful and extendable. For more information visit X Y Z Method Locations San Francisco New York London Contact Lindsay Liu Marketing Manager [email protected] method.com