Usability touches every part of your life. Think about it tonight when you drive home, get through your front door to uncork a bottle of your favourite wine and relax, while listening to your favourite music. 

The fact that you drove home in comfort and safety, got into your house, uncorked a bottle of wine and had the option of listening to literally thousands of your favourite pieces of music on your MP3 player without even thinking about it, is testament to how much usability touches your life.

What is usability (Usability Professionals Association)

In 2008, 16 million households, that's 65% of the UK, had access to the Internet.  Given this encouraging statistic, you'd be forgiven for assuming that now has never been a better time to launch a digital product, but research shows that users have also become a whole lot more impatient. 

On average, it now takes only four seconds for a customer to make a decision about the companies they interact with on the web, including whether or not they'll use their products or services.

With this in mind, it's essential for businesses to create products that meet their customers' expectations. The aim of the game is to create an online experience that will immediately engage customers, provide the products and services that they want and give them an online experience that is quick, simple and easy to use.

Traditionally, these challenges have been met technically by software developers. Websites have become more complex, and through the advancement of web 2.0 technologies there is very little to distinguish between a traditional software application and a website. But alongside the rise of technology and the Internet, legions of usability professionals have been quietly working to shape the web and make it more usable and more closely aligned with customers' expectations.

How does it work?

We all experience the efforts of these usability professionals but the truth is that most people still don't know what usability actually means and what measurable benefit it will bring to a business.

Usability professionals work with product developers to test how easy it is for someone to use their product. This is done many different ways but the most common are:

• User testing - a usability professional will watch people use something and make recommendations on how to improve it to achieve better results for the user.
• Expert review - a usability professional will review a product and make recommendations on how to improve it to achieve better results for the user.

Across a study of 863 projects it's been estimated that you can benefit from a measurable increase of 135% by setting aside 10% of your development budget for usability , as well as other benefits such as an increased in brand loyalty and word of mouth marketing.

What about accessibility?

Products have come a long way over the past 30 years, but there is still a long way to go. One area of usability that can be overlooked is accessibility.

From 1st October 1999 it became a legal requirement that:

Disability Discrimination Act

Accessibility is the term that describes a field of usability that aims to improve the usability of a product for people with disabilities such as visual impairment, dyslexia, hearing impairment and mobility problems.

It's no longer acceptable for a company to create a product without providing equal access to everyone. What's more, it's bad business! I can't think of any company that would say no to a share of the £50bn that the 8.6 million registered disabled citizens in the UK have to spend - or the £175bn the UK's over-50's have to splash out (most people over 50 have some form of impairment such as deterioration of their sight).

The secret here is that accessibility isn't expensive either, as long as it's designed into your website from the start. A few simple techniques can give you access to a combined market of £225bn and if that isn't enough, optimise for accessibility and your search engine rankings are likely to improve.

Google accesses your website in the same was a visually impaired user with a screen reader does, meaning that those same simple techniques will make it piece of cake for Google to find and rank your website. 

So how convinced are you that usability should be an integral part of your web presence?

And actually we quite like them. In fact, we like them a lot.

For those not yet in the know, MVC is a pattern developed to isolate business logic and user flow. Microsoft have now released an implementation of the MVC that allows the use of this pattern on top (not instead of) its ASP.NET Web Forms offering.

--------------------------------------------------------------------------------------------------------

Model:      In charge of data (updates databases, communicates with web services etc.).

View:        Responsible for displaying the data and allowing client interaction.

Controller: Determines which View is displayed in response to an action.

--------------------------------------------------------------------------------------------------------

The framework has been a breakthrough for us as a company, particularly for internal projects. It's facilitated a closer inspection of the way we work and enabled us to balance the project workload more evenly between different teams, resulting in less downtime. It's also given us a great way of helping less experienced members of the team to develop new skills by encouraging a richer understanding of how the Server Side (C# and ASP.NET) interacts, assembles and eventually renders the page.

First things first, we used a mind mapping application to draw out the structure in terms of the Models, Views and Controllers of the solution so we all had a visual representation of the architecture from the start.

After a few days we found it was more efficient to break the workload up into two teams, which fitted our internal working practices better:

• Team A - Models/ Controller (database/ web-service integration and assembling the data.
• Team B - Views (CSS and JavaScript)

Of course, we do get brought back down to earth with a bump sometimes and have to run projects for clients who don't allow us to use the latest and greatest technologies the community has to offer.  However, after reading through a specification from one of our clients that required integration with an existing codebase, it occurred to us that we just might be able to use the same methodology as we used with the MVC, with a few minor adjustments.

Best practice is common sense, but it's also interesting to shake things up a bit sometimes. So we took our new found love for the MVC, dropped the 'C' and started using an MV approach. The Controller seemed to add an extra level of complexity that wasn't strictly necessary as the page/View was already acting as the controller in this web form project.

Our goal was simple: use the MV pattern to create the models that could be used to drive the views in a way that allowed us to continue with our new MVC-based way of working.

After the initial project kick-off and design meeting, we began developing the interfaces for the models. Once we were sure we had the models down, we started creating some mock model objects.

As soon as they where mocked up, Team A and Team B started working on their allotted tasks. After a few days of hard graft - including the usual swearing and cigarettes - and half way through the allotted time, to our astonishment, we found that we'd completed the entire project.

We ended up with an easily maintainable, completely unit tested and timely project. Additionally the web forms weren't littered with various bits of data-access code intermixed with chunks of business and presentation logic...

Needless to say, we were all quietly impressed and treated ourselves to a couple of (extra) beers after work. 

While this is a bit of a mute point as pretty much consistently over the past 5 years 90% of browsers have JavaScript enabled, it is essential to be aware of progressive enhancement for accessibility reasons.

So here is a quick example using asp.net MVC and jQuery to provide overlay style popups which degrade to a post back model if JavaScript is disabled.

View Code HTML

<!-- Create a link labeled 'show overlay' which uses the 'ShowOverlay' action of the
'home' controller-->
<p><%= Html.ActionLink("Show overlay", "ShowOverlay", "Home")%></p>

<!-- Above the closing body tag include the following code -->

<% if ((bool)ViewData["ShowOverlay"] == true)
   { %>

        <div id="panel">
            <div id="Div1">
                <%= Html.ActionLink("Close", "CloseOverlay", "Home")%>
            </div>
            <div id="content">
                <h2>Overlay header</h2>
                <p>Dulce et decorum est pro patria mori</p>
            </div>
        </div>
        <div id="mask"></div>
<% }%>

View Code - JavaScript

/*On page load bind the 'ShowOverlay' function to click events of the 'show overlay' 
link and close link. */

var PageReady = function() {

    var ShowOverlay = function(State) {
        if (State.data.show == true) {
            jQuery("body").append('[Panel HTML]);
            jQuery(".close").bind("click", { show: false }, ShowOverlay);
        } else {
            jQuery("#panel").remove();
            jQuery("#mask").remove();
        };
        return false;
    };

    jQuery(".overlay").bind("click", { show: true }, ShowOverlay);
};

jQuery(document).ready(PageReady);

Essentially this is all the code you need to degrade the user experience. If JavaScript isn’t available the click events will never be bound to the link and therefor the page. will degrade to use a post back model.

However we need to create some code in our ‘home’ controller to show or hide the overlay on post back.

Controller - Actions

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["ShowOverlay"] = TempData["ShowOverlay"] == null ? 
                false : TempData["ShowOverlay"];
            return View();
        }

        public ActionResult ShowOverlay()
        {
            TempData["ShowOverlay"] = true;
            return RedirectToAction("Index");
        }

        public ActionResult CloseOverlay()
        {
            TempData["ShowOverlay"] = false;
            return RedirectToAction("Index");
        }
    }
}

There are a couple of thing happening in this example i’d like to discuss.

When we click ‘ShowOverlay’ the action ShowOverlay is invoked but i don’t want the URL to change to ‘home/showoverlay’ to get round the automatic URL rewriting I set TempData[“ShowOverlay”] to true and return to the ‘index’ action.

Currently the only way i know how to pass data between controller actions is to store the value in TempData, which i can then pass into ViewData in the target controller action to return to the view.

The second in the controller action is a lazy piece of code which sets ViewData[“ShowOverlay”] to false if TempData[‘ShowOverlay’] is null i.e. we never clicked the show or close links.

And that’s it - all you need to know to degrade a web 2.0 style overlay using progressive enhancement.

Take a look at an example page, where you can download the JavaScript and CSS.

Scott Gu has announced that jQuery is to be shipped with Visual Studio.

"I'm excited today to announce that Microsoft will be shipping jQuery with Visual Studio going forward. We will distribute the jQuery JavaScript library as-is, and will not be forking or changing the source from the main jQuery branch. The files will continue to use and ship under the existing jQuery MIT license.

We will also distribute intellisense-annotated versions that provide great Visual Studio intellisense and help-integration at design-time.

We will also extend Microsoft product support to jQuery beginning later this year, which will enable developers and enterprises to call and open jQuery support cases 24x7 with Microsoft PSS."

Well I'm glad to hear that Microsoft have finally caught up with us. At UX Media, we've been using jQuery as our JavaScript framework of choice since version 1.0.4.

For those of you who haven't heard of jQuery, it's a very lightweight cross-browser framework that easily allows you to manipulate the DOM to create JavaScript transitions etc.

For example, if you wanted to add some error text to a div you would write:

 var ShowJqueryError = function() {
    $('#ErrorMessage ul')
        .append('<li>Please enter your login name</li>')
            .parent()
                .show();
 };

This piece of jQuery will find the UL element which is a child of divErrorMessage and append the li error message to the list.

The quickest way to achieve the same effect with native JavaScript is:

var showError = function() {
    var errorDiv = document.getElementById("ErrorMessage");
    if (errorDiv !== null) {
        var errorList = errorDiv.getElementsByTagName("ul")[0];
        errorList.innerHTML += '<li>Please eneter your login name</li>'
        errorDiv.setAttribute("style","display:block");
    }        
 }

The two main reasons we chose to adopt jQuery as our JavaScript framework of choice were:

1. It's cross-browser compatible out of the box, which means we don't have to write bucket loads of code to ensure a consistent browser spread.
2. The selector style language (ID and class named base) is so close to CSS that the overhead of adopting it as our framework was low.

An added bonus is that it's quite fun to use too. Making it, for us, the best tool for the job.

Microsoft's support for jQuery is monumental, indicating a further shift in their attitude away from a command and conquer mind-set to creating the best development environment, whatever the tools.

You entered some information in to a form, pressed a button and the page was sent to a server somewhere for processing. The results were returned to you when the page reloaded.

Life was simple: Post - get response - reload page and move forward on your merry way.

Then JJG decided to blow the whole model apart by creating a cool name for XMLRPC (AJAX).This very simple act changed the 'transactional'  nature of the web. It was no longer cool to wait for a the whole page to refresh; people expected portions of web page to load asynchronously.

This new world of website has created a bit of a headache for the security bods because accompanying this new transaction model was a 'hailstorm' of new web services; little code islands a developer can contact to get information on everything from book reviews to weather forecasts to bank statements.

The thing that troubled the security bods now was how to ensure the credentials of the web sites connecting to a web service.

The answer was to enforce a sand box in the browser to prevent websites outside of the domain to connect to the web service. Very cool, except most web developers want to use web services from Amazon etc.

One easy way to get round this was to use Flash as a conduit for the AJAX request. However, Adobe have been very busy updating the Flash Plugin to enforce a tighter security model. This process started by requiring the presences of a crossdomain.xml file on the web service root.

At first, all you were required to do was include the following lines of code:

<cross-domain-policy>
    <allow-access-from domain="*" secure="true|false"> 
</cross-domain-policy>

So, OK, you can provide a domain name or IP address in the domain attribute to only allow access from a specific domain, for closed access.

With the introduction of Flash Player 9, Adobe have started to tighten the security model. Now you are required to specify accepted request headers:

<cross-domain-policy>
    <allow-access-from domain="*" secure="true|false" />
    <allow-http-request-headers-from domain="*" headers="*" secure="true|false" />
</cross-domain-policy>

And with the launch of Flash Player 10 the security is going to be even tighter. The culmination of all these changes is that a lot of Flash applications have the potential to stop working if the crossdomain.xml file hasn't been updated in line with the changes to Flash's security model.

Download a copy of our crossdomain.xml which works with Flash Player 9. We'll update it when Flash player 10 is out of beta.

This flexibility allows us to more accurately mimic the contextual setting of a target website, providing high quality results from quick user testing.

It's lightweight user testing with heavyweight return on investment.

Without the expense of maintaining full bespoke facilities, we can run a complete user test at a fraction of the cost. This allows us to provide cost effective solutions for a wide range of customers, from small businesses to large companies looking for quick turnaround improvements, enabling anyone to receive the benefits of testing products with users at any point in the website development process.

UX Media works directly with businesses and alongside web and software developments agencies, so give us a call on 023 8022 2254 or email us on info@ux-media.co.uk to find out more.