Sign Up
Design Review

Forms
       By: Gene Crawford
Stolen Borrowed From:




Andrew Chak   Christian Crumlish   Joshua Porter
Hierarchy of User Needs

                               Desire

                          Confidence

                     ...
Seven Principals to
           Remember:                           Andrew Chak



1) Your competition includes your Compet...
Is this worth my time?
 ~8 seconds...


                   Joshua Porter
What are users thinking?
                               Joshua Porter


             Dude! This is awesome,
          just...
Reality.
Things to think about:
                                        Joshua Porter


 *Describe WHAT it is
 *Show HOW it works
 ...
Good
Usabilty
  is a
 Given
What it is


    Everyone is doing it!
What it is



   Everyone is doing it!
twitter.com
facebook.com
How it works




facebook.com
facebook.com
Desire?
                         Confusing




          facebook.com
Confidence
Confusing
Confidence
facebook.com
Why, #’s,
 What




   facebook.com
OnBoarding
OnBoarding
It’s all in teh details...
Good
               Microcopy




facebook.com
Good
Microcopy
Good
Microcopy
Modal
facebook.com   Windows
facebook.com
Facebook
                     Connect

    60 Million users a month use Facebook

          30-200% signup increases

15-1...
facebook.com
Random
 Stuff...
facebook.com
facebook.com
Thanks
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Sign up form design
Upcoming SlideShare
Loading in …5
×

Sign up form design

1,600 views

Published on

Sign up form design, thoughts on psychology and design patterns.

Published in: Design, Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,600
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
26
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide




  • 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.


  • Sign up form design

    1. 1. Sign Up Design Review Forms By: Gene Crawford
    2. 2. Stolen Borrowed From: Andrew Chak Christian Crumlish Joshua Porter
    3. 3. Hierarchy of User Needs Desire Confidence Usability Availability Andrew Chak: Submit Now
    4. 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. 5. Is this worth my time? ~8 seconds... Joshua Porter
    6. 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. 7. Reality.
    8. 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. 9. Good Usabilty is a Given
    10. 10. What it is Everyone is doing it!
    11. 11. What it is Everyone is doing it!
    12. 12. twitter.com
    13. 13. facebook.com
    14. 14. How it works facebook.com
    15. 15. facebook.com
    16. 16. Desire? Confusing facebook.com
    17. 17. Confidence
    18. 18. Confusing
    19. 19. Confidence
    20. 20. facebook.com
    21. 21. Why, #’s, What facebook.com
    22. 22. OnBoarding
    23. 23. OnBoarding
    24. 24. It’s all in teh details...
    25. 25. Good Microcopy facebook.com
    26. 26. Good Microcopy
    27. 27. Good Microcopy
    28. 28. Modal facebook.com Windows
    29. 29. facebook.com
    30. 30. Facebook Connect 60 Million users a month use Facebook 30-200% signup increases 15-100% increase in participation & engagement
    31. 31. facebook.com
    32. 32. Random Stuff...
    33. 33. facebook.com
    34. 34. facebook.com
    35. 35. Thanks

    ×