I've been looking into some UX issues this week, and various other front end components to make a client's site more aesthetically pleasing, which is always fun.
Now, I won't lie.. I also use Wordpress as a blogging platform.. yeah yeah, a ColdFusion developer using a PHP application. The truth is, I've used it from day one as a blogger (I've been doing this in various forms for the last 6 years, believe it or not), and it's constantly being updated. It's a great system with some fantastic developers behind it, as well as a very clean design principle.
Now, logging into a Wordpress blog the other day I mixed up my password with one of the million or so that I use (couple that with the fact I'm getting old and forgetful...) and I received a really pleasant surprise from Wordpress (version 3).
After the failed login, the entire login form shook a few times, and displayed above it is the error information box. That was a really nice addition; they could have just stuck with the traditional big red "YOU MESSED UP, YOU IDIOT" message you see on so many sites.
This reminded me of something else; One of the presentations I was able to escape long enough to attend at Scotch on the Rocks 2011 was one from Aral Balkan, title "The Art of Emotional Design: a story of pleasure, joy, and delight". A fantastic presentation, and one which really makes you think about developing or adding details in to your applications to make your users go "oooh" instead of "oh.."
...which is what happened here (which is a good thing).
Shake what you got
Instantly I wanted to emulate it and create something similar. Wordpress is packed with classes and action hooks to load in specific actions when required.
To create a very simple equivalent, I'm using the very powerful jQuery UI library, which has a shake effect baked in - awesome.
You can view the video using the link at the top of this post, or watch it directly on YouTube.
Here's the core of the login form created for the demo:
index.cfm
<!--- Name: index.cfm Author: Matt Gifford aka coldfumonkeh Date: 11/08/2010 Purpose: Login form to demonstrate the use of the jQuery UI's shake effect. ---> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <title>Login</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel='stylesheet' href='assets/css/login.css' type='text/css' media='all' /> <link rel='stylesheet' href='assets/css/ui-lightness/jquery-ui-1.8.4.custom.css' type='text/css' media='all' /> <script src="assets/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="assets/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script> </head> <body> <div id="login"> <!--- Here, we set an empty div which we'll populate and add styles using the jQuery UI classes. ---> <div id="login_message"></div> <!--- Uber-simple login form. Username and password fields. No more, no less. ---> <form name="loginform" id="loginform" onsubmit="return false;"> <p> <label for="username">Username<br /> <input type="text" name="username" id="username" class="inputFields" value="" size="20" tabindex="1" /> </label> </p> <p> <label for="password">Password<br /> <input type="password" name="password" id="password" class="inputFields" value="" size="20" tabindex="2" /> </label> </p> <p class="submit"> <input type="button" name="btnLogin" id="btnLogin" value="Log In" tabindex="3" /> </p> </form> </div> <!--- Bring on the jQuery. ---> </body> </html>
Nothing out of the ordinary going on here.. in fact the WHOLE process is incredibly simple. In this example, we're just sending through username and password parameters, and are validating against a fixed authentication; I'm not querying a database in this instance.
The authentication process returns a boolean value, which we'll use in the jQuery handling to determine succes (or not).
checkLogin.cfm
<!--- Name: checkLogin.cfm Author: Matt Gifford aka coldfumonkeh Date: 11/08/2010 Purpose: Dummy login authentication page checking against static information. ---> <cfsetting enablecfoutputonly="true" showdebugoutput="false" /> <cfparam name="boolSuccess" type="boolean" default="false" /> <cfif structKeyExists(form, 'username') AND structKeyExists(form, 'password')> <cfif form.username EQ 'random1000' AND form.password EQ 'password'> <cfset boolSuccess = true /> </cfif> </cfif> <cfoutput>#boolSuccess#</cfoutput>
The actual core of the work is within the jQuery script, which in itself is still pretty straightforward.
In the example below, we're using jQuery's AJAX method to send the form and it's data to the checkLogin.cfm page.
Using the boolean response as a status to monitor the authentication success, we can then handle the form and any processes that we need to take care of:
index.cfm (jQuery code)
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
$("#btnLogin").click(function(){
/*
* The login button has been clicked.
* Send an AJAX POST request to the checkLogin.cfm
* page, which will work out the authentication for us.
* We will receive a boolean value in the response.
*/
$.ajax({
url: "checkLogin.cfm",
type: "POST",
cache: false,
data: "username=" + $("#username").val()
+ "&password=" + $("#password").val(),
success: function(status){
if(status == 'false') {
/*
* The authentication was a failure. As such, we'll let
* the user down gently with a smile and shake the login
* form. This will act as notification and a little
* 'crowd pleasing' effect to brighten their day.
*/
$("#loginform").effect("shake", {times:2}, 100);
/*
* Set the Class attribute for the message element
* and set the html value with the ERROR message.
*/
$("#login_message")
.attr('class', 'ui-state-error')
.html('<strong>ERROR</strong>:
Your details were incorrect.<br />');
} else {
/*
* The authentication was a resounding success! Good times.
* Set the Class attribute for the message element
* and set the html value with the SUCCESS message.
*/
$("#login_message")
.attr('class', 'ui-state-highlight')
.html('<strong>PERFECT</strong>:
You may proceed. Good times.<br />');
}
}
});
})
});
</script>
Using jQuery's UI, we are able to not only set the shake effect and apply it to the entire loginForm div element, we are also able to set the class attributes for the login_message element and apply the styles from the CSS themes available with the UI framework.
Shake it yourself
The only true way to enjoy is to experience yourself. :)
The full code for this example is available to download.
