91.410
Prototyping User Interfaces

---

Objectives

Upon completion of this lesson, you will be able to:

• define what prototyping is

---

Introduction

In the context of user interface (UI) design, prototyping refers to the creation of a preliminary version or a representation of a user interface design concept. A prototype is typically developed to demonstrate and test the functionality, layout, and interactions of a proposed UI before investing significant resources into its development.

Prototyping can take various forms, ranging from low-fidelity sketches or wireframes to high-fidelity interactive mockups or even fully functional prototypes. The level of fidelity depends on the purpose of the prototype and the stage of the design process.

Prototyping serves several important purposes in UI design:

1. Evaluating and refining design ideas: Prototypes allow designers to gather feedback from stakeholders, users, and team members early in the design process. By presenting an interactive representation of the UI, designers can assess the usability, clarity, and effectiveness of their design choices.

2. Testing and validating concepts: Prototypes enable designers to test specific interactions, user flows, or features to ensure they meet user needs and expectations. Usability testing with prototypes can uncover potential issues or areas for improvement before the actual development phase begins.

3. Communicating and aligning with stakeholders: Prototypes serve as a communication tool to convey design concepts and intentions to clients, developers, and other project stakeholders. They provide a tangible representation of the proposed UI design, making it easier for non-designers to understand and provide feedback.

4. Saving time and resources: By identifying potential design flaws or usability issues early on, prototypes help prevent costly and time-consuming revisions during the development stage. They allow designers to iterate and refine the UI design before the more significant investment of development resources.

Overall, prototyping in UI design helps bridge the gap between conceptualizing an interface and implementing it, facilitating collaboration, testing, and refinement throughout the design process.

Types of Prototypes

There are various prototyping methods in UI design, each with its own purpose and use. Here are some common prototype methods and their applications:

1. Paper Prototypes: Paper prototypes involve sketching or drawing UI screens and interactions on paper. This low-fidelity method is useful for early-stage ideation, quick iterations, and gathering feedback on basic concepts and layouts. Paper prototypes are cost-effective and allow for easy modifications.

2. Wireframes: Wireframes are low-fidelity, simplified representations of UI designs that focus on layout, structure, and content. They typically use basic shapes, lines, and placeholders to outline the UI elements. Wireframes are useful for visualizing information architecture, navigation, and content placement, and for early usability testing and feedback gathering.

3. Interactive Mockups: Interactive mockups are mid to high-fidelity prototypes that simulate the UI’s look and feel, including visual elements, colors, and basic interactions. Tools like Sketch, Figma, or Adobe XD are commonly used to create interactive mockups. These prototypes allow for more realistic user testing, feedback collection, and usability evaluation.

4. Clickable Prototypes: Clickable prototypes are interactive and functional representations of a UI that can be navigated and interacted with, usually created with specialized prototyping tools or through front-end development. Clickable prototypes simulate user flows, transitions, and specific interactions, providing a realistic user experience. They are valuable for usability testing, user feedback, and demonstrating complex interactions.

5. HTML/CSS Prototypes: HTML/CSS prototypes involve developing a partial or full UI using front-end technologies like HTML, CSS, and JavaScript. These prototypes are closer to the final product and offer a realistic user experience. They are helpful for testing responsive design, advanced interactivity, and front-end development feasibility.

6. Functional Prototypes: Functional prototypes are fully interactive and functional representations of a UI, often developed with programming languages and frameworks. These prototypes mimic the actual product’s behavior and allow for comprehensive testing of complex features and interactions. They are useful for evaluating technical feasibility, user testing, and providing a realistic experience to stakeholders.

It’s worth noting that the choice of prototype method depends on factors such as the project’s stage, goals, budget, and available resources. It’s common to use a combination of different prototyping methods throughout the design process, starting with low-fidelity options and gradually increasing fidelity as the design solidifies and progresses.

Wizard-of-Oz Technique

The “Wizard of Oz” technique is a prototyping method in which the appearance of an interactive system is simulated to users, while the system’s responses are actually controlled by a human operator behind the scenes. This method allows designers to test and gather user feedback on the user interface and user experience (UI/UX) without fully developing the actual automated system.

The name “Wizard of Oz” originates from the famous book and movie, where a character pretends to be a powerful wizard but is revealed to be an ordinary person operating hidden machinery. Similarly, in the prototyping context, the human operator takes on the role of the “wizard” who controls the system’s responses, while the user interacts with what appears to be an automated interface.

Here’s an overview of the steps involved in the “Wizard of Oz” technique:

1. Design the User Interface: Create the visual design and layout of the user interface that you want to test. This can be done using wireframing tools or even simple paper sketches.

2. Define User Scenarios: Identify specific tasks or scenarios that users will perform during the testing. Determine the inputs and expected system responses for each scenario.

3. Prepare the Wizard: The human operator (the “wizard”) needs to be trained on how to respond to user interactions based on predefined rules or scripts. This can involve prewritten responses, predefined decision trees, or guidelines for improvisation.

4. Conduct User Testing: Users interact with the user interface, believing that the system is fully automated. The “wizard” observes the user’s interactions and controls the system’s responses manually, following the predefined rules and guidelines.

5. Collect Feedback: During or after the testing session, gather feedback from users about their experience, thoughts, and any difficulties they encountered. This feedback can be in the form of interviews, surveys, or observation notes.

6. Iterate and Refine: Analyze the feedback received and use it to improve the user interface design. Make necessary adjustments to the design, interactions, or system responses based on the insights gained from user testing.

The “Wizard of Oz” technique is particularly useful when developing complex or intelligent systems that are not yet fully automated. It allows designers to test and validate the UI/UX aspects of the system before investing resources in full development. This method is often employed in the early stages of a project when the interface design is still evolving and requires user feedback to drive improvements.

By using the “Wizard of Oz” technique, designers can gain valuable insights into user interactions, understand usability issues, and refine their design direction, ultimately leading to a more user-centered and effective final product.

Wireframes

Wireframes are low-fidelity visual representations of a user interface (UI) design. They serve as a skeletal framework that outlines the structure, layout, and content of a digital product, without focusing on visual details such as colors, imagery, or typography. Wireframes are typically created using simple shapes, lines, and placeholders to convey the basic elements and hierarchy of a UI.

Wireframes play a crucial role in the prototyping process by providing a foundational blueprint for the UI design. They serve as a bridge between the initial conceptualization of an interface and the creation of more detailed prototypes or mockups. Here’s how wireframes fit into the prototyping process:

1. Conceptualization and Ideation: Wireframes are often used in the early stages of a project to explore and brainstorm UI ideas. They help designers and stakeholders visualize the overall structure and layout of the UI, enabling discussions about content placement, navigation, and functionality.

2. Information Architecture and User Flows: Wireframes help establish the information architecture of a UI by indicating how different elements and content will be organized and connected. They allow designers to map out user flows and interactions, ensuring logical and intuitive navigation within the interface.

3. Usability Testing and Feedback Gathering: Low-fidelity wireframes are useful for gathering early user feedback and conducting usability tests. By presenting a simplified representation of the UI, wireframes allow users to focus on the core functionality and interactions. Feedback obtained from wireframe testing can inform and guide further iterations of the design.

4. Communication and Collaboration: Wireframes serve as a communication tool between designers, stakeholders, and development teams. They provide a clear and concise representation of the UI structure, making it easier for non-designers to understand and provide input. Wireframes facilitate discussions, revisions, and alignment before investing significant time and resources in higher-fidelity prototypes.

5. Iterative Design Process: Wireframes are highly flexible and allow for quick iterations and modifications. They enable designers to explore multiple design alternatives, test different layouts, and refine the overall UI structure. As the design progresses, wireframes can be transformed into more detailed prototypes or visual mockups.

6. Handoff to Development: Wireframes act as a blueprint for the development team, providing them with a clear understanding of the UI structure and functionality. They serve as a reference for implementing the desired user experience and can facilitate a smoother transition from design to development.

Overall, wireframes are an essential component of the prototyping process, providing a foundational structure and guiding subsequent design iterations. They help designers communicate and validate their ideas, gather early user feedback, and set the stage for creating more detailed and interactive prototypes.

Why do Wireframes look so bland?

Wireframes should have an intentional low-fidelity look and feel to them. There are good reasons for that:

1. Wireframes clearly indicate the preliminary nature of the design

   Wireframes serve as an unmistakable representation of an early-stage design, ensuring that it is not misconstrued as the final version of the application. Their low-fidelity nature, devoid of intricate details and limited color usage, directs attention towards the structural aspects. The focus at this stage lies on establishing the design’s framework before delving into visual design elements, which will receive attention in subsequent phases.

2. Wireframes foster an environment for constructive discussion

   The rough nature of wireframes encourages open and fruitful discussions. It creates an atmosphere where feedback and critique are welcomed, as wireframes are perceived as a work in progress. Due to their quick production, stakeholders are encouraged to provide their input freely. Each wireframe screen typically requires only a few minutes to create, allowing for iterations without concerns about starting from scratch. The ultimate objective at this juncture is to optimize usability, making iterative revisions a normal and anticipated part of the design process.

3. Wireframes provide a clear indication that no code implementation has taken place

   Presenting wireframes to customers or stakeholders instead of finalized app screenshots eliminates any misconceptions that the depicted screens represent a functioning application. The absence of detailed visual elements and the wireframe format effectively communicate that no code has been written yet. Wireframes effectively mitigate the risk of premature assumptions regarding the development progress and ensure focus remains on refining the design before implementation.

Lecture

The lecture below by Dr. Schedlbauer summarizes the key concepts of prototyping.

Slide Deck: S-91-410 Prototyping

Summary

In this lesson, we explored the concept of prototyping in the context of user interface (UI) design. Prototyping is the process of creating preliminary versions or representations of UI designs to evaluate, test, and refine them before actual development.

We learned that prototypes can take various forms, from low-fidelity sketches and wireframes to high-fidelity interactive mockups or functional prototypes. The level of fidelity depends on the purpose and stage of the design process.

The lesson highlighted the key purposes of prototyping in UI design. Prototypes serve as a tool for evaluating and refining design ideas, allowing designers to gather feedback and assess usability. They also help in testing and validating concepts, identifying potential issues or areas for improvement early on.

We discussed how prototypes play a crucial role in communicating and aligning with stakeholders. They provide a tangible representation of the proposed UI design, facilitating understanding and feedback from clients, developers, and other project stakeholders.

Furthermore, we explored how prototyping saves time and resources by uncovering design flaws and usability issues early in the process. This helps prevent costly revisions during development and enables designers to iterate and refine the UI design before committing significant resources.

In conclusion, prototyping is a vital step in UI design that bridges the gap between conceptualization and implementation. It allows designers to gather feedback, test interactions, communicate effectively, and optimize their designs, ultimately resulting in more user-friendly and successful user interfaces.

---

Files & Resources

All Files for Lesson 91.410

---

References

Ross, Jim (May 8, 2017). Prototyping: Paper Versus Digital (Practical Usability, UX Matters.

Ramaswamy, S. (n.d.). The Wizard of Oz Method in UX. Nielsen Norman Group.

Errata

Let us know.