Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised Functionality and Layout of Form assistant
NOTE: This work is in progress
Problem description
<TBD>
Basic components
In this proposal, Form assistant uses basically the same components as the current version (1.1) of Fennec. However, there are some changes.
Basic layout
Similarly to current version (1.1) of Fennec, the Form assistant should locate in the bottom of the view, however always above the Virtual text input methods (i.e. never be covered by a Software keyboard).
Form assistant should be useful with both Hardware and Software keyboards. Because Software keyboards generally take half of the screen (typically a bit more in Landscape and a bit less in Portrait orientation), the Form assistant should take as less screen estate as possible to leave room also for the actual form element and/or web content in the view. For this reason the Form assistant should take one row at maxmum and it should not take full width of the screen unless it is really needed for e.g. showing context-specific option such as suggestions for text input fields or search for (single and multi-selection) Choice lists. Of course, finger-usable choice lists will take more space in opened state.
Anyway, the controls of the Form assistant must be big enough for using with fingers (or even with thumb). This is contradicting the aim to maximize the space for the Web content even when a Software keyboard is involded but could stil be doable. It most likely would not spoil use experience, if the Form assistant was displayed only when it is reasonable and really needed, and it displayed only relevant options (which can be used for something real – i.e. did not waste space for dimmed options). For example, if a web page contained only one form element (e.g. text input field), there is no mean to provide dimmed Previous and Next options, because they just take space from content. Form assistant could waste space for something useful.
For detailed
Landscape orientation (click the image to see it in a bigger size)
Portrait orientation (click the image to see it in a bigger size)
Basic functionality
The designs below aim to make the Text input elements and (single and mulit-selection) Choice lists to work as expected by the user. Basically it means that form elements should work consistently with the desktop Firefox (as much as possible). However, there should be some obvious optimization for using the form elements with a large-scale controller (such as finger or thumb) through a small/medium-scale touch-sensitive display: e.g. choice lists.
Also, the aim is to unify the functionality of same type of components: e.g. Context-sensitive menu and Pop-up menu.
Text input elements
With the implementation detailed below, the Text input elements would work consistently with desktop Firefox.
Inserting focus to a Text input element on a web page
- Single tap on it
- Tap Next/Previous button of Form assistant (if they are available)
Removing focus from a Text input element on a web page
- Single tap outside of it
- Close Software keyboard
- Tap Next/Previous button of Form assistant (if they are available)
Form assistant should be
- opened or stay open, if the user inserts focus to a text input element.
- closed, if the user removes focus from a text input element and it does not result inserting focus to another form element you could use with Form assistant.
<figure to come>
With the implementation detailed below, the Pop-up menu would work consistently with the Fennec´s context-sensitive menu and desktop Firefox.
Inserting focus to a Pop-up menu on a web page
- - Single tap on it
- - Tap Next/Previous button of Form assistant (if they are available)
Removing focus from a Pop-up menu on a web page
- - Single tap outside of it when in closed state
- - Tap Next/Previous button of Form assistant (if they are available)
Opening a pop-up menu/list
- - Insert focus to it (see above)
- - Tap pop-up menu when it is in closed state
Closing a pop-up menu/list
- - Tap list item: selects the ietm
- - Tap outside of list or Form assistant (cf. Context-sensitive menu)
- - Start panning outside of list or Form assistant (cf. Context-sensitive menu)
- - Tap Next/Previous button of Form assistant (if they are available)
Form assistant should be
- opened or stay open, if the user inserts focus to a pop-up menu.
- closed, if the user removes focus from a pop-up menu and it does not result inserting focus to another form element you could use with Form assistant.
<figure to come>
Multi-selection Choice list
Multi-selection Choice list should work similarly to Pop-up menu except that selecting a list item would not close the menu. To exit the menu (with the currently selected items), the user could tap outside of the menu (or start panning outside of it) or tap the Previous or Next button if they were available.
<figure to come>