16
edits
Fennec/NativeUI/UserExperience/ReaderMode: Difference between revisions
Fennec/NativeUI/UserExperience/ReaderMode (view source)
Revision as of 16:37, 28 June 2012
, 28 June 2012no edit summary
(Added links to relevant Bugzilla bugs) |
No edit summary |
||
| Line 1: | Line 1: | ||
Below is the proposed first version of a reader mode for mobile Firefox. All the mockups (some old) can found in this [http://www.flickr.com/photos/patrykdesign/sets/72157628389027877/ Flickr folder]. Bug [http://bugzilla.mozilla.org/show_bug.cgi?id=750678 #750678] is related to reading list navigation (and may end up implementing some of the mockups below). Other reader mode bugs are tracked by [https://bugzilla.mozilla.org/show_bug.cgi?id=696921 #696921] and [http://lucasr.org/2012/06/21/reader-mode-in-firefox-mobile/ this blog post] shows screenshots of an early UI implementation.<br><br> | Below is the proposed first version of a reader mode for mobile Firefox. | ||
* All the mockups (some old) can found in this [http://www.flickr.com/photos/patrykdesign/sets/72157628389027877/ Flickr folder]. | |||
* Bug [http://bugzilla.mozilla.org/show_bug.cgi?id=750678 #750678] is related to reading list navigation (and may end up implementing some of the mockups below). | |||
* Other reader mode bugs are tracked by [https://bugzilla.mozilla.org/show_bug.cgi?id=696921 #696921] and [http://lucasr.org/2012/06/21/reader-mode-in-firefox-mobile/ this blog post] shows screenshots of an early UI implementation from June 2012.<br><br> | |||
==User Interaction== | |||
===1. How to Access Reader Mode from the Browser?=== | |||
<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> | ||
| Line 7: | Line 11: | ||
<br><br> | <br><br> | ||
===2. Proposed Interactions=== | |||
<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> | ||
| Line 18: | Line 22: | ||
<br><br> | <br><br> | ||
===3. The Toolbar=== | |||
<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> | ||
| Line 25: | Line 29: | ||
<br><br> | <br><br> | ||
===4. Visual Variations=== | |||
Various Examples:<br><br> | Various Examples:<br><br> | ||
https://farm8.staticflickr.com/7149/6560944301_67bccaaee8_b.jpg<br> | https://farm8.staticflickr.com/7149/6560944301_67bccaaee8_b.jpg<br> | ||
| Line 36: | Line 40: | ||
===5. Scalability=== | |||
https://farm8.staticflickr.com/7051/6964643319_6224330a9b_b.jpg<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> | ||
| Line 47: | Line 51: | ||
https://farm8.staticflickr.com/7197/6964642807_a12551d989_b.jpg<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> | ||
==Discoverability== | |||
Early [https://bugzilla.mozilla.org/show_bug.cgi?id=696921#c6 user feedback] in bug [https://bugzilla.mozilla.org/show_bug.cgi?id=696921 696921] suggests that discoverability may be an issue. Attached are some examples of prior art (mostly iOS apps, with links to source) for "first-launch" help screens. Some first-use help is implemented as a "walkthrough" with several steps, or even a "play-through" as with some of the Tapbots apps. Others have shaded overlays with callouts describing the various UI elements, or make use of a blank "home" screen within the app to highlight elements of the UI. | |||
===First-Launch Help Screens: Prior Art=== | |||
====The [http://tapbots.com 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. | |||
[[File:Tweetbot first-launch help.png|thumb|200px|left|First launch help for Tapbot's [http://tapbots.com/software/tweetbot/ Tweetbot] app for iOS, showing swipe gestures.]][[File:Convertbot first-launch help.png|thumb|200px|none|The first launch help for [http://tapbots.com/software/convertbot/ Convertbot] is an animated "play-through."]] | |||
{{clear}} | |||
====[http://instinctivecode.com/favorites/ Favorites 2] by Matt Gemmell==== | |||
When the app is first launched, the empty speed dial screen shows this help: | |||
[[File:MattGemmell Favorites2 UI.jpg|thumb|200px|none|First launch help for the [http://instinctivecode.com/favorites/ Favorites] iOS app]] | |||
{{clear}} | |||
====[http://sophiestication.com/articles/ 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. | |||
[[File:Articles first-launch help.png|thumb|200px|none|First-launch help for Sophiestication's [http://sophiestication.com/articles/ Articles] iOS app.]] | |||
{{clear}} | |||