Fenix: Search bar should be located at the bottom if toolbar was set to be at the bottom

Created on 2 Jan 2020  Â·  18Comments  Â·  Source: mozilla-mobile/fenix

Why/User Benefit/User Problem

The toolbar at the bottom can benefit the user by having the menu conveniently located within reach of their fingertips. When a user sets the browser toolbar to be located at the bottom, he/she would expect consistency in the design. However, the address bar moves to the top when tapping on it, which is counter-intuitive and defeats the purpose of a bottom toolbar since the user would still need to reach for the top of their screen when searching for something or inputting an address.

What/Requirements

If the toolbar is set to the bottom, the address bar should move to the top of the keyboard when tapping on the address bar. This keeps the address bar within reach of the user's fingertips, as it is in close proximity to the keyboard.

Search Toolbar UX-investigation

Most helpful comment

Indeed. Just look at messaging apps, when the text field is at the bottom it stays at the bottom when typing, above the keyboard. It is the most obvious and better user experience, after all the whole point of the address bar at the bottom is it for it to stay closer to the user finger and it going to the top at any time defeats the entire purpose of it.

All 18 comments

Indeed. Just look at messaging apps, when the text field is at the bottom it stays at the bottom when typing, above the keyboard. It is the most obvious and better user experience, after all the whole point of the address bar at the bottom is it for it to stay closer to the user finger and it going to the top at any time defeats the entire purpose of it.

See previously #562. @apbitner was this behavior wontfixed in 562?

@SL-Lee and @Rodze, I'd like to better understand the issue. If the toolbar is at the bottom and you tap on it the search bar moves to the top of the screen so that as you start typing the browser displays a list of suggestions, history, etc., between it and the keyboard. I understand the messaging app reference but the key difference is those apps aren't displaying a list of suggestions when the user is typing.

With the search bar at the top of the keyboard, the suggestions can be ordered by relevancy from bottom to top, as having the most relevant suggestion closer to the keyboard would require less effort from the user to tap on it. This comment and this comment on #562 has already provided a general overview of how it would look like.

@kbrosnan we can keep this open as a feature request, it wasn't intentionally wontfixed

@AmyYLee Do we want to implement this? Any more info you can provide about implementation details?

@AmyYLee Do we want to implement this? Any more info you can provide about implementation details?

Hi,

I spoke to the team and this is something we will investigate. Moving forward, @topotropic would be the point person for search on mobile.

@topotropic Is this actionable from the team? Will it be actionable within the next few weeks?

@AmyYLee Do we want to implement this? Any more info you can provide about implementation details?

Hi, I spoke with the team. This is something we will explore post migration. We would like to ensure proper investigation as to

@topotropic Is this actionable from the team? Will it be actionable within the next few weeks?

@darkwing This won't be actionable prior to release.

@vesta0 Based on @AmyYLee's feedback, we should remove this from the Polish board.

FWIW, since I just saw this issue and it's one of the papercuts that has me dragging my heels on Fenix, this is my experience:

  • Customize, put bar on bottom.
  • Look at bar, tap bar.
  • Bar slides off the bottom of the screen.
  • Keyboard slides up.
  • Bar is gone, where did it go?
  • Oh, right, it snuck out of my visual focus and is now at the top.

Small dumb papercut thing, but it slightly annoys me every time.

Adding some mockups of what the search screen looks like if the address bar is positioned on top of the keyboard.


Any thoughts about the ordering of search suggestions and results?

  • Bottom–top: more consistent with information hierarchicy, because the first suggestion sits directly on top of the address bar, which is on top of the keyboard
  • Top–bottom: more consistent with reading and scroll directions, as well as other messaging apps

Any thoughts about the ordering of search suggestions and results?

* Bottom–top: more consistent with information hierarchicy, because the first suggestion sits directly on top of the address bar, which is on top of the keyboard

* Top–bottom: more consistent with reading and scroll directions, as well as other messaging apps

Edge on Windows 10 used top-bottom, as does Kiwi on Android.

Both put the location bar right above the keyboard.

Adding some mockups of what the search screen looks like if the address bar is positioned on top of the keyboard.

I think the suggestions should appear directly above the shortcut button / scan button.

Any thoughts about the ordering of search suggestions and results?

I would prefer bottom-top since it is _"more consistent with information hierarchicy, because the first suggestion sits directly on top of the address bar, which is on top of the keyboard"_.

Thought it's worth pointing out that Internet Explorer on Windows Phone had this layout/behavior and it was a great experience, so UX has nothing to worry about, it's been done before and it was great. Watch the beginning of this video to see it for yourself https://www.youtube.com/watch?v=-KDBFy5VZv8

@brampitoyo for follow-up

Update for those who are subscribed to this thread: This is coming as part of the "New Search Experience".

@opusforlife2 Yes. You are right. Please follow along the update on #13052, and we can now close this issue in favour of that.

Quoting:

The position of the toolbar now depends on whether it’s set to bottom or top:

  • Toolbar on bottom: it “jumps halfway” above the keyboard. This will go a long way towards smoothing out abrupt motion.
  • Toolbar on top: same as current behaviour – it should still “jump” to the top of the screen.
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Chris01277 picture Chris01277  Â·  3Comments

bbinto picture bbinto  Â·  3Comments

phileastv picture phileastv  Â·  3Comments

andreicristianpetcu picture andreicristianpetcu  Â·  3Comments

clitetailor picture clitetailor  Â·  3Comments