1
0
-1

Out of the box, Graphical Radio Buttons seem to have very basic functionality; does anyone have any recommendations on how to make them look a bit better? For example, alternate images for selected, uniform heights, border appearance, caption wrap.

 

    CommentAdd your comment...

    2 answers

    1.  
      2
      1
      0

      UX principles that apply to graphical radio buttons:

      • Law of proximity - keep the radio buttons close enough to each other so that they are perceived as a group
      • Law of closure - provide each radio button with a clean boudary with enough whitespace between so that each button is perceived as a single object within the group. Choose icons that are complete enough to look like a single object
      • Law of similarity - keep the buttons the same height, width and icon/label structure  and size so that they are perceived as a group and provide clean (eye) scan lines
      • Figure and ground - ensure that colour contrast is maintained so that all components are clearly visible and the icons and label are pushed to the foreground
      • States - provide visual styling for all button states which align with the form/corporate branding (note that it is common to use the same styling for focus and hover states):
        • Unselected and inactive
        • Unselected and hover
        • Unselected and focus
        • Selected and inactive
        • Selected and hover
        • Selected and focus
      • Iconography - choose icons that are meaningful for that button's purpose and support its caption
      • Caption - choose a caption as succinct as possible that clearly indicates the button's purpose using language as simple as possible

       

      1. Sacha Trube

        These are GREAT guidelines, but was hoping for some actionable steps to apply.

        Sounds like I need to experiment with Styling configuration, and see where I get to.

      CommentAdd your comment...
    2.  
      1
      0
      -1

      Uniform height can be achieved with min-height. 

        CommentAdd your comment...