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.

Experiment Focus:

• flash.geom.Point;
• Line of Sight

View Experiment

I have updated all my previous posts, and updated my links. Hope you guys enjoy!

I know not everyone has a Webcam to use, so I decided: why don’t I make one that uses a .flv? So I sat down again, and tweaked my code a little to use a .flv instead of a camera. And boy did that stump me for awhile. Talk about hitting your head against a brick wall.

Of course, for me to work with video, I had to understand the mechanics of it in AVM2.

Working with flv comes in 3 lovely parts:

1. flash.media.Video();
2. flash.net.NetConnection();
3. flash.net.NetStream();

Now, simply put, your NetConnection is basically the URLRequest of your URLLoader class. You need to establish a connection to the internet first, before telling NetStream to connect through that connection (seems silly to me).

So once you’ve done that, you then have to call NetStream.play(path) to load the .flv. Strangely enough, you do not need to use URLRequest for this. I find this slightly offputting. But hey, I figured it out soon enough.

Of course now we get more confusing parts. NetStream has a little property called Client. This allows you to pass through an object which holds several Event Handlers (onMetaEvent for example), and uses it as a callBack. Is this only me that finds it inconsistent? This must be the most inconsistent class I’ve come across so far. Not to mention that some events that NetStream dispatches (NetStatusEvents) comes from the NetStream itself, and doesn’t need a object callback!

But of course, setting the client to the “this” was simple enough. So I got through eventually. Putting aside my little attempt to load a Youtube video (sorry GoogleTube! I won’t do it again. Please don’t sue me with your 1.65b capital) and fiddling around with policyFiles I ended up uploading a .flv myself which you can find at my labs.

On a side-note, I’m really getting into the graphics API. Except for any major tweening, I now do everything in AS. Go Me!

Experiment Focus:

• flash.net.NetConnection();
• flash.net.NetStream();

View Experiment

Its a small quick little ditty. You will need a webcam though. Just explore a bit and hopefully give some comments!

Experiment Focus :

• getCamera();
• bitmapData

View Experiment

Vexations is a seemingly short piece for solo piano, if it weren’t for the open performance directions:

“Pour se jouer 840 fois de suite ce motif, il sera bon de se préparer au préalable, et dans le plus grand silence, par des immobilités sérieuses“

This loosely translates to “To play this piece 840 times by yourself, it is advised that you immobilise yourself in preparation”. A live performance of this was conducted by a team of pianist cum contemporary composers (the only people insane enough to attempt such a feat) including John Cage, composer of the infamous “ 4’33” “. The performance had only 1 member in the audience: Andy Warhol.

This little app plays the piece, and repeats as many times as long as you keep it open. I finally got to experimenting with the computeSpectrum() method, which was highly interesting.

I couldn’t get embedFont working, so I gave up and stuck to device fonts.

Experimental Focus:

• SoundMixer.computeSpectrum()
• Sound
• TextField
  

View the experiment