Fennec/NativeUI/UserExperience/ReaderMode: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 11: Line 11:
[http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br>
[http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br>
[http://www.flickr.com/photos/patrykdesign/6560945787/in/set-72157628389027877 Proposed Visual Design Mock Up]
[http://www.flickr.com/photos/patrykdesign/6560945787/in/set-72157628389027877 Proposed Visual Design Mock Up]
[http://www.flickr.com/photos/patrykdesign/6589809399/in/photostream/ Examples of Article Navigation]
<br><br>
<br><br>



Revision as of 20:38, 28 December 2011

Below are some concepts for the a potential reader mode for the Firefox Mobile browser. All the mockups can found in this flickr folder.

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 you can hidden the the menu invoked by pressing the hardware/software menu button or with an icon which appears in the URL bar. See examples:
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. Examples:
Sample Interaction Flow
Proposed Visual Design Mock Up Examples of Article Navigation

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. Examples:
Sample Interaction Flow
Proposed Visual Design Mock Up

4. Stylistic Elements
Various Examples:
Overall Layout & Typography
Colour Themes Image Treatement


5. Scalability
Typography size scaling ratio pairs
Handheld vs Tablet