Web 2.0 Design Fundamentals

Jeremy Pratte
April 10, 2008
User Experience Design

Is Web 2.0 the handy term for a new, user-friendly and dynamic era of the web? Or is it just a buzz word? However you personally feel about the term, there are definite characteristics most people can agree on that define this new era, whatever you want to call it.

It is generally accepted that the first use of the term was at the first O'Reilly Media Web 2.0 conference in 2004, uttered by Tim O'Reilly. He said that it was "the business revolution in the computer industry caused by the move to the Internet as platform, and an attempt to understand the rules for success on that new platform."

That phrase, "internet as platform," was probably the three most important words to begin to define the often ambiguous term. Since even before 2004 websites have been moving in a direction to become more and more like desktop applications, even sites that aren't considered web applications per se. And to achieve this illusion of a desktop application, web sites and web apps should adhere to agreed-upon design fundamentals of this new "Web 2.0" era of a rich user experience.

Before getting into the actual design tenets, it is important to consider the relatively new technologies that make some of them possible. One of the biggest characteristics of Web 2.0 is managed content, sometimes in back-end Content Management Systems (CMS) for corporate websites, like Sitecore, or user-managed content, like blogs. Another technology to make this move to more desktop-like applications is AJAX (Asynchronous Javascript and XML) which allow rich customization, like collapsable and movable windows, just to name a few examples.

One of the biggest advantages of AJAX or other similar technologies is reduction - or sometimes complete elimination - of page loads and/or reloads. This is arguably the biggest consideration with Web 2.0 Design Fundamentals. Anything a designer can think of, and a developer can implement, to reduce page loads is a smart way to enrich user experience and ease usability. Wizards, movable and resizable windows or modules, and interpage scrolling are all relatively new possibilities in today's Web. This is in large part due to a move to utilize DIV layers more than tables, which were the clumsy old way of website presentation, at one time the only real way to do it. Indeed, you can bet that all of these customizable modules are in fact DIV layers, which are much more flexible and liquid than the clunky old rigid tables, especially used in conjunction with javascript, as in with AJAX. DIV layers can be tricky, though, and sometimes unreliable in terms of cross-browser compability if not coded properly, but they are generally much better than static tables.

Tables are still useful, however, for presenting tabular data and forms, which is really only what they were originally intended for.

So how do things like customizable windows and interpage scrolling reduce page loads, you might ask? It's all about doing as much work, and containing as much of the workflow that we can, on the same page. The old way involved http responses and requests - or loading a new page - just to change one or a few things. Like changing options on a form, for example. This was a nuisance to workflow. Now we can delight users by putting things like Drag and Drop, In-page custom editing, Grid Cell Editing, Slide-Our or Pop-Up editing, Auto Complete, Refining Searches, In-Place Drill-Down, Resizable and Scrolling Modules and In-Context tools in our designs.

On the flip side, there exists a list of things not to do, sometimes called "anti-patterns," that will ensure a poor user experience, things that can go wrong when one tries to make their site Web 2.0 without knowing what one is doing. Things like Meandering Way, where the user is forced to go on a tiring journey with the mouse all over the page to get to what they want, Tiny Targets, where key interactions that are almost too tiny to click, Hover and Cover, where the Pop-Ups mentioned in the previous paragraph cover up important information needed to complete the task the Pop-Up was for, Linkitus, inconsistent or bizarre use of linking schemes, and Too Many Windows and Too Much Animation can all leave users of the offending websites with a bad taste in their mouths. Designers and developers must be very careful when treading into the waters of this new era of the web and they haven't been properly trained on how to swim in it.

There are Web 2.0 design fundamentals that designers don't need developers for necessarily, that don't have to involve AJAX or any of the other progressive technologies available today. There are simpler, but still profound, basic tenets of modern design and production that must be considered when it's time to create - or recreate - a website.

One of those rules of the new Web is separation of presentation and content, which is largely achieved via the use of Cascading Style Sheets, or CSS for short. For the most part, these handy documents and accompanying coding techniques began working their way into the web around 2000 or 2001, and were quite ubiquitous by the middle of the decade. Now, you will be hard-pressed to find a website not utilizing CSS and if you do find one it's either grossly outdated or the person who created it needs a serious talking-to.

I will be going into this more in-depth in another article, but what Separation of Presentation and Content is simply about is... well... separating presentation and content. In other words, how the content is presented needs to be divorced from the content so that either one can be more easily changed. A website can be given a new coat of paint, if you will, without the need for a complete remodel. And without the mess of the old font tags and static HTML color definitions, content change is usually a snap. And that's very important because content, especially living content, on a website, as opposed to the monolith online brochures of yesteryear, is very important to this new age of the web. Users no longer want marketing fluff. Content on demand: they want the content they're looking for, and they want it NOW!

Which is why many of the most popular websites today are blogs. Or, like this blog for Roundedcube, Inc., they're used to go along with a corporate website. Sometimes the look and feel of a blog website, even if a site isn't a blog, is considered to be an aspect of designing in "Web 2.0." Things like tall headers, larger fonts (for a while there the trend was to make text smaller and smaller because somebody thought that looked cool and too many people decided to agree), and taller line height makes the text more readable, another sign of how much more important content is becoming.

Speaking of Roundedcube, we strive to stay on top of the latest trends in design and the technology needed to implement it. We employ AJAX, DIV layers, and of course we always use CSS; we want to make our clients happy by making sure users of their websites are happy. And happy users are repeat users. Which is why we design for a rich web experience, one of the most important aspects of what many have decided to dub "Web 2.0."

comments powered by Disqus