How to simulate tabs in your interactive wireframes
Simulate tabs in your interactive wireframes with the help of this tutorial.
Tabs are one of the most common ways to organize information on a single screen: each tab displays different content that becomes active when a user clicks on it. Unlike static content, you can change dynamic content without having to switch screens. This is made possible using Dynamic panels, which you can use to group content in different panels or layers and decide which ones to display.
You can download the example below here.
Creating tabs in your web or mobile prototypes
1. Create a new web prototype and drag a Dynamic panel onto the canvas.
2. Create 2 additional sub-panels, by clicking the ‘+’ icon on the widget itself.
3. Select the first panel, by clicking through the Dynamic panel’s drop down menu and double-click the first panel to edit its content.
4. Drag a Text widget from the widgets palette and drop it above the Dynamic panel.
5. To make a Text widget look like a tab, select it and go to the Properties tab. In the text properties, center the text vertically and horizontally. Then, indicate which border you want; you can customize it by rounding off the corners.
6. Once the first tab has been created, copy and paste it so that you have three tabs in the first panel. Then copy the three tabs to the second and third panels, changing the properties of the ‘selected tab’ according to the corresponding panel, i.e. in the second panel, change the style of the second tab; in the third panel, change the third tab. You could change the border, for instance, indicating that the lower part won’t be displayed.
7. When you have completed this, you’ll need to add events so that the correct content is displayed when the user clicks on a given tab.
8. In the events dialog, add an ‘On click’ + ‘Set active panel’ event to the first tab, selecting the panel you want to display (i.e. the first tab should take the user to the first panel, the second tab to the second panel, and so on).
9. Repeat the process for the rest of the tabs, including the ones in the other panels. Remember that you can copy and paste events to speed up the process.
10. Click ‘Simulate’ and see how you can move from panel to panel!
Speed up the process with templates to define navigation between screens
1. Draw all the tabs in a template. Apply a style that makes them look as if they haven’t been selected.
2. Drag each tab to the screen you want it to navigate to.
3. On each screen, and over the elements in the template, draw a tab with the ‘selected’ style over the one that matches that screen.
4. Click ‘Simulate’ to see the results!