[Django] #34643: Move admin form labels to a more accessible place
Django
------------------------------------------------+------------------------
Reporter: Tom Carrick | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
------------------------------------------------+------------------------
Currently, labels in admin forms are left aligned, so there's a gap
between the label text and the input. This means there is usually a gap
between the label and the input, which is a bit less usuable (it takes
longer to associate the label with the input as your eyes move a bigger
distance. This is made worse for users that use screen magnifiers, who may
not be able to see the label and input at the same time.
There are two possibilities:
1. Move the labels above the form. This is a bit more standard, and it
looks nicer, but some users may complain that they can see less on the
screen as each field takes up more vertical space. This is what we
currently do for mobile.
2. Align the text to the right. This way the label is next to the input.
Trac uses this approach when creating a new ticket. It feels like an
easier lift, but people may complain that it's uglier (I might agree, Trac
gets away with it a bit because there's a lot of whitespace to the left of
the labels.
Personally I prefer the first option, but I don't know if others have any
suggestions.
It also might be tricky with for fields with non-standard widgets (date /
time, horizontal filters, etc.).
--
Ticket URL: <https://code.djangoproject.com/ticket/34643>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: Tom Carrick | Owner: nobody
Cleanup/optimization |
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Comment (by David Sanders):
Aligning labels to the right means it'll become a little harder to scan
the labels vertically to find the field you're after (assuming ltr text,
that is), as your eyes need to dart somewhat.
I'd personally avoid making this change without consulting a usability
expert as I don't think the current layout or any change is an absolute,
there are advantages & disadvantages with each layout choice.
I think a nice solution would be to let the use choose the layout from the
existing + the 2 choices you've listed.
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: nobody
Cleanup/optimization |
Component: contrib.admin | Version: dev
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* cc: Paolo Melchiorre, Thibaud Colas, Sarah Abderemane (added)
* keywords: => accessibility
* status: new => closed
* resolution: => needsinfo
Comment:
Thanks for the suggestion, it seems a discussion is needed before moving
forward. I'd at least expect consensus in the accessibility team and
confirmation from an UX designer.
Paolo, can we ask for an opinion from someone from your UX team?
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner: nobody
Type: | Status: closed
Cleanup/optimization |
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: needsinfo
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Thibaud Colas):
I think it’s well established that fully vertical form layouts are the
best from a UX and accessibility standpoint. Their only drawback really is
additional scrolling, which is something to consider but in my opinion not
a blocker for Django.
The advantages are reduced cognitive load for all users due to:
- Closer proximity between label and field
- Simpler movement through fields (top-down eye motion through the form
rather than a repeated Z pattern)
- More room for label text length to fit in a single line
Right-aligned label text wouldn’t work because though the text is closer
(first point), the position of the start of the label becomes
unpredictable which hurts scannability.
Here are notorious organisations in the UX/accessibility world
recommending the simple top-down layout:
> Use simple vertical layouts. Keep your form blocks in a vertical
pattern. This approach is ideal, from an accessibility standpoint, because
of limited vision that makes it hard to scan from right to left.
> [https://designsystem.digital.gov/templates/form-templates/ US Web
Design System from US GSA]
And:
> We recommend placing field labels above the corresponding text fields.
Although this increases the form's overall length, it makes the form
easier to scan, because users can see the text field in the same fixation
as the label. Top placement also allows for longer field labels, as
horizontal space isn't an issue.
> [https://www.nngroup.com/articles/form-design-white-space/ Nielsen
Norman Group]
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:3>
Django
Reporter: Tom Carrick | Owner: nobody
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
--------------------------------------+------------------------------------
Changes (by Natalia Bidart):
* status: closed => new
* ui_ux: 0 => 1
* resolution: needsinfo =>
* stage: Unreviewed => Accepted
Comment:
Accepting following the advice from Thibaud Colas, thanks!
From the conversation, the desired option is number 1, to place the labels
above the fields.
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:4>
Django
--------------------------------------+------------------------------------
Reporter: Tom Carrick | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Comment (by David Smith):
Nervous of adding scope creap.... but if we are going to do this can we
also move the help (and errors🤔) above the input?
See [https://github.com/django/django/pull/16920#issuecomment-1574579200
comment]
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:5>
Django
--------------------------------------+------------------------------------
Reporter: Tom Carrick | Owner: nobody
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
--------------------------------------+------------------------------------
Comment (by Thibaud Colas):
@David the desired "Move the labels above the form" option is technically
already what’s happening on "mobile" viewports, so I’d guess this is
relatively little work and might be CSS-only changes, no templates nor
test cases to update.
The help text and error messages switch I’d guess would be mostly all
templates and test cases – and would ideally be done on Django’s default
forms rendering, not just the admin.
So although visually the changes are on the same "components", my
recommendation would be to keep them separate.
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:6>
Django
Reporter: Tom Carrick | Owner:
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Hrushikesh Vaidya):
* owner: nobody => Hrushikesh Vaidya
* status: new => assigned
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/16975 PR]
I've fixed this by wrapping non-checkbox fields in a blank `div`, which
resets the `display` style from `flex` and `flex-direction` of `row` to a
`display` style of `block`.
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner:
Type: | Hrushikesh Vaidya
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
* needs_docs: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner:
Type: | Hrushikesh Vaidya
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 1
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* Attachment "test_inline_formset_error_input_border-inline-error-
mobile.png" added.
Error message on mobile
--
Ticket URL: <https://code.djangoproject.com/ticket/34643>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner:
Type: | Hrushikesh Vaidya
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 1
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Sarah Boyce):
[[Image(/raw-attachment/ticket/34643
/test_inline_formset_error_input_border-inline-error-mobile.png)]]
It looks like the error messages appear above the fields on mobile, I
would expect them to be below the fields. Thibaud could you confirm?
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:9>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner:
Type: | Hrushikesh Vaidya
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 1 | Needs documentation: 1
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Thibaud Colas):
@Sarah wow! Good catch. I didn’t realise admin’s forms rendering was so
much worse than vanilla forms rendering. Yes, we should move the error
messages – my preference would be for error messages to be between the
label and input, so people can always see the error message no matter how
far along the page they’ve scrolled.
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:10>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner:
Type: | Hrushikesh Vaidya
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 1 => 0
* needs_docs: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:11>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner:
Type: | Hrushikesh Vaidya
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
* needs_docs: 0 => 1
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:12>
Django
-------------------------------------+-------------------------------------
Reporter: Tom Carrick | Owner:
Type: | Hrushikesh Vaidya
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_docs: 1 => 0
Ticket URL: <https://code.djangoproject.com/ticket/34643#comment:13>