The combo box is a common UI element used in many websites and software applications. This post explains how to quickly prototype a combo box that links to different pages depending on which entry is selected. Here is how it’s done in three simple steps…
First, create the page that will contain the combo box as well as the pages that the combo box will link to. Here’s an example prototype of a web shop where the combo box is used to navigate to the pages “Products” and “Solutions”:
Screenflow showing a combo box serving as navigation element
If you want the combo box to be displayed on more than one page, consider placing it on a layer.
Next, add the combo box stencil from the Stencil Palette and place it in the desired position. Double-click on the combo box to edit the entries, e.g. using the names of the target pages.
Adding a combo box stencil to a prototype
Finally, we need to add interactivity to the combo box. To do so, open its Context Menu and click on the Interactions tab. In the Interaction Dialog, choose “changes the selection” as the trigger in the first column and select the entry you want to link up under “Value”. In the second column select “show page” as the reaction and select the page you wish to display. Then hit “Save” and repeat for every entry of the combo box you wish to link.
Linking up individual entries of a combo box using the “change selection” option of the interaction dialog
That’s it! You have successfully created a linkable Combo Box!
Do you need help with linkable combo boxes? Just send us a message via support@pidoco.com or Facebook, Twitter or Google+.
Happy Prototyping!