Exercises: Dynamic Panels

Dynamic Panels make it easy to access lots of content within the same section of a screen, by dividing it 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

Interactive thumbnails help the user preview content on a website (within a new screen for example) 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 (above).
    • Drag four Image widgets below it and arrange them to match our example.
  2. Add a thumbnail image to each (right click on an Image widget, select “Image” and then “Browse” to select an image from your folders, or simple double click the Image).
    • 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.
    • add thumbnail
  3. Select the first thumbnail image and go to the Events palette. Click the “Add event” button.
    • thumbnail add event
  4. Add on “On mouse over” + “Change Style” event. 
    • From the Canvas or Outline palette, select Panel 1 of the Dynamic Panel.
      At the bottom, select “Background” and add the larger version of the first thumbnail image. Click “OK”.
  5. Repeat steps three and four 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: Simulating scrollbars

Scrollbars allow the user to scroll content (e.g. text or images) on a web or mobile screen so that all of the content can be viewed.

simulating scroll
Follow the below steps to simulate scrollbars in a mobile prototype, using the Dynamic Panel widget:

  1. In an Android mobile app prototype, drag a header and footer/bottom navigation bar from the “Bars, menus and tabs” section of the Android Phone library to the Canvas. Position them at the top and bottom of the Canvas respectively.
  2. Next, drag a dynamic panel to the Canvas and resize it so that sits between the header and footer, and is the same width as the Canvas.
    • Then, go back to the Canvas, double click or right click on the Dynamic Panel and select “Edit Content”.
    • edit content canvas
    • Drag the content (e.g. Text, Paragraph and Image widgets) you wish to display inside the panel and customize it as preferred.
    • Note: for this simulation to work, your content will need to be larger than the panel containing it.
    • pararaph widget
  3. Go to the Properties palette. In General properties, set the “Vertical Overflow” to “Scroll always”.
  • scroll always

Click “Simulate”. Scroll up and down the screen to simulate scrollbars in your mobile prototype.

Note: you can change the “Horizontal Overflow” to “Scroll always” in web and tablet prototypes to simulate horizontal scrollbars.

You can download our example here.

Exercise 3: Design a confirmation dialog

Confirmation dialogs are used in website/app input forms to help elicit a response from the user prior to completing the form.

In our example, a confirmation dialog displays the terms and conditions of a sign up form in a mobile app. The user must tap on the hyperlink to access the terms and conditions. They are taken to a separate screen where they can read the information.

To navigate back to the main screen, they 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 (iPhone or Android) by dragging Input Text Fields, Text widgets and a Button to the Canvas.
    • Reposition them on the Canvas to match our example above.
    • Write the name of your sign up form in the Text element and customize the Input Text Fields as preferred.
    • 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. Highlight the section of text that reads “Terms and Conditions” and go to the Properties palette.
    • Change the style of this text so that it appears as a hyperlink (e.g. change the color and underline it).
  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-hand 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 Text widget that reads “I agree with the Terms and Conditions” and go to the Events palette.
    • Add an “On Tap” + “Set Active Panel” event. Select Panel 2 from the Canvas or from the Outline palette. Click “OK”.
  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 and go back to the Events palette.
    • Add an “On Tap” + “Set Active Panel” event.
    • This time select Panel 1 as the active panel. Click “OK”.

Click “Simulate” and click (if simulating on desktop) or tap (if simulating on a mobile device) the hyperlink to be taken to the Terms and Conditions screen. Click/Tap the clear circle icon to return to the app’s sign up form.

You can download our example here.

Exercise 4: 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 (iPhone or Android). Use Text and Input Text Field widgets to create the “First name”, “Last name” and “Email” fields that appear in our example.
    • Add a title to match 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 5: 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”.
    • 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”.
      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”.
      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”.
  6. 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.