Choosers

Choosers are a multi-selectable tiles that create a page level output based on a user’s input. 

Web

When to Use

Use when:

  • Multiple inputs are possible or required
  • Interaction design requires a progressive disclosure or filter of the page level content, based on a user’s input
  • Interaction design requires a layout with a larger touch or click target
  • The visual design requires an illustrative representation of the given selections
  • A consistent multi-platform/responsive design is required

Do:

  • Include a page level indication/hint that the tiles are multi-selectable
  • Choosers are single-, multi-, and un- selectable however a minimum of three choosers must be used in a given layout
    • If three of fewer choosers are required, consider instead a radio button
  • Include a header or brief description of the selection
  • Include an icon from the icon font provided. Note: the icon font is currently underway please contact Shawna Kirby with any icon requests in the interim
    • Icon size: Until icon font is available, please refer to spec for sizing details

Do not:

  • Use choosers to serve as a one click access point that takes a user somewhere or to something else
  • Use choosers to serve as a product or feature chooser. Buttons and/or cta’s do not belong on a chooser, as the entire element is clickable.
  • Use chooser as a toggle/segmented control. If 2 or fewer choosers are used consider an alternate selection pattern

Appearance & Behavior

Sizing

  • 2:1
    • 60px high x variable width.
    • Width to be determined based on content.
    • As a rule, copy should be kept to a minimum—please no more than two lines of copy per chooser.

      ChooserStates_2x1

      2:1 aspect ratio. DEFAULT / HOVER / SELECTED / SELECTED HOVER

  • 1:1
    • 140px  x 140px
    • As a rule, copy should be kept to a minimum—please no more than two lines of copy per chooser.

      ChooserStates_1x1

      1:1 aspect ratio. DEFAULT / HOVER / SELECTED / SELECTED HOVER

    • Web
      • Either ratio may be used depending on individual page layout requirements

        chooser_ratios

        either ratio is acceptable

    • Mobile/Responsive
      • To create a consistent cross-platform experience the 2:1 ratio is intended to be the responsive version of the 1:1 ratio

        chooser_responsiveView

        1:1 aspect ratio translated to 2:1 for mobile

Icons
Note: the icon font is currently underway Shawna Kirby with any icon requests in the interim. Please refer to spec for current usage guidelines.

Animations and Transitions

  • Selection
  • Page content/results

Examples

First use interview

salesTax_chooser

SKU Selector, Brazil

BR_Homepage_Hero_Chooser_v3_StandardCTAs
BR_Homepage_Hero_Chooser_ZPfreeRecommended_v3_StandardCTAs

 

Where this pattern is used

Help me choose/product picker

chooser_1

Recommendation is revealed as user makes selections

chooser_2

Recommendation is revealed via “submit” CTA

First use interview

firstUse

interview selections surface feature access points on the first use dashboard

© Intuit 2016 | Terms of use