We often talk about how to make our websites more usable, whether it’s tweaking the HTML structure of pages to benefit the user’s process or figuring out how best to display a message via CSS. But we never bring this thought process into our jQuery-based (and other JavaScript-based) elements. How can we enhance the user experience and usability of our jQuery events?

Below, we’ll briefly discuss ways to look at the code and the result of our interactive designs and, thus, improve their usability. Most if not all jQuery is fired through events from the user, whether it’s loading new content, posting forms or simply modifying the presentation of an item. Such events are fired through a click from the user.

Read my article on how to make your interactive design and jQuery more usable at Smashing Magazine.

• Dropping support altogether, hoping the user will be encouraged to upgrade their out of date browser. This movement has only been re-affirmed by the likes of Youtube and Google dropping their support.
• Religiously supporting and catering for IE6 as there is too much of a market share of users to warrant dropping support.
• Looking at your website’s user base and logically thinking about whether or not (or if you are lucky enough to have tracking analytics to back it up) your website is likely to have users with IE6.

Personally the last option is my personal preference, and the perfect middle ground between the other two. Designers and developers are made happier knowing that they only have to support IE6 should the website’s user base require it.

If your client’s website is likely to be non-tech savvy parents, the chances of them having IE6 is relatively high. Therefore the requirement for support is there. On the other hand if you are designing a website which is most likely to be viewed by other designers or developers (much like Carsonified), the chances of them having a more up to date browser such as IE8 or Firefox is increasingly high, meaning support for IE6 doesn’t really need to be considered at all.

The State of Web Development 2010 report shows that 60% of us test for IE6 still, but I wonder how much of that is actually required by the target audience?

We all have our favourite CSS galleries. Ones which always prove helpful in giving us inspiration for our own designs, or ones which we just follow to keep up with current web design trends.  CSS Gallery Submission lists 288 active CSS galleries alone. The question is – do CSS galleries still work for their intended purpose?

No they don’t, and having run CSSbake for roughly 2 years now I have come to realise why this is true for most.

The web has evolved

When galleries were first being developed, the capabilities of CSS were somewhat unknown and held in high-esteem. Nowadays CSS is the norm, but a design is critiqued on the use of new methods and technologies.

Designs must now be usable and accessible to its target audience, JavaScript and Flash is used to create more playful designs and create a richer user experience. CSS is just a small piece of the larger picture. So how do we now decide what gets feature in our CSS galleries if a design is so much more than just the CSS?

Any design is featured

Time and time again I have looked through featured designs and been shocked that they have been featured at all. Designs used to be featured because they pushed the boundaries, they didn’t follow the latest trends and because they were highly visually affective. They were examples of what designers should aim to achieve – to set the standards.

This could be down to the booming popularity in galleries, meaning that rather than serving their purpose of showcasing high quality designs, getting featured is more about the hits that your site could receive.

And to me, that isn’t what its about. Yes, you should strive for your site to be featured by a gallery, but not just because you submitted it and because you want hits. You should want your design to get featured because it is seen to be high quality, setting an example to learning designers.

Online magazines round-up posts

Rather than subscribing to a CSS gallery’s RSS feed, web designers and developers are following online magazines such as Noupe or Smashing Magazine who regularly featured round ups of, what is considered, good designs.

However, this trend of round ups is slowly fading – or we can hope it is. Users who follow these websites are beginning to ask for more content rich and applicable articles and these website organisers are beginning to listen. This can, with time, see the focus moving back towards galleries.

So what can we do? Speaking to owners of CSS Galleries, I would urge them to start being a lot more selective of the designs they choose to feature. Build up a reputation of featuring higher quality designs which users will keep coming back to.

As web designers and developers I would want you to, and I would hope you would want to yourself, push your designs further and get yourself noticed for doing so. I’m sure the likes of Matthew Smith, and Elliot Jay Stocks did not get where they are now by following the trends.

Being in the web industry, we can never really say we know it all. New technologies are developed and released, new design trends are created, followed and therefore requested from clients. That is why it is important for us as developers and designers to constantly look how to improve our knowledge and skill sets.

Moving forward I will be scheduling time every week to each of the following subjects – much like a revision time table, except there are no exams at the end.

JavaScript/jQuery

As my header clearly states, I have a large passion for jQuery — the effects that can be created and the fact that it is so easy to pick up and use. However, my knowledge doesn’t go much further than the simple to implement effects. I need to do more reading up and applying more complex jQuery functions to my websites.

On top of this, I want to get a step further and learn more core JavaScript. As Stuart Langridge rightly stated at a FOWD workshop I attended, “If you are serious about  car racing, you need to know what is under the hood of the car to gain a full understanding of driving the car” (or something along those lines). So even though you might know the in’s and out’s of jQuery, extending your knowledge into core JavaScript can really benefit the effects you want to create with jQuery.

Usability/User Experience

Since starting my job, I have been conscious on how to progress my coding skills in order to give users a more user friendly experience, and also increase the accessibility of the websites. Having recently written an article for Smashing Magazine, ‘Usability Review of Charity Websites Taking the Lead’, has sparked a further interest in this subject.

There is talk within my work that I will be doing more Information Architecture work and helping make the websites we build more usable. I will also have the chance to over look some user testing soon, which as odd as it sounds, I am really looking forward to.

.NET

Working for a company which uses .NET technologies for all of their websites means I am surrounded by ASP.NET code day in and day out. Over these 2 years I have become confident in working around this code and manipulating it to render HTML will can easily be styled and suit the designs.

However I have a yearning to take this a step further and be able to create my own web applications. With phrases such as ‘Data Access Layer’ flying around the room, it is hard not to be intrigued and confused at the same time!

Luckily though, having a room full of .NET developers around me, and a tonne of books, I should have the resources available to me to become much more confident with .NET and not have to ask for help every time I hit a brick wall.

PHP

PHP was one of the first internet technologies I was exposed to, along with HTML and CSS. This, with my constant use and exposure to WordPress, has made me want to develop my PHP knowledge. Though this is lower down on my priorities, it definitely would benefit me as a developer in the long run – becoming more well rounded and having more exposure to different technologies cannot be that harmful, can it?

The benefits of having friends such as Jem and Amelie also means I have 2 very talented PHP developers at hand to rack their brains if needed.

Design

When I was first introduced to the web industry, I always had an interest in design, this is still the case and is also why I always put a lot of effort into the presentation of my front end development. Making my templates pixel perfect using semantic and valid code is something I aspire to all the time.

The reason I did not pursue a web design role rather than development was down to, like Stuart, the ability to churn out new and fresh designs day in and day out.

Even though I am no longer looking for a web design role, my interest in design has continued and thus led me to run a fairly successful CSS gallery, CSSbake. Having recently redesigned CSSbake along with Melissa, I have found the joy in designing for myself again and blown the dust and cobwebs off Photoshop.

The plan for the near future is to work on designing and developing free WordPress templates and Mint themes (one of which is nearly finished) to make available for download. So watch this space!

Over the years designers have pushed themselves to create unique and inspiring designs. Companies have yearned to have websites which are innovative and make them stand out against their competitors. Yet charity websites have not progressed along with trends and expectations — they seem to have been designed for launch and then only updated with minor tweaks to suit the content.

It has become a recent trend for charities to look at their online identities and branding; spending money on creating user experiences which suit their user base, and over time getting people involved with their campaigns and messages.

Read my usability review of charity websites on Smashing Magazine.

There are many tools currently available which designers and developers have become reliant upon to view their design in multiple browsers quickly and with minimal effort. Web applications such as Adobe BrowserLab, Litmus and BrowserShots all offer services where you can view static images of your website in multiple browsers.

Whilst using these apps are convenient for not having to have multiple browsers installed on your development computer, I am a firm believer that these tools only touch the surface. A screenshot only provides a quick glance at your work and cannot highlight any other problems such as unclickable links, JavaScript errors etc.

In the long run, it always proves invaluable to start up your website in different browsers. You may be surprised at what can be found by just trying to use the website as any other user would.

Below is a screen shot of benmacgowan.co.uk in Internet Explorer 6 (code altered for this example). By just looking at the screen shot, you would assume that the design works fine for the user, but what isn’t shown is that the links in the footer are unclickable for the user, causing increased frustration and a loss of user experience.

This can easily be achieved by using the for attribute:

<label for="inputSample">Label</label>
<input type="text" id="inputSample" />

Simple enough when coding with HTML, but with .NET Controls, it requires a bit more knowledge in achieving the same effect. From my own experience, you will come across the following problems:

• When using the for attribute, you need to know the ID of the relevant input. With .NET, the ID renders differently depending on the namspace of the page, whether is in a master page or user control. For example, if I were to give an input field the ID “inputSample”, this would render something a long the lines of “ct100_inputSample”, or within a user control “ct100_usercontrolName_inputSample”. So as you can see, ID’s in .NET aren’t as straight forward.
• Straight out of the box, the asp:label tag renders as a span on the page rather than the label we were hoping for. Which doesn’t really help when it comes to styling the form with CSS.

Therefore, in order to match the ID of the input and to render the tag as a label, we would use the AssociatedControlID attribute. By giving this attribute the same value as the input ID, the label’s for value and input ID value would match up. The asp:label tag also now renders as a label.

<asp:Label id="lblSample" runat="server" 
    text="Label Text" AssociatedControlID="txtSample" />
<asp:Textbox id="txtSample" runat="server" />

For added effect, apply a CSS style of cursor: pointer to the label so the user realises these fields are clickable.

When coding a link onto a web page, we have a number of options about the behaviour of the link e.g. rel, name, accesskey, title and target. In this post I want to talk about the target attribute and whether we should use the default (_self) value or change it based on the purpose of the link.

The most commonly used target attributes are the default (_self), which opens the link in the same window/tab and _blank which opens the link in a new window/tab. Both completely different and can heavily affect the journey a user has on the internet. If you are a developer, this should all be common knowledge to you, but if you are unaware of the values and what they achieve, you can find out more at w3schools.

As I mentioned above, the value you do select for your target can affect your user’s journey, but some developers think that it should be down to the user. Whether they want a link to open in a new window or not is their decision. So as developers should we determine what the behaviour of a link is, or leave it down to the user to right click and select their option?

Developers and designers should be steering our users – helping, not forcing. Like all other usability and accessibility techniques we use, we want to make their experience easier and more pleasurable. In most cases we know best because at the end of the day, it’s our job.

Internal links

Best practice is to keep any internal links as target="_self" thus preventing new windows being created every time a user navigates through your site. The only exceptions to this, logically, should be pop-ups and documents.

Pop-ups, however disliked they may be, will need to open in a new window. Otherwise they just wouldn’t be pop-ups would they?

“… but documents?”, I hear you say. Logically if you are linking to a PDF, or any document which may be viewable within a user’s browser, the first thing a user is going to do is close the document once they have finished reading. Therefore closing the window/tab without realising they have lost their place on your website. This way the document will open up in a new window, and once closed the user will find themselves back on your website ready to carry on browsing.

Documents which can be viewed within the browser can vary depending on what programmes, browser and plug-ins the user has got installed, but this way you can ensure that they either open in a new window/tab or it will default to open in an external application.

External links

Any links to external websites – any page which is outside of the current website they are on – should open up in a new tab using target="_blank".

Whilst this means that your visitors still have your website open, therefore raising the chance they will come back and browse your website more, it also means that from a usability point of view, the user can instantly recognise that they have moved away from your website and are now on another.

The only downside to this would be if the user does not have a browser which supports tabbed browsing e.g. IE6. Though there are very few of these browsers used, they do exist. If you are writing an article which links to multiple external websites, bear in mind that this will mean multiple new windows for these users.

After implementing their code, I still felt it was lacking slightly. Therefore I decided to develop the code further to give a cleaner finish and put jQuery’s animation to good use.

I felt the code should, once a thumbnail is clicked:

- Fade out the existing enlarged image

- Change the src attribute of the enlarged image

- Amend the alt and title values of the enlarged image (based on the alt of the thumbnail)

- Remove class="current" from all thumbnails and add to the click thumbnail

- Fade in the new enlarged image

For added effect, in the demo I have including a loading graphic which is displayed when the enlarged image is faded out. This is achieved by adding a background image to the enlarged image’s div

This may seem like just another Image Replacement Gallery script, but it can act as a great building block for more complicated galleries and once that I use often on my own projects.

View the finished code below or try out the demo.

The Code:

$(function() {
	// When a thumbnail is clicked
	$(".gallery .thumbnails a").click(function() {
		// Get enlarged image attributes
		var largeImg = $(".gallery .feature img");
		var largeImgPath = $(this).attr("href");
		var largeImgTitle = $(this).children("img").attr("alt");
		var largeThumbnail = $(this);
		// Fade out enlarged image
		$(largeImg).fadeOut('slow', function() {
			// Change the attributes of the enlarged large image
			$(largeImg).attr({ src: largeImgPath, alt: largeImgTitle, title: largeImgTitle }).load(function() {
				// Once image is loaded:
				// Remove class="current" from all thumbnails and add to clicked thumbnail
				$(".gallery .thumbnails").children().removeClass("current");
				$(largeThumbnail).addClass("current");
				// Fade in enlarged image
				$(largeImg).fadeIn('slow');
			});
		});
		return false;
	});
});

After trying to do this myself. I kept coming across the same problems and companies’ tricks to try and keep you as a subscriber.

1. Hidden links

It is common knowledge that ‘Unsubscribe’ links generally appear at the bottom of an email, but it does not really help when the link is hidden within a mass of terms & conditions, and the link is styled to match the text.

Can you see the link in the above Marks & Spencer newsletter?

2. Multiple clicks and Logins

Unsubscribing from an email subscription service should be easy – one click of a link and a confirmation page loaded to let you know that your request was a success.

However some newsletters tend to require you to click multiple links, fill out forms, or even log into sites which you may not remember your details to in order to unsubscribe. All of this just means more time and hassle for the user.

Apple.com Unsubscribe form

3. Unsubscribe confirmation emails

Just to add insult to injury – you have just been able to; successfully find the unsubscribe link in the email, logged into the website, filled out the unsubscription form – when you suddenly get another email in your inbox confirming you have successfully unsubscribed. Excellent – except why couldn’t a simple confirmation page after clicking the link suffice? The last thing any user would want is another email.

Conclusion

We all know that at the end of the day these ‘mistakes’ happen without the companies realising or even on purpose to try and deter their users from unsubscribing – more subscribed people means more marketing opportunities.

Personally, I quickly learn to ignore these kinds of companies. If I get newsletters or advertising emails from companies all the time even after trying to unsubscribe – I tend to just delete them without looking. A prime example of this is Apple. I admit I am a big fan of Apple with my iPhone and iMac, but I never read and always delete their emails. Why? Because they are such a big company I already know about all their latest products and price reductions, why spam my inbox with it?

So before launching that email campaign: think about the problems users may have I pointed out above and whether you are making the same mistakes. People do not like spam and particularly spam which they should easily be able to unsubscribe from. Don’t make your user think of you as annoying spam they cannot get rid of.