Fennec/NativeUI/UserExperience/ReaderMode: Difference between revisions
No edit summary |
No edit summary |
||
| Line 9: | Line 9: | ||
<b>2. Proposed Interactions</b><br> | <b>2. Proposed Interactions</b><br> | ||
<b>Problem:</b> Add functionality to the reader mode while still maintaining a chromeless, reading focused layout.<br> | <b>Problem:</b> Add functionality to the reader mode while still maintaining a chromeless, reading focused layout.<br> | ||
<b>Solution:</b> Introduce off screen menus rendered visible with swiping gestures. Examples:<br> | <b>Solution:</b> Introduce off screen menus rendered visible with swiping gestures. Examples:<br><br> | ||
[http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br> | http://farm8.staticflickr.com/7008/6517216455_d480da0ea1_b.jpg<br> | ||
[http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br><br> | |||
http://farm8.staticflickr.com/7166/6560945787_f996192027_b.jpg<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] | [http://www.flickr.com/photos/patrykdesign/6589809399/in/photostream/ Examples of Article Navigation] | ||
Revision as of 23:14, 9 March 2012
Below is the proposed first version of a reader mode for mobile Firefox. All the mockups (some old) 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 can hidden the the menu invoked by pressing the hardware/software menu button or with an icon which appears in the URL bar.
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
[:Image:
]