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.

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.

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 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.