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!

I love jQuery. It is such a nice, simple, easy to use library and I genuinely enjoy building applications with it. It’s incredibly popular too, which is always a good sign. Amongst its users is the likes of Google, Wordpress, Mozilla, and Technorati.

This tutorial is intended for the jQuery beginner. It helps to have some previous knowledge of the library but I will make sure that I introduce every concept and technique as if I were teaching my Grandmother (well not quite but you get the gist). We will build a simple tabbed interface, introducing you to the jQuery factory function, document traversal & manipulation methods, and even a few clever effects. It’s really very simple

See DemoDownload Source Files

The Document Ready Function

In this tutorial we will write all of our jQuery code within a document ready function, which essentially makes sure the page we are working on is ready before we start messing with it! Unlike the native javascript window.onload event, anything you put inside the $(document).ready() function will be executed as soon as the Document Object Model (commonly referred to as the DOM) is ready, rather than when all page contents have loaded.

The Document Object Model, or DOM refers to the ’skeleton’ of a web page. You can view more information about this on the World Wide Web Consortium.

Here is an example of how to use this functionality:

$(document).ready(function(){
	// jQuery it to the max in here!
});

The jQuery Factory Function

No matter what you want to do in jQuery, you will use this function extensively. It comes in the form of a dollar sign and parentheses: $(). By parsing this function a ’selector’ we can select an element on the page, which will create a new jQuery object. We can use all sorts of selector types - CSS, XPath, or even custom.

You can easily select elements on the page using all sorts of selector types including CSS, XPath, or even custom

From this object we can call a method (essentially a function within an object) and use it to perform a task or change a property of the selected element. For example, if we wanted to change the background color of a paragraph that has an ID of “pink”:

$(document).ready(function(){
	// Change the background color of the following paragraph to red
	$('p#pink').css('background-color', '#FF0000');
});

Notice how the selector used here is CSS. At this point it’s also important to highlight jQuery’s chaining capability. As the method (in this case .css()) returns a new jQuery object, we can string these methods together. For example, if we want to change the background color and hide the element we would simply add the .hide() method to the end of the line!

The Interface

So now you have a very basic understanding of how jQuery works as a library, lets create an HTML document in which to build our interface. Start by copying and pasting the following code into the body of your document (within the <body></body> tags).

<div id="container">
	<div id="panels">
		<div class="panel" title="First Panel">
			<h1>First Panel</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p class="emphasis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="panel" title="The Second Panel">
			<h1>The Second Panel</h1>
			<p class="emphasis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="panel" title="Third Panel">
			<h1>This is the Third Panel</h1>
			<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="panel" title="Hello World">
			<h1>Hello World</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>

So we now have the content for our panels. Notice that there are no tabs/links included in the content. The tabs will be dynamically generated by jQuery, the beauty of this being that panels can be removed and/or added to the interface without changing any links or code for tabs.

The beauty of these tabs is that as panels are added and removed, the number of tabs will change accordingly as they are generated dynamically

Now we need to style the page to make it a little easier on the eye. Either embed the following CSS in the page or link to it in an external style sheet.

/* Set all elements to a default margin & padding of 0 */
* {
	margin:0;
	padding:0;
}
body {
	background-color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}
div#container {
	width:600px;
	margin:40px auto;
}
div#panels {
	border:2px solid #000000;
	padding:20px;
}
p {
	line-height:1.5em;
	margin-bottom:1em;
}
a.tab {
	display:inline-block;
	background-color:#000000;
	color:#FFFFFF;
	padding:5px 10px;
	text-decoration:none;
	margin-right:3px;
}
a.tab:hover {
	background-color:#333333;
}
a.tab-active {
	display:inline-block;
	background-color:#FF0000;
	color:#FFFFFF;
	padding:5px 10px;
	text-decoration:none;
	margin-right:3px;
}
p.emphasis {
	font-style:italic;
}
p.red {
	color:red;
}

So just to clarify, if you test your page you should currently see a centered box with a thick black border containing 4 headings and a total of 7 paragraphs. 2 of these paragraphs will be red and 2 will be emphasized (italic).

Lets Write Some jQuery!

For this tutorial we will write all our JavaScript within the same page, inside the <head></head> tags (the page header). Before we write anything though, we will of course have to include the jQuery library. You can download it here, or simply link straight to the jQuery site to retrieve the latest version. You should use this method only for development.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Now I think the best way for me to explain how our jQuery code will work is to include the whole lot below and then take you through it in bite size chunks. So here it is (be sure to include it within <script type="text/javascript"></script> tags).

$(document).ready(function(){
	// We can use this object to reference the panels container
	var panelContainer = $('div#panels');
	// Create a DIV for the tabs and insert it before the panel container
	$('<div id="tabs"></div>').insertBefore(panelContainer);

	// Find panel names and create nav
	// -- Loop through each panel
	panelContainer.find('div.panel').each(function(n){
		// For each panel, create a tab
		$('div#tabs').append('<a class="tab" href="#' + (n+1) + '">' + $(this).attr('title') + '</a>');
	});

	// Determine which tab should show first based on the URL hash
	var panelLocation = location.hash.slice(1);
	if(panelLocation){
		var panelNum = panelLocation;
	}else{
		var panelNum = '1';
	}
	// Hide all panels
	panelContainer.find('div.panel').hide();
	// Display the initial panel
	panelContainer.find('div.panel:nth-child(' + panelNum + ')').fadeIn('slow');
	// Change the class of the current tab
	$('div#tabs').find('a.tab:nth-child(' + panelNum + ')').removeClass().addClass('tab-active');

	// What happens when a tab is clicked
	// -- Loop through each tab
	$('div#tabs').find('a').each(function(n){
		// For each tab, add a 'click' action
		$(this).click(function(){
			// Hide all panels
			panelContainer.find('div.panel').hide();
			// Find the required panel and display it
			panelContainer.find('div.panel:nth-child(' + (n+1) + ')').fadeIn('slow');
			// Give all tabs the 'tab' class
			$(this).parent().find('a').removeClass().addClass('tab');
			// Give the clicked tab the 'tab-active' class
			$(this).removeClass().addClass('tab-active');
		});
	});
});

So there’s the full code and now here’s the explanation!

Creating A New DIV

// We can use this object to reference the panels container
var panelContainer = $('div#panels');
// Create a DIV for the tabs and insert it before the panel container
$('<div id="tabs"></div>').insertBefore(panelContainer);

Here we are first declaring a variable to store a jQuery object (the jQuery factory function returns a jQuery object). We will use this variable regularly throughout our code so it makes sense to do this because we can then repeatedly call and pull methods from this same variable. It’s easy to remember too!

We then use this variable to create the new DIV. Notice that when inserting something into the DOM the method used is called from the object containing the new code. The element that you wish to insert your code before is then parsed to this method.

Create The Tabs

// Find panel names and create nav
// -- Loop through each panel
panelContainer.find('div.panel').each(function(n){
	// For each panel, create a tab
	$('div#tabs').append('<a class="tab" href="#' + (n+1) + '">' + $(this).attr('title') + '</a>');
});

This part of the code creates a tab for every panel. On line 3 in the above snippet we find every DIV with the ‘panel’ class that is inside the panelContainer (’div#panels’) and perform a function for each one, by calling methods from the panelContainer variable created at the beginning of the script. .find() will find elements inside the parent element that match the selector expression. .each will execute the script that is parsed to it however many times it finds the element that it’s chained to. In this case, it is chained to the panels so it will execute the script 4 times. If you include a variable (in this case ‘n’) in the function that is being executed, it will then increment by 1 every time the script runs. It’s initial value will be 0.

In line 5 of the snippet above we are appending a tab to the DIV that we created at the beginning of the script (’div#tabs’) using the .append() method. Notice how we include a location hash in the href attribute (n+1). The href of the first tab will be #1, the second #2, and so forth. We will get to the purpose of doing this in the next section.

You will also see how $(this).attr('title') is used to get the title of the link. $(this) returns the parent element from which it is being called, in this case whichever panel it is currently looping through. The attribute method can be used in two ways; to assign an attribute or retrieve an attribute. In this case we are retrieving the ‘title’ attribute from the parent panel. If we wanted to assign an attribute to the parent element, we would parse two parameters to the method as opposed to one:

$('a#theID').attr('href', 'http://www.blemble.com');

Determine The First Tab To Display

// Determine which tab should show first based on the URL hash
var panelLocation = location.hash.slice(1);
if(panelLocation){
	var panelNum = panelLocation;
}else{
	var panelNum = '1';
}

This part of the code is actually pretty simple and doesn’t use jQuery at all. It simply grabs the location hash from the URL, removes the hash, and stores the number in a variable (actually it’s a string datatype but it doesn’t matter for what we need it for). If there is no hash present then it will default to 1. This functionality is not really necessary but when I think it’s quite useful. It enables support for a direct link to a specific tab. I can link to the second tab, the first tab, or even the fourth tab directly!

Show The Correct Panel!

// Hide all panels
panelContainer.find('div.panel').hide();
// Display the initial panel
panelContainer.find('div.panel:nth-child(' + panelNum + ')').fadeIn('slow');
// Change the class of the current tab
$('div#tabs').find('a.tab:nth-child(' + panelNum + ')').removeClass().addClass('tab-active');

Okay, we start this snippet by hiding all panels within the panel container (panelContainer) using the .hide() method. We could alternatively use .css('display', 'none'), it’s just that .hide() is a lot shorter!

On line 4 we then use the ‘nth child’ selector to find the panel that we need to display. We parse it the variable that we declared in the last section and it finds the correct panel. The .fadeIn() method is then called and you guessed it, the correct panel will fade in! See how easy it is to use effects!? Note that if you want to execute a a function when the effect is complete (a callback function) then you simply parse a function into the effect method!

panelContainer.find('div.panel:nth-child(' + panelNum + ')').fadeIn('slow', function(){
	// Do this when the animation finishes
});

After this, we select the #tabs DIV and find the tab that corresponds to the location hash using the ‘nth child’ selector. We then remove the current class of this element (.removeClass()) and add the class ‘tab-active’, which is specified in our style sheet. This will give the current tab a red background.

// What happens when a tab is clicked
// -- Loop through each tab
$('div#tabs').find('a').each(function(n){
	// For each tab, add a 'click' action
	$(this).click(function(){
		// Hide all panels
		panelContainer.find('div.panel').hide();
		// Find the required panel and display it
		panelContainer.find('div.panel:nth-child(' + (n+1) + ')').fadeIn('slow');
		// Give all tabs the 'tab' class
		$(this).parent().find('a').removeClass().addClass('tab');
		// Give the clicked tab the 'tab-active' class
		$(this).removeClass().addClass('tab-active');
	});
});

The final snippet of code assigns .click() events to each tab and thus determines how the application will respond to user actions. So as you can see, we loop through each tab using .each() and parse the method a function. We then assign click events to each tab and parse this method a function, which contains the actions we want it to perform.

You will notice that the code inside this function is very similar to that of the last code snippet. We first hide all of the panels, then show the required panel using the :nth-child selector. Then we take care of the tab classes and change them as necessary in order to make it clear to the user which tab is currently active.

Download the source code here

And that’s it, you have just made your first jQuery application and learned some cool techniques on the way too! Let me know if you found this tutorial useful and leave a comment.

Okay, so you’re new to the web industry and you want to get your teeth into the nitty gritty of web design. Do you go the full whack and buy a copy of Creative Suite from Adobe, or do you hunt around a bit more until you find something better suited and/or less expensive? Well if you’re reading this then I’d be willing to bet money that you’re going for the latter choice (don’t quote me on that)!

The good news for you is that there is some great software out there capable of getting the job done just as fast and just as well as the mainstream packages, the majority of them outlined here being more cost effective than their popular counterparts. One exception here is Adobe Photoshop. I use this software religiously and I think it’s fair to say that it’s pretty much second nature to any designer, hence it being in my list!

So here they in order of my personal preference; the software packages that may change or sculpt your working practices for life!

1. Coda - One-Window Web Development

This nifty piece of software by Panic is my favourite. It is essentially an all-in-one (very) easy to use web development environment. It includes some nifty features such as ‘Subversion’, a great source control tool enabling you to easily work within a team, an impressive find and replace function, and a great intuitive interface. What’s more, the full version is only $99 - a very affordable price and a great choice in today’s economic times.

So, download the 15 day trial and see what you think!

2. ForkLift - File Manager and FTP/SFTP Client

If you own a mac and you build websites, there is simply no option but to get this software. It makes ‘FTPing’ and even local file management a breeze. Upon installation it is very clear that the folks over at Binary Nights created this application with Mac users in mind. It blends into OSX like it was made by Apple themselves and performs pretty much like a native application would too! Highly recommended.

MAMP - Local Apache & MySQL Server

Good news: there is absolutely no need to mess around with trying to activate your Mac’s ‘built in’ web server. Just download MAMP, run it, and you have a local web server enabling you to develop powerful dynamic PHP and MySQL websites offline. It’s very simple to use; only a couple of preferences lurk behind the interface, and it’s free so there is absolutely no excuse. If you do decide to ‘go pro’ then you get the added benefit of being able to configure an unlimited number of virtual hosts, full DynDNS support, and the ability to dispatch emails through your PHP scripts.

Navicat - MySQL, Oracle, & PostgreSQL Admin Tool

Lets face it - phpMyAdmin is not the most exciting way to administer your database. Whilst I don’t deny that it is a useful tool, I personally prefer having a local application installed on my machine to interface with. It’s very easy to use and obviously works well with MAMP! Take a deeper look at all the features of Navicat.

Adobe Photoshop

Yep - I told you it was in my list! Photoshop is still the one piece of software that I use the most and I’d be crippled without it! I design all my layouts in Photoshop before slicing it all and ‘CSSing’ my templates. With the release of Creative Suite 4, Adobe have introduced some great new features. You can check them out here.

Combine all 5 of these great applications and you truely do have a recipe for web design success!

Get your sneak peak here!

Widgets are small applications that can be embedded on a page. Whether it be a blog, a MySpace profile or a web site, it is a great viral way of distributing your brand across multiple third party sites.

We have partnered up with dotdashcreate, the popular blogging network, to develop a exciting new viral widget and we’ve decided to give you a sneaky peak inside the Blemble lab

The widget will be distributed to all users on the network and has many cool features!

We looked closely at dotdashcreates’ competition and realized that much of the widget applications distributed by other similar networks were simply not pushing the boundaries in terms of functionality, aesthetics and usability.

We want to introduce a new dimension in our widget and raise the bar for other widgets. The first thing we thought of is to introduce multiple states in the form of tabular information. There will be four tabs; Updates, Info, Stats and Blogs. Users will be able to choose the tabs that they want on their widget, which is definitely something not done before by any competitors!

Updates

The updates tab will contain the users’ recent status updates and also display whether or not it has been submitted to Twitter, a popular micro-blogging service.

Info

This state will simply display the users’ profile picture, country of origin and short ‘blurb’ about themselves. It will also include a link back to their dotdashcreate profile at the bottom. This is a simple screen but very useful for users who simply want to have a short ‘about me’ section without the hassle of re-writing the content.

Stats

We thought it would be a good idea for the user to display how many blog views they have had, so we incuded this on the ’stats’ tab! This is something that (so far) no-one else is doing and we hope to mould it in to something of a unique selling point! We may also include a grid of user avatars on this tab, displaying the most recent visitors!

Blogs

This tab is pretty self explanatory and displays a nice little list of all the users’ blogs. This helps the user to promote their other ventures!

Full Gigya integration

Gigya provide some great widget distribution technologies. We will use these in the final distribution.

This will enable us to maximize the spread of the widget and make it truly viral. Users will be able to add the widget to their MySpace profiles, Facebook profiles, blogs and web sites all in a few clicks via a nice interface - no tricky stuff!

Other great customizable features

The widget will be fully resizable and will do so whilst keeping everything in proportion. This is a great advantage for the user as it can be moulded to their page perfectly, inevitably boosting the installation rate for dotdashcreate. The widget will also automatically inherit the background color from whatever page that it is placed on!