User focused web design

"Start by putting yourself in your users' shoes. Why are they coming to your site? If you look at some Web sites, you'd presume that the answer is "User is extremely bored and wishes to stare at a blank screen for several minutes while a flashing icon loads, then stare at the flashing icon for a few more minutes." Academic computer scientists refer to this process of fitting software systems to people as 'user modeling.'

Think about it for a minute: If a user wanted a flashing computer screen and confusing user interface, he could stuff a CD-ROM into the drive. He could get an even more enticing show without the crummy user interface by picking up his television remote control and flipping channels. If a user wanted product brochures, he could get them by calling manufacturers or visiting shops. If a user wanted fancy graphics, he could flip through dozens of pages' worth in a print magazine in the amount of time it would take to load a single corporate Web page.

Users come to Web sites because they have questions. They are not bored losers. Users are doing us a favour by visiting our Web sites. They are paying to visit our servers, if not exactly with money then at least with their time. We have to give them something of value or they will never come back.

Ever."

- Philip Greenspun, The Philip and Alex guide to web publishing

Designing for the user

Two questions issues arise on the web that do not usually crop up in the life of the average graphic designer:

What is my site giving to the user?
How easy to use is my site?

(On the other hand the latter does crop up on a daily basis in the life of the *product* designer).

The outlets for graphic design are usually easy to use; it is not that hard to flip the pages of a magazine and hopefully not too hard to change the channels of a TV. Even if it is hard, this is out of the control of the designer working on the advertisement or title sequence.

On the other hand the internet is hard to use. It is also frustratingly slow and generally a poor experience. Obscure site structure (worse: no site structure), hype instead of information, huge downloads, too little thought given to navigation and no user testing. As a consequence, users spend 90% of their time on 10% of the sites.

Likewise the question of what am I giving my user is crucial to any thinking about a website. Marketers and creatives do not have to worry about this too much when designing advertisements: the audience are not here to see them, they are trying to watch the program or read the articles. The problem when these techniques are applied to the web should be obvious: users have chosen to visit you and expect *you* to make it worthwhile for them (not the movie you're interrupting).

Some questions to be asked

Who are my users?
What does each user group want?
What can I give them that no one else can?
Are there any aspects of my dealings with them that could be done more efficiently online?
What information do I want to communicate and to whom.

Design to communicate
The idea that design should be about communication first and aesthetics second is paramount on the web. Users are in a hurry. Users find the web difficult. They need clarity. You need to get a concept.

What's your idea, concept, information? (a store, a brochure, a news website)
What is the best way to deliver it?

Design for usability
Too many designers take usability for granted, until they actually sit an average user in front of their site.

Usability lessons are not always easy to take. It is a painful experience to sit in the back room watching as a user clicks every button on the screen except the one button that "obviously" leads to the answer. The first time project members observe a usability study, they almost always lapse into denial about the true lessons of the experience.

Until we bring in the second user.

Usability is a topic too vast for this paper, but here are the main questions:

What is my site structure?
Is it reflected in my navigation?
Do my users understand it?
Can they find what they are looking for?
Do my links look like links?
Do my pages download quickly (page should not exceed 40k and should be as close as possible to 0k)
Are my fonts viewable on all computers?
What screen sizes does my site work at?
Have I tested my website?

Design to look great
A stunningly good looking and original website does not mean using all the gimmicks currently available. Remember the quark xpress school of typography: 20 fonts on one page because we can. In terms of making a great website, the traditional tools have not changed:

Perfect typography
White space
Composition
Colour
Consistency
Alignment

Problem areas
These are typical of current websites. Most stem from the fact that few marketing people have a serious understanding of the online medium and look at what they know for inspiration: advertising, film and print design.

Use of imagery to convey emotion
You're sitting in a deck chair, leafing through a magazine. A large picture of a sunset on an exotic island catches your eye and gets you reading about Singapore airlines fall 2001 offers. You'd rather be on the exotic island.

You sit at your computer, you are trying to find out what the timetable for Singapore airlines fall 2001 specials are. You'd rather be in your deck chair. The very large picture of an exotic island is taking several minutes to download. You lose patience. You go to Thai airways.

Several points about Internet audiences:

They are sitting at a desk
They are sitting at a computer
They are trying to get something done
They have to wait for large images to download
Once downloaded, images are surrounded

The first three mean that users are not receptive to emotional messages. As they are in an active frame of mind and are trying to get things done as quickly as possible.

The last two mean that the impact of such imagery will be seriously diminished by the context in which they are presented.

Repetitive background music is... repetitive.

Use of multimedia

In terms of delivering information, most multimedia based websites are simply making the process of hypertext more painful. In other words:

They do not deliver any extra information than a standard html would.
They lower the ease of use

The problem is fundamentally conceptual and has its origin in the fact that most designers and marketing executives are still firmly rooted in the old media. Thus multimedia based sites find their inspiration in the following:

Title sequences
Advertisement

And sometimes

Video games

Their main objective is to make the website more fun. More Exciting.

The point of a title sequence is to mark the beginning or the end of a movie or TV program as well as deliver certain practical info (what's it called, who did it etc). The point of an advertisement is to take advantage of a captive audience to deliver a marketing message. These two have at least one common point: they are generally very boring.

From the perspective of a moviegoer, a title sequence sets the mood for a 90 minute film. From the perspective of a web user, the title sequence is supposed to create an atmosphere to a hypertext system where they are going to spend 5 minutes looking for information. This just does not make sense.

Basing multimedia in advertising is similarly stupid. With very few exceptions, people do not like advertising, they endure it because they are captive. On the web the audience is not captive and if your website offers nothing more than slow loading advertisement they will demonstrate that loud and clear by leaving and never coming back.

Video games actually make some sense as a basis for a site. The problem here is that people that try and make their website a game don't have the content or the resources to do an decent game. The standard that we have come to expect from games such as Quake, Myst or Flight Simulator simply cannot be met by a couple of days spent with flash trying to make a brochure more fun. Secondly, unless the content is thought through in terms of game, the game is going to resemble delivering a brochure with a dice and only being able to look at the page you're lucky enough to draw. Games are meant to be challenging. Websites shouldn't.

The rubber stamp website

Certain companies have a website so they can put a web address on their business cards. It serves no purpose other than to be there, users are expected to visit once, admire the scenery and leave. Sometimes, that's all that's necessary.

I hate to say this, but there is something to be said for the gratuitous use of technology to enhance your image in those situations. We encourage our clients to think the idea through and find a way of presenting themselves that is original and effective, but many clients simply want a classical site with a jazzed up interface. Often this doesn’t create problems as the sites are sufficiently small for the unusable interface to work and users come expecting nothing (which is exactly what they get).

This is a fine line as web savvy users might simply get annoyed at the long download and find the whole site completely useless, but I have come across people who seemed genuinely impressed by the ability to make a cd-rom type website, and seemed happy to click on any button in order to make a noise. Note that they subsequently failed all the usability tests (user couldn't find information, did not remember what the company did and so on), but that wasn’t the point either. Of course they never
went back.

Flash

Flash deserves a special mention, as it is the most popular multimedia tool on the web. Flash is an excellent animation tool, but many websites that use suffer badly of poor usability as they use it instead of html although it is not really appropriate for building interfaces.

Searcheability
A flash site is a vector graphics program similar to illustrator. Making a website in flash is similar to writing email in illustrator. Practically this means that all text is rendered as graphics so:

Search engines can't read it
People can't copy-paste (for example an address)

The one movie website
One trick that flash sites often use is to have the whole website made in flash. Meaning that the whole site has one web address for the whole site, rather than one address per page.

The page is a crucial concept for the web. The idea that the unit of information has a corresponding individual web address underlies all the main functions of the web:

Linking
Bookmarking Navigating
Searching

Breaking this means:

Individual pages are un-bookmarkeable, un-emailable and un-linkeable
The back and forward buttons stop to work (clicking back after viewing a series of pages makes you leave the site rather than just going back)
If it were possible for search engines to index flash, it would also make it impossible for the search engine to link to specific pages

To get around the latter flash developers open the site in a new window with no toolbars. If they are generous they will provide you with their own controls (back and forward buttons, scrollbars etc).
A couple of points on that:

Users use their browsers all the time. They understand the controls and know where they are.
People such as Apple and Microsoft paid a lot of money to design things like scrollbars and back buttons so they would be very usable. Making your own in one afternoon is not going to yield good results
The relationship between your site and the rest of the web becomes problematic. If users want to back up from your site, they have to use one set of back buttons (yours) until the edges of your site, then close your window and carry onwith their own controls.

Another issue with the "one movie website" is that the whole website has to download before anything happens. A typical site on a slow connection could easily mean two minutes staring at a "loading..." message.

Plug-ins
Flash is a plug-in. while most users will have it, it is still worth bearing in mind that some will not and will not be able to see the website. Also, depending on the complexity and browser / plug-in / operating system combination, things can stop working.

File sizes
Properly designed flash delivers a lot for the file size, this is why flash has become so popular. However designers often fail to see the difference between fast flash (all vector based) and slow (bitmaps and music), making enormous files that users have to wait minutes for and deliver nothing that couldn’t be delivered in a 5 second download html page.

Processing power
Flash doesn't have to be, but can be very greedy on processing power. This means that your 3 second fade that was looking so good at 10-15 frames / second on you 1 GHz office machine could take 15 seconds at 2 or 3 frames a second on older pc's. As the previous point, this depends whether these issues are considered at the design stage. One of the main appeal of flash is that it is easy to use and is a lot less technical than other web production techniques (this is the other reason flash is so popular). Consequently flash designers are often the least aware or the least interested in these technical issues, although they have an overwhelming impact on how their work is experienced.

Double sites
The most common reaction to issues with flash is to make a second html site. The message being: "we made this site that is broken in so many ways that we had to make a second one." this seems like a waste of time and money that would be better spent on one website that works and that might integrate certain flash elements in it.

Upsides of flash - Flash as page elements
One reasonable use of flash is to use it instead of images within html, although issues with plug-ins still arise, it will not suffer the main problems of flash and can contribute to lowering the file sizes.

Upsides of flash - Flash as animation
For someone making an *animation* on the web, there is no competitor to flash. By animation, we mean something with a story, not an animated button.

You are not the centre of the world

Much of early thinking on new web project seems to be based on the idea that this website is the most important place on the web. While it is undoubtably the case for you (and so it should be), it is unlikely that the user will share this opinion. Opening in your own window, "Trapping" the user, removing the browser tools, all these serve the purpose of making it more difficult for the user to leave. Make no mistake, users will always find a way to leave.

As far as they are concerned, your site is just one stop in a browsing session. They are jumping from a different site to a specific page on your site, will spend some time on your site (if it's any good) and will move on. This is the nature of the web and all attempts to prevent this will simply mean that you will be excluded from further sessions.