Mobile design/Wikipedia navigation/Hide-reveal

This page documents progress on the implementation of hide/reveal of the search bar.

The first step is to implement fixed position, to see if that is possible across some devices. Initial experiments have shown it to be glitchy and limited to:

  • Native approach on iOS 5 and Android 3+

Even if fixed position is solved for the above devices, the other devices and browsers below will require no fixed position:

  • Opera Mobile, Firefox Mobile, iOS 4.x and Android 2.x.

So in the latter case, there needs to be a technique for scrolling quickly to the top of the page or temporarily revealing the search bar at the top of the screen, regardless of current viewing position on the page.

Prior discussion

edit

We are considering ways to hide the top bar and calling it up easily, but the thought is to show it initially. Here are some ideas:

  • The Pinterest app hides toolbars when scrolling down a page, and reveals them when scrolling up starts. These toolbars are opaque.
  • The Kindle shows toolbars initially which fade away, then a tap anywhere reveals them. Also they have transparent backgrounds.
  • Keep the toolbar at the top of the screen, then after scrolling down a page, a tap on top status bar of the phone scrolls quickly to the top of the page. Though a standard iOS technique, not very discoverable.

A. B.: "My concern with the Kindle way is that you may find yourself on a page with lots of links or a big image, and there won't be a safe place to tap anywhere. The Kindle doesn't have that problem, but we do.

"I like the third option for two reasons: people will know it from Safari, and it gives them a quick way to jump to the beginning of an article, which we currently lack. The downside is that some users will never figure out the tap-on-top shortcut, so they will constantly have to scroll like crazy up through long articles just to search.

"So I wonder whether combining the Pinterest and Safari methods might be feasible? Best of all possible worlds, and all that." - via email