Examples in bad web design

Posted by gigglemedia under Web design and development

The term web design does not only refer to aesthetics of a website but also its structure, functionality and features. There are numerous ways a website can suffer from bad design, this article looks at poor structure and organisation as a basis for bad web design by examining three websites that suffer from it.

The website learning curve

There is a learning curve with every new website a user visits. Ideally, the learning curve is unnoticeable due to user expectations. Users expect the main website navigation to be located at the top or on the side of a browser window. Users expect hyperlinks to be underlined or highlighted in a distinct colour.

When shopping online, a user expects to create an account to proceed with purchase (and is pleasantly surprised when they do not have to). A user does NOT expect to create an account or login to view a list of a businesses services and products.

When the learning curve is steep…

If a website has a steep learning curve associated with it, the user is more than likely to give up on it no matter how beautiful or how wonderful the service and product on offer.

Here are three example websites that suffer from poor structure and information organisation.

MCI Management Center

http://www.mci.edu/com/index.html

This is the website of an Austrian university yet at first glance, it is not entirely clear the site has anything to do with teaching or learning.

The most noticeable mistakes in the web design are:

• The lack of a grid structure on the homepage leaves the user confused as to where to focus first.
• On the home page there is no distinct and immediate message about MCI and what type of service it offers. “Bridging university and business” can be interpreted in a number of ways. A supporting headline is required.
• MCI logo is relegated to the bottom – what an outrage in branding!
• The main navigation design is bizarre and not instantly recognizable as a navigation tool. It is a haphazard design and inconsistent with the rest of the website.
• A lot of small-sized text that isn’t real text – it is text saved as an image. Saving large chunks of text as an image limits accessibility and hides the website content from search engines.
• The single image of the Alps on the homepage is redundant and does not convey to users that MCI is an institution that helps students “establish strong links with the international business world”. At least in the German version of the site, there is an image of a business man.
• There is poor hierarchy of text and hence making it difficult to skim read.

In terms of first impression as an educational institution – MCI’s website leaves much to be desired.

MSY Technology

http://www.msy.com.au

MSY Technology is a well known computer hardware and technology shop with great prices. It is widely used by those in the know eg computer professionals, geeky university students, gamers.

The rest of us will not have heard of MSY unless referred. In this case, the building of trust in a business is important and the way this website has been put together does nothing to convey professionalism or even semi-professionalism.

With the amount of choice customers have now, some customers will not buy from a company purely based on an ugly website that is hard to use – much like not eating at a restaurant that has dirty cutlery and tables.

This website should be completely redesigned. The stand out mistakes are:

• Non existent consistent and clear navigation
• Ransom-note text styling – so many font styles, colours and sizes that it is an eye sore to look at, let alone try to read.
• Text that look like hyperlinks but are not.
• Pages that open up and user gets lost in, not knowing how they got there or where to go next.
• Pages that open up as PDF without warning.

This website needs to be completely redesigned and is a prefect example of why it is important to have a website professionally planned and designed.

Jacksons of piccadilly

http://www.jacksonsofpiccadilly.co.uk/main.htm

Jacksons of Piccadilly is a premium tea house in London. The website has gorgeous artwork and smooth animation but suffers from style over structure and substance.

The features of bad web design this website suffers from are:

• An unnecessary introduction page. The home page of this website requires the user to click through to view useful content (not that content is promptly presented). This introduction page is redundant and would be better placed on the follow-on page of the website.
• No branding after the introduction page. It’s a good thing humans don’t have the memory of a goldfish.
• Invisible and mysterious navigation. It’s a game of hide and seek for the user as one moves the mouse around searching for where to click to find information. The main navigation is the key to a website, hiding the navigation hinders and frustrates the user. To make matters worse, as Flash based wesbite, users cannot even click the Back button in the browser.
• Over animation – the first time the site animates it’s okay but it quickly becomes Flash Trash and a hindrance to a user in search of useful content. Every time a user wants to read information about their tea range, they must watch the animation. This chews bandwidth and wastes the user’s time.
• Complete Flash content – all of the text is embedded into the Flash file. This means the text cannot be selected, printed, accessed by text-readers nor can it be indexed by Google and other search engines.

Although this website has been professionally designed, it has not been properly planned and thought out. The structure and information organisation is terrible. That is why picking the right web designer is important.

What you should do to ensure good structure and organisation:

• Use a standard layout on every page. This means keeping the navigation bar, colors, fonts, link styles and other web elements consistent in every page.
• Every page should have an effective website navigation bar, either on the top or on the left. Don’t play hide-the-navigation with your user, it’s not that much fun in reality.
• Place the logo at the top (preferably left) and always link it to the home page.
• Reserve the footer to place your copyright notices and links such as a site map, a privacy policy, terms and conditions and contact information.
• Highlight the current active page in the navigation whenever possible so that the user is aware of where he is currently at. Here we highlight our menu in yellow.
• Don’t assume that users know as much about your site as you do. Users always have difficulty finding information, so they need support in the form of a strong sense of structure and place.