Create a predictive search prototype in Axure

Jonathan LupoVP/Information ArchitectureEmpathy Lab@userexperience (Twitter)http://empathylab.blogspot.com

Introduction

• Axure is a great application to use when mocking up interaction design concepts for usability testing.

• The following is a step-by-step tutorial for mocking-up an interactive "predictive search" prototype using Axure. It assumes a basic familiarity with the Axure application interface.

1. Set up your workspace

• After opening the application, make sure that the "widget" panel (upper-left), the "masters" panel (lower-left), the "annotations & interactions" panel (upper-right), and the "dynamic panel manager" are all visible in your Axure workspace.

1. Set up your workspace (continued)• If any of the four panels above are hidden, open the "View" sub-menu from the

application main menu and make sure each of the panels are checked in the menu.

2. Add a "New Master"

• Create a new master by clicking on the "Add Master" icon in the "Masters" panel (lower-left). Double-click the label of the newly created master, called "New Master 1," to open the "New Master 1" tab in the "Wireframe Pane."

3. Create the search interface

• (In the "New Master" tab) Drag the "Text Field" and "Button" widgets into the "Wireframe Pane".

4. Label the interface elements

• Select the text field and give it a label in the "Annotations & Interactions" panel (upper-right). A label such as "search_textfield" will do nicely.

4. Label the interface elements (continued)

• Select and label the search button. I labeled mine "search_button."

5. Add a "dynamic panel"

• Drag the dynamic panel widget from the "Widgets" panel to the "Wireframe Pane." • Re-size and place the panel underneath the search text field.

5. Add a "dynamic panel“ (continued)• Set the dynamic panel to "hidden" by right-clicking the mouse while the panel is selected

in the main wireframe panel.• The dynamic panel, once set to "hidden," will appear yellow.

6. Label the Dynamic Panel

• While the yellow dynamic panel is selected, give it a label in the "annotations & interactions" panel (as you did for the search textfield and button). I called mine, "predictive_layer."

7. Create the predictive search drop-down layer• Double-clicking the yellow, dynamic layer, will produce the "Dynamic Panel

State Manager" dialogue box. You'll need to create a state for each predictive search result you want to mock-up. By default, one state already exists in the dialogue box. That state is labeled, "State 1."

7. Create the predictive search drop-down layer(continued)• To create a mock predictive search layer that displays when a user types a

specific string of characters, make sure that the panel state, "State 1," is selected. Next, click the "edit state" button on the right. You'll end-up viewing the workspace within a tab labeled, "State 1."

8. Mock-up the first predictive search result• You can visually style your search result drop-down menu however you want to (as long as it is contained

within the blue guidelines in the "State 1" tab. For speed's sake, drag a white rectangle widget and a "text panel" widget from the "Widgets" panel into the "wireframe pane (center stage)."

• Make sure both widgets sit within the blue guidelines, which represent the viewable area that of the search drop-down layer. In addition, make sure the text panel sits on top of the white rectangle. Edit the text of the text panel to represent the predictive search results that you want displayed in reaction to a specific query. My scenario has to do with music, so I have created a drop-down list of musical artists that will display when the user types the search term "green."

9. Create the interaction that will trigger the predictive drop-down layer• Select the "New Master 1" tab in the center "Wireframe Panel," so that you can

attach a behavior to the search text field. Select the text field and double-click on the "On KeyUp" interaction in the "Annotations & Interactions" panel. A dialogue box labeled, "Interaction Case Properties" will appear.

9. Create the interaction that will trigger the predictive drop-down layer (continued)

• In the "Step 2. Select an Action" list that is displayed within the "Interaction Case Properties" dialogue box, select the "Show Panel" action. Next, select the blue hyperlink labeled, "Show Panel" in the "Step 3 - Edit the Actions" panel below.

9. Create the interaction that will trigger the predictive drop-down layer (continued)

• Clicking "Show Panel," will produce a second dialogue box prompting you to select the panel to display. Since only one panel was created, select the "predictive_layer" panel from within the dialogue box. Click the "Ok" button.

9. Create the interaction that will trigger the predictive drop-down layer (continued)

• The second dialogue box will disappear and the 1st dialogue box will remain visible. Next, you'll need to create the condition that will produce the "predictive_layer." Do so by selecting the "Add Condition" hyperlink at the top of this dialogue box.

9. Create the interaction that will trigger the predictive drop-down layer (continued)

• The dialogue box that appears when you select the "Add Condition" hyperlink, is labeled the "Condition Builder." In it, you'll need to make sure that the series of drop-down menus have the following values selected:

1. Satisfy "All" conditions (1st drop-down menu)2. "text on widget" (2nd drop-down menu)3. "search_textfield" (3rd drop-down menu)4. "equals" (4th drop-down menu)5. "value" (5th drop-down menu)6. Next, type the word "green" in the text field adjacent to the 5th drop-down menu

All selections, if made correctly, will look like the following screen shot. When finished, click the "Ok" button.

• The "Condition Builder" dialogue box will disappear. Finally, click the "Ok" button on the "Interaction Case Properties" dialogue box. You are now ready to test your first predictive search result.

10. Apply "Master 1" to all pages• If you are planning to mock-up multiple pages that contain the search interface,

you must apply the master that contains the search interface ("Master 1") to those pages. Do so by right-clicking on the "Master 1" label in the "Masters" panel (lower-left), and then selecting "Add to Pages" in the resulting menu.

10. Apply "Master 1" to all pages (continued)• The resulting dialogue box will prompt you to select the pages in your Axure prototype to

which you want "Master 1" applied. Select as many of the pages as you want. For the purpose of this demo, I selected all pages (using the "Check All" button on the right). For testing purposes, make sure you at least select the "home" page. When you are finished, click the "Ok" button.

11. Generate a prototype to test your 1st predictive search interaction• Generate a prototype by selecting "Generate" from the main

application menu (top) and then selecting "prototype" from the resulting sub-menu.

11. Generate a prototype to test your 1st predictive search interaction (continued)

• The resulting dialogue box will require you to select a destination for the prototype on your hard drive.

11. Generate a prototype to test your 1st predictive search interaction (continued)• Once you have selected a destination on your hard drive for the prototype, finish by

clicking the "Generate" button on the bottom of the dialogue box. Your prototype should open in your computer's default browser. You'll see two frames (columns). The left frame contains a tree-navigation/hierarchy of the pages in your Axure project. Clicking any of the links will enable you to navigate to each page in your prototype. The center frame contains your search interface. By default, you'll start from the "Home" page.

12. Enter the search term "green" to test your prototype• To test the first predictive search layer, simply type the word

"green" into the search textfield. If you have followed all of the instructions correctly, your drop-down menu should appear beneath the search interface as shown below.

13. Mock-up the second predictive search result• Hopefully, your layer activated

after typing the word "green" into the search box.

• To mock-up another predictive search use case, return to the Axure application window. Make sure you are working in the "New Master" tab. Double-click on the yellow, dynamic panel labeled "predictive_layer" to produce the "Dynamic Panel State Manager" dialogue box.

• You'll need to create an additional state for a second predictive search result that you want to mock-up. You'll see "State 1" in the list. To create another state, type a name for the new state in the textfield that is labeled "Add a new state." Now, click the button labeled "Add." I named my new state, "State 2."

13. Mock-up the second predictive search result (continued)• After clicking the "Add" button, you'll notice a second state,

"State 2" has been added to the "Panel State" list. • Double-click on the newly created "State 2" to open up a tab that

has the same label. You will now create the design of the second search result layer.

13. Mock-up the second predictive search result (continued)• Again, you can visually style your search result drop-down menu however you want to (as long as it is

contained within the blue guidelines in the "State 1" tab. For speed's sake, drag a white rectangle widget and a "text panel" widget from the "Widgets" panel into the "wireframe pane (center stage)." Make sure both widgets sit within the blue guidelines, which represent the viewable area that of the search drop-down layer. In addition, make sure the text panel sits on top of the white rectangle. Edit the text of the text panel to represent the predictive search results that you want displayed in reaction to a specific query. My second drop-down menu is a list of musical artists that will display when the user types the search term "red."

14. Create the interaction that will trigger the second predictive drop-down layer

• Select the "New Master 1" tab in the center "Wireframe Panel," so that you can modify the behavior attached to the search text field. Select the text field and double-click on the "On KeyUp" interaction in the "Annotations & Interactions" panel. The dialogue box labeled, "Interaction Case Properties" will appear. Make sure the "Step 1 - Description" textfield reads "Case 2." Next, look for, and select the checkbox with the label, "Show Panel(s)." Once selected, be sure to click the blue, "Show Predictive Layer," link in Step 2.

14. Create the interaction that will trigger the second predictive drop-down layer (continued)

• Double-check to see if the "Predictive_Layer" is selected and click "Ok" in the dialogue box that pops up.

14. Create the interaction that will trigger the second predictive drop-down layer (continued)

• Next, you'll want to click the link that is labeled, "Add Condition."

14. Create the interaction that will trigger the second predictive drop-down layer (continued)

• The dialogue box that appears when you select the "Add Condition" hyperlink above, is labeled the "Condition Builder."

• In it, you'll need to make sure that the series of drop-down menus have the following values selected:

1. Satisfy "All" conditions (1st drop-down menu)2. "text on widget" (2nd drop-down menu)3. "search_textfield" (3rd drop-down menu)4. "equals" (4th drop-down menu)5. "value" (5th drop-down menu)6. Next, type the word "red" in the text field adjacent to the 5th drop-down menu

All selections, if made correctly, will look like the following screen shot. When finished, click the "Ok" button.

14. Create the interaction that will trigger the second predictive drop-down layer (continued)

• The "Condition Builder" dialogue box will disappear. Before exiting the "Interaction Case Properties" dialogue box, be sure to select the checkbox named "Set Panel State to State" above the already selected checkbox named "Show Panel." You'll need to click the blue link entitled "Set panel state to state" in the Step 3 panel.

14. Create the interaction that will trigger the second predictive drop-down layer (continued)

• In the resulting dialogue box, make sure that "set panel state to state" is selected in Step 1. Next, click the blue link entitled, "State 1."

14. Create the interaction that will trigger the second predictive drop-down layer (continued)

• Another dialogue box will appear. You'll need to select "State 2," because you want a user's search for "red" to show the "predictive_layer" panel in "State 2." Click the "Ok" button. Make sure you exit out of all remaining dialogue boxes by clicking their corresponding "Ok" buttons.

15. Generate a prototype to test your 2nd predictive search interaction• Follow the same directions for testing your second search interaction. Generate a prototype

by selecting "Generate" from the main application menu (top) and then selecting "prototype" from the resulting sub-menu. This time, however, type the word "Red" into the search textfield. If all goes according to plan, the result will look like the screenshot below.