Sign up form design
•Download as ZIP, PDF•
5 likes•772 views
Sign up form design, thoughts on psychology and design patterns.
Recommended
Recommended
More Related Content
Similar to Sign up form design
Similar to Sign up form design (20)
Recently uploaded
Recently uploaded (20)
Sign up form design
- 1. Sign Up Design Review Forms By: Gene Crawford
- 2. Stolen Borrowed From: Andrew Chak Christian Crumlish Joshua Porter
- 3. Hierarchy of User Needs Desire Confidence Usability Availability Andrew Chak: Submit Now
- 4. Seven Principals to Remember: Andrew Chak 1) Your competition includes your Competitorsʼ web sites, the web & the offline world 3) You must earn the right to transact with the user 5) Anticipate mistakes and variations ahead of time 6) Either you do the work, or they will 7) Help your users do what you want them to do
- 5. Is this worth my time? ~8 seconds... Joshua Porter
- 6. What are users thinking? Joshua Porter Dude! This is awesome, just what iʼve always needed. Must sign up quick and then tell everyone on Facebook about how great it is!
- 7. Reality.
- 8. Things to think about: Joshua Porter *Describe WHAT it is *Show HOW it works *Show the end result *Explain WHY *Give examples of WHO is using it *Use Testimonials or Case Studies *Get Specific *Give numbers (when theyʼre big-ish)
- 9. Good Usabilty is a Given
- 11. What it is Everyone is doing it!
- 12. What it is Everyone is doing it!
- 13. twitter.com
- 15. facebook.com
- 17. facebook.com
- 18. Desire? Confusing facebook.com
- 20. Confidence
- 23. Confusing
- 24. Confidence
- 25. facebook.com
- 26. Why, #’s, What facebook.com
- 27. OnBoarding
- 28. OnBoarding
- 29. It’s all in teh details...
- 30. Good Microcopy facebook.com
- 31. Good Microcopy
- 32. Good Microcopy
- 33. Modal facebook.com Windows
- 34. facebook.com
- 36. Facebook Connect 60 Million users a month use Facebook 30-200% signup increases 15-100% increase in participation & engagement
- 37. facebook.com
- 40. Random Stuff...
- 43. facebook.com
- 44. facebook.com
- 51. Thanks
Editor's Notes
- Abraham Maslow (psychologist) said that human motivation is based on a desire to meet a hierarchy of needs. People will take care of basic things like food and shelter before they concern themselves with other higher level issues, like being liked and having self-esteem. The same is for the web. Meet the fundamental needs first then go for the transaction/higher-level stuff.
- Andrew Chak has these 7 principals to remember as you design your website (sign up page) I’ve highlighted 5 for the purposes of this talk.
- The moment of signup is the most critical. You’ve spent all this time informing, enriching and convincing them to signup for your service or app and you’ve already used up most of your 8 seconds doing so. Don’t screw it up!
- The reality between what we HOPE users are thinking and what they are ACTUALLY thinking is very different.
- This is a brash over generalization. I should be punched for making this type of exaggeration, it’s rude and you should never think of your users this way. But...
- This is the basic outline of this chapter in his book. Goes over some basic approaches to thinking about ways to enhance your signup process or form.
- Yahoo.com - registration, gaining enough info up front to do something with your profile right away.
- Facebook.com - Clean simple and fast to use. Nice graphic/image to show you the concept of connecting with people you know all over the world.
- Facebook.com - Clean simple and fast to use. Nice graphic/image to show you the concept of connecting with people you know all over the world.
- Twitter.com - Just the basics, just enough so you can engage in the community right away. Too bad they have to guard against spammers, the captcha is a big roadblock on this otherwise beautifully simple signup form.
- Gowalla.com - Like Twitter.com it’s extremely simple to signup and get going with the service. Once you sign up you can then elect to use FacebookConnect making it that much quicker to get in on the fun.
- Foursquare.com - More complicated signup for the same basic functionality as Gowalla. This is apparently a multi-step process as denoted by the tabs on the left. But the life preserver is FacebookConnect.
- Foursquare.com - More complicated signup for the same basic functionality as Gowalla. This is apparently a multi-step process as denoted by the tabs on the left. But the life preserver is FacebookConnect.
- Blogger.com - One of the earliest free online services to really be huge. The form is a multi step process and quite confusing to just scan visually. It’s almost pretty, but from a pure user standpoint, this form probably takes people quite a while to complete.
- Blogger.com - One of the earliest free online services to really be huge. The form is a multi step process and quite confusing to just scan visually. It’s almost pretty, but from a pure user standpoint, this form probably takes people quite a while to complete.
- Wordpress.com - Very streamlined form design, you hit this thing up in seconds then you’re off. If you’d like you don’t actually have to setup a blog, you can just get an account to poke around with.
- Wordpress.com - Very streamlined form design, you hit this thing up in seconds then you’re off. If you’d like you don’t actually have to setup a blog, you can just get an account to poke around with.
- Posterous - There’s a lot of talk about whether posterous’ email signup is a great feature. Some people really dig it others have been pretty critical about it. My opinion is that it’s not really a “killer” feature, that it’s not something that will truly set it apart from something like say Tumblr. I’ll take a well designed app over a well engineered app any day when it comes to betting on conversion rates.
- Tumblr.com - they’ve made this so quick and easy and beautiful. How can you help not signing up for this service? They will engage you after the point of signing up to complete your profile. A concept Christian Crumlish describes as “onboarding”.
- Posterous - There’s a lot of talk about whether posterous’ email signup is a great feature. Some people really dig it others have been pretty critical about it. My opinion is that it’s not really a “killer” feature, that it’s not something that will truly set it apart from something like say Tumblr. I’ll take a well designed app over a well engineered app any day when it comes to betting on conversion rates.
- Tumblr.com - they’ve made this so quick and easy and beautiful. How can you help not signing up for this service? They will engage you after the point of signing up to complete your profile. A concept Christian Crumlish describes as “onboarding”.
- LinkedIn - Really simple signup form. If you want a great example of “onboarding” check LinkedIn.
- LinkedIn - Really simple signup form. If you want a great example of “onboarding” check LinkedIn.
- OnBoarding - serving up things for your user to do after they’ve logged in to finish their profile, interact with other users or whatever it is you want them to do.
- LinkedIn - Really simple signup form. If you want a great example of “onboarding” check LinkedIn.
- Pattern Tap - Nice easy signup form. I like the extra reach to get you to sign up for the newsletter. The note used is also pretty funny which i’m willing to bet helps conversions.
- Basecamp - Legendary web app for team collaboration. They remove all other links from the page, have selling points on the page, point out the 30 day free trial. The form is longer and made more complex due to the credit card fields. They have to get it right the first time.
- Photoworks - The use of a modal window is also pretty common for signup forms. The effectively remove all other links from the sign up page. However you have to be careful, if you allow it to close out by simply clicking off the highlighted window area, that could spell disaster for your conversion rate.
- Virb - One of the more beautiful signup forms i’ve seen. The only links on the page are in the top navigation bar and are very minimal when you are on this page. They do have the captcha which can really work against you.
- Kontain - They’ve really simplified the form down to 3 fields and designed them horizontally aligned across the page. I’ve not seen a form design like this and in my opinion makes the form look incredibly simple. I’d love to look at the conversion rates on this form to see the design’s true effect.
- http://techcrunch.com/2009/12/09/60-million-people-a-month-use-facebook-connect/ http://www.businessinsider.com/six-months-in-facebook-connect-is-a-huge-success-2009-7
- Digg - they throw the facebook connect right at you when you hit the signup page. I recently stated using digg once a week since they did this, where previously I would forget about them. Overall the form/page is fine, the extra info on the right hand side kind of dwarfs the form, i’m not entirely sure why it does that. Every link on the page can have the same effect as a “cancel” button.
- Brightkite - The only visible option you have here is to use FacebookConnect.
- You don’t have to, it’s a really simple form to sign up on if you don’t.
- Builditwith.me - The form isn’t too out there, but I love the self classification you go through.
- Sortfolio (previously Haystack) - The signup form is your profile configuration, all done at the same time.
- Getclicky - Nice simple form, but why is the extra information messages designed in red? It looks like i’ve caused an error with my submission before i’ve even clicked “register”.
- Myspace - home of god-awful websites. The form itself is rather simple, but the profile types off to the right hand side are pretty confusing. What other types of profiles are there? I’m not a musician, comedian or filmmaker (those are static too...)
- Boxee.tv - The sign up form is loaded as a drop-down navigation element.
- Godaddy - They use some of the best practices we’ve seen so far, as well as every other practice known to man since the internet was invented. There’s so many shiny objects to lose your way on, I find it hard to belive that they have any conversions at all.
- Their signup page is like 12 screens long and there’s a submit button that does something other than actually submit your order every 1/3 screen down the page. How people complete this form at all baffles my mind.
- Flickr - Millions of users, huge database of images to sort through. This is a yahoo.com application.
- Flickr Signup - You’re shoved directly at your yahoo.com ID. If you don’t have one, you can’t play. Using a yahoo.com ID may make you want to scratch your eyes out if you don’t actually use anything else but flickr. (Sorry if I offend, but it’s true...)
- Yahoo.com - registration, gaining enough info up front to do something with your profile right away.