Mobile design/Sections

Option A Section toggle with lines and right-side arrows

Option B Section toggle with alternating stripes and right-side arrows

Option C Section toggle with gradation.

Option C Section toggle with gradation expanded.

Option D Section toggle, tiny left-side arrow and lines.

This document describes the design of the section header and toggle for the developing Wikipedia Mobile site.

Rationale

The current mobile section headers do not fit within the concept of a minimal design.

Goals

• Ongoing effort to implement a UI step between the current interface and Glaucus/Athena
• To make interaction simple, smooth and intuitive.
• To make section toggle visually obvious to the user but keeping a minimal design.

User testing

Two user tests of the section heading style with down/up arrows are documented here.

• One is on iPhone and one is on Android.
• Both users clicked on the down arrow without hesitation.
• Both users found the opening and closing of sections to be intuitive.
• The iPhone user complained about not being able to scroll quickly through lengthy articles, and clicked on "Jump back a section" and then collapsed the section.
• The Android user suggested other icons for expanding collapsing, such as +/- and arrow pointing right/down.