Fennec/NativeUI/UserExperience/ReaderMode: Difference between revisions
No edit summary |
m (s/http/https/ for embedded external images to stop mixed content security warnings) |
||
| Line 3: | Line 3: | ||
<b>Problem:</b> The new browser design is heading towards a chromeless / buttonless aesthetic, how do we introduce the reader mode?<br> | <b>Problem:</b> The new browser design is heading towards a chromeless / buttonless aesthetic, how do we introduce the reader mode?<br> | ||
<b>Solution:</b> 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.<br><br> | <b>Solution:</b> 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.<br><br> | ||
https://farm8.staticflickr.com/7017/6560941471_5153493ffa_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560941471/in/set-72157628389027877/ Proposed Visual Design Mock Up] | [http://www.flickr.com/photos/patrykdesign/6560941471/in/set-72157628389027877/ Proposed Visual Design Mock Up] | ||
<br><br> | <br><br> | ||
| Line 10: | Line 10: | ||
<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.<br><br> | <b>Solution:</b> Introduce off screen menus rendered visible with swiping gestures.<br><br> | ||
https://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://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br><br> | ||
https://farm8.staticflickr.com/7166/6560945787_f996192027_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560945787/in/set-72157628389027877 Proposed Visual Design Mock Up]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560945787/in/set-72157628389027877 Proposed Visual Design Mock Up]<br><br> | ||
https://farm8.staticflickr.com/7015/6589809399_8a96004c7d_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6589809399/in/photostream Examples of Article Navigation (Potentially for a future release)] | [http://www.flickr.com/photos/patrykdesign/6589809399/in/photostream Examples of Article Navigation (Potentially for a future release)] | ||
<br><br> | <br><br> | ||
| Line 21: | Line 21: | ||
<b>Problem:</b> How do we access / display the various options without intruding on the reading experience<br> | <b>Problem:</b> How do we access / display the various options without intruding on the reading experience<br> | ||
<b>Solution:</b> 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.<br><br> | <b>Solution:</b> 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.<br><br> | ||
https://farm8.staticflickr.com/7202/6964642207_bdcff2b041_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6964642207/in/photostream Proposed Visual Design Mock Up] | [http://www.flickr.com/photos/patrykdesign/6964642207/in/photostream Proposed Visual Design Mock Up] | ||
<br><br> | <br><br> | ||
| Line 27: | Line 27: | ||
<b>4. Visual Variations</b><br> | <b>4. Visual Variations</b><br> | ||
Various Examples:<br><br> | Various Examples:<br><br> | ||
https://farm8.staticflickr.com/7149/6560944301_67bccaaee8_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560944301/in/photostream/ Overall Layout & Typography, Sans Serifs will likely be Open Sans as seen in the later mock ups]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560944301/in/photostream/ Overall Layout & Typography, Sans Serifs will likely be Open Sans as seen in the later mock ups]<br><br> | ||
https://farm8.staticflickr.com/7147/6560942271_dd0e2d08fe_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560942271/in/photostream/ Colour Themes]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560942271/in/photostream/ Colour Themes]<br><br> | ||
https://farm8.staticflickr.com/7145/6560945017_c71c0b0b7b_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560945017/in/photostream/ Image Treatement, ideally if we could aim for the left example, flush layout.] | [http://www.flickr.com/photos/patrykdesign/6560945017/in/photostream/ Image Treatement, ideally if we could aim for the left example, flush layout.] | ||
<br><br> | <br><br> | ||
| Line 37: | Line 37: | ||
<b>5. Scalability</b><br><br> | <b>5. Scalability</b><br><br> | ||
https://farm8.staticflickr.com/7051/6964643319_6224330a9b_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560940929/in/photostream/ Typography size scaling ratio pairs, we will need to create different ones for 7" and 10" tablets]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560940929/in/photostream/ Typography size scaling ratio pairs, we will need to create different ones for 7" and 10" tablets]<br><br> | ||
https://farm8.staticflickr.com/7194/6821932828_7aeda656c3_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6821932828/in/photostream Phone to Tablet scaling, notice titles and picture location is different, we will need custom settings for various form factors]<br><br> | [http://www.flickr.com/photos/patrykdesign/6821932828/in/photostream Phone to Tablet scaling, notice titles and picture location is different, we will need custom settings for various form factors]<br><br> | ||
https://farm8.staticflickr.com/7195/6964642677_73c976d66f_b.jpg<Br> | |||
10.1" Tablet, looks great in portrait<br><br> | 10.1" Tablet, looks great in portrait<br><br> | ||
https://farm8.staticflickr.com/7180/6964642743_71b50a0794_b.jpg<br> | |||
A bit awkward in landscape, but ok for v.1<br><br> | A bit awkward in landscape, but ok for v.1<br><br> | ||
https://farm8.staticflickr.com/7197/6964642807_a12551d989_b.jpg<br><br> | |||
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?<br> | 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?<br> | ||
Revision as of 11:01, 29 April 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. 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.
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.
Sample Interaction Flow
Proposed Visual Design Mock Up
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.
Proposed Visual Design Mock Up
4. Visual Variations
Various Examples:
Overall Layout & Typography, Sans Serifs will likely be Open Sans as seen in the later mock ups
Colour Themes
Image Treatement, ideally if we could aim for the left example, flush layout.
5. Scalability
Typography size scaling ratio pairs, we will need to create different ones for 7" and 10" tablets
Phone to Tablet scaling, notice titles and picture location is different, we will need custom settings for various form factors
10.1" Tablet, looks great in portrait
A bit awkward in landscape, but ok for v.1
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?