Combobox help text (Office hours: Oct 8, 2020)

[pguptaDS]

Is it possible to move the location of the help text from below the input field to above the input field? During our usability testing, users seemed to want to read the help text as they were making a selection. Here is what I am exploring:

[corinne-nagel]

Hi @pguptaDS ! We don't suggest writing help text this long. If your info has to be that long, I think putting it into an info icon with a tooltip like this would be the best route:
https://paste.twilio.design/components/combobox#combobox-with-add-ons-prefix-suffix-text-or-icons

[SiTaggart]

I would personally caution against lengthy tooltip text. Long strings in tooltips are hard to consume using a screenreader. I would only really recommend short sentences.

[kate-porter]

Another option here could be to change up the format a bit, where you give the user the information they need in paragraph text above the inputs.

Including help text below a form field is pretty standard, but we might want to consider introducing description text that goes below a label, in addition to help text that goes below the input. I'm definitely interested to hear more about your research during office hours tomorrow.

[kate-porter]

Hey @pguptaDS - just wanted to circle back on this one, since we tossed out a few different ideas but no consensus. We'll discuss more as a group during your office hours time today and talk about a solution together. :)

[TheSisb]

Some notes from office hours today:

• We should evaluate putting helpText above inputs rather than below, for the reason displayed in this thread (combobox opening over helptext blocks it from view). Alternatively, maybe have strict guidelines on above text and below text? (for team discussion)
• Combobox options can look like hyperlinks which led certain users to think clicking them would navigate the page. We probably need to do more usability research on this one.
• Consider addressing a11y considerations of unselectable items in a combobox being visually distinct from a system perspective.
• Evaluate nested items within a combobox and how to best represent it visually.

[kate-porter]

Hey @pguptaDS - below, I've got Shadi's notes from office hours (in bold) and our respective responses / suggestions:

We should evaluate putting helpText above inputs rather than below, for the reason displayed in this thread (combobox opening over helptext blocks it from view). Alternatively, maybe have strict guidelines on above text and below text? (for team discussion)

• We’ve discussed this as a team, and for now, we’ve decided that moving the help text above the combobox would require further usability testing. Providing help text below a form element is a standard pattern across the web, so further validation would be required to warrant that change. We will absolutely keep an eye on this though, and if you encounter this in usability testing again, please let us know.

• We recommend that you experiment with different layouts that expose the necessary information in different ways that don’t rely on help text. We need to do a better job of outlining this on the docs site, but the help text is really intended to provide useful hints that help the user successfully complete the field (such as, “Your password must have 8 characters, at least 1 letter, and at least 1 number”), whereas you are really trying to explain to the user how to use this feature as a whole, which may warrant a slightly different approach.

• One thought I had was to add titles and descriptions to each of the cards that you have now—something like this (Messaging uses a similar pattern here):

  

Combobox options can look like hyperlinks which led certain users to think clicking them would navigate the page. We probably need to do more usability research on this one.

Consider addressing a11y considerations of unselectable items in a combobox being visually distinct from a system perspective.

Evaluate nested items within a combobox and how to best represent it visually.

• Thank you for this feedback 🙌 As we take this component from the alpha stage into the beta stage (meaning it will get a design pass and will go through the dsys committee for feedback), we will definitely keep this in mind. If you have any suggestions on design approaches, please do let us know.