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:
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:
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 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?
]]>There’s a pretty tired cliché used all the time that goes something like this:
“The journey of a thousand miles begins with a single step.”
Like all clichés, it’s true while at the same time a bit trivial. In the case of building websites, this particular cliché can help teach one of the most important lessons to learn. Let me try to put it in terms of what we do: it’s not how you end a project that gives you success as a web designer/developer; it’s how you begin it.
My students often have trouble with this uncomfortable truth when designing and creating their web sites. They usually want to jump right into a project and start designing it before they do anything else. But before I let them begin to even sketch out their ideas for a single page, I make them answer two key questions about their projects:
1. Who is my audience, and …
2. What purposes do I need to consider?
The answers to these questions, and not the design considerations, are what you need to focus on when you start a project. And, without carefully considering each question individually (and then together) I assure you that even the most dynamic of websites will ultimately fail.
For this article I’ll discuss each aspect in turn, and then combine the two to show you how attending more to these areas will give you a much easier design job in the end. I’ll also spend a little time talking about the economic aspects of this strategy, and how you can use it to increase revenue and lower your chances of spending hours designing a site the customer doesn’t even like.
Question 1: Who is going to be using this site, and what are they like?
The first and most basic consideration to make is about the audience or users of the site (I’ll just use ‘audience’ from now on as a general term). And I don’t mean your audience, but the audience of the website you’re about to make. You must both identify that potential audience and then identify the characteristics it possesses, affecting how they engage your site.
Start with your client: ask him or her to tell you who the customers are. There’s a good chance they’ll already have a fairly good understanding of the customer’s demographics—from their ages to their ethnicities. You can also simply think about the product, service, or organization that the site is being designed for. Do some simple Internet research to help you figure out as much as you can. Record all you can about the potential audience.
Factours to think about include:
Next try to understand how these characteristics will affect the design of the site. For example, the age of the audience could determine what images you include or what references you make to popular culture. To highlight this point, look at www.Barbie.com, a site designed entirely for girls between the ages of 8-13. The site design would be completely inappropriate for an audience of older girls, an audience of boys, or an audience from a culture or country that knows nothing about Barbie (though, finding a locale knowing nothing about Barbie is sadly becoming difficult).
The next characteristic I list—education level—should seem pretty straightforward, but “technological literacy” may not. What I mean by this is the extent to which your audience is comfortable with and experienced at viewing websites and surfing the Internet. If your audience is “highly technologically literate,” you can be comfortable in assuming they’re familiar with many of the features of Web 2.0, like user forums or article comments and feedback (user-generated content). However, and I run into this all the time, there are those users who have no idea what a forum may be for or how to use one—and they’re said to have low technological literacy.
For each of your user’s characteristics there will be an associated effect on the design of your website. I always urge my students to first brainstorm about the characteristics of their audience, and then next to each characteristic, brainstorm the associated affect and how they can design for that affect.
In the case of technological literacy, the audiences’ level could determine what type of features your site includes. Does it have a high degree of interaction, expected by young people or those who spend much of their time online, or should the pages be static, and “safe” to reassure those unfamiliar or uncomfortable online? For each characteristic there will be a number of associated compensations you must make in the design, and knowing this at the beginning is a whole lot better than finding out about it after the site’s been deployed.
Question 2: What is the purpose of the site, and what are the users’ purposes for going to the site?
It doesn’t make a lot of sense, but people will often design a site that doesn’t necessarily reflect the site’s true purpose. An e-commerce site, for example, should have as its focus not only the product, but also the e-commerce mechanisms needed to carry out a transaction. Even if a site is displaying the store’s products in stunning galleries with comprehensive descriptions, detailed close-ups, and multiple views, all of these features will be for naught if a customer can’t figure out how to check out and pay for the products. Even worse are the e-commerce sites that simply “hide” the products from the customer to begin with.
The fault in such cases usually lies with the designer who spent too much time being creative and not enough time planning. Understanding the site’s true purpose and planning a design around that purpose will resolve potential conflicts between creativity and function.
On the flip side of this discussion are the users themselves: what do they want to do on the site? Do they want to learn about something, like a product or service, or do they want to purchase something? While seemingly related, these are two entirely different purposes. If users are browsing your site to gain knowledge about something, they’ll be turned off by pushy e-sales tactics, like incessant pop-ups and links leading them to purchase mechanisms. Instead, in this particular case, a more passive approach is called for.
Take for example a car company. While the company’s website has the primary purpose of selling their cars, the company understands customers go to the website to learn about the products, not buy the products. So instead of treating the site strictly as an e-commerce site, which overtly “push” their products, the car companies instead use their sites to disseminate information about their vehicles, and they do it in a way that makes customers more willing to buy it at the dealerships. To see what I’m talking about, look at Ford.com and CarMax.com. While Ford wants you to learn about their cars, CarMax just want you to buy them. Look at how different the approaches are, and you’ll instantly recognize the different purpose each site has, and the corresponding purpose the audiences for each site have.
To find out these purposes you again need to do research. Talk to your client first. Make sure that, not only do you understand what the client’s purpose for the site it, but that the client himself understands the purpose (they commonly won’t). If you can, the best way to understand the audience is to talk to potential members of that audience. Conduct surveys if possible to really make sure that you are designing this site to fulfill the goals—that is to meet the purposes—of both players: the client and the user.
Knowledge is Power
Sorry to use yet another tired cliché, but, tired as it is, it rings true. From a design perspective, answering the above questions will naturally lead to an easier job of creating the website. From the answers about the customer you will have a better sense of what images, colors and fonts to use. You will also understand better how you can organize the site to provide the user with an experience they will already be familiar with (necessary for increased usability). Your tone will be appropriate as will the language you use (derived from understanding cultural characteristics and education level). In essence, the design will have been narrowed down immensely.
At the same time, by understanding your audience, you will better understand why they may go to the site in the first place. From their, you match that against the purpose of the site itself. Although I’m sure Ford would love to sell cars online, as CarMax is capable of doing (though I’m sure rarely does), they adjust their own goals and make them as much as possible coalesce with the goals of the audience.
Ultimately, following the guidelines here will save or make you more money, and will definitely pay off in time dividends (and will probably cause you less frustration). Organization is always a key to success, but for some reason I’ve seen many a web designer throw organization out the window in favor of the instant gratification gained by the creative design process. And sometimes it works out, and the designer delivers a product that the client is happy with, that meets the audience’s purpose and compensates for their characteristics.
However, this rarely happens. Instead, the scenario usually unfolds like this: after spending a short amount of time with the client, the designer thinks she understands what the client wants, gives little if any thought to the audience or user, and creates a site based on a cool design that meets the designers presumed purpose. This, of course, fails miserably, is nothing like the site the client actually pictured or wanted, and is not useful at all to the audience.
The designer then has to sacrifice more time starting from scratch, learning the things she should have learned to begin with, and ends up with a site the client is happy with. By this time, however, the billable hour average has dropped to somewhere around $10.00 per hour because of all of the extra time the project has cost.
In some instances, you can also charge for the time you spend in these discussions. I bid recently against another company to build an enterprise-level content management system (and won). During the process I inadvertently ended up with a copy of the competitor’s cost sheet (a generic one, not for this specific project, so nothing unethical about it). The first phase of their design and development process is called the “Discovery” phase.
Let me quote what happens in this crucial “Discovery” phase:
· Review current Web site and available documents.
· Company consultant, writer, designer and interactive strategist visit the organization (one day)
· Develop the discovery document with up to two rounds of revisions
So, before they set mouse to PhotoShop, before they set CSS to Notepad, they try to understand what they need to create. They do so by conducting online research and visiting the organization to talk to the client (for one whole day). Their cost for this is—and I swear I’m not making this up—$20,780.00!
Obviously things change with an enterprise-level project: the organization is bigger, the problems and solutions are more complex, the profile of the site is bigger, etc. I don’t expect many individual designer/developers to get that kind of money for the discovery phase of a small business’ web site design. But know these two things:
1. You’d be justified to charge something, and …
2. Even if you don’t charge anything overtly, include it implicitly in your price because the process creates a better product. Guaranteed.
About the author:
Clinton R. Lanier is an Assistant Professor of Technical Communication at New Mexico Tech, and the owner of Lanier Infomedia (http://www.lanier-infomedia.com), a web design/development and technical communication consulting company located in Las Cruces, NM, USA.
]]>I wanted to introduce you to a new contributor to the magazine, Clinton R. Lanier, a fellow educator who has agreed to share some of his practical web design knowledge with a series of articles. This is the first.
Thanks for reading,
Stefan Mischook
–
“I make everything in-house!”
As the owner of a web-design business, hearing this exclamation from competitors puts a smile on my face. As a web design instructor, however, I admonish my students for the same declaration.
I don’t know why so many web designers feel the need to try to make everything themselves. Maybe it’s the innate creativity flowing through their veins, or the fact that web design is a very artistic enterprise. Whatever the case, the philosophy that everything on a website should be proprietary costs designers time and money.
The reason is simple: reinventing the wheel—creating your own solution to a design problem instead of purchasing an already-made solution—does not give you the return on investment that you’d see by using a third party’s solution. This is true for every business, but especially so for web designers.
Here’s a simple case to illustrate this point. Let’s say you have a client that is going to pay you $2000.00 to design an e-commerce website with an online catalog, a shopping cart and a checkout mechanism. You could spend your own time to make this portion of the site, or you could purchase an off-the-shelf component.
Now imagine you find the component you need for $500.00 (companies like ecommercetemplates.com sell customizable solutions for as low as $149.00). Is it worth it to buy the product rather than make it yourself?
Well, now let’s say it would take you 20 hours to make the component yourself. If you do the math, you’re making $25.00 per hour to create the component you could otherwise buy for the $500.00. If you save yourself the 20 hours to work on or find another project, you could end up generating much more income in the long run through the volume of projects you’re able to complete.
The number of solutions available is enormous, and chances are you can quickly find just about anything you may need at a cost-effective price. The most numerous, perhaps are templates, which are usually available free or for a reduced cost by websites hoping to get you there to increase the number of page views for advertising revenue. Often the freebies require you keep the developer’s copyright logo at the bottom, but by spending a bit you can buy the right to erase their name and replace it with your own. Templates are especially smart to think about because they’re so easily modified, thus simple adjustments to the style sheets or the HTML pages will change the look dramatically.
It’s also a good idea to shop for and buy royalty free images. I’ve seen many designers—including, sadly, some of my own students—have to cough up money or pull down sites because they ripped images off of Google or some other place. Paying money to a third party for source images shuffles the copyright responsibility off to them, and you’ll have recourse if it turns out the image is copyrighted elsewhere. And like all other third-party solutions a primary rationale for buying royalty free images is to save you time (and therefore, money) and to additionally get a good quality product.
Not to pitch for anyone, but I personally use istockphotography.com for images that I’m confident won’t get me sued when I use them on sites. They also sell Flash videos, music and vector graphics. Like the templates, the products can be modified after you’ve purchased them. I’ve actually never used an image I’ve bought without first cropping or in some other way editing it. Thus, I’m pretty sure the image I finally end up with on my site won’t closely resemble images on other sites.
Speaking of Flash, there’s nothing I hate more than wasting time making a Flash intro movie or menu when I could be doing something else. I’m a bit biased against Flash, to be sure, but many customers want it, and for some reason there’s a belief by those same customers that Flash products justifiably add 25% to the cost. I won’t complain when the customers up-sell themselves, but like other components of a website I try to get around doing it myself. Websites like flashcomponents.net sell just about any Flash-oriented component you could want, including slideshows, menus or whole site templates: and when compared to the time it’d take you to create a custom component, they’re quite affordable.
To explain my disdain for Flash, let me just say that I’m not what you’d call a Flash expert: I’m more comfortable with other aspects of site design and development. This, though, brings up yet another point to support using third-party solutions. I’ve noticed in my own students that for some reason they seem to gravitate towards different aspects of design/development. I have on a team of developers right now an individual who is about the best PhotoShop mock-up person I’ve ever seen, and he’s definitely above-average on Flash. But, he’s nearly illiterate when it comes to PHP (and just, ‘okay’ on CSS). However, another member of the team is a whiz on PHP and CSS, but only passable with PhotoShop and Flash.
The lesson here is that you can’t be an expert in everything. Yet if you are going to design/develop websites professionally you are expected to be a “Jack of all trades.” And this, in addition to the time-savings (leading to a higher ROI for both time and money) and the customizability of third-party solutions, is the next most important reason to consider using what someone else has made. In any of the sites I’ve used for example purposes here the products are the result of people who are masters at that particular tool. I guarantee that PHP experts are not spending their time making Flash components, and vice versa.
Some designers think that perhaps taking this approach makes them appear more like an amateur and less like the professional they want to be. But consider this: many larger technology corporations use this same approach. While working for IBM years ago I witnessed them go through a dilemma. While they had the DB2 product—a great enterprise-sized database tool—they needed a dedicated, online storage manager. Their solution? Partner with Tivoli and co-develop the Tivoli Storage Manager in order to customize the features of both it and their own proprietary product. They took the same approach to Lotus and a whole host of other products (which they eventually purchased, but the point remains).
Perhaps a better example is that of Adobe. In his book, Sketching User Experience, Bill Buxton—a designer for Microsoft Corporation—points out that of all of the applications sold by Adobe, only two were created in-house. ONLY TWO!!! Aside from Illustrator and Acrobat, every other application Adobe puts its name on was created by another company and then bought by Adobe.
Thus, there’s no need to feel like relying on third-party solutions makes you less of a designer/developer. Instead, rest easy in the knowledge that doing so is actually the same strategy used by big industry.
Personally speaking, I take this approach when I develop sites. For example, I do much of my work with the open-source CMS, Joomla. The wonderful thing about Joomla is not that the main component is free or powerful, but that so many extensions have been written for this primary system that functionality and modification is made super-simple. With just a few small tweaks of already existing components, I can have an online gallery or an online catalog (or both). If I spent the time making from scratch what others have already created, I’d end up losing in the long run.
One caveat, however, must be discussed before closing. While using third-party solutions is a great business strategy, ethics demands you not mislead your clients. If they ask for, and you charge them for, from-the-ground-up customized solutions, well then you’re obligated to deliver the same. I’ve found most clients don’t care as long as you’re charging them an honest fee to begin with and the final product does what you’ve promised and they want.
Thus, embrace the third-party solution. Revel in the fact that you can with confidence promise clients just about anything under the sun on their website and then deliver quality, professional solutions you didn’t even have to make. The time-savings will lead to better revenue in the long run. And that, I guess, is the bottom line, right?
About the author:
Clinton R. Lanier is an Assistant Professor of Technical Communication at New Mexico Tech, and the owner of Lanier Infomedia (http://www.lanier-infomedia.com), a web design/development and technical communication consulting company located in Las Cruces, NM, USA.
]]>