9

I was looking for alternatives to the use of captcha due to its annoyance to users especially because they're getting more and more difficult to solve for us, the humans. So I found out that a possibly good solution would be to use a honeypot captcha - a field that's supposed to left blank - and to hide it from users, to make sure they don't fill it in.

So my real question here is:

From a User Experience perspective, what, of the following options, is the best solution to achieve this or is there a better way and why?

  • Use display:none;
  • Color the fields the same (or very similar to) the background color.
  • Use positioning to move a field off of the visible area of the page.
  • Make an element too small to show the contained honeypot field.
  • Leave the fields visible, but use positioning to cover them with an obscuring element.
  • Use JavaScript to effect any of these changes.
  • Leave the honeypots displayed but tell people not to enter anything into them.
5
  • I think some bots are getting smart to many techniques. Especially display:none. I'd probably go with positioning off-screen to the left (not off to the top/bottom as that can screw with scrolling and position of page on-load, I believe) and some others of these options too. Not just picking one option. You'll also still need a label on it for screenreaders even if it's off screen.
    – JonW
    Feb 25, 2014 at 12:05
  • 3
    I don't mind these questions personally but isn't this a programming question aimed for a programming forum? Feb 25, 2014 at 12:40
  • The honeypot field concept seems flawed to me - A user that fills in a form once, can then fill in the same fields automatically with different details using a script and ignore honeypot fields automatically. I do hate the captchas though, especially the onces combined with an error message under the captcha even if the mistake is elsewhere. Feb 25, 2014 at 13:00
  • 4
    @HenrikEkblom: Provided the answers focus on how it impacts the end-user rather than how to implement it then it's on-topic for this site. It's the sort of question a developer would wander over to the UX team to put to them. (I've edited the question to ensure the focus is on UX).
    – JonW
    Feb 25, 2014 at 13:06
  • 1
    exactly as @HenrikEkblom says, i want to know the best aproach in a user experience perspective, not looking for any code on how to this.
    – FabioG
    Feb 25, 2014 at 13:26

4 Answers 4

6

In plain sight.

These are some thoughts.

  • use display:none.
    • Seems as a good option since it doesn't appear on the page, but as JonW mentions, some bots may recognize that is not supposed to be there. Although the rise of JavaScript and all the interaction it has, I think it makes difficult to be sure if it's a trick or not.
  • Color the fields the same (or very similar to) the background color.
    • Don't do that, You'd be surprised how many times you would get a valid form with something on that field, by mistake probably, but still there.
  • Use positioning to move a field off of the visible area of the page.
    • Most probably one of the best, the user is not going to see it, so it can interact.
  • Make an element too small to show the contained honeypot field.
    • This one sounds good, but there is an accesibility problem. I'll explain below.
  • Leave the fields visible, but use positioning to cover them with an obscuring element.
    • Not good idea, the visualization may change, or move, or be affected by something that you didn't consider and then the user will see something that is not sure what is for.
  • Use Javascript to effect any of these changes.
    • Better not.
  • Leave the honeypots displayed but tell people not to enter anything into them.
    • This is the best option. Clear from any perspective, and really accessible.

The problem with the solutions that involve modifying the position or representation, is that they are not accessible, so user with assistive technologies still will have to deal with them, but they will have no information and no idea what to do with that, not to mention the possible "accidents" where some information may end up there just by accident.

Considering one of the comments about filling the fields and leaving that one empty, it's true, every system has it's flaws. But I think this flaw is a bit "better" than other flaws. Plus you can combine your method alternating the empty field with none, and a different human question like 2 + 2. That way, you would have at least 3 models of form, all accessible but unpredictable for an automated script. Still some flaws can arise, but so far, seems like a good option.

5
  • I think it isn't very dificult for any bot prepared for this type of thing to by-pass a simple operation as a '2 + 2' or '2 plus 2' i guess that if that's the way to go what realy matters is the way we ask the user to do it, right?
    – FabioG
    Feb 25, 2014 at 14:21
  • 2
    Yes, you are Right, how you ask the question is very important. But the 2+2 is just an example, you can use much more things, like resulting colour from a combination, show a picture and ask who has a hat, the name of the website, title of the form, there are lots of possible questions, some are not accessible, some are, but all give options to the user and keep the honeypot idea. Plus since you asked the question here, that means preference for the user and his satisfaction. All the hard work should be on the server, not the user mind.
    – PatomaS
    Feb 25, 2014 at 14:31
  • @PatomaS: Exactly. The best UX for forms is for there to be no captcha / honeypot or anything like that. In a sense that's pushing the spam problem onto the user instead of being able to handle it yourself. "We have a spam problem so we're going to inconvenience everyone as our fix". But yeah, doing nothing could just get you spam and that's not much use to anyone anyway.
    – JonW
    Feb 25, 2014 at 15:17
  • @JonW: I'm with you, I hate captchas, and I don't use them. But I understand that some people/bosses/companies want them, when that happen, and you can not talk them out of the idea, the best you can do is use the "friendliest" one.
    – PatomaS
    Feb 25, 2014 at 23:17
1

I use a generic CSS class which has display: none; in it.

If the bot fetches the CSS and reads the class definition, he deserves all my kudos.

3
  • 2
    In my experience many bots do parse CSS now. Also, why (from a UX perspective) do you say this method is the one to use?
    – JonW
    Feb 25, 2014 at 13:45
  • Well, to be honest, it's not really a UX question in the first place. There's no UX to a element user does not see. The answer is based on my personal experience and worked most of the cases. Also demands the least amount of effort. Feb 27, 2014 at 10:00
  • @Adrian, there's plenty of UX to elements the user doesn't see (some people are blind), not to mention if an element is there it has an effect on the page in other invisable ways
    – Toni Leigh
    Jul 28, 2014 at 9:54
0

The honeypot capture is ABSOLUTELY a positive UX move because it takes the onus off the user to have to solve the problems we should be solving - and that is really nothing to do with them. Capture SUX for users.

I have used this technique extensively (just using display:none) and have not any trouble (that I heard about) with bots getting around it. It's not the end of the world if a few bot-filled forms get through - that's for us to deal with.

I really don't understand why people don't use this technique more for everyday forms.

0

I hide the honeypot field using some positioning/clipping as I suspect display: none is a clue to a spambot to avoid the field. At the least, it’s a possibility.

However, I appreciate it seems a lot for a bot to parse the HTML class and find the property value pair in the CSS itself. I wonder if class names such as hide alert the spammer? That would be a lot easier to figure out.

Ideally, we’d make the form as usable and easy as possible and deal with any spam that generates away from the user. The problem here can be financial, especially if you’re running a static/headless site, as most form services charge for the number of submissions you generate. For example, Netlify will give you 100 submissions a month for free, but then they’ll charge.

My anecdotal evidence was that more spam appeared to get through my Netlify forms when I was using display: none. Of course, Netlify’s own spam filter may have improved, so I can’t be sure the clipping/positioning approach made a difference.

If you are hiding the form rather than blitzing it a screen reader will still announce it. This is one of the few occasions where display: none makes something more usable as it means one less field to interpret and navigate for a screen reader. However, I don’t think it’s right to say not using display: none is inaccessible; as long as the honey pot field has a label that makes it obvious the field should be left empty, it’s accessible.

I guess there’s also the possibility that spam bots scan the label text to identify honey pot fields. This poses another problem – how do you avoid words like robot and spam in the field label?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.