12.18.08

User Interface: When Good Design Meets Bad UX

Posted in donts, User Interface at 1:02 am by cygnil

Whew, it’s really been over half a year since anything was written here. I’ve got a good excuse for that (I’ve decided to become one of the devoted few making a RepRap from scratch), but that’s not why I come to you today. No, it’s something much more nefarious that brings me here. Hang on, because it’s a doozy….

A co-worker pointed me to an article posted at Cynergy Systems which outlined taking one aspect of a program written in Flash and converting it to Silverlight. I’ve been following both AIR (formerly Apollo) and Silverlight since they were first announced, and I think this sort of cross-conversion is a good way to discover the strengths and weaknesses of each platform.

The article itself could use a hefty bucket of red ink from an editor, but the information is there. What I’m boggling at, however, is the user experience (UX) at the site linked to in the article: the main page for Chromazone, a British print graphics firm.

The whole site is a huge Flash app. The jury’s still debating whether that’s a sin or not, so we’ll just pass by that for now (I notice they have an XHTML version of the site as well, so that earns them some design points). There’s a categorical navigation menu at the top, but if the user wants any actual information then he or she will have to click on one of the little buttons that appear scattered around the main pane.

Chromazone

Now, let’s take a moment here to admire the site. The whole thing is rather pleasing to the eye, the music in the background is suitably ambient, modern, and generally pleasant. The colors and shapes in the background which Mr. Fajardo at Cynergy Systems fell in love with are nicely combined, and the parallax effect (which has been used in video games since at least 1990) is well-executed. Windows have soft, round corners, and whoosh in and out of frame instead of appearing jarringly from nowhere. Beautiful graphic design all around.

But wait! As soon as the user moves the mouse to click on a link, the whole tableau moves in exactly the opposite direction! That’s highly distracting — in fact, it took me two or three times before I was able to position the cursor on the thing I wanted to click. The swirling, roundabout motions of the user’s cursor are reflected in the little navigation map in the lower left corner — that’s something which is fine in video games, but here it’s an absurd, ugly thing which should under no circumstances be required to find all the menu options in a web site.

Once the user succeeds in clicking on an item, a window whooshes into view with the content. The links, now shoved to the background, rotate and go all screwy for no defined reason. A few bleeps and clicks later and the user is looking at whatever the selected option was. For several things on the “About Us” page, this is fine. But hold on, how does one exit the window? Clicking anywhere on the background (still largely in evidence) does nothing. There are no obvious controls, just the same shape next to the title which got us into this window. Failing all else, I guess we have to click that….

Fortunately that works; the user is taken back to the main site, which skews back to a less head-tilting angle and lets the user zoom around with the cursor again. Now assume that the user clicks on “Introduction” or “People”….

Chromazone, Detail Text

Well, I’m not sure what to make of that. Just soak that in for a minute. There’s text going off the bottom of the page — for the “People” link, there’s a lot of text going off the bottom. Yet look at that tiny, tiny window. I mean, it’s minuscule! It’s the sort of window that probably has a Napolean complex and spends its evenings responding to spam messages about cheap Viagra in the hope that it might somehow, someday get big enough to hold all of the text. Some quick measurements show that even with a browser window set to 640 x 480, the text window — you know, the one with the information the user wanted — takes up less than a quarter of the screen real estate.

And guess what? Expand the browser window. Go ahead, make it as large as possible. Maximize it. That’s right, the text window stays the same size.

The coup de grace in this particular flurry of design abuse is that, since the scroll bar is clearly going to be required no matter what we do, the mouse scroll wheel doesn’t even work.

Sigh.

Okay, so having made peace with these particular visual vagaries, the user navigates to another section. Click, for example, on “Applications” in the top nav bar. Take a moment to appreciate the visual elements all over again, regardless of their function. Everything is so well put together, so calming, and the music and design elements have changed…. Just feel… the… calm….

All right, that’s enough. Time to get worked up about something again.

Click on any one of these elements, and the user is taken to a display of the talents this particular company can bring to bear on any project. Which would be nice, except, well… you can’t really see it.

Chromazone, Slide Display

I mean, look at that. It’s the tiny window syndrome all over again. This time there’s one window for text, and another for the tiniest, most Liliputian thumbnail the world has ever seen. Fortunately there’s not much text, but there’s also not much to be seen on the one thing which is really supposed to be selling clients on Chromazone’s services: the graphics depicting their graphic skills. Clicking the pictures doesn’t even zoom in on any larger versions — what you see here is what you get, and you have to make the decision to plop down several thousand British pounds on a couple of squints. Not an encouraging prospect.

Okay, so that’s pretty infuriating. But what really makes me livid is the same thing I’ve complained about time and again. Click between the top-bar nav items a few times and you’ll notice something pretty quickly: the menu items get completely rearranged. Nothing drives me battier than things changing around right when I want to find them quickly. I mean, being placed randomly on a page is one thing, but having the menu items change location every time you visit? How many people can there be in the world who think this can possibly be a good idea? More importantly, how many kneecaps do we, the mob of still-sane users, need to break on these people before the entire group will learn not to do this? I and my baseball bat, “Kneebiter,” are prepared to do whatever it takes.

Chromazone, Random Menus

As a quick side note, the randomization algorithm is pure and utter crap. Take a look at this arrangement: there are at least six menu items which are stacked upon one another, two of them such that you can’t even select the lower link.

Chromazone, Unecessary Options

The final insult is in the last menu option’s screen: “Contact.” This screen consists of a total of one — yes, one — link option. One option which was randomly placed off-screen when I visited it. It’s like Chromazone enjoys making users leap through unnecessary hoops.

Before I wrap up, I’ve got to finish by congratulating Chromazone. The site really does look and sound amazing, and they deserve kudos for that; it’s not an easy thing to make something so appealing and novel. It’s just a shame that the user experience is so abysmal. Next time how about putting a UX/UI expert on your design team, guys?

So, here’s the summarized list of what we’ve learned:

Lesson #1: Don’t play games of chase with your users if you want them to click on something. Especially with a business site: it’s supposed to be easy for the users to get the info they want, and taking them out of the comfort zone isn’t a good way to ingratiate anybody to your company.

Lesson #2: If you need a mini-map on your site to show the user where your links are, you’re doing site design very, very badly. Turn in your mouse and designer badge at the door and don’t come back.

Lesson #3: Give users an obvious exit option. If the user has to guess as to what closes a window — especially if nothing else can get done until then — it’s going to be frustrating and leave a bad impression of your site (and by extension, business).

Lesson #4: Make good use of screen real estate. There was no reason whatsoever for the background to take up over 3/4 of the space on any of these text items, and not making use of all that available space is like shooting yourself in the foot… with a Howitzer.

Lesson#5: Make scroll bars functional. If I’m going to have a postage stamp-sized view of the site, I’d like to at least be able to scroll the part with information on it rather than seeing more of the background (however delightful it may be).

Lesson #6: You’re a graphic company, for the love of all that’s holy! Get some full-sized, detailed graphics on the web! C’mon, guys, I mean… you just failed at the internet. All of you. (This goes for other companies too — if you have something to show, make sure people can see it well — but a graphic design company not doing this is like an airline grounding all their planes and then wondering why nobody flys them anymore.)

Lesson #7: Do! Not! Use! Random! Menus! Actually, you know what, guys? I’m just going to go in a corner and cry instead. Go ahead, use all the random menus you like! Just know that I’ve got another needle to jam in some hapless designer’s eye for every random item you code. It could be yours.

Corollary to Lesson #7: If you have any elements randomly placed, for love’s sake, at least make sure they won’t overlap one another. That’s just sloppy.

Lesson #8: If a menu has only one item, it’s hardly worth going through the whole display thing, is it? Just use that menu item as the actual link. Take us directly to the contact page in this case, and don’t make us use your terrible cat-mouse-game interface to hunt for and click on that one precious item.

Lesson #9: Hire a copy editor for your public site. This goes more for Cynergy Systems than Chromazone, but even Chromazone had a lot of mistakes in their grammar. Yes, Chromazone is British. Some things (like possessive apostrophes) are universal throughout English dialects, though. Sloppiness is unprofessional.

Leave a Comment

You must be logged in to post a comment.