“Simplicity is prerequisite for reliability”~ Edsger Dijkstra

Recently I found myself knee-deep in a redesign of a major website. This has caused me to look at other sites, ones that I visit during my usual surfing of the web, with a very critical eye.

What I found astounded me!

I can’t believe how many sites ignore, or seemingly intentionally flout, what I deem as the basic principles of web design.

Now, I don’t claim to be the Messiah of design; however, I have been involved in designing and building sites for the past 13 years for a major financial institution. As a consequence I have seen and been involved in the good, the bad and downright ugly.

So I thought I might post some of what I’ve learned for anyone who is interested. I’ve been told many times that web design is easy and there’s not much to it. I mean, how hard can be to put a few pages on the net?

My answer to that is always: You’re right, it’s not hard put up a website. The skill is in actually making it usable, stable and, from a business point of view, a profitable asset.

Good web design is combining all of the elements to work in concert to deliver a site that is simple to use, coherent and aesthetic.

I know it’s a cliché, but I have to say it. When building a site, my approach is always “Less is more”. Any time I design, create or add to a site I refer to this mantra.

Why? Let’s think back to circa 1999 in web history and sites employing javascript effects ,DHTML ,Java applets and the whole nine yards of drop down, drop in and tune out (little rock’n'roll sixties metaphor there) widgets, menus ,plug-ins and objects.

We did it because we could , Not because we should.

Many sites relied on the end-user clients to process complicated functions and effects, all while on dial-up. For the user it was a pretty poor experience.

This is just one example. However it rings true today, as technologists we often stray into the temptation of “do because we can” not “do because it’s the best or right thing to do”.

The second principle I employ is spend time up front. Understand what the client truly wants. Many clients first brief is “I want a web site and it has to do this “.

It’s really easy to go away and do that , however the end product will most likely fail to live up to the idea they have in mind.

Ask the hard questions: Why do you want a site? What do you really want it to do? What is the problem you’re trying to solve? If possible, map out the “as is” business process and then look at the “to be” process when the site is built.

Too many times a web site is blamed for being the problem when the core issue is lies elsewhere. That is, the business process that it’s trying to streamline or resolve is broken or not compatible. If you know a good proponent of BPM they will prove to be invaluable to you and the client.

That being said let’s look at some of the nitty-gritty of the actual page design.

Simplifying the Journey

When a user arrives on your site, how you weight the different attributes defines how the user views them…This is where you need have done the work up-front and defined the navigational path you want your users to follow after they arrive on the site.

Good design will ensure the user’s eyes will navigate the site in sequence. Example: You may want the users’ attention to be directed immediately to an advertising tile and then the navigation bar. So how do we do this?

Yes, you could highlight the image using red marching ants and moving images. However, for user experience and longevity of design, not to mention the sheer wank factor, I would advise against this approach.

Here are some of my thoughts about how you ensure navigational precedence on your site.

Positioning

As they say in the real estate game, location, location, location, we know that users scan pages from left to right and top to bottom, understanding this means you can influence what the user will notice first by positioning the desired elements in the line of sight.

Size

I’m sorry to say for the men reading this, size really does matter! Think about the size of the attributes you want the user to be influenced by. To keep the clichés running, the good little man won’t outdo the good big man here. Size coupled with the line of sight will attract the desired attention.

Colour

Colour is one of the most defining attributes at your service to ensure the desired objects or areas stand out or conversely don’t.Always use web-safe colours. I can’t count how many sites I have seen that are not aware of this rule.

Ensure that your site is properly accessable (ie. colour-blind-safe). Most importantly, be sure to use good old common sense, and if in doubt have a good usability specialist review your choices.

My rule: be subtle. Don’t over-use colour. Keep your choices basic, both in the colours and the number of colours that you use. Too many colours can make a site very noisy and just plain distracting.

Space

In the nineties space was your enemy. Fill the page with everything and anything especially whitespace.
Surprisingly I still see this on various websites. In fact, with the advent of the so-called “web 2.0 social media” trend I regularly see the overuse of widgets and media plug-ins adding to the clutter and noise.

The simple fact is that the correct use of space makes a site cleaner an easier to view and navigate. Using white space is definitely a learned technique. Too much and the page will seem empty. Not enough and it’ll look like a bachelors pad – all crowded, noisy and the only person who can find anything is the one who put it there. It’s all about balance and proportional use; this will ensure that you get a fresh, clean look.

Print media are very good at this technique especially magazines (the reputable ones) and newspapers, so for once we can learn from them. One of the most ill-used attributes of space is padding. A very simple rule should be adhered to: elements such as buttons, images, tables and menus should never be allowed to touch text or each other. (Yep just like the school dance, damn teachers).

Last but not least the impact of space between lines and paragraphs can’t be understated. Writing for the web is not like the print media. Sentences and paragraphs should be short and sharp and well spaced to ensure readability. Your average web user tends to scan content and if there is not enough space it appears as a large, impenetrable block of text and gets put in the “too hard” basket.

Now for one of my favourites…

Navigating the Jungle

Rule one: If a user can’t figure out where to access what they want after the first scan of the page they will most likely leave the site and not come back.
Rule Two: Always refer to rule one when designing navigational paths for your site.

Think carefully what style and position of navigation you want to use and stick to it throughout the site, all too often I have been to sites where it looks like the navigation was an afterthought.

Navigational Position

The three most popular navigation positions are at the top of the page or on either the left or right sides (I prefer the left as that is typically the place the user looks first as they scan the page). The use of widgets has become popular in the age of web 2.0 as it allows them to be placed anywhere on the page.

Style

The styles of navigation are many and varied and have come and gone over the years. Drop down, tabs, bread crumbs, expandable, fly outs, etc. I don’t have predilection to a particular style, as they say “different strokes for different folks”, this applies to different sites. What works for one might not work for the other.

I do however have some principles that I apply no matter the style.

Keep your menu lean and clean

• If you really have a lot of options to pack into the navigation, consider the landing page concept or the sub menu.
• I am always wary of sub menus as they often become multi level monsters that take over the navigation bar or expand over the screen depending on the style. Either way this ends up a most unpleasant experience for the user.
• Landing pages allow the user to see a group of options cleanly and well set out without clutter. Always refer to Rule one and two we discussed earlier when considering your options.

Limit the use of widgets and media plug-ins

• Widgets can create a great impact if used sparingly and alongside an established navigation path.
• Use them to highlight parts of the site that you want your users to take notice of, or that you know are high traffic points.
• If you cram your site full of them not only do you get that cramped affect, you create maintenance overhead for your site. (I will address this further in the next post of this series).

Clear Labeling

• Ensure the choices on your navigation are clear. Sounds simple huh? Next time you’re on a site take note. The written word is powerful especially if no one understands what that label really means.

Limit the use of roll-overs

• Roll-over text and colour are great tools to highlight options and ensure the user knows what they are about to click on.
• Limit your colour to one and use it as a contrast, multiple colours is confusing and hard to ensure compatibility.
• Roll-over text should conform to the same principle as the labels text; make the wording succinct and short.

That’s the whistle stop tour of navigation done. Next up…

Buttons

Let me start by saying buttons are not and should not be used for navigation in a site except in the instances where an action has completed and they provide a means to return to the navigational sequence quickly.

Buttons should be used for calls to action and in progressive action sequences. For example Clicking on a button to download a brochure is a call to action, selecting the next button is a progressive sequence. The exception to the rule as I mentioned earlier is the use of the button for return to navigation.

A quick example of this is the cancel button which removes you from the screen and returns you to the beginning of the predetermined navigation path.

Should buttons be images or CSS? There are Pro’s and Con’s for both options. I personally favour the use of CSS from the point of view of load time and conformity. What you do sacrifice is control over the look and feel as CSS is limited. With images the sky is the limit. Remember if you decide on images budget for creative time to build them.

In the end you have to make a judgment call as to which you are going to use. I strongly advise though not to mix and match as this dilutes the site style and again creates maintenance overhead. That’s it for this post . We have barely seen the tip of the iceberg.

Let’s talk device convergence. Recently, while acting as members of a panel at the Smart Services Conference (2009), we were asked where we thought the evolution of mobile devices was headed. Many points of opinion were raised, here are my thoughts and predictions that I shared that day.

I believe that the mobile phone capability will move towards miniaturisation of the handset yet expansion of capability and gesture interactivity.

This demonstration at the TED conference only serves to validate this position. If you haven’t seen it yet, take a look now. It only makes sense that we would seek to remove the reliance on carrying devices and seek the freedom of movement this technology offers.

This, however, leaves us with a conundrum: How do we cater for the need for a device which allows portability, yet also supports the expanded capabilities we require (such as web browsing, eBooks, and multimedia)?

I believe that the year of 2010 will be the year of the Netpad/Slate. Early prototypes I have seen are very promising, such as the Microsoft courier and the crunch pad. However, as they tend to do, Apple promise much with their unnamed version, which will surely be based on the iPhone interface.

Google, of course, has a finger in the pie and I believe this will be the vehicle they seek for their Chrome operating system.

My opinion is the Netpad will fill that niche that the Netbook attempts to fill and yet often falls short on. It will usurp the eBook market that the Kindle currently has the monopoly on.

They were my thoughts last year. Have they changed?

No, they haven’t changed. If anything I think the convergence of many devices to the one device will take a large step forward this year.

The launch of the iPad is the start of the tidal wave and by the middle of this year we will see more complete devices being offered and the demise of the Netpad becoming a reality.

Yes I can hear the cries of derision. However, has anyone noticed that whilst the PC, in general, is holding or increasing in price Netpads continue to plummet? You decide!

Anyway they are my thoughts for today, let me know what you think.

“The development team didn’t build it right!”

“The business requirements are wrong!”

We’ve all been there, right?

In my experience, there have been many times where I have discovered that the root cause is not the requirements nor the application’s implementation. The issue is that the both the requirements and the application itself have been styled over the top of a flawed business process.

So here are my thoughts:

If we spent more time at the beginning of the cycle doing a proper job of describing and mapping the business process we would find that it would benefit everyone involved. More often than not, the business owners are able to address the gaps in the process before contemplating the request for development. The business analysis team understand the need which the requested application is supposed to fulfil. The team of people involved in the design and implementation of the solution benefit from having an understanding of the process from start to finish.

All round win? So why is it that there is still such a reluctance to invest the time and effort into this essential step?

I say this off the back of a terrible experience I had on a Federal Government website. Now I like to believe I am a fairly savvy user of the ‘Net. Little did I know how wrong I could be! This site confounded me and drove me to confusion of the highest order.

I believe we, as technologists, have a duty to ensure the simplicity of design. In our world we have the propensity to do because we can not because we should. (Does anyone remember the early days of JavaScript popup windows and effects?)

Simplicity is the key. Less is more. Yes, it’s an old cliché, yet how true does this hold even in a digital world?