Author: Chip Alexander
1. Introduction
The Choice button is a control used for choosing one (and only one) value from a list of predefined values.
It is also known as a popup list, choice list, or dropdown list (although unlike a dropdown list, it opens up or down). It is similar to a combo-box, except that additional values cannot be entered by the user.
Typically it is used when there are 20 or fewer values, but there are cases when it can be used with more, if the order is well understood by the user so it does not require hunting through them. A good example is selecting in which U.S. State an address is, where there are 50 values, but an alphabetical ordering allows easily finding the State wanted. When the Popup List is opened, the user may select a new list item or close the Popup and revert to the Button state without changing the current selection.
Colored icons (Dots) are used to show both text and graphical attributes alongside Popup List highlights and focus elements. Typically, if used, graphics would be more interesting than colored dots.
Figure 1 - Placeholder only - actual visual design will be provided by our Visual Design team.
2. Overview
A ChoiceButton is a combination control that encapsulates a contextual Button for displaying the current selected item and opening a popup list which contains one or more user-selectable items.
Placement:
The button width is set by the size of the largest item in the list, plus the space for the dropdown arrow on the button, by default. This allows the user to select any value and not have the button change sizes or truncate the label when it is collapsed back into a button.
When Selected (Opened), the Popup List is rendered on top of the button. The left and right edges should align by default to be that same width as the total button width, so it completely covers the button when opened.
However, the developer should be able to set the button to be another width (typically shorter to fit a tight space on the page, but it could be longer for alignment instead). If that width is wider than the largest value in the list, the list should open to that wider value. If that width is smaller, the list should still open to the width of the longest value, to display all the items, even though it opens wider than the button (extending to the right normally, but switching to extend to the left if necesary to remain on screen).
If possible, the list is positioned vertically so the currently selected item is located directly over the button. With this placement, the user may open and close the list by clicking the button then defaulted list item (in a toggle action) and not inadvertantly change the value. However, the list should always be rendered fully within the screen, which may force moving the list up or down from there in order to fit.
Display of Current Selection:
The current selected item is persistently displayed with a Hollow Highlight in the list, and inside the borders of a Button. If the user selects a new item from the list, the Popup closes and the new item replaces the previous selection in the Button.
General Flow and Diagram:
Figure 2 - Placeholder only - actual visual design will be provided by our Visual Design team.
Hidden List items Exist
When “Hidden” list items exist (there are more items than can be fully displayed in the Popup list), Scroll Buttons with Indicator Arrows are added to the Top and Bottom of the Popup list. The Arrow Indicator graphics inside each of Top and Bottom Buttons are displayed only when hidden list items are present in the direction of the Arrow.
On the desktop and mobile touch platforms, these arrows can be used for scrolling the list. On the TV and mobile 2D traversal platforms, they serve only as indicators that other values exist which are not shown. On the desktop and mobile touch platform, the Mouse Wheel only functions when hidden list items and Scroll Buttons and Indicators are present.
Figure 3 - Placeholder only - actual visual design will be provided by our Visual Design team.
Separators
The ChoiceButton Popup List should support Horizontal Separator Lines. The highlight should never stop at a separator, but should always jump immediately to the item on the other side of that separator.
Vertical separator lines will be possible by using CSS, but not directly supported.
Figure 4 - Placeholder only - actual visual design will be provided by our Visual Design team.
Blank Values and Indentations
The developer should be able to specify that a value in the list is blank. This will typically be the first item in the list, but need not be so. The user can select that value, and have a null selection for that field.
The ChoiceButton Popup List should also support an Indentation, to indent a subset of values (such as to show that there are several subchoices of a category). The indentation highlights along with the rest of the row. This is a less important feature than other things in this spec, though, and could be deferred to a second release if necessary. If the developer has created a vertical separator by CSS, it likely will not indent along with the indented items.
Figure 5 - Placeholder only - actual visual design will be provided by our Visual Design team.
Non-Selectable Values
Values in the list can be set to not be selectable. This is often used for headers, such as Item 2 in the example picture above. These headers behave just like line item spacers in their not highlighting or being selectable.
Icons and Graphics
The ChoiceButton Popup List and Button elements are to support text, graphics, or both. In the illustration below, the colored box elements represent line graphics, icons, Photo Thumbnails or any combination thereof. Graphical elements do not need to be constrained to a text line height and may be any reasonable resolution according to a desired design and as such, may define the line item height of the Popup List and Button elements. The image below show examples of variations for ChoiceButton controls with Graphics.
It must be possible to provide graphics for one or more items, without all having graphics. However, when this occurs, all items at the same indentation (either with or without a spacer) should remain aligned as if the others had a transparent graphic as large as the largest image.
While these graphics might be images, icons, color swatches, etc., they also might be graphics representing graphical controls (such as a graphic of a selected or unselected radio button or checkbox), to communicate that one or more of several related settings is on. For example, in the Indent Spacer picture above, Item 2 might be a header, and Items 3 and 4 would look like checkboxes or radio buttons regarding that header, by the developer providing appropriate graphics for them. This provides a good example why 3 and 4 might have a graphic, but 2 would not.
Figure 6 - Placeholder only - actual visual design will be provided by our Visual Design team.
The image below illustrates utilizing various sized Thumbnails within the Control.
Figure 7 - Placeholder only - actual visual design will be provided by our Visual Design team.
Desktop and Mobile Touch Only - One-Step-Select vs. Two-Step-Select:
On the desktop and in mobile touch, there are two different ways in which the user can interact with the choice button.
The first, hereafter called One-Step-Select, involves the user selecting the widget and leaving the pointing device button or finger down, dragging the pointer until they get to the desired value (even if it begins scrolled out of view), and then releasing when on that desired value.
The second, hereafter called Two-Step-Select, involves the user selecting the widget and releasing the button or lifting their finger, making it pop open and remain open, then scrolling the list of entries if needed, pointing at the desired value and clicking or tapping again to select it. This second method avoids the effort required to keep the button pressed while selecting, and is especially easier for those without a steady hand. However, it does require two interactions instead of one.
If the user begins by holding down the button or their finger as if doing One-Step-Select, but drags off of the widget and then releases, the interaction automatically changes to Two-Step-Select, with the list now being open awaiting a selection. However, if the user moves back onto the list before releasing, it remains One-Step-Select as if they had never left the boundaries of the widget.
Desktop and Mobile Touch with Alphabetic Keyboard Only - Selection by Letter:
Users should be able to type the first letter or letters of the desired value to jump directly to the first entry in the list matching that letter or letters. If the gap between two letters typed is less than 1 second, those letters should be considered one value. Thus, C (.75 sec delay) H (.75 sec delay) I (.75 sec delay) P should find the first value which begins with CHIP. However, C (.75 sec delay) H (.75 sec delay) I (1.5 sec delay) P would jump to the first value beginning with P. The time value of 1 second may need to be tweaked to operate as expected, and should only be a default anyway. The developer should be able to override this time with a parameter.
If there are both graphics and text in the list, typing characters should ignore the graphics and still jump to the first instance of that character or characters. On a list with no text values, nothing will happen, just like if you type an O and no values begin with an O in a text list.
3. ChoiceButton: Desktop
3.1 Desktop - Introduction
Interaction Requirements:
• Keyboard Input controls allow scrolling and selection operations using arrows and the Enter key, and typing the start of the desired value.
• The ChoiceButton may resize smaller as the application Window is resized by user to be smaller than will allow for full rendering of the ChoiceButton control.
• The Popup List is able to extend beyond an application window.
• List Auto-Scroll Speed Accelerate and Decelerate control feature via pointer position during Auto-Scroll action (moving faster when when the pointer is farther from the list while the mouse button remains pressed down).
• Mouse-click anywhere off the ChoiceButton Control closes the Popup List without editing the current selected List Item (not to be confused with simply releasing the mouse button off the list, which only leaves the list open, switching the interaction to Two-Step-Select.
• Operates with Keyboard Modifier Keys and/or Touch Pad where applicable.
Additional References:
For more information on this type of widget, also see the Macintosh guidelines and Web Application Guidelines
3.2 Desktop - Visual Design
On the desktop, the rows can be tightly packed together, with the row height based on the text and/or icon height, as the user should easily be able to click within that row with their mouse.
Rest Waiting for Eileen...
3.3 Desktop - Detailed Behaviors
This section will provide a description of the states available for a ChoiceButton control with corresponding user actions. In JavaFX, certain transitions between state changes are used to enhance the user experience, for example graphical attribute or color fill fade-in and fade-out visual effects.
Normal/Enabled State
The Normal/Enabled State is when the ChoiceButton control is available for action. Color tone is medium gradient.
Figure 8 - Placeholder only - actual visual design will be provided by our Visual Design team.
Hover State
Upon placing the pointer over the ChoiceButton in a Normal State with the mouse or touch-pad, the color changes to a light gradient.
Figure 9 - Placeholder only - actual visual design will be provided by our Visual Design team.
Selected State
As the pointer is hovering over the ChoiceButton button, clicking (Press & Release) the mouse key or touch pad tap selects the Control and opens the Popup List. This is called the Selected State, and occurs with two-step selection.
Figure 10 - Placeholder only - actual visual design will be provided by our Visual Design team.
Armed State
While the mouse button is down, the list is considered "Armed", and releasing the mouse button while over a list item selects that list item. This occurs with one-step selection. There is no appearance difference in the list from the selected state, however.
Figure 11 - Placeholder only - actual visual design will be provided by our Visual Design team.
Disabled State
The Disabled state ChoiceButton is unable to be accessed or selected by any means and cannot be changed to any other state via mouse, keyboard or touch pad. The color/graphics is in a “Grayed-out” style. This state is typically used when a prerequisite user action is required to enable it, then it is changed to a Normal or Focused state.
Figure 12 - Placeholder only - actual visual design will be provided by our Visual Design team.
Focused State
Indicated with a colored frame surrounding the control, the Focused state is achieved either programmatically by design as a user affordance that is control requires immediate action, as a result of “landing” on it from another focused object through traversal navigation via the PC Tab and Up/Down/Left/Right navigation keys, (if the application provides such traversal functionality), or as a result of the user completing selection and remaining on the field.
The Focused ChoiceButton is a partially selected state whereby pressing the Enter key will immediately display the Popup List. The Focused state is additive, so depending on pointer location the Focused Button may also be in the Normal/Enabled, Hover, and Selected states. And so, hovering the pointer over a Focused ChoiceButton will change the button gradient to Hover while retaining the Blue Frame graphic which indicates Focused. If the user rolls the pointer off a Focused + Hover ChoiceButton (without selecting it) the control will revert back to the Focused + Normal/Enabled state.
In a Desktop application, the Focused Button is only displayed when the corresponding application window is selected (in-focus). Conversely, when the application on the desktop is NOT in focus, the control will be displayed in the Normal/Enabled State (without Focus graphical frame).
Figure 13 - Placeholder only - actual visual design will be provided by our Visual Design team.
Behaviors
Use of Mouse Wheel to Scroll Popup List in Selected State
Scrolling with the mouse wheel will scroll the list, but not change the selection. The selected value can even disappear from view.
Figure 14 - Placeholder only - actual visual design will be provided by our Visual Design team.
Keyboard Arrow Navigation
A user with can also press Space when on the focused button, arrow to the desired value, and then press Enter or Space again to select the desired value. Or they could do a hybrid of mouse and keyboard interaction, doing some part by touch and some part using the keyboard.
Scroll buttons
When the list is open (in the "Selected State"), hovering over a scroll arrow will change it to a hover appearance. Then selecting one of the Scroll Buttons highlights the button and scrolls the list in that direction. If the user clicks and releases the mouse quickly, the list scrolls one item in the direction of the Scroll Button Arrow. This can be done repeatedly -- users may use a “quick-click” toggling of the mouse key to quickly and continuously forward the list view one item at a time per the cadence of the clicking action.
Pressing and holding the mouse key down on the Scroll Button for at 0.5 seconds or more will invoke auto-scrolling of the list at a reasonable rate of speed for viewing (at about 2-3 items per second).
If the user is using one-step select, and drags the mouse pointer to or passed the scroll button while the mouse button is pressed down, that will scroll the list in that direction, allowing the user to select a previously hidden item. Once the item is visible, the user can move the pointer back up and release on the desired item, allowing the entire open-scroll-select process to be done in one continuous mouse-selection.
NOTE: This is a visual design change from what was spec'd earlier by Chuck, where the scroll arrow was highlighted when the mouse was held over it, and went back to white when the mouse button was pressed.
3-Speed Scroll Acceleration & Deceleration
When the user is on a scroll button and the mouse button is held down, the user then moving the Pointer off the button in the direction of the scroll accelerates the speed of the scroll through each of 3 speeds – reversing this action decelerates through each of the 3 speeds. (Reference Screen 5 and 6 in the flow diagram below)
- Pointer Position is Moved Slightly Beyond the Top or Bottom Most List Item to Scroll Button (1x Desistance) – Slow scroll speed (about 2 item scrolls per second). Allows user to easily see when the desired item is highlighted, then either releases the Mouse Key and clicks again to select, or continues to hold down mouse key and rolls pointer to desired list item and releases to select.
- Pointer Position is Moved Further Beyond the Top or Bottom Most List Item (2x Distance) – A Faster accelerated scroll speed (about 4 item scrolls per second). Highlighted items remain visible during scroll action, the user only needs to slide the Pointer slightly in the opposite direction of the scroll to easily slow-down the scroll speed then navigate to the desired list item – releasing the mouse key on the list item makes selection.
- Pointer Position is Moved Well Beyond the Top or Bottom Most List Item (3x or More Distance) – Rapid scroll speed to quickly reach the first/last possible list item. This is used for snapping to the Top or Bottom of a list. The user can then slide the Pointer back inside the popup list (the opposite direction of the scroll) to decelerate through the speeds then move the highlight to an alternate list item and release mouse key to select it.
Figure 15 - Placeholder only - actual visual design will be provided by our Visual Design team.
3.4 Desktop - Keyboard Support
3.4.1 Windows Keyboard Support
Modifier Key | Normal/Enabled Button (Pointer off Button) | Hover State Pointer on Button (Mouse Key Released) | Mouse Held Down (Armed) – Pointer ON Popup/List Item | Mouse Held Down (Armed) – Pointer OFF Popup/List Item | Selected State – Pointer ON Popup List Item | Selected State – Pointer OFF Popup List Item | Mouse Down (Armed) -On Scroll Button | Selected – Pointer On Scroll Button |
|---|---|---|---|---|---|---|---|---|
Esc | Closes Application Window | Closes Application Window | Closes Popup | Closes Popup | Closes Popup | Closes Popup | Closes Popup | Closes Popup |
Mouse button 1 (Left Mouse button) | N/A | -Down-Key Opens Popup -Key Release No Action and changes to Selected State | -Pointer Highlights list item -Key Release Selects item | -Pointer movements have no action when off popup list -Mouse Key Release closes Popup and makes no edits to current selection | -Down Key Selects List Item -Key Release Closes Popup | -Pointer movement has no action when off popup list -Mouse Key Down-Press closes Popup and makes no edits to current selection | -Highlight and-scroll action begins. | -Mouse Key -Forwards List scroll one position and highlights scroll button while mouse down. |
Mouse button 2 (right mouse button | Application Dependant | No Action | No Action | No Action | No Action | No Action | No Action | No Action |
TAB (Traversal) | -Moves focus to next control in the application Window. | -Moves focus to next control in the application Window. | -Closes Popup and moves focus to next control in application window | -Closes Popup and moves focus to next control in application window. | -Closes Popup and moves focus to next control in application window. | -Closes Popup and moves focus to next control in application window. | -Closes Popup and moves focus to next control in application window. | -Closes Popup and moves focus to next control in application window. |
Shift + TAB (Reverse Traversal) | -Moves focus to previous control in the application Window. | -Moves focus to the previous control in the application Window. | -Closes Popup and moves focus to previous control in application window. | -Closes Popup and moves focus to previous control in application window. | -Closes Popup and moves focus to previous control in application window. | -Closes Popup and moves focus to previous control in application window. | -Closes Popup and moves focus to previous control in application window. | -Closes Popup and moves focus to previous control in application window. |
Control TAB (Traversal through TAB in app window) | -When TAB elements are displayed in application, Moves focus forward through TAB elements in application. | -Moves focus to next control in the application Window. -If Popup is open, closes Popup and moves focus to next control in application window. -If TABss are in application window, scrolls focus forward through Tabs. | -Selects the highlighted item. -Closes Popup and moves focus to next control in application window. -If Tabs are in application window, scrolls focus forward through TAB elements. | -Closes Popup and moves focus to next control in application window. -No Edits made. -If Tabs are in application window, scrolls focus forward through TAB elements. | -Selects the highlighted item. -Closes Popup and moves focus to next control in application window. -If Tabs are in application window, scrolls focus forward through TAB elements. | -Closes Popup and moves focus to next control in application window. -No Edits made. -If Tabs are in application window, scrolls focus forward through TAB elements. | -Closes Popup and moves focus to next control in application window. -No Edits made. -If Tabs are in application window, scrolls focus forward through TAB elements. | -Closes Popup and moves focus to next control in application window. -No Edits made. -If Tabs are in application window, scrolls focus forward through TAB elements. |
Control Shift TAB (Reverse Traversal through TAB in app window) | -When TAB elements are displayed in application, Moves focus backwards through TAB elements in application. | Moves focus to previous enabled control. -If Popup is open, closes Popup and moves focus to previous control in application window. -If Tabs are in application window, | -Selects the highlighted item. -Closes Popup and moves focus to previous control in application window. -If Tabs are in application window, scrolls focus backward through TAB elements. | -Closes Popup and moves focus to previous control in application window. -No Edits made. -If Tabs are in application window, scrolls focus backward through TAB elements. | -Selects the highlighted item. -Closes Popup and moves focus to previous control in application window. -If Tabs are in application window, scrolls focus backward through TAB elements. | -Closes Popup and moves focus to previous control in application window. -No Edits made. -If Tabs are in application window, scrolls focus backward through Tab elements. | -Closes Popup and moves focus to previous control in application window. -No Edits made. -If Tabs are in application window, scrolls focus forward through Tabs elements. | -Closes Popup and moves focus to previous control in application window. -No Edits made. -If Tabs are in application window, scrolls focus forward through Tabs elements. |
Enter/ Return-No Action | -No Action | -No Action | -On List Item -Makes Selection -Closes Popup | -Closes Popup -No Edits Made | -On List Item -Makes Selection -Closes Popup | -Closes Popup -No Edits Made | -Closes Popup -No Edits Made | -Closes Popup -No Edits Made |
Space Bar | -No Action | -On Button – Opens Popup | -On List Item -Makes Selection -Closes Popup | -Closes Popup -No Edits Made | -On List Item -Makes Selection -Closes Popup | -Closes Popup -No Edits Made | -Closes Popup -No Edits Made | -Closes Popup -No Edits Made |
L,R,U,D Arrow Keys | -No Action | On Button – Changes Displayed Selection in Button without opening Popup. U, L = Select next Up list D, R = Select next Down list | -Moves list focus highlight -U, L = Moves Focus Up one list item D, R = Moves Focus Down one list item | No Action | On List: U, L = Select next Up list D, R = Select next Down list | No Action | -Moves list focus highlight -U, L = Moves Focus Up one list item D, R = Moves Focus Down one list item | -Moves list focus highlight -U, L = Moves Focus Up one list item D, R = Moves Focus Down one list item |
Any Alpha-numeric Keys | -Application Dependant | No Action | No Action | No Action | Jumps to the first item in the list with that letter or letters | Jumps to the first item in the list with that letter or letters | No Action | Jumps to the first item in the list with that letter or letters |
Windows Menu Key | -Opens Windows Menu -Removes focus from control/Applicati on Window | -Opens Windows Menu -Removes focus from control/Application Window | -Opens Windows Menu -Removes focus from control/Application Window | -Opens Windows Menu -Removes focus from control/Application Window | -Opens Windows Menu -Removes focus from control/Application Window | -Opens Windows Menu -Removes focus from control/Application Window | -Opens Windows Menu -Removes focus from control/Application Window | -Opens Windows Menu -Removes focus from control/Application Window |
3.4.2 MAC Keyboard Support
Same as Windows Keyboard Support, except without Windows Menu Key
3.4.3 Linux Keyboard Support
Same as Windows Keyboard Support, except without Windows Menu Key
3.5 Desktop - Attributes
• Selection items may be text or any graphical object or a combination of both.
• Sticky behavior (Remember previous selection) or non-sticky behavior (highlight re-sets to Top item in List).
• The full width of a ChoiceButton “Button” element may be determined by the longest length of List Item text, or not (typically shorter, but it could be wider too).
4. ChoiceButton: Touch
4.1 Touch - Introduction
This section assumes the touch device will not have a 5-way navigator. If we later support a device which has touchscreen and a 5-way navigator, the designs in both this section and the 2D Traversal section should be followed. The two may even be combined, such as the user opening the list with the select button, but then choosing a value to close it with their stylus or finger.
Interaction Requirements:
• Typing for selection (if there is a keyboard).
• List Auto-Scroll Speed Accelerate and Decelerate control feature via pointer position during Auto-Scroll action (moving faster when when the touch is farther from the list while still being held down).
• Tapping anywhere off the ChoiceButton Control closes the Popup List without editing the current selected List Item (not to be confused with the user lifting their finger while off the list, which only leaves the list open, switching the interaction to Two-Step-Select.
4.2 Touch - Visual Design
On Touch, unlike the other three platforms, the rows may need to be taller to allow selection with a finger. If it is possible to vary the row height based on the device, and this increased row height can be done only for phones where interaction is typically by finger instead of stylus, that would be better, however. As the first supported devices are expected to be ones where the user selects using a stylus, these first ones could maintain the same row height as other platforms, but the ability to increase the row height for other phones should be architected in from the start.
4.3 Touch - Detailed Behaviors
States:
This section will provide a description of the states available for a ChoiceButton control with corresponding user actions. In JavaFX, certain transitions between state changes are used to enhance the user experience, for example graphical attribute or color fill fade-in and fade-out visual effects.
A finger is shown in the illustrations and used in the descriptions, although the mobile devices first expected to be used will typically have the user using a stylus rather than a finger. Nonetheless, finger-interaction should be supported as much as possible to make the controls as broadly useful as we can.
Normal/Enabled State
The Normal/Enabled State is when the ChoiceButton control is available for action. Color tone is medium gradient.
Figure 16 - Placeholder only - actual visual design will be provided by our Visual Design team.
Selected State
Tapping (Press & Release) the ChoiceButton selects the Control and opens the Popup List. This is called the Selected State, and occurs with two-step selection.
Figure 17 - Placeholder only - actual visual design will be provided by our Visual Design team.
Armed State
While the finger is held down on the ChoiceButton, the list is considered "Armed", and releasing the finger while over a list item selects that list item. This occurs with one-step selection. There is no appearance difference in the list from the selected state, however.
Figure 18 - Placeholder only - actual visual design will be provided by our Visual Design team.
Disabled State
The Disabled state ChoiceButton is unable to be accessed or selected by any means and cannot be changed to any other state via mouse, keyboard or touch pad. The color/graphics is in a “Grayed-out” style. This state is typically used when a prerequisite user action is required to enable it, then it is changed to a Normal or Focused state.
Figure 19 - Placeholder only - actual visual design will be provided by our Visual Design team.
Focused State
Indicated with a colored frame surrounding the control, the Focused state is achieved either programmatically by design as a user affordance that is control requires immediate action, or as a result of the user completing selection and remaining on the field.
The Focused ChoiceButton is a partially selected state whereby pressing the Select key will immediately display the Popup List. The Focused state is additive, so depending on pointer location the Focused Button may also be in the Normal/Enabled and Selected states.
Figure 20 - Placeholder only - actual visual design will be provided by our Visual Design team.
Behaviors
The illustrations below shows the basic features and design of a Standard ChoiceButton with enlarged geometries and actions corresponding to touch screen interfaces. The behaviors are exact analogies to the desktop version described above.
Again, a finger is shown in the illustrations and used in the descriptions, although the mobile devices first expected to be used will typically have the user using a stylus rather than a finger. Nonetheless, finger-interaction should be supported as much as possible to make the controls as broadly useful as we can.
Two-Step Selection
This example shows the details of two-step selection, with optional three-speed scrolling (see the detailed discussion of three-speed scrolling in the Desktop section above):
Figure 21 - Placeholder only - actual visual design will be provided by our Visual Design team.
Flick Motion while in Two-Step Selection
While in two-step selection, the user may use a Flick motion to scroll rather than using the scroll button at all. If rather than simply touching an item in the list, the user makes a flicking motion up or down on the opened list, the list should scroll in that direction. The amount the list scrolls should be based on distance of the flick, with a short flick moving only 1-3 item, a medium flick moving 5-6 items, and a long flick scrolling to that extreme of the list.
NOTE: This is a change from what was spec'd earlier by Chuck, where the Flick motion could only be initiated after the list was already being scrolled by the scroll button.
One-Step Selection
This illustration shows the details of one-step selection, with optional three-speed scrolling:
Figure 22 - Placeholder only - actual visual design will be provided by our Visual Design team.
4.4 Touch - Keyboard Support
| Key | Initial State | Result |
| Any AlphaNumeric Key | List Open/Selected | Jumps to the first item in the list with that letter or letters |
4.5 Touch - Attributes
• Selection items may be text or any graphical object or a combination of both.
• Sticky behavior (Remember previous selection) or non-sticky behavior (highlight re-sets to Top item in List).
• The full width of a ChoiceButton “Button” element may be determined by the longest length of List Item text, or not (typically shorter, but it could be wider too).
5 ChoiceButton: 2D Traversal
5.1 2D Traversal - Introduction
In the 2D Traversal environment, the ChoiceButton may be used less often. Without the ability to point and click at the desired item, the user has to arrow to the desired value one at a time. Therefore, the extra step of pressing Select to open the list before selecting may offset the advantage of seeing all or many of the choices ahead. Therefore, in many cases, a spin box may be a better solution, especially if the direction the desired value is in is predictable.
For example, if the choices are 1/2 hour, 1 hour, 1.5 hours, 2 hours, 3 hours, and 4 hours, these might be better handled by a spin box, as the user can guess which way to move, so could avoid having to open a list to see the choices ahead. In contrast, if the choices are colors, it would be annoying to use a spin box, as the user would have no idea which direction to go in order to get to the desired value. That would be a situation where a choice button (or list) is warranted.
This section assumes the 5-way navigator-based device will not have a touchscreen. If we later support a device which has touchscreen and a 5-way navigator, the designs in both this section and the mobile-touch section should be followed. The two may even be combined, such as the user opening the list with the select button, but then choosing a value to close it with their stylus or finger.
5.2 2D Traversal - Visual Design
In Mobile 2D Traversal, the rows can be tightly packed together, with the row height based on the text and/or icon height, as the user has no need or ability to select the item with touch.
5.3 2D Traversal - Detailed Behaviors
Unlike the Desktop and Touch environments, the interactions possible with the ChoiceButton on the 2D Traversal platform are quite limited. The Select button opens the list, the up and down arrows move to a new value (scrolling if necessary), and pressing the Select button again chooses a new value and closes the list. Pressing Left or Right should be a shortcut for choosing the current value and moving to the next or previous item on the screen.
States:
Normal/Enabled State
The Normal/Enabled State is when the ChoiceButton control is available for action.
Figure 23 - Placeholder only - actual visual design will be provided by our Visual Design team.
Selected State
Pressing Select when on the ChoiceButton opens the Popup List. This is called the Selected State.
Figure 24 - Placeholder only - actual visual design will be provided by our Visual Design team.
Disabled State
The Disabled state ChoiceButton is unable to be accessed or selected by any means The color/graphics is in a “Grayed-out” style. This state is typically used when a prerequisite user action is required to enable it, then it is changed to a Normal or Focused state.
Figure 25 - Placeholder only - actual visual design will be provided by our Visual Design team.
Focused State
Indicated with a colored frame surrounding the control, the Focused state is achieved either programmatically by design as a user affordance that is control requires immediate action, as a result of “landing” on it from another focused object through traversal navigation via the Left/Right navigation keys, or as a result of the user completing selection and remaining on the field.
Figure 26 - Placeholder only - actual visual design will be provided by our Visual Design team.
5.4 2D Traversal - Keyboard Support
| Key | Initial State | Result |
| Select | List Closed | Opens List |
| Up | List Closed | Moves to the previous field in the tab sequence |
| Down | List Closed | Moves to the next field in the tab sequence |
| Left | List Closed | Moves to the previous field in the tab sequence |
| Right | List Closed | Moves to the next field in the tab sequence |
| Select | List Open/Selected | Selects the current value and closes the list |
| Up | List Open/Selected | Moves to the next value up. If necessary, scrolls list down one, to reveal the next item up. If at the top of the list, does nothing (does not wrap to the bottom of the list) |
| Down | List Open/Selected | Moves to the next value down. If necessary, scrolls list up one, to reveal the next item down. If at the bottom of the list, does nothing (does not wrap to the top of the list) |
| Left | List Open/Selected | Moves to the previous field field in the tab sequence, reverting to the previous value in the ChoiceButton |
| Right | List Open/Selected | Moves to the next field in the tab sequence, reverting to the previous value in the ChoiceButton |
| SoftKey "Back" or "Close" | List Open/Selected | If there is a "Back" or "Close" soft key defined, that should close the list, retaining the previous selection, and back up if appropriate. Note that this event is not available for the SOMA release. |
5.5 2D Traversal - Attributes
• Selection items may be text or any graphical object or a combination of both.
• Sticky behavior (Remember previous selection) or non-sticky behavior (highlight re-sets to Top item in List).
• The full width of a ChoiceButton “Button” element may be determined by the longest length of List Item text, or not (typically shorter, but it could be wider too).
Overview
Content Tools
ThemeBuilder