Alright let’s move straight to Week 6: Prototyping Techniques.
I’ll structure the notes properly with paragraphs for explanations and points for lists, just like
we did for Week 1 — but this time I’ll keep it in text format (not PDF).
Week 6: Prototyping Techniques
Introduction
Prototyping is an essential part of the Human-Computer Interaction (HCI) design process. It
allows designers to create preliminary versions of a system or product, test ideas, and gather user
feedback before committing to full-scale development. Prototypes help bridge the gap between
abstract ideas and real-world applications.
In HCI, prototyping supports user-centered design by involving users early and ensuring that
design decisions are informed by real needs.
Types of Prototypes
1. Low-Fidelity Prototypes (Lo-Fi)
o Quick, inexpensive sketches or mock-ups.
o Usually made with paper, cardboard, or simple digital tools.
o Focus on broad concepts, layout, and navigation rather than details.
o Useful in early stages of design.
o Example: Paper sketches of a mobile app screen.
2. Medium-Fidelity Prototypes
o More polished than low-fidelity.
o Created with tools like Figma, Adobe XD, or wireframing software.
o Show layout, navigation, and interaction flows but lack full functionality.
o Useful for refining workflows and getting more detailed user feedback.
3. High-Fidelity Prototypes (Hi-Fi)
o Closely resemble the final product in look, feel, and sometimes functionality.
o Built using programming languages, advanced prototyping tools, or interactive
mock-ups.
o Allow usability testing with realistic user interactions.
o More time-consuming and expensive to create.
o Example: A clickable mobile app prototype with working buttons and transitions.
Purposes of Prototyping
• Explore and test design ideas before heavy investment.
• Communicate concepts effectively to stakeholders and team members.
• Detect usability problems early and reduce redesign costs.
• Allow users to visualize and influence the system under development.
• Provide a basis for comparing different design alternatives.
Key Prototyping Techniques
1. Storyboarding
o Sequence of drawings showing how users will interact with a system.
o Useful for illustrating scenarios and context of use.
2. Wireframing
o Skeleton outline of screens or pages showing layout and navigation.
o Used in early design phases to discuss structure, not aesthetics.
3. Wizard of Oz Prototyping
o A human operator simulates system responses without users knowing.
o Useful for testing interactions before system logic is implemented.
4. Horizontal Prototyping
o Focuses on breadth of features, showing many options but without deep
functionality.
o Example: A mock-up showing menus but without working backend logic.
5. Vertical Prototyping
o Focuses on depth of one or a few features, fully functional but limited in scope.
o Example: Building only the login function of a system in detail.
6. Iterative Prototyping
o Continuous improvement through cycles of design, testing, and refinement.
o Core to user-centered design and agile development.
Advantages of Prototyping
• Encourages user involvement from the start.
• Reduces misunderstandings between designers and stakeholders.
• Helps evaluate feasibility of design ideas.
• Leads to better usability and user satisfaction.
• Saves cost and time by identifying problems early.
Limitations of Prototyping
• Users may mistake prototypes for finished products.
• High-fidelity prototypes can take too much time and resources.
• Risk of focusing too much on surface design instead of core functionality.
• Can lead to scope creep if too many ideas are introduced in prototyping stages.
Theories and Laws Related to Prototyping
• Iterative Design Principle: Systems improve through repeated cycles of prototyping and
testing.
• Rapid Application Development (RAD): Emphasizes quick prototyping and feedback
over long planning phases.
• Throwaway vs. Evolutionary Prototypes: Some prototypes are discarded after testing,
while others evolve into the final system.
Connection to Learning Outcomes
From this week’s lesson, you should be able to:
• Apply prototyping techniques to represent design ideas.
• Distinguish between low, medium, and high-fidelity prototypes.
• Select appropriate techniques (e.g., storyboard vs. wireframe vs. hi-fi) depending on
project stage.
• Understand prototyping as part of user-centered and iterative design processes.
Simplified Summary
Prototyping is about building models before the real thing. It helps designers and users “test
drive” ideas early. Low-fidelity sketches are quick and cheap, while high-fidelity ones look real
and allow usability testing. The ultimate goal is to save time, reduce costs, and create systems
that truly meet user needs.
Would you like me to format Week 6 into a PDF like Week 1, or should I keep the rest of the
weeks in text only (and then compile later)?
