Hi everyone!
Here at the support desk, we’ve seen a good number of questions from users regarding when to use dynamic panels in their projects. The short answer is: in a lot of situations! Dynamic panels are very versatile and can be used for a variety of purposes, like switching a widget’s appearance back and forth or creating drag and swipe interactions. There are some times where you’ll specifically want to use dynamic panels, but there are other times where using groups or interaction styles may be more appropriate. In this post, I wanted to go over three common scenarios and the approaches that might shine in each one.
Before we begin, I’d recommend checking out the following resources from our support page if you’re not yet familiar with the basics of interactions in Axure RP, dynamic panels, widget and interaction styles, or groups:
Multiple States - Dynamic Panels or Interaction Styles?
So let’s say you want to be able to switch a widget’s background color between two options, or change its text to bold and back based on an interaction–should you use a dynamic panel? If you only need to switch between two different appearances of a widget, you’ll likely want to use interaction styles instead. In RP, interaction styles are applied to a widget when a certain action is performed, like when the widget is moused over or selected.
Interaction styles can be used as a simple way to switch between two appearances of the same widget; in particular, the “selected” interaction style offers the most flexibility. For example, by creating a selected interaction style for a widget, you can change the widget’s style when it’s selected (set to its “Selected” state using a “Set Selected” action). The widget will then revert back to its original style when it’s unselected (set to its “Unselected” state by another Set Selected action). For a more hands-on experience with interaction styles, be sure to check out our interactive button tutorial here!
Since interaction styles are limited to only two states (e.g. when the widget is selected or not, when the widget is moused over or not, etc.), there are situations where you’ll want to use a dynamic panel instead. Dynamic panels can have multiple states, each of which can have a different version of the widget or widgets. You can quickly convert existing widgets into dynamic panels by right-clicking them and selecting “Convert to Dynamic Panel” from the context menu. Then, you can duplicate the panel’s first state and start modifying those duplicate states as desired. To switch between the different dynamic panel states, you’ll want to use the “Set Panel State” action.
If you do decide to use dynamic panels in this way, keep in mind that having a large number of dynamic panels (with multiple widgets and panel states) on the same page may have some adverse effects on your prototype’s performance and loading speed. While every project is different, we recommend previewing your project regularly and keeping an eye out for changes in performance. For more information about how certain widgets and interactions can impact a prototype’s performance, check out Ian’s post here.
Creating Menus - To group or not to group?
Now, let’s talk about creating menus in Axure RP. If you’re trying to design a fairly complex menu with multiple menu options, you’ll probably want to apply an interaction to multiple widgets at once. But now the question arises, should you opt for using groups or dynamic panels? If your primary goal is to show and hide a collection of widgets at once, you’ll most likely want to go with using groups. Groups make it very easy to move, show, hide, or apply other interactions to multiple widgets at the same time.
For example, if you’re creating a large navigation menu with buttons that reveal submenu flyouts as you hover over them, you might start by creating several menu options, grouping them together (via right-click > “Group” or the “Group” option at the top of RP), and then setting the entire group as hidden. You can then set up an interaction that shows the group of submenu options when the user mouses over a main menu option–since the submenu widgets are grouped, all of those widgets will be shown at the same time.
Take a look at this tutorial for a step-by-step guide on how you can create a flyout menu using groups!
However, if you’re looking to include any sort of push/pull interactions in your menu, you might want to use dynamic panels instead of groups. Because push/pull interactions evaluate widgets individually (even if they’re grouped), targeting groups with push/pull interactions presents a possibility for some individual widgets to get pushed or pulled unexpectedly out of place; things can get more unpredictable if some of those widgets are hidden. (If you’re interested, Anthony’s forum post here provides an in-depth explanation of why this happens). This issue becomes particularly noticeable when creating accordion menus, since accordions require multiple items to be pushed or pulled together to function properly.
To avoid this push/pull funny business, you’ll want to use dynamic panels. Push/pull interactions affect dynamic panels as a whole, so using a dynamic panel will ensure that the individual widgets within the panel will be pushed and pulled together. You can quickly convert a widget or multiple widgets into a dynamic panel (via right-click > “Convert to Dynamic Panel”) and then set the hide/show/toggle actions (with push/pull enabled) to target that panel containing the widgets.
If you decide to create a multi-level accordion menu by embedding multiple dynamic panels within each other, you may notice that some parts of the accordion are not being pushed or pulled at all. Because push/pull effects are contained within the dynamic panels they’re being triggered in, they’ll only affect the other widgets within that specific panel’s current state–the other widgets outside of the panel, such as the rest of the accordion, won’t be affected. There’s a quick workaround for this, which involves adding a sequence of actions that first hides the outer panel, toggles the inner content to show or hide it (adjusting the panel’s size accordingly), and then shows the outer panel again with its newly adjusted size. This makes it appear as if the content inside of the dynamic panel is pushing/pulling the rest of the accordion. Just make sure that the “Fit to Content” option is enabled on your dynamic panels! Here’s an example of what this might look like in RP:
For a more detailed explanation of this workaround, I’d recommend checking out Jane’s forum post here.
Interactivity in RP - What do dynamic panels have to offer?
With the vast range of widgets and interactivity that can be included in an Axure RP prototype, what do dynamic panels have to offer that other widget’s don’t? Besides the ability to have multiple states, dynamic panels have a number of unique interactions that aren’t available to other widgets–the most commonly-used of these are the “OnDrag” and “OnSwipe” interactions. With either your mouse (or finger, for touchscreen devices), the OnDrag interactions can be triggered by holding down and dragging the dynamic panel, and the OnSwipe interactions can be triggered by holding down and making a swiping motion on the panel. By adding OnDrag and OnSwipe interactions to your prototype, you can greatly increase its interactive capabilities.
To get a feel for how you might use the OnDrag interaction, check out our tutorial for creating a slider with a draggable handle here.
If you want to create an interactive component that can be dragged with a mouse or finger movement, or maybe a swiping function for a mobile prototype, reach for a dynamic panel.
I hope this post helps to address some of the common questions surrounding the use of dynamic panels. If you have any questions about when you might use dynamic panels, groups, or interaction styles, or if you have any scenarios where one is clearly better than the rest, please feel free to post them here!
Simon