Web sites for large high-street retailers

This document looks at sites by large high-street clothing retailers: The sites are:

Overall colour schemes

All three sites use light, washed out/easy on the eye colours. M&S use a great deal of white and, in contrast to their bricks and mortar stores, the use of the branded greens has been greatly reduced.

Blue and variations on it are also used quite prevalently on the sites' home pages. M&S use it as a background colour to a dominant image of a model, John Lewis uses a large blue box, to its left, a photo showing cushions that compliment the blue as well as different shades of blue for its document headings; Next uses the colour both on its global navigation bar, on the background of its largest panel and in the section advertising the Next Directory. Finally, HMV use blue, tinged with grey, for large areas of their site. Their various side panels have blue backgrounds and their main header panel is also a grey-blue.

There is no doubt that blues are quite easy on the eye, but is there another reason for such a pre-dominance of that colour? According to colour psychologists, blue has many properties that could prove beneficial to companies with an online presence. For example, blue is the most popular colour for American consumers (although these are UK based sites, the abundance of blue on corporate sites these days suggests that this is an international feeling). The psychology section of About.com states that blue also Òrelaxes our nervous system, has a sobering effect on the mind and can cause people to be more contemplativeÓ(1). These companies will want to encourage people viewing their sites to stay for more than a few minutes so that they can browse as much as possible. Blue also indicates dedication and loyalty, something that any serious company would want to put across to anyone browsing its site; “it's okay, you can trust us, we're not some anonymous website, we're trustworthy, your card details will be safe with us.

Further investigation into M&S' site shows that the blue background is definitely intentional: the same photograph is used in the Women's Fashion section, but the model is on a grey background. The version with the blue background, in comparison, is a bad Photoshop job, with the model's hair having been badly removed along the fringes.

Image from the Women's Fashion section (probably the original)

Image from the home page (note the poor Photoshop job around the model's hair where the background has been changed)

A sample of Next's home page

A sample of Marks And Spencer's home page

A sample of John Lewis' home page

A sample of HMV's home page

Global navigation bars

The navigation bars on all three sites are shades of black, which also helps with the calm, sober feel that the pages have. M&S' site uses a light grey colour and is separate from its logo/masthead, John Lewis uses a darker grey and integrates the bar into the masthead and Next uses a pure black background, and again integrates it into its masthead.

Although M&S and Next are both fixed width, Next's navigation bar feels much more cramped. In fact, M&S' site is very well designed: it is about 715 pixels wide with a global navigation bar containing eleven Òbuttons”; in comparison, Next's is 770 pixels wide, contains eight buttons but feels much more squeezed in. Next's buttons have a solid border around them.

Sexual bias

One of the strongest things to come across on all three of these sites is who they appear to be aimed at. The overall feeling is very soft, the blues are light blues, and the choice of images and links definitely are aimed at females.

Marks And Spencer

The predominant image on the M&S site is that of the female model in a pink cardigan. Lower down the page, in a much smaller box is a businessman in a suit, but this is next to an image of a woman relaxing on a sofa and, next to that, an advert for Mother's Day.

Of the “Collections” links (links to fashion collections) on the left hand side of the page, the first five of the eight are all to women's fashion; of the remaining three, two are for male fashion and one is for school wear.

The global navigation at the top of the page is also ordered in a “female first” manner, starting with “Women”, “Lingerie” then moving onto “Men”, “Kids” and then onto non gender specific items such as Furniture, Gifts and Wine.

Next

Next is similar to M&S in terms of images and navigation layout. Next's homepage is much smaller that M&S' – it's obviously designed not to scroll at 800x600 – thus has less space to fit content in. Next uses one image of a person, a female model wearing blue jeans that compliment the dominant blues of the site. To the right of that is a pink box advertising flowers for Mother's Day.

Again, the navigation starts with female items first: Womens, Mens then Children, Homeware and so on.

John Lewis

John Lewis is slightly different in that it doesn't currently have any pictures of people on its home page; instead they have pictures describing various sections of their site, eg Technology, Mother's Day, Bed Linen etc. The use of blue is carried through in all of these images; the bunch flowers for Mother's Day is contains blue ones, the bed linen is blue and the laptop in the Technology section has a blue screen (not a Windows Blue Screen Of Death, though!). If it wasn't for the use of white space on this page, the predominance of so much pale blue could come across as quite cold, but a reasonable balance as been achieved. The images are less female orientated, but there is still a bias.

The main navigation has been split in an asexual manner, starting with Audio and TV then Computing, Electrical, Fashion, Furniture, Gifts And Fashion and so on. One could possibly argue that this is a male-centric navigation system as it has “gadgetry” at the beginning.

HMV

HMV is probably the least sexually biased of the sites, and this can probably be put down to the fact that music appeals to both sexes – there isn't one style of music that appeals to one sex over the other and this is reflected in the stock on the site's home page: there's a mixture of chart CDs and, in the DVD section, a mixture of horror, comedy and mainstream films.

Page layout

The page layout between the sites is different; two of them (M&S and Next) use fixed width and John Lewis and HMV use liquid layouts. Of the two fixed width sites, M&S' is left-aligned and Next's is centered. The two fixed-width designs use CSS for presentation and positioning, whereas John Lewis and HMV both use only CSS for some presentation; the liquid layouts have been achieved using a table-based layouts.

The page at 800x600

The 800x600 monitor resolution has, for many years, been the most common for computer users. W3Schools have started reporting that the next highest resolution up, 1024x768, has become more popular(2), although care should be taken as their statistics are culled directly from their site, which will have a more computer literate audience who are unlikely to want the constraints of 800x600's tiny resolution. As computer hardware becomes better and cheaper, (Dell no longer lists anything below 17 inches for CRT monitors forcing users who really want a small display down the flat panel route), designers can stat to feel a little less restricted in their designs, although it is essential not to keep one eye on the burgeoning WAP market which has tiny resolutions.

Above the fold

Possibly the most important things to consider when designing for 800x600 is what users will see “above the fold”: Òthe part of a web page that is visible once the page has loaded, normally it is the top part of a web page. This term is derived from the newspaper industry, referring to the portion of the front page that is visible with the paper folded.Ó(3). Each of the sites does this slightly differently, with implementations ranging from the good to the frankly very poor.

Next

As we have previously seen, Next's site fits perfectly onto an 800x600 screen. In some ways this is good because it means that users at this resolution don't have to scroll. On the other hand, users on a higher resolution see a site where everything looks cramped, with a small site in the top middle of the page.

This design is further flawed when actually looking at a product. Clicking on a link opens up a popup window 720 pixels wide (only 50 pixels shorter than the main site itself) that obscures the browser's address bar and also the left two thirds of the main site.

Luckily this design doesn't seem to be replicated too greatly on the Web, and hopefully Next are going to redesign soon and give themselves a much better designed site.

Marks And Spencer

M&S' site again shows how well it has been designed; when the browser window is shrunk to 800x600 there is a carefully chosen selection of stock and images perfectly framed by the browser. Just underneath the predominant image on the homepage are headers for the company's other main lines – Spring Fashion, Menswear and Furniture. This gives a visual clue to the user that there is something else lower down on the page that needs scrolling to see.

M&S' permanent stock lines (or at least this season's lines) are all available in the left-hand navigation bar and nothing is cut off from the global navigation bar.

John Lewis

John Lewis' home page isn't as well designed for 800x600 resolutions. Whereas M&S' site shrinks to provide a series of natural breaks whilst still hinting of more content below, John Lewis' site chops off dominant images at 800x600. The site also makes poor use of navigation buttons by completely hiding links to their Wedding And Gift List service, catalogue requests and more. It would make more sense to change the left-hand navigation bar from 'new this month' to a non date-based list and move those items further up the page. The left-hand navigation bar is very weak with just five plain text links to whatever the site wants to promote this month. The space is actually better used on the site's sub-pages where the design is stronger and stock is broken up into headed sections.

The whole page feels overburdened by the site banner and global navigation bar. They have used quite a heavy shade of grey which, although slightly counter balanced by the blues further down, is still slightly too tall.

HMV

HMV's site works quite well at 800x600; they get a good amount of stock onto the page and, unlike John Lewis' site, it doesn't feel overburdened by a heavy site banner and global navigation bar. The colours used for HMV's banner, although still grey, are much lighter and easier on the eye. The site's global navigation bar fits in nicely and looks good.

The main difference in local navigation styles between HMV and the other sites is that they have eschewed the idea of having one in favour of having a series of headed blocks. This helps break the page up adding more white space in between elements. It also helps users find what they're looking for as there are clearly marked headers defining each block, so if you're looking for the Top 40 Singles Chart, you can find it much more simply than if you had to wade through other links.

Like M&S, HMV have chosen to have one predominant image in the centre of their page that acts as a link to a current promotion. At the time of writing it is for cut-price CDs and this sits nicely about the other main areas on the page, the top-most of which is for DVDs (these have a higher profit margin than CDs which is probably why they are above the week's new CD releases). The central column works reasonably well, but some of the DVD titles with a reduced price have pushed the CD's down and out of view.

The right hand side of the page is taken up with colourful promotional buttons, which adds to the overall colour-balance of the site.

Fonts

There are only a small number of screen fonts that can be used on the web. This is because different operating systems ship with different fonts and some software packages (for example Microsoft Office) install new fonts that non-users won't have. Fonts cannot be rendered by the browser if they are not on the user's operating system. For example, the Metal Sludge website uses the Viners Hand font on its homepage which I don't have. Instead of it rendering with a jagged font, I get Times Roman. Below are two images, the first showing the browser's display without the font installed, the second with.

The most popular fonts for the web are Verdana and Arial followed probably by Tahoma. After that, we get into the realms of either the unstyled (where we'll fine Times New Roman), the amateur (Comic Sans) or into that of the “professional home page” where they will be fonts such as Trebuchet MS or Geneva.

Because of the near universal installation of Arial (licensed to Microsoft to be included in Windows(4) ) and Verdana ( commissioned by Microsoft to be a new screen font(5)) on computers, these two fonts tend to be the most widely used (there doesn't appear to be any formal statistics on which font is the must used, but spending more than a few days on the web will show that it is Arial and Verdana that are the two predominant fonts).

Verdana is the wider of the two fonts and, in my view, the more readable of the two main fonts. The four sites all use cascading style sheets (CSS) to style their fonts.

HMV

HMV uses the cascade of Verdana, Arial, Helvectica and then a generic sans-serif. The fonts are quite small at 10 pixels for body text and 12 pixels for bold.

Next

The use of fonts on Next's site is, like a great deal of the site in general, messy. Their main body font cascade is Verdana, Geneva, Arial, Helvetica and then a generic sans-serif, but they also use Arial and Tahoma as fonts, which can lead to a disjointed looking page. As with HMV, Next have chosen the inaccessible route and not used a flexible font sizing method; in fact they even go one stage further and use both pixels and points, which is a very bad idea for on screen presetation.

M&S

Marks And Spencer, instead of using Verdana as their primary font, use Arial (a small minority of designers eschew the use of Verdana on sites because of its rendering properties(6)). The site designers also made the sensible decision to use percentages to size their fonts so that all users will be able to resize them (one of Internet Explorer's many bugs is that it won't resize fonts declared in pixels). M&S' fonts are, in the main, sized at 75% of the browser's default rendering size (usually 16 pixels), so we get an acceptable looking, readable site.

John Lewis

John Lewis, like M&S, uses Arial as the predominant font. In the same accessible bent as M&S, they also use percentages to size their fonts, but go slightly smaller by using 70% of the browser's default size. The one area where John Lewis really falls down is in the hideous use of underlining on a large area of the home page, added to which the entire text of the link is added with a title attribute. This adds a very amateurish feel to the site that they should really lose.

Positioning of site elements

One of the most essential tents of good web design is that certain key elements are placed where users expect to see them. For example, a site's global navigation is almost always on the top of every page or on the left hand side and a site's logo is almost always top left on each page. For larger sites, including all of the sites that we've looked at here, global navigation is placed at the top of each page and, if there is local navigation, it is placed on the left. This style of positioning navigation elements isn't just part of the visual syntax of the sites we're looking at here, it's a visual syntax of the web; you'll be hard-pushed to find sites where the navigation is on the right, and it will be almost impossible to find any where the main navigation is at the bottom of the page. Needless to say, all four of 'our' sites follow these golden rules, with the site's logo on the top left of the page and the global navigation presented in a horizontal block at the top of the page.

Next in the line of essential items to position for an ecommerce site is the search box. Being able to search an ecommerce environment is essential to its ability to make money for the site's owners; this naturally means that the search engine box needs to be positioned in an area where the eye naturally gravitates. Almost always, this means the top or left of the page, and is what three out of the four sites here manage. The only exception is Next who, possibly because they are using such a small “canvas” to fit an 800x600 display, have decided to place their search engine box at the bottom of the screen. Even more confusingly, it jumps from being on the bottom right on the home page and on the bottom left on all sub-pages. In theory this isn't too much of a problem as the canvas is so small and the eye doesn't have so much to look at, so can quietly quickly find the object. There are, however, serious flaws with the search facility that ruin the flow of movement through the site. The search engine is built to only work with the Next Directory, a large hardback catalogue and will only search correctly if you enter either an “itemcode” or a page number from the catalogue. Trying to enter the name of something to search for (eg, “suit”) and the user gets bounced to the homepage with absolutely no explanation why. This design flaw is few and far between – the vast majority of sites have a much more sensible and consistent approach to design with the search box being located at the top of the page on the left, the right or the in the center.

The last “essential” of an ecommerce site is the shopping basket. This is a visual metaphor for the “bricks and mortar” shopping basket where goods to be purchased are placed before going to the checkout. The placement of this device is slightly looser than others such as the main logo and global navigation bar. The majority of sites tend to have the shopping basket at the top of the page and, whether or on the user has placed something in it, have it showing. Some sites, such as Marks And Spencer and HMV have theirs on the top right of the page, although HMV have theirs underneath the global navigation bar whereas M&S have theirs on the same level. This is, in my opinion, one of the design flaws of M&S' site – it makes the top of each page look cluttered; a shame after the rest of the site has been put together.

Both Next's and John Lewis' sites, unlike many other ecommerce sites, don't have a shopping basket visible by default; in fact with John Lewis' site, even after you've added something to your basket and then navigated away from the page, there is no visual clue at all that you have something in there. There is a constantly visible 'checkout' link as part of the global navigation bar, but this isn't updated when anything is added to the basket. Next's shopping basket system is disjointed at best and, much like the way that their site uses many pop-up windows to show stock items, makes for a poor user experience. When only one item has been added to the basket, a small line of green text appears at the top of the page informing the user of what they have added.

Once more than one order has been added, the user gets a screen showing what's been ordered. What we can see from this shopping basket page is the use of blues in the design, something that, as we saw earlier, is a definite design decision to help allay users' fears of ecommerce, which is still a new way of shopping for a great many people.

The four sites that we've looked at have slightly different ways of addressing the issue of shopping baskets. Next's and John Lewis' methods aren't the norm, with most sites having a shopping basket showing whether or not a user has put anything in it.

Summary

Although we have only looked at four sites, the use of colour, especially blues, in ecommerce sites is fairly universal. Sites such as Amazon use less blue in their site than others we have seen, but it is used. Larger ecommerce-only sites such as Dell use blue a great deal; maybe basing this on a theory that the more it is used the more “trustworthy” a site appears. The use of blue in images was also interesting – because Marks And Spencer made such a bad job of changing the background colour on one of their images, it became obvious that this was a carefully thought out image placement rather than a happy accident.

Most other colours used send to be quite sedate, the sites aren't wanting to distract users with garish colours, instead they're wanting to keep them browsing for as long as possible in the hope that they will spend money. In a similar vein, there is very little in the way of movement on most large ecommerce sites. This could be because of the W3C's Web Content Accessibility Guidelines state that movement in pages should be avoided until user agents can freeze content in pages(7), or simply because they seem a bit amateurish

The use of images is like most traditional shop catalogues – the sites use models to show off the goods to greatest effect and are limited by the medium; there is only so much space that an image can take up before it becomes unwieldy and spoils the look and feel of the page.

The use of fonts is, as could reasonably be expected, fairly uniform with Arial and Verdana being used as the two predominant faces. Although there are some naysayers who say Verdana shouldn't be used, it is still a font that looks good on screen.

The implementation of shopping baskets was probably the most surprising aspect of these sites, especially when looking at Next and John Lewis. From my several years of online shopping, I think John Lewis' implementation is the strangest I've seen, having no visual feedback on the main site even after objects have been placed in it. One wonders if they did much usability testing.

There is definitely a consistent visual syntax in these ecommerce sites. They all work slightly differently, but through several years of development (ecommerce is still a new field) sites are all starting to be laid out in a similar fashion, become more professional in their look and feel and also introduce more visual trickery to subconsciously get the user to stay just that little bit longer and spend some more money.

Citations