Problem/Motivation
Earlier this year, we ran user research on the usability of the Field UI. The results of this are documented in #3343940: Field UI 2023 User Research. The findings were consistent with earlier research from 2015: #2497361: [meta] Fix issues found during UMN Usability Testing 2015.
The key insights this issue focuses on:
- When creating fields, the default value option was so prominent, it was perceived as a preview. Users expected to fill it out.
- The ordering / grouping of field types makes it hard to find some of the commonly used field types; user didn't see "text" for a long time
- Most participants were not aware of the Field List feature. However, they found it helpful for understanding how fields are being re-used. For example, the field cardinality settings, or entity reference target are not visible when re-using a field but with the help of Field List they were able to identify where the field existed to find that information.
Proposed resolution
Prioritizing important configuration options: reorganize the form elements to ensure that the most important fields are more noticeable than the less important ones (e.g. the default value widget is overly prominent). This helps users to quickly identify and focus on the fields that matter the most.
Combining field storage and field instance forms: combine the two forms since having the forms on separate pages adds complexity to the field creation and editing flow. Many of the users didn't understand what's the difference between the forms. Combining the forms simplifies the user interface and makes it easier for users to manage the fields because all of the relevant options are displayed on a single page.
Make it easier to select field type by introducing grouping: group fields into categories that make it easier for users to find the correct field types. See #6 for the results of a card sorting exercise that can be used as the basis of the field type groups.
- #3356894: Make field selection less overwhelming by introducing groups
- #3408326: Make field selection a two-step form
- #3409271: Clean up code in FieldStorageAddForm and related JS
- #3389200: Field selection breaks conventions and increases cognitive load
- #3409379: Move the first two steps of field creation into a modal., so that "Create a new field" is similar to "Re-use an existing field" after #3346682: Improve re-use an existing field user experience.
- #3390914: Grid-style field type keyboard navigation
- Issue needed (maybe): VoiceOver does not announce descriptions of field types. (See discussion on #3386762.)
- #3397711: Move label and machine name fields to the field config edit form
- #3397715: Indicate where user is in the process of creating fields
- #3408738: Create a new OpenModalDialogWithUrl command
- #3386762: Use modals in field creation and field edit flow
Providing information on field re-use: bring the necessary information to the view where fields are being re-used. This helps users to quickly locate and use the fields without navigating to the field list page.
Remaining tasks
- Reorganize form elements on the new field settings form
User interface changes
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | field_type_similarity_matrix.png | 242.18 KB | lauriii |
| field-creation.pdf | 1021.57 KB | lauriii |
Comments
Comment #2
lauriiiReceived some feedback regarding the prototype from @rkoller on Slack:
Something else I noticed was that in the wireframe and prototype the "Allow multiple values" setting is not in the "Field Storage" fieldset, even though it should be.
Comment #3
bnjmnmComment #4
bnjmnmComment #5
lauriiiComment #6
lauriiiWe ran a card sorting exercise to try to make the list of available fields less overwhelming. Based on this, we could introduce following groups:
One of the tricky field types to place in a group was the media reference type. The results are split between file uploads / attachments and references.
Comment #7
hooroomooUpdated issue summary to add #3356894: Make field selection less overwhelming by introducing groups issue for grouping fields
Comment #9
benjifisherWe discussed #3356894: Make field selection less overwhelming by introducing groups at #3380554: Drupal Usability Meeting 2023-08-18. We were surprised that that issue was fixed without a review from the Usability team nor an accessibility review. But I do see that @yoroy marked the issue as RTBC, and he is one of the Usability topic maintainers.
I do not want to lose track of the follow-up issues that were created for #3356894, so I am adding them as related issues here. Is there another public place where they are already tracked? Also, #3356894-59: Make field selection less overwhelming by introducing groups mentions "significant ux regressions". Is there a specific issue to address these regressions?
Comment #10
lauriiiUpdating the issue summary.
@benjifisher Note that #3356894: Make field selection less overwhelming by introducing groups was reviewed by @bnjmnm who is an accessibility topic maintainer. The UX related concerns raised there are being addressed in #3386762: Use modals in field creation and field edit flow. 😊
Comment #11
lauriiiComment #12
simohell commentedI have been categorising field types and options and I have one major recommendation:
Rename "Selection list" to "Predefined values" with the term "value" is debatable - options, list...
Reasoning: selection refers to a widget, predefined implies that the options for these field can be hard to edit later.
The counterpart of "prefined" would be "free" - but renaming "text" to "free text" might be excessive even if it would define difference to fe. link (which is special case of text) quite well.
Comment #13
donquixote commentedMy suggestion would be instead of "Selection list" to have a category "Choice", which would also include "Boolean".
As a site builder, I think of these as similar, and I often wonder "Should I use multiple boolean fields or a single multi-select / checkboxes field with multiple options?".
(I was actually going to create a new issue but this was before I noticed the recent introduction of "Selection list" category)
Comment #14
simohell commented@donquixote In user testing Boolean didn't got low percentages for grouping so it might be hard to find in any group. I'll tag you in Slack to the thread where the results are visualised. Single item groups were noted as special cases on Friday by the UX meeting but they probably need to be handled under the "Modal" child issue.
Personally I would like to test many-to-many groupings but maybe not now that we are working against a minor release deadline.
Comment #15
tim.plunkett#12-14, this is a meta/plan issue, please open a dedicated issue to propose that change.
Comment #16
benjifisherFrom #3346682-7: Improve re-use an existing field user experience:
Perhaps the same comment should apply to #3386762: Use modals in field creation and field edit flow. I am adding #2880003: Use modals on the Manage Fields page as a related issue.
Comment #17
benjifisherI think we should consider the scope of #3386762: Use modals in field creation and field edit flow.
The current MR was opened on 2023-09-13. Several people have done a lot of work on it, but that is a mixed blessing. Right now, it has 177 commits, some of which more-or-less revert earlier work, and that often makes it difficult to resolve merge conflicts. I have already done two non-trivial rebases. I think the MR needs another one now, and I am reluctant to make that effort.
Besides the commit count, it changes 33 files, +922/-610 lines. We have already had a release manager comment on the issue, reminding us of the guidelines in https://www.drupal.org/core/scope. Just the line count makes the current MR very hard to review.
Part of the problem is that the issue's scope is not explained anywhere. The scope is whatever is in the MR. I would like to describe the scope and keep it limited. Then, taking parts of the current MR, I think we can move the issue forward quickly and open follow-up issues for the next steps.
I suggest limiting the scope to the following. For the sake of example, start with the Standard profile.
/admin/structure/types/manage/page/fields. The "Create a new field" link should open in a modal window. Currently it loads the "Add field" form,/admin/structure/types/manage/page/fields/add-field./admin/structure/types/manage/page/add-field/node/field_boolean.Follow-up issues can address additional UX and a11y reviews, text changes (such as "Add a new field" instead of "Create a new field"), and having more steps happen in the modal window. For that last point, there are already competing suggestions for how to proceed: see my comment here from 2023-12-02, and there is also #3397164: Use modals in field re-use flow.
Comment #18
narendrarRe #17,
Thank you @benjifisher for your suggestion related to limiting the scope. I can see the benefits of the new approach you've proposed. This suggestion/approach would have been incredibly helpful for us three months ago.
But as discussed with @lauriii, we've already made significant progress with the current MR that now splitting this issue in multiple issues might result in delay in making further progress.
Perhaps we can:
Comment #19
benjifisherThis is not the first time I have suggested narrowing the scope of #3386762, but my previous comments were on that issue instead of here.
In my opinion, the current MR on that issue should not be merged. The count of changed lines is enough of a reason by itself. The fact that it does too much is also enough of a reason. One of the things it tries to do is address some of the a11y concerns, and there is an active discussion on the issue of how to do that. There is also other outstanding feedback on the MR.
In short, I do not think the issue is as close to "done" as you seem to think it is.
If we make a small, initial step as I suggest, then it does not mean all that effort goes to waste. The MR will still be there for reference, and we can copy useful changes from that MR to new ones.
Comment #20
lauriiiI appreciate the help trying to land #3386762: Use modals in field creation and field edit flow. I'm generally supportive of splitting work into smaller issues. However, I'm not convinced based on the arguments here that we should do that given that it would add significant amount of work to just get to the status quo. The diff size is not ideal, but it's also not unprecedented. I personally think the issue needs an issue summary update to explain the current scope and proposed resolution. It also needs some issue management to summarize the remaining points, and to close down resolved threads. That should be manageable and should make the issue much less overwhelming from what it is now.
Comment #21
benjifisherI added #3408326: Make field selection a two-step form as a child of this issue, and there is now a MR for that issue with passing tests.
As I said in #3386762-46: Use modals in field creation and field edit flow, my advice is
My point is that #3386762 has been in active development for three months, and it is still not done. Instead of taking small steps, it does a lot of things at once:
FieldStorageAddForminto two separate steps.It is not too late to follow that plan, and the work done in #3386762 will not be lost if it is re-used in the individual steps.
Using the same numbering:
There are a few other tasks that could be split off into separate issues. If we want to update any of the input labels, or re-name variables or array keys, that can be done in a separate issue (so that reviewing the other issues is easier). And the recent discussion on #3386762 (the problems with VoiceOver first mentioned in Comment #20 and next in #62) should really be a separate issue. That problem is not created by #3386762: it has been like that since #3356894. I think we might also move the form elements for the field name and label from
FieldStorageAddFormto the Field Configuration form.Comment #22
benjifisherI just added #3409271: Clean up code in FieldStorageAddForm and related JS as a follow-up to #3408326: Make field selection a two-step form, and I re-opened #3389200: Field selection breaks conventions and increases cognitive load. I am adding these two issues to the issue summary here, along with some other recently opened issues.
Comment #23
benjifisherI am adding #3409379: Move the first two steps of field creation into a modal. to the list of child issues in the "Proposed resolution".