16
edits
Fennec/NativeUI/UserExperience/ReaderMode: Difference between revisions
Fennec/NativeUI/UserExperience/ReaderMode (view source)
Revision as of 19:36, 28 June 2012
, 28 June 2012→Favorites 2 by Matt Gemmell
No edit summary |
|||
| (19 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
Below | 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 | <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> | ||
===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. | <b>Solution:</b> Introduce off screen menus rendered visible with swiping gestures.<br><br> | ||
[http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br> | https://farm8.staticflickr.com/7008/6517216455_d480da0ea1_b.jpg<br> | ||
[http://www.flickr.com/photos/patrykdesign/6560945787/in/set-72157628389027877 Proposed Visual Design Mock Up] | [http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br><br> | ||
[http://www.flickr.com/photos/patrykdesign/6589809399/in/photostream | 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> | |||
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)] | |||
<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. | <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/ | [http://www.flickr.com/photos/patrykdesign/6964642207/in/photostream Proposed Visual Design Mock Up] | ||
<br><br> | <br><br> | ||
===4. Visual Variations=== | |||
Various Examples:<br><br> | |||
[http://www.flickr.com/photos/patrykdesign/6560944301/in/photostream/ Overall Layout & Typography]<br> | https://farm8.staticflickr.com/7149/6560944301_67bccaaee8_b.jpg<br> | ||
[http://www.flickr.com/photos/patrykdesign/6560942271/in/photostream/ Colour Themes] | [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/6560945017/in/photostream/ Image Treatement] | https://farm8.staticflickr.com/7147/6560942271_dd0e2d08fe_b.jpg<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.] | |||
<br><br> | <br><br> | ||
===5. Scalability=== | |||
[http://www.flickr.com/photos/patrykdesign/6560940929/in/photostream/ Typography size scaling ratio pairs]<br> | https://farm8.staticflickr.com/7051/6964643319_6224330a9b_b.jpg<br> | ||
[http://www.flickr.com/photos/patrykdesign/ | [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> | ||
<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> | |||
https://farm8.staticflickr.com/7195/6964642677_73c976d66f_b.jpg<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> | |||
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> | |||
==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. One way to alleviate this might be to create a "first-launch" help screen for Fennec. Attached are some examples of prior art (mostly iOS apps, with links to source) for such help screens. Some first-use help is implemented as a "walkthrough" with several steps, or even a "play-through" animation. Others have shaded overlays with callouts describing the various UI elements, or make use of the blank area within the app's "home" screen 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 invites users to add new favorites by directing them to the appropriate UI widget.]] | |||
{{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}} | |||