Home > Articles > Programming > C/C++

Designing the iPhone User Experience: Prototyping App Concepts

  • PrintPrint
  • Share ThisShare This
  • DiscussDiscuss
This chapter looks at various iPhone prototyping approaches — paper, software, and video — and suggests how to choose the best approach for your iPhone app.

The word prototype comes from the Greek protos, which means "first," and typos, which means "impression." In the 1600s prototyping was used to describe the first impression from a printing press. Over time, its meaning has evolved to include the early forms of many things: automobiles, retail stores, home appliances. Perspectives on prototyping often differ depending on whom you ask—designer, developer, researcher. Regardless of the industry or discipline, I find it instructive to refer to Bill Moggridge's definition from Designing Interactions: 1

  • A representation of a design, made before the final solution exists.

This chapter looks at various iPhone prototyping approaches—paper, software, and video—and suggests how to choose the best approach for your app.

This chapter also includes case studies on prototyping at Dan4, Inc., and on the What's Shakin' iPhone app. Here you'll find insights into how the application design teams used prototyping to conceptualize their applications.

Why Prototype?

Prototypes can help you solve design problems, evaluate designs, and communicate design ideas. These up-front activities can also expedite the development process, saving valuable time and money.

  • The most common estimate is that it's 100 times cheaper to make a change before any code has been written than it is to wait until after the implementation is complete.
  • Jakob Nielsen2

Solve Design Problems

Prototypes can be an efficient way to work through design problems before getting deep into coding. They can help address everything from higher-level conceptual issues to lower-level interactions. For example, imagine that you're creating a messaging app that will display a transition when users move messages from one folder to another: What is the optimal speed of the transition? What is the best form for the visual feedback? How do these two elements work together? Storyboards with directional arrows could illustrate the general concept, but an interactive prototype would be more effective at fine-tuning the solution.

Evaluate Design Ideas

Prototypes are often used to evaluate design ideas—concepts, flows, and interactions—before investing development time. Evaluators may include the designer, design colleagues, and, of course, end users. Internal reviews can take a critique format or employ user-centered design methodologies such as heuristic evaluation, as discussed in Chapter 5, "Evaluating the Competition." Although internal reviews are tremendously valuable, they are no replacement for usability testing, which will be discussed in Chapter 8, "Usability-Testing App Concepts."

Communicate Design Ideas

Often prototypes are the only way to effectively communicate your app idea. In particular, apps that interact with the "real world"—location-aware apps, bar-code-scanning apps, voice recorders—must go beyond static screen designs to truly tell their stories. They need context: the people, places, and objects that are an integral part of the app. 3 Similarly, immersive apps such as musical instruments and games are considerably less compelling when presented in a static sketch format. Prototypes will take your app off the page and into a format that feels closer to the real thing. These may be presented within your company, shared with investors, or used to elicit feedback from users.

  • Share ThisShare This
  • Save To Your Account

Discussions

comments powered by Disqus

Related Resources

#TuesdayTrivia: Spotlight on WP7 (Win a copy of Sams Teach Yourself Windows Phone 7 Application Development)
By on May 2, 2012Comments
These days, what CAN'T a smartphone do? Microsoft is putting their own spin on things to help you experience "life in motion" when using your device. Instead of containing static application icons, the re-imagined Start screen features live Tiles showing real-time content updates.

March Trivia #1: Let there be light! (Win Microsoft Visual Studio LightSwitch Unleashed)
By on March 13, 2012Comments
Want a simplified self-service tool to help you build business applications for the desktop and beyond? Microsoft programmers… meet Visual Studio LightSwitch.

February Trivia #2: There's an App for That (Win Sams Teach Yourself iOS 5 Application Development in 24 Hours)
By on February 28, 2012Comments
In less than a decade, the iOS platform has changed the way we think about mobile communication.

See All Related Blogs