Modified visual picker

[ankigupta92]

Hello, we currently have a page where the user selection impacts the rest of the page. These selections can range from 4-9 choices. Currently we are using visual picker (current experience screenshot) but one of the common pain points is the list gets visibly long and users do not notice the rest of the page change because it is hidden beneath the choices and page fold.

Couple of ways to tackle this issue that I would love to get feedback on:

• Option 1: replace the visual picker with radio group and hopefully that reduces the length of the choices and nothing is hidden beneath the fold. (concern: design system limits radio groups to 6)
• Option 2: move the options to another page, this would be a last resort because it will be a bigger change and will impact some additional features
• Option 3: collapse the list once a choice has been made, it would require 2 interactions- making a choice and clicking save to close the rest of the choices. I have not seen this pattern in Segment product
• Option 4: visual picker with a button. once the user clicks on “start” button, we re-load the page and collapse this section to avoid taking up so much space. (I got inspiration from Github’s "Start a new discussion" flow where similar behavior is used when picking category of question)
  
  
  
  
  

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Based on the information provided and the Paste design system documentation, here are my thoughts on your options:

• Option 1: Replace the visual picker with a radio group - This could be a viable solution to reduce the visual length of the choices, making the rest of the page more visible. The concern about the design system limiting radio groups to 6 isn't explicitly mentioned in the provided documentation, so it might not be a limitation. Radio groups are recommended when you need users to select a single option from a list, which seems to fit your use case. This change could make the options more compact and less overwhelming, potentially addressing the issue of users not noticing changes on the rest of the page.

• Option 2: Move the options to another page - While this would indeed be a significant change, it could provide a cleaner user experience by focusing the user's attention on one decision at a time. However, as you mentioned, it would impact additional features and require more development work. This option wasn't directly discussed in the provided documentation, but it's a common pattern in user interface design when trying to simplify complex decision-making processes.

• Option 3: Collapse the list once a choice has been made - This option isn't directly addressed in the provided documentation. However, it's worth noting that introducing new patterns not found in the design system or product could lead to confusion among users. Consistency is key in UI design, so if this pattern isn't commonly used in Segment products, it might not be the best approach.

• Option 4: Visual picker with a button - This approach seems to align with the idea of making interactions more deliberate (requiring a user to click "start" to proceed), which could help in making the rest of the page changes more noticeable. However, like Option 3, this specific pattern isn't discussed in the provided documentation. It's important to consider whether introducing a new interaction pattern would fit well with the existing design system and user expectations.

Given the options and the information from the Paste design system documentation, Option 1 seems like the most straightforward and system-consistent approach to address your concerns. It simplifies the selection process and potentially makes the rest of the page more visible without introducing new patterns that might confuse users. However, it's always a good idea to prototype and user test different solutions when possible to ensure that the chosen solution effectively addresses the user pain points.

For more details on Visual Picker and Radio Group components, you can visit the Paste design system documentation:

• Visual Picker: https://paste.twilio.design/components/visual-picker
• Radio Group: https://paste.twilio.design/components/radio-group

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Visual picker vs radio button group (recommended usage) (updated: 08/17/2023, similarity score: 90%)
• Visual picker vs radio button group (recommended usage) - Answer (updated: 08/17/2023, similarity score: 88%)
• Radio Group with actionable sub options (updated: 07/01/2022, similarity score: 87%)

[krisantrobus]

Hi @ankigupta92, thanks for reaching out. We discussed this and have some thoughts. Firstly, it would be good to see the first option with the content below and options in the visual picker. This is to determine whether the icon is required if it is the same for options and try to understand the full length of the page.

Option 4 with cards would be a good option if you are exploring the layout, for example in a row. One downfall to this card however would be that if a user navigates back to this step there is no indication of the option they chose.

Another alternative we thought of was, if you have a varying number of options and only one can be selected you could use a Combobox. You are able to set a custom option template where you can still set the option text and have description text too. This would be clear which choice was made and can be kept in the same page keeping the content below in view.

Let us know what you think.

[roxanagomez]

Hi @ankigupta92 please let us know if any of the options suggested by @krisantrobus worked or if you need further help.

[roxanagomez]

Marking as answered due to inactivity. Feel free to reply if you need more support!

[ankigupta92]

Apologies for responding late!!
Sharing 2 examples of current experience, you can see how long the list can be. I agree with removing the duplicative icons since they do not provide any additional info.

Based on all the feedback I might go with option 3, since the problem we are solving is that the user doesn't realize the rest of the page changes based on the selection and accidentally clicks on next. To solve that we will let the user click on Continue for progressive disclosure of the remaining flow.