Clarify difference between select and dropdown components in short descriptions

[stacymcauliffe]

Add additional information to the short descriptions for select, form select, and drop down to help users understand how they are different.

[stacymcauliffe]

[janwright73]

Current React component documentation reads as follows:

Dropdown
Use a dropdown when you want to present a list of actions in a limited space.

FormSelect
Form select is used to embed browser native select lists into a form. Related design guidelines: Data input

Select
Use a select to choose one or more values from a list. Related design guidelines: Data input

The image from slack discussion copied in this issue states these two gems:

• Select is traditionally used in a form for a list of options for a value. Example value is State with options of New York, Texas, North Carolina, etc.

• Drop Down is a list of individual actions that you can take.

@rachael-phillips - question for you, do we only want to clarify each component type and usage or would it also be good to redirect the consumer to another component? For example: if they landed on 'dropdown'

Use a dropdown when you want to present a list of actions in a limited space. If you instead have a list of options for a particular value, like "city", please see our Select component.

[rachael-phillips]

Hi @janwright73 I am definitely open to this idea, and thank you for writing such a thorough description. I want to pull @mcarrano in to weigh in on what he thinks will be best here since he and Stacy wrote the descriptions. What do you think about these suggestions, @mcarrano ?

[mcarrano]

@janwright73 @rachael-phillips I like the idea of redirecting people to the component they should be using. My only slight concern is maintaining hard coded cross links, but I guess we are already doing that for the design guidelines. Do you see any other risks?

[rachael-phillips]

"do we only want to clarify each component type and usage or would it also be good to redirect the consumer to another component? For example: if they landed on 'dropdown'"

I think my reservation after taking a second look at this is that this population will only be representative of a slice of our users and upon seeing this description it may cause confusion. Would this information be better to add to the design guidelines rather to our component short descriptions @janwright73 and @mcarrano. What do you think?

[mcarrano]

Who do you think will be confused by this @rachael-phillips ?

[rachael-phillips]

@mcarrano if I arrive at a component, and it immediately says if you are looking for x other thing instead, I feel like that would be confusing because it's more of an edge case. From my perspective, it would be jarring to be presented immediately with an edge case. What do you think?

[mcarrano]

So I guess that's in the presentation @rachael-phillips . I agree that it could be confusing if worded this way. Maybe the links to alternative components should follow the initial definition? @janwright73 could you provide a sample of what you had in mind so we can better evaluate?

[janwright73]

Use a dropdown when you want to present a list of actions in a limited space. If you instead have a list of options for a particular value, like "city", please see our component. The idea here is if a user navigated to the 'Dropdown example' and read the definition and is able to quickly realize - hey i need to check out select after reading why/how to use it. We could potentially also see using this type of a pattern for depreciated components.. hey user we deprecated component X, please go check out component Y.

[rachael-phillips]

@janwright73 @mcarrano thank you for talking this over with me. I am still hesitant to bring on board the idea of offering alternative components. Ideally our site should be offering an experience
that is intuitive enough to help you find the component you are looking for without arriving at the wrong page first. As a compromise between the two views what do you think about the idea of having related components listed? The phrase "Related components" implies that there is overlap. I have concerns about listing alternate components. I think with this approach the design really is everything for clarity.

[mcarrano]

@rachael-phillips Maybe "Related" is a better word. I think that no matter what, component naming is very tricky and there will always be people who click around before they find what they are looking for.

[janwright73]

I like the related concept too!

[rachael-phillips]

Sounds good! This can always be something we test in upcoming user research. I’m happy we have a path forward!

On Mon, Oct 28, 2019 at 5:28 PM janwright73 ***@***.***> wrote: I like the related concept too! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1271?email_source=notifications&email_token=AJTI6XQNFBDNQF7S3SVRHDDQQ5KQNA5CNFSM4H4UWRRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECOOQYI#issuecomment-547154017>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJTI6XX5JS4U3O56EWDECF3QQ5KQNANCNFSM4H4UWRRA> .

-- RACHAEL PETRIE SHE/THEY INTERACTION DESIGNER User Experience Design (UXD) Team | Boston Office raphilli@redhat.com <https://red.ht/sig>

[KendraMar]

Hi, all! my two cents from the designer as consumer perspective.

Was just trying to identify in a mockup what component my product front end dev should use. Spent quite a while trying to figure it out myself, then reached out to Gina (thanks, @gdoyle1 -- would never have figured this out myself -- especially where the sketch component is called a "dropdown.")

My mock contains a drop down that identifies the option the user chose by showing a checkmark. Since all drop downs present options for the user to select, that seems like a function of all dropdowns and not something to distinguish one type from another. Would never have occurred to me to look for a component called "select list," (I think that distinction is very much a coder-oriented one) especially where there is a component called dropdown that already exists.

[mcarrano]

@KendraMar Even though Dropdowns and Selects share the same styling they are actually behaviorally unique and satisfy different use cases. A dropdown menu is a list of actions. The label shown in the dropdown toggle does not change when the user triggers an action. Select lists are used to select one or more values from a list. The selected value of values are reflected somehow, but they are not used to trigger actions. This is a common distinction that is found in most design systems.

Is there a way we can make that distinction more clear?

[KendraMar]

@mcarrano Thanks, Matt! Maybe we can talk offline...

For example:
I notice that when I search for "dropdown" or "drop down" in Pfly, I see only HTML and React content in the search response menu (ie, I see no references to it in Design guidelines). So does this mean designers should not be referring to a dropdown component when they handoff designs?

Also, maybe this description helps a coder, but it isn't so helpful to a designer (and maybe that's OK, esp if the React/HTML descriptions) -- part of the suggestions above:
"Use a dropdown when you want to present a list of actions in a limited space. If you instead have a list of options for a particular value, like "city", please see our Select component."

Is there a way we can somehow sync up the naming of the sketch element and the Pfly component name? (that is, if we expect the designers to help coders identify the correct component to use)

[KendraMar]

Oh...another point of interest. If the sketch file refers to the element as a "dropdown" when we start using the Marvel handoff feature to identify Pfly component names, will it refer to the design unit as a "select list" or dropdown?

[KendraMar]

@mcarrano @mmenestr Hey, Margot and I just talked in detail. She happens to be updating documentation for Design guidelines > data input (as you know). How about we bring this to the design share for cloud.redhat.com on Thursday. She and I have some ideas, but I'm very curious to know what the rest of the interaction designers know already about this stuff, what dropdown formatting options are available to them, and if they'd know how to specify a component properly for their devs. Maybe there's a process we should be following when we first create our mocks that we're not...

[mmenestr]

Addressed in issues #2115 and #2118