Loading ...
Sorry, an error occurred while loading the content.

RE: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?

Expand Messages
  • Karr, David
    I completely agree that it s useful in many situations. It s certainly better than a checkbox on a toolbar, for instance. Making it the default presentation
    Message 1 of 9 , Apr 30 10:22 AM
    • 0 Attachment
      I completely agree that it's useful in many situations. It's certainly better than a checkbox on a toolbar, for instance. Making it the default presentation seems a bit odd, however.
       
      Why is this presentation easier for screen readers than a checkbox?
       
      Dav's "skinning" reply seems like a perfectly good way to get back the normal checkbox and radio button presentation, along with attractive styling (although the pushed in radio buttons aren't different enough from the unpushed ones).


      From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Eric Miraglia
      Sent: Wednesday, April 30, 2008 9:33 AM
      To: ydn-javascript@yahoogroups.com
      Subject: Re: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?

      David,


      Using button-style visualizations for this design pattern is something that's useful in a lot of situations.  The buttons on a Rich Text Editor's toolbar, in some cases, have the same function as a radio/checkbox form set but can be presented more intuitively and directly using styled buttons.  Button presentations are also frequently used for dashboard-style displays.

      We think about checkbox-buttons and radio-buttons as being alternative, intuitive presentations that

      1. can be styled,
      2. can progressively enhance form markup,
      3. can be used effectively by screen readers,
      4. provide some usability benefits for mouse users by providing larger click targets.

      I have not had your experience with users coming to such interfaces and experiencing the "surprise factor", but I'd be interested to know more about the users to whom that happened in your experience.

      Regards,
      Eric


      ____________ _________ _________ _________ _______
      Eric Miraglia
      Yahoo! User Interface Library



      On Apr 30, 2008, at 8:56 AM, Karr, David wrote:


      Yeah, all that is obvious, but why is it called a "checkbox button" when it's not a checkbox?  It "behaves like" a toggle button, so why isn't it called a "toggle button"?  Users know what a checkbox looks like, and this is not it. I also see that the radio button implementation is simply a set of exclusive toggle buttons ("checkbox buttons", as they are called), which also presents a "surprise factor" in an interface, which isn't a good thing.
       
      Is there some reason the YUI implementors chose not to use the conventional presentation of a checkbox and radio button?


      From: ydn-javascript@ yahoogroups. com [mailto:ydn- javascript@ yahoogroups. com]On Behalf Of Code Exploiter
      Sent: Tuesday, April 29, 2008 11:07 PM
      To: ydn-javascript@ yahoogroups. com
      Subject: Re: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?


      Hi David,


       

      The example here (link you've provided) is a button functions like an HTML checkbox (the term used is checkbox button), which means if you click a checkbox usually it will be checked like that in this case the element is a YUI button and it will be toggled to indicate that its been clicked (selected).

      -Codeexploiter


      --- On Tue, 29/4/08, Karr, David <david.karr@wamu. net> wrote:

      From: Karr, David <david.karr@wamu. net>
      Subject: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?
      To: ydn-javascript@ yahoogroups. com
      Date: Tuesday, 29 April, 2008, 11:32 PM

      This may be a stupid question, but why do YUI checkboxes look like
      toggle buttons?

      I'm looking at the "Button Control: Checkbox Buttons" page, at
      <http://developer. yahoo.com/ yui/examples/ button/btn_ example03. html>, and
      the checkbox components are all rendered as toggle buttons.

      Am I missing something?



      Bring your gang together. Do your thing. Find your favourite Yahoo! Group.



    • Karr, David
      That looks good. The pushed radio buttons aren t quite different enough from the unpushed ones, but I get the idea. ________________________________ From:
      Message 2 of 9 , Apr 30 10:23 AM
      • 0 Attachment
        That looks good.  The pushed radio buttons aren't quite different enough from the unpushed ones, but I get the idea.


        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Dav Glass
        Sent: Wednesday, April 30, 2008 9:47 AM
        To: ydn-javascript@yahoogroups.com
        Subject: Re: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?

        David --

        I did this examples a little while back:
        http://blog. davglass. com/files/ yui/buttonskins/

        Hope it helps ;)
        Dav

        Dav Glass
        dav.glass@yahoo. com
        blog.davglass. com

        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +

        ----- Original Message ----
        From: "Karr, David" <david.karr@wamu. net>
        To: ydn-javascript@ yahoogroups. com
        Sent: Wednesday, April 30, 2008 8:56:47 AM
        Subject: RE: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?

        Yeah, all that is obvious, but why is it called a "checkbox
        button" when it's not a checkbox? It "behaves like" a toggle button, so
        why isn't it called a "toggle button"? Users know what a checkbox looks
        like, and this is not it. I also see that the radio button implementation is
        simply a set of exclusive toggle buttons ("checkbox buttons", as they are
        called), which also presents a "surprise factor" in an interface, which isn't a
        good thing.

        Is there some reason the YUI implementors chose not to use
        the conventional presentation of a checkbox and radio
        button?

        ____________ _________ _________ __
        From: ydn-javascript@ yahoogroups. com [mailto:ydn-javascript@ yahoogroups. com] On Behalf Of Code Exploiter
        Sent: Tuesday, April 29, 2008 11:07 PM
        To: ydn-javascript@ yahoogroups. com
        Subject: Re: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?

        Hi David,

        The example here (link you've provided) is a button functions like an HTML checkbox (the term used is checkbox button), which means if you click a checkbox usually it will be checked like that in this case the element is a YUI button and it will be toggled to indicate that its been clicked (selected).

        -Codeexploiter

        --- On Tue, 29/4/08, Karr, David <david.karr@ wamu. net> wrote:

        From: Karr, David <david.karr@ wamu. net>
        Subject: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?
        To: ydn-javascript@ yahoogroups. com
        Date: Tuesday, 29 April, 2008, 11:32 PM

        This may be a stupid question, but why do YUI checkboxes look like
        toggle buttons?

        I'm looking at the "Button Control: Checkbox Buttons" page, at
        <http://developer. yahoo.com/ yui/examples/ button/btn_ example03. html>, and
        the checkbox components are all rendered as toggle buttons.

        Am I missing something?

        ____________ _________ _________ __
        Bring your gang together. Do your thing. Find your favourite Yahoo! Group.

      • Eric Miraglia
        David, What I hear you saying is that you d like to see a default skin that explicitly invokes the visual language of radio buttons and checkboxes -- working
        Message 3 of 9 , Apr 30 11:35 AM
        • 0 Attachment
          David,

          What I hear you saying is that you'd like to see a default skin that explicitly invokes the visual language of radio buttons and checkboxes -- working under the assumption that the visual language will make it more obvious to users what the behavior of the control will be.

          Seems reasonable.  Although we won't be changing Sam Skin in the near term, you can definitely leverage Dav's example (and Todd Kloots's CSS docs for Button -- http://developer.yahoo.com/yui/button/#cssref) to adapt Sam Skin.  

          If you develop a skin that's a big step forward, let us know and we'll look at including it as an example for others to use (if you're inclined to contribute it).

          Regards,
          Eric


          On Apr 30, 2008, at 10:22 AM, Karr, David wrote:


          I completely agree that it's useful in many situations. It's certainly better than a checkbox on a toolbar, for instance. Making it the default presentation seems a bit odd, however.
           
          Why is this presentation easier for screen readers than a checkbox?
           
          Dav's "skinning" reply seems like a perfectly good way to get back the normal checkbox and radio button presentation, along with attractive styling (although the pushed in radio buttons aren't different enough from the unpushed ones).


          From: ydn-javascript@ yahoogroups. com [mailto:ydn- javascript@ yahoogroups. com]On Behalf Of Eric Miraglia
          Sent: Wednesday, April 30, 2008 9:33 AM
          To: ydn-javascript@ yahoogroups. com
          Subject: Re: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?

          David,


          Using button-style visualizations for this design pattern is something that's useful in a lot of situations.  The buttons on a Rich Text Editor's toolbar, in some cases, have the same function as a radio/checkbox form set but can be presented more intuitively and directly using styled buttons.  Button presentations are also frequently used for dashboard-style displays.

          We think about checkbox-buttons and radio-buttons as being alternative, intuitive presentations that

          1. can be styled,
          2. can progressively enhance form markup,
          3. can be used effectively by screen readers,
          4. provide some usability benefits for mouse users by providing larger click targets.

          I have not had your experience with users coming to such interfaces and experiencing the "surprise factor", but I'd be interested to know more about the users to whom that happened in your experience.

          Regards,
          Eric


          ____________ _________ _________ _________ _______
          Eric Miraglia
          Yahoo! User Interface Library



          On Apr 30, 2008, at 8:56 AM, Karr, David wrote:


          Yeah, all that is obvious, but why is it called a "checkbox button" when it's not a checkbox?  It "behaves like" a toggle button, so why isn't it called a "toggle button"?  Users know what a checkbox looks like, and this is not it. I also see that the radio button implementation is simply a set of exclusive toggle buttons ("checkbox buttons", as they are called), which also presents a "surprise factor" in an interface, which isn't a good thing.
           
          Is there some reason the YUI implementors chose not to use the conventional presentation of a checkbox and radio button?


          From: ydn-javascript@ yahoogroups. com [mailto:ydn- javascript@ yahoogroups. com]On Behalf Of Code Exploiter
          Sent: Tuesday, April 29, 2008 11:07 PM
          To: ydn-javascript@ yahoogroups. com
          Subject: Re: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?


          Hi David,


           

          The example here (link you've provided) is a button functions like an HTML checkbox (the term used is checkbox button), which means if you click a checkbox usually it will be checked like that in this case the element is a YUI button and it will be toggled to indicate that its been clicked (selected).

          -Codeexploiter


          --- On Tue, 29/4/08, Karr, David <david.karr@wamu. net> wrote:

          From: Karr, David <david.karr@wamu. net>
          Subject: [ydn-javascript] Why do YUI checkboxes look like toggle buttons?
          To: ydn-javascript@ yahoogroups. com
          Date: Tuesday, 29 April, 2008, 11:32 PM

          This may be a stupid question, but why do YUI checkboxes look like
          toggle buttons?

          I'm looking at the "Button Control: Checkbox Buttons" page, at
          <http://developer. yahoo.com/ yui/examples/ button/btn_ example03. html>, and
          the checkbox components are all rendered as toggle buttons.

          Am I missing something?



          Bring your gang together. Do your thing. Find your favourite Yahoo! Group.






        • MikeHatfield
          Apologies for a small thread-hijack, but does the YUI team have any more details documentation on creating skin files? I m trying to recreate the sam
          Message 4 of 9 , Apr 30 1:27 PM
          • 0 Attachment
            Apologies for a small thread-hijack, but does the YUI team have any more details
            documentation on creating skin files?

            I'm trying to recreate the sam distribution and am having trouble matching it using just
            the yui-compressor.

            Please see message #29994 for details.

            Many thanks,
            Mike

            --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
            >
            > David,
            >
            > What I hear you saying is that you'd like to see a default skin that
            > explicitly invokes the visual language of radio buttons and checkboxes
            > -- working under the assumption that the visual language will make it
            > more obvious to users what the behavior of the control will be.
            >
            > Seems reasonable. Although we won't be changing Sam Skin in the near
            > term, you can definitely leverage Dav's example (and Todd Kloots's CSS
            > docs for Button -- http://developer.yahoo.com/yui/button/#cssref) to
            > adapt Sam Skin.
            >
            > If you develop a skin that's a big step forward, let us know and we'll
            > look at including it as an example for others to use (if you're
            > inclined to contribute it).
            >
            > Regards,
            > Eric
            >
            >
            > On Apr 30, 2008, at 10:22 AM, Karr, David wrote:
            >
            > >
            > > I completely agree that it's useful in many situations. It's
            > > certainly better than a checkbox on a toolbar, for instance. Making
            > > it the default presentation seems a bit odd, however.
            > >
            > > Why is this presentation easier for screen readers than a checkbox?
            > >
            > > Dav's "skinning" reply seems like a perfectly good way to get back
            > > the normal checkbox and radio button presentation, along with
            > > attractive styling (although the pushed in radio buttons aren't
            > > different enough from the unpushed ones).
            > >
            > > From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com
            > > ]On Behalf Of Eric Miraglia
            > > Sent: Wednesday, April 30, 2008 9:33 AM
            > > To: ydn-javascript@yahoogroups.com
            > > Subject: Re: [ydn-javascript] Why do YUI checkboxes look like toggle
            > > buttons?
            > >
            > > David,
            > >
            > >
            > > Using button-style visualizations for this design pattern is
            > > something that's useful in a lot of situations. The buttons on a
            > > Rich Text Editor's toolbar, in some cases, have the same function as
            > > a radio/checkbox form set but can be presented more intuitively and
            > > directly using styled buttons. Button presentations are also
            > > frequently used for dashboard-style displays.
            > >
            > > We think about checkbox-buttons and radio-buttons as being
            > > alternative, intuitive presentations that
            > >
            > > can be styled,
            > > can progressively enhance form markup,
            > > can be used effectively by screen readers,
            > > provide some usability benefits for mouse users by providing larger
            > > click targets.
            > >
            > > I have not had your experience with users coming to such interfaces
            > > and experiencing the "surprise factor", but I'd be interested to
            > > know more about the users to whom that happened in your experience.
            > >
            > > Regards,
            > > Eric
            > >
            > >
            > > ______________________________________________
            > > Eric Miraglia
            > > Yahoo! User Interface Library
            > >
            > >
            > >
            > > On Apr 30, 2008, at 8:56 AM, Karr, David wrote:
            > >
            > >>
            > >> Yeah, all that is obvious, but why is it called a "checkbox button"
            > >> when it's not a checkbox? It "behaves like" a toggle button, so
            > >> why isn't it called a "toggle button"? Users know what a checkbox
            > >> looks like, and this is not it. I also see that the radio button
            > >> implementation is simply a set of exclusive toggle buttons
            > >> ("checkbox buttons", as they are called), which also presents a
            > >> "surprise factor" in an interface, which isn't a good thing.
            > >>
            > >> Is there some reason the YUI implementors chose not to use the
            > >> conventional presentation of a checkbox and radio button?
            > >>
            > >> From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com
            > >> ]On Behalf Of Code Exploiter
            > >> Sent: Tuesday, April 29, 2008 11:07 PM
            > >> To: ydn-javascript@yahoogroups.com
            > >> Subject: Re: [ydn-javascript] Why do YUI checkboxes look like
            > >> toggle buttons?
            > >>
            > >>
            > >> Hi David,
            > >>
            > >>
            > >>
            > >> The example here (link you've provided) is a button functions like
            > >> an HTML checkbox (the term used is checkbox button), which means if
            > >> you click a checkbox usually it will be checked like that in this
            > >> case the element is a YUI button and it will be toggled to indicate
            > >> that its been clicked (selected).
            > >>
            > >> -Codeexploiter
            > >>
            > >>
            > >> --- On Tue, 29/4/08, Karr, David <david.karr@...> wrote:
            > >>
            > >> From: Karr, David <david.karr@...>
            > >> Subject: [ydn-javascript] Why do YUI checkboxes look like toggle
            > >> buttons?
            > >> To: ydn-javascript@yahoogroups.com
            > >> Date: Tuesday, 29 April, 2008, 11:32 PM
            > >>
            > >> This may be a stupid question, but why do YUI checkboxes look like
            > >> toggle buttons?
            > >>
            > >> I'm looking at the "Button Control: Checkbox Buttons" page, at
            > >> <http://developer. yahoo.com/ yui/examples/ button/btn_ example03. html
            > >> >, and
            > >> the checkbox components are all rendered as toggle buttons.
            > >>
            > >> Am I missing something?
            > >>
            > >>
            > >> Bring your gang together. Do your thing. Find your favourite Yahoo!
            > >> Group.
            > >>
            > >>
            > >
            > >
            > >
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.