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.
| Comment | File | Size | Author |
|---|---|---|---|
| #24 | After Patch 3072374.png | 319.87 KB | chetanbharambe |
| #24 | Before Patch 3072374.png | 370.43 KB | chetanbharambe |
| #21 | umami_recipe_category_checkboxes.png | 54.45 KB | kjay |
| #10 | multipleselect.png | 56.35 KB | gayathri j |
| #9 | Create Recipe _ Umami Food Magazine.png | 37.4 KB | gayathri j |
Issue fork drupal-3072374
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:
- 3072374-change-recipe-category
changes, plain diff MR !1124
Comments
Comment #2
thierrydallacroceFirst attempt at a patch but this one seemed simple enough. Feedback appreciated.
Comment #3
thierrydallacroceNote 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.
Comment #4
thierrydallacroceComment #5
webchickWow, 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?
Comment #6
thierrydallacroceI'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.
Comment #7
thierrydallacroceIt'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.
Comment #8
markconroy commentedI 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.
Comment #9
gayathri j commentedAutocomplete 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.
Comment #10
gayathri j commentedFrom 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.
Comment #11
gayathri j commentedComment #14
shaal@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.
Comment #15
mradcliffeThere 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.
Comment #16
markconroy commentedUnassigning since no one is actively working on this right now.
Comment #20
shaalComment #21
kjay commentedSeeing 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.
Comment #22
kjay commentedI 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...
Comment #24
chetanbharambe commentedThanks 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.
Comment #26
lauriiiCommitted 038cb48 and pushed to 9.3.x. Thanks!