Recommendations on disabled items within a dropdown #1071
-
|
Hey DSYS! My team (including @cfree) is working on a dropdown and one of the item is to "Duplicate". This item can be disabled if the user have already maxed out the number of variations for that email. We're thinking of showing some text like "You have the maximum of 6 versions. Please delete one to duplicate this version" so users understand why "Duplicate" is disabled. Was wondering if DSYS have any recommendations on how to show this additional information? We're considering having an icon with the tooltip next to Duplicate dropdown item but didn't see examples of that on the Paste website. Also, found that Neilson Norman Group recommends having short balloon help message for disabled items in dropdown.
|
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 1 reply
-
|
Hi @mindytom Would you mind sharing a mockup so the team can better answer this one? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sending the screenshots @mindytom. I'm mainly speaking to the tooltip within a dropdown menu here. I don't think thats best for accessibility reasons. I'd suggest using help text here where you can explain the limits. Here's an example of help text with a combobox: https://paste.twilio.design/components/combobox#autocomplete-combobox If that's not quite enough, you could use a tooltip or popover on the field itself in either prefix or suffix. Something similar to this: https://paste.twilio.design/components/combobox#combobox-with-add-ons-prefix-suffix-text-or-icons (Not exact, since theres not tooltip). |
Beta Was this translation helpful? Give feedback.
-
|
A short note on why the advice from Neilson Norman Group might not be something to follow. Disabled controls are entirely inactive. You can't click on them, focus on them, or technically hover on them. They are effectively removed from the page. This means adding something interactive like a tooltip to a disabled control, is not possible because you can't interact with the item to make it show. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the quick reply and clarifying the best practice here! We won't be using a tooltip for this. |
Beta Was this translation helpful? Give feedback.
Thanks for sending the screenshots @mindytom.
I'm mainly speaking to the tooltip within a dropdown menu here. I don't think thats best for accessibility reasons. I'd suggest using help text here where you can explain the limits. Here's an example of help text with a combobox: https://paste.twilio.design/components/combobox#autocomplete-combobox
If that's not quite enough, you could use a tooltip or popover on the field itself in either prefix or suffix. Something similar to this: https://paste.twilio.design/components/combobox#combobox-with-add-ons-prefix-suffix-text-or-icons (Not exact, since theres not tooltip).