Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Revised layout and functionality of Fennec Pop-up Choice list
Contents
Problem description
As the main problem, the Pop-up menu contains "Done" button for confirming the selection in the current version of Fennec (1.1). Because the Pop-up menu is for single selection only, the confirmation is needless (or even purposeless) and creates just an extra step. See reference images in the end of this page.
Summary
Pop-up menu should work as it generally works on standard computers: Open choice list by tapping it, Select an option from the opened list by tapping it and Close the choice list by tapping outside of it.
Pop-up menu should be more optimised for small screen devices: e.g. showing the scope of selection in context of opened Choice list and letting the list occupy as much screen estate as possible when needed.
States
- Closed state
- Opened state
Layout
Close state
In the Closed state, the pop-up menu component should take the full width of the screen (both in Landscape and Portrait orientation of the device) and it should be functional as a whole. The component should contain title (A) in the upper row and the currently selected option/value (B) in the next row.
Opened state
In the Opened state, the pop-up menu shoud have a heading row populated with the title and list of options below it. The currently selected list item should be indicated. The heading row should contain the Close button and the application view outside of menu should be dimmed.
The menu should take as much screen estate as needed for displaying all options it contains.
Functionality
Opening pop-up menu
- Tap pop-up menu component
Selecting an item from pop-up menu
- Tap a list item
Cancel selection (i.e. close menu without changing the currently selected option)
- Tap outside of list or the heading row (including the Close button) of the list.
NOTE: Selecting an item from the list (by tapping it) should close the menu/list.
The list should be scrollabe (if there are more options than what could be displayed in the view at once). Panning the list with the drag or flick interactions should not result selecting a list item.
