Website Layout Design and Function

Updated June 4, 2008

"Form follows function - that has been misunderstood. Form and function should be one…"
         - Frank Lloyd Wright

Because the Internet is all digital surface, appearances are very powerful. The mere look of your website can say volumes about your business.

Therefore, a serious ecommerce website wants to transmit a clear, immediate and authoritative message that it means business, that it's reputable, credible, and technically hip.

So what better way to signal one's business legitimacy than by integrating the newest design innovation into your website?

Well… answering that question means taking a plunge into design theory and looking at architectural concerns about website form and ecommerce function.

Indeed, reconciling form with function (and aesthetics with use-value) has always been a point of contention - on or offline. In 'Learning from Las Vegas', architect Robert Venturi stressed the centrality of form, decoration and ornamentation in design. Unconcerned with issues like internal layout, function, or usability, Venturi argued (against modernism) that less was not more, but rather 'less was a bore'. To this end, he identified the Las Vegas Strip as design benchmark par excellence.

Needless to say, the instant 'e' was yoked to 'commerce', a version of this Vegas design principle found a foothold on the Web.

In banners, we have all the kinetic neon of the Vegas Strip; in animated graphics, we have the shimmering of a rhinestone cape. From garish pop-up windows, disabled back-buttons, bloated pyrotechnics and indulgent flash to navigation that drives customers through color-crazed mazes, ecommerce web design often appears to mirror Vegas frenzy and immoderation. Even on the same corporate webpage, marketing messages compete violently for our attention, content seethes non-sequentially, and the pure density of text and links do little more than overwhelm. It's casino ecommerce - or as Venturi calls it, 'the kitsch of high capitalism.'

Yes, a quick glance at a cross-section of ecommerce websites will indicate that, for many businesses, 'unsound design methodology' is only slightly more popular than 'no design methodology at all'. On other sites, user orientation and site usability are frequently sacrificed for more indulgent artistic ends. Even navigation bars have become the latest theatre for self-conscious Java script applications, distracting from design purpose or testing visitor patience.

The problem here is that even seriously interesting design can interfere with usability. Innovation, whether aesthetic or technical, can disrupt user interactivity, design purpose, or commerce objectives. It's true that mouse-over navigation bars - especially the ones that activate telescoping sub-directories - look impressive. Similarly, a solid flash intro can show that your e-business is not an Internet fly-by-night. But the problem is that form can subvert function, notably when design involves innovation or requires the user to adapt to a new set of usability rules or a new kind of interface. And when form distorts function, then the medium does not become the message - it obscures it.

Adapting Messages to Media

For websites that prioritize function over form (and use-value over artistry), one web design strategy is to simply emulate the logic, order, and appearance of traditional print media - thus anchoring the user in familiar territory with familiar usability rules. Many conservative ecommerce sites take this route, complete with 'folder' style nav bars, predictable interface, and text-heavy content loaded with mission statements and marketing minutia. Often, these sites show a disregard for space - or spatial economy - and forget that in order to hit home with a primary message, deleting other messages becomes mandatory.

The problem with copying print strategy is that while the layout might be reassuringly 'retro', the medium itself is all Internet, with it's own implicit hypertextual conventions and practices. Though the Web is still primarily a text-driven medium, its rules are not the same as print, at once combining expanded 'interactivity' (endless possibility) with a shortened attention span imported from video-culture (want it all now). Both 'print' and 'casino' styled ecommerce sites risk choking interactivity and disrupting task-based goals like retrieving desired information or making a purchase.

The goal of web design then becomes to tailor the message to the medium - and to balance design with task-based ends. At least for ecommerce sites, design should harmonize function and form towards the enhancement of both. As the Bauhaus school put it, the goal of design is to develop a functional (website) architecture integrating art, technology and use-value - without being self-referential in the design process. In other words, if your site visitor is spending time noticing how great the site design is or how spectacular the navigation tools look, a serious error has already been made.

Here, what's essential is understanding the reflex level of user interactivity and then designing a task-analysis blueprint. Predicting reactions, reflexes, and how users respond to and interact with various web environments and stimuli is key. This means anticipating visitors needs, prioritizing your messages and tasks, predicting what user questions will be asked (in what order), and quickly providing the answers in a navigable, 'scaffolded' format that keeps your visitor oriented and engaged.

Scaffolding refers to an educational concept concerning how much information a user can assimilate in one stage - or on one webpage - and requires the designer to build sites that conform to learning mechanics. Hence, content, directions, and visuals should be 'chunked' or structured to guide the user through gradually more complex content towards an end-goal (while simultaneously providing clear navigation options so users can control the gradient of a learning/informating curve).

Sadly, Vegas Strip web design or graphics-happy sites rarely pay attention to task-analysis methodology. More often than not, messages, marketing slogans, and links step all over each other to create a visual cacophony - like a half-dozen heavy metal guitar solos being reeled off at the same time. And while design innovations may stimulate site visitors, the same techniques can also over-stimulate, as well as elicit impatience, indifference, or the dreaded immediate flight-impulse.

On the other hand, the purely functionalist goal of web design is to make the message advance as the medium recedes. Theoretically, this would mean killing any artistic or design impulse whatsoever. But would you want a website that looks ASCII?

As Hemingway proved, it's still a style to have no style - and even minimalist sites generally involve extensive design consideration. In fact, some sites can be so minimal that their 'absences' are more distracting and self-conscious than the most haphazardly designed news portals. Alternately, some designers suggest that great web design should highlight function by being design-neutral or aesthetically 'transparent'. However, that's no fun, and it's probably a myth that design-neutrality can exist anyway. Besides, ecommerce cornerstones like 'branding' and 'differentiation' depend on aesthetics and visceral, reflex impressions.

The point is, let the David Bowie homepage risk impressing its users. Even banaldesign.com uses a high-modernist, highly functional, Bauhaus web-template to sell its highly a-functional, postmodern inventory. Again, uniting form with function should remain your guiding architectural principle. Think about how users interact and learn with various media, interfaces, and web environments. Perceiving web design from the standpoint of task-analysis and learning theory is probably the best compass you can bring to your architectural blueprint.