Exercises: Dynamic Panels

Dynamic Panels make it easy to access lots of content within the same section of a screen, by dividing content up between different panels. Content placed in a specific panel will appear depending on how the user interacts with the prototype.

Here are five examples of how to use Dynamic Panels in your prototypes. We recommend that you try them out for yourself, following the steps below.

Exercise 1: Prototyping interactive thumbnails

With interactive thumbnails, users can preview content on a website before loading it.

To create interactive thumbnails in your prototype, you’ll need to combine the Dynamic Panel widget with a “Change style” action. When the user hovers over an image thumbnail with their mouse, the background of the Dynamic Panel will change and zoom in on the image.interactive thumbnails
Follow the steps below to simulate interactive thumbnails in your Justinmind prototypes:

  1. In a web prototype, drag a Dynamic Panel to the Canvas. Resize and reposition it on the Canvas to match our example.
  2. Drag four Image widgets below it and arrange them to match our example.
  3. Add a thumbnail image to each.add thumbnail
    Note: you will need four larger versions of these thumbnail images. The larger images will be displayed in the Dynamic Panel as the user clicks on each image thumbnail.
  4. Select the first thumbnail image and go to the Events palette. Click the “Add event” button.thumbnail add event
  5. Add on “On mouse over” + “Change Style” event, selecting Panel 1 of the Dynamic Panel as the target of the action.

    For the style change, select the ‘Background image’ property and add the larger version of the first thumbnail image. Click “OK”.Change background image event
  6. Repeat steps 3 – 5 for the rest of the thumbnail images, changing the larger version of the thumbnail in each event.

Click “Simulate” and hover your mouse over each image to see a larger version of the image in the Dynamic Panel.

You can download our example here.

Exercise 2: Design a confirmation dialog

In this example, we’ll create a confirmation dialog that displays the terms and conditions of a sign up form in a mobile app. When the user taps on the ‘Terms and conditions’ link, they’re taken to a dialog where they can read the information.

To navigate back to the form, they can tap the “Close” button.design confirmation dialog
Follow the steps below to design a confirmation dialog using the Dynamic Panel widget:

  1. Create a mobile app prototype with a sign up form by dragging Input Text Fields, Text widgets and a Button to the Canvas.

    Reposition them and customize them on the Canvas to match our example above.text elements canvas
  2. Drag a Text widget and Check Box to the bottom of the Canvas. From here the user can navigate to the Terms and Conditions during simulation.

    Write “I agree with the Terms and Conditions” in the Text element.text widget
  3. Select the “Terms and Conditions” section of text and change its color and underline so it looks like a link.
  4. Drag a Dynamic Panel to the Canvas. Add a second panel (click ‘+’ at the top of the Dynamic Panel). Resize it to match the size of the Canvas.
  5. Double click on Panel 2 to edit its contents. Go to the Properties palette and make the background of the panel white and add a shadow.clear button
  6. Next, drag two Paragraph widgets inside the panel, one below the other. Add a “Terms and Conditions” title to the first and then add your terms and conditions to the second.

    Then, drag a clear circle icon (“Clear” from the iOS Icons library or “Clear Circle” from the Android Icons library) to the top right corner of the panel. This icon will allow the user to close the Terms and Conditions screen during Simulation.paragraph add event
  7. Back in the Canvas, select the “I agree with the Terms and Conditions” text and add an “On Tap” + “Set Active Panel” event, selecting Panel 2 as the panel to be set as active.
  8. Go to Panel 2 of the Dynamic Panel (by selecting it from the drop-down list in the Canvas or the Outline palette), select the clear circle icon add an “On Tap” + “Set Active Panel” event, selecting Panel 1 as the panel to be set as active.

Click “Simulate” and click the hyperlink to be taken to the Terms and Conditions screen. Tap the clear circle icon to return to the app’s sign up form.

You can download our example here.

Exercise 3: Show/Hide form fields

Input forms, such as registration and search forms, can be overwhelming for users if there are too many fields. By giving the user the option to show or hide fields, users can choose how to interact with your form.show hide form field
Follow the steps below to learn how to show and hide information in a sign up form, using the Dynamic Panel widget:

  1. Create a new mobile app prototype and use Text and Input Text Field widgets to create the “First name”, “Last name” and “Email” fields that appear in our example.input text field
  2. Drag a Dynamic Panel widget to the Canvas and place it below your sign up form fields. Add a second panel (select the Dynamic Panel and click the ‘+’ button).add dynamic panel
  3. Go to Panel 1 and double click it to edit its content.

    Add a Text widget and write “Show more options” in it.

  4. Go to Panel 2 and add “Address” and “Country” fields (with text boxes and Input Text Fields) to it.

    Then, add a Text widget below these fields and write “Hide options” in it.address country
  5. Go back to Panel 1 and select the “Show more options” text box. Go to the Events palette and click the ‘Add event’ button

    Add an “On Tap” + “Set Active Panel” event. Select Panel 2 from the Canvas or Outline palette as the active panel and click “OK”.

  6. Back in the Canvas, go to Panel 2 and select the “Hide options” text box. Go to the Events palette and click the ‘Add event’ button.

    Add an “On Tap” + “Set Active Panel” event. Select Panel 1 from the Canvas or Outline palette as the active panel and click “OK”.

Click “Simulate” and click (if simulating on desktop) or tap (if simulating on a mobile device) “Show more options”. The additional search fields will appear. Click/Tap “Hide options” to hide the additional search fields.

You can download our example here.

Exercise 4: Navigation tab design

Tab navigation is a great way to organize lots of information on a single screen. Each tab displays different pieces of content (or screens). When the user clicks/taps on one, it becomes active.

You can create tabs in your Justinmind prototypes with Dynamic Panels, with each tab represented by a different panel.navigation tab design
Follow the steps below to create tabs in your prototype:

  1. In a new web prototype, drag four Rectangle widgets to the Canvas. These will be the tabs the user can navigate between. Style them as preferred name them “Tab One”, “Tab Two”, “Tab Three” and “Tab Four”.

    Position them horizontally on the Canvas (to match our example) and from the Properties palette, align the text vertically and horizontally.

    By default, the furthest-left tab (“Tab One”) will be the selected tab. Change the color of the background and text of the furthest-left Rectangle so that it appears as the selected tab.tab one properties
  2. Next, drag another Rectangle widget below the tabs and resize it to match our example. This Rectangle will act as the background layer for the window that each tab displays.

    Drag content (such as Image and Text widgets) on top of the Rectangle to create the content of your first window.tab one paragraph
  3. Group all elements within a Dynamic Panel (select all elements on the Canvas, right click within the selection and select the option “Group in Dynamic Panel”).

    Go to the Outline palette, right click on Panel 1 and select the option “Duplicate panel”. Do this three times so you have four panels with identical content.

  4. Go to Panel 2. Customize the style of the “Tab Two” Rectangle so that it appears selected. Make “Tab One” appear unselected. Customize the content in the tab’s window as preferred.

    Repeat this step for Panels 3 and 4, changing the selected and unselected tabs respectively.customize tab
  5. Next, you’ll need to add events to allow the user to switch between tabs. Go to Panel 1 of the Dynamic panel and select “Tab One”. Go to the Events palette. Add an “On Click” + “Set Active Panel” event. Select Panel 1 from Canvas or the Outline palette. Click “OK”.
  6. Back in the Canvas, select “Tab Two” (still in Panel 1). Go to the Events palette. Add an “On Click” + “Set Active Panel” event. Select Panel 2 from Canvas or the Outline palette. Click “OK”.
  7. Go back to the Canvas, and select “Tab Three” (still in Panel 1). Go to the Events palette. Add an “On Click” + “Set Active Panel” event. Select Panel 3 from Canvas or the Outline palette. Click “OK”.
  8. Select “Tab Four” from within Panel 1, and go to the Events palette. Add an “On Click” + “Set Active Panel” event. Select Panel 4 from Canvas or the Outline palette. Click “OK”.
  9. Finally, copy each of these events to the corresponding tabs in Panels 2, 3 and 4.

Click “Simulate” and click (if simulating on desktop) or tap (if simulating on a mobile device) each tab to navigate to it.

You can download our example here.