Design and Prototype an Interactive Quiz with XD

Design by Codify Design Studio

by Chris Converse

posted on 01-14-2019

When designing your project, it is important to keep in mind the steps a user needs to take in order to complete a task. We also need to design the feedback a user will encounter during the project. This is the exact type of work for which XD was created to help you produce.

Setting up XD artboards for user feedback

For our quiz, we’ll need to provide the user with a question and range of answers. Then, we’ll need to provide feedback for both correctly and incorrectly answered questions. And finally, we’ll need to consider providing feedback for their overall progress as well as a way to gauge their success rate.

We’ll use one artboard for the correct answer, and a second series of artboards for incorrect answers. For the correct answer, we’ll use a green checkmark and some additional text to support the answer. For an incorrect answer, we’ll use a red “x” and some text explaining why the answer is not correct. Each feedback artboard will also include a dot for the progress bar, a ring for the correct answer, and a next button — so the user may continue to the next question. Once we have our design ready, we can create the interactivity in the prototype workspace.

Putting it all together with interactivity

In the XD Prototype workspace we can select the correct answer, Titan, and link it to the correct artboard. In order to have the artboard show as an overlay, we set the action in the settings dialog to overlay.

When specifying an overlay action, the originating artboard will display a green box indicating the placement of the artboard being loaded as an overlay. In the case where the overlay artboard is smaller, you can position it anywhere within the originating artboard.

On the question-and-answer artboard, we can link one of the incorrect answers to the incorrect artboard and specify the action as an overlay as well. If you want to customize the incorrect screen, as in the example above, you’ll need a corresponding artboard for each incorrect answer. If, however, you simply want to indicate the answer as being incorrect, it is possible to reuse the incorrect artboard for each incorrect artboard. We discuss that technique in the webinar below.

Learn more about designing and prototyping any interactive project in XD

Your design responsibilities include more than just print. Email designs, web pages, online galleries, and interactive forms all need your creative eye — and Adobe XD has your back. Learn how this revolutionary design application lets you share artwork and typography with InDesign, Illustrator, and Photoshop — all while providing amazing capabilities that include repeat grids, reusable symbols, and interactive prototyping.

Join us in this step-by-step recorded webinar that will teach you how to meet the demands of this fast-paced, multidisciplinary design industry with tools that were conceived to help you succeed. We’ll also share how Josh Souter, senior creative director, Adobe Creative Studio, uses Adobe XD CC to design and prototype the website more quickly than ever before.

Adobe Creative Cloud e-learning series

Show Them What You’re Thinking— Mapping the User Journey

Topics: Art, Creativity

Products: Photoshop, Creative Cloud, XD