2955: Improved list selection UIs - Composr CMS feature tracker

ID	Project	Category	View Status	Date Submitted	Last Update

2955	Composr	core_form_interfaces	public	2016-12-01 12:53	2019-06-27 18:54

Reporter	Chris Graham	Assigned To	Guest
Priority	normal	Severity	feature
Status	new	Resolution	open

Summary	2955: Improved list selection UIs
Description	We can do better with our list UIs - there are a number of different input metaphors appropriate for different kinds of data/form/user. For flat selection ================== Simple drop-down list (real HTML list): A B C D Benefits: - Not much space taken up - Does not require JavaScript, so is accessible - Can be enhanced with select2 (JavaScript) to allow autocompletion - May be combined with a text input to make a 'combo box' (i.e. you make a selection or type in a new item) Use cases: - When a single-selection list is required on a larger form, and there is no tree involved CMS PHP functions: form_input_list/form_input_huge_list/form_input_combo ----- Simple inline list (real HTML list): A B C D Benefits: - Takes up more space which is good when we are only taking a single input - Allows multi-selection - Does not require JavaScript, so is accessible - Can be enhanced with select2 (JavaScript) to allow autocompletion (it will stop it being inline, but it's usually worth it) Use cases: - When a single-selection list is required as the only field on a form, and there is no tree involved - When a multi-selection list is required, and there is no tree involved CMS PHP functions: form_input_list/form_input_huge_list/form_input_multi_list Additional notes: - I think the form_input_huge_list function can be dropped from Composr to simplify things. An inline list takes up enough space to be interesting, we don't need to change the form column layout for it too. We won't have an issue of list items taking up too much horizontal space. For tree selection ================== Tree list (real HTML list): A > Aii > Aii1 A > Aii > Aii2 Explanation - All list items are for entries - You therefore will not see categories that are not above some kind of entry Benefits: + Very simple + Does not require JavaScript, so is accessible + Quite compact Use cases: - never (legacy) CMS PHP functions: form_input_list/form_input_huge_list/form_input_multi_list ----- Recursive lists (real HTML lists): A (selected) B C D Ai (selected) Aii Aii1 (entry) Aii2 (entry) Explanation: - For every level you browse down into, you get another selection list appear - "(selected)" denotes the selected category for a level, so the list underneath it is subcategories of that category - "(entry)" denotes an entry Benefits: - Does not require JavaScript, so is accessible - Can do huge lists without a performance hit (a real HTML list would fail after a few hundred entries) - Can see all categories in the list, even if they are empty - Allows both both single-selection and multi-selection Use cases: - When there is a tree involved and the tree_lists config option is disabled CMS PHP functions: TODO (not yet implemented); but would be rolled into form_input_tree_list ----- Tree widget (custom widget): +A -Ai +Aii Aii1 Aii2 -B -C -D Explanation: - "-" denotes a non-expanded category - "+" denotes a non-expanded category - "" denotes an entry Benefits: - Can do huge lists without a performance hit (a real HTML list would fail after a few hundred entries) - Efficient to use for a sighted user - Can see all categories in the list, even if they are empty - Allows both both single-selection and multi-selection Use cases: - When there is a tree involved and the tree_lists config option is enabled and there are no entries in the tree CMS PHP functions: form_input_tree_list ----- Tree widget with entry pane (custom widget): CATEGORY +A -Ai +Aii -B -C -D ENTRY Aii1 [] Aii2 Explanation: - There are 2 panes, the category pane (left) and the entry pane (right) - For single-selection the entry pane would use detail boxes with a radio button in each - For multi-selection the entry pane would use detail boxes with a checkbox in each - "-" denotes a non-expanded category - "+" denotes a non-expanded category - "[*]" denotes a selected entry Benefits: - Can do huge lists without a performance hit (a real HTML list would fail after a few hundred entries) - Allows displaying of much more details for the entry (very useful for our addon import UI) - Efficient to use for a sighted user - Stops entries bloating up the category browsing, which is bad for everybody but particularly people using screen-readers - Can see all categories in the list, even if they are empty - Allows both both single-selection and multi-selection Use cases: - When there is a tree involved and the tree_lists config option is enabled and there are entries in the tree CMS PHP functions: TODO (not yet implemented); but would be implemented into form_input_tree_list Key === A, B, C, D are categories. Ai and Aii are categories under A. Ci and Cii are categories under C. Aii1 and Aii2 are entries under Aii.
Tags	Roadmap: Over the horizon, Type: Accessibility, Type: Usability (major)
Attach Tags	(Separate by ",")

Time estimation (hours)	24
Sponsorship open

Date Added	Member	Amount Sponsored

View Status	Private (for security issues or disclosing of private information; if you submit as a guest, you will not be able to see your submission)
Note
Upload Files Maximum size: 32,768 KiB	Attach files by dragging & dropping, selecting or pasting them.
You are not logged in	You are not logged in. This means you will not get any e-mail notifications. And if you reply, we will not know for sure you are the original poster of the issue.

Date Modified	Username	Field	Change
2016-12-01 12:53	Chris Graham	New Issue
2016-12-01 12:53	Chris Graham	Tag Attached: Type: Accessibility
2016-12-01 12:53	Chris Graham	Description Updated
2016-12-03 16:23	Chris Graham	Time estimation (hours)	8 => 24
2016-12-03 16:23	Chris Graham	Summary	Recursive lists accessibility option => Improved list selection UIs
2016-12-03 16:23	Chris Graham	Description Updated
2016-12-08 12:49	Chris Graham	Tag Attached: Type: Usability
2016-12-08 12:50	Chris Graham	Tag Renamed	Type: Usability => Type: Usability (major)
2016-12-08 16:52	Chris Graham	Relationship added	related to 1762
2017-05-01 14:53	Chris Graham	Relationship added	related to 2804
2019-06-27 18:54	Chris Graham	Tag Attached: Roadmap: v12
2024-03-26 00:58	PDStig	Tag Renamed	Roadmap: v12 => Roadmap: Over the horizon