The World Wide Web: A New Medium for Design

Here I will discuss the development of graphic design on the Internet, the problems associated with designing for this medium and some of the solutions. I will show how new technologies used in the creation of websites have solved many of these problems, but also demonstrate with examples of well designed websites, as well as those inconsiderate to the medium, how these solutions have brought forward issues about usability and technology informing design.

In order to fully research this topic, I have used books found on the subject in the college library, as well as industry magazines and articles on reputable Internet sites. These were BBC News Online, and usability expert Jakob Nielsen’s own site devoted to usability useit.com, having quoted him within the text from an interview with him on this topic found in one of the aforementioned magazines. I also visited sites mentioned in the text to get a first hand feel for them, and these were www.mtv.co.uk, www.radiohead.com and www.amazon.com during June 2001. It should be noted that these sites have changed considerably since then, so these links point to archived versions.

Introduction

The World Wide Web (or ‘web’ for short) has been in existence for just over ten years now, but it has only really become apparent as a medium for design during the last four years or so.

In its early existence the web, and the language used to layout individual pages, HTML (Hypertext Mark-up Language) was very much designed as a means of linking and displaying large amounts of mainly text based information. Layout and design was a minor concern during the early years of its use with emphasis put firmly on user-customisation with the ability to alter the size and colour of text and links.

In terms of design, most web pages of the time were grey with black text and blue links. Typography was also very poor with the fonts used depending on those again defined by the user. Other typographical elements such as line length line spacing, kerning and tracking and the ability to control them was also non-existent.

Tools

However, the mid to late nineties saw a dramatic rise in Internet use with every company and organisation wanting to make their presence felt on the web. This increased commercialisation of the Internet meant a greater need for well designed sites. Thankfully, at the same time HTML was becoming more versatile, allowing webpage designers to use new features such as tables frames, and animated GIFs (allowing basic animation). The release of Netscape 3 browser allowed greater control of typeface with the ability for the designer to specify fonts from a small selection of commonly installed typefaces.

HTML 4.0 saw the introduction of CSS (Cascading Style Sheets) and with it greatly improved control of typography. Working very much like style sheets in QuarkXpress in the webpage authoring environment, meant a designer could choose a typeface (still from a relatively small selection) as well as have control over line spacing, tracking, and the ability to fully justify text (common practice in print but until the introduction of CSS almost impossible). It also allowed precise pixel positioning of elements on a page using ‘layers’.

However whether users would see these pages as the designer intended is another matter as early versions of browsers don’t recognise such features, and later versions of different browsers display such pages differently.

For designers used to the control they have in print, designing for the web can be very frustrating.

Designers want what could be termed ‘What I See Is What You Get’, a system by which the typeface, colours and everything else that is determined by the designer appear as they were intended rather than as now, being customisable.

The frustration of designing pages for different browsers as well as their different versions and platforms is set to get worse as different devices such as PDAs, telephones and television are all now have the ability to ‘surf’ the web.

However designers are often accused of to easily blaming their tools for these frustrations without taking the time to learn all that they can do. Some argue this approach can lead to creators becoming more concerned with showcasing their technical skills, using every special effect available, rather than finding solutions for their clients needs.

One piece of software that has revolutionised design on the web was Macromedia’s ‘Flash’. Whilst it may have solved many problems associated with web-design, it has also created many others.

Flash enabled designers to produce animation, introduce true interactivity and allowed them more flexibility in their designs. With a control over typography close to that available in print, it allowed the designer to embed typefaces within Flash files so that they could be displayed whether or not the user had them installed on their system or not. Their work could also now be resolution independent so it looked the same regardless of the users screen size.

However, Flash is not an integral part of web browsers, and it requires users to download a specialist ‘plug-in’. This goes against the idea of the idea of the Internet as the great democratiser – designers insisting on such plug-ins and with it high-powered machines run the risk of alienating the majority of Internet users.

This was one of the central reasons for the failure of Boo.com – an Internet only clothing retailer that became a casualty of the ‘dot com’ collapse.

From the day it launched technology was a problem for the online clothes retailer. Originally it was supposed to launch in May 1999 but technical hitches delayed the unveiling. When Boo.com finally went live last November it’s ambitious technology was there for all to see – if they could be bothered to wait for it to download.

But it wasn’t just the use of the technology that was to blame; it was in the way in which it was used. The site used an array of graphics, pop-up windows, and 3-D imagery that was all hard to navigate around, leaving its customers lost and unable to find their way back to a starting point.

The relative success of other online stores – Amazon being the most notable and their use of more simplistic designs highlight how it is not so much how a site looks, but how it works. In fact the level of compatibility is quite detailed on Amazon – every page has the option to view text only versions for those using slow connections, and the site works well in most browsers.

The increasing use of Flash on websites has also sparked a debate as to whether it discourages usability. An expert in this field, Jakob Nielsen, is one person who thinks many designers are abusing Flash:

It’s poorly integrated into the hypertext medium, because you end up with two navigation spaces. You have the page navigation which is traditional hypertext, enabling you to click here to get to the next page, and click the back button to get to the previous one. But then you have the Flash navigation, which sort of sits inside of that other navigation – so if you click the back button, the entire Flash thing resets.

He has other concerns with the way designers use Flash, such as the use of non-standard navigation elements in their work, meaning that most users miss them or get confused, and how by designers insisting on the using Flash, distracts them from concentrating on a sites core values.

Designing successful websites

So what makes a good website? Nathan Shedroff, a creative director at Vivid Studios states there are six basic ingredients for a successful website:

1. Content: Perhaps the most important of all six, after all its usually for the content that users go to a site in the first place. If the content is interesting, useful and well-written people are likely to come back for more – especially true if it’s constantly updated.

2. Organisation and Navigation: Users are likely to get tired quickly and click away to another site if they can’t find the information they’re after, so how content is organised and how it can be navigated is crucial.

3. Visual Design: This is not only about making a site look good, its also about giving a site a unique look and identity. When it comes to branding, it is not only about the logo and visuals of a site though; it’s also about the users experience on the site – as shown in the example of Boo.com.

4. Performance: Although the delights of broadband (faster) Internet connections are reported to be just around the corner, it will no doubt take several years before they become standard, so it is important to make sure pages don’t take forever to download. The ‘30 second rule’ is often mentioned when talking about designing for the web, If after this time a page hasn’t finished downloading, many users will click away. In reality, it is probably even shorter than this.

5. Compatibility: Where most frustration awaits a web designer. As mentioned earlier, this involves taking into account the fact that the end user may be using one of a number of browsers, of different versions, on different platforms. The most successful sites are those that provide different versions for different browsers, or those that can find a compromise in their design.

6. Interactivity: You should build as much interactivity into a site as possible “particularly anything that allows communications and adaptive (or customised) experiences, as these provide the most value”

One recent example of a good interactive site is that of MTV2 (www.mtv2.co.uk). Here viewers can experience a real sense of interactivity not only with the site, but also with the channel for which the site accompanies. This is accomplished by allowing of the site to choose their favourite tracks and create their own hours to be shown on the channel. Other users of the site can then view these choices of music and e-mail each other about what they think. This adds a whole sense of community to the site.

The site is built in Flash and contains no HTML alternative for those without the plug-in. However, as the target audience is likely to be ‘e-literate’ and already have Flash, this is not so much of a problem as it could be for other sites. There is a good use of colour and typography, and an original but logical system for navigation using a system of three-dimensional coloured coded objects. There is further interactivity as the navigation includes secret areas that contain hidden games such as ‘Tetris’ and a typing toy, that hopefully with increased use, users should come across and feel rewarded.

Some may see this as an example that only good sites can be created if they use technologies such as Flash. I would disagree, as the website for the band ‘Radiohead’ aptly demonstrates. The design is regularly changed to coincide with the band’s album releases, and each time the site is very much an entity in its own right. The site always make the most out of the hypertext nature of the web, letting users make choices and find their own corridors through the site. As for content, this is usually in the form of

…sketches and ideas and images that don’t fit in anywhere… It has no news, no gig guide; no useful information at all. There are a lot of unofficial Radiohead sites that do what we don’t. We link to them because they’re useful and we aren’t.

So as a site then, it’s pretty useless, but as a means of promoting the band’s image (the site contains a lot of links to sites such as ‘Jubilee2000’ and ‘Reclaim the Streets’) and driving fans into a community of other fans, the site works well, and does what it needs to do.

Conclusion

From the areas of discussion above, it would seem there are two main issues. The first is a lack of standardisation in the medium, with designers spending large portions of their time and effort just getting their sites to work on a variety of browsers. The second is that, although Flash can solve many of these problems, some designers need to be careful that they don’t let the many abilities of such software influence their design. Also by using Flash their work will sit outside the traditional hypertext navigation, so great attention has to be paid to maintaining the same level of usability. If you have a good idea for a site, it will work no matter what technology is used. It also worth remembering that the web was primarily designed as a source of information, where ‘content is king’. If your site has interesting content, it navigates well and everyone can read it, you have won half the battle.

References

• Boer, L, Strengholt, G and Velthoven, W (1997). Website Graphics: the best of global site design. New York: Thames and Hudson Inc.
• Burgoyne, P and Faber, L (1999). Reload: Browser 2.0: The Internet Design Project. London: Laurance King
• Dredge, S (2000, September). Interview with Jakob Nielsen. Cre@teOnline, 26-29
• Drew, K (2000, August). Remote Control – Diary of a Launch: MTV2. Cre@teOnline, 36-40
• Franklin, D and Patton, B (2000). Flash 4! Creative Web Animation. San Francisco: Macromedia Press
• Nielsen, J (2000, October 29). Flash: 99% Bad. Useit.com
• Ward, M (2000, May 18). From Boo.com to Boo.gone. BBC News Online