---under construction---- feel free to explore

Featured Image

Search mock up using Axure

This tutorial will explain how to mock-up a google like search functionality using Axure. There are 3 features for the  search functionality

 Recent search list

When the user does a mouse on-focus on the search field the list of last searched items will be displayed. This demonstration shows last 3 search keyword..

Predictive auto-suggest

When user keys in the search keyword there will be a list of suggestions matching to the query that would appear. The suggestions will narrow down further as the user types more strings. The following rules apply for this,

  • Auto-suggestion kicks-in when user starts typing the first string of the keyword.
  • The auto-suggested list will populate up to 6 suggestions.
  • The auto-suggestion will continue to display until there is a match with the query after which it won’t show up.

 Auto correct

Auto correct is the feature that will suggest the correct keyword in case the user misspelled his/her keyword. For auto correct feature there could be 2 scenario

  • The query user searched has no results but search result of the closest matching keyword will appear.
  • The query user searched has few results but a it is also a close match to a keyword with more results(In this mock-up I have demonstrated this scenario only .)

Create Axure file:

Now that the features are defined i will explain how the RP file was created.

  1. Create 2 pages Home(page),which is the default page user will see and Search page(page) is the page that displays the search results .
  2. Create a master for header named Header(master), this is a master layout with elements such as logo, search field, other additional menu items if any.
  3. The search field is part of the header. When user types the search keyword he/she might either hit enter in the keyboard or click on search button, so we use  two types of input ,the search field and a submit button . The search field is named as “SearchInputbox” and submit button is  named “Submit button”  and both are linked together.

Search result page have a dynamic panel with three states fruit, No results-found and auto-correct. When user search for the right keyword in this example “fruit” the dynamic panel fruits 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  “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 would show you how the all the elements i have listed above are linked together. I have attached the RP file

Leave a comment