The Hidden Side of User Experience Design
Thursday, 11 October 2012
 – Matt Krabbenhoft

Generally, when we talk about user experience design, we use it interchangeably with user interface design. Although related, these two approaches to interacting with the end user are two completely different animals.

The user interface of any product whether a physical object or a web site is an integral part of the overall user experience, but designing the user experience goes beyond just this one aspect. When designing a web site, there are number of technical considerations that need to be made when improving a web site or web-based application. Web site responsiveness is a huge factor in the usability of website and one that is many times ignored by web designers.

When you combine the file sizes of all the HTML, images, CSS and javascript files that are used today, you begin to understand that modern websites are much, much larger than in the past. If you're not careful, including AJAX on your site can add 100-300k to the size of files that need to be downloaded. In an age of ubiquitous broadband internet, that may not sound like a lot, but don't forget, not everyone is on broadband, modems still exist and there is mobile bandwidth and network load to consider as well. Best practices indicate that a streamlined site is a better site. So, what can we do improve the user experience in the background?

File Compression

There are a number of techniques that we can use to compress the size of files use by a website. Here are just a few:

Combine files - if your site uses multiple Javascript or CSS files, combine them into one large file.

Minification - This is a process of removing all unnecessary comments, white space, new lines and characters from a file without changing functionality. Minification can also include shortening variable names to single characters. In most cases, minification will make your file completely unreadable, but it an reduce file size by up to 80%. That 300k Javascript file turns into a 60k file. Both Javascript and CSS files can be minified.

CSS Sprites - Combine commonly used background images into a single image and use CSS to display different areas by changing the background position. A small portion of every file is used to tell the browser or operating system what type of file it is, when it was created, etc. That file header information can start to accumulate when you're using 10-20 graphics. For every image you can combine into a sprite, you can drop roughly 1-4k from your overall download footprint.

Gzip Compression - This is a server-level technique that basically zips up website content before it is delivered to the browser. Using Gzip reduces your web server's HTTP response size by up to 70%, which in turn reduces network response times. HTML is most commonly Gzipped, but Javascript and CSS files can also be included - something that is often overlooked by most designers. Don't bother using this technique on images and PDF files though. They're already compressed and you'll just end up wasting CPU time. Overall, Gzip is a very effective to improve web server response times.

Caching

A first time visitor to your site must download all the hidden files needed to display your site, but once all those files are downloaded, they most likely don't change very often. You can reduce the number of HTTP requests to your site by adding caching controls to your web server settings.

On the server side, you can set expiration policies for file types with known change rates - such as images, scripts and CSS files. This tells the end user's browser who long a particular file will be cached. If the browser can tell that it doesn't need to update the file, it won't send a request.

Content Delivery Networks (CDNs)

The closer a user is physically to the server sending the content, the faster the response time. So, deploying your content across a geographically diverse network can greatly increase response time. Private CDNs are the domain of large internet companies. For everyone else, there is Akamai, Edgecast, or other such services. Though these can be pricey, the ROI for websites or web applications with large numbers of users can greatly benefit from this approach. Google and Yahoo! allow the use of their content distribution networks for things like jQuery and other AJAX components

Minimize DOM Access

Once a browser loads all the HTML, CSS, images and scripts for your website, it combines it all into a single document object model or DOM. AJAX components like jQuery or Mootools access and alter the DOM to enable their functionality. The more often these scripts have to touch the DOM, the harder the browser has to work to produce the effects.

For example, if you have web application that returns 100 rows of data with a select box associated with each row and then you use jQuery UI to style all those select boxes, the user's browser is going to freeze while it cycles through the entire DOM to find each element and run a javascript routine to apply the styling. No user wants to wait 5 minutes while their browser churns through that much code.

Resources

For information on these and more best practices for improving website response times, visit these sites:

 

Tags


Powered by Easytagcloud v2.1

Web Hosting Available

Get a domain name for only $3.99 with the purchase of one year of web hosting or any other non-domain purchase.

Get Started ยป