Search button always visible on products listing? (reference needed)

Question

This is about the placement of a search option on a products listing on a smartphone.

Between 4 scenarios, which is the best according to you? :

1. Search button at the top of the scrollable content (disappears on scroll down).

2. Search button at the very bottom of the scrollable content (appears only when all products viewed + doesn't work with a lazy loader).

3. Search button placed in a "actions" dropdown menu located in a vertically fixed header.

4. Search button (with icon) placed directly in a vertically fixed header.

I would choose #4 because my experience plus gut feeling tell me that the search button should always be clearly visible on a products listing interface.

This allows to quickly perform a search from any scroll position which I find important on a mobile UI (no need to scroll back at the very top).

The problem is that I can't find any resource/reference to back up my choice.

Answer 1

You are right #4 is the best solution. You should make important design elements visible and easy to access. There is a tradeoff, though, between visibility and visual clarity, so in case you have many design elements, non-important elements should be hidden. However, in your case I believe the search is a very important element and should be always visible. See references below:

The design of everyday things – Donald A. Norman:

Visibility acts as a good reminder of what can be done and allows the control to specify how the action is to be performed. The good relationship between the placement of the control and what it does makes it easy to find the appropriate control for a task.

Usability engineering – Jakob Nielsen:

In general, people have much easier time at recognizing something that is shown to them than they have at having to recall the same information form memory without help.

…

Interfaces based on recognition rely to a great extent on the visibility of the objects of interest to the user. Unfortunately, displaying too many objects and attributes will result in a relative loss of salience for the ones of interest to the user, so care should be taken to match object visibility as much as possible with the user’s needs.

Answer 2

First up, do you really need a search button? If your information architecture is clear and simple and you only have so many products, maybe you don't need it. But I'll assume you do.

If you do, definitely option 4. Mobile users are already highly accustomed to finding the search region or button up front in the upper menu bar. Designing the button into the menu bar is possible in a few ways. The most basic and conventional UI pattern is an inputbox visible with magnifier icon (or a search button but i wouldn't advise that on mobile) indicating to search. Good practice is to add microcopy or sample query in your inputbox indicating what a user might be able to search for. If however you're poor on space you could just foresee the icon and a slideout inputfield on clicking the icon.

Never hide a search region below your content, that's just very poor ux. Exception here is when you place the search icon in a tab bar, as the latest versions of iOS tend to do more and more and which in my opinion is certainly not a bad decision seen as how our devices grow bigger and our thumbs don't. Never hide it in a navigation menu either because as you're serving products, searching the app would be a prime action and you don't want it hidden from view.

Read here for some design practices: http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/

hope this helps.

Answer 3

Sitesearch is an important navigation function of an online store. So, make the search box clear and prominent on the site-wide header. If your product catalog is very large, then allow users to choose the category before they perform the search. Don’t place any other boxes in the header other than the search box as that would confuse the shoppers. Use a button that reads “search” instead of a small search icon especially on the home page.