Selection States: Provide more feedback.

More often than not you’ll find typical selection controls in an application, web form, and the like. When you need to make a selection of items which are all visible at the same time, typically checkboxes (square boxes) or radio buttons (round buttons) are used. These have always worked. But you can make selection a little more obvious by providing some additional state in the interface.

To the left here you’ll see a mock up of a user interface – where each selectable item is associated with a radio button to its right. Each item has an associated icon which would help convey the meaning of the item’s label, a short summary sentence which explains the item even further.

When a radio button is selected, an area below the item is lit up elegantly to reinforce the selection visually when scanning the list. This small detail adds more obvious selection for the user – making it even more obvious which elements are currently selected before proceeding through the flow.

Without having added too much clutter, the selection has been reinforced. If you’re worried about users who may have less than perfect vision, you may even want to include a color change from light gray to nearly white, or a selection color that may jive with your existing branding guidelines.

Good design is the summation of layout, alignments, visual flow, ease of use, legibility, and small, considered elements that all exist to improve the experience.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.