Web 2.0 Blog Logo

Design Considerations for the Web 2.0

For a long time, web design was handled by those with the necessary technical skills to build websites. It was often the same person doing both the front, and back end of a website. These are two very different skills and really, one should lead on to the other. The more you look at Web 2.0 services, it becomes obvious which ones have spent time, money and expertise on their interfaces, and those that have not. But of course the Web 2.0 isn’t all about the big sites, this applies as much to those going through Blog designs as anyone else. To emphasize the areas where you can succeed and fail in designing a Web 2.0 site, I’ve picked out a handfull of aspects that you need to consider, and what you should consider for each. So let’s get started.

Navigation - For me, this is currently a huge issue in Web Design at all levels. It seems as if many of the fundamental rules of navigation are being thrown out of the window with gay abandon. Essentially, a visitor to a site has some expectations when clicking on a link, as far as possible you should try and not subvert these expectations and surprise them. Links are: Used for Navigation, Labelled Clearly, Indicated through a Style and will open a new page in the Same Window. If at any time you intend to break one of these fundamental rules, make sure the user is informed. Beyond the simple mechanics of hyperlinks, you should make sure the user has usefull, appropriate and related links to hand. If you have a help page, link to it on every other page. It’s also a good idea to make popular, or recent, content easily available across the entire site along with popular features, such as the RSS feed.

Inline Vs Reload - I’ve covered this in detail previously in a post entitled Judicial use of AJAX, but it’s worth reiterating the key point. AJAX can be a very dangerous technology to use. If, for example, you use AJAX to power search results, you prevent users from sending links to their friends containing the search results. Think very carefully about the use of inline technology, such as AJAX and make sure you can justify it.

Monetization - This is probably the most contentious point in this entire post, but it needs to be made. If you intend to monetize your site through advertisments, you have to consider them early in the design process. Your very first design drafts must include space for common advertisment sizes and formats. There is nothing wrong with monetizing a site, everyone needs to eat, and advertisments is an effective way to do it. The very worse situation you can be in is to add advertisments to a design late in the day. This not only means your ads will be ineffective, but it is also likely that they will be obtrusive and annoying. Ads aren’t bad, Bad Ad usage is.

Compatibility - This is becoming a bigger issue than it used to be. With FireFox usage growing across the world, especially in Europe, and the proliferation of hand held devices capable of displaying web pages, each site needs to be coded in such a way so as to allow it to scale not only across screen sizes, but also technologies.

Readability - This will be more applicable to some sites than others, but if you intend creating a site that’s big on content, especially written content, listen up. If reading your site is an uncomfortable experience, people will leave. Poor readability comes from a number of factors, such as colour and type face. Typically, you want to avoid low contrast colour schemes and small, illegible typefaces. Stick to common fonts in fairly large sizes and a high contrast colour scheme. In a real world example, I’ve seen a blog increase readership, reduce bounce rates and become altogether more popular through a simple change in colour scheme to make it more readable.

Negative Space - While artists and photographers are familiar with the concept of negative space, many web designers are not. Negative space is the area which is not occupied in a design. No images, no advertisments and not text. This is commonly called whitespace in web design, but I feel negative space is more appropriate given the loud colour schemes we tend to get in the Web 2.0 world. A good idea is to map the negative space on a design. Take a screen shot and mask all the content, images, ads, text, forms, everything, in black. Then, fill the rest in white and assess the contrast, arrangement and ratio of white space to black. A good design will flow and make sense. A bad design will stutter. The image you are looking at is what a user subconsciously sees when visiting your site, so make sure it’s inviting. Cluttered designs are not effective designs.

Branding - With the number of similar sites and services springing up all over the Web 2.0 world, brandability can be a real deal breaker. What’s the difference between Google and Alta Vista? Google became a brand, Alta Vista did not. The important point to take away here is that branding is not about a logo in the corner of a site. Many aspects go into creating a successful brand, and there may be no logo at all. Look for something to distinguish your site from the rest, and play up to it. Play up to it so much that when a visitor sees that one aspect that you are pushing anywhere, they think of your site.

Those are just seven points that need to be considered when undertaking a new design, or a redesign of an existing site. I’m redesigning a blog myself at the moment, so I’ll be looking at these aspects throughout the process. I think a follow up post specifically on blog design may also be in order.

This post was written on Sunday, August 26th 2007 by Simon T and has been categorised under Accessibility , Blogging , Design , Development , Usability. The trackback URL is here or you could add a response. If you really want to you can Digg Story or add it to del.icio.us, Technorati Cosmos, Blinklist, furl or Reddit.

2 Responses to “Design Considerations for the Web 2.0”

  1. David Says:

    Really interesting. Especially the facts about AJAX were new to me. All in all, i agree 100%. Thanks for those important tips!

    Kind regards

    David

  2. Simon T Says:

    No problem David. It’s amazing how many people thing AJAX will solve all their problems without realising there are some serious considerations that need to be made.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>