Do's and Dont's of Amazing Web Design

When followed, this guide will prove to be quite a valuable web design resource. From the inexperienced to the experienced, this guide has something for everyone.

The Process of Great Web Design Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:

“a process of conceptualization, planning, modeling, and execution of electronic media delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface”.

The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).

All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites.
It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.

Stage 1: Conceptualization and planning
This stage is skipped more often than the other two stages. Most writers don’t enjoy creating outlines for research papers, and most web designers don’t like creating flowcharts either. Don’t be lazy. If you put forth the effort and plan out your website, then you will find the web design process to go smoothly with fewer mistakes made along the way.

There are a few things that you will need in order to effectively conceptualize and plan your website:

-a brain
-a pen and paper
-(optional) flowchart software
-a general idea of the different sections of your website

To begin, grab your pen and paper or launch your favorite flowchart software. We use OmniGraffle Professiona for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.

There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts search for flowcharts on Google or Yahoo.

View this flowchart below when conceptualizing Chromatic Sites:

(1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.

(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your websites’ navigational hierarchy goes, the more descriptive each label should be.

The Dos
-Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enough -Whether you use a pen and paper or flowchart software, keep things as clean and organized as possible. Although you (and anyone working with you) are the only ones that will be using the flowchart, it still needs to make sense -Your primary sections should use broader terms, while secondary and tertiary terms should be more descriptive

The Donts
Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:

-Don’t use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topic -Don’t try and lump multiple topics on the same page. Create a general section for these topics and from that section create subsections. This will make the subsection (descriptive) web pages more likely to have better rankings in the search engines (Google, Yahoo, MSN, Ask) Once you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process:
modeling.

Stage 2: Modeling
In the modeling stage, static “wireframe” mock ups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:

-logo
-navigational menu
-content
-images, videos

To create these mockups, you can use a pen and paper or your preferred mockup software. In the past we have used Photoshop, but lately we have been using OmniGraffle Professional. OmniGraffle is not as resource intensive as Photoshop is and it allows us to assemble our wireframe mockups much quicker.

In addition, make sure that you have the flowchart(s) that you created nearby as you will need to reference these from time to time to make sure that you are mocking up all of the pages that will appear on your website.

Below is our example of how a wireframe mock-up should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.

We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).

If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can).
Just be sure to mockup any unique layout that your website will have.
You’ll thank yourself later.

The Dos
-mockup all unique pages
-include important elements (logo, navigation, content placement, images/video placement) -start from the top and work your way down -reference your flowchart created in stage 1 to make you don’t forget to mockup any pages -save, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or so
-focus on clean, user friendly layouts -label your elements so you don’t forget what they are when you reference them in stage 3, execution -use other web sites as inspiration; there is nothing wrong with taking elements from other sites and making them your own (see “donts”)

The Donts
-don’t include graphics or colors (that’s for the next stage) -don’t make your mockups too “busy”; focus on clean, well organized, user friendly layouts -don’t skip this stage; it is just as important as the first and the last -if you take elements from other websites, make sure you don’t plagiarize; there is a difference between being inspired by another website to create certain elements of your design and blatantly ripping off their layout and colors

Stage 3: Execution
In the third and final stage, execution, the planning from stages 1 and 2 are combined to assist in creating a live, interactive website.
The third stage is by far the most time intensive since you will be 1) creating the graphics 2) creating the content, and finally, 3) converting the web designs from images into code that web browsers use to present your website to the world.

By the time you reach the third stage, you should have a clear idea of:

-how your visitors will get from one place to another (stage 1, flowchart) -how your web pages will be laid out (stage 2, wireframe mockups)

If you don’t have a clear idea of these two things, go back to the first and second stagees and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.

Ditch the pen and paper
In stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.

We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.

Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website).

When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit w3schools.com. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.

Here is an example of a nearly-completed website of the layout we mocked up in stage 2. As you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout.

Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.

The Dos
-reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to -do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing) -include color and graphics to create the final look for your web pages -use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers -reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all (or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the search engine spiders stop by; a great place to get CSS drop down menus is at DynamicDrive.com -finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your design once it is converted into markup (code)

The Donts
-don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable by search engine spiders -don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead -don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process (instead of at the end) -don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of large image files; Photoshop has a “Save Optimized For Web” option (CS3 - “Save for Web and Devices”)

Process Makes Perfect
By following a web design process such as the one illustrated in this article, you increase the chances of creating a website that is well-organized, easily navigable, and very user-friendly. Lets face it - if visitors get lost or become confused while attempting to surf your website, they might hit the back button and look for a more user friendly website. People do not like to think when it comes to finding their way around websites. Don’t make them think. You do the thinking by planning out your website from stage 1 to stage 3 and you will find that more people will enjoy visiting your website.

Some Basic Web Design Tips

useit.com " align="bottom" height="9" width="13"> Alertbox " align="bottom" height="9" width="13"> Top 10 Design Mistakes

Jakob Nielsen's Alertbox:

Top Ten Mistakes in Web Design

Summary:
The ten most egregious offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.

Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2007.)

1. Bad Search

Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.

A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.

Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.

2. PDF Files for Online Reading

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

> Detailed discussion of why PDF is bad for online reading

3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.

Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.

> Usability implications of changing link colors
> Guidelines for showing links

4. Non-Scannable Text

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.

Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:

• subheads
• bulleted lists
• highlighted keywords
• short paragraphs
• the inverted pyramid
• a simple writing style, and
• de-fluffed language devoid of marketese.

> Eyetracking of reading patterns

5. Fixed Font Size

CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.

Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.

6. Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.

The page title is contained within the HTML “title” tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.

Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.

Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.

7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)

Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

• banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
• animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
• pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).

8. Violating Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.

The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."

This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.

9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command -- assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior.

10. Not Answering Users' Questions

Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish -- maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.

Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.

The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.

Other Top-10 Lists

• 10 High-Profit Redesign Priorities
• Usability in the Movies — Top 10 Bloopers
• Most violated homepage guidelines
• Top homepage usability guidelines
• Good deeds in Web design
• Web design mistakes (2005)
• Web design mistakes (2003)
• Web design mistakes (2002)
  With cartoons.
• Web design mistakes (1999)
• Web design mistakes (1996)
  My first list. Luckily, many of these mistakes have been fixed by now.
• Application design mistakes

See also: Usability 101: Introduction to Usability

I'll present my newest usability guidelines in the tutorial on Fundamental Guidelines for Web Usability at the Usability Week 2008 conference in San Francisco, London, and Melbourne.

---

> Other Alertbox columns (complete list)
> Sign up for newsletter that will notify you of new Alertboxes

---

Copyright © 1996-2008 by Jakob Nielsen. ISSN 1548-5552

Create Sites With Impact

First impressions count and with the clock ticking, make sure your site has impact.

You’ve got 50 milliseconds – just one twentieth of a second – to impress us. If you aren’t sure how long that is, go and get a stopwatch (or use your mobile) and time it. According to recent research, it’s the length of time it takes site visitors to decide if your site has anything of value for them. Scary isn’t it? It doesn’t matter how great your navigation, or how popular your online store, if you don’t make that all-important, top-quality, first impression, you’re history. This issue Karl Hodge shows you how to beat the clock with tips and tweaks from web professionals...

It’s long been assumed that web users make their mind up about sites in a short space of time. Some sources say you’ve got twenty seconds to make an impact, others a more speedy ten. A recent series of studies by academics at Careleton University in Ottawa, Canada suggests, however, that the allimportant first impression is made in less than one tick of the clock. They flashed a series of sites in front of test subjects and asked them to rate the pages for visual appeal. The finished study concluded that visitors were able to make their mind up about whether they like a site’s home page in just 50 milliseconds. That’s one twentieth of a second.

If you’re surprised, you’re not the only one. Even Gitte Lindgaard, Director of the Human-Oriented Technology Lab that carried out the research had set the bar much higher; “My colleagues believed it would be impossible to really see anything in less than 500 milliseconds,” she told the journal Nature. “Unless the first impression is favourable, visitors will be out of your site before they even know that you might be offering more than your competitors,” says Lindgaard. It’s enough to make your head spin.

There’s more too. Cathy Dudek, a researcher who worked on the third phase of the study, told us there was a ‘high consistency’ between the sites rated as visually appealing by test subjects. “In study one, the 25 most appealing home pages were also the 25 most appealing in study two, and the same was true for the 25 least appealing home pages,” said Dudek.

If that’s the case, then perhaps visual appeal – the measure that was common to all three phases of the study – might be something you can predict and even design for. John Knight, Director at usability research centre User-Lab (www.user-lab.com) suggests there may be something in that hypothesis, “You can probably generalise an aesthetic preference to a specific audience,” he told us. Interestingly, there were also matches between the visual appeal of a site and how several other characteristics were rated. These included design, layout, colour use and ‘imagination’.

While the researchers at Carleton couldn’t venture any conclusions beyond those already in their research, Cathy Dudek admitted these were interesting results. “It opens lots of doors, and should inspire further research,” she said.

What this study shows academically, many good designers already knew intuitively; you really don’t have long to make your mark. To create a positive impact with your home page and site there are some broad rules you can and should follow – and the basics are easy to identify. Your pages should look and work the same way on all target platforms. Sticking to W3C standards (www.w3c.org) to ensure consistency helps, but browser quirks should be taken into consideration. We’re pretty sure by now that slow loading Flash splash pages are a big turn off – even in broadband Britain. “Can you imagine the BBC with a huge spinning globe intro page and music that you were forced to experience or click to surf through every time you visited the home page?” asks Tim Gibbon, communications director of WebTrafficIQ (www.webtrafficiq.com).

We also know that people expect and, indeed, should get clear navigation cues within the first half of the page. But what about more esoteric issues? What about those elements – design, layout and colour – that the Carleton study identified as being so important?

In the eye of the beholder
“What makes a visually appealing site is often in the eye of the beholder, but there are some general rules of thumb,” says Jason Arber, co-founder at Pixelsurgeon. “As the Canadian study shows, users have become very adept at deciding whether they like a site in less than a second. The eye scans the page from top left to bottom right, looking for visual clues, so having extremely clear navigation and a clean layout will work in your favour. The brain can process images very quickly, so a couple of wellchosen pictures will help, as will a complimentary colour scheme”.

This advice should be taken in context and sites designed with a specific audience and its needs in mind. “If your web site is for a company specialising in relaxation techniques and the site is bright pink, you’ll find your visitors quickly hitting the back button,” says Arber. This is an appropriate example, as colour is especially important when thinking of the initial impact a site will make on the user. Whether you choose a bold statement or a more subdued approach may depend on your audience, but either way, colour choices will have a profound influence. “Colours work online in the same way that they do in print,” says Arber. “Certain bright colours can quickly draw the eye, while more neutral colours are calming and sophisticated. Unlike print, however, once a site is live a quick tweak of the style sheet can create a whole new colour scheme”.

For more on conducting your own usability tests, check out the US government’s own usability site www.usability.gov/methods/usability_testing.html

Web design evolves over time; it’s not a static thing. Pages with silver backgrounds were all the rage in 1996. At the beginning of the noughties, sliding Flash navigation bars could be found on all the hippest sites. Does following these trends make your site more appealing? “By coincidence or design, many “Web 2.0” sites favour a stripped down look,” says Jason Arber, “There’s clean typography and simple neutral colours, such as dark greys for text. Because these sites are leading the way with technology, expect their look and feel to permeate the entire web.”

We’ve noticed a further trend among Web 2.0 sites: rounded corners and distinct, colour-delineated content boxes. Visitors love sites like Flickr and Technorati for their content and design, so if you use similar visual elements in your layout it’s reasonable to assume that some of that success will rub off on your site. Be careful of trying to be too ‘contemporary’, though. This year’s Google may be next year’s Altavista. Trends age extremely quickly, while classic design lasts.

While the Carleton study concentrated on visual appeal, content plays its part in making a positive impact. In fact, the research found a symbiotic relationship between the two. The tests discovered a ‘halo effect’, where content on pages that were deemed aesthetically appealing by the participants was more highly rated than page designs they didn’t like.

John Knight makes an interesting suggestion. Sometimes it’s best not to saturate your front page with content. Although it’s important to clearly state what your site provides in a tone and manner that’s appropriate to your audience, curiosity is also key. For maximum impact, you want to draw users into the site – not give them everything on the front page. That means linking to content in an eye catching way, rather than running your big stories or listing your full catalogue on your home page.

Measuring success
Although these design tips can be applied broadly, there’s one rule that overrides and informs them all; know your user. “People tend to think of other folk’s taste being like theirs,” says John Knight, “That’s not the case”. Different people and different audiences have different tastes, desires, needs and aspirations. While you may be able to generalise about those tastes at the prototype stage, there’s only one way to find out if you’ve got it right for certain; and that’s to test your site.

There are two distinct types of research you can undertake. You’ll start with usability testing before you launch. We’ve got some great tips elsewhere in this article, but the first thing you should know is that it’s not brain surgery – anyone can put together a usability study. “It’s probably possible to hash together a guerrilla version of the Canadian study,” says Gerred Blyth, Head of Consulting at Human-Computer Interaction experts Amberlight (www.amber-light.co.uk). “Take a screen shot of the home page and make a PowerPoint presentation that advances the slide after a fraction of a second. Put the slide show in front of your participants and record their reactions.”

Though your home page is important, don’t forget the rest of your site. “A large number of visitors arrive through internal landing pages. It’s equally important to usability test these journeys and ensure that users are driven into other areas,” says Blyth.

With template based content management and external CSS is becoming the norm for page building and layout, it’s easier than ever to tweak your site after the fact. You can continue running usability tests after your site has gone live, but now you’ve an additional source of data too – your actual users.

Tim Gibbon explains: “Web analytics software is used to determine and understand how visitors arrive at web sites, how they navigate, where and how they are exiting it and why. It’s one of the first and most crucial factors a web site owner needs to consider when making their web site ‘sticky’ because this creates the relationship and builds a rapport with them,” says Tim.

Agencies like WebtrafficIQ can use their expertise to do this for you, though, there are options for personal pages and outfits on a small budget, too. AWStats is one of our favourite site traffic tools. It’s free, CGI powered and displays the data it gathers about your site traffic in colourful, easy to understand charts and tables.

With all these tweaks and testing guidelines, your site should be as attractive to your punters as pollen is to bees. Hopefully it can do that in the fraction of a second that your user take to make a value judgement about your front page. It’s not all about design, though, the Carleton study deliberately excluded sites that were famous or familiar to the test subjects, so you’ve one last weapon in your arsenal: spin. “Lots of research shows that branding is persuasive in forming favourable impressions,” says Cathy Dudek; “I think it does have an effect”. We think that combining our ninja design tips with a bit of judicious marketing should be everything you need to make your mark.

How to Redesign a Web Site

Most designers would jump at the chance to revisit their work but what is the right motivation for a site redesign and how should the process actually work? .net puts you in the know

Even if you get it right first time, there are plenty of reasons to take a fresh look at an older site. For a start, the web is changing. Again. Consider the web circa 1994 – design didn’t even come into it for those of us struggling to view grey, graphics-free pages using Mosaic. Today’s Web 2.0 revolution promises an epochal shift in user-expectation as significant as that caused by the introduction of streaming media, WYSIWIG web design applications or Flash.

There are other factors, too: accessibility, for one, and, of course, the time-honoured tradition of corporate re-branding, which is as good a reason for redesigning a website as any other.

When it comes to redesigning, there is a clear divide about how websites should be handled: is it better to patch-up any problems and give a quick coat of paint to the original aesthetic or burn the whole thing down and start again from scratch?

To redesign or not to redesign

Ultimately, the level of redesign required depends on how well-designed the site is in the first place. A poorly designed site that makes use of tables, deprecated HTML, lacks accessibility features for disabled users, doesn’t work properly or is simply horrendous to look at will need something rather more comprehensive than a makeover.

“Good designers redesign, great designers re-align,” says the respected new media designer Cameron Moll. Moll, who contributes to webzine A List Apart (alistapart.com), explains that some sites can be redesigned comprehensively and immediately while others need to take a more gradual approach: “You have to understand and evaluate the users’ switching costs – will a full-blown redesign shock them? NationalGeographic.com is undergoing a phased redesign at the moment. You can go through the site and see how some areas have the new design and some, the older one. They’re doing a live redesign in pieces, which may not work for everyone.”

When dealing with well-established brands the process is likely to be a much more protracted affair because such work has extra considerations. Damian Cranney, managing director and co-founder of Frank (www.frankbelfast.com), explains that if you’re not working on everything from the branding upward, dealing with someone else’s design is going to be a certainty: “A lot of the time you’re inheriting other people’s work and this is the most frustrating part of any redesign,” he says.

A question to ask of any site undergoing a redesign, or any client interested in pursuing one is: what is the motivating factor? The answer will often define whether a site needs a simple revamp or a complete re-imagining.

When it comes to motivations for redesign, there are good reasons and bad. Good reasons include a company or product re-brand or a desire for marketplace re-positioning, updating to web standards or implementation of much-needed new functionality. Bad reasons might include keeping up with fashions, or even just a vague notion that a site needs to be changed – something rather different from knowing through business experience that a site is underperforming or is just plain ugly.

“There are two camps,” says Moll. “One typically relies on aesthetics with someone deciding ‘It kind of looks old’. That kind of emotional response to aesthetics brings about the redesign. The other focuses on strategic objectives and user-needs to decide that ‘our demographic has changed’ or ‘the market has shifted’.”

Stuart Avery, joint managing director of Bristol’s E3Media (www.e3media.co.uk) explains that his clients approach redesigns very rationally: “A redesign can be triggered by a branding change – some of our clients, such as Triumph, have gone through this – others may have under-performing sites. Also, there are patterns of design and usability that people get used to, particularly in ecommerce,” he says.

www.betfair.com

Based in the UK and licenced in Australia, Austria and Malta. www.betfaircorporate.com British-based betting website Betfair overhauled its site in February of this year. Originally launched in 2000, Betfair won a Queen’s Award for innovation in enterprise. The company, a registered bookmaker, uses its website to take a different view of betting. Betfair is a betting exchange, which operates in a similar fashion to stock exchanges, allowing punters to bet at odds set by other punters rather than the bookmaker itself. .net spoke to Joe Waller, Betfair’s head of exchange engineering.

.net: Why was Betfair redesigned?
JW: There are several reasons: from a product perspective, it’s important to not only deliver new products but to keep users involved and make usage easier; we read our forums – there’s an active community and we take notice of what they think; we have enormous access logs and use that data to try and understand our customers. The question to ask is how can we become more successful and that, for us, involved a redesign. Also, the technology of the web grows – things become possible that were not before.

.net: How comprehensive was the process and what did it involve?
JW: We really tried to do an awful lot of stuff – our timelines were quite aggressive. We launched [the redesigned site] in February this year, having started the redesign in August 2005. This was a long time for us but we developed prototypes and wireframes that went to internal and externally focus groups. If we do a redesign it’s really important to keep focused. It’s very easy to lose it and say things like ‘this will look cool over here’. You have to ask the question: are we keeping our eyes on the ball?

.net: What were the biggest challenges?
JW: It’s incredibly challenging technically to run an exchange. We promise you the price you wanted or better, so it operates on a first come, first served basis. This means that it is a serial process, which is a significant technical challenge. A normal stock exchange runs during business hours – we run 24 hours a day, seven days a week. As far as transactions go, we process more than most stock exchanges. The design is largely in house because of the huge technical challenge.

Accessing the users

A growing factor in web design is accessibility. In the early days of the internet, this wasn’t an issue – disabled users simply were not catered for. Today, things are different. Patrick Lauke, webmaster at the University of Salford and freelance designer at splintered.co.uk, says: “A site should definitely be redesigned if the current one isn’t up to scratch – there are both legal and moral reasons to do so.”

Designers in the UK need to be aware of compliance issues surrounding websites because the Disability Discrimination Act (1994) has now been amended to cover websites. “Basically, it comes under the provision of goods and services,” says Lauke. “The code of practice, which came out later [than the DDA (1994) itself] does specify websites. They have to be accessible to the visually-impaired, deaf and hard-ofhearing.” All of which is perfectly laudable, but what, exactly, does ‘accessibility’ mean? “A lot of it is common-sense, really. If you provide audio content, for example, you should also provide text transcriptions,” says Lauke.

There are collateral benefits to making accessible sites: market expansion, of course, is one but there are others. “If a university lecture is made available as a text transcript, it can be used for quotations much more easily than an MP3 file,” says Lauke.

Lauke flags the growth of podcasting as a problemarea for accessibility: “For some people, it’s so much easier to put on a mic and talk rubbish instead of typing it.” Here Lauke is echoing comments by Andy Hertzfeld, one of the original designers of the Apple Macintosh computer, who feels that podcasts go against the very nature of how information is presented online. One major benefit of offering a transcript is that, unlike audio content, text transcriptions are fully searchable and will be indexed by search engines.

“With web-accessibility, I see a parallel with access ramps in architecture. That’s not done purely for wheelchair-users. It has other benefits, for example, delivery of goods,” says Lauke.

There is a danger that the DDA (1994) – and similar provisions elsewhere, such as Section 508 in the United States – may be used by unscrupulous designers to make a quick buck by forcing redesigns on clients. Clients should not have their hands forced, at least not by designers, when it comes to accessibility. Instead, if a client is not convinced about the need for accessibility, explain to them that a standards-compliant site is not only an ethical imperative, but will also create greater market opportunities. After all, business people think in business terms.

Surfing the zeitgeist of redundancy

When it comes to motivations for redesigning, an oft-quoted response is desire to keep up with the cool kids – trend following.

Trends are all very well, but there is the danger of becoming too obsessed with ephemeral fashions. A newly designed site may look good today, but if a designer becomes obsessed with following each and every passing fad they may well awake to find their work the visual equivalent of Sigue Sigue Sputnik.

Cameron Moll is suspicious of redesigns motivated by trends: “This goes back to redesigning merely for aesthetic reasons. I think it is harmful to redesign to just keep up with trends.” For Moll, such redesigns are not just unnecessary, they also risk not fulfilling clientand user-needs: “This is allowing external factors to dictate what you do,” he says. “I don’t think it’s necessarily bad to adapt to trends. Apple does a great job of not only adapting, but setting trends, but to just slavishly follow is not very creative.”

In a sense, obsessive style-watching is a failure of imagination. Certainly, to begin emulating ‘what’s hot’ in a purely robotic fashion is to start out on a journey that’s likely to end at the dole office, but, conversely, it’s impossible to not be influenced by what you see – nor should you try.

When Moll says, “Good designers redesign, great designers re-align”, he is playing on the old adage: good artists copy, great artists steal. Reportedly coined by Pablo Picasso, this comment itself has been purloined so many times since then it’s now routinely attributed to all manner of people and has been regurgitated by virtually every media commentator you could care to mention. In truth, Picasso probably didn’t even say it, though he did note that artists should be aware of other artists’ work – and this is an important point.

Keeping-up with every passing fad in web design is a fool’s errand, but knowing what other people are doing – and being inspired by it – is just good sense. Plagiarism is bad, but inspiration is vital.

Stuart Avery explains that his company E3Media keeps an eye on the web design world: “We have a creative database of sites that people, internally, think are cool. We also try go get out and about and see design in the real world.”

It’s not just other designers you should keep an eye on, though. As a rule, designers should keep their eyes open and pay attention to the world around them. Damian Cranney from Frank says that he gets inspiration not only from works of design, but from the world around him – and his clients: “It could come from a conversation, something the chief-executive says in a meeting with you, it can come from the company’s location or the way they work. Inspiration can come from anywhere.

“We find trends occur on a micro-level – a year ago we found that a lot of clients wanted content management systems for sites that would be updated daily, now we’re finding that people are, once again, wanting really cool-looking sites.”

Frank’s unapologetic, design-focused strategy is not necessarily suited to every client, which is something that Cranney freely admits: “We’re not focused on search engine optimisation – that term makes my head explode. A website is an affirmation of what you hope people think of you,” says Cranney. “I believe that design, though an inherently commercial activity, is about employing visual images to solve communication problems. The media are deployed to say something. Some people wax lyrical about the business-to-business aspect of things or site optimisation. Well, that’s for the marketing department to consider and it should all be in the brief. The designer has to produce a working design of cultural significance.”

Cranney is here exhibiting some good business sense: all designers are different, as are clients, and all will bring different things to the table. In order to succeed, it is vital to know your clients and to play to your strengths.

The National Geographic home page circa 2005 was a fairly typical info-rich design. It’s quite stark by today’s standards and uses a lot of tables. The new NG home page makes extensive use of CSS for both styling and positioning. Tables are still used, but not to the same degree as in 2005. Note that the subtle colour-scheme using gradated greys makes the page more attractive.

Value judgements

It sounds so simple: a successful website is one that works. But how on earth should a website be evaluated? From a prosaic and purely functional perspective? Or should you grapple with the more nebulous area of aesthetics?

It’s difficult to make value judgements on aesthetic issues, but not impossible. One problem is our criteria for quality have changed and the notion of a ‘correct’ design has been exploded. Nevertheless, judgements must be made.

An amateurish site will be easily identified – bad design of that order is easy to spot, but there’s more to aesthetics than avoiding the use of corny type faces and dodgy images. The aesthetic of a site should be judged by the needs, desires and expectations of its users. Technically, both the Guardian and The Sun are the same kind of product: newspapers. However, they take rather different approaches to design and layout, approaches that can be seen as clearly on their websites as they are in the actual newspapers themselves. In short, keep the audience in mind: there’s no point employing the simplicity of Die Neue Typographie if your client is a discount superstore.

Beyond the rarefied realm of art, there are other methods of distinction and qualification that a successful designer must employ. For a start, most sites function as part of a business. A typical pitfall in the redesign process is to become over-involved in art issues or side-tracked by colour-schemes or obsessed with technical details and forget to keep an eye on the bottom-line: does the site do what it is supposed to?

This happens time and again in web design. It happened with frames, it happened with Flash and it happened with streaming media. Now it’s happening again with AJAX. Cameron Moll explains: “AJAX came along and suddenly there were two camps. The first group thought: ‘we’ve got to put it everywhere’ and the second decided: ‘it’s useful but to use it for the sake of it is poor judgement.”

There are methods by which a designer can assure success – clear and frequent communication with the client is one and site-testing is another: “We have a level that we want to achieve,” says Avery. “Alongside that we perform user-testing.”

Thanks to today’s sound-bite politics, focus groups have a bad reputation, but if a site is to face heavy traffic from the public they’re virtually essential – people often approach websites in ways that no designer could ever think of and a focus group should help show where any otherwise invisible problems lie.

The best way to avoid mistakes is to stay on track and the best time to judge is actually at the beginning and throughout the project. Damian Cranney explains: “That kind of judgement happens at the beginning – you set the objectives and come back to the client, showing sample projects. At that point, set up a meeting to discuss these things. Therefore, the judgement is made by the client as you go along. The feedback at later stages should simply be things such as changing images.”

Ultimately, though, there is one over-arching objective in any redesign: the new version must be better than what preceded it. Keep this in mind and you’re set for success.