Recently we have been using a tool named Axure to develop quick wireframe throw-away prototypes. It’s a great prototyping tool that makes it quick and easy to mock-up basic user interaction scenarios for web and mobile applications. The wireframes serve as a basis for discussing workflow and user interactions with customers and development team members before jumping into the initial development sprints. It’s also very useful for discussing the initial design / interaction patterns with our user experience designers. It’s very easy to change interactions and screen layouts on-the-fly, so it’s a powerful way of experimenting with your UI design.
A type of UI interaction that comes up frequently in our web applications involves the use of modal dialogs to collect information from a user while remaining in the context of the current page. We actually use them quite a bit and it’s important to be able to show this type of interaction in the context of a prototype. Unfortunately there does not seem to be a built-in Axure widget that supports this scenario. However, there is a pretty easy way to simulate a modal form using Axure’s dynamic panels…
Suppose you have a simple table of individuals like the one below:
When a user clicks the edit button you would like to open an edit dialog for the given record. In our case we would also like to have the background grayed out so that it appears to be inaccessible while the user is interacting with the modal dialog.
The first step is to create the panel that will be gray and transparent while covering the table and a majority of the page. To do this we drag out a rectangle widget and re-size it to be larger than the background area:
You’ll notice our rectangle is now covering the table below. Next, let’s make it gray and transparent:
But that rectangle’s not a dynamic panel! Our next step is to convert the rectangle to a dynamic panel. Right click on it -> Convert -> Convert to Dynamic Panel:
Now that the panel is dynamic, let’s right click on it and send it to back (Order-> Sent to Back or Ctrl-Shift-[) and set it to hidden (Edit Dynamic Panel -> Set Hidden).
When someone clicks on one of the edit buttons we want the new modal dialog to appear, so we need to set the OnClick event of the edit links. Select the first edit text in the table and double click the OnClick event interaction:
Add an action to bring the panel to front and show the panel when the OnClick occurs:
Repeat this step for all of the edit buttons you would like to configure.
Tip: If you want to get really fancy you could even pass the values from the table to the modal form using variables. Check out this demonstration on the Axure site: http://www.axure.com/variables
Tip: If you want your edit button to look like a link, change the color to blue and add underline.
Double click the newly created dynamic panel and click the edit all states button to allow editing of the dynamic panel:
Drag another rectangle out to the area where you would like your modal window to appear and make it large enough to support the fields to be edited. This rectangle should have a white background to give it contrast against the gray background created earlier. Next drag the widgets you would like onto this rectangle to create your edit form.
Tip – For multiple fields with the same text / label layout, cut and paste works quite nice. Also don’t forget to use the automatic guide lines to help you line up the widgets on the form.
Now that we have a nice looking modal form we need to wire up the behavior. Modify the OnClick events of the close, cancel, and update buttons to hide the form:
Now we should have a fully working modal dialog that grays out the main page during interaction with the dialog: