Regional Monkey: UI

[bhoomasri-ux]

The specific questions I have are...

Forms:

• Is there a version of Combobox in Paste where the label is to the left of the input element?
• Is there a version of Input in Paste where the label is to the left of the input element?
• Does the combination of input forms and buttons violate any Paste rules?
• Are there any concerns with how I've used the components on any of these explorations?

Background: With the console experience for Regional now available for PN users, Monkey needs to accommodate for this new functionality.
Stage of design: Exploration+
Links to mockups or prototype: https://www.figma.com/file/9XT4y4wYvhtDd8lKofdWLn/Regional-Monkey-Brainstorming?node-id=66%3A0

[gloriliale]

Hi @bhoomasri-ux! Thanks for posting this so that we can discuss the details in office hours :)

[kate-porter]

Hey @bhoomasri-ux - thanks for these questions, and we'll dig in on this during office hours later today!

I did want to address your question about left-aligned labels here as well, so other folks can reference it in the future.

We opted not to support placing labels to the left of inputs in Paste for a few reasons:

• Placing labels above inputs improves readability and scan-ability of a form, as a user can process the information by looking in one location rather than moving their eyes from left to right to tie the label to the input.
• Left-aligned labels can be problematic for low-vision users who use a zoom feature, because if the label ends up off-screen when they are focused on the input, they can lose context of what an input is for.
• Dyslexic and other cognitive disability users struggle with left to right scanning and association.
• Internationalization of label strings is trickier when a label is on the left, as the string length varies. What might look find in English gets squished in German.
• Left-aligned labels can get messy in responsive layouts.

I assume you wanted to explore the left-aligned labels to save some vertical space, which makes a ton of sense. As an alternative, you might try placing related inputs side-by-side (for example, it probably makes sense to a user to see "Voice URL" and "Voice method" placed next to each other, since they are related).

Hope that helps! We can chat more about it in office hours. :)

[richbachman]

Here's the video recording link. Thanks for sharing the north star vision. It's exciting seeing Paste in Monkey.