5 Tips for Better Prototypes with GoodWire
5 Tips for Better Prototypes with GoodWire
Five more tips to take your dashboard prototypes in Figma to the next level
By now, you have probably mastered the basics of using the GoodWire, as outlined in the previous article. If not, I highly recommend you pause here and start with the Getting Started with the GoodWire article. It outlines the basics of getting and setting up the library and working with various components.
And now, let's dive into the more advanced prototyping tips to take your wireframes to the next level.
1. Annotate your wireframes
By default and by intention, the GoodWire has a pretty low level of fidelity. You only really need a few components - chart type, approximate complexity/number of data points, title, and axis labels. That's it. Most of the time, you won’t need anything else, but sometimes, you still need some extra commentary to explain the interactivity or other details.
Sticky notes are useful for annotating your prototypes beyond the fidelity of the available components—for example, to indicate the slices of a donut chart or stack in the column chart. The Note component is available on the Components page of GoodWire in various colors and sizes.
If the notes do not fit the desired space, you can use Figma's default Arrow shape to point it to an exact spot. Just hit Shift + L and drag your arrow.
2. Create interactive navigation
You will eventually present your dashboards to your stakeholders or test them with future users - that is one of the main purposes of the wireframe. So, helping them imagine how the dashboards will work in practice can go a long way.
One of the best ways to help their imagination is interactivity. Don't worry about the number of steps needed; it's quite fast and well worth it.
Start by creating your dashboards.
Duplicate the Dashboards menu component outside of your dashboards.
Create links to all dashboard pages from separate menu items:
on click - Navigate to
Create a component out of the Dashboards menu
Replace the menu on all the dashboards with its instance. That way, the interactions (navigation between pages) will be duplicated automatically across all dashboards.
Now, you can adjust the states of menu items to match the selected dashboards.
Last step - add a Flow starting point to your first dashboard and enjoy the working prototype!
See the video of creating the interactive navigation step by step:
You can also see the Demo dashboard live prototype and explore the navigation on your own.
3. Drill to modal window
GoodData platform also supports another type of interactivity - drilling into the visualization. That means showing a particular visualization in a modal window. You can learn more about this interaction pattern and how to set it up in the GoodData documentation.
Now let's look at how to set it up in the Figma prototype:
Insert the Modal component on a canvas outside your dashboard
Detach the Modal component so it becomes a Frame
Insert your chart into the Modal frame and adjust it as needed
Select the chart element on your dashboard that will trigger the drill
Switch to prototyping mode
Drag the connection to the Modal and set it as follows:
On click
Open overlay
Instant
Centered
Check Close when clicking outside
Check Add background
Set background color to #FFFFFF at 75% opacity
Done. Play the prototype and check how it works.
Bonus tip: Set the X button in the modal to close it:
Select the X button
Drag the prototyping connection to the Close overlay
4. Create sticky navigation
Effective presentations sometimes hinge on little details. For example, there is a scrolling behavior. The dashboard menu, title, and filters stick to the top of the page when the user scrolls in the GoodData platform IRL. You can easily simulate this behavior with Figma prototyping capabilities and give your prototypes a nice final touch.
Here's how to do it:
Group the Dashboard title and Filters bar
Select the group you just created and the Dashboards menu and bring them front in the layers hierarchy
Switch to prototype mode and set Scroll behavior - Position to Sticky (stop at the top edge) for both the grouped title and filters and for the dashboard menu
Done. Play the prototype and enjoy.
Bonus tip: Dashboard building best practices
Now, you should know the moves for assembling dashboard components in Figma. But there is more to it - the whole craft of analytics product design. Before you start building the dashboards, I would advise you to familiarize yourself with general dashboard-building principles. You can start by going through the following articles to learn the basics:
In the article 7 Crucial Tips for Building Dashboards Users Actually Love to Use, you'll learn a few crucial tips to get you started. You'll discover how to define the problem, understand user requirements, and focus on simplicity and clarity. Additionally, you'll learn to use appropriate visualizations, ensure data accuracy, and continuously iterate based on user feedback to develop engaging and user-friendly dashboards.
Next is the article How to Choose the Best Chart Type to Visualize Your Data. It covers the key considerations for choosing the right chart, such as understanding your data, the message you want to convey, and the audience's needs. You'll explore different chart types and their optimal use cases to enhance the clarity and impact of your data presentations.
Another important aspect of dashboard building is the information architecture. Check the article Six Principles of Dashboards Information Architecture to learn about the key principles of dashboard information architecture that ensure an intuitive and effective user experience. It covers essential guidelines on structuring and organizing data, emphasizing clarity, consistency, and ease of navigation. By following these principles, you can design dashboards that make data insights easily accessible and actionable for users.