323
edits
No edit summary |
No edit summary |
||
| (23 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
== Contextual Actions == | == Contextual Actions == | ||
'''Open bugs''' | |||
*{{bug|566225}} – Contextual Actions: Integration with phone applications. | |||
* {{bug|461854}} - Need context menu UI | |||
Mockup: http://www.flickr.com/photos/31068346@N05/4613291570/ | |||
'''Fixed Bugs''' | |||
*{{bug|461854}} - Need context menu UI | |||
Some older work here: https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI/CSM | |||
== Using interactive areas in webpages == | == Using interactive areas in webpages == | ||
Open bugs | Open bugs | ||
*{{bug|441590}} - can't scroll maps.google.com | |||
*{{bug|460966}} - mouseover css drop down menu doesn't work with fennec, but works with iphone | |||
=== CSS menus using hover === | |||
* {{bug|460966}} - | open bugs | ||
*{{bug|460966}} - mouseover css drop down menu doesn't work with fennec, but works with iphone | |||
=== Pannable areas (i.e. maps) === | === Pannable areas (i.e. maps) === | ||
| Line 22: | Line 30: | ||
=== General cursor-driven interaction === | === General cursor-driven interaction === | ||
== | == Add Copy and Paste support == | ||
We should have Copy (and Paste) support in Firefox Mobile.Direct communication with other applications offers a better User Experience than Copy and Paset(it eliminates excise) But C&P would give the possibility to exchange data with applications which (currently) don't connect with Firefox Mobile. It would fit into the existing aims for having a cursor support for webpages with pannable areas or general cursor driven interaction. | |||
== Changes for Portrait use == | |||
Open bugs | |||
*{{bug|541015}} - Support rotating between portrait and landscape on N900 | |||
<br> | |||
== More space for add-ons == | == More space for add-ons == | ||
| Line 32: | Line 46: | ||
'''Description''': | '''Description''': | ||
Open bugs | Open bugs | ||
* {{bug|496654}} - let controls strip get wider, for use by add-ons | |||
*{{bug|496654}} - let controls strip get wider, for use by add-ons | |||
=== Awesome bar/view<br> === | === Awesome bar/view<br> === | ||
<TBD><br> | <TBD><br> | ||
=== Tabs bar (Left side pane)<br> === | === Tabs bar (Left side pane)<br> === | ||
<TBD><br> | <TBD><br> | ||
=== Toolbar (Righ side pane)<br> === | === Toolbar (Righ side pane)<br> === | ||
<TBD><br> | <TBD><br> | ||
=== Tools and Add-ons view<br> === | === Tools and Add-ons view revisions<br> === | ||
'''Proposal A for redesigning the UI for Tools and Add-ons '''<br> | '''Proposal A for redesigning the UI for Tools and Add-ons '''<br> | ||
| Line 57: | Line 72: | ||
*[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Overview to the design for reorganizing the UI for Tools and Add-ons|Overview to the design for reorganizing the UI for Tools and Add-ons<br>]] | *[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Overview to the design for reorganizing the UI for Tools and Add-ons|Overview to the design for reorganizing the UI for Tools and Add-ons<br>]] | ||
*[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Option A for Tools and Add-ons UI|Option A for splitting the UI for searching/installing add-ons and managing installed add-ons]]: promotes the feature for getting new add-ons.<br> | *[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Option A for Tools and Add-ons UI|Option A for splitting the UI for searching/installing add-ons and managing installed add-ons]]: promotes the feature for getting new add-ons.<br> | ||
*[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Option B for Tools and Add-ons UI|Option B for splitting the UI for searching/installing add-ons and managing installed add-ons]]: a bit more traditional approach.<br> | *[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Option B for Tools and Add-ons UI|Option B for splitting the UI for searching/installing add-ons and managing installed add-ons]]: a bit more traditional approach. | ||
<br> '''Proposal B for redesigning the Tools UI'''<br> | |||
In this proposal, the Tools UI has tabs for the main sections (Preferences, Downloads, Add-ons) similarly to current version of Fennec (version 1.1) but the layout is optimised to display the content in full width of the screen. Also, the Back button is moved to the top right corner of the view and the views would have a menu containing commands applying to all content of the currently selected tab (or subview of a tab). Tools UI could have four tabs (at max) and one of them could be e.g. a place for add-on applications. | |||
For more information, see [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised layout for Tools UI with tabs|Revised layout for Tools UI with tabs]]. | |||
The layout and content structure of the sections of Tools UI could be changed as follows: | |||
*[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised UI for Preferences|Revised UI for Preferences]] | |||
*Revised UI for Add-ons (coming soon) | |||
== Chrome components revision == | |||
*[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised layout and functionality of Fennec Pop-up Choice list|Pop-up menu<br>]] | |||
*[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Switch component|Switch]] | |||
== Session Restore == | == Session Restore == | ||
'''Description''': Session restore - the ability to pick up what you were doing before a browser restart - is a very useful feature and a signature capability of Firefox. | '''Description''': Session restore - the ability to pick up what you were doing before a browser restart - is a very useful feature and a signature capability of Firefox. Session restore as-is from the desktop doesn't make sense on mobile though. Simply reloading all previously open tabs doesn't make sense in a data-constrained environment, on top of which the user is more likely to be interesting in a quick transactional interaction with the browser anyway. | ||
Some possibilities for different approaches include | Some possibilities for different approaches include | ||
Open bugs | *providing a list of previously open tabs on a start page | ||
* {{bug|541421}} - Session restore functionality | *caching the previously open tabs and only actually reloading them on demand when the user switches to them | ||
Open bugs | |||
*{{bug|541421}} - Session restore functionality | |||
== Awesomefill for fields == | == Awesomefill for fields == | ||
'''Description''': Firefox project do make this the new autocomplete method: [https://wiki.mozilla.org/Firefox/Projects/Awesomeformcomplete link] - in 1.9.2 | '''Description''': Firefox project do make this the new autocomplete method: [https://wiki.mozilla.org/Firefox/Projects/Awesomeformcomplete link] - in 1.9.2 | ||
Open bugs | Open bugs | ||
* {{bug|466770}} - | |||
*{{bug|466770}} - fix content autocomplete | |||
== Form assistant revision == | |||
'''Description:''' Form assistant should be usefull also when using Virtual text input methods which can take lots of screen estate (both in Landscape and Portrait orientation). Also, there is need to unify functionality of same type of components: e.g. make Pop-up lists to work more consistently with the Context-sensitive menus. | |||
See [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised Functionality and Layout of Form assistant|Revised Functionality and Layout of Form assistant]] for proposal where Next and Previous buttons and all other components of Form assistant would take preferably only one row at max and be placed on the bottom of the view. | |||
See [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Option B for Form assistant Layout and Functionality revision|Option B for Revising the Functionality and layout of Form assistant]] by placing the Next and previous buttons to the top of the view and the other Components of Form assistant to the bottom of the view.<br> | |||
== Panning document/canvas vs. text selection == | |||
'''Description:''' The user should be able to pan doc/canvas in the view and select text in an text input element with the darg interaction (considered to be the most natural stroke for both actions) | |||
See proposal for [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Interaction with Text input elements|Interaction with Text input elements]] | |||
== Saving webpages == | == Saving webpages == | ||
'''Description''': | '''Description''': I think the primary usecase here is just wanting a permanent off-line available copy of a webpage (so a receipt, or a boarding pass). It's probably not necessary, or very useful, to support full html+CSS+images saving out of a webpage. | ||
Open bugs | Open bugs | ||
Design proposals | *{{bug|465305}} - Save page | ||
* Proposal 1 | |||
** Put a "Save Page" option in the site menu (see Extended Site Menu) | Design proposals | ||
** Just treat the saved file as a download, using a default download directory rather than opening a file picker, and use Fennec's existing download system: [http://www.flickr.com/photos/madhava_work/4351394977/ | |||
*Proposal 1 | |||
**Put a "Save Page" option in the site menu (see Extended Site Menu) | |||
**Just treat the saved file as a download, using a default download directory rather than opening a file picker, and use Fennec's existing download system: [http://www.flickr.com/photos/madhava_work/4351394977/ [[Image:|4351394977_d8bd245234.jpg]]] | |||
== Find-in-page == | == Find-in-page == | ||
'''Description''': Access probably to be provided through the extended site menu | '''Description''': Access probably to be provided through the extended site menu | ||
Open bugs | |||
*{{bug|541817}} - Fennec needs find in page functionality (CTRL+F) | |||
* {{bug|541817}} - Fennec needs find in page functionality (CTRL+F) | *can't find the original bug | ||
* can't find the original bug | |||
== Extended site menu == | == Extended site menu == | ||
In addition to Larry, the site menu should contain options the desktop Firefox provides in the menus or elsewhere in the chrome. These options apply to content browser is displaying and can be provided by the content (such as subscription to feeds made available with link tag in the head of HTML file) or browser UI (such as Save as). The menu could contain options also for activating browser features such as "Find in page". | In addition to Larry, the site menu should contain options the desktop Firefox provides in the menus or elsewhere in the chrome. These options apply to content browser is displaying and can be provided by the content (such as subscription to feeds made available with link tag in the head of HTML file) or browser UI (such as Save as). The menu could contain options also for activating browser features such as "Find in page". | ||
Design proposals: | Design proposals: | ||
* Proposal 1: [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Extended site menu|Extended site menu]] | *Proposal 1: [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Extended site menu|Extended site menu]] | ||
** comments on this proposal: | **comments on this proposal: | ||
** the set of options should be vertically pannable once the number of options exceeds the available screen space | **the set of options should be vertically pannable once the number of options exceeds the available screen space | ||
** sites can offer several feeds and search providers, but we don't want each one of these to get its own slot in the menu. | **sites can offer several feeds and search providers, but we don't want each one of these to get its own slot in the menu. In both of these cases, if the site only offers a single option, then tapping the associated menu item should subscribe to it or add it, etc. If there are multiple, the menu item explain that and bring up a selector widget. | ||
** we have to make it visually clear that this menu is on top of the browser underneath and not another webpage (when there are enough options that it takes up the whole screen). | **we have to make it visually clear that this menu is on top of the browser underneath and not another webpage (when there are enough options that it takes up the whole screen). | ||
[http://www.flickr.com/photos/madhava_work/4351405309/ | <br> [http://www.flickr.com/photos/madhava_work/4351405309/ [[Image:|4351405309_0cf41b25c1_o.jpg]]] | ||
Where, if there are multiple feeds or search providers, tapping the option in the menu brings up a chooser overlay: | Where, if there are multiple feeds or search providers, tapping the option in the menu brings up a chooser overlay: | ||
[http://www.flickr.com/photos/madhava_work/4352154856/ | [http://www.flickr.com/photos/madhava_work/4352154856/ [[Image:|4352154856_5c61f69146.jpg]]] | ||
== Accommodate a virtual keyboard == | == Accommodate a virtual keyboard == | ||
'''Description''': full problem statement coming | '''Description''': full problem statement coming | ||
=== awesomescreen layout revisions === | === awesomescreen layout revisions === | ||
| Line 134: | Line 184: | ||
[[Image:Awesomebar layout option B 08 edited state osk.png|340x200px]] | [[Image:Awesomebar layout option B 08 edited state osk.png|340x200px]] | ||
For more information, see [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Option B for Awesome screen layout revision|Option B for Awesome screen layout revision]].<br> | For more information, see [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Option B for Awesome screen layout revision|Option B for Awesome screen layout revision]].<br> | ||
<br> | |||
'''Proposal for Awesomescreen layout and content structure''' | |||
[[Image:Awesomescreen content structure preview.png|340x199px]] | |||
For more information see[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Awesomescreen content structure revision|Awesomescreen content structure revision]]<br> | |||
== authentication UI == | == authentication UI == | ||
Open bugs | Open bugs | ||
* {{bug|436076}} - Certificate Management | |||
* {{bug|478938}} - | *{{bug|436076}} - Certificate Management | ||
*{{bug|478938}} - Add ability to choose client certs | |||
=== client cert === | === client cert === | ||
Previous UI work: | Previous UI work: https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI#Client_Certificates | ||
https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI# | |||
=== username/password === | |||
previous UI work: https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI#Username.2FPassword | |||
== finger-friendly about:config (FIXED) == | |||
Open bugs | |||
*{{bug|540009}} - revise about:config screen design for touch use | |||
== scroll indicators == | |||
Open bugs | |||
*{{bug|461843}} - Show indication of where on the page you are when scrolling | |||
*{{bug|515166}} - Support scroll indicators in XUL richlistboxes and scrollboxes | |||
== Downloading and Opening/Saving files from Internet == | |||
'''Description:''' Fennec should provide a setting in Tools > Prefs for opening files from Internet with or without a confirmation (i.e. "Opening <file>" dialog). Context-sensitive menu should contain "Save Link as" command. Fennec should inform the user about completed downloads (when URL was not sent to an appropriate handler application after link activation). | |||
For more details see [[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/File download procedure and UI|File download procedure and UI]] | |||
== controls for video == | |||
Open bugs | |||
*{{bug|465839}} - Controls for video content are missing | |||
Proposals | |||
*proposal 1 | |||
[http://www.flickr.com/photos/madhava_work/4352145250/ [[Image:|4352145250_b678e40771.jpg]]] | |||
== | == Feed subscription == | ||
Open bugs | Open bugs | ||
*{{bug|477714}} - Provide UI for subscription to feeds (RSS, atom, etc.) | |||
<br> | |||
== Edit or clear site-specific prefs == | |||
'''Description''': There currently is not a way for users to undo site-specific choices they've made in response to prompts from Firefox. Examples include: | |||
*remember passwords for this site | |||
* | *block popups for this site | ||
*exceptions for expired certs | |||
*allow offline storage | |||
*and more! | |||
The simplest model for mobile would just be to let users clear all site-specific prefs, and this is what the listed bug proposes to do, via an extended site menu | |||
Open bugs | |||
*{{bug|456077}} - No mechanism to edit popup preferences | |||
== Gesture Engine and UI == | |||
Open bugs | |||
*{{bug|476425}} - Add a Gesture Engine to Fennec | |||
* {{bug| | *{{Bug|479975}} - add an explanatory UI for the gesture engine | ||
== | == Improve discoverability of side-areas == | ||
Open bugs | Open bugs | ||
*{{bug|478037}} - allow zooming out to past the page edges so that controls are all visible | |||
== Arbitrary/Continuous zoom mechanism == | |||
'''Description''': there is background in the planning documents for fennec 1.0 [[https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/workingUI#Zooming here]] | |||
On multitouch devices, pinch to zoom is the defacto standard here, and we should do the same. On non-multitouch devices, we still need some way of zooming by increment, rather than to structure. | |||
Open bugs | |||
*{{bug|497479}} - can't do a deep zoom into a paragraph of text | |||
* {{bug|497479}} - can't do a deep zoom into a paragraph of text | *{{bug|533560}} - Volume control does not control zoom level | ||
* {{bug|533560}} - Volume control does not control zoom level | |||
== Links and fields are hard to tap == | == Links and fields are hard to tap == | ||
# tappable areas are larger than visible targets | #tappable areas are larger than visible targets | ||
# increasing size based on likelihood of tapping (awesometap) | #increasing size based on likelihood of tapping (awesometap) | ||
# adjustments for capacitive screen | #adjustments for capacitive screen | ||
== Replace modal dialogs with modeless alternatives == | == Replace modal dialogs with modeless alternatives == | ||
== Shorter mobile-appropriate messages == | == Shorter mobile-appropriate messages == | ||
== More helpful network error pages == | == More helpful network error pages == | ||
'''Description''': Our current network error pages are unhelpful. | '''Description''': Our current network error pages are unhelpful. We can help people avoid having to type out or correct URLs by doing some basic (and Places-leveraged) suggesting. See the desktop firefox project page: | ||
https://wiki.mozilla.org/Firefox/Projects/Network_Error_Pages | https://wiki.mozilla.org/Firefox/Projects/Network_Error_Pages | ||
== Animated transitions == | == Animated transitions == | ||
* {{bug|437957}} - | *{{bug|437957}} - Animate zoom | ||
== Tab badges == | == Tab badges == | ||
== Ability to pick web-based helper apps == | == Ability to pick web-based helper apps == | ||
Only a few are actually important. | Only a few are actually important. Candidates: | ||
* mail | |||
* RSS | *mail | ||
* calendar | *RSS | ||
*calendar | |||
== See all history / visual history == | == See all history / visual history == | ||
| Line 249: | Line 328: | ||
*[https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/Fennec_1.1%2B/History History view (a subview to Awesome screen)] | *[https://wiki.mozilla.org/Mobile/UI/Designs/TouchScreen/Fennec_1.1%2B/History History view (a subview to Awesome screen)] | ||
== Improved in-content theme == | == Improved in-content theme == | ||
Open bugs | Open bugs | ||
*{{bug|516641}} - Create better theme for web content form controls | |||
== | == Support personas == | ||
== Start page == | |||
'''Description''': For some background, see here: http://madhava.com/egotism/archive/005034.html | |||
*Connection to Session Restore thinking | |||
*Connection to desktop "Home Tab" work | |||
== | == Improved visibility of and access to add-ons catalog == | ||
== | == Haptic feedback == | ||
== | == Multitouch gestures == | ||
=== Two Fingers === | |||
basic set | |||
* full screen standalone for webapps - no sidebars, etc. - just a system toolbar | *pinch to zoom | ||
*two finger swipe downwards: jump to top of Web page/doc and show the top bar. | |||
*two finger swipe upwards: jump to bottom of Web page/doc | |||
*two finger swipe to the right: Back (one step in tab-specific browsing history) | |||
*two finger swipe to the left: Forward (one step in tab-specific browsing history) | |||
*rotate to switch between tabs? | |||
== Full Screen / standalone apps / prism == | |||
*full screen standalone for webapps - no sidebars, etc. - just a system toolbar | |||
== weave vs. awesomescreen confusion == | == weave vs. awesomescreen confusion == | ||
| Line 288: | Line 374: | ||
*If the user tapped the ”Open tab from other computer” button in the left-side pane, Fennec creates a new tab and opens a web page that lists tabs available from other computers. Now, if the user wants to exit the list, s/he has to pan the left-side pane into the view and the select another tab. Note: if s/he would have pressed the (close) button in the top-right corner, s/he had closed the browser.<br> | *If the user tapped the ”Open tab from other computer” button in the left-side pane, Fennec creates a new tab and opens a web page that lists tabs available from other computers. Now, if the user wants to exit the list, s/he has to pan the left-side pane into the view and the select another tab. Note: if s/he would have pressed the (close) button in the top-right corner, s/he had closed the browser.<br> | ||
== plugin-blocking / on-demand plugin activation == | The behaviour detailed above can be really confusing from the user point of view, because sometimes s/he has to swipe the left-side pane to the view and sometimes press the button in the top-right corner to exit the view for selecting the content for the tab. It would improve usability, if the user could cancel the selection for the tab content in the same way in all cases. | ||
''See the proposal for fixing the problems above:'' | |||
*[[Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Consistent way of creating new tabs|Consistent way of creating new tabs]] | |||
== plugin-blocking / on-demand plugin activation == | |||
== multiple per-domain search engine handling in the identity panel == | |||
== Setting for Full screen mode<br> == | |||
Fennec can be run on operating systems which reserve the top area of graphical user interface for showing a functional Status bar (or other suchlike short/flat element taking full width of the view) provided by the platform (cf. e.g. Android or Windows mobile). The system-provided Status bar can provide the user with useful functions and/or features but it also disables showing Fennec in full Full screen mode. | |||
The user may want to use the Fennec | |||
*'''with''' the system-provided Status bar because it provides useful functions and/or features she needs/uses frequently and she sees it as an advantage rather than an disadvantage that the element is shown constantly in the view. | |||
*'''without''' the system-provided status bar because she does not see it as a critical feature for using the device (i.e. no added value for her) and she wants to reserve all screen estate completely for the actual content. | |||
Because it depends completely on the needs of user whether the Fennec should run in full "Full screen" or not, browser should not decide on behalf of her to hide the system-provided Status bar but let the user user to decide what is best for her. | |||
Fennec should provide the user with a setting for enabling/disabling the system-provided Status bar or other corresponding platform-provided functional element. The setting should be available in the browser settings.<br> | |||
edits