Textarea in popover guidance

[jess-watson]

Background

Once a user enters the audience builder within Segment, this feature enables them to describe the audience they want to create and CustomerAI will help build it.

Feedback

• I'd like to make sure I'm handling the character counter in a way that is accessible. I'd like to get feedback on how to handle error messaging if a user is both under and over the required character count.
• I'd also like guidance on if we can/should persist what a user has typed in the textarea if they close the popover without submitting their prompt

Stage of design

High-fidelity

Research

No response

Relevant links

Figma

Are you looking for visual design support?

• Yes

Additional Information

No response

[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 provided Paste documentation, here are some suggestions for your queries:

1. Character counter and error messaging: For accessibility, you can use the aria-describedby attribute to reference the associated element that provides the character count and error message. This will help screen readers understand the context. For error messaging, you can use the inline messaging feature of Paste. This is useful for communicating a direct response to a user action, such as going under or over the required character count.

2. Persisting user input in the textarea: The documentation does not provide explicit information on persisting user input in the textarea if they close the popover without submitting their prompt. However, this is more of a UX decision and can be implemented programmatically depending on your user needs and application design.

Remember, every form field should have a label to indicate what should be entered into the field. If the field is required, indicate it with text or a required indicator. You can also use Help Text placed below the field to help users prevent an error and describe what makes the form field successful.

If you need further assistance, you can start a discussion on GitHub or reach out in Slack on #help-design-system.

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:

• Input field (updated: 05/10/2023, similarity score: 87%)
• Popover Guidance (updated: 10/19/2023, similarity score: 86%)
• Character count (updated: 10/19/2023, similarity score: 86%)

[jess-watson]

Hi Paste team, following up on our discussion from office hours. I've done some further explorations for displaying a dynamic character count with an error state, along with some loading state explorations. I still need to attend content office hours, but any feedback at this stage is helpful!

Character count explorations

Figma

Loading state explorations

Figma

[nkrantz]

We'll take a look this week!

[serifluous]

Left some comments in Figma!

Character count: I think you'll probably come out with some better feedback for this one from content office hours. My overall feeling was that all the text got a little long and repetitive—maybe shortening the instructions to something like "Use 40-300 characters." would help with making the block of text not feel like such a block.

(I have a slight personal preference for the exploration "Description and character count located in the help text" mainly because my attention just naturally goes toward help text when looking for input-specific guidance).

Loading state: We don't have any loading patterns written out, so we'll definitely look to you here in what you implement and learn from customers, to help define the pattern. For now, between indeterminate Progress Bar and Spinner, the decision is likely still based more on what ends up working best visually in this layout.

I left some comments about ways you could reconsider whether the "Submit" button goes into a disabled or loading state, and whether the "Cancel" button belongs in the Popover at all. Hopefully those are helpful to inform more explorations and help you land on a good loading state.

Thanks for following up with those explorations!

[nkrantz]

Thanks for coming to office hours!

Here's the link to the recording (password in #help-design-system slack)