Remember Me

I was struggling this evening designing a simple user interface for a new application. I got in a rut over how to word 'remember me', or more accurately - 'store a cookie for this browser on this computer that says last time you got your log in right'.

I figured the most explicit way to word this would be 'Remember me on this computer' which I thought was the most popular way to write it. I also thought that was too long and wanted just 'Remember me' or shorter. But you know what some users are like - I didn't know if this wasn't self-explanitory enough!

So I did a bit of digging and found lots of ways to say it - I found 'Remember me on this computer' used to be used everywhere (lots of google images showed old screen captures of log in screens with this), but that the major websites have all now migrated to shorter versions, heres the line up:


Remember Me - wordpress, aol, twitter, wikipedia
Stay Signed In - Google Accounts
Keep Me Logged In - Facebook
Keep Me Signed In - yahoo, ebay, msn, hotmail

Other versions:

Stay Logged In
Remember My Password - I think this would make people uncomfortable?!

My thoughts have been that users like to think of websites as a human - if the human remembers them, it's friendly, if the human knows their password, its intrusive! 'Logged in' and 'Signed in' are very computer based activities, 'remembering' is human.

Some sites of course just go ahead and use the cookies (Amazon, apple...) I'm guessing that most users still like the thought that they have a choice - it's only polite!

Me? I think I'm going to go with 'Remember Me' - its short, it's meaning is obvious, and it's used enough on the major players that people understand that it doesn't work when you switch computers.

JQuery jerky movements

Even some of the simplest jquery animations can have a disappointing jerky quality to them. After a bit of digging I found that sometimes when jquery is animating something it gets the height (and therefore the animation step-heights) wrong. This led me to look at a quick fix -

1) Dynamically get the height of the element with .height()
2) Set the css to the fixed pixel value with .css(property, value)

My example has a nav element filled with divs, which in turn may have an ul (sub menu) to display.

View the Demo

 
$("nav div").hover(
 function() { // i.e. onmouseover function

   /*simple lines to fix a % based height to a px based height*/
   var h = jQuery(this).find("ul").height(); //find the height
   jQuery(this).find("ul").css("height", h);
                  //set the css height value to this fixed value
   /***********************************************************/

   jQuery(this).find("ul").stop(false, true).slideDown("500");
 },
 function(){ // i.e. onmouseout function
   jQuery(this).find("ul").stop(false, true).slideUp("500");
 });
});

NB the stop(false,true) makes sure that if the user is playing with the controls the animations will continue smoothly but won't stack up to cause an issue.

Welcome

Quick post to mark the beginning of the Kimgeekery blog. I don't pretend to be an expert at anything but I do have eureka moments - I hope to document them and help others onto those same lightbulbs.