Lecture 10 — Storyboards, Paper Prototypes, and Mockups | HCI | Stanford University

Summary

In this video, the speaker outlines essential rapid prototyping techniques for design, emphasizing the importance of focusing on user tasks rather than just the interface. The three main techniques discussed are storyboarding, paper prototyping, and digital mock-ups. Storyboarding helps visualize user interactions and scenarios, while paper prototyping allows for quick, creative mock-ups using simple materials, fostering user involvement. Finally, digital mock-ups enhance fidelity and detail, paving the way for more formal evaluations. These techniques are crucial in a human-centered design process, facilitating effective communication and iterative improvement.

Takeaways

• 😀 Rapid exploration in design is crucial for effective prototyping.
• 📖 Storyboarding helps visualize tasks and user interactions before designing interfaces.
• ✍️ Bad drawing is an asset in storyboarding, as it focuses on content over aesthetics.
• 📝 Paper prototyping encourages quick iterations using simple materials like Post-it notes.
• 🎭 Role-playing during paper prototyping helps simulate user interactions effectively.
• 🔄 Iterative feedback is essential; users can modify designs directly during prototyping.
• 📱 Digital mock-ups allow for more detailed and specific designs as fidelity increases.
• 🛠️ Choosing the right prototyping tool aligns with the current stage of the design process.
• 🧑‍🤝‍🧑 Collaborative prototyping empowers stakeholders to contribute their ideas.
• 🔍 Evaluations evolve with prototype fidelity, moving from informal scenarios to formal experiments.

Q & A

What is the primary focus of the design process discussed in the video?

The primary focus is on rapid exploration in the early stages of the design process, using various techniques to produce prototypes quickly.

What are the three techniques for prototyping mentioned in the video?

The three techniques are storyboarding, creating and testing paper prototypes, and moving on to digital mockups.

Why is it important to select the right tool during the design process?

Selecting the right tool helps focus on the relevant questions at that stage of the design process and prevents using overly complex or high-fidelity tools too early.

What is the significance of storyboarding in interface design?

Storyboarding emphasizes tasks rather than just the user interface, helping to convey what the interface will help users accomplish and illustrate flow, similar to a comic strip.

How can someone overcome the fear of not being able to draw when storyboarding?

The focus of storyboarding is on communicating ideas rather than creating beautiful drawings, so even simple or 'bad' drawings can effectively convey content.

What are the key components that a good storyboard should include?

A good storyboard should illustrate the setting (who, where, and what task), show the sequence of steps to accomplish the task, and depict a satisfactory outcome.

What is paper prototyping and why is it valuable?

Paper prototyping involves creating mock-ups of user interfaces using paper and markers, which allows for quick iteration and encourages creativity without the pressure of perfection.

What tips are suggested for making effective paper prototypes?

Tips include storing materials in one place, working quickly, using photocopies for common widgets, and allowing for role-playing to simulate user interactions.

What is the purpose of moving from paper prototypes to digital mockups?

Moving to digital mockups allows for more specific design details, including pixel-perfect layouts, and provides a higher fidelity for evaluation and feedback.

How does the fidelity of prototypes affect user feedback during the design process?

As prototypes increase in fidelity, the nature of the feedback evolves; early feedback focuses on scenarios, while higher fidelity prototypes allow for more formal testing and critique.