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

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

Expand Messages
  • 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 1 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 2 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.