Positive feedback

9 March 2005

40 comments

A Blue Perspective: Positive feedback

The other day when I was doing the usual post-entry ping run on the extremely useful Ping-O-Matic, I noticed the subtlest interface touch that struck me as a great example of how to educate your users about a system's behaviour.

When deciding which services to ping, you have a list of checkboxes to select, and as you hover over the labels they highlight. Yes, that's it.

I know it's something small, but after I decided to code accessible forms on websites, I've been amazed at the number of people who express both surprise and delight at being able to click on the labels for radio buttons and checkboxes. It makes a great deal of sense – a bigger target is easier to hit – and in most traditional applications the label text is also part of the click target. However, the expectation on the Web – due to a decade of inappropriate coding – is that you have to get your mouse onto that tiny square/circle before you can click it.

Taking a cue from the things that we do everyday on menus, Ping-O-Matic's interface feedback is the perfect way to combat those misspent years and let people know that it's a whole lot easier to click on checkboxes. (Even if generic :hover events don't work in Internet Explorer, but I can think of eight lines of JavaScript that can fix that if you're desperate.)

By the way, does anyone else think that anything that's clickable should have the hand cursor come up?

This was not a paid entry by Ping-O-Matic or its subsidiaries. :o]

Categories

,

Comments

  1. 1/40

    nick commented on 9 March 2005 @ 01:33

    i think Ping-o-Matic did good with the colour changing while moveing your mouse over a label element, but they would have done even better if they changed the cursor type to pointer :)

    and finally, i want to point out to stopdesign's web site where Mr. Bowman (imho) has done a great job with form elements styling (while not viewing the site through msie :))

  2. 2/40

    Remi P. commented on 9 March 2005 @ 01:55

    I think that everything that's clickable should have the hand cursor come up, or at least, something to indicated that the item can be clicked, like the ping-o-matic radio buttons.

    But I prefer the hand cursor :-)

  3. 3/40

    Dougal Campbell commented on 9 March 2005 @ 02:20

    Hmmm... To me, the hand cursor means "this is a link". So I don't feel it's appropriate for indicating other reasons for clickability (I'm trademarking that word). But switching to one of the other cursor types for form elements is a good idea.

    Maybe I can work on that after Matt sends me the info I need to login to the new server.

  4. 4/40

    fambi commented on 9 March 2005 @ 02:51

    I agree with Remi, everything that's clickable should have the hand cursor come up.

  5. 5/40

    Unearthed Ruminator commented on 9 March 2005 @ 03:07

    If it isn't obvious that you can click on something, then the cursor should change.

  6. 6/40

    Julian commented on 9 March 2005 @ 03:28

    It's just extremly cool to have a hand curser when you hover over the labels and you can click on them to select the checkbox. It gives you the feeling of "there is more than plain text" and that's what the web should be: more than text.

  7. 7/40

    Mike commented on 9 March 2005 @ 03:36

    You bring up a good point about seeing a cursor change on clickable elements in forms but Dougal (comment #3) raises an equally valid point. Hand cursors are usually used for links not form elements.

    Another thing to look at is how forms are currently handled in the terms of cursor changes. If you look at how forms are now, there are no cursor changes when you click on the radio buttons, checkboxes or even the submit or reset buttons. People still know they are suppose to click on it but they get no visual feedback. Does that mean these items should be changed as well? Or, are we just concerned with showing visual feedback for the elements that people are not used to clicking (eg. labels)?

  8. 8/40

    cboone commented on 9 March 2005 @ 04:07

    What seems certain is that the cursor shouldn't change to a text-selection cursor when you hover over something that is clickable. (Which is what happens on Ping-O-Matic.) That's just confusing.

    I think the hand cursor is useful because it indicates a certain type of clickability -- click here and you'll go someplace -- and because it indicates that this style of text is special -- which is all the more true now that so many different ways of styling links are popular.

    So perhaps form elements that take you somewhere or might otherwise not appear clickable should get the hand; radio buttons and checkboxes shouldn't.

  9. 9/40

    Jonathan Fenocchi commented on 9 March 2005 @ 05:03

    I think that the web designer should be able to choose in what instances something that is clickable should have the "pointer" cursor. For example, on some sites, you might want the "text" cursor for text fields, while on other sites, you may want the "pointer" cursor on them. It all depends on the designer, but the capability should be available in all cases.

  10. 10/40

    Matt commented on 9 March 2005 @ 08:00

    What browser are you in that shows the text bar when over the labels? Here in Firefox it shows a regular pointer.

  11. 11/40

    Andrew K. commented on 9 March 2005 @ 11:26

    ++1 for cursor:pointer;
    I use it on all my submit buttons and am yet to have a complaint...

  12. 12/40

    Adam commented on 9 March 2005 @ 12:47

    I actually devised a similar method for the extreme usability case.

    In my design when you hover over the label (which contains a child input node) the label background highlights (thus including the child and creating the visual link between the two elements).

    In addition to this is an icon which appears on the right hand of the input element displaying the fields purpose.
    ie. For a text field an animated icon shows text being typed, a password field shows masked text being typed, radios show a mouse pointer clicking the radio and its checked ... and so on

  13. 13/40

    Matt Hampel commented on 9 March 2005 @ 14:22

    A cursor change is a good thing!
    In my forms, I surround each label/input combo in a div and set the onhover cursor of the label to be 'pointer' and the background color of the related input field to be a different color.

  14. 14/40

    ad commented on 9 March 2005 @ 19:32

    A hand cursor would tell me that I'm going to follow a link, which I don't want to do if I'm filling out a form. At best I would anticipate a javascript pop-up window with more information about that particular field. So I would aim for the checkbox.

    I agree with clickable labels (except for submit elements - where they actually submit the form) - but think anything to do with form elements or that type of application-level interface should avoid the "hyperlink" cursor, and stick to desktop interaction patterns.

  15. 15/40

    marko commented on 9 March 2005 @ 23:30

    "(Even if generic :hover events don't work in Internet Explorer, but I can think of eight lines of JavaScript that can fix that if you're desperate.)"

    Just a small contribution:

    <!--[if IE]>
    <script type="text/css">
    function hoverLabels() {
        if (document.getElementById && document.createTextNode) {
            var labels = document.getElementsByTagName('label');
            for (i = 0; i < labels.length; i++) {
                labels[i].onmouseover = function() { this.className = 'hovered'; }
                labels[i].onfocus = function() { this.className = 'hovered'; }
            }
        }
    }
    window.onload = function() { hoverLabels(); }
    &#60;/script&#62;
    &#60;![endif]--&#62;

  16. 16/40

    marko commented on 9 March 2005 @ 23:36

    OT: I would really love to see some WYSIWYG option which will allow me to write code snippets : )

  17. 17/40

    Cameron Owen commented on 10 March 2005 @ 13:22

    I disagree with the notion that all "clickable" elements should use the hand cursor.

    In an application context this is rarely the case, and as most application level UI logic is built on many years of good practice, this is for form we should be following when it comes to the web.

    Resizing a window uses specific cursors because there is usually no UI element to indicate that the action can be performed. Respectively, application menus use the default pointer cursor as the menus themselves are interactive UI elements. Their function is obvious through the context of the UI and the menu item text itself.

    Since the introduction of CSS and cursor control these pre-existing models have been eroded somewhat. A hypertext link traditionally used a cursor change because the act of interfacing with the link was completely static. Sure it was blue and had an underline, but users not accustomed to interfacing with such an element might not know that this meant it was a UI element of some sort, thus the cursor change.

    Should should be at least some form of interactive change to indicate the presence of a UI element, but I think there should only be a cursor change if the UIs intent isn't obvious enough. Could you imaging how annoying it'd be if your cursor changed to a little hand every time you hovered over a menu, icon, form control or scroll bar? flick.. flick... flick... bloody hell, how do I switch that off ??!!

    Furthermore, I personally dislike that most user agents use the 'I bar' cursor when hovering over text. I know text should be selectable, but the I bar was traditionally only used to indicate 'editable' text. In this regard editable text fields in web forms have lost a certain amount of context as a result. IMHO, Opera is the only user agent to get this right.

  18. 18/40

    Steven Hayter commented on 12 March 2005 @ 21:46

    I definately think changing the cursor would be a bad thing, it's not so much an improvement upon what everyone does, but a inconsistancy with what the users normal expectations are of the user interface.

    I'm fairly indiferent to the caret cursor for selectable but not editable text, though a pointer would probably allow for some better speedreading :)

  19. 19/40

    Tatham Oddie commented on 20 March 2005 @ 13:06

    Whil I like the idea of having the labels and form elements hilight together, it scares me a bit how they've wrapper the whole input in the label:

    <label>blah <input></input></label>

    Is that valid?

  20. 20/40

    The Man in Blue commented on 20 March 2005 @ 17:37

    Re: #19

    It is indeed valid, and helps when you have to style labels and inputs together.

  21. 21/40

    Hunox commented on 23 March 2005 @ 14:41

    I noticed this too a while ago and was thinking to implement it on the next "form intense" website as well. IMO it should not have a hand cursor, because hovering over the checkbox itself does not bring up a cursor. If I would see a hand over the checkbox text, I'd think it's a link to checkbox description that was styled not to be underlined.

  22. 22/40

    Paul commented on 23 March 2005 @ 17:27

    I agree with Remi, everything that's clickable should have the hand cursor come up

  23. 23/40

    Vitaly Friedman commented on 13 April 2005 @ 16:54

    I also agree with Remi and Paul. I guess I have to re-build my homepage... It just seems more... usual that the elements, which are supposed to be clickable, appear as clickable elements. Still, it doesn't matter whether it is a hand cursor or something else. And that's the point for me. Just a thought, though.

    With warm greetings from Germany, Saarbrücken,
    Vitaly Friedman,
    http://www.alvit.de/vf/

  24. 24/40

    zjuopsui commented on 17 June 2010 @ 09:26

    RlXQPM <a href="http://wqduuquyxymu.com/">wqduuquyxymu</a>, [url=http://hmihlreavjec.com/]hmihlreavjec[/url], [link=http://idrcmmemehqi.com/]idrcmmemehqi[/link], http://qborpeknaemj.com/

  25. 25/40

    cfofrzwwnel commented on 22 March 2011 @ 21:06

    4xLRHT <a href="http://gaoxpsjnjnsi.com/">gaoxpsjnjnsi</a>, [url=http://eubevlrlphtu.com/]eubevlrlphtu[/url], [link=http://usjesifmkluw.com/]usjesifmkluw[/link], http://xqfsfjokgvix.com/

  26. 26/40

    txcwptfrppz commented on 23 March 2011 @ 05:26

    bpCw1D <a href="http://oiebccqtqjmb.com/">oiebccqtqjmb</a>, [url=http://zmewrwasihbh.com/]zmewrwasihbh[/url], [link=http://jhbxyzviylsj.com/]jhbxyzviylsj[/link], http://pojksulvhjfl.com/

  27. 27/40

    smcqfhauqbx commented on 23 March 2011 @ 08:37

    wUkpos <a href="http://nqvplbyqmkzp.com/">nqvplbyqmkzp</a>, [url=http://xzstccilvuvo.com/]xzstccilvuvo[/url], [link=http://actmngyblvfj.com/]actmngyblvfj[/link], http://camtnwnssabs.com/

  28. 28/40

    gfierct commented on 23 March 2011 @ 11:27

    snsWpQ <a href="http://mjukugktabyo.com/">mjukugktabyo</a>, [url=http://xttlnmbptwsn.com/]xttlnmbptwsn[/url], [link=http://zdxaxkkebned.com/]zdxaxkkebned[/link], http://xvkdqruftthc.com/

  29. 29/40

    hrnbqrjphxl commented on 23 March 2011 @ 14:21

    jyBo8O <a href="http://bdcabttxluld.com/">bdcabttxluld</a>, [url=http://otxsvruprslk.com/]otxsvruprslk[/url], [link=http://fugstkmnxdbn.com/]fugstkmnxdbn[/link], http://gcxukwqhvlwr.com/

  30. 30/40

    Shanna commented on 20 May 2011 @ 20:46

    That's 2 clveer by half and 2x2 clever 4 me. Thanks!

  31. 31/40

    Jacalyn commented on 21 May 2011 @ 04:26

    Thank God! Someone with bairns speaks!

  32. 32/40

    Brenley commented on 21 May 2011 @ 15:22

    Glad I've finally found somehintg I agree with!

  33. 33/40

    Gytha commented on 21 May 2011 @ 16:22

    Posts like this brgithen up my day. Thanks for taking the time.

  34. 34/40

    Sugar commented on 5 July 2011 @ 13:27

    Hey, good to find someone who argees with me. GMTA.

  35. 35/40

    Irin commented on 26 August 2012 @ 15:06

    Gosh I get so confused when etdiing pictures I'm lucky I get any loaded. I change my sizes in the online program (Flickr) and have never used photoshop. One of these days I really need to learn because it seems you can do so much. I think I was maybe doing it the hard way with Picasa as I'd upload the pic then go get the code from Picasa and make it large. Now I do that on Flicker but it's odd that Flickr makes the pics larger. You asked about my template. It is Minima stretch. An old template and the only one I've used since I started the blog. I find it simply enough for me as I'm not too tech savvy and hate messing with it. I could never get my header photo right then Marnie sent me the code from her Minima and it worked. I've been good with it since. Your orchid is a real beauty. I do like the large pics.

  36. 36/40

    Lohith commented on 26 August 2012 @ 20:21

    My pictures are big like eveonrye elses for clarity and printing.The saved pics I might use for blogger are sized down(smaller file) to the exact size needed for my blog before uploading to blogger.Paint which I think eveonrye has lets you size down very quickly. I use Photoshop for other stuff.Yes, the method I showed won't get shrunk by blogger.Just use the highlighted red or blogger will shrink picture. What ever size you made your photo before uoloading will stay exactly the same.Maybe I should edit post to make clearer.

  37. 37/40

    Daniel commented on 27 August 2012 @ 00:16

    This was useful. I have to keep chcneikg back for your tips. With WP, I just size before upload, them scale down from there. I always prepare them for the web through Photoshop to make the file smaller and keep the image as large as possible. With my magazine, they are always larger files though. The img src line is the size you upload, right, then this keeps Blogger from shrinking them?

  38. 38/40

    Sangeeta commented on 27 August 2012 @ 02:46

    Rarely edit to much time. That is odd about Flicker but a luckly thing. When I plug the flash card into the coumtper I have choices where to upload (I use Picture verses lets say Documents etc.. Then resize and save in same folder and up load to blog.I like the Mimima (no borders on the side). Have to check back for the code to center header.Thanks Tina.

  39. 39/40

    Sheetal commented on 27 August 2012 @ 05:45

    I don't know about your sprouts but I have antoehr question regarding tubers. We had a late frost (September 29). We cut our plants back and have let them set until today. While washing the dug tubers, the skin seems to be very tender. The water pressure is removing some of the skin. Will these tubers keep over winter?

  40. 40/40

    qxuxksnya commented on 24 July 2014 @ 19:15

    Awt0wk <a href="http://uygbrvqnhvwd.com/">uygbrvqnhvwd</a>, [url=http://ukrmnxqaehdf.com/]ukrmnxqaehdf[/url], [link=http://icwooqykffnf.com/]icwooqykffnf[/link], http://vbdzldggfefz.com/

  41. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed