12 comments on “How to create a bulletproof Registration and Sign In flow”

  1. Great explanation of the process. It clearly lays down all possible paths in a process like this. Next time a client thinks building a signup form is a matter of creating a 2 field login form in 10 minutes, I can show him/her this article 😉

    I’m at the point of building a registration and login module, so these flowcharts come in handy, thanks.

    zegt Matthijs
  2. Excellent! This is a great explanation of what to reach for in this process! Bookmarked!

    zegt pat
  3. I have a follow-up question…Your flowcharts are beautifully rendered. What tool did you use to generate them?

    Thanks!

    zegt pat
  4. @pat: thanks for the compliment. I have been searching for a good online flowcharting tool, but haven’t found one I really liked. So in the end I have created these flowcharts in Adobe Illustrator. Not exactly the ideal tool for creating flowcharts, as I had to create all the elements myself. However, once I had created them it went pretty much ok. (If you would like to have the Illustrator files, let me know at jaron[at]jaron.nl and I’ll send them to you)

    zegt jaron
  5. I got one question. Can you send me the code (no, I’m not lazy, I just can’t get the code right) for this if you use it. I don’t want to steal, certainly not, but I just can’t get it right on my site. My buttons click to nowhere. If you could help me otherwise with the right codes. I use microsoft expression web too, but they don’t add much help…

    Thanks,

    Boy Rijniers

    zegt Boykes
  6. @Boy Unfortunately I do not have a working set of pages that you can just drop into your site. When you try to implement this, you’ll need to post your form to a serverside script (like php). That script should then have a couple of if/else blocks to determine which situation you’re dealing with. My flowcharts could act as a guide for setting up the if/else flow. I will send you the example pages I have used for this post, but these are semi static pages, and do not have any internal logic applied to them…
    One last tip: when you say clicking your buttons takes you nowhere, my guess is that you have forgotten to specify an action attribute for your form.

    zegt jaron
  7. The problem is, I don’t know the action keys (I’m still new to the registering thing with buttons etc). And btw, I use php yes (I need to for my Informatics classes). Can other pages help me with the codes but that I somehow reorder/remake them so they work for my own site?

    zegt Boykes
  8. @Boy I have aimed this post at more experiented developers, to help them fine tune their sign in process. If you are just starting out with html and php, I would suggest you to take a look at the Opera Web Standards Curriculum, which offers some very good tutorials (also on forms).

    The html of my examples can be re-used easily, but you will have to build the logic behind the sign in and registration process yourself.

    Once you are more comfortable with how to create a basic sign in process, please return to this post to catch the funny cases you might not have thought of rightaway.

    Best of luck!

    zegt jaron
  9. Haha, I’m not completely new, 2 years. But I had to take a relook from my teacher. I know all the things etc, but my buttons do it right (they say save there and there) with the example, but after that they don’t. And that logic you say is what I need to have a look at ;). And yeah, it’s that I’ve never thought of using very funny additions like a registering form etc etc. It’s fun that you’re dutch, like me, and we still talk english 😛

    zegt Boykes
  10. I got the right page of opera. Things are starting to get clearer

    zegt Boykes
  11. Thanks for the information that you are using Adobe Illustrator for flowcharts and the offer to send your custom files. However, unfortunately, I don’t use Illustrator. But, again, my compliments on this. Good, really good, flowcharts are not easy to do.

    zegt pat
  12. Good to point out how important it is to think behind the happy scenario! Great post.