When you present a screen flow for evaluation by a group of users, most people will have a tough time imagining how using the tool will feel to them in the end.
That’s a perfectly normal response and also why click dummies are so important for evaluating workflows and their usability and UX.
Click dummies are the interactive form of screen flows. Instead of showing multiple wireframes in an overview, a click dummy behaves like the actual application. Thus, the individual controls are usable, and you can move through the application. In other words, a click dummy is an interactive prototype.
This reference helps users imagine how the interaction with the application feels. Determining whether all information is available and all required functions have been integrated becomes straightforward. You can also check whether users can find and understand important information independently.
When creating click dummies, you can simply follow the construction manual of your screen flow. Depending on the tool, the implementation is complicated in different ways. In simple tools, you often place an invisible click area over individual interface elements and define to which wireframe the click dummy jumps to after clicking the button. These jump areas are not visible to users, only the wireframe interface elements. This capability allows you, for example, to insert “secret” buttons that are only relevant for the execution of tests (e.g., triggering error states).
Some tools link the interaction directly to the control element, so integrating additional surfaces is no longer necessary. For example, you can simply drag and drop the interaction paths to the next wireframes, as with the blue line shown here.
Creating the wireframes with the same tool as the click dummies saves you a lot of work because you can continue using your existing wireframes. Not only is it possible to switch between wireframes with a click, but button states can also be changed with a click, as shown in this figure.
How detailed you make your wireframes and, thus, also how detailed your click dummies are depends heavily on your goal. The closer you are to implementation, the better you can predict what will work and what won’t. At a certain point, however, the effort for prototyping exceeds the actual creation effort.
Tools for Creating Click Dummies
Immense importance lies in choosing the right tool for creating click dummies to make their creation as fast and easy as possible. In this section, we’ll provide a brief overview of some tools we’ve successfully used to design click dummies. Of course, you can use many other tools, but the following three have proven to be highly flexible and powerful:
- Axure RP
- Adobe XD
- Figma
In this section, we’ll focus on each tool’s advantages and disadvantages. We won’t present all the shared aspects of each tool: For example, all tools allow a click dummy to be shared via links, thus allowing a click dummy to be used on other devices in remote testing. Another common feature is the ability to store element libraries and thus rebuild your own (or someone else’s) existing design system.
Please be aware that the functionality of software tools changes relatively fast. Therefore, evaluate these tools with the most up-to-date information before deciding on the ideal one for your needs.
But now, let’s get into a short overview.
Axure RP
Axure RP, shown in the following figure, is one of the most powerful prototyping tools. From creating individual wireframes to completing interactive click dummies that look like finished products, anything is possible with Axure RP. In addition to enabling the visual design of click dummies and their interactivity, individual elements can even be implemented to use simple programming logic. Thus, you can create detailed interactions based on a user’s action and enable the output of errors—not at the push of a button—but in reaction to a user’s “incorrect” action.
You can display tables with filter options or create adaptive views for different devices, meaning you don’t need to create multiple click dummies for different devices: A click dummy automatically adapts to the device.
Another advantage? Axure RP can import files from Adobe XD and Figma. We always use Axure RP when we “need to go that extra mile.” Some examples include if we want to show some particularly sophisticated interactions, if the user needs to feel that data is being derived from somewhere specific, or if errors need to be mapped realistically to understand the consequences of actions. For example, you could create logons where the user enters data or search boxes where only specific search terms actually “work.”
Axure RP is mighty and, therefore, more complex than the other tools on our list. The Axure team has taken many opportunities to respond to market demand over the last 20 years. As a result, Axure RP is a bit more technical than the other two prototyping software solutions we discuss in this chapter. Nevertheless, Axure RP does not require programming expertise until the point at which the implemented logic itself becomes complex. Most UIs in Axure will require no programming at all.
Formally speaking, Axure RP could be considered the “top dog” of UX design tools, and its focus lies on interaction. In contrast, the other tools operate more in the UI design space, where the focus lies on interface design.
Adobe XD
Adobe XD, as shown in the next figure, is a prototyping tool from the Adobe family, meaning the tool is ideally linked to other suite applications like Adobe Photoshop or Adobe Illustrator. This integration is an advantage over the other two tools, especially when working extremely visually. Even though we are still in the realm of click dummies with Adobe XD, we consider great visual design as vitally important since additional effort can be avoided later if the rendering is done in the same tool as the wireframing.
Adobe XD has an evident design focus. The goal is to create visually superior click dummies that exploit the full potential of the design. Nevertheless, implementing interactions and switching states is also possible in Adobe XD. Adobe XD even supports the implementation of interfaces using voice control.
Overall, Adobe XD is a bit faster and easier to use than Axure RP and even more accurate the more you already use the Adobe suite. On the other hand, the scope for designing realistic interactions is significantly limited. Ultimately, Adobe XD has been catching up significantly in this area in recent years, offering increasingly more features for interaction design. However, its capabilities cannot yet match Axure RP, especially for dynamic content.
Figma
Figma, shown below, is a relatively new tool that has significantly benefited from the work-from-home trend—especially recently. Figma focused on collaborative work in teams at an early stage and implemented this capability much better than the tools before it.
With Figma, collaboration becomes possible because changes are saved live in the cloud. Even during editing, several people can create click dummies and prototypes simultaneously. A marker on the screen also shows all the participants who are currently working and where they are working. This capability was recently added to Adobe XD—but Figma is still more sophisticated in collaboration.
The advantage of Figma is, unfortunately, also a disadvantage. Ideally, the files are stored in the cloud for this collaborative work to function. Therefore, we only use Figma when a customer expressly requests its use and agrees to meet all data protection and confidentiality requirements. We recommend you find out in advance what requirements your IT department or your customers have regarding your tools.
Figma offers an easy introduction to click dummy creation and helps you find the best possible workflow in the early stages through simple workflows within the tool. Like Adobe XD, Figma emphasizes ease of access and offers simple interactions that can be quickly integrated into prototypes. However, the greater the complexity of the click dummies gets, the more likely you’ll find yourself back in Axure RP.
Making the Design Testable
Whatever tool you choose, the goal is always to make the design testable. By “testable,” we mean that you build the click dummy so that all the cases you want to evaluate later in a usability and UX test are testable through the click dummy.
For this purpose, you must consider what you’ll test early on. Often, click dummies are designed in advance so that the interaction is understandable but still does not represent the actual workflow, only a simplified one. This simplification makes conducting a user test difficult, especially when considering the user’s point of view regarding data appearing automatically in the test or the tool advancing in steps that the user (under normal circumstances) would take over.
As a general rule, you should remember: Even if the click dummy doesn’t look finished, the interaction with the user should be as finished as possible. Only in this way will you detect and eliminate potential stumbling blocks early on.
Of course, this advice only applies to the area you want to test with users. You can omit or simplify all areas “outside” that range to your heart’s desire or insert placeholders to lead users back to the desired test area.
Editor’s note: This post has been adapted from a section of the book Usability and User Experience Design: The Comprehensive Guide to Data-Driven UX Design by Benjamin Franz and Michaela Kauer-Franz.
Comments