E-mail List Archives

Search E-mail List Archives for

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

From: Trafford, Logan
Date: Thu, Oct 04 2012 12:01PM
Subject: radio buttons, vertical vs horizontal
No previous message | Next message →

Have spent the last hour trying to find a definitive answer as to whether or not radio buttons should be stacked vertically for to enhance both usability and/or accessibility. It seems to be somewhat debatable. Looking for input.


Logan Trafford
Team Lead, Web Services
Information Technology Services Department
City of Ottawa
613-580-2424 x13598




This e-mail originates from the City of Ottawa e-mail system. Any
distribution, use or copying of this e-mail or the information it
contains by other than the intended recipient(s) is unauthorized.
If you are not the intended recipient, please notify me at the
telephone number shown above or by return e-mail and delete
this communication and any copy immediately. Thank you.

Le présent courriel a été expédié par le système de courriels de
la Ville d'Ottawa. Toute distribution, utilisation ou
reproduction du courriel ou des renseignements qui s'y trouvent
par une personne autre que son destinataire prévu est interdite.
Si vous avez reçu le message par erreur, veuillez m'en aviser par
téléphone (au numéro précité) ou par courriel, puis supprimer
sans délai la version originale de la communication ainsi que
toutes ses copies. Je vous remercie de votre collaboration.

From: Chagnon | PubCom
Date: Thu, Oct 04 2012 12:41PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

As a graphic and interface designer, I recommend stacked vertically radio
buttons and checkboxes.
Sighted humans are conditioned to scan top-to-bottom in a document (whether
printed or on screen).
If you place a series of radio buttons or checkboxes horizontally, the user
could skip past some of the options to the right, especially if there is a
wide gap of white space between them.
I just had this happen to me in an online form I filled out yesterday. Never
saw the other checkboxes on the far right of the screen because I didn't
scroll left/right in the browser.

Jakob Neilsen's group has some statistics to back up the top-to-bottom eye
movements if you need some official research on this.

-Bevi Chagnon

- PubCom.com - Trainers, Consultants, Designers, and Developers.
- Print, Web, Acrobat, XML, eBooks, and U.S. Federal Section 508
Accessibility.
- It's our 31st year!

From: Trafford, Logan
Date: Thu, Oct 04 2012 1:05PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

Thanks. That's essentially the argument I'm presenting but getting some resistance. The Neilson's stats may be exactly what I'm looking for.

Logan

From: Elle
Date: Thu, Oct 04 2012 1:12PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

Additionally, low-vision users benefit from having vertically stacked radio
buttons.



Thanks,
Elle



On Thu, Oct 4, 2012 at 3:05 PM, Trafford, Logan < = EMAIL ADDRESS REMOVED = >wrote:

> Thanks. That's essentially the argument I'm presenting but getting some
> resistance. The Neilson's stats may be exactly what I'm looking for.
>
> Logan
>
>

From: Trafford, Logan
Date: Thu, Oct 04 2012 1:14PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

Thanks Elle. Can you elaborate as to why.

From: David Farough
Date: Thu, Oct 04 2012 1:17PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

Also given the popularity of Mobil phones/browsers vertical is
definitely the way to go.
Low vision users that rely on screen magnification would also find the
vertical option preferable.

David Farough
Application Accessibility Coordinator/coordonateur de l'accessibilité
Information Technology Services Directorate /
Direction des services d'information technologiques
Public Service Commission / Commission de la fonction publique
Email / Courriel: = EMAIL ADDRESS REMOVED =
Tel. / Tél: (613) 992-2779

From: David Farough
Date: Thu, Oct 04 2012 1:23PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

If a user is using a high magnification value for their screen
magnification software, it may be necessary to scroll the screen to see
the text for buttons. People who use these programs often complain of
the need for excessive scrolling. If you need to scroll the text back
and forth to see everything, it can make you feel dizzy.

From: Bourne, Sarah (ITD)
Date: Thu, Oct 04 2012 1:35PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

I believe Luke Wroblewski did usability studies on radio button display, back in 2008 or so. I can't seem to quickly find the articles I remember, so perhaps it's in his book, Web Form Design: Filling in the Blanks (See http://www.lukew.com/resources/web_form_design.asp) (A colleague had this book, but she left and so did the book, so I can't check.)

sb

Sarah E. Bourne
Director of Assistive Technology &
Mass.Gov Chief Technology Strategist
Information Technology Division
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd

From: Elle
Date: Thu, Oct 04 2012 1:52PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | Next message →

Sure!

From what I understand and from witnessing it first hand in usability
testing, low-vision users typically orient themselves to the top and left
side of a web page. That's home base, as it were. Since it's customary to
see radio buttons stacked vertically on forms, that's an expected layout.
If you, as a low-vision user, have your screen magnified several times over
and you're filling out a form, you would benefit from having vertically
stacked radio buttons. If there are radio buttons are positioned
horizontally, you might miss one that's far off on the right side of the
page.

A couple of additional thoughts: Try to consider proximity when building
your forms, grouping all relevant information nearby, like placeholder
text, error messaging, disclaimer information. This also benefits mobile
users, too, for similar reasons, where screen real estate is very small.

Making websites more accessible for low-vision users has been a real focus
for our teams this year, so I'm really interested in the topic.


Hope that helps,
Elle




On Thu, Oct 4, 2012 at 3:14 PM, Trafford, Logan < = EMAIL ADDRESS REMOVED = >wrote:

> Thanks Elle. Can you elaborate as to why.
>
>

From: John Foliot
Date: Thu, Oct 04 2012 2:45PM
Subject: Re: radio buttons, vertical vs horizontal
← Previous message | No next message

Hi all,

I sometimes find that "visuals" help make the case. Have you tried coding up
examples of both (vertical vs. horizontal), then render in a browser, set
magnification to 200X and then take a screen capture? It sounds almost too
simplistic, but sometimes the ability to visualize the problem helps bring
it home for those who don't eat, sleep and breathe accessible web issues.

Just my $0.05 Canadian (Canada is phasing out pennies - yay!)

JF



>