Lecture 9

Design -Prototyping

Instructor: Nadeem Zaidkilani

[email protected]
 What is a prototype?

In Human-Computer Interaction (HCI), a prototype refers to a preliminary version or model of a software or hardware
system that is developed to test and validate design ideas. Prototypes can vary in fidelity, from low-fidelity (such as
sketches or paper mockups) to high-fidelity (more detailed digital simulations resembling the final product)

Prototypes are essential tools in interaction design, serving as tangible representations of conceptual designs that users,
designers, and other stakeholders can interact with to explore and validate ideas
 Prototype Forms

• Cardboard: Simple, physical mock-ups that represent the layout and structure of a design.

• Foam: Used to create physical models of devices or interfaces, offering a tactile way to explore shape and ergonomics

• Clay: Malleable material to model physical aspects of a product, useful for exploring ergonomic and aesthetic features.
• Software: Digital prototypes ranging from low-fidelity wireframes to high-fidelity interactive simulations,
created using prototyping tools or programming languages.
• Video: Demonstrations or simulations of how a system will work, often used to convey user interactions and
scenarios.
• Paper: Basic sketches or detailed mock-ups on paper, allowing for quick and easy iteration of design ideas

• Website: Online prototypes that simulate the user experience of a web-based system, allowing for real-world
testing and feedback.

• Sketches: Quick drawings to visualize and brainstorm different design concepts.

• Index Cards: Used to represent individual screens or components, allowing for

easy reordering and iteration
• A storyboard is a series of illustrations or images displayed in sequence to pre-visualize the interaction and
flow of a user interface or experience.

• a PowerPoint show

• Lump of Wood Prototype (e.g., PalmPilot)

A physical, often simple, mock-up of a device made from materials like wood to simulate the shape and size of the final
product.
Storyboard

Cardboard

Sketch
 Why prototype?

1. Explore and Visualize Ideas:

• Quickly generate and test design concepts.
• Visualize ideas early without heavy investment.
2. Gather User Feedback:
• Conduct usability testing to identify issues.
• Refine designs based on user feedback.
3. Communication Tool:
• Align stakeholders with a clear visual of the design.
• Facilitate team collaboration.
4. Identify and Fix Problems Early:
• Detect and correct design flaws early.
• Reduce the risk of costly changes later.
5. Evaluate Feasibility:
• Test the technical feasibility of features.
• Plan resources and development time accurately.
6. Engage Users in Design:
• Involve users to ensure the design meets their needs.
• Conduct contextual testing for realistic feedback.
 Which aspects of a design or system should be created and tested during the
prototyping phase?

User Interface: Layout, design, and navigation.

•Interactions: Gestures, controls, and feedback.

•Functionality: Core features and workflows.

•Content: Text, labels, and multimedia.

•Usability: Ease of use and accessibility.

•Physical Form: Ergonomics, size, and shape (for hardware).

 Types of Prototype

• Low-fidelity Prototyping
• Medium fidelity prototyping
• High-fidelity prototyping
Low-fidelity Prototyping

• Description: A low-fidelity (low-fi) prototype is a simple, often hand-drawn representation of a design used to
visualize and test basic concepts and interactions quickly.
• Characteristics:
• Simplistic Design: Basic sketches or wireframes without detailed graphics or colors.
• Rapid Creation: Quick and inexpensive to create, allowing for easy iteration.
• Focus on Structure: Emphasizes layout, flow, and basic functionality over visual design.
Storyboards and sketching are considered as low fidelity Prototyping
 Medium-Fidelity Prototyping
Detailed Interactions: While the responses are manually controlled, the interactions can be quite detailed and
realistic from the user's perspective.

Functional Simulation: The system appears functional to the user, but without needing full backend development.

User Experience: Provides a more interactive and believable experience compared to low-fidelity prototypes like
sketches or storyboards.

Wizard-of-Oz Prototyping(Hidden People) and Wireframe are an example of Medium-Fidelity Prototyping

where a human simulates the behavior of the system behind the scenes, often used for testing complex interactions
without fully developing the technology.
 Wireframe

• Description: A wireframe is a low-fidelity visual representation of a user interface that outlines the
basic structure, layout, and functionality of a web page or application screen.
• Characteristics:
• Simplicity: Basic design with minimal detail; focuses on layout and content placement.
• Components: Typically includes placeholders for text, images, buttons, and other interface elements.
• Interactivity: May show basic navigation and interactions but does not include detailed design or
content.
 High-Fidelity Prototyping

• Description: High-fidelity (high-fi) prototypes are detailed, interactive representations of a design that closely
mimic the final product in appearance, behavior, and functionality.
• Characteristics:
• Detailed Design: Includes realistic visuals, accurate colors, fonts, and images.
• Interactive Elements: Fully interactive elements that simulate actual user interactions, such as buttons,
sliders, and forms.
• Functionality: This can include some or all of the functionality of the final product, allowing users to
experience a near-complete version of the system.
Software Applications and Websites are considered high-fidelity Prototyping
Low-Fidelity: Simple sketches or wireframes without interactivity or detailed design.

Medium-Fidelity: Interactive wireframes with basic navigation and functionality but without full visual detail or
backend logic.

High-Fidelity: Fully designed and interactive prototypes with realistic visuals and complete or near-complete
functionality.

•
Compromises in Prototyping
Description: Prototyping often involves trade-offs to balance between detail, functionality, and
resource constraints. Understanding and managing these compromises is crucial for effective design.
Types of Compromises:
1. Horizontal Compromise:
• Description: Covers a wide range of functions or features but with limited detail or depth.
• Example: A software prototype might include multiple features like user profiles, messaging, and
notifications but with minimal functionality and basic design.
• Impact: Helps in understanding how different features interact but lacks depth in any single area.
2. Vertical Compromise:
• Description: Provides detailed design and functionality for a limited number of features.
• Example: A prototype that focuses extensively on the checkout process of an e-commerce site,
including detailed interactions and visual design, but ignores other features like user accounts or
product browsing.
• Impact: Allows in-depth testing of specific features but does not represent the full breadth of the
final product.
Aspect Low-Fidelity Prototypes High-Fidelity Prototypes

Advantages Disadvantages
Higher cost due to advanced tools and detailed
Cost Low cost; inexpensive to create.
design work.
Time-consuming to create; involves detailed
Development Time Quick to create; allows rapid iteration and exploration.
design.
Less flexible; changes are more complex and time-
Flexibility Highly flexible; easy to modify and iterate.
consuming.
Useful for getting early feedback on basic concepts Provides detailed feedback on specific design
Early Feedback
and interactions. elements and functionality.

Simple tools (e.g., paper, sketches) make it easy to Realistic representation helps users understand
Simplicity
focus on core concepts. the final product better.

Disadvantages Advantages

Lacks detail; does not accurately represent final Highly detailed; close to final design but requires
Detail
design. more effort.

Functionality Limited or no interactive elements; basic functionality. Advanced functionality and realistic interactions.

Limited in simulating real user experience; general Allows for thorough usability testing with realistic
Testing
feedback. interactions.
Closely resembles the final product, providing a
Realism Does not mimic the look and feel of the final product.
realistic experience.
Complex; requires detailed design and advanced
Complexity Simplistic; may not fully capture complex interactions.
prototyping tools.
Thank you for your attention.