Hey! A few months ago, I started work on a custom captcha mechanism.
It should be maximum user friendly and easy to solve for human. So I picked the image recognition on canvas way to challenge the user. However, I am not sure about the UX aspects of my work.
I would be very happy for any advice about what change in my project.
This is how it looks now:
Top comments(5)
- Email
- LocationViet Nam
- WorkFresher Website Developer at Freelancer
- Joined
As me:
- Make the border radius for whole card better.
- Submit btn will be under picture asPrivacy and terms on the left, and the submit will on the right.
- Submit btn radius the card as well.
- We need more white space both sides left and right for picture in the card.
- Change the font for call to action, make them bolder to get attention from user
- Email
- LocationDoncaster
- EducationHND Electrical Engineering
- WorkAngular Developer
- Joined
I echo this.
White space is your friend, don't be afraid to use it and try to be consistent here to give balance.
Revise the border radius on the card, and amend the box shadow. A light amendment to the position on the Y and X axis will make your card appear more professional and realistic.
Its difficult to make out where the pieces are, try to emphasise their presence by using an outline of some sort. Use a colour that gives a good contrast to the image behind it.
Great work, would love to see the final result.
- Email
- LocationJakarta, Indonesia
- EducationBrawijaya University
- PronounsHe/Him/His
- WorkApplication Development Specialist
- Joined
I would recommend you some tips:
- The submit button shouldn't be there. Otherwise you can make it separate from captcha box. For example under the box of captcha.
- You can add some highlights of the task with different color / contrast. For example, the middle of the picture seems confusing for me (transparent in the middle).
- I didn't see any pieces of jigsaw, you can make some pieces of jigsaw, drag and drop into the box. That would be help.
- Email
- LocationKyle, Texas
- EducationLambda School
- WorkSenior Android Developer
- Joined
I would change whitespace from #fff to #fafafa to make it a tad softer and not be as harsh against the tan background.
I would also change fonts. Switching to something like Roboto or Open Sans from Google fonts will make text look a lot smoother.
I would also toss a small border radius around your card and submit button to soften things out as well. Sharp edges are more aggressive and round edges are more gentle. We got some gentle looking cat and dog bonding going on here, so rounding your edges here can go a long way.
- LocationDenver, CO
- WorkSr. Documentation Manager (AI/ML) @ AWS
- Joined
Finding the piece(s) was difficult. Without a closer look, it was also hard to determine which piece I needed to drag/drop.
I would suggest filling the hole where the piece needs to go with a solid, dark color. Then you do not need any border shadow or other visual callout. It will be clear all by itself.
No opacity on the drag/drop piece (cannot tell if it has any, but looks like it might), but maybe a solid border of a few pixels. I feel like the shadow softens the piece too much, making it more difficult to locate.
If you really want to thrill your users, slightly rotate the drag/drop piece (10 degrees?), then animate the rotation back to the correct angle on mouse down. This would make that piece stand out even more, while simulating the natural interaction of a physical puzzle piece.
Overall, I really like the concept. Thanks for sharing your work, and for being open to feedback.
For further actions, you may consider blocking this person and/orreporting abuse
