Hand gesture CAPTCHA

Hi, everybody! Please, rate my humble effort to create the ultimate CAPTCHA: http://gestcha.com. It's just a prototype, though fully functional. Just point at fingertips there from thumb to pinky - that's all this thing needs. I believe, it's a quite convenient method. How do you think?

 

Not too shabby, although images are quite small, and will be almost impossible to see on a 4k screen, for instance. Something that should be taken into account. Also, on a touch-screen, accuracy can be hard, and this image is again too small.
Also, the text is a bit misleading - you're not linking the image, you're just clicking the corresponding fingers on the 3D-model. Might want to update the information for ease of use.

 

Actually, I don't know what size could be suitable. Now it's just 100% for 100x100px pattern. I suppose, there is not too much of labor for a user to zoom it to any suitable size, even on 4k display. Accuracy radius is 8px now but can be increased. About information - you're right, of'course, I tried so hard to find something short and informative at the same time, but it was the only thing came into my mind. If you know a good replacement for it - please, tell me.

 

"click the corresponding fingers in the front image" or something, perhaps?
I would at least double the size - 200x200px - or use SVG images and put the scaling in % or em? Then it would scale based on what the user chose.

Zooming in and out, for most users, is too much hassle - remember, most users are idiots, and can't be arsed, and/or doesn't even know how to zoom in and out (these are the users calling support when the "text on the web is too small/large" - there are a lot of them). On a 4k screen, especially 13" ones or smaller, even scaled to 125%, 100x100px is... very tiny.

 

Thank you for the text. May be you're right about size also. I'll double it, but, unfortunately, only by html scaling - it would be too expensive (time and energy) to build bigger images.

 

How about converting it to svg? Wouldn't that be a possibility?

 

I just can't imagine how. Actually, it's just a raster image, which is rendered and, then, converted to .gif by GPU (OpenGL/OpenCL).

 

As I think I said last time I saw this, it would REALLY help if you used MODERN development techniques in your markup so that your scripting and actual modern stuff like SVG didn't end up such so convoluted.

Since this:

<b>Attention! Modern web techniques are present - may require an updated browser!</b>

Code (markup):

Is high comedy when you have markup like this:

            <div id="main" style="display: table; width: 45em;">
                <div class="cell">
                    <div style="margin-left: auto; margin-right: auto;">
                        <center>
                            <p class="patp">PATENT PENDING</p>
                        </center>
                    </div>
                </div>
                <div class="cell">
                    <div style="float: middle;">
                        <center>
                            <h3 id="heading">In order to enter the site,</h3>
                            <table style="border: 1px solid black; border-spacing: 0px">
                                <tr>
                                    <td style="border:0px; padding:3px;">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border:0px; padding:3px;">
                                    </td>
                                    <td id="rule" valign="middle" align="right" style="border:0px;padding:3px;">

Code (markup):

Style attributes, align and valign attributes, tables for layout, pointless ID on the H3, heading that's not a subsection of the heading before it, empty TR for nothing or doing padding's job, META tags inside body where they are utter and complete gibberish, are just the tip of the iceberg when you have tags like CENTER that have no business on ANY website written after 1997 and CSS values that don't even EXIST like "float:middle;"

The scripting is similarly afflicted with multiple "var" doing the job of one, mutiple canvas on something that doesn't even look like it needs canvas, client side storage of captcha data meaning most script-kiddies could detect your code and slap it aside in an instance (there's a reason most captchas would NEVER use SVG), and multiple needless element get's that would be better stored ahead of time to prevent it from hogging the CPU.

Really though, I'd suggest you learn more HTML and CSS before diving for a heavy scripting project like this one. Of course you're using ASP so naturally the markup is totally banjaxed -- as I've rarely if ever seen anythign done with ASP for web tech that didn't reek of "I cans haz HTMLs?"

... and as before I the image is so tiny and vague, and zooms in so poorly that I still cannot tell the pinky from the thumb leaving me wondering just what direction to even start from; and a lot of the contorted hand positions make me wince in their seemingly painful and unnatural positioning.

 

Oh, my old faithful fan is here. Trying to get me with the same b...t once more - it's so ridiculous. Please, don't be a troll, just stop.

Unfortunately, here you're right, but it's a sort of CAPTCHA, so, there just can't be too much of eye-candy - I think you know that. So, please, be strong - and this is not your hand, remember?

What???

 

truth isn't trolling -- there is no such thing as float:middle, there is no reason for any modern site to be using the CENTER tag, there is no reason for that page to be pissing itself with tables for layout. You've got markup that was bad when 3.2 was new and your CSS is no winner either. It doesn't inspire confidence in the rest of the code.

... the rest of that code being pointlessly bloated and needlessly/painfully constructed.

For example:

var pulse = document.getElementById("pulse");
var blackpulse = document.getElementById("blackpulse");

var fcv = document.getElementById("forcanvases");
var cvs1 = document.getElementById("field");
var ctx = cvs1.getContext("2d");
var cvs2 = document.getElementById("hover");

Code (markup):

There is no reason to say VAR over and over again, use commas.

var fcds = new Array(6);
fcds[0] = new Object;
fcds[0].x = 7; fcds[0].y = 43;
fcds[1] = new Object;
fcds[1].x = 19; fcds[1].y = 13;
fcds[2] = new Object;
fcds[2].x = 34; fcds[2].y = 7;
fcds[3] = new Object;
fcds[3].x = 47; fcds[3].y = 9;
fcds[4] = new Object;
fcds[4].x = 58; fcds[4].y = 23;
fcds[5] = new Object;
fcds[5].x = 0; fcds[5].y = 0;

Code (markup):

Pointless wasteful code bloat showing a failure to grasp how to use objects. This is functionally identical and executes faster in less code:

var fcds = [
	{ x :  7, y : 43 },
	{ x : 19, y : 13 },
	{ x : 34, y :  7 },
	{ x : 47, y :  9 },
	{ x : 58, y : 23 },
	{ x :  0, y :  0 }
];

Code (markup):

It's called JavaScript OBJECT notation for a reason.

That was mostly more joke -- the issue is more that a LOT of the ones that come up no matter how I zoom, I'd HAVE to refresh in the blind hope of getting one that I can tell which finger is which... hence why a "give me another image" option might be a really good thing to add to that.

This is kind-of a guess (I might be wrong!), but it LOOKS to me like there's enough data being sent client side, that someone could write a script to extract the values and bullshit the form submit. I've seen some other scripting based captcha's fall into that trap, hence my trepidation about how you're doing this. Still trying to decipher a lot of your scripting as it's... well... not how I'd write scripting for handling something so simple. Seems like a LOT of code for nothing... including a LOT of stuff in the markup that doesn't go in the markup... (or at least not if you understand progressive enhancement and the concept that scripting only elements have no business anywhere but the scripting!)

Though that would come down to how random your gif filenames are and how many possible combinations you're generating. A lot of unknowns.

 

At last! This should be the very first question from you. All other is just trifles, which deserve no notice at all, can you understand that? I'm not a web-programmer/designer (and have never planned to be). This thing was written by my left leg as fast as it can. It shows the concept's mechanics perfectly and it's pretty enough. I just hope the method will prove its usefulness. If so, there is no doubt the whole web part should be rewritten by some professional (like you).

I told you once, that there is no crucial data which is sent to the client side - "one-time pad" scheme is used here - we already discussed this. You can dig deeply into code or just ask me about something, but please, don't criticize my coding style in web - there is no such thing. It's just tedious to say the same obvious things all the time, sorry.

There is such thing already - near the help (?) button (upper right corner).

 

Ive tried it, and it didn't work out.. 5 times bad out of 5 times. and i'm not a robot!

 

It's strange. What platform/browser are you using?

 

Sorry, but I think that's a lot of your problem -- you don't have enough implementation knowledge to even design such a UI concept in the first place. The mechanics are broken, it's hard to tell what any of it is much less how to even use it, and it lacks anything resembling accessibility.

There's a help button? Oh is that what those are supposed to be? False simplicity in the form of "Ambiguous UI" at it's worst, the glyph lines are so thick I can't make out what those icons even were, or even that they were icons. Some TEXT would be nice there as I can barely even see a question mark there, much less what that blob next to it is even supposed to be.

Though that could just be crappy SVG rendering of things below certain sizes -- part of why I'm NOT a fan of SVG on websites. (in addition to it being fat bloated rubbish)

While my failure rate wasn't as high, that's what I was referring to by "can't tell pinky from the thumb" -- the hand pictures aren't asymmetric enough to know which end to even start from, and some of them are so convoluted your guess is as good as mine as to which is which on the middle three either. Some pictures the fingers are bent at such unnatural angles you can't even tell if you're looking at a fingertip, a knuckle, a shadow, or just a crease in the palm.

 

First worthwhile remark from you, thank you. Tool buttons' font was chosen mistakenly - it's true.

About accessibility: it's a well-known sore spot for almost every kind of CAPTCHA - there is a limitless space for debates.
About hand gestures: all models were made in accordance to anatomy of a real human hand, so, almost every gesture can be repeated by ... a piano player, for instance. Anyway, I can't see any problem here.

Pure nonconstructive criticism - I don't see it in any sense relevant, sorry. Suggest something at least slightly better for it or just leave this thread alone, would you? Just a troll, as I said.

 

Who cares about his HTML code??? That's not on display. He's asking about the Hand Gesture Captcha idea he came up with.

Personally.... first...as a project I think it's cool. Being used in production in real world scenarios it's not cool. In fact, it took me a while to figure out what to do. Captcha's are suppose to be easy. It wasn't easy. And it was time consuming. Too much thought and time put in to just to prove you are not a robot.

C'mon...Keep It Simple.

 

You're right, of' course. Sure, one of the most serious problems here is to explain this unusual task properly. I still think it can be made better - but in what way - I don't know yet. On the other hand, if you once got what it wants - there is no problem for you from this moment. Also, I found a strong learning effect there. Usual CAPTCHAs just don't have such. Despite all of that, it still needs to be significantly improved - that's for sure.

 

The concept is a bit too convoluted, but maybe an abstraction could help? How about the same type of captcha, but with three colored spaces with a geometrical shape inside? Then you could have the user click matching symbols? About 3 should be enough?

 

You guys are over thinking it... I've seen captchas as easy as "Pick all of the kitties" and theres 6 pics of Cats and Dogs.

 

Didn't get your idea