Prototypes

Definición Rápida

A prototype is an interactive simulation of a final product used to test and validate design concepts before development. Unlike mockups (which are static), prototypes are “clickable” and allow users to experience the flow of an application.

What are Prototypes?

If a mockup is the color model of a house, a prototype is a virtual guided tour through that model. It allows you to open doors, turn on lights, and move between rooms to understand what it feels like to live in it.

A prototype simulates user interaction with the interface. Its fidelity can vary enormously:

• Low-fidelity prototype (on paper): It can be as simple as a series of paper sketches that a “human computer” swaps out as the user “clicks” on the drawn buttons.
• Medium-fidelity prototype (clickable): Generally created from digital wireframes, connecting screens to simulate basic navigation.
• High-fidelity prototype (interactive): Created from mockups, this type of prototype looks and feels very similar to the final product, including transitions, animations, and micro-interactions.

Why are they important?

• They validate design with real users: They are the primary tool for [[Usability Testing]]. They allow you to observe how users interact with the design before writing a single line of code.
• They save development costs: Discovering that a flow is confusing during the prototyping phase is 100 times cheaper to fix than when the product has already been programmed.
• They improve communication: An interactive prototype communicates a design idea much more clearly and effectively than a static document. It allows stakeholders to “feel” the experience.
• They enable rapid iteration: They can be created and modified in a matter of hours or days, facilitating the exploration of multiple design solutions.

How are they made?

The process is almost always done in design tools like Figma, Sketch, or Adobe XD.

1. Define the scope: What do you want to test with this prototype? You don’t need to make everything interactive. Focus on the key user flow you need to validate. Example: “Test the checkout process from cart to purchase confirmation.”
2. Create the screens: You need to have the Wireframes or Mockups ready for all screens that are part of that flow.
3. Connect the elements (Hotspots): In your design tool, select an element that should be interactive (e.g., a “Buy Now” button).
4. Define the interaction and destination: Drag a connector from that element to the destination screen. Define the interaction type (e.g., “On click”) and the transition (e.g., “Instant,” “Slide left”).
5. Repeat the process: Continue connecting all interactive elements needed to complete the flow.
6. Test the prototype: Before showing it to anyone, click through it yourself to make sure all connections work as expected.

Mentor Tips

• Prototype with a purpose: Always be clear about what research question you want to answer with your prototype. This will help you avoid wasting time making every part of the design interactive.
• The right fidelity for the right moment: Use low-fidelity prototypes in early stages to validate broad concepts. Use high-fidelity ones later to test interface details and usability.
• Don’t seek perfection: A prototype is not the final product. It’s fine if some things don’t work or if there are dead ends, as long as you can test what you need to.
• Guide the user, but not too much: During a test, if the user gets stuck, you can tell them “Imagine this part works and takes you here.” The goal is to get feedback on the main flow.

Resources and Tools

• Prototyping Tools:
  • Figma: The most popular. It allows designing and prototyping in the same tool very smoothly.
  • ProtoPie: For very high-fidelity prototypes with complex logic, variables, and device sensor access.
  • Marvel App: A simple and quick option for creating prototypes from images or sketches.
• Articles and Guides:
  • Prototyping 101 - Nielsen Norman Group
  • A Guide to Prototyping in UX Design - CareerFoundry