Using Web 2.0 for the Right Reasons

The term, Web 2.0, has become so common that it’s now almost one of those labels that everyone knows, but nobody knows the definition of. In fact, clients often ask me—with complete seriousness—if I can provide “Web 2.0 ” for their site. My reply is typically along the lines of “which function were you thinking of?” 

Their blank faces confirm my suspicion that they have no idea what Web 2.0 is, why they would want it, and what it may provide for them in terms of functionality their site needs. Sadly, many of my students have the same problem.

Many professional designers, it seems, suffer from the same drawback, evidenced by sites so jam-packed with useless widgets they make me long for the sites of the 90’s, with their far-simpler flashing banners and animated gifs.

What is Web 2.0?

In a nutshell, Web 2.0 is an approach to the internet characterized by the following mechanisms:

• facilitating communication, 
• collaboration,
• interoperability/interaction,
• information sharing. 

In other words, instead of a static HTML page with functionality that stops after the page loads, the functionality on a page with Web 2.0 continues. It essentially allows users to interact with the site’s page as they would a software program. Users can communicate to each other (and you), create content independently or collaboratively, and interact through mechanisms allowing the user to determine the look, feel or content of a page.

Functionality Before Style

Web 2.0 is not about style. This is one of the areas where many designers, and perhaps clients, get confused. Though trends in design have certainly changed in the past ten years (not unlike any other school of design: from cars to houses), Web 2.0 is about functionality, not looks.

I know many will agree with me. After all, the prolific use of rounded corners, narrow content areas that didn’t span the screen, transparency, etc. came into use about the same time as Web 2.0 functions did. Thus, it’s easy to relate the two. However, separating one from the other liberates the designer to focus on the two very different areas of a site: design and function.   

Common Uses of Web 2.0

Examples of Web 2.0 functionality abound. Some examples:

• Communication methods such as those in private messaging systems and “wall” systems (Facebook). 
• Collaboration mechanisms as seen in tools such as wikis and Google Docs. 
• Interoperability/interaction — functions that allow the user to change the site.
• Information sharing, aka user-generated content.

The two most overused categories, however, are interoperability/interaction, and information sharing and we’ll examine those in more detail.

Interoperability/interaction is easy to identify. These are any functions that put the power to change the website in the hands of the user. It is, perhaps, as easy as a slide show that the user can scroll through, a lightbox image gallery, or multimedia presentations that the user can start, stop or somehow modify. More complicated examples are evident in Yahoo’s MyYahoo! and iGoogle. Both allow users to include and exclude feeds, move modules around, change skins, etc. 

Information sharing, or user-generated content, is evident in any mechanism that allows users to upload information to the site. Commenting, photo galleries, real-time blogging, and any other way to facilitate allowing the user to create what’s on the site/page are included here.

These last two categories, perhaps because they’re either the easiest to insert on a site or because they have the flashiest presentations (the wow factor) are used in over-abundance all the time. 

An Incorrect Use of Web 2.0

I recently, for example browsed a site for a local Chamber of Commerce. The site was brand new and made by a large, local design company. While browsing the site I came across a gallery of photographs of the Chamber’s directors. No name was beneath the photo, it was just the photo. However, upon selecting the photo, a beautiful lightbox appeared in the middle of the screen. The lightbox dimmed the rest of the page and below the photo in the lightbox was the director’s name. However, the photo in the lightbox was the same size as the photo on the page.

So why use it? Why was it there? It provided little more information than the page itself did, so why did the designer use it and the client buy it?

It’s because the client wanted Web 2.0 and had no idea what Web 2.0 was, and the designer was either all too eager to charge extra for something flashy, or had no idea himself how to really use these functions.

And this last line is perhaps the point. While it’s great to understand, from a technical point of view, how to use these functions or how to make them, it is better to understand how they should be used on the client’s site. Or, even more to the point, it’s better to understand why to use them.

Think about the lightbox, for example. What does it do? 

• It provides a way to focus the user’s attention on a single image and send the rest of the page to a layer of inconsequentiality. 
• It provides more detail for an image. 
• It allows you to keep your page of information from being cluttered by large images and instead include only thumbnails. 
• It is a way to provide more written information about an image. If we wanted to display a product in a catalog, for example, a lightbox would be a great tool to use. We could have on the page small thumbnails with simple labels. If a user selects a thumbnail the lightbox appears, displaying the product from various angles in a much larger size and better resolution, and accompanied by a full description.

It was not designed to be used for one line of text below a photo the same size as the original.  

Ultimately though, Web 2.0 is about the user.  All of the utilities I point out put power into the user’s hands. For example, users needed a way to share galleries of photos with each other, so the solution was flickr, an online mechanism to do so. Users also wanted to share videos, the solution was YouTube. Likewise, users wanted to keep up with friends and family, so Facebook was created. In every instance the solution—a Web 2.0 solution—was created because the user wanted to do something.

So to ensure that they’re using it right, designers should start with the user’s wants and needs. Will the user want to respond to content? Then include a commenting feature. Will users want to communicate with each other? Then include a forum. Using Web 2.0 correctly becomes far simpler once this approach is taken.

There are, of course disadvantages. Knowing only HTML will no longer be enough. Designers will have to know HTML, CSS, PHP, and Javascript (especially their important libraries, like mootools and jquery). The payoff, though, is huge in terms of revenue and user satisfaction. Explain this to the client. Make them aware that something which is flashy but useless might actually drive users away instead of attracting them.

The web is changing at a breakneck pace. Already there are discussions about the next generation of web utilities. Some are even beginning to call them Web 3.0. As designers, we really need to be aware of the foundations and work our way up. Before too long, clients will be asking us to use this Web 3.0 functionality (whatever that may be). Before we do, however, we need to make sure both the client and ourselves understand the Web 2.0 functionality first.

So as a designer, how should you choose to use these tools? How do you respond to clients who ask about them? Do you go after the easy money and put widgets and gadgets in every corner you can possibly put them? Or do you step back and ask if your client really needs an RSS feed on the welcome page that never changes? As always, think about your design completely before you charge into it. Explain and educate your client about what you think he needs and why. If you can provide real rationale for the Web 2.0 tools you think he needs, you can probably get a better price for those tools. And that is, after all, one of the points, right?