09Mar2011
How to Make Login Forms More User-Friendly
Login forms are often such sterile, unfriendly places. Which is why it's nice to see SEOmoz taking a more people-friendly approach. Visit their login page and, along with the standard form, you will be greeted by a cartoony robot called Roger.
Better still, if you make an error when logging in, not only are you presented with a user-friendly error message, but the image of the robot also changes:
This reminds me a little of a post I wrote a short while ago on bringing the human touch to the signup process. To my mind, anything you can do to alleviate the user frustration that can be encountered when filling out forms is a good thing.
Posted on: March 9, 2011 | 22 Comments
Recent Entries in "Web Design"
- Forbes Doesn't Care About the User Experience (0)
- Easily Create iOS and Android App Store Badges (0)
- 15 Online Tools for Creating Great Content Ideas (1)
- Web Design Trends to Help You Spring Clean Your Resumé (7)
- Looking to Hire an Email Marketing Manager (0)
- Create Awesome Article Headlines in Seconds with the Content Idea Generator (23)
- Two Great Guides to SEO for Large Websites (1)
- Lessons Learned from Launching an Online Store on Magento (1)
- Pagination Design Showcase (0)
- Best Practices for Writing Email Subject Lines [Infographic] (0)
- 30 Call to Action Examples that are Better than Learn More (5)
- 50+ Examples of Highly Optimized Landing Page Design (24)
- Components of a Great Website Footer (0)
- Login Form Showcase: 65+ Examples of Login Form Design (0)
- CSS Rounded Corners 'Roundup' (65)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (20)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- Don't Make Me Think: A Common Sense Approach to Web Usability
- Web ReDesign 2.0: Workflow that Works
- White Space is Not Your Enemy: A Beginner's Guide to Communicating Visually through Web Design
- Basics of Web Design: HTML5 and CSS3
- Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
- Prioritizing Web Usability
- The Web Designer's Idea Book: The Best Themes, Trends and Styles in Website Design
- The Principles of Beautiful Web Design
- Convert!: Designing Web Sites to Increase Traffic and Conversion
- HTML and CSS: Design and Build Websites
- View more recommended reading…
22 Comments Posted
It's a very nice example to combinate both, the "machine" and the human.
1. Posted by Ralph on March 10, 2011
It's a cool and nice feature, but user-friendly? I don't agree with you on that one.
The error message is way to vague and to far away from the form itself, not something I would recommend on a public website. :)
2. Posted by Palle Zingmark on March 10, 2011
funny....adding a little personality can go a long long way. How many people keep getting it wrong to watch the robot change though?
3. Posted by Andy on March 10, 2011
i think it will be good for visitors when they will be logging in because if they do mistake during logging in so the picture will give the same message. it took less time of visitors to understand the things.
4. Posted by Flash Banner on March 11, 2011
That is cool! Make you want to enter the data incorrectly just to see it work.
Nice share, Thanks
5. Posted by KoolDot on March 13, 2011
This is a cool login form. This is very much user friendly.
6. Posted by Senabi on March 14, 2011
Wow i like it .Roger is great .Cool post, keep posting.
7. Posted by Macro Design Group on March 17, 2011
Hillarious! I want their website designer!
8. Posted by Jordan Harbour on March 17, 2011
Nice Roger Robot. This will not fear your customer away if too formal and strict in sign up a form. I love the Robot and start thinking should i put a cartoon as well in my log in side. Will this will slower down the loading of the loading of the log in pages?
9. Posted by Jerrick on March 20, 2011
Good tips. Thank you.
10. Posted by Charlie on March 21, 2011
Haha it's great, I love Roger & SEOMoz :) very cute!
11. Posted by WebDesignHW on March 21, 2011
Its very good . SEOMOZ is very informative.
12. Posted by Nancy Paul on March 23, 2011
Thanks for this post, your contact page on your website is one of the most important pages you will design. A lot rests on this little page to collect that all important data from your customer/client. The most important factors should be functionality and the ability to collect all the necessary information you require. A good contact form should be clear, concise, simple and most of all designed well to encourage your customers input.
13. Posted by Alan Ashby on March 23, 2011
Hahahaha!! Good stuff! I love that robot - that nametag is sooo cute!!
Good blog!
14. Posted by Zeth on March 27, 2011
Its a nice feature, but I think it is more important to show an error message which give a short and correct information. The error message should be displayed in a box thats look like an error message box (red font, red border, exclamation mark, ...).
15. Posted by Webdesign Wolfsburg on March 28, 2011
I love the SEO Moz Login page. It really is a great example of a very user friendly and intuitive approach. Plus the robot is very cool.
16. Posted by Will on March 29, 2011
SEO Moz does invest a lot on usability and with their expert team they infact do a lot of usability consulting too. Good to see experts following what they preach.
17. Posted by Ocular Concepts on April 05, 2011
Love the idea of making people smile at the last place people would think to have a smile on there mind. It's a good philosophy to hold onto and to implement where ever possible.
18. Posted by Web design Cambridge on April 07, 2011
Nice one!!!!!
Specially Roger Robot looks very cool.
19. Posted by Shout About You on April 08, 2011
brought a human touch to my day!
20. Posted by Jatin Hariani on April 08, 2011
thats pretty cool. check out what we do. Digitaldesignzmedia.com
21. Posted by asim craft on April 13, 2011
Now THAT is a nice login form. I realy like Roger the robot. I don't think it wil work for any site.
As said before, the error message is too far away from the form for some sites.
Allso that if an error happens, Roger changes his radar is cool.
22. Posted by Webdesign on April 20, 2011