SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    EXTRA EXTRA!! "DeSIGNERS" REMAIN DETERMINED

    Arg.
    http://laurakalbag.com/labels-in-inp...h-a-good-idea/

    Here is a step-by-step set of examples, with screenshots, of why using placeholders (we don't care if they are HTML5 or JS or fancy CSS) instead of labels outside inputs is retardation and hateses the users, hateses them.

    My current company is doing this right now, with e-commerce. Joy. I'm not allowed to change it. More joy. I should just shoot myself now.

    This is pretty much more of the same: other usability articles have shown users doing the same thing over and over: they doubt or wonder about whether they've put the correct data into the input, and must remove it to be certain. I imagine this must be very hard for the "did I leave the oven on?" OCD crowd.

    Hell, users will doubt and wonder just based on the size of the input: if it's that big, I might have misread the label when I put in only 3 letters... maybe I should re-read it or think about it some more... and how do I fill out "Prefix:"? What's a prefix? Something on my name??

    Luckily this craptastic trend in placeholders-make-damn-sexy-labels can help increase form abandonment, which is a good thing: anyone who cares more about graphics in their forms than that they work right for our Lowest Common Denominator (who we build forms for) probably didn't want us retards filling them out anyways.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, you see a lot or morons misusing place-holders instead of an actual LABEL they have two completely different purposes. Totally brilliant (not) once you've started typing input into the box (using place-holder but no LABEL) you don't have a clue what the INPUT box was supposed to be for in the first place. Hmm, leaving you to delete what you've just entered to try and recall if blank input box two was anything to do with your password or not.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by robert
    you don't have a clue what the INPUT box was supposed to be for in the first place
    Ah, but you DO. Simply read the placeholder before focusing on it. And then remember it.

    If you can't remember 10 or so inputs, there must be something wrong with you. You probably shouldn't be using the internets; they're clearly too hard for you. And my grandma. And the average Christmas shopper. And everyone else.


    Developers are smart, though, and they don't see why people can't just remember what the input was for. I mean, the label--- placeholder was there just a second ago. Are users goldfish?









    (answer: yes, we are goldfish)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I have the same problem with forgetting what the input was for, or doubting that I'm entering the right info (as the only clue was in the placeholder). The only partial solution I've found is to insert pins into my voodoo doll and wish that bad luck befall the designer. (It makes me feel better, but still doesn't help me remember what the placeholder said, unfortunately. )

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Here's your new shiny inaccessible; placeholder, no LABEL form:

    Code:
    : 18__________
    
    : !___________
    
    : 200_________
    A mystery prize will be given out to the person who can figure-out what the three placeholders said; the text in pink is the users input response... >;-)

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by robert
    A mystery prize will be given out to the person who can figure-out what the three placeholders said;
    I shall win this prize! I will simply empty the fields and move my focus elsewhere!

    (you should be hearing my text in your head in the voice of The Tick.)

    SPOOOOOOOON!

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ahem. I am a designer and would never use a placeholder as a label. It doesn't even make sense to me ( tho I have had clients who have thought this way). perhaps if the UA used"example:" as a default leader the role of placeholder might be better understood.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I skimmed that article. Does this demo not take care of most of those concerns? With js off the labels are put above the inputs too. http://www.visibilityinherit.com/cod...label-demo.php

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No, not really when JavaScript is turned on, once I have entered input you'll get the same as in my NetHack Shopping demo post #5 no visual indication of what the input box was for...

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yes but then when focus leaves that input the label returns

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Yes but then when focus leaves that input the label returns
    I think the whole point is that, there being no label while you are typing, doubt can arise about what the input was for, if you're typing the right things, etc. The only way to find out is to abort, which isn't great.

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Though [label] didn't return in my browser after data was entered; the label should be visible (basically at all times) so long as the input box is in a functional/editable state (or the page is being displayed).

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Basically, users will skim over forms they have filled in, before the dreaded hitting of the submit button. We do it with paper forms too, but we can actually measure real living human beings doing it on web forms because of the eyetracking usability research, which for some reason either isn't popular with printed materials, or maybe is just too hard to measure there?

    A search or two-input login is probably okay. E-commerce form with 10 or more questions? No way. Always show some kind of label so users can double, triple and quaduple check that what they have filled in matches what is asked.

    This is double important when you are sending back error messages in your form validation: do not remove what they have typed in, but highlight it or point out that it is incorrect, tell them why and how it is incorrect, how they can fix it, and here a label is of utmost importance. For some questions I would imagine if someone got it wrong once, add some sort of additional hint on validation, like an example (the kind of thing placeholders were meant for, but of course we can go further: pictures can be quite awesome. I've seen them now for credit cards (both the numbers in the front *AND* the so-called security number in the back) and licence plates (which my own company used to great effect).

    Once, when I worked in the medical industry, we had a (paper) form that asked for a number on a pass. The name of the pass was pretty standard from hospital to hospital, but still too many people had no idea which pass this was (some folks had separate passes from their insurance companies, from their doctors, and their specialists). A pic of our pass helped a lot.

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If a field doesn't say what it is for then just turn off JavaScript on that page and enter whatever you like in the field.

    Chances are if they are stupid enough to not label the field properly then they are probably relying exclusively on JavaScript for validation as well and you will get away with whatever input you like.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    felgall: turning of Javascript does not bring in an non-existent label, nor does it turn off HTML5 placeholders.

    I believe most forms should have Javascript validation, not to validate the data, but to help users get their info correct before the server validates.

    Chances are if they are stupid enough to not label the field properly...
    Nah, you can have a dumb front-ender and a decent back-ender working on the same project :)

  16. #16
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Ah, but you DO. Simply read the placeholder before focusing on it. And then remember it.

    If you can't remember 10 or so inputs, there must be something wrong with you. You probably shouldn't be using the internets; they're clearly too hard for you. And my grandma. And the average Christmas shopper. And everyone else.

    Developers are smart, though, and they don't see why people can't just remember what the input was for. I mean, the label--- placeholder was there just a second ago. Are users goldfish?

    (answer: yes, we are goldfish)
    Chrome, Safari and Firefox do keep the placeholder value even when the input has focus.
    I'm actually abusing inputs and placeholders in far worse ways than this.

    Firstly, I like making inputs look like they're not inputs at all.
    Second, I like to prefill the first field with the value of the placeholder and then select the text, it prompts action and I like the look of it.
    http://dabblet.com/gist/4370776

    Users didn't get it at first, but they'll learn
    Trying new things, even when they're problematic is a good thing.

  17. #17
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Peterborough, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree that labels and placeholders are the way to go. Some projects might allow flexibility and audience, function and form should dictate your way forward. But I do think that a large majority of forms should use BOTH labels and placeholders unless there is a very compelling reason for change. Certainly design alone is a very foolish reason.

    Users didn't get it at first, but they'll learn
    Trying new things, even when they're problematic is a good thing.
    I'm not sure confusing your audience and expecting them to learn for the sake of a design choice is a good idea. In fact, I think it's a design flaw. You'll find abandonment far more often than conformity. Whatever you've built, there's alternatives to it. Visitors give you seconds (if you're lucky), and wracking their brains to figure out what you're trying to communicate isn't what they're interested in doing with that time! When I encounter difficult forms, I give up and go somewhere else. It's the number one reason why I abandon shopping carts!

  18. #18
    SitePoint Guru bronze trophy TomB's Avatar
    Join Date
    Oct 2005
    Location
    Milton Keynes, UK
    Posts
    989
    Mentioned
    9 Post(s)
    Tagged
    2 Thread(s)
    Yeah I hate this trend as well, it's really horrible user-experience. I think it's perfectly acceptable on username/password boxes especially if you label the submit button "log in" as there are only two fields and people are so used to them.

    Or instances such as "Search" with a single field, provided the button is in obvious proximity to the field explains the form then it's perfectly acceptable. Anything other than these is ridiculous. I don't know why anyone thinks this is a good idea.

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by tomB
    I don't know why anyone thinks this is a good idea.
    I'm not sure anyone thinks it's a good idea. I think everyone knows it's beautiful and forms are horribly dull and usually fugly too. Like camels.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Quote Originally Posted by Stomme poes View Post
    forms are horribly dull and usually fugly too. Like camels.
    Aw, camels is bootiful ...

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:





  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Aw, what a cutie! (And it's clear what all the inputs are, even without labels.)

    Photos don't do camels justice, though, because you can't smell their breath ...

  23. #23
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    I once coded a design which had placeholder text, so I would have to hold my hands up to doing this. Mine was more to guide the user, rather than be used as labels. In such an example I do not think I did anything particularly wrong.

    I do not see it as a huge issue however, I guess it all depends on the fields themseves. For instance, name, followed by email are two fairly easy. More complex areas, like a complete form with address, email, name, contact numebers etc.. are more likely to have the user trip up on where they are. Worse case scenario, they deselect the box and have their placeholder text reappear.

    On a more pressing issue I have seen forms were the placeholder text completely disappears, and does not reappear after deselection, such examples would be highly unusable.

    As things become responsive (320px width), it's likely that people will be wanting to use placeholder as labels. It's hard to ignore that it saves space.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  24. #24
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You can save even more space by removing most of the content from your web page as well.

  25. #25
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    You can save even more space by removing most of the content from your web page as well.
    hehehe.... and some do just that! But in the end it's arguable on why the content is there in the first place if it's simply going to be removed on a 320px width display.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •