Why use cookies?

Using cookies can be very useful from a user experience perspective. They are used to save small amounts of data onto the users’ machine, enabling the site to use this data next time the user visits. This is particularly useful if you have an age-gate (maybe for a movie or an alcoholic brand) but you don’t want to confront the user with this each time they visit if they have previously confirmed a valid date of birth. In this situation, you can set a cookie on their machine (named ‘ageCookie’ for example) and give it a value of ‘true’ or ‘false’. You can then detect the value of this cookie next time they visit (if it exists) and perform the necessary actions.

Show me the code!

It’s simple, there are 2 core functions you will need: setCookie() and getCookie(). They are pretty self-explanatory, one sets a cookie on the users’ machine and the other gets a cookie.

Here is the code:

// This function will get a cookie from the users' machine
function getCookie(theName) {
var nameEQ = theName + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
// This function will set a cookie on the users' machine
function setCookie(theName, theValue, theDays) {
if (theDays) {
var date = new Date();
date.setTime(date.getTime()+(theDays*24*60*60*1000));
var expires = "; expires="+date.toLocaleString();
}
else var expires = "";
document.cookie = theName+"="+theValue+expires+"; path=/";
}

Once you have this code in your page, you just need to call these functions and pass the parameters. For example: setCookie('ageCookie', 'ok', 365);. Notice how I pass a value of 365 for theDays parameter. This will ensure that the cookie will stay on the users’ machine for up to 1 year (given that they never clear their cookies).

Things to remember/useful tips

• When testing the functions remember to enable cookies on your machine.
• It is always useful to use a debugger such as the Web Developer Toolbar or Firebug, both for Firefox. These add-ons will enable you to view the cookies on your machine, edit their values, and remove them.

Over the last few weeks I’ve been designing an interface for a new social tool. It was a real eye opener for me and I learned a lot, including the importance of understanding the basic principles of human psychology. However the usage lifecycle is probably the best thing to consider before designing any interface. It details a common set of hurdles that every website faces and no matter what the nature of it is, there is a general lifecycle people go through in order to use its software.

Below are the 5 different user states in the usage lifecycle.

The Stages and Hurdles

Unaware

When you first launch your software, many people will not have heard of or read about your service. Although this group of people will be unaware of your service, they will be aware of their own frustrations with the current way that they do things. The key to getting their attention is to make sure that your software solves their problem and make sure you tell a genuine story!

Interested

This group of people have heard of your software from a friend, colleague, blog post, or followed a link and now need to be told that you can solve their problem. They are ready to be told about your service so make sure you give a good rationale as to why they should use your service! Don’t be too pushy but make sure they know exactly how you can solve their problem. Lastly, it’s good to make sure that your homepage has a very clear call to action. Do all this, and they’ll happily sign up.

First-time Use

Once a visitor signs up to your service and becomes a user, they experience your software for the first time. The impression that your site makes on the user at this point is absolutely critical. As they explore your application they are making judgments. Does this software really solve my problem? Does it really do what it says on the ‘tin’? They are deciding whether your service is worth switching from what they currently use.

If people don’t see the value in your service at this point then they may never return.

Regular Use

This group of people are using your software regularly. They are constantly adapting and learning, spending increasingly larger amounts of time on your site. They will communicate with you and you can learn from this. This is the point at which you start having success!

Passionate Use

Passionate users are the most important users on your site. They will feel emotional attachment to your service. This usually happens after the site becomes a real success. They will want to tell all their friends about it. It is critical at this point to socially empower these users and enable them to tell everyone they know, evangelizing your service and bringing more users in. You must always remember that a recommendation from a friend has a whole lot more value than other conventional marketing methods.

So there we have it…

…awareness, sign up, return visits, and emotional attachment. You will need to overcome these four hurdles in order for your social application to succeed. Good luck!