Hi Lucien,

The first thing that occurs to me regarding the semantics of the
action is what is the Yes/No proposition in regards to, and that this
might provide a clearer notion as to what to do.

By this what I mean is, in the first instance so far as semantic mark
up is concerned it would appear that a radio button is exactly what
you would use. Here it is a case of either on or off. Yes or no.

However the first thing I thought of, and I suppose this is in more
regards a UI/UX consideration is the design pattern we see with
webmail clients and the "Remember me" check box.

So returning to the first point, are you simply asking for a Yes/No
action or like the "Remember me" function a call to action with an
Option Yes or Option No result? In which case your question might be
rephrased by improving the microcopy of your markup. Instead of "Do
you..?" the semantics are improved by fixing the proposition, ie;
"Remember me for 2 weeks" - tick on = Yes, un-ticked = No, or another
example, rather than "Would you like to receive our email newsletter?"
radio buttons Yes/No, checkbox pre-selected followed by "Uncheck if
you would not like to receive our email newsletter."

In addition to my thoughts I had a look into the Robert Hoekman Jr
book "Designing the Obvious" and in Chapter 16 about Simplifying Long
Forms he cites an example that begins with a series of Yes/No
propositions that given further consideration can be better addressed
by better directed questions and ultimately checkboxes. If you have a
Safari Books Online account you can access this book, or at the least
here is a link to his presentation at Web Directions in 2008;
http://www.webdirections.org/resources/robert-hoekman-jr/ which
contains links to his book on Amazon and an introduction to his
approach.

But I'll try and quickly summarise it for you. Original form starts -
"Do you...have any Group Medical, Dental or Vision coverage..with Acme
Insurance" = Radio Button Yes/No.
Second iteration - "Do you...have any Group Medical, Dental or Vision
coverage..with Acme Insurance" = Radio Button Yes, then checkbox's for
Medical, Dental, Vision - Radio Button No.
Third iteration - Do you...have any Group Medical, Dental or Vision
coverage..with Acme Insurance" = checkbox's for Medical, Dental,
Vision - implied is if you don't check any, you would of selected No.

So to sum up, before it's a question of which is the best markup to
use, what is the actual end result of this action and can it be
handled a better way?

Cheers,
John Unsworth



On 4 June 2010 12:29, nedlud <ned...@gmail.com> wrote:
> I have a web form I'm building and there is a simple yes/no question in it.
> I got to wondering what the best semantic  mark up for this is? Does anyone
> have any good UI/UX suggestions?
> My three ideas were...
> Two radio buttons for "yes" and "no"...
> <p>Do you...?</p>
> <label for="ans-yes">Yes</label><input type="radio" name="ans" id="ans-yes">
> <label for="ans-no">No</label><input type="radio" name="ans" id="ans-no">
> A single check box. A tick implies a "yes" answer while no tick implies
> "no"...
> <p>Do you...?</p>
> <input type="checkbox" name="ans" id="ans">
> Or a selection list with a "yes" and a "no" answer...
> <p>Do you...?</p>
> <select name="ans" id="ans">
>    <option value="yes">Yes</option>
>    <option value="no">No</option>
> </select>
> Which is the preferred way? Or can you suggest a better way?
> Lucien.
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> *******************************************************************


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************

Reply via email to