When developing any application, getting proper user feedback during the early stages is essential if you want to have the application suit your customers’ needs. Often this is done with staged tests, but with web applications you can have the benefit of using an online method of retrieving your users’ opinions.

However, doing so can be tricky. If you want to get feedback, you can implement your own system for soliciting it, however, this takes up extra time that could be used to further develop your core web application. Alternatively, there are some existing online services that can provide survey-like questionnaires to users, but honestly, these present more trouble to the user than they’re worth.

When I first started using Stack Overflow, I noticed that the feedback service they had been using, UserVoice, was an elegant and functional solution to this problem.

UserVoice takes care of the problem for you, by providing you with an easy-to-use comment and feedback forum. (It can also be a place where users can submit bug reports, as well) However, it’s more than just a forum: By allowing users to “vote” on particular topics, it allows clustering of the most popular ideas/requests, thus bringing them to your attention the most. It also helps prevent duplicate topics from being submitted, and is a great “Digg-style” way of using the “wisdom of the crowds”, as they say.

There are some drawbacks, of course. If you’re using it to allow users to submit bugs, I wouldn’t rely on it as your sole bug tracker. Instead, I’d use it to receive the reports, then parse through and verify them before adding them to a proper bug tracker (like Trac) where they can be better integrated into your development work-flow. Furthermore, if you have a popular site, the feedback forums can still become deluged in too many requests/ideas, but that is a problem no matter what type of system you’re using for feedback. And, as mentioned before, the voting system helps to bring to your attention the most popular ones so that you can further make a value judgment.

I’ve since launched a feedback forum for RunTrackr, my side project for the past little while. I encourage you to give UserVoice a try, since it’s so easy to get started - you’re literally up and running inside of two minutes. At a minimum, give their home page a visit - it does a great job of explaining the process in a simple and easy-to-understand manner.

A few things to note: Firstly, while the act of promoting or removing a search result seems very akin to Digg, the result is not the same. The changes you make only affect your own search results, and Google is very clear on this. However, it would be madness to believe that Google would not use the data gathered from this social experiment to further improve their algorithms. You also have the option of adding your own results to further personalize your searches and there is an option for seeing what others have recommended/promoted or removed, providing for an interesting social experiment.

Secondly, as this WSJ blog notes, this ability may annoy people who have used SEO tactics to improve their site’s placement in Google’s search rankings. However, I find this complaint misses the point: Search is supposed to simplify people’s lives, and if they’ve promoted or removed a link it was because they found something to be more useful or irrelevant.

This isn’t yet a “wisdom of the crowds” approach to search results, but its undoubtedly a step forward towards a hybrid approach that takes in more human input to determine the quality of results and their placement. One can only hope it will improve with time!

Okay, so maybe I’m being a bit melodramatic or maybe I’m just a bit stressed out. I had previously talked about how website purchase forms that require you to enter a credit card number in a specific format (e.g., no spaces) were poorly designed since most people don’t deal with large groups of numbers very well. Furthermore, it’s trivial to format the number server-side, so why require the user to? Well, today, I ran into a form that not only required you to enter all of the numbers without spaces, but also punished you if you did not.

A bit of background

I am a member of the IEEE. They’re a great organization, and I find some of their publications such as IEEE Spectrum to be fairly interesting. You also sort of need to be a member if you want to publish anything in the field (I did two summers of research while in university), and since I’m an Electrical Engineer, I feel that I need to be part of the largest organization dealing with the field.

So, when a renewal notice arrived in my mail recently, I didn’t hesitate to pay my dues to remain a member. (Well, actually, it sat on my desk for a week before I did anything, but my procrastination is another topic) I thought that renewal would be painless process; it started out great, because as soon as I logged into the site, there was a big button/link for renewing. Clicking it added a “Renewal” item to my cart.

Checkout, or, things take a turn for the worse

Clicking “Checkout”, I thought I’d just have to enter my CC number and a few details, and things would be done. After all, I’ve ordered a ton of stuff online and have never really had a problem. That was, until I encountered the payment form from hell. Just how bad was it? Well…

I enter my CC number in my usual fashion - groups of four digits, separated by spaces. I like to do this just so it’s easier to double check that I entered the correct numbers. I don’t really care if the server “requires” you to enter without spaces, since I usually just remove them myself before submitting. However, as soon as the credit card number field lost focus, after I tabbed to the next field, the form submitted!

After the page had reloaded, there was a warning in red text, “INCORRECT NUMBER OF DIGITS”, or something to that effect, pointing to the CC field. And, the field was empty. That’s right, it just blanked out the field without even giving me the faintest hint that it would. All my hard work of entering in a 16-digit number was gone, and I’d have to do it again. I didn’t even remember seeing an initial warning telling me that I couldn’t use spaces!

What really happened, of course, is that the form did not really submit. They had some messed up event handler tied to the blur event of the field which sent the value server-side, validated it by their stringent rules, and then loaded the page again if the entered number did not conform to their rules or if the planets did not perfectly align or something like that. That is just whack.

If you actually enter the number the way they want you to, no spaces, it still sends the value server-side, and the page still reloads - but now the credit card field displays not your full number, but just the “XXXX…” and the last four digits, typical of how most statements display it. Your CC number is then stored server-side in a session, I presume. Weird. Furthermore, the submit button of the form wasn’t actually a submit button, (of course…), but was instead a hyperlink with the href attribute set to javascript:someMethod().

Why this is bad

I shouldn’t have to explain this, but I will just because I feel like it. Firstly, as I mentioned before, it’s insane to require users to conform to the “no spaces in credit card numbers” rule when you can just process the number server-side to remove any spaces. But the IEEE form takes it a step further by not only requiring this format, but actively removing any data NOT entered in this manner. It should be a given that you never clear any fields in a form unless the user is given prior warning and confirms it. (This is also why “Reset” buttons should have some sort of confirmation against accidental clicks)

But to carry out all of this action right when the field loses focus is completely beyond me and probably where I lost it. This goes against everything “normal” in UI design. It disrupts your workflow, it changes the state without notification or warning and it pisses off users. A purchase form is probably the worst place to do this in, since you’re trying to facilitate payment from a potential customer.

But the idea that the user has to enter the data in one, very-specific way is just what peeved me off. Most people aren’t perfectionists, so why would you assume that they are when it comes to data-entry and then punish them when they fail to achieve that expectation?

Having strict data format standards for machine-to-machine transmissions is one thing. In human-computer interaction, it’s a whole different ball game, and one that whoever designed the form from hell, evidently doesn’t understand. I’m no usability expert, but I know junk when I see it.

Final words

Okay, so maybe I’m overreacting a bit, or a lot. Though this only wasted maybe five minutes of my time, I was bothered by it enough to write about it for a further ten minutes. You may think me stupid for that, but that’s just how I felt.

In general, security and usability often come into conflict with one another. After all, security is designed to make things tougher for the bad guys and usually some of this spills over onto regular, non-malicious users, making their experience often less easy than it should be.

One good example of this is with authentication. Authentication is perhaps the cornerstone of most computer security systems and is a crossroads where security, usability and other important matters meet. Designing a good authentication system requires consideration of all these points if it is to be effective at keeping bad guys out while still allowing normal users access. However, a few simple steps can be taken to alleviate the burden that such systems place on users. As an example, I’ll look at online credit card payment.

Already a nightmare

Payment by a credit card online can already be a tedious process. First you have to enter a long 16-digit number, followed by another number (usually called the “security code” or CVC), and finally the expiration date. (For those using “Verified by Visa”, you may also have to enter a password after this process) Compounding this situation is the fact that many payment systems that accept credit card info are horribly designed from a usability point of view.

If you buy a lot of stuff online, you’ll know what I’m talking about. Some sites warn you “not to include any spaces” when entering the credit card number. As if entering a 16-digit number wasn’t tedious enough, but now you’re forced to enter it without any separators of any sort. Long sequences of numbers are notoriously hard to discern or deal with for most people, which is one reason why phone numbers are broken up into chunks of three or four numbers, and why your credit card number is broken up into four-digit groupings in the first place.

Requiring the user to enter in a string of 16 digits without any spaces just to satisfy a system requirement is a poor example of usability, especially when it’s trivial to just strip out spaces (or hyphens or any separators for that matter) on the server-side.

Keep it simple

Furthermore, many sites require you to enter the expiration date in using a drop-down menu that often lists the textual names of the months, instead of its numeric representation. While using the textual representation is probably better in most situations since this is how humans naturally communicate, in the context of credit card info, a numeric representation is preferred. Why? Simply because that’s how it’s been done on the credit card itself. When you force the user to choose the textual representation of a month when the numerical one is listed on the credit card, this in turn forces them to perform the translation in their head, slowing things down. While this may seem like a very minor point, the idea here is to make things as streamlined as possible.

There’s hope

I recently used Google Checkout and was pleasantly surprised that they had implemented simple things like this to keep the purchase process as pain free as possible. Adding a credit card to use for a purchase was much easier than for some other online payment systems I’ve used. The card’s number is automatically formatted for you, adding dashes where appropriate, and not forcing you to enter the numbers in some specific way.

Furthermore, you’re not required to select what type of credit card you’re using. Google Checkout seems to automatically determine what type of card you’re using - MC, Visa, Discover or Amex - based on the number itself, highlighting the appropriate image icon of that card. Kudos to them for removing a potentially redundant step. Additionally, the expiration date is entered in the same MM/YY format as is present on the credit card itself. You simply enter in the digits, and it’s converted for you - no drop-downs required!

Google may may not be the perfect “do no evil” company anymore, but one thing I like about their services is that they’re often easy to use. Most of them are simple, and score high points with me for usability, and Google Checkout was no different. Here, they took a different approach to the task, resulting an optimal solution between security and usability. Basically, by using simple techniques to lighten the burden on users, they gained an increase in usability without having to trade away anything in security.

With all the good that Google Checkout is providing to its users, it’s a shame that eBay continues to forbid its usage on their site as a method of payment. This choice was obviously made to protect Paypal, the eBay-owned rival payment service to Google Checkout. Perhaps, and hopefully, things will change in the future.

Basically, a graphical command line is a command line that pops up on screen when you activate a keyboard shortcut/combo. This command line allows you to easily launch any program, file or action by easily typing its name. This offers you the advantage that good CLIs offer - such as auto-complete and speed-of-use, while retaining the advantages of the GUI. I recently learned of a Launchy, a nice program for Windows that offers these features. (Sort of like Quicksilver for Windows)

More than just a command line

Besides its fairly mundane appearance (though Launchy can be customized with skins), the Launchy interface can actually be one of the most powerful aspects of using your computer. When Launchy is first installed and running, you won’t notice a difference - in fact, you won’t even notice a space-stealing system tray icon. The command line window is brought up by pressing a user-defined hot-key. (By default it is alt-space, but I changed mine to ctrl-space, since the alt-space is already mapped to bring up a context menu for the current window, allowing you to minimize/maximize it fairly fast.)

Then, you simply start typing the name of what program you’d like to launch, and Launchy will look for matches. The list of matches pops up in an auto-complete list, and furthermore, Launchy seems to remember your usage habits somewhat, so next time you start typing, it’ll bring up the matches first that were previously used. Launchy is automatically configured to scan for all programs/links in your start menu, and also can be set up to scan other directories of your choosing. It automatically rebuilds the index after a user-defined period of time, so things are kept up to date.

The advantage of such a system might be lost on traditional GUI users, but anyone who dives into the command line will realize its benefit. Typically, input through a keyboard to accomplish actions is far more efficient that using a mouse. Take the Start Menu, for example. A typical computer will have dozens of programs available for launch, and finding the one you want in a menu can be a time-consuming and tedious task. By using Launchy, you can simply type a few letters of the program’s name, and it’ll pop up as an option. Launching a program takes far less time.

There are also a bunch of included plugins that allow for additional functionality. You can, for example, easily access all of your Firefox bookmarks, and also browse through directories/files from the command line of Launchy, further making it an indispensable application. However, perhaps the best part of Launchy is the fact that it’s open-source - that’s right, it costs nothing. So grab a copy of Launchy today!

An alternative to Launchy, which I have not tried, is Colibri. Give it a try, and let me know what you think.

More on why it’s better

As this article best describes it, a combination of the command line and GUIs is truly a best of both worlds solution. CLIs offer a “high bandwidth” input interface, meaning the choice of applications you can launch with just a few keystrokes is huge; this translates into a quick launch time because you can easily find what you want. GUIs offer a “high bandwidth” output interface, meaning they can convey a lot of information back to the user with graphics such as icons, drop-down menus, and the like. Combining the two gives a nice interface like that of Launchy’s.

In particular, I liked Launchy because I’ve been looking for ways to improve my productivity on the computer. Besides putting my most-used programs in the main level of my Start Menu (thus allowing them to be launched with two keystrokes), I was at a bit of a loss at what to do with other programs that I use less frequently. Launchy has solved those problems, essentially allowing me to launch most any program fairly fast. Windows Vista offers a similar feature in its new Start Menu (finding a program by typing), but I’m still running Windows XP and have no desire to upgrade to Vista anytime soon.

Perhaps the only problem with Launchy, has nothing really to do with Launchy at all. It is in fact the Paradox of the Active User, something that I’ve written about before in relation to design. Basically, the paradox can be summed up with the phrase, “Old Habits Die Hard”. Once most users have learned how to accomplish a particular task, they won’t be keen to learn a new way, even if that way is faster and more efficient - basically, they don’t like to take the time to learn a better way, even if in the long run it pays off.

I’ve been somewhat like this, having only recently enabled/started using keyboard shortcuts in Gmail and Google Reader. However, I’m trying to break these habits and by using Launchy more, I hope to transition to using the keyboard more to perform tasks, rather than just relying on the familiar but slow mouse.

I recently begun to clean up and organize files on my desktop. It’s been about a year since I built it, so as you can image, there were files and documents scattered all over the HDD in various unorganized and cryptically-named folders. This chaotic mess of files was making it hard to find anything, even with search, so something had to be done. I endeavored to organize everything into the “My Documents” folder for easy access from a variety of programs, and then remembered why I’d stayed out of it in the first place - all the clutter that’s already there.

Preamble

What spawned this attempt at organization was my recent purchase of an additional 500 GB HDD. Not wanting it to fall into disorganization like the primary one, I decided I’d bring order from the start. Since I intended to use “My Documents” as a root for all of my stuff, I moved it off my Windows partition to the secondary HDD, so that it grow in size and not fill up my primary HDD. While the technical benefits from this might be mute, it does make things easier when you store all of your personal data on a separate drive or partition than your Windows one - if you ever need to reformat or reinstall, wiping the Windows partition won’t affect the partition your data is on.

Running into trouble

It was at this point that I noticed all the stuff that was already in My Documents, the reason that I never really used in the first place - it’s already too cluttered. Most games will put their save game files in “My Documents”, and while I’m not opposed to this (it makes backing up and finding your saved games easier), I don’t like how they’re stored there. Most games simply create a folder in the root of “My Documents”, so if you have a lot of games installed, your folder will already be cluttered. It would be much better if all them adhered to some sort of convention - for example, putting them in sub folder called “My Game Saves” or something similar. Strangely, some of them attempt to do so, such as Age of Empires 3, TES IV: Oblivion and Civilization 4, which put their save games in the “My Games” sub folder. But, it’s not consistent, even with the same publisher - for example, Flight Simulator X doesn’t follow the same convention as Age of Empires 3. (I realize I could probably move all the save games to their own sub folder and edit some games’ configuration files to reflect this, but it’d be a major PITA.)

Furthermore, applications also add their own folders to “My Documents”, such as Skype, Windows Live Messenger, and Yahoo! Widgets. It’s not that I don’t think it’s a good idea to pair application data with a user’s profile, I just have a problem with where it’s been put. Shouldn’t “My Documents” be for user-created data, such as their documents, photos and other files? A separate folder could be made to store all the data that is associated with games and applications. Perhaps this is just how my brain works. But, I like it when I can put all my important personal files in one folder, and then easily back that up to my external HDD regularly. Even if you have backup scheduling software, a setup like this would make things easier.

For now, I’m just going to create a sub-folder in “My Documents” called “Documents” that stores all my files, organized of course, into their own sub-folders.

Another key feature was the inclusion of many inputs. Not only does it support the standard DVI and VGA connectors expected of any LCD monitor, but it also has composite, component and S-video inputs, making this of jack-of-all trades when it comes to displays. It also has a 4-port USB hub and a memory card reader built in, adding extra value. About the only downside I can think of is that I now have a reason to upgrade to HD-DVD or Blu-ray for movies!

Wide open

This was another big jump for me, not only because of the resolution change but also because it’s the first widescreen monitor I’ve used. Initially, I was hesitant to move to a widescreen aspect ratio, since some games didn’t support it, and so you’d either get a weird stretched image or black bars on the sides of your screen, depending on the monitor and videocard used. However, with the increased prevalence of the widescreen format (either 16:9 or 16:10 aspect ratio), game developers are including support for it more and more. Sooner or later, widescreen will become the dominant format, I believe. Just look at laptops/notebooks - the majority of them come with a widescreen nowadays.

The benefits of a widescreen can be numerous. Firstly, they’re better for watching movies, since they’re closer to the aspect ratio, and thus maximize the space better, leaving less vertical black space. It can also be better for general desktop work, as the greater horizontal space gives more room, all things equal. For example, browsing in Firefox is a lot easier since there is more room for tabs, so you can have more of them open without the tabs overflowing to a new row, or requiring scrolling.

However, there are also some drawbacks, especially when browsing the web. If you’re like me, you always browse with a maximized window, so that websites take up the full width of the display. This can be problematic for websites that don’t have some sort of limit on the number of characters per line, or the line length. Usability research indicates that there is an optimal line length when it comes to reading text, whether that optimal length is just a preference or indicative of something more basic. It’s similar to how we like to see a body of text broken up into smaller paragraphs, separated by whitespace.

Without a limitation on the line length, widescreen formats can make the reading area of websites longer than optimal, and thus perhaps harder to read. This effect is amplified when you’re running at a high resolution such as 1920 x 1200, so beware of this. Additionally, some improperly designed layouts “break” when viewed at higher resolutions, simply because these higher resolutions were not considered when designing the site. Remember, most people run at a resolution of 1280 x 1024 or lower.

Duality

After upgrading to 24″ of screen real-estate, I gave my old Samsung 17″ LCD to my parents, replacing their old 17″ Samsung CRT. Since I hate seeing stuff go to waste, I decided to set it up as a secondary display on my PC for some dual-monitor action. Why would you need a secondary display when you already have 1920 x 1200 pixels of resolution? Why not? My first idea was to use the secondary display to hold communication applications like IRC and IM, so they are always in constant view and don’t need to be alt-tabbed to. This can be a good thing, or a bad thing.

Another nice use of a secondary display is during web-development. I can code on one screen, and view the output on the secondary - this can be helpful when you have a lot of windows open and don’t want to keep alt-tabbing to find the right one. It’s also nice when you have a full-screen game/movie running on the primary, and have applications like chat/IM that you want to keep an eye on in the secondary.

There are, of course, downsides. Besides being distracting, and possibly detrimental to productivity, this also takes up more (physical) desk space, and obviously uses more energy, which isn’t a good thing if you don’t like melting glaciers or ice caps.

The old days

One thing I noticed after firing up the old CRT was how much worse the display quality was compared to any LCD. Text was not as clear, or vibrant as on an LCD; in fact it looked almost greyish, compared with the crisp text on an LCD. I just don’t know how I stared at these things for so many years. Maybe that’s why I now require corrective vision. Or, maybe I’m just now spoiled.

Wait a minute!

Now, some of you will know that I’m no fan of Apple fanboys, (or fanboys in general), but Apple does get it right when it comes to usability - people generally find Macs easier to use, and more intuitive. While their current line of commercials (”Hello, I’m a Mac…”) may be annoying, they are in general correct for the majority of users who just want to “get things done”. This can be further seen in the success of the iPod - its control interface is second to none.

What’s wrong with the UI in Windows?

There’s nothing wrong with the UI in Windows - it works just fine for me, and I don’t find that it gets in the way when I’m trying to get things done. But, for some people, such things aren’t so intuitive, perhaps because they don’t live and breath computers like I do.

The quick launch bar that comes with Windows is okay, and so is the Start Menu - but an application Dock is bigger, more visible and thus is quicker to use for the average user, such as my Mom. (Though some would disagree)

The choices

It turns out there’s a lot of other people who also want a Dock like Apple’s in Windows, since there are a plethora of programs out there that accomplish this. The top three I found were MobyDock, RocketDock and Y’z Dock. I only had time to try out the first two, and there were many more that I didn’t bother to look at, but I was impressed.

Both programs support easy drag and drop operations, so you can add programs to the dock simply by dragging an existing shortcut onto it; removing the icons from the dock is just as easy. They can also be positioned virtually anywhere on the screen, with offsets from top/bottom/left/right being allowed. They also feature the nice “zoom” animations as featured on Apple’s version, and have a small memory footprint.

They’re also devoid of any confusing jumble of messy configuration dialogs - the settings pages are very simple and straightforward, and the apps “just work”, so you probably won’t need to even touch the configuration pages. This is the way software should work, at least software intended to be used by the masses. Too often, software comes with too many options pages, making configuration both confusing and tedious. Usability testing should be done to find out what’s intuitive, instead of making a bunch of cryptic settings.

Out of the two, MobyDock probably offered more features than RocketDock, offering built-in widgets for Weather, Screenshots and a Clock. However, it also seemed to be a bit buggy, as it crashed a few times, so I’ll be using RocketDock since it’s for the parents’ computer, and they don’t need to deal with that. MobyDock also seems to have stalled in development, with the latest version being put out way back on November 18th, 2003 - by contrast RocketDock still appears to be continually updated.

Kudos to the developers of these programs for not only making a useful piece of software, but also for making them freely availabe.

Complicated!?! How?

Now, I know what some of you may be thinking - just how can using a mouse be complicated?. Well, it’s not that it’s compliated per se, but rather that the patterns of usage associated with the mouse take time to learn before they become instinctive. I can’t really remember the first time I used a mouse, (it was many years ago, and I have since filled and emptied my brain many times), but I suspect that I didn’t “get it” right away.

Take the example of the single-click vs. the double-click when performing actions in an operating system, such as Windows XP, for example. Even if you don’t have problems with fine-motor-skill and control, you still have to learn when to use what - and by learn, I mean to have the distinction ingrained in your mind so that you don’t have to consciously think about it when you want to perform some action that requires a single or double-click.

Will that be a single or a double?

The distinction between a single and double-click for actions may seem arbitrary, and, sometimes it is, and sometimes they can even perform a similar action, in different contexts. If you stop to think about it, there really are quite a few rules about clicking that can only really be learnt through time spent using a computer.

Usually, the double-click is used for opening things that are represented by icons, at least when they’re on your desktop or in a folder. This is to distinguish between the single-click action on these items, which selects them. This is a pretty easy difference to understand. For menus, the double-click usually has no meaning - a single-click opens the item. In this case, there’s no need to select anything, usually, so there’s no need for a separate double-click action to separate selecting from opening.

For text, a single click places the cursor at the location, while a double click can serve to select the entire word. Notice that here a double-click is the action that performs the selection function, and though this is the logical way of setting things up, it’s all part of a set of subtle nuances of mouse use that take time to learn.

Context

But, where things get complicated is on a medium such as the web, where the context is a blend of the two basic situations described above. As mentioned before, with icons, a double-click performs the open or “browse to this folder” action. However, on the web, almost all actions are performed with the single-click. To follow a hyperlink, the link is single-clicked, not double-clicked, following the guidelines of a text document rather than those of a icon-environment or context. (This also makes selecting hyperlinked text more difficult)

At first, this makes sense, since most of the documents on the web consist mainly of text. But, what happens now if the link consists not of text but an image, rather like an icon? The action remains the same, but the look has changed, almost to that of an icon - thankfully, most web-browsers change the look of the pointer when it’s over a link to remind the user that it’s a link, and hopefully, they will be adjusted enough to use a single click for all links and not be confused.

But where things get really tricky and confusing is in modern “web applications”, which are just websites heavily enhanced with JavaScript (or other client-side technologies) so that the experience of using the website is closer to that of a desktop application than a regular website. Some of these applications have really tried to emulate not only the functionality, but also the look and feel of desktop applications, resulting in some usability issues with clicking.

Take this comment by about the new Yahoo! Photos site; the user laments about the interface requiring a double-click to open a full-size image rather than just a traditional single-click as on most other websites. (The double-click detection is done via JavaScript)

I’ll admit that while I was first confused by this action, I thought little of that user’s comment - I mean, how hard can it be to learn a simple action like that? But, after some more thinking, I’ve come to agree with the comment - breaking the pattern of how a user navigates on a website is not a good idea, even if it’s done to try to make your website feel more like a desktop application.

Change is not always good

As long as the user realizes they’re on a website, they’ll continue to use it like one, with single-clicks performing actions. If you’re designing a web-application, you need to realize this, and shouldn’t break this functionality to try to “trick” your user into believing they’re using a desktop application. Even if you provide many warnings and notices, they’ll still be slowed down by this change if they don’t continually use your site - and you always want to keep the learning curve as flat as possible. And, let’s face it - while making interactive web applications is cool and I’m all for it, most people (e.g., mainstream) don’t really care and just want something that’s easy to use.

Furthermore, websites done entirely in Flash are still being pushed - indicating that proliferation of best-practices and advantages, as pertaining to web-design, are still not well known. Perhaps it’s time to outline (at least briefly), why doing an entire site in Flash is a bad idea.

A brief history of the problem

The problems leading to people designing entirely Flash-based websites are in many ways related to, or the same as, those found in the design of poor websites. If we understand why this happens, then there’s less ignorance - and hopefully less thinking that people who design entire Flash websites are “idiots” - they are not. There’s just a basic misunderstanding of what’s at stake, and problem compounded by standards not followed by either designers or browsers.

Alright, so what is wrong then?

To the average user, there’s nothing wrong with Flash-based websites. To many, they represent a unique experience - you’re able to do many things in Flash (such as animations, nice vector graphics, etc.) that you simply cannot do in regular XHTML. Additionally, nicely-designed Flash websites can look nifty and have that “wow-cool” effect. In fact, proper use of Flash can enhance a website without harming it - sIFR being the best example that comes to mind; furthermore, Flash games are probably here to stay. However, making an entire website in Flash can have many negative effects.

When I say “entire website”, I mean that all the content - text, links, pictures - is contained within Flash. This is bad, because it eschews standards-based content representation (like XHTML and CSS) for a proprietary format. Perhaps because of this, it also has negative effects on usability and accessibility - it’s often hard to search for text in Flash-based websites (the standard browser search doesn’t work), text resizing is difficult, and often widgets (such as the scrollbar) are re-designed or made to look different, which can be confusing to a user.

Furthermore, Flash content is hard for search engines to index. If you’re making some sort of website, chances are that you want it to be popular, especially if it’s a store. If you have your content displayed via Flash, it’s inherently difficult for Search Engines to get at it and add it to their index, thus making it harder for people to find your website. You have to take special steps to ensure that a search engine will index it - when just doing the website in regular XHTML would have probably sufficed. Additionally, this doesn’t help those who are disabled - Flash is notorious for being inaccessible.

But for me, the biggest problem is that the use of Flash sets the stage for bad design. Jakob Nielson sums this up best in his article, Flash: 99% Bad. (Sometimes I think he’s too pragmatic, but he hits the nail right on the head here.) The issue is not whether Flash is inherently bad - it isn’t - but rather it tends to be used poorly and creates issues. For example, Flash is often used for things that don’t add much value to the site, and in many cases, actually make it harder or more annoying to use. The things that come best to mind are useless fancy animations, and sound effects or music. A website that automatically plays music or sounds is one of my pet peeves - I make it a point never to revisit that site. I’m not sure how mainstream users feel about this sort of stuff, but I believe once the “wow-cool” factor of a Flash-based website has worn off, users quickly realize that they tend to be harder to use.

Additionally, Flash is used for things where it’s simple not needed. The most popular example I can think of is the menu of links most websites use. There is no reason to do this in Flash - as mentioned before, complex animations slow things down and detract from the content being presented, and furthermore, many of the animations can be done in JavaScript, with proper regards to standards and graceful degradation, something Flash does not do very well.

By graceful degradation, I mean how does your site respond when someone doesn’t support that feature? For most Flash websites, if the user doesn’t have Flash, they’re outta luck - they’re greeted with a very unfriendly link telling them to get the latest Flash player. Before anyone points out that “most people have Flash”, remember that accessibility also has to be taken into account. For people using speech readers this is a very important problem. And again, most Search engines don’t care for Flash.

Other problems with Flash-based websites are small but noticeable. They often break the back-button functionality, don’t work as great on slower computers, and usually take longer to load than non-Flash-based websites. These are the factors that make my cringe anytime I visit a website done entirely in Flash.

What can be done

Firstly, many of the problems can be traced to a need to add “neat” effects to a websites, such as the aforementioned animations and so forth. Much of this simply isn’t needed as it doesn’t add real value to the content, which should be the most important part of a website. While it’s true that many people will think that the effects are “cool”, effects are not what will keep users returning to a website - fresh content is what does that, and often neat graphical effects get in the way of displaying content in a fast and efficient manner, thus detracting from the most important aspect of a website.

I’m not saying that a website can only be done one way for it to be “good”. And, I’m not saying that a website must not have Flash in order for it to be good - there are many ways for Flash to enhance a site’s usefulness. However, designing a website entirely in Flash is a poor choice when the current drop of standards-friendly tools like XHTML, CSS and JavaScript were made for website design. Flash was not - and this is why the websites are inherently less accessible and usable. Designing using standards-based approaches doesn’t have to boring, and doesn’t have to result in websites that all look alike. One look at the CSS Zen Garden and you’ll it to be exact opposite of that.

Summing it all up

Flash is not inherently bad, but it tends to be overused to the point where many do consider it to be evil. This tends to happen when web designers haven’t read up on the benefits of standards or proper design. This doesn’t indicate that someone is “stupid”, but rather that they just haven’t been exposed to all the knowledge that is out there. Unfortunately, as with poor website design, it’s easy to start down the wrong path.

Furthermore, many of the criticisms about Flash can also be applied to Ajax, which I tend to promote instead of Flash. Unfortunately, it’s also easy to use Ajax improperly, and there are accessibility issues as well. Thankfully, these are being addressed relatively early in Ajax’s development, and we can only hope that it doesn’t suffer from overuse and misuse like Flash has.