Fennec/NativeUI/UserExperience/ReaderMode

From MozillaWiki
Jump to: navigation, search

Below is the proposed first version of a reader mode for mobile Firefox.

  • All the mockups (some old) can found in this Flickr folder.
  • Bug #750678 is related to reading list navigation (and may end up implementing some of the mockups below).
  • Other reader mode bugs are tracked by #696921 and this blog post shows screenshots of an early UI implementation from June 2012.

User Interaction

1. How to Access Reader Mode from the Browser?

Problem: The new browser design is heading towards a chromeless / buttonless aesthetic, how do we introduce the reader mode?
Solution: The reader mode can hidden the the menu invoked by pressing the hardware/software menu button or with an icon which appears in the URL bar. In tablets there is another possible interaction: it would be interesting to have a feature (perhaps ON by default) where when you rotate the device from landscape to portrait the page would automatically enter reader mode.

6560941471_5153493ffa_b.jpg
Proposed Visual Design Mock Up

2. Proposed Interactions

Problem: Add functionality to the reader mode while still maintaining a chromeless, reading focused layout.
Solution: Introduce off screen menus rendered visible with swiping gestures.

6517216455_d480da0ea1_b.jpg
Sample Interaction Flow

6560945787_f996192027_b.jpg
Proposed Visual Design Mock Up

6589809399_8a96004c7d_b.jpg
Examples of Article Navigation (Potentially for a future release)

3. The Toolbar

Problem: How do we access / display the various options without intruding on the reading experience
Solution: On tapping of the screen a translucent tool bar appears, further options can be invoked by pressing the menu icon in the bar, or the hardware menu key.

6964642207_bdcff2b041_b.jpg
Proposed Visual Design Mock Up

4. Visual Variations

Various Examples:

6560944301_67bccaaee8_b.jpg
Overall Layout & Typography, Sans Serifs will likely be Open Sans as seen in the later mock ups

6560942271_dd0e2d08fe_b.jpg
Colour Themes

6560945017_c71c0b0b7b_b.jpg
Image Treatement, ideally if we could aim for the left example, flush layout.


5. Scalability

6964643319_6224330a9b_b.jpg
Typography size scaling ratio pairs, we will need to create different ones for 7" and 10" tablets

6821932828_7aeda656c3_b.jpg
Phone to Tablet scaling, notice titles and picture location is different, we will need custom settings for various form factors

6964642677_73c976d66f_b.jpg
10.1" Tablet, looks great in portrait

6964642743_71b50a0794_b.jpg
A bit awkward in landscape, but ok for v.1

6964642807_a12551d989_b.jpg

Perhaps we can add images or article scroll menu in landscape to maximize the space? v.1 would be nice, but if not v.2?

Discoverability

Early user feedback in bug 696921 suggests that discoverability may be an issue. One way to alleviate this might be to create a "first-launch" help screen for Fennec. Attached are some examples of prior art (mostly iOS apps, with links to source) for such help screens. Some first-use help is implemented as a "walkthrough" with several steps, or even a "play-through" animation. Others have shaded overlays with callouts describing the various UI elements, or make use of the blank area within the app's "home" screen to highlight elements of the UI.

First-Launch Help Screens: Prior Art

The Tapbots iOS apps

These apps have very intuitive first-launch help screens which introduce new users to UI controls and gestures. The Convertbot app even has a "play-through" animated demonstration of the app's features.

First launch help for Tapbot's Tweetbot app for iOS, showing swipe gestures.
The first launch help for Convertbot is an animated "play-through."

Favorites 2 by Matt Gemmell

When the app is first launched, the empty speed dial screen shows this help:

First launch help for the Favorites iOS app invites users to add new favorites by directing them to the appropriate UI widget.

Articles by Sophia Teutschler

This is another app with a very minimalist UI, like Fennec. When no articles are open within the app, a callout directs the user to the search bar at the top of the screen.

First-launch help for Sophiestication's Articles iOS app.