Recent Updates

 
Speed & Optimisation25 Nov 2012
Usability11 Apr 2012
Planning11 Apr 2012
About Me / Contact Me11 Apr 2012
Home11 Apr 2012
 
Last updated: February 21st, 2012  
Viewed times 

Mistakes: 20 avoidable issues in web design

With the growing popularity of jazzy "Web 2.0" design and the increasing use of interactive user widgets and social networking plugins, essential basic design practise is often neglected. Going back to basics is not as glamorous but many design mistakes can be easily avoided by taking into account the following issues;

1 - Poor navigation support

It's safe to assume that vistors do not know as much about your website as you do. Even the most logical of website structures will cause problems for some vistors who will struggle to find seemingly straight-forward information. Do your best to support their journey with a clearly categorised menu, a site map (a page that lists all the pages within a website) and also a good internal search engine. Most users come to a website to find information as quickly as possible and failing your well-planned menu, the next best thing, and something that can easily be relied upon, is a quick-fix search bar.

2 - Breaking the browser's "Back" button

The Back button of a web browser is one of the most often used navigation features and something that a visitor can rely upon to get them out of unfamiliar web-space. How often have you landed on a website and thought "I didn't want to go there - I'll turn around and go back the way I came"? And now think about how you most often achieve this... "Back", right? Of course that's assuming that the Back button works. Avoid using practices that break the Back button, such as instant redirects, annoying "stay on this site" scripts and by opening too many new browser windows.

3 - Not changing the colour of visited links

Knowing where to go next is easier if you know where you've been. On a website, this means being able to easily distinguish between a link to a page that has already been read and a page that you've not yet visited and the best way to do that is by changing the link colour to visited pages. If a visitor knows what pages they've already visited, they can;

  • avoid visiting the same page over and over again
  • ignore links that didn't provide useful information
  • re-identify useful pages that they may want to view again

4 - Using images for navigation

Menu buttons that have text embedded into them are bad news. Both search engine spiders and humans alike will have their movement around a website reduced. Google-bots are blind so they can't see "meaningless" images - they place more value on a nice, sturdy text-link that directs them to the next page via a descriptive link. Similarly, some web users still browse the internet with images turned off, so if they can't see where your menu is leading them, they have no cues to direct them around your site. It's fine to use button images as a base, but a successful menu will use text as its main navigational pointer.

5 - Orphaned web pages (dead-ends)

Due to the nature of Google, any page or sub-page can be an entry-point to your website. All web pages, as a minimum requirement, should therefore include a link back to the home page, ideally under the guise of a clickable logo that identifies the site it belongs to. It is also a good idea to include breadcrumbs to show where the page fits in relation to the other pages of your website.

6 - Missing or poorly used page titles

The page title contained within the head section of a web page is what provides a descriptive and clickable link in search engines. An external search engine is the main entry-point for new users who discover your website by reading useful-sounding title links, so you need to make sure that the text inside your title tags is both descriptive and enticing so visitors will click on it. If the title text is missing then so is the opportunity to attract new visitors to your website via search engines. 

7 - Long and over-complicated URLs (web addresses)

Website visitor will look in their address bars to make sense of their location within a website. Each page URL should therefore contain easily readable sub-folder and page names that indicate location in a website. Printed documentation also requires users to manually type page links directly into browser address bars so URLs should be kept as short as possible to minimise the risk of typos. This includes keeping URLs simple - only use alpha-numeric characters and replace spaces with underscores or dashes.

8 - Overly long home pages

When assessing website suitability, many visitors do not scroll past the information that is visible on screen when it initially loads. For this reason, it is crucial that the most important information (including navigation) is always at the top of a web page - this applies to any web page but it is more important to home pages.

9 - Lack of communication or purpose

Your website must communicate what it's about so a visitor can quickly decide if your content or services will be valuable to them. Time is precious and if a visitor can't figure out what your website is about in a few of seconds, they will probably go somewhere else.

10 - Splash screens that launch the "real" website

The smaller the number of steps required for a visitor to access your content, the better. Splash screens may look funky and seem like a good idea, but really they are not – they are a pain to manage and update and interfere with a user's navigation of a website.

Splash page Cons;

  1. Visitors come to a website and move quickly to the content they want. A splash page puts a hurdle in their path and forces extra clicks, so the usability is completely flawed - what navigational benefits can a splash page provide over a well designed home page, really?
  2. Many visitors dislike splash pages - a quarter will leave a site right after seeing one.
  3. Splash pages reduce search engine rankings. Since many splash pages only include a Flash animation, there isn't a lot for a search engine to value the site on so it will be rated unworthy.
  4. The animation can be annoying and repetitive to frequent visitors who have already seen it - they won't want to watch it again.
  5. Fancy Flash animation might look impressive but the impression made on visitors could be that you're puffed-up and pompous.
  6. The Javascript codes used to navigate away from splash pages sometimes prevent search engines from seeing any other pages of the website.

Personally, I view splash screens like dirty cobwebs hanging across a doorway. When I open a door, I want to walk inside - I don't want to be greeted with a dirty great cobweb plastered across my face, that I have to bat out of the way to walk over the threshhold. It taints my opinion of a website before I've even started to look at the content.

It is my observation that a lot of websites rely on splash pages to add interest to flagging content when really, a web developer should focus their efforts on making the content the most interesting part of a website, rather than an annoying entry page.

11 - No contact information

A website that provides no contact information, and no contact form, could be perceived as being less credible than one that does. Who would a visitor be most likely to trust? An organisation that prefers to remain annonymous or one that backs up their opinions, services, claims and intentions with a lifeline to real people. Lack of contact information impacts negatively on your image and if a visitor can't contact you, you might lose valuable feedback that could otherwise be utilised to improve your website and/or services.

12 - PDF files where web pages should be

We all know how annoying it is when you click on a link and get a PDF file thrown in your face, usually coupled with a reminder to upgrade Acrobat Reader. Visitors hate stumbling upon a PDF file while browsing, because it breaks their flow. PDF is perfect for offering document downloads and user manuals and also great for things that need printing, but it's a terrible substitute for real web pages because the orientation is usually portrait (computer screens are landscape) and it doesn't include navigation for the main website. Also, with more users now browsing the web via smart phones, you could be losing some of your audience as BlackBerry devices currently do not come with a default PDF reader, and there is no freely available plug-in download to do the job.

13 - Anything that looks like an advertisement

Web users have come to realise that a lot of websites use advertising in one form or another. They also realise that a misplaced click can send them away from the site they're currently at, into a realm of uncertainty, so to avoid this, they shun anything that looks ad-like. Unfortunately, this also means that visitors ignore legitimate design elements that, at a glace, look like an advertisement;

  • Animation: Users ignore elements that move incessantly or that have blinking and flashing text.
  • Banners: Users become blind to elements that look like banner-ads due to their placement on a web page.
  • Pop-ups: Visitors tend to close pop-ups (legitimate or otherwise) as soon as they appear - if you use them in your design, you should include text next to the activating element to inform a visitor that their click will invoke a popup.

14 - Huge blocks of text

Huge blocks of text are intimidating, mind-numbingly boring and painful to read. Writing for online use means making things shorter and highlighting the important parts to aid scannability;

  • use sub-headings with the most important words placed first
  • put the most important information at the top of a page
  • write shorter sentences and paragraphs
  • use bulleted lists to breakdown information
  • highlight and emphasise important keywords

15 - Tiny or over-decorative text

Choosing the right font can make or break your website. The right font can compliment your design or create contrast to hightlight important points. Sadly, many web developers opt for a smaller font in the belief that it makes their website look sleek, or so they can squeeze in more information. Poor font choice will affect the usability of your website so make sure that you choose a font-size that is large enough to read and a font-face that is easy to decipher at a glance.

Also be aware that font is usually inherited from the user's computer so if you choose an obscure font that isn't already installed on every visiting machine, the web browser will substitute in an alternative. This means that you could design a website that looks fantastic at your side, but horrendous to everyone else. Choose a web-safe font for the body of your main content to avoid surprises.

16 - Outdated information that's no longer relevant

Old information is valuable - archives can form an historical vault of knowledge - but outdated information isn't because it makes you look like you don't care about yourself or your visitors. It is wise to remove outdated information from your website once it reaches its expiry date. Old pages are valuable and should be archived for future reference - they'll keep being useful and can provide quality resources that continue to attract visitors. Archived pages also give your website credibility as longer-standing websites are perceived as being more responsible and reliable than newer sites.

17 - Pages that take too long to load

Web users surf the internet with one goal - to find information... fast! Time is a valuable commodity and most visitors don't want theirs wasted waiting for huge images or fancy-but-slow-loading social media plugins to load on their screen (not unless that was their intention anyway). Stream-line page content and keep fancy add-ons to a minimum. Also ensure that you optimise everything you can to keep page-loads as fast as possible.

18 - Scrolling text messages and looping animations

Constantly moving images are very distracting and can disrupt a visitor while they read text. Overuse of animation also looks cheap so use it sparingly to draw attention to important points only. Also bear in mind that moving text is itself difficult to read so provide a pause function, or a long-enough delay between messages, to allow a slow reader enough time to comfortably read each entry.

19 - Auto-playing music and video

Music and videos that start to play as soon as a visitor lands on a web page can be very annoying, especially if the visitor hasn't prepared for an onslaught of sensory overload. If they have their speakers turned up high, a sudden blast of noise will startle them. At work, social-sounding audio could get your visitor into trouble. It's even worse if the visitor can't stop the din, and the fastest solution will be to just close your site. If the user has a slow internet connect, or if they have an old computer, the drain on resources could completely freeze their machine and prevent any kind of further interaction - congratulations on losing another visitor! If you must include an audio or video file, let the user start it and give them the freedom to play, pause and rewind, etc. with a suitable control bar.

20 - Using iFrames and Framesets

Website designs that use iframes and framesets can be very confusing for visitors as they "break" the way that web pages work and destroy user expectations. Since sub-pages cannot be easily linked to, the home page becomes the only linkable base, which plays havoc with user bookmarks. In short, visitors can't save them, so previously discovered content reverts back to being hidden once more in the depths of a difficult site. Confusion and frustration follows and off they trott to a more user-friendly website.

Where to next?...

We've looked at the pitfalls of poor web design, so now I think it's time to move onto content - the stuff that fills the belly of your website and gives it meaning and purpose.


Other pages in this category