Daryl Teo

I subscribe to the Papervision3D RSS feed, and once in awhile something interesting comes along and gets me thinking. This recent entry was as such: a gallery of sites that utilise Papervision3D to create new, innovative graphical user interfaces for their users. Looking at them got me psyched up to start on my own (long overdue) site.

However, going through some of the sites raised a common issue, and that issue is one of userability.

History

As someone in the comments noted, History repeats itself. Looking back to the early days of gratuitous .gif animations, unusable Flash websites, and then to the more recent AJAX revolution of Web2.0. Whenever something innovative comes forward, people struggle to find “proper” use for it, and instead end up throwing it all at the user in the hope that they will be “shocked and awed” by it. Perhaps, in the Dark Ages of Web1.0, this strategy would have worked (and it did, for a time). However, people on the internet are now tech-savvy: they want their stuff, and they know how to get it. To prevent them from doing so in any way would be a death-sentence to any website.

And yet even now, designers (and developers too) fall into the same trap of fancy (and I dare say artistic-wannabe) sites, but poor userability. So lets look at a few examples.

Case Study: Officinanessuno

A simple use of Papervision3D. The site itself is mainly 2 dimensional, but its navigation utilises Papervision3D. Unfortunately, this exposes the biggest flaw of this site. It is nearly impossible to navigate!

A screenshot. Notice how the designers decided that humans had the ability to turn their necks 90 degrees without trouble. Also note that items that are further to the back have less visibility: the designers have inadvertently reduced the amount of traffic to that particular section! So not only is it already hard to read a link, you can’t see all of them.

Luckily, there is a “Quick Navigation” button, but you shouldn’t ever need it.

Rule #1 : Navigation must be be a smooth experience.

If you look at the rule on its own, it seems to make sense. If navigation was such a pain, chances are you’ll get irritated that you had to put in that extra bit of effort whenever you had to transition to another part of a site. Navigation should require little effort on the user. You want to facilitate movement around your site, not lock them down at the front page!

Case Study: Varywell

Not one of the 16 sites in the gallery, but a good example nevertheless.

Personally, I like this site. It is minimalistic, without the clutter of information that might put some people off. There’s just 1 little niggle: its too bare. Look at this link.

Could you tell that was a Link? Perhaps. Now, where does that Link take you? A quick rollover will tell you:

Ah, so that’s what I’m looking at. But what about the other boxes?

Hopefully you, the reader, will understand the issue I’m highlighting here, which brings me to Rule #2.

Rule #2 : Links must be visible, and users must know what they do.

Rollover ToolTips are unforgivable, and this has to be the Number 1 userability trap common to many sites. Why should I, the User, be forced to work harder whenever I want to get information? Information should be freely and easily available, while Navigation facilitates the User’s movement through various parts of information. This is ESPECIALLY important for Portfolios. Imagine a potential user viewing your site, and wants to refer a particular work to his friend. How does he do it? If you’re using Flash, he cannot send a URL. If you had Rollover ToolTips? Now he can’t even give his superiors a proper link. (”Just click that 4th blue box from the left. You have to press the Right Cursor key 2 times. If you rollover it you will see ‘This Title’.”)

All is not lost for this site, however, for there is actually an effective use of Papervision3D in this site. One that enhances the feel and experience of the site, without reducing userability.

It is also worth noting that this feature is not linked to Navigation in any way. Which should be a big hint as to which section of a site you should and should not touch.

Final Case Study: Truth in Engineering (Audi)

This site’s navigation suffers from the same problems above, and this case simply highlights just how bad it can get, although it is my belief that the people who designed this mini-site probably went the route of “shock-and-awe” and decided that userability wasn’t a big deal.

Here we see infringements on both rules. Firstly, Navigation is not smooth. Sure, the effects, and the movements are cool, but the depth-of-field effect obscures the labels at the back (Problem #1), making them hard to read. The easiest way to read the labels without going crosseyed is to rollover the link (Problem #2). However, even that is not without its worries.

Here we see what happens when you rollover a link. It EXPANDS (Problem #3). One of the biggest no-nos ever. The first reason is that expanding Symbols usually have a sweet spot which causes the Symbol to “spaz-out”; repeatedly and rapidly expand and contract. Not very pretty. This site does not suffer severely from it, thankfully.

The next problem is that when something expands, the chance of something being obscured from view is very high. From the screenshot, you can see that links at the back are obscured from view. Not only that, upon rollover, all other links CONTRACT (Problem #4). Where is the logic in that? Not only have you covered links, you’ve made it harder for people to see other links. When I’m using a site for the first time, and I’m faced with blurred out links that I had to rollover to figure out what they did, and the site does this to me? I leave.

Conclusion

As previously noted, History Repeats Itself. Despite poor starts by most innovative products, many will eventually learn to do without, or master it and produce something of great value for us all. Hopefully it will be the latter which will push us closer towards true Web2.0. In the case of Papervision3D, a truely great framework that pushes new boundaries in Flash, it should be used only where it is appropriate. A great 3 dimensional User Interface is a worthy goal, but without taking note of the fundamental flaws in design that others have made, we will fail to make progress in the future.

Thus, I hope those who read this article will benefit from my observations thus far, and make their own observations as to what works and what doesn’t.

Comments are, as always, welcome.

Tags: Flash, GUI, Papervision3D, user interface, userability, websites

This entry was posted on Sunday, March 9th, 2008 at 9:33 pm and is filed under Articles, Flash, Papervision3D. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.