Featured Image

Search mock up using Axure

This tutorial will explain how to create an Axure mock-up which recreates a google like search functionality. This tutorial is targeted towards users who have basic knowledge of Axure. If you are interested to learn basics there are simple and easy to learn basic training on the Axure web.

First let’s define the logic and rules before we start to build a mock-up. This search mockup has three basic features such as recent search list, predictive auto-suggest and auto correct.

Recent search list:  When the user clicks on the search field the list of last searched items will be displayed. My example below shows last 3 searched keyword.

 

Predictive auto-suggest: When the user starts to type the search keyword a box with list of matching keywords will appear this box is called the auto-suggest box. In my example I have set this to show maximum of 6 keywords. These keywords will become accurate as the user types more strings. This auto suggestion box will continue to appear till it has a match in the database, when there is no match this box disappears.

 Auto correct: Auto correct is the feature that will suggest the correct keyword in case the user misspelled his/her keyword. There are two possible scenarios for an auto correct feature

  1. The keyword user searched has no results but search result of the closest matching keyword will appear which will be displayed as “Did you mean”.
  2. The keyword user searched has few results but it is also a close match of a keyword with large results hence the result page will display both.(In this mock-up I have demonstrated this scenario only.)

Create Axure file: Now that the features are defined I will explain how to create the RP file. Create two pages Home (page), which is the default page user will see and Search result page (page) that displays the search results.

Create a header and name it ‘Header’. Note: this is a master layout with elements such as logo, search field, other additional menu items if you wish to create. We are doing a master layout because it will be easier to reuse this header in both pages we created above. The search field is also a part of this header and this field is named as ‘SearchInputbox’. We can expect two types of user behavior after users type the search keyword in the search field one is they might either hit enter in the keyboard or click on search button. To satisfy both the behaviors we create two ways of input in our mock up but both inputs will do the same function.

In the search result page create a dynamic panel called ‘SearchResultPage’ with three states ‘fruit’, ‘no results-found’ and ‘auto-correct’. When user searches for the right keyword in our example “fruit” the dynamic panel ‘fruit’ will be displayed. If the user types any other keyword which has no results the ‘no results-found’ state will be displayed. If the user misspelled the keyword ”froot” instead of “fruit” but yet there is one result for “froot” the auto-correct state is displayed which shows the single result for “froot” and asks the user “did you mean fruit” .

The below illustration shows how all the elements I have mentioned above are linked together.

Click here to view the Prototype.  Please write to me if you would like a free copy of this RP file.

How about more features and conditions for this mock-up? Would be interested to hear back from you.

Leave a comment