WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: order of CTA buttons

for

Number of posts in this thread: 4 (In chronological order)

From: Capra, Miranda
Date: Wed, Apr 14 2021 4:01PM
Subject: order of CTA buttons
No previous message | Next message →

Our design team is having a debate about the order to present call to action (CTA) buttons inside a web application. The UX team has differing opinions about the proper order, and was wondering if there is a strong preference from the accessibility community that would sway our design patterns. Some example contexts include submitting a form (submit/cancel), modal dialogs (OK/cancel or save/cancel), and proceeding to the next step in a multi-step flow (next, previous, cancel). Usually the primary CTA is the most important or most commonly used button (submit, OK, save, next). We have some rules in special situations about making the primary CTA the "safest" button, such as staying logged in if it's a timeout warning or returning to a form instead of losing your work.

Philosophy A: order should be tertiary CTA (if there is one), then secondary CTA, and then primary CTA. Screen reader users will read/tab through them all in turn, leaving cursor/focus at the end of the group, conveniently closest to the primary CTA. The theory is that this will help ensure that users read all the available CTA buttons.

Philosophy B: order should be primary CTA, secondary CTA, and then tertiary CTA if there is one. The theory is that users are likely to select the first CTA button they get to at the end of a form or modal, and so putting the most common or safest button first will result in the fewest accidental selections of the wrong button.

Does anyone have any experience to help us chose between these approaches?

I am most interested in opinions based on how people with disabilities interact with technology. We have done quite a bit of user research with typically abled users, and some heavy statistical analysis has come up with a tie between the two approaches.

- Miranda


Miranda Capra, PhD, CPWA<http://www.accessibilityassociation.org/cpwacertification>;
SVP, Sr. Principal Accessibility Researcher | BB&T now Truist
3201 Beechleaf Ct., Tower II-5, Raleigh, NC 27604
Email: = EMAIL ADDRESS REMOVED =

An accessible experience is much more than just ADA compliance.



The information transmitted is intended solely for the individual or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of or taking action in reliance upon this information by persons or entities other than the intended recipient is prohibited. If you have received this email in error please contact the sender and delete the material from any computer.

From: glen walker
Date: Wed, Apr 14 2021 4:11PM
Subject: Re: order of CTA buttons
← Previous message | Next message →

Hi Miranda! It's been a while.

Philosophy A is an interesting approach and I can see the reasoning for
"forcing" users to read all the options but it also might lead to a more
"destructive" CTA being first. As a keyboard user myself, I always prefer
the least amount of tabbing so would prefer the primary CTA be first
(Philosophy B). Even better if I don't have to navigate to the CTA but
rather just hit ENTER.

Glen

From: Jonathan Avila
Date: Wed, Apr 14 2021 4:37PM
Subject: Re: order of CTA buttons
← Previous message | Next message →

From a low vision standpoint the following are helpful:
* The primary button called out with a different background/color - but the user also needs to know that the other options are there - if they are too spread out with whitespace users with low vision may miss the other options.
* A focus order that does not match the visual order can also be confusing.
* Having a thick border on the default button would help to communicate it can be activated straight away with enter, etc.
* Consistency in placement of the primary button is also helpful.

Jonathan

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Capra, Miranda via WebAIM-Forum
Sent: Wednesday, April 14, 2021 6:01 PM
To: = EMAIL ADDRESS REMOVED =
Cc: Capra, Miranda < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] order of CTA buttons

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Our design team is having a debate about the order to present call to action (CTA) buttons inside a web application. The UX team has differing opinions about the proper order, and was wondering if there is a strong preference from the accessibility community that would sway our design patterns. Some example contexts include submitting a form (submit/cancel), modal dialogs (OK/cancel or save/cancel), and proceeding to the next step in a multi-step flow (next, previous, cancel). Usually the primary CTA is the most important or most commonly used button (submit, OK, save, next). We have some rules in special situations about making the primary CTA the "safest" button, such as staying logged in if it's a timeout warning or returning to a form instead of losing your work.

Philosophy A: order should be tertiary CTA (if there is one), then secondary CTA, and then primary CTA. Screen reader users will read/tab through them all in turn, leaving cursor/focus at the end of the group, conveniently closest to the primary CTA. The theory is that this will help ensure that users read all the available CTA buttons.

Philosophy B: order should be primary CTA, secondary CTA, and then tertiary CTA if there is one. The theory is that users are likely to select the first CTA button they get to at the end of a form or modal, and so putting the most common or safest button first will result in the fewest accidental selections of the wrong button.

Does anyone have any experience to help us chose between these approaches?

I am most interested in opinions based on how people with disabilities interact with technology. We have done quite a bit of user research with typically abled users, and some heavy statistical analysis has come up with a tie between the two approaches.

- Miranda


Miranda Capra, PhD, CPWA<http://www.accessibilityassociation.org/cpwacertification>;
SVP, Sr. Principal Accessibility Researcher | BB&T now Truist
3201 Beechleaf Ct., Tower II-5, Raleigh, NC 27604
Email: = EMAIL ADDRESS REMOVED =

An accessible experience is much more than just ADA compliance.



The information transmitted is intended solely for the individual or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of or taking action in reliance upon this information by persons or entities other than the intended recipient is prohibited. If you have received this email in error please contact the sender and delete the material from any computer.

From: Barry
Date: Thu, Apr 15 2021 1:09AM
Subject: Re: order of CTA buttons
← Previous message | No next message

I agree with Glen on this. I would add that the fewer number of moves a person has to do to get to the primary action is also easier for people using switch control devices or swiping on a touch device.

Cheers

Barry


-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: 14 April 2021 11:11 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] order of CTA buttons

Hi Miranda! It's been a while.

Philosophy A is an interesting approach and I can see the reasoning for "forcing" users to read all the options but it also might lead to a more "destructive" CTA being first. As a keyboard user myself, I always prefer the least amount of tabbing so would prefer the primary CTA be first (Philosophy B). Even better if I don't have to navigate to the CTA but rather just hit ENTER.

Glen