top of page

Wireframe of 2.0 Search Result

  • Whitehole Kong
  • Feb 16, 2017
  • 4 min read

Identify the proposed content, structure, functional behaviours of 2.0 Search Result

WIREFRAME OF SEARCH RESULT OF FULL-BODY RED WINE

Wireframe of Search Result of Full-body Red Wine

ANNOTATIONS

  1. Full-body Red label This is the title and icon of search result.

  2. 570 results found label This label shall show the number of search result.

  3. OLD WORLD navigation It shall pop a panel that contains countries in old world of search result after mouse over 1.5s. And it shall show the number of search result in this category.

  4. NEW WORLD navigation It shall pop a panel that contains countries in new world of search result after mouse over 1.5s. And it shall show the number of search result in this category.

  5. BY PRICE navigation It shall pop a panel that contains different price range and also provide slider to adjust price range after mouse over 1.5s. It shall show the number of search result in this category.

  6. BY GRAPES navigation It shall pop a panel that contains grapes varieties. And it shall show the number of search result in this category.

  7. Search result It shall list the search result in 4 x 4 matrix. Each of the search result shall represented by a image, title and price.

  8. Page navigation It shall provide link to the page of search result. There shall up to 10 links. There shall previous navigation and next navigation on the left and right respectively

WIREFRAME OF OLD WORLD PANEL OF SEARCH RESULT

Wireframe of old world panel of search result

ANNOTATIONS

  1. Bordeaux(165) navigation It shall list the old world countries of the search result. And the navigation item shall also show the number of search result of that item.

WIREFRAME OF SEARCH RESULT OF FULL-BODY RED AND LA RIOJA

ANNOTATIONS

  1. Full-body Red & La Rioja It shall represent ‘AND’ criteria of search result. This example represent the search result will list all full-body red wine and from La Rioja. The second criteria represented by a icon and name. Change ‘&’ to ‘X’ when mouse over. Remove the criteria after click on ‘X’.

WIREFRAME OF MOUSE OVER ON ITEM

Wireframe of mouse over on item

ANNOTATIONS​

  1. QUICK VIEW navigation It shall show a link on the image of item. It shall pop quick view panel of corresponding item after click on the link.

  2. COMPARE WINE navigation It shall show a link on the image of item. It shall add the item to compare list after click on the link.

WIREFRAME OF QUICK VIEW PANEL

Wireframe of Quick View Panel

ANNOTATIONS

  1. Item Image The image of item.

  2. Item Name The name of item.

  3. Pauillac The Region/Appellation of item.

  4. Full-body Red Wine(Bordeaux Blend) The style and varieties of item.

  5. blackberry, earth, tobacco The basic flavour of item.

  6. Food Pairing: Beef and Venison The basic food pairing of item.

  7. HK$ 1,900 The price of item.

  8. 750ml The volume of item.

  9. Quantity: Request user input the number of the item to buy. Default and minimum value is 1.

  10. ADD TO CART button Add the item to shopping cart and close the Quick View Panel.

  11. COMPARE WINE button Add the item to Compare Wine List and close the Quick View Panel.

  12. Previous button Change to show the previous item from search result. If the current item is the first item, disable this button.

  13. Next button Change to show the next item from search result. If the current item is the last item, disable this button.

  14. Close button Close the Quick View Panel.

WIREFRAME OF COMPARE WINES LIST

Wireframe of Compare Wines List

ANNOTATIONS

  1. Compare Wines List Panel Show this panel when there wine in the list. This Compare Wines List Panel appear at the bottom of window.

  2. Added item icon It shall show the wine image which added to compare list.

  3. Available quota indication icon There are only 4 wines can be compared. The doted line square let user know how many wine can be added to compare list.

  4. COMPARE WINE button It shall pop Compare Wines Panel after click on it. It shall enable when there two or more wine added to compare list.

WIREFRAME OF COMPARE WINES PANEL

ANNOTATIONS​

  1. Item Image The image of item.

  2. Item Name The name of item.

  3. Pauillac The Region/Appellation of item. Display lighter font colour if the value of compare items are the same.

  4. Full-body Red Wine The style of item. Display lighter font colour if the value of compare items are the same.

  5. Bordeaux Blend The varieties of item. Display lighter font colour if the value of compare items are the same.

  6. blackberry, earth, tobacco The basic flavour of item. Display lighter font colour if the value of compare items are the same.

  7. Food Pairing: Beef and Venison The basic food pairing of item. Display lighter font colour if the value of compare items are the same.

  8. HK$ 1,900 The price of item.

  9. 750ml The volume of item.

  10. Quantity: Request user input the number of the item to buy. Default and minimum value is 1.

  11. ADD TO CART button Add the item to shopping cart and close the Quick View Panel.

  12. REMOVE button Remove the item from Compare Wines List.

  13. COMPARE OTHER WINES navigation Clear the Compare Wines List and close Compare Wines Panel.

  14. Close button Close the Compare Wines Panel.

WIREFRAME OF BY PRICE PANEL OF SERACH RESULT

ANNOTATIONS

  1. Below HK$200(170) navigation Shall add the price below HK$200 criteria to search result after click on it. This also show how many items below HK$200 in the current search result.

  2. HK$201 - $500(287) navigation Shall add the price between HK$201 and $500 criteria to search result after click on it. This also show how many items between HK$201 and $500 in the current search result.

  3. HK$501 - $1500(83) navigation Shall add the price between HK$501 and $1500 criteria to search result after click on it. This also show how many items between HK$501 and $1500 in the current search result.

  4. Over HK$1501(30) navigation Shall add the price over HK$1500 criteria to search result after click on it. This also show how many items over HK$1500 in the current search result.

  5. Minimum Range controller It allow user adjust the minimum price range criteria add to current search result.

  6. Maximum Range controller It allow user adjust the maximum price range criteria add to current search result.

  7. Minimum value It shows the value of minimum price range criteria add to current search result.

  8. Maximum value It shows the value of maximum price range criteria add to current search result.

  9. SHOW ME(308) button Click this button to add the adjusted price range criteria to current search result. The label of button also predict the number of wines of new search result.

Comments

bottom of page