In my last post, I reviewed the code architecture of my playground site. In this post, I’ll explain its design.
I fear that the site will have all the charm of exposed pipe for the average Flash designer. My fear is based partly on my primitive graphic-design skills, but mostly on the unusual nature of the interface.
Here is the interface:
I’m not so much FOR the big wait as AGAINST the many little waits.
If a site forces you to wait at every step, it had better be porn or the equivalent. Otherwise the whole experience will be stilted.
The users want content, but you don’t know what it is yet. What you should you do?
Why not be presumptuous and GUESS? And load it in the background. Amazon makes guesses for particular users all the time…why not use the same probablistic algorithms to anticipate what users will solicit in bandwith-hogging sites?
There are many details that grate on me: the slow drop down menus, the ugly gray gradient background, the pictures with people wearing sunglasses that I can barely see, the labels that use all caps, the small, blurry font, the lack of a true home page (just a splash-page picture of a girl with wild hair, which, truthfully, would mollify me some if I could get back to it), and the totally boring implementation of the backwards/reflection/different view theme.
But what really gets me down about the site is the way the use of Flash actively detracts from my experience of the site.
1) It's slow. Each navigation entails the same transition animation. In the beginning, this animation acts as a preloader…but then, once the content is loaded, I STILL need to wait. WHY?
2) It's repetitive. How many times do I have to see the same transition animation? It gets old quick.
3) It's confusing. I want to see sunglasses. Where are they? The searches often yield nothing. It's not clear what I had been searching for. Once I make selections, I still need to press GO. Once thumbnails are loaded, I need to scroll (and the scrolling sucks). If I press the thumbnail, I get a medium-sized picture. Then I can press various buttons to get an even larger picture in a pop up (!), or some meaningless measurements, or (the button with the refresh symbol!) I can rotate a smallish 3d image of the glasses (talk about burying the lead).
It feels like every poorly designed site–arbitrary and disempowering. I always feel like I'm a dizzy, drunken trail of clicks away from where I want to be.
Thing is, I'm not some useability prude or text-obsessed Slashdot geek…I actually believe in the potential of Flash. This site could make shopping for sun glasses pleasurable and efficient. It does not…in fact, its html version is heads-and-shoulders easier to use.
In my last post, I suggested centering and tightly packing buttons in order to promote muscle memory for repeated navigations or combinations of actions.
This sketch shows a collection of such buttons, which are obviously too packed to label.
So how will the user know what button does what? It seems like I should go back to interface school, no?
Well…no, thank you very much. There is a logical solution to this problem: create a textbox, which I'll call "hotbox" just to be perverse. When the user rolls over the button, you can throw label text into the hotbox:
Before you knuckle-dragging traditionalists protest that I am trying to perfect perfection (the button, the label, a marriage appointed on high!), let's just consider the advantages of this scheme:
1. You can throw more descriptive text into the hotbox than can fit comfortably in a label.
2. Writing and graphics are cleanly separated.
3) It is easier to remember buttons based on location and performed action rather than text.
It's like a very easy game of concentration. The first time, you flip the card over (roll over). Afterwards, it is easier to remember "there, where I rolled" than home>company>info, especially it is "there, where I clicked."
Remember when you were in college and you were trying to find that line to quote? You knew it was on the upper left hand corner of the page, near the end of the first paragraph…but you had no idea what chapter it was in.
I'd argue that remembering points on a two-dimensional grid is more more natural–and faster–than climbing down the "string" tree: this category>that category, unless you're a descendent of Immanuel Kant, of course.
Category hierarchies are more convenient for people placing information than for people extracting information, so don't mistake your convenience for the convenience of the user. (As Yahoo did, to its detriment.)
4) Getting rid of labels frees up space for more buttons, so it prevents tedious drilling down.
5) The hotbox can be multifunctional. It could be the voice not only of the buttons, but tool tips, help, etc. That way, the user always know where to look for reaction, if she wants it.
(Perhaps optional text should be in a ligher, low-contrast color, so users can ignore it.
My months-long Goldilocks-like search for a decent AS code editors recently came to a blissful conclusion here:
I was in a long, bad marriage to the Flash editor, which I couldn't leave, because I was on OS X and the alternatives were buggy (the SEPY port to Mac, ASDT in Eclipse), expensive (FDT) or undeveloped (XCode, FAMES).
Reading about FlashDevelop (here) pushed me over the OS X edge: I got hold of a copy of VirtualPC, downloaded FlashDevelop (and the Microsoft.NET framework, which installation requires) and began coding…
The experience was trance-like. Now I understand why people get so attached to their editors. This one has all the usual features (code completion, class libraries) plus the almighty F4: press F4 while your cursor is over a word, and the editor brings you back to its origin (function or variable declaration or class definition), automatically opening files if necessary.
Typically coders laud editors because they save them time; FlashDevelop made me rethink their acccolades.
How much clock time does it actually take to scroll back to a functon declaration or open a class file? Yes, it adds up, but does it compare even remotely to the time you spend rubbing your temples or scribbling diagrams?
Rather tools like FlashDevelop make you more efficient by automating tasks that other otherwise interrupt the flow of your thoughts. They allow you to concentrate purely on the task at hand–the programming logic, for instance, not that ugly heap of conditional brackets.
More generally, the need for speed should be understood as a need to think clearly. The speed of Google helps me think: What are the best search terms? What, exactly, am I looking for? Conversely, waiting for a sluggish program to open up, I lose more than a few seconds, I lose the time it takes to re-establish my train of thought (if I can at all…I'm easily confused).
Random exasperation: swfs could be faster and more intuitive than html pages, so why are they almost uniformly slower?
