Fennec/NativeUI/UserExperience/ReaderMode: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<b>Firefox Mobile 11 or Beyond</b><br>
<b>Firefox Mobile 11 or Beyond</b><br>
Below are some concepts for the a potential reader mode for the Firefox Mobile browser. All the mockups can found in this [http://www.flickr.com/photos/patrykdesign/sets/72157628389027877/ flickr folder].<br><br>
Below are some concepts for the a potential reader mode for the Firefox Mobile browser. All the mockups can found in this [http://www.flickr.com/photos/patrykdesign/sets/72157628389027877/ flickr folder].<br><br>
<b>1. Proposed Interactions</b><br>
<b>1. How to Access Reader Mode from the Browser?</b><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 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:<br>
[http://www.flickr.com/photos/patrykdesign/6560941471/in/set-72157628389027877/ Proposed Visual Design Mock Up]
<br><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>
Line 8: Line 14:
<br><br>
<br><br>


 
<b>3. The Toolbar</b><br>
We would want to inflate the following elements.<br>
<b>Problem:</b> How do we access / display the various options without intruding on the reading experience<br>
Title (the header of the article): 6pt<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. Examples:<br>
Content (body text of the article): 8pt<br>
[http://www.flickr.com/photos/patrykdesign/6517218119/in/set-72157628389027877/ Sample Interaction Flow]<br>
Caption (label underneath pictures): 4pt<br><br>
[http://www.flickr.com/photos/patrykdesign/6560943501/in/photostream/ Proposed Visual Design Mock Up]
<i>These sections will be difficult to isolate as they are not universally identified within HTML, so special rules need to be created around tags such as <nowiki><p> and <div></nowiki> containing heavy text. These rules would apply to most news paper websites view in desktop/"full" mode such as nytimes.com or thestar.com or most blogs.
</i>
<br>
 
See examples:<br>
[http://www.flickr.com/photos/patrykdesign/6426532563/in/set-72157628209207387 Medium Resolution devices such as the Google Nexus S (480x800 px @ 233ppi)]<br>
[http://www.flickr.com/photos/patrykdesign/6426531853/in/set-72157628209207387 High Resolution devices such as the Google Galaxy Nexus (720x1280 px @ 316ppi)]
<br><br>
<br><br>
<b>2. Ability to modify the optimal text size for reading within the browser options</b><br>
<b>Problem:</b> 8pt font size for the reading content is a great compromise in size for most users. However our older audience with vision loss will find it too smaller and our younger audience will likely find it too large.
<b>Solution:</b> We should allow the user to specify the reading font size within the browser’s options.
See an [http://www.flickr.com/photos/patrykdesign/6427428933/in/set-72157628209207387 example of the proposed of the option controls on Google Galaxy Nexus running Android 4.0.X], the controls are designed to be compatible with the interaction paradigm of Android 2.2/2.3 to not alienate users of the older OS version.
The user will be able able to specify any font size between 6pt and 14pt. We would want to maintain the following ratios for content vs title vs captions:
User Defined Size &rarr; Content = 100% &rarr; Title = ~75% &rarr; Caption = 50%<br>
<tt>
6pt &rarr; Content = 6pt &rarr; Title = 5pt &rarr; Caption = 3pt<br>
7pt &rarr; Content = 7pt &rarr; Title = 5pt &rarr; Caption = 3pt<br>
8pt &rarr; Content = 8pt &rarr; Title = 6pt &rarr; Caption = 4pt<br>
9pt &rarr; Content = 9pt &rarr; Title = 6pt &rarr; Caption = 4pt<br>
10pt &rarr; Content = 10pt &rarr; Title = 7pt &rarr; Caption = 5pt<br>
11pt &rarr; Content = 11pt &rarr; Title = 7pt &rarr; Caption = 5pt<br>
12pt &rarr; Content = 12pt &rarr; Title = 8pt &rarr; Caption = 6pt<br>
13pt &rarr; Content = 13pt &rarr; Title = 8pt &rarr; Caption = 6pt<br>
14pt &rarr; Content = 14pt &rarr; Title = 9pt &rarr; Caption = 7pt<br>
</tt>

Revision as of 21:41, 23 December 2011

Firefox Mobile 11 or Beyond
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

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

Retrieved from "https://wiki.mozilla.org/index.php?title=Fennec/NativeUI/UserExperience/ReaderMode&oldid=381544"