#33728: Tab order should match visual order for admin model forms’ submit
buttons
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Alexander
Type: | Freyr Lúðvíksson
Cleanup/optimization | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Ready for
keyboard, ux | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Natalia Bidart):
Interesting topic! Below my thoughts on this.
A year ago, when I noticed this change (as a user, not as a fellow), I was
quite surprised and annoyed because my hands were used to submit Save
actions in the rightmost side of the screen. But I said nothing because I
assumed the change was necessary. Now that I see the newer comments, I
started doing some research and found a few interesting artciles (lots of
[https://dictionary.cambridge.org/dictionary/english/til TILs]):
[https://medium.com/patternfly/button-placement-on-forms-aa57a81f7d This
one] says "Left aligning the primary action will ensure that it comes
first whether buttons are inline or stacked."
[https://adamsilver.io/blog/where-to-put-buttons-on-forms/ This other one]
is a bit more involved and presents multiple cases, but in general they
advise to place the buttons to the left.
The latter references [https://www.lukew.com/ff/entry.asp?571 this
article] from "LukeW" though, despite it's from 2007, the analysis it
makes is quite compelling and does not seem outdated at all.
It's worth noting that the attached screenshot seems to be about
**confirmation dialogs**, not about **form submit buttons placement**, and
I don't think they should be treated the same.
In summary, my vote is to leave the buttons in the current location,
though I would suggest that we could reduce the number of actions because
it feels convoluted. Specifically, I think one simple improvement would be
to transform the Delete red prominent button into making it a link,
following this advice:
> While the primary goal of most Web form designs is to get people through
a form as quickly and painlessly as possible, there are situations where
slowing people down is advisable. When choosing between primary and
secondary actions, visual distinctions are a useful method for helping
people make good choices. Should this distinction be more prominent like
the button vs. link in Option A or a bit more subtle like the two
different colored buttons in Option C? Option A fared a bit better in time
to completion, average number of fixations, and average total length of
fixations indicating people completed the form faster but not by much.
--
Ticket URL: <https://code.djangoproject.com/ticket/33728#comment:12>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/01070189925db419-c394bc32-b826-43c7-9b7f-304f5c7ef853-000000%40eu-central-1.amazonses.com.
