Skip to a section of this page:

Ramblings

Archive

For Science! Aperture and the user experience

September 9th, 2010

I’ve been thinking lately about how best to communicate the different aspects of user experience (UX).

In the process I’ve been reading different books and articles on UX and in amongst the many and varied interpretations (For example: 1, 2, 3), I have started to see a trend.

Mike Kuianvsky talks about “functionality”, “efficiency”, and “desirability”. Don Norman uses “utility”, “usability” and “emotion”. Christian Rohrer’s simple model of user experience is similar with “utility”, “usability” and “brand experience”.

Whatever you call them, the consensus seems to be that UX is generally about the product:

  • meeting user needs
  • being easy to use, and
  • being desirable and appropriate in appearance or form.

There is sometimes disagreement about exactly where to draw the line between the three, but these general divisions certainly make a lot of sense to me, especially if we are discussing web products—and I often am.

Interestingly, in his book Emotional Design, Norman also discusses three levels of processing in the human brain: reflective, behavioural and visceral. I find this interesting because although there’s not a direct parallel to the three aspects of UX—the reflective level can be used to contemplate all aspects—there does seem to be strong linkages between visceral–emotion and between behavioural–usability. I would also say only the reflective level can truly evaluate the utility of a product.

With the general breakdown more or less sorted, let me share where I consider the lines are drawn between them.

Utility

As a sweeping generalisation, I believe this aspect is most often overlooked by web professionals and even UX professionals. I suspect this is true only because “utility” seems so self-evident that it passes by largely un-acknowledged:

Every product should serve a valuable function and meet the needs of it’s users.

This is so elementary, that often times we don’t question the value of a new product or feature. It’s possible to jump right into optimising how easy the new feature is to use before considering whether it is worth using at all!

I would say that a business analyst is well equipped to ensure a product has good utility, although they would need to bring their skills to bear on user analysis rather than business analysis.

Usability

This is the aspect I believe we all tend to know well. It covers how easy functionality is to find, how straightforward functionality is to use and how easy content or instructions are to read and understand. There are many sets of heuristics around to help guide interaction designers in optimising a product for user behaviour—my favourite are Ben Schneiderman’s—and there are many practitioners who are very good at finding usability issues through scenario-based user testing.

I would say that accessibility can affect all aspects of the user experience, but most accessibility issues will initially be issues of usability. From there, less-than-universal access can affect the utility and identity of the product for some users.

Identity

This aspect seems to be the most prone to grey areas in it’s definition. It covers aesthetics and desirability but also brand treatment and the emotional profile of the product. It even covers issues related to the personal identity of the person using the product (i.e: what does my ownership or use of this product say about me?).

Identity design takes the black magic out of graphic design. Once a visual treatment is chosen, it can be iteratively tested and refined like the other aspects of UX until it closely reflects the brand values and emotional profile that has been determined to be appropriate for the product.

Aesthetic treatment can also be used to smooth over some utility and usability issues. For example: If I am using an attractive product and experience frustration I am more inclined to give the product a second chance and keep trying than if the product is ugly. I reason that if the designers have put a lot of thought into the identity design I trust that they are more likely to have put similar thought into the product’s other aspects, so I will give them the benefit of the doubt… for now.

Don Norman presents the case that attractive things work better because an aesthetically pleasing product can help to relax the user, giving the brain a greater ability to perform creative problem solving and work around issues we encounter.

As customers, we may even be willing to make a compromise on utility or usability if the product makes a fitting statement about who we are or who we would like to be. Such displays of—very natural—vanity lead some people to decry “form over function!”—but as we know, aesthetics can have a more valuable impact than vanity alone.

Regardless of how it helps, good identity design can only compensate so far for deficiencies in other aspects of a design. Serious utility or usability issues will generally result in a useless or unusable product—unless it’s so attractive that it functions as art in it’s own right.

For science

So, where does Aperture come into this discussion? Well, I’ve hinted before that I enjoy the odd game. This odd game is one I have enjoyed immensely. The game’s developer—Valve—has user experience down to a science, so their Aperture Science Weighted Companion Cube® seemed a fitting example for the aspects of UX. A 1920×1200 pixel wallpaper version is available. Enjoy!

Zippitydoodah

August 30th, 2010

Finally got around to fixing my corrupt zip file issues. Fresh and flawless zip files are now available for the latest versions of all widgets and plugins.

BTW the compact content plugins have been updated with a bunch of small fixes (IE6 benefits the most from this release). See new examples, downloads and changelog for version 3.5.

Test support for short URL auto-discovery

July 6th, 2010

Short URL autodiscovery sounds like a good idea to me. The easiest way for a developer to integrate this mechanism is to use the link element in your document’s <head>, e.g:

<link rel="shorturl" href="http://irama.org/673" />

Or if you are using WordPress there are few handy plugins that do this automatically (for example: Short link maker and Shorter links).

So what?

But who’s going to know you’ve gone to all this trouble? How far has support for auto-discovery penetrated? I think it would be great if social media client applications would offer my short URL to users when they choose to shorten URLs within their posts, but I can’t find much documentation about which if any apps will pick up and use short URLs exposed in this way.

Go forth and test

This post can serve as a test, and a collection point for data, leave a comment if you have tested a new client application (include the version if known), and I’ll do the same.

ARIA keyboard navigation best practice

May 25th, 2010

I finished updating the ARIA keyboard navigation plugin tonight.

As of this version the plugin manages focus using tabindex alone, which means it functions in browsers old and new (whether they support ARIA explicitly or not). Browser support has been tested with Firefox 3.6.3, Chrome 4, Safari 4, Opera 10.51 and the Trident Trio (IE 6, 7 and 8).

During the refactoring I also managed to shave ~170 lines from total code weight — and this version has more comments!

Transformer transformed

May 15th, 2010

In light of increasing browser support for CSS3 media queries, I have spent some time today updating the transformer layout plugin in an attempt to achieve a seamless integration of the new CSS3 functionality for including stylesheets dependent on the browser’s current viewport width.

Most media query implementations I have seen use px units to define min-width and/or max-width limits. This approach is fine for browsers that zoom, but less than ideal for browsers that don’t. Not a huge issue when you consider that the modern browsers that support media queries all zoom by default! But fortransformer layout to retain support for older browsers that don’t zoom, em units would be the way to go.

Firstly, I ran some tests of current browser support for CSS3 media queries using em units, the results were:

  • Firefox (3.6.2) and Opera (10) support media queries with em units and load the correct stylesheet after zoom level change.
  • Chrome (4) and Safari (4) support media queries with em units but fail to load the correct stylesheet after zoom level change.
  • IE (6, 7 and 8 ) do not support media queries at all.

Alexander Farkas has a nice solution for detecting media query support and supplementing for non-supporting browsers but unfortunately it doesn’t support em units or compensate for Safari and Chrome’s insufficient handling of zoom level changes.

The new transformer layout plugin takes Alexander’s great work and rectifies both of those limitations so now it can be used to achieve an approach to layout optimised for all browsers, devices, resolutions, text sizes and zoom levels.