Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Overview to the design for reorganizing the UI for Tools and Add-ons

From MozillaWiki
Jump to: navigation, search


The objective of this design is to provide more space for numerous add-ons in the Tools UI, enable full-screen views for Add-on applications (such as Geoguide) with all standard UI components they can need (such as menu, toolbar, content area) and split the UI for searching/installing add-ons and managing installed add-ons so that they could be optimized for their purposes, and do this all so that the UI is compatible with different sizes of screens, orientation of device and text input methods (hardware and on-screen).

Tools UI

In the current version of Fennec (1.0 beta), the Tools UI is the place from where you can find and start add-on applications (such as GeoGuide). Because the Tools UI presents add-on applications as tabs (similarly to Settings, Downloads etc), it can offer very limited space for them i.e. place only for couple of add-on apps (at max 1-2 in landscape orienation depending on the screen size) and, after you have started an add-on application (by selecting a corresponding tab), the screen is occupied by the functions (such as Settings, Downloads etc) that can be irrelevant for using the actual add-on application and will take space from the actual application-displayed content anyway.

The problems above can be solved by restructuring the Tools UI. Instead of tabs, the view should list options you could use for opening subviews: first the options provided by Fennec (Add-ons, Downloads, Settings etc) and then the add-on applications installed by the user. In this case, the Tools view could contain numerous options completely free from limitations set by screen size, dimensions and orientation and the layout and functionality of the subviews could be optimized completely to serve their needs.

This solution does not restrict the appearance/behaviour of add-on apps/widgets. Potentially, they could display dynamic information too (e.g. the current weather in case of a weather widget).

Also, this solution would be tailor-made for supporting better fingerability.

In the example below, the tools UI would promote the feature for getting new add-ons.

Fennec Tools UI optimized for Add-ons.png

Add-on application/widget view

Add-on applications (such as GeoGuide etc) deserve the whole view their own needs and they should be able to use standard UI components such as application menu, Application toolbar and Content area. Because the add-on applications can use drag interaction completely for their own purposes (e.g. panning a map etc) i.e. potentially you could not pan away from it, the top right corner should be reserved for exiting the application view.

Fennec Tools UI optimized for Add-on apps.png

Add-ons UI (searching, installing and managing)

In the current version of Fennec (1.0 beta), the Add-ons UI combines the functions/features for searching/installing and managing installed add-ons in to one list. This is not optimal, when the user has installed a few more add-ons than what comes with the installation package and when the user would have to use On-screen keyboard for searching desired add-ons. And in addition to troubles above, expandable list items can be hard to use with small-scale touch devices.

The UI for searching/installing and managing add-ons should reorganized so that

  • it supports different sizes of screens, orientation of device and text input methods (hardware and on-screen).
  • it is split to views serving different purtasks (e.g. selecting vs. editing)
  • it does not get complicated to use even if you had lots of installed add-ons and/or search results.
  • it can promote new recommended add-ons.
  • add-ons can indicate their states/conditions clearly and inform the user what s/he should do to complete the management operations. (cf. desktop Firefox).
  • it could be extended later on if/when needed: e.g. support for browsing add-ons available for installing by categories with the Get add-ons UI or adding "Donate" button or "Developer information" to the view of an individual add-on etc etc.

The objectives above can be achieved by providing separate views for

  • viewing/managing installed add-ons and promoting/searching/installing new add-ons.
  • add-ons list (for selecting an add-on for editing or installing) and add-on details (for managaning an add-on

There are various ways how to make UI/views for installed add-ons (aka my "add-ons") and getting new add-ons available for the user:

  1. You could access both Installed add-ons and Get add-ons views from the Tools. In this case, the UI can promote the feature for getting new add-ons. For more information, see Option A for Tools and Add-ons UI
  2. Tools UI provides access to Add-ons view that contains all installed add-ons and an option for opening Get add-ons view i.e. it would be a subview of the Add-ons view. For more information, see Option B for Tools and Add-ons UI

Revised UI for Getting add-ons.

In general, Getting new add-ons should work similarly to Awesome bar/view.

Fennec Add-ons UI Getting add-ons osk.png

The Search bar (for searching add-ons) should be placed to the top part of the view (cf. Awesome bar) so that you could see suggestions also when you are entering text with On-screen keyboard. The area below the Search bar would be used for listing recommended add-ons and the options for browsing add-ons (all or all recommended), when you are not searching or the search field is empty, and matching add-ons, when you have started to type text to the text field.

Tapping a list item for an add-on would open a details view for it, that would provide all options you can do with the add-on (such as Add to Firefox, Go to Page etc). When the details of the add-on would be displayed in an own view, there would be less limitations in extending and developing the feature in the future. It could contain e.g. list of other add-ons some way similar/related to the currently displayed (e.g. developer, add-on type) so that the user could just select another candidate for viewing if the current one was not exactly what you were looking for.

The options for browsing add-ons could open the corresponding web sites (assuming they are optimized for using with small-scale touch screen devices) but it open subviews with the selected content too.

Depending on the UI arcitecture, the user would be able to access the view for Getting add-ons either from the Tools view (directly) or Add-ons view.

Fennec Add-ons UI Main views for Getting add-ons.png

Revised UI for managing add-ons (aka "My add-ons")

The view for installed add-ons (aka "My add-ons") should simply list the add-ons that have been installed to Fennec. To provide enough room for all information, actions and settings of an add-on, the details of an add-on should be displayed in an own view:

  • You could see all information, actions and settings at once without need for showing/hiding them
  • Usability would be less sensitive to the different amount/number of information settings etc an add-on can provide
  • It would allow longer and/or more exact/descriptive strings for the buttons
  • UI could indicate states of add-ons clearly and tell the user what to do next to complete the management operations. (cf. desktop Firefox)

Also, this solution would keep doors open for further-developing the add-ons UI later on: e.g. Add-on details view could contain information on the developer and the "Donate" button.

Fennec Add-ons UI Main views for Installed add-ons.png

See the UI views and flow for uninstalling an add-on. Similarly to desktop Firefox, the UI could inform the states of add-ons clearly and tell what to do next to complete the management operation.

Fennec Add-ons UI flow for uninstalling add-on.png