3

What is the ideal position of the search bar on the mobile screen? Is it in the top-right corner or at the bottom?
Here is an web-app.

enter image description here

In this case, the search bar is placed at the top.

In addition to this, why is the position of the search bar different between a mobile app and an web app?

[Edited] My question is regarding the position of the search bar in terms of accessibility and when the search is your primary feature. Should it be placed at the top or bottom like in apps?

4
  • Are you talking about a search bar or about a search button which will expand into a search bar? Also is this an app or a website?
    – jcaron
    Feb 4, 2020 at 8:43
  • @locationunknown No. My question is regarding the position of the search bar in terms of accessibility and when the search is your primary feature.
    – NB4
    Feb 4, 2020 at 12:44
  • 1
    There is no ideal position as it depends entirely on the content you are searching and the rest of the content on the page. You might get better responses if you provide more details and potentially some screenshots or mockups of your designs. Feb 4, 2020 at 13:27
  • You might also indicate whether by "accessibility" you mean "barrier-free" (e.g., for blind people using screen readers - that's why I assumed) or "reachable" (by thumb on phone - which is what NB4 assumed). Feb 22, 2020 at 18:34

3 Answers 3

2

As per my observation and understanding, the position of the search should be at the bottom. The reason behind this the accessibility. When the search is placed at the bottom it is easy to use then placed at the top. Please refer to the below image for reference.

enter image description here

1

Contrary to James, I think there is a good and a bad position: Searching will determine which entries are shown at all. Looking at the screen in regular reading direction (which is top to bottom even for RTL languages), the filter/selection/search should be the first to read, so as to give the user the context of what to expect.

If I don't find something in a list, it is important that I know whether and how the list has been filtered by searching. If the search bar is at the bottom, I need to go against the regular reading direction.

In addition, because you mention accessibility explicitly, I remember a rule from screen reading software: Do not change those parts of a screen above a control by using the control. This rule is derived from the reading direction argument: If you use a selection control (such as a radio button group, or a drop-down field), and as a result the screen content above the control changes, screen readers will not notify the user about the change, as they only look further in reading direction.

1
  • I wasn't saying that there aren't bad positions: just that there isn't just one position which is good in all cases. Feb 5, 2020 at 10:10
1

I strongly believe the positioning is entirely context dependant. I see three places you could implement a search field that all make sense in different contexts: at the top of the screen; directly above the content that is being searched; or at the bottom of the screen. All three have different use-cases.

Apps that pin the search to the top of the screen are generally providing a single type of information in a huge dataset that benefits greatly from search. Examples of this include mapping software, app stores, email clients, and encyclopedias of knowledge (wikis, stack, etc). This is the best option when your content is almost impossible to navigate to via conventional navigation links. This allows users to quickly narrow into the information they require even if they don't quite know exactly what they are searching for.

Pinning the search to the bottom of the screen is very similar. The benefit of pinning to the bottom is that it is much easier for mobile users to tap on and access though this pattern should not be used on larger devices. I feel that this option is better for promoting the content more than the search feature as the content gets attention first. I can't recall many apps which actually use this pattern other than one of the android web browsers (chrome tried it for a bit too) and newer android homescreens where the content of the screen is the primary concern yet search is still vitally important. Generally, this search field should just be a touch target which then slides up to the top of the screen to reveal results in a list below as the user types.

Finally, a pattern that is more prominent on desktop is to place the search field directly above the content that is being searched rather than in a primary UI component. This creates a clear link between the content and search field and indicates to the user that the field is intended for filtering the content rather than for searching for a page. You can also combine this input with other components to create a full set of filtering tools for your content.

In conclusion, when implementing a search field you should:

  • Consider hiding it behind an icon if not a primary feature.
  • Keep it with the content being filtered if used for filtering.
  • Make it a primary UI element and easily accessible from all pages if used for navigation.
  • Keep it at the top if you need other elements at the bottom such as a floating action buttons or bottom navigation.
  • Always show the results below the field.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.