Mobile design/Ribbon navigation

This document describes the design of a navigation system for "page local" actions on the mobile version of Wikipedia. It is primarily intended for the mobile web version, though should be able to be adapted to mobile app versions with little to no modification.

This document is not intended for discussion as to which actions are included in the navigation system; that is a separate discussion and out of scope for this document.

This document includes some changes to the behavior of the global search bar.

Rationale

MediaWiki (and Wikipedia) consists of three basic groupings of activity:

Site Actions: Actions which are site-wide, such as search or global navigation
Personal Actions: Actions which are related to the user, such as "My Contributions", preferences, or notifications
Page Local Actions: Actions which are focused on the current page or article, such as "add to watchlist" or "view history".

On the desktop, distinguishing between these families can be done rather easily due to available screen real-estate. However, in a mobile context, space is at a premium.

Cheaply, a design could jam everything into a side menu. However, this creates a confusing mental model for the user wherein unlike actions are grouped together, either by function or target (c.f., the English Wikipedia's "toolbox" problem).

This design attempts to solve the problem of page local activities.

Nomenclature

Search Bar: The large, full-width control at the top of the screen.
Ribbon: A "panel" of controls that contain page local activity controls.
Ribbon Tab: The Ribbon in its "contracted" state.

User Experience

General

A new element will be added to the screen, the Ribbon. This element is a vertically oriented "ribbon" of control icons. The design of the Ribbon is intended to evoke the idea of a "bookmark" in order to more strongly tie to the concept of a reading experience.

This document includes two variations for the color of the ribbon: one grey and one blue.

While the grey version has value by blending into the background, it does not invite exploration as much as the blue version. Therefore it is recommended that the blue version be used.

Visual Design Modifications

A small shadow has been placed underneath the Search Bar. This shadow will remain whenever the Search Bar is visible on the screen but will disappear when the Search Bar is off-screen.

Behavior: Initial Load

Upon the initial load and opening of a page, the following elements will be visible:

The Search Bar
The Ribbon, in its fully-expanded state

After a short time (say, .5 seconds), the Ribbon will retract to it's "minimized" form. This is to allow for an initial point of discovery for the user: the user will see that this is a control with icons and can explore it at their leisure.

Ideally, an animated "bounce" effect will occur at two times:

When the Ribbon first appears (slides down, slight bounce)
When the Ribbon retracts (slides up, slight bounce).

After the initial load the Ribbon will start automatically retracted (without any animation effects).

From time to time (say, every 500 page views from the same user), the initial load behavior shall repeat, reminding the user that the Ribbon exists.

Behavior: Scrolling

When the user scrolls down a page, the Search Bar shall scroll off the screen. Only the small Ribbon tab shall remain.

Note that the shadow of the Search Bar should disappear at this time.

If the user scrolls back up, the Search Bar should scroll into view from anywhere on the screen.

Behavior: Ribbon Tab Action

When the Ribbon Tab is interacted with, there are two states it could be in and the interaction is slightly different for each.

The Search Bar is Visible - in this case, tapping on the Ribbon Tab or swiping downwards shall cause the Ribbon to expand to its full length (with the appropriate bounce animation).
The Search Bar is not Visible - The Search Bar will slide down into view and the Ribbon will then expand (with the appropriate bounce animation).

Design Considerations

Shadows

The inclusion of shadows may create performance implications with certain devices. While the shadows are an important part of disclosing information hierarchy, they can be disabled if needs be.

Varied Display Resolutions

The shape of the Ribbon is asymmetrical. This would not be a problem if we were only dealing with a single resolution. However, the advent of retina displays requires that we think more with "shapes" over "pixels". Development will have to take the lead here to determine if the shape of the Ribbon is possible using raw elements, 9-square graphics, or other solutions.

At the worst case, the Ribbon can be squared off.

Since the layout size of the ribbon will be consistent in CSS pixels, I don't think this will be a problem. We can simply have 1.5x and 2.0x size versions of the images and they'll be placed the same. --brion (talk) 17:51, 24 September 2012 (UTC)[reply]

Future Thinking

Tab/Sub-tab interactions

The perennial problem of MediaWiki's "tab/sub tab" interaction problem raises its head here again. While this is not a current problem (given what the mobile gateway supports), it will be a problem in the future.

However, this is not insurmountable and is possibly even more easily solved with the Ribbon than with tabs.