The diaphanous machine
Graphic designers
organise content so that readers can see through the whole before focussing
on the details. On the Web, this complex task is more difficult and more
important
I got shocked lately. After downloading the newest version of Netscape Navigator (4.03) I went to pay a visit to their website. It's homepage looked like my doormat does when I come back after a holiday: a rampageous mess of envelopes, papers, flyers and assorted junk mail. Colourful, but desperate. Netscape's new set-up makes it possible to pile an amazingly similar heap of layers, frames and toolbars onto one screen. The result is that the user spends considerable time brushing aside the adverts, advertorials and directories, swallowing dozens of 'cookies' in the process, before ending up with a paramount question: what on earth is this site about?
It turns out to be the wrong question. As David Sippey in his weekly column on his the web-critical site 'Stating The Obvious', concluded: "This is not a site, this is an application". So here at last we have reached a seminal stage: that we have an on-line application that succeeds in perfectly mimicking the visual chaos of a real life doormat after the mailman has passed. Technologically, I'm sure, this is a giant step forward. But my shock came from the apparent absence of any graphic design input in the structure, lay-out and form of Netscape's homepage, proudly announced as sporting "a new look as well as an innovative JavaScript based menu system, using Dynamic HTML." Why would anyone want to cramp so much information in an area of 640 by 480 pixels, and leave us so in the dark concerning what that information is all about? Admittedly Netscape's core business - making web browsers and distributing them through divers channels - is easily accessible. If visitors to the site come to find information about the company, its products or ways to download them, they will find that by clicking the appropriate words. This most obvious of interfaces is doubled on the page (tripled actually - it's at the bottom of the page too). But what's the rest about? And why would I be interested?
Here, a few classic aspects of graphic design - in any medium - have not been considered at all: to order information by visually organizing it within a given space; to make unequivocal hierarchies of formal elements; to avoid redundancy and clutter; to clarify the content. But then again, maybe these criteria don't work for web applications the way they work for paper pages. Graphic design as it used to be was concerned with static information, formulated within fixed borders. On the web it's not the same; there it's all about navigation in as many directions as possible. One can scroll horizontally and vertically, so why not scroll in three dimensions? That is basically what Netscape's 'Dynamic HTML' site tries to accomplish, by boasting that it "lets you travel five levels deep into the site."
If that is the case, then there is something seriously wrong with the road signs. Set aside whether there is any need to access everything from one tangled heap of layered interfaces, the question of how one would be able to choose any of the myriad links, without at least a vague idea of where the road will lead to, remains. A lot of corporate websites nowadays work this way, by baffling the visitor with a stupefying amount of hot catchwords, technical fireworks and slogans about how great it all is, without giving any concise clue about the real content of the site. First of all this is of course an editorial problem. If the client finds everything they have to show equally important, an uncritical editorial brief to the designer might - and often will - result in showing off everything at once in no particular order. You can do that, but it will most probably confuse the viewer to the point of quitting altogether.
www.v2.nl
There are however visually rewarding ways to show everything in a single sweep, and one of them has become quite popular on the web: the site map. In essence this is a condensed 'flow chart', a graph that shows the links and hierarchies between all the parts or 'pages' of a site. A map has the advantage of showing the entire site as a coherent complex of elements. But it mostly doesn't give introductory information about the contents of the elements. As is the case with real maps, the site map is an interesting tool for someone who has a basic idea of where to go from where. Those who don't have a clue, get lost. So, aesthetically exiting as it may be, the site map is not the definitive answer to navigation on a website - it's an additional tool.
Mediamatic: flowchart for CD-ROM
Some of the most effective and graphically rewarding solutions for this kind of problems - how to give an informative overview of a site's content - are basically reworked print metaphors: the content page and the glossary. Just listing the site's content in 'chapters' and clickable titles gives the viewer an immediate overview of what is there and where to go, provided the 'chapter titles' name categories that are easily understood.
www.sva.edu
Another print based tradition also lends itself very well to introducing a site and its contents - a succession of screens very similar to the succession of cover, frontispiece, title page, french page and contents page in classic book design. This way of welcoming visitors and introducing them to the content may take some time and bandwidth, but it is far more respectful than just throwing a heap of information at their feet. Opening a site with an animated maxim, a succession of short introductory texts or images, or an audible word of welcome is a friendly gesture, like a handshake, and it can help to make the acquaintance last. This kind of introduction also shows how the web is different from a book: it moves. So the opening of a site can be seen as akin to the opening titles and sequences in films or television programs. Similar to the role of the overture in these media, the introduction to a website can fulfil more than just an informative function - it can be entertaining, inviting and full of suspense as well. Many elements in on-line media that at first view can easily be associated with graphic or typographic tradition likewise assume additional roles. The fact that titles and headers can link directly to disparate parts of the content makes them structural elements on a screen with far greater impact than they would have on a page. Illustrations and images that would have a purely decorative effect in print can be pictograms, readings and buttons on a screen. Conversely, sound can acquire a typographical function when it is used to emphasize or confirm an action on screen: by echoing a mouse click or directing the viewer by speech in stead of pointers.
All of these elements make the web a strangely hybrid medium, with functional, psychological and sensorial aspects of such divers and sometimes incompatible experiences as reading a book, watching television, browsing a catalogue, playing a game or tuning a radio. Designers of websites can decide how they mix these elements, and they will have to, because is this mix that greatly determines the 'look-and-feel' of a website. There are sites that entertain first and inform later, obviously based on the assumption that an amused visitor is an attentive visitor. The site of Hong Kong based web designers Lemon 'feels' light and slightly ironic, because they play games with the medium and the viewer, and with their own commitment to this great new medium. All the same, they manage to be serious about it as well, and of course in the middle of the assorted jokes on the site is a portfolio and a mission statement.
www.lemon.com.hk
Similarly the partners of Obsolete (now Lateral), the London design studio that made the highly praised Levi's website, refer to their page of collected jubilant press clippings as 'The Hype'. The New York School of Visual Arts presents itself in a more serious grain, with a solemn motto and a home page and index pages that pay homage to a sophisticated tradition of graphic design and typography. In these and similar cases the atmosphere of the site is appropriately translated into a consistent visual form that extends to the graphic representation of the interface.
The effectivity of the protocols for navigating through the information assembled on a website is closely linked to the visual form they take on the homepage. If this sounds like a truism, then it is one that is frequently forgotten on the web. In fact the visual quality of navigational elements - the interface - and their incorporation into the rest of the page is often rather poor. User interfaces remind us of stereo sets from the seventies: a plethora of buttons and regulators and indicators, mounted in grey plastic frames that mimic the texture and design of the surrounding hardware, with pathetic little drop shadows to enhance the idea that we can really 'press' the buttons and adjust the dials. Where Bang and Olufson already decades ago thought about disguising most of the interface to their audio equipment because most of it wasn't used most of the time anyway, interface designers still have a tendency to show off any functionality in the program on screen.
In an insightful lecture Henry Bar-Levav of the New York design consultancy The Oven recently drew a picture of the space left to a designer of the average website: roughly a quarter of the total screen surface tends to be eaten up by browser interfaces, leaving the designer of the site with the excruciating problem of adjusting to the imposed aesthetics or ignoring them altogether. Most choose the latter option and concentrate on the small window left by the grey machinery. Within which they design another machine, within which the actual information finds a place and a form - not necessarily connected.
De Waag intranet site
It is amazing that so few designers use the existing programmatic tools to override browser interfaces, and design screens as integrated entities, like Lemon does on their site. In one section they go even further, by appropriating Netscape's interface and redesigning it to 'Lemonscape', not forgetting to change Netscape's cosmic 'N' into their own 'L'. It's a serious joke that implies a critical awareness of the pervasive aesthetic incompatibility of graphic interfaces with the content they embrace. And it provides them with a possibility to keep their visitors moving within their own territory - the hacked interface refers only to data on Lemons site, with the exception of the obligatory page with links to 'recommended sites'.
It is this kind of intelligent play with the semiotics of on-line media and their technological metaphors that one finds too rarely on the web. But it is there, if one looks hard enough. A few London based designers' groups have a long standing (in web terms, that is) reputation for experimenting with ways of navigation and user-interface interaction that are genuinely new-media-grown. Most of these investigations take on the form of little games in which the viewer has to find out for themselves how to interact with the object on the screen. Antirom's set of playful interactive shockwave 'events' for instance can be seen as learning toys, like the toys small children exercise their motoric skills with. Could these gadgets eventually be used as navigating tools? Basically they imply just that - ways of navigating through a 'field' of information, reading it, feeling it, like you move your eye to read a sentence or your hand to feel a surface. New York's I/O 360° does something similar on their website.
I|O 360
This is the realm where graphic design for the web meets on-line autonomous art. Artworks like Jodi.org's, or David Opp's contribution to Hotwired's RGB gallery show a fascination for the iconography of graphic interfaces, from the now classic Apple pictograms and command buttons to the 3D graphs of state of the arts cybernetics. A fascination that may be an indication of how great the impact of these new signs has been on culture at large. And it serves as a reminder that the visual languages of on-line media, however in statu nascendi they may be, have a meaning of their own, that can surpass or at least seriously influence the meanings of the messages transferred by them. One is for instance hard pressed to consider the use of graphic elements from electronic engineering in the website of Fusion as the best imaginable interface with the site's audio section. But its functionality lies elsewhere: The site's high-tech appearance and its time consuming java/director based animations are part of the message - they signify cutting edge technology.
fusion.co.uk
Likewise it is probably easier to enter Obsolete's site on the 'In Residence' page, from where one has a complete overview of and access to all the sites designed and hosted by the firm. Instead the homepage presents a shockwave compass that is as exiting to manipulate as it is difficult. But it looks beautiful and it has the great advantage of using time in stead of screen space to organize content: as one turns the scale of the compass by pointing the mouse in one direction or the other each 'grade' successively reveals a section of the site devoted to a different subject.
These kind of interfaces work in a way that is different and familiar at the same time; different in their appearance that digresses from the newly established routines of clicking hotspots; familiar, because they address the manipulation of objects on the screen in a rather more sensorial way than the abstract buttons do. Much like flipping the pages of a book or a magazine, or adjusting the dials of an old-fashioned radio, one has to 'feel' for the object, grab it and handle it, manipulations that trigger reactions from the object on the screen: it moves or makes a sound and the intensity of these reactions is a function of the manipulations by the user. If you 'throw' Antirom's virtual bowling ball hard, than it bounces frantically off the sides of the frame. Movement and sound, two sensorial factors that are absent in print, play a defining role in the new ways of interfacing content, and in the presentation of the content itself. Letters move over the screen, words appear from a fuzzy shadow, sentences pop up when the mouse point touches a certain spot. Apart from being trendy and decorative, these aspects can mean a lot for developing new ways to deal with the limited space on most computer screens. As experiments and solutions by Obsolete, Antirom, IO 360° or Mieke Gerritzen show, movement can be more than just a visual gadget - it can be quite functional in fighting the clutter of layer upon layer of information on the screen, and it can give a kind of rhythm to combinations of texts, images and/or sound that is an extension of the visual rhythms of typography, as for instance Michael Worthington has shown in his site and CD-ROMs, or more recently Young-hae Chang.
In all these examples content, structure and visual language are closely knit together. The graphic design of these sites is more than just an aesthetic layer over predetermined editorial structures. Relatively too much concentration in designing websites still goes into basically linking chunks of information and making each of those chunks look as exiting as possible. Often the visual structure of the site in its entirety is subordinated to the formal virtuosity of its parts - if a consistent appearance is a consideration at all. In that case technology takes over. Netscape's new homepage shows that letting every technological language speak for itself can lead to a veritable tower of Babel. And although graphic designers may not be able to control every detail of their product, they can safeguard the visual structure and consistency of the product as a whole. Or at least they can try.