Problem/Motivation

We (Acquia) recently did some user testing with Umami (I'm still working out how to make the videos / data from this public). Pretty much every participant got botched up at the Recipe Category field and not understanding what they should type in there. And since there are only a few options to choose from, a drop-down is a better UX pattern here.

(Because there are far more terms in the "Tags" vocabulary, they were able to figure the autocomplete one there out better, though the interaction still needs work, but that's a core bug, not yours. :))

Proposed resolution

As per the comments, the field is multi-select and the browser multi-select list is not intuitive. There are not many options for the recipe category and so checkboxes will be easier to use.

Issue fork drupal-3072374

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

webchick created an issue. See original summary.

thierrydallacroce’s picture

StatusFileSize
new1.01 KB

First attempt at a patch but this one seemed simple enough. Feedback appreciated.

thierrydallacroce’s picture

StatusFileSize
new146.45 KB

Note that, since the field allows for multiple values, it's a multi-select list rather than a drop-down by default. Let me know if this is still appropriate as a UX improvement.

thierrydallacroce’s picture

Assigned: Unassigned » thierrydallacroce
Status: Active » Needs review
webchick’s picture

Wow, thanks so much for jumping on this!

Oooh, meh. :( I forgot about that being multiselect. Does it need to be multiselect? Could we turn it into single select while we're at it?

thierrydallacroce’s picture

Does it need to be multiselect?

I'm not entirely sure, and the more I think about it, the more my head might explode :)

Possible case for single select: our current 5 default terms are distinct from one another (Accompaniments, Desserts, Main courses, Snacks and Starters), therefore a single choice should suffice.

Possible case for multiselect: our vocabulary name "Recipe category" is quite vague. There's nothing telling a site editor they shouldn't add "Italian" as a recipe category, and then categorize a lasagna recipe as both "Italian" and "Main dishes", so stick with multiple choices.

Where I'm leaning: of all the ways to categorize food recipes (meal course, ethnicity, occasion, dietary restriction, complexity...), it bothers me that Umami offers a single, vague one, but if it does, I believe it should support multiple choices. Also, not changing the field's cardinality means not having to think of an update strategy for Umami sites whose recipes have more than one category.

Since test users have demonstrated difficulties dealing with the Recipe Category drop-down, other possible approaches could be to:
- Add more values in it to make it easier / more intuitive to interact with it.
- Replace it with a few, distinct, single-choice drop-downs, much like our Drupal issue search page has drop-downs for issue status, priority, category, version and component.
- Get rid of the field entirely, as there's already a vague, multi-select field, Tags, which test users had an easier time with.

thierrydallacroce’s picture

It's been a more than couple weeks. Let me know if you have any preference, or suggestion or if this ticket is no longer relevant.

markconroy’s picture

I really don't like the multiselect widget we have here and would prefer to keep the autocomplete instead. That said, I'm happy to be overruled - maybe we could use the checkbox widget instead (also a little ugly if there's a long list of items).

@thierrydallacroce just on the topic of how our taxonomies are set up and how " it bothers me that Umami offers a single, vague one, but if it does" - I would not worry about that too much. This is just a demo of what Drupal can do out of the box and we don't necessarily need to get everything right with regards to how a real food magazine might categorise things, especially given that we had no professional food people/chefs/writers/etc working on this, so had to make it up as we went along.

What this widget shows is that there is more than one way to have multiselect field widgets in Drupal out of the box.

gayathri j’s picture

StatusFileSize
new37.4 KB

Autocomplete field is good because of reduce space in form display and looking good , in this field we can choose multiple options.Actually Recipe Vocabulary having more terms user can't able to identify recipes so they feel like difficult to select recipes.

gayathri j’s picture

StatusFileSize
new56.35 KB

From my point of view i don't like select list option because of drop down not looking good it take space in form and main thing is user cant able to select multiple recipes.If you want to select multiple values with drop down means we can use entity reference view select option in manage form display use this module https://www.drupal.org/project/entity_reference_views_select it will provide that option we can select multiple recipes in drop down.

gayathri j’s picture

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

shaal’s picture

@J.Gayathri, Thank you!
The reason we are not using contrib modules in Umami because it's a demo of what functionality Drupal gives you out of the box just by installing it.

mradcliffe’s picture

There isn't a clear consensus that this should be done or what should be done. I think that we need to update the issue summary to reflect the comments, and then remove the novice and Needs issue summary update tags when that is completed.

markconroy’s picture

Assigned: thierrydallacroce » Unassigned

Unassigning since no one is actively working on this right now.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

shaal’s picture

Assigned: Unassigned » kjay
kjay’s picture

StatusFileSize
new54.45 KB

Because there are far more terms in the "Tags" vocabulary, they were able to figure the autocomplete one there out better

Seeing as there is no difference between the way the 'Recipe category' and 'Tag' fields work, I wonder if the tag field having a clearer description on what is expected to be entered ("Enter a comma-separated list. For example: Vegetarian, Chocolate brownies, Appetizers") is making that field simpler to use? The recipe category field just expects users to know how things work and so being the first field of this type they are encountering, it's a case of scratch around and then things become clearer on the next try!

So I would guess that a clear description on how to use the field would be a big help. Something like "Enter a comma-separated list. For example: Desserts, Main courses. Available options will be automatically suggested as you type."

That said, it isn't the simplest field type to use until a user is familiar with its operation and unfortunately we don't have a JS 'Chosen' type widget alternative in core to demonstrate. My vote would be to do what @markconroy has suggested and use the checkboxes widget instead. Mainly because having lots of recipe categories isn't going to be a problem any time soon and we do want to show off what core offers, and nice checkboxes is on offer. With so few options, I don't think the space consumed by the field is a greater issue than its usability.

Attached is a screenshot of the same form using checkboxes on this field. Keeps multi-select, shows off core capability, isn't unintuitive.

Umami recipe category field as checkboxes

kjay’s picture

Assigned: kjay » Unassigned
Issue summary: View changes

I have committed to the issue fork the profile config change for the recipe category field, switching the field display type from autocomplete tags to simple checkboxes.

https://git.drupalcode.org/issue/drupal-3072374/-/commit/0204369f2b3617b...

chetanbharambe’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new370.43 KB
new319.87 KB

Thanks kjay,
Verified and tested merge request !1124 (https://git.drupalcode.org/project/drupal/-/merge_requests/1124.patch)
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Umami Site.
# Goto: node/add/recipe
# Check the recipe category field
# User is able to see autocomplete field for the recipe category.

Expected Results:
# User should see simple checkboxes for the recipe category.

Actual Results:
# User is able to see autocomplete field for the recipe category.

Please refer attached screenshots.
Looks good to me.
Can be a move to RTBC.

  • lauriii committed 038cb48 on 9.3.x
    Issue #3072374 by kjay, thierrydallacroce, Gayathri J, chetanbharambe,...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Committed 038cb48 and pushed to 9.3.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.