The Design Process

Rowers by Y

Rowers by Y

This is the second stage of the 5 Stages of Project Management series for web design projects. So far, we have taken an overview of the 5 stages as a whole and looked at how to write a successful design brief as part of the Inception stage. We are now ready to look at Stage 2, Design.

Before starting this stage, if you have completed the inception stage, you should have a well defined brief and understand the scope of the job. Without these, your project may end up with higher costs and delay because your expectations differ to those of your client. Now you are ready to evolve your ideas into some concepts to present to your client. For now, you are not actually building the site; you are designing concepts to a pre-construction stage that can be presented to and agreed by your client.

The brief may have given you a number of ideas for how to design the site and this stage is intended to consider these ideas, present the best to your client and identify the preferred option. But before you can do that you need to get answers to a few more questions and test your ideas against them.

Some things a web designer should consider:

Users

You need to test your ideas against what users will expect to see. The users of the site are of absolute importance – if you put your navigation system at the bottom of the page, for example, is this what users will expect? Where will they expect to see the logo? There are a number of conventions that users will expect and you should consider these carefully before you decide to go against them.

You also need to consider user-specified items that should appear on the site, such as login widgets, video, interactive elements, forms, etc. How and where will these appear? How important are they for functionality, usability and ‘stickiness’ — the ability to keep users on the site. Create a hierarchy of these objects.

Functionality

Really this is a subsection of Users because it describes how users interact with the site and whether it provides the functionality they expect in the places where they expect to find it. Do users have to search through 20 pages of description to get to the ‘buy me’ button? If they do, it ain’t functionin’! This is about making it easy for people to do what they want to do on the site. Functionality, to some extent, also covers speed: how quickly does the page load, how many server calls are made to load the page, does the JavaScript slow the page down?, and also how quickly can a user skim the content to find the piece that they want to read (is the typography helpful or a hindrance, is the structure of the page suitable to the content…)?

Accessibility

This is another important feature of any site and one that you should start designing into the site from the first drawing. In this sense, accessibility is about the colours you use — do they provide sufficient contrast? — The fonts you use, — are they easily legible? Is the content going to be overshadowed by that great picture you want to use? Are the link methods you are planning to use accessible? Have you structured content correctly, — is data stored in a table and is the table accessible?

The fundamentals of these questions will be put into practice when you start building the site. Creating the foundation of that best practice now, will make life a lot easier further down the line.

Plan the site

You should also have a clear idea of the content that will appear on the site, how pages will fit together — which page will link to which? This will help you to develop your site structure and the overall site map. This is essential for a large site but is also really useful for a small site and will help you to start structuring your Search Engine Optimisation as a core part of the page design.

Do you want to see my sketches?

Before you start anything electronically, you should use pen and paper to sketch your ideas. This gives you the opportunity to see how they look, modify them and hone them without spending hours getting Fireworks, Photoshop, Illustrator, etc. displaying what you intended and finding it doesn’t work. It also gives you some rough concepts to present to your client and seek feedback. You should only start committing them to electronic form when you have some clear ideas on paper.

Sketching a design allows you to play with where elements of a page should go to maximise visitors’ attention and optimise use of the hotspots on the page. It also allows you to ensure that visual elements work together.

What do you get out of following a design process?

There are very clear benefits to working through a design process (no matter how basic). It gives you a structure to work to and elements on which to focus; so, rather than jumping in and getting it wrong, you are able to concentrate on making the design achieve the results it expects before dedicating time and your client’s money to a concept that simply won’t work. Furthermore, it will help you to explain your design process to your client.

At the end of this stage you should be presenting your final mock-ups to your client for approval and to decide on which design to follow. This is much easier if you are able to describe the process you have followed and explain the reason you have made the decisions you have made.

The next stage in the five step project management cycle is construction. If you have developed your design well, you should have:

  • A site structure and site map
  • An understanding of the back-end data structure
  • An agreed design to carry forward
  • An understanding of what content will be required

Is IE6 dead?

.net campaign to bring down IE 6

.net campaign to "Bring Down IE 6"

There has been much debate in recent weeks about the death knells of Internet Explorer 6; particularly since .net magazine ran an article in its February 2009 issue (http://www.netmag.co.uk/zine/discover-culture/calling-time-on-ie6 ), which has been supported by some designers.

IE6 is well known for its quirky interpretation of web standards and for requiring significant code hacks to enable web sites to appear as they should. I remember in the Dark Ages of the internet, when Microsoft and Netscape were battling for browser supremacy, that designers started putting “This web site is best viewed in Internet Explorer [or Netscape Navigator]” messages on their sites. At the time there were only a fraction of the people online compared to today, and the internet was not a commercial entity in the way it is today. The decision by Microsoft to gallop headlong into the distance when everyone else was going in another direction has led many designers to pull out what little hair they had left and throw their arms up in despair for many years. I, like most web designers, keenly await the day we can finally bury IE6 for good. However, frustrating and annoying as IE6 is for designers, a word of caution needs to be sounded before ditching the browser from design considerations.

It is important for designers to remember that they do not make browsers; they make web sites for visitors to view in the browser of their choice: a browser is a user-defined tool over which the designer has no control. In the same way, a designer has no control over whether or not JavaScript is enabled on the computer a visitor is using. To say, therefore, that you are not considering IE6 in the design of your client’s site is effectively saying that you are willing to turn a proportion of your client’s customers away.

It is indeed fortunate that more recent browsers have been more closely aligned to web standards and the trend appears to be towards meeting the standards rather than creating their own. Even Microsoft appears to have seen the light with IE7 and 8. So, the question is whether or not IE6 is obsolete now that there are alternatives and updates to preferred browsers available.

On the face of it, this is a compelling argument as IE6 users have diminished in number, seemingly moving to IE7, IE8, or one of the other browsers, such as Firefox, Opera, etc. However, there is a core of users who still rigidly seem to be sticking with IE6 and it might be worth considering who these people are.

Traditionally, they are thought to be dullards who can’t or won’t update their browsers and who need to be forced to do so. Looking at the statistics available from W3Schools, there is a sharp move away from IE6 over the last twelve months: in April 2008, over 29% of visitors used the browser; in April 2009 this figure was 15%. This downward trend can be rationalised by the increases in Firefox, Safari, Opera, Chrome and IE8.

Table of browser usage for 2008 - 2009 from W3C Schools

Browser usage 2008/2009 by W3C Schools

Market Share shows a similar tale. In June 2008, IE6 controlled approximately 26% of the traffic. By April 2009, the proportion dropped to 18%. Again, this trend can be attributed to the massive growth in popularity of Firefox, the growth of Safari and the release of IE8.

Browser trends graph and table by Market Share

Browser trends by Market Share

While these figures are often disputed because they rely on site traffic to the sites that publish the results, what cannot be denied is the continuing popularity of the old browser, IE6 still commands about 15 – 20% of the market share.

But why might this be the case? Are up to 20% of internet users dullards? Of course not. Many of the continuing users of IE6 are large corporate enterprises who deliberately wait before upgrading, to make sure that the latest versions of operating systems and software applications (especially Microsoft) work and are reliable before upgrading themselves. Ending consideration of IE6 at this stage could alienate a large proportion of sizeable corporate clients.

Designers should be led by what the users of their clients’ web sites need. If the client has a large number of corporate customers, chances are that some of them will still be using IE6. Similar chances exist for a large proportion of general users, who are not necessarily technologically clued-up, or might not know how to upgrade (or change) their browser.

It is not the designer’s responsibility to dictate who can view their clients’ web sites. That is a decision that rightly can only be made by the client. However, the designer’s responsibility is to help their clients to reach an informed decision by explaining the problems of IE6, identifying the relevant user statistics for the site (or general stats for new sites), identifying trends over time and demonstrating the pitfalls of not including IE6 as a supported browser.

Taking the statistics from my own site, IE6 accounts for just over 20% of visits in the last year to April. Amazingly, there were even some users still clinging on to IE5.5! However, over the last six months, the trend has completely changed. No-one now is using IE5.5 and IE6 has fallen to 9% of visitors. Firefox has actually overtaken IE as the browser of choice with over 45% market share, compared to IE’s market share of 37%.

Redcentaur's own user analysis

Share of visitors to Redcentaur using IE 6

What this shows me is that if I suddenly switched off support for IE6 now, I would alienate 9% of my visitors. This is something I am not prepared to do as that is equivalent to saying that 9% of my customers are not valued.

The key is for the designer not to unnecessarily alienate a proportion of potential customers for their clients. If it is clear from research specific to the site being designed, that a proportion of visitors are using earlier versions of browsers, then as a designer it is your responsibility to include them in the design of the site.

Clearly, this will require a discussion with your client, where the pros and cons of including IE6 and other browsers are identified. This will also involve a discussion about the additional cost of hacking the site for IE6, which should be costs included in the estimate you provide your client. It is your clients’ decision whether or not to include IE6 within the design – afterall, it is their site, they are their customers and it is their risk.

Personally, I would prefer not to start seeing sites saying “This site is best viewed in Firefox 3.2”. It is really not a professional image to portray for your design or for your clients’ corporate web site.