{"id":10161,"date":"2015-11-25T23:27:15","date_gmt":"2015-11-26T07:27:15","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=10161"},"modified":"2024-09-09T07:33:53","modified_gmt":"2024-09-09T14:33:53","slug":"a-10-minute-rapid-ux-prototyping-lesson","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/a-10-minute-rapid-ux-prototyping-lesson\/","title":{"rendered":"A 10-Minute Rapid UX Prototyping Lesson"},"content":{"rendered":"

Regardless of what tool you use to create your prototype, you need to understand what to include and what to leave out.<\/p>\n

In this post, we’ll explain the two main components of all lo-fi prototypes, then start practicing.<\/p>\n

Interactions<\/h3>\n

What interactions will you be showcasing in your prototype?<\/p>\n

Each interaction includes a trigger (i.e. \u201cWhat triggers the action?\u201d) and an action (i.e. \u201cWhat actually happens?\u201d). A trigger can be a tap, click, hover, swipe, key press, page-load, etc; whereas, actions can include show element, hide element, go to page\/URL, scroll, disable\/enable, check\/uncheck, etc.<\/p>\n

\"image01\"<\/p>\n

Photo credit: UXPin<\/a><\/em><\/p>\n

Flow<\/h2>\n

What are your user flows<\/a>?<\/p>\n

If you have an idea of which personas will be testing the prototype, think about what happens before and after a user is on a particular page. As\u00a0first described in Interaction Design Best Practices<\/a>, you can link up your pages and create as many flows as you need to, especially if you have several personas.<\/p>\n

For example, for an application that does reporting and analytics, you may have one flow for the Executive who will be reading the reports and an entirely separate flow for the Business Analyst who will be building the reports. The experience is vastly different for those personas, so think about how they will be interacting with your prototype.<\/p>\n

\"image00\"<\/p>\n

Photo credit: UXPin<\/a><\/em><\/p>\n

Practicing the UX Trade<\/h2>\n

Now let’s dive into my tool of choice to get started.<\/p>\n

UXPin<\/a> offers some excellent tools for building low-fidelity prototypes, including responsive breakpoints<\/a> that can help you simulate site behavior in different screen resolutions, setting up interactions between UI elements and pages, creating multiple element states, and more.<\/p>\n

In this hands-on example, we\u2019ll create a multi-state prototype to simulate the interactions a user has with a tabbed container. Each tab contains a different value proposition, which is a combination of feature benefits and imagery.<\/p>\n

If you haven\u2019t already, go ahead and create a free UXPin account <\/a>so you can follow along. The live preview of the project is available here<\/a>, so feel free to open the project for quick reference.<\/p>\n

Step 1: Create low-fidelity wireframe in UXPin<\/h3>\n

Using UXPin\u2019s wireframing tools, we created a low-fidelity wireframe with the following elements:<\/p>\n