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

Featured Image
  • Category
  • Date

    13 March

Search mock up using Axure

This tutorial will explain how to mock-up a google like search functionality using Axure. The 3 main features for doing a complete search functionality are as follows

  1. Recent search list.
  2. Predictive auto-suggest.
  3. Auto correct.

Let’s see how each of the above features and the logic was built.

Feature 1:  Recent search list

When the user does a mouse on-focus on the search field the last “n” searched items will be displayed. Here I have set it n as 3.

Feature 2: Predictive auto-suggest

  • Auto-suggestion kicks-in on the 1st
  • 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 then it will hide

Feature 3: Auto correct

For auto correct feature there could be 2 scenario

  1. The query you searched has no results but a close match to a search term with results.
  2. The query you searched has few results but a close match to a search term with more results.

For this mock-up I have mocked-up the scenario 2.

AXURE FILE

Now that the features are defined i will explain how the RP file was created. Basic components of the RP are Home(page), Search page(page) and header(master)

Header(master):

This is a master layout with all the components of the header logo, search box, other additional menu items. The input field is named “SearchInputbox” and there is another input button “Submitbutton”. Now you may think why two buttons? When the user types the search term he/she might either hit enter in the keyboard or click on search button, so we use both text input field and input button, but both have got to be linked.

Home/search(page):

The home page is the default page that the user will be and the search page displays the search results.

For this mock-up I have taken the following examples where user can search for

  1. Fruit
  2. Froot instead of fruit
  3. Search anything other than the above should display “no results found”

The below illustration would show you how the all the components are linked together.

I have attached the RP file

Leave a comment