PC Pro Real World Computing article
20/11/2006
From PC Pro website: http://www.pcpro.co.uk/realworld/98359/top-ten-tips/page1.html
Kevin Partner presents his top ten tips for making your web application a successful one
In this article I present my top ten tips for a successful web application design. How am I defining successful? Well, in the case of a shopping cart application, success means that the customer completes the checkout process; in the case of a hired intranet, it means the application is good enough that customers continue to pay their monthly subs; in the case of a Flash product configurator, it means the application significantly improves the likelihood of a customer buying something. Never forget that even where your customers pay before gaining access to your application, you'll almost always need to provide a free trial, and if that fails to impress you'll never see the colour of their money. So here goes:
1 Begin with a good design
The essence of a good application design is that you develop it with the needs and interests of the target audience in mind, rather than with what you think is cool or expedient. Simplicity is the watchword, so if it isn't needed, drop it.
2 Minimise the steps
You've taken the time to understand what your target audience will use the application for (and if you haven't, stop now and do it) so you'll know which functions they'll be using most often. It's essential you make using these functions as efficient as possible, most obviously by reducing the number of steps they take. For example, if you're developing an online photo-editing application for non-technical users, you might want to put red-eye reduction on its main toolbar, whereas something less used, such as skewing, could live inside a menu. Resist the temptation to fill up the user interface with options: you'll almost certainly find that most of the time your users employ only a tiny subset of the application's functionality. These functions - half a dozen at most - should be reachable quickly and with minimum fuss, which will create a positive impression of the application in your users' minds.
3 Assume no knowledge
In most cases, your user is going to be Mr or Ms J Public and they're likely to be far less technically proficient than you imagine. Many regular internet users don't understand terms such as Flash, HTML, plug-in or Shockwave, let alone ASP, SSL, POP or SMTP. Grasping this truth was like being slapped around the face for me, because I suddenly understood what crimes I've committed in this area over the years. I shudder to think how many wretched punters I've left scratching their heads in confusion over website copy that makes absolute sense to myself, the people who work with me and every other web developer, but is completely opaque to some of my intended customers. It's taken hundreds of emails from confused people asking what appear to be the most inane of questions for me to realise just how non-technical the average internet user is. I subconsciously imagined that since these people clearly knew enough to navigate to my site, they must therefore be comfortable with using the internet. It seems, though, that many, and perhaps most, people treat using the internet as a "seat of the pants" experience and are looking for a safe haven when they arrive at their destination.
One of the key changes we made in the site redesign of passyourtheory.co.uk was to remove all jargon (or, where that's not possible, to explain it) and assume absolutely nothing whatsoever about our visitors' technical ability. Since the Flash Player is required, it's essential that we explain exactly what that means and that it's a free download (many people don't know this). We also need to let the users know if they actually need to install anything.
4 Clear, consistent navigation
One of the first things a new user of your web application does is to find out how the navigation works, and it's absolutely crucial that they need to do this only once. Typically, a web application starts from a main screen that's both a launch pad for other functions and a summary page. While the other parts of the application will have different purposes, they should all feel like parts of a whole and, most crucially, wherever they include similar functions those functions should be accessed in a similar way. For example, if you supply a Print button on the main screen, that same button should be used throughout - you mustn't expect your user to look for the Print function in a menu in other places. This might seem obvious, but I've seen many, many web applications where it seems as though the developer stitched together entirely unrelated applets to create an incoherent whole (and, indeed, that's often exactly what did happen).
5 No user interface surprises
While you shouldn't assume much technical knowledge from your users, you do know that they understand the basics of at least one modern user interface, whether that's Windows, Mac or Linux. At the most basic level, the user interface elements of all three are pretty similar, and where they differ it makes sense to opt for the Windows implementation, given it has by far the biggest market share.
For example, unless you have a very good reason for doing otherwise, hyperlinks should be underlined in blue, as doing this means your visitors won't have to think twice about what a hyperlink does when it's clicked on - even the most inexperienced internet user very quickly gets into the habit of clicking on blue underlined text. Even more importantly, make sure you don't use underlining for anything else. I'm ashamed to admit that my own site committed this cardinal sin, which I find hard to excuse in retrospect since it even confuses me!
If you place a picture next to a hyperlink, make that clickable too. Don't try to emphasise a hyperlink by making it flash or cycle its colour, as your users will think it's an advert and do what they do to all advertisements; namely, ignore it. If you need to use scroll bars, use normal scroll bars. If you're using Flash to build your application, as I often do, use one of the bundled components rather than creating your own - if you re-skin them, stick to the basics. I've seen web applications where options or data remain permanently hidden from view because the scrolling mechanism isn't obvious. Remember your users are impatient: they don't have the time or inclination to work out how your site works.
The same goes for buttons: users expect buttons to behave like buttons; in other words, the mouse pointer should change shape when it moves over them and they should be pushable. You don't need to remain tethered to the drab standard Windows button, but your buttons should look like buttons. If you're using icons, stick to standard ones as far as possible - the icon for Save should be a floppy disk, not because it makes any sense (which it certainly doesn't nowadays if you think about it) but because that's what everyone is used to. Make sure every icon includes explanatory text, either as a tooltip or alongside the image itself.
Finally, make sure your application offers some sort of visual feedback when the user interacts with it. This might mean using bevelling to emulate the "pressed" state, or crawling ants or greying out. Web applications react more slowly than the average desktop application, so it's vital to let users know that their action has been registered while a response is being fetched. AJAX technologies can help with this task by speeding up the application's responsiveness to interaction, but the majority of web applications neither use nor need this additional complexity and for them it's essential that their users feel that the application is responding to them.
6 The text
There's a common thread running through all these tips, and that's to meet your customers' expectations. The only surprises should be pleasant ones. Limit yourself to two or three familiar fonts on a page and, if at all possible, stick to those your visitors will have installed already. If you're using Flash, you can embed the fonts, but don't use that as an excuse to increase the number of typefaces on a page. When it comes to text styles, less is definitely more. Stick to simple, plain fonts - Verdana and Tahoma are the current favourites. Remember that Comic Sans got its name for a reason and use it only if you're wearing clown shoes.
Make sure you test your site at both 800 x 600 (15% of passyourtheory's visitors still use this archaic resolution) and 1,280 x 1,024 (11% of our visitors use this resolution), as well as the more typical 1,024 x 768 (61% of visitors). And, of course, don't forget widescreen. Don't make your type size too small to read comfortably at higher resolutions and, if at all possible, ensure your design still works if the user changes the font size settings in their browser.
Identify the key message or purpose of your page and focus on that. Users tend to scan a page starting from the top left, passing through the centre to the right then back again as they go down the page. This means the most valuable location on the page is the middle, which is where the main activity should take place and the main message should be displayed. The area to its right is in the user's peripheral vision, largely because they look for scroll bars there, which makes it a good place to put important buttons. The bottom of the screen is largely ignored, so it isn't a place for essential information.
7 Minimise plug-ins
If users of your web applications have very short attention spans, prospective purchasers of your applications are even more impatient. Any barriers placed between them and accessing your application, such as having to download a plug-in, will severely reduce the number of people who sign up.
Adobe's Flash Player is the least off-putting plug-in, but the picture is clouded by the multitude of versions; the issue isn't so much whether you should use it, but which version to use. As I write in October 2006, just over 31% of visitors to passyourtheory have Flash Player 9, whereas almost 93% have a player compatible with Flash 7 content. Clearly, there would have to be a pretty compelling reason to require version 9 at the moment (and, as it happens, no Flash authoring tool yet outputs to this version). In general, aim for the lowest requirement possible, which these days means you're pretty safe with version 7, and even version 8 is nudging towards 90% penetration.
Using Flash can in fact reduce the need for other plug-ins. For example, one of the least welcome is QuickTime, which is huge and, until recently, quite buggy. Flash now handles streaming video very capably and even provides a tool that converts QuickTime videos to its own FLV format. There's really no excuse for using Director for developing web applications now that Flash is at least as capable and has a plug-in that's not only already pretty ubiquitous, but also less than half the size of Director's Shockwave plug-in. I'd be the last person to suggest that you should develop in plain old HTML if your web application could benefit from a plug-in, but just be certain that the benefits outweigh the inevitable inconvenience to clients.
8 Don't ask for more information than you need
We don't like handing over personal information unless we absolutely must, for fear of the torrent of spam we all imagine it will unleash. Every piece of information you ask for will reduce the number of people who continue through the process. Take the example of a shopping cart application: customers will expect and understand that you'll need their address if they're ordering something that needs to be sent by post, but they may not understand why you need their mobile phone number too. So examine every piece of personal information that you're asking for and remove any that's unnecessary. For any data request that survives this scrutiny, but whose purpose isn't immediately obvious (for example, that mobile number), you should explain why you need the information alongside its form field, and make such fields optional wherever possible. People guard their data very carefully, and you should make your privacy policy clear and upfront, along with the security precautions you take to keep their data safe.
9 Offer useful help
How often have you accessed a web application's help or FAQs only to find them completely off target? The only way to know what help will be useful to your users is to have a responsive support system that feeds back into the help system, so that your help becomes more relevant as your application matures and the calls to your support line reduce. The FAQs on passyourtheory (which contains several web applications) are constantly being updated, as we still get emails that reveal surprising misunderstandings by our users.
10 Make it responsive
Even for users with broadband or network connections, there's a noticeable delay between their initiating an action and the application responding to that action. Your user interface will indicate that the action has been recognised, as mentioned under tip 5 above, which will make the user less likely to multiple-click. But the fact remains that the connection between a web application and its server is always going to be slower than a desktop application reading and writing data to a local hard disk. This means that the amount of data being sent backwards and forwards must be kept to an absolute minimum.
I'm not suggesting these ten ideas will guarantee success, but I believe they provide a good framework when it comes to designing and developing your web application.