"Design over content", "form over function", "style over substance"... So here's a thing... design is content, form is function and style is substance, or so they should and can be, in the hands of the competent author and designer. Usability is all about crossing that divide between form and function and intrinsically linking them. The aim is simple, make the whole greater than the sum of the parts.
The hardest part of being a creative is learning restraint, a great designer is not necessarily a great artist and vice versa. A great designer is one who can accurately and precisely deliver content in the context of its media, in a way its audience can most freely use. Design, as a wiser man than I once said, should be invisible to the user and be taken for granted. Often, we don't notice good design, generally because things just work. The chair I'm sitting on as i type this is a perfect example of good design, I rarely stop to think about it. Day in, day out it leaves me somewhere to park my bottom, it supports my back and it spins a bit, so i can reach things with little effort.
You notice bad design all the time, I'd know about it if the back of my chair pushed me too far forwards, or the seat was sloped. I'd know about it every time I used it; soon enough I'd find a chair that worked better. Why would your poorly constructed web page be any different?
Looking specifically at the internet, a confused navigation system is bad design, text that is too small is poor design, low contrast, horizontal scrolling, jumbled pages, bad links, poor tagging, poor display in alternative web browsers.. the list is almost endless and sadly an extremely common occurrence. Poor design is a turn off, it can alienate some or all of your user base and ultimately, it's bad for traffic. If you are a commercial content publisher; bad for traffic is bad for business and even within a not for profit or reference based environment; bad for traffic is bad for outcomes.
Let's take a look at some of the attributes that make for good usability, element by element.
Navigation Systems
First things first, a good navigation system is the visual result of good content planning. It's a logical way to partition and "visually store" bite sized pieces of information and introduce them to your user in a succinct and concise manner. Good navigational design should present the user with a solid overview of what the author is offering, section by section, category by category. In larger web sites, good navigational design concentrates on one factor alone "what does my user need me for and how do I help them achieve their goals". Thinking about how your user uses your web site helps you achieve your outcomes by default, it isn't contrived, there's no pushy sales messages and the user chooses their own path... it just works. The fact that it works means it will work again, it'll work for their colleagues, friends and family too.
As sites get larger, with wider objectives, navigation necessarily becomes more complex in order to deal with the rigors of that site's use. There are several common devices exploited by the designer to order large volumes of content. Used correctly, split navigation, tree structures (like a windows file browser window), breadcrumbs and drop down menus are all good practice. The key throughout navigational design is consistent application of sound logic.
Ask yourself when you are planning "why do people come here". The answer will vary from site to site. In my own business, statistics show that around 30% of my site users head from the home page to the contact us page. Logic tells me these people have used the web site instead of directory inquiries to find my telephone number, or they're looking for my email address.
30% of my user base is around 1000 unique users per month, as a commercial operation, it's web suicide not to make that contact link clearly visible when you enter the website via the homepage, those users want simple information quickly - why make them wait?
The rest of my users are pretty much there for research; "what do I do", "who do I do it for", again it may seem obvious looking at it in black and white, but far too many web sites don't allow the user to answer fundamental questions from either the home page, or a quick and highly visible click. It's worth remembering that chair analogy again.. there's a reason why the legs, seat and back support are where they are - they're in the best place for the job. There's very few web sites that need "new and innovative" navigational solutions, to the average user, new and innovative is "trite and irritating". Now I'm not suggesting that we all sit back and don't look to improve our work or look for new ideas, it's just that sometimes, things already work and it's your user, not your ego that should be enjoying the fruits of your labour.
That covers the fundamentals of good navigational design, next let's look at the web page itself.
The hardest part of being a creative is learning restraint, a great designer is not necessarily a great artist and vice versa. A great designer is one who can accurately and precisely deliver content in the context of its media, in a way its audience can most freely use. Design, as a wiser man than I once said, should be invisible to the user and be taken for granted. Often, we don't notice good design, generally because things just work. The chair I'm sitting on as i type this is a perfect example of good design, I rarely stop to think about it. Day in, day out it leaves me somewhere to park my bottom, it supports my back and it spins a bit, so i can reach things with little effort.
You notice bad design all the time, I'd know about it if the back of my chair pushed me too far forwards, or the seat was sloped. I'd know about it every time I used it; soon enough I'd find a chair that worked better. Why would your poorly constructed web page be any different?
Looking specifically at the internet, a confused navigation system is bad design, text that is too small is poor design, low contrast, horizontal scrolling, jumbled pages, bad links, poor tagging, poor display in alternative web browsers.. the list is almost endless and sadly an extremely common occurrence. Poor design is a turn off, it can alienate some or all of your user base and ultimately, it's bad for traffic. If you are a commercial content publisher; bad for traffic is bad for business and even within a not for profit or reference based environment; bad for traffic is bad for outcomes.
Let's take a look at some of the attributes that make for good usability, element by element.
Navigation Systems
First things first, a good navigation system is the visual result of good content planning. It's a logical way to partition and "visually store" bite sized pieces of information and introduce them to your user in a succinct and concise manner. Good navigational design should present the user with a solid overview of what the author is offering, section by section, category by category. In larger web sites, good navigational design concentrates on one factor alone "what does my user need me for and how do I help them achieve their goals". Thinking about how your user uses your web site helps you achieve your outcomes by default, it isn't contrived, there's no pushy sales messages and the user chooses their own path... it just works. The fact that it works means it will work again, it'll work for their colleagues, friends and family too.As sites get larger, with wider objectives, navigation necessarily becomes more complex in order to deal with the rigors of that site's use. There are several common devices exploited by the designer to order large volumes of content. Used correctly, split navigation, tree structures (like a windows file browser window), breadcrumbs and drop down menus are all good practice. The key throughout navigational design is consistent application of sound logic.
Ask yourself when you are planning "why do people come here". The answer will vary from site to site. In my own business, statistics show that around 30% of my site users head from the home page to the contact us page. Logic tells me these people have used the web site instead of directory inquiries to find my telephone number, or they're looking for my email address.
30% of my user base is around 1000 unique users per month, as a commercial operation, it's web suicide not to make that contact link clearly visible when you enter the website via the homepage, those users want simple information quickly - why make them wait?
The rest of my users are pretty much there for research; "what do I do", "who do I do it for", again it may seem obvious looking at it in black and white, but far too many web sites don't allow the user to answer fundamental questions from either the home page, or a quick and highly visible click. It's worth remembering that chair analogy again.. there's a reason why the legs, seat and back support are where they are - they're in the best place for the job. There's very few web sites that need "new and innovative" navigational solutions, to the average user, new and innovative is "trite and irritating". Now I'm not suggesting that we all sit back and don't look to improve our work or look for new ideas, it's just that sometimes, things already work and it's your user, not your ego that should be enjoying the fruits of your labour.
That covers the fundamentals of good navigational design, next let's look at the web page itself.
Content Display Pages, or Layout
The current best practice in web site design is centered around what is known as cascading style sheets, or css to give it its abbreviated title. In a nutshell, CSS allows the web designer to separate design and content with content being controlled by a collection of style "instructions" controlling elements such as position on a page, colours, sizes, heights and widths, et cetera. Good CSS design starts fundamentally with a "text only" style web site, completely accessible to a screen reader, or other such accessibility tool and builds on it to a fully styled, feature rich web site. The use of CSS further allows the designer to design pages for multiple devices and screen resolutions, omitting large elements from mobile phones and PDA style sheets, altering orientation of pages and the like are all simple controls within CSS. This allows optimum delivery for a wide variety of screens and the widest cross section of users. It is becoming even more important with the onset of convergence, as the biggest players look to maximise their exposure via mobile internet as well as more traditional new media (if I can call it that).
As with navigation, content display need not reinvent the wheel, but there are some basic considerations that really shouldn't be ignored, especially not for the sake of creativity. Looking specifically at the computer screen. In 2008, by far the most widely adopted screen resolution is 1024 x 768 pixels (or above), however, a significant minority of users are still viewing web pages on an 800 x 600 pixel monitor. On my own web site, this figure is approximately 5%. I'm certain that to most designers, 5% is pretty insignificant, compared to the sacrifice to creativity in not using all that extra screen real estate, but again, back in the real world a 5% customer complaint rate is enough to take a business into a tail spin. No user with a wide screen is going to stop using your web site because you cater properly for your entire user base.
I'm not suggesting that your total web page width should be as narrow as 770 pixels if it compromises the content display, not at all. The well planned and designed site that cannot fit this specification, for whatever reason, should simply display the most important content and navigational tools within the first 770 pixels of width and ideally within the first 470 pixels of depth. Several designers now design variable width web sites to suit a variety of screens. Our web site does just that, although were it not for the fact that we are displaying hi definition video, I'd have opted for a fixed width and centered the page. I use a 1920 x 1200 wide screen 23 inch monitor and still prefer to view pages narrow and centered as it is familiar. It is that familiarity that forms the foundations of a usable web site.
Personally, I tend to use IE7 or Firefox on PC and Firefox on my Mac, it's a bit of a bug bear of mine that so many sites are "IE Specific". It's just downright laziness, especially when these IE specific web sites only work with IE6 and your auto-update of XP overwrote 6 for you... Microsoft aren't particularly concerned about the individual here, there's a browser race to win, it is up to the designer to consider this or their customers' user base. It's poor practice and bad business not to.
Going back to the 800 x 600 screen size argument, what use is a web site that can only sell to 75% of its visitors? If you have 2 electrical stores next door to each other on a retail park, the first you enter is out of stock, the first point of call is to check the other one... it's the easiest thing to do. Same online, it's extremely naive to presume your potential customer will quit out of their browser to buy your goods. They're far more likely to click out of your web site and visit your competition. If your competition got it right, you've not just lost a sale, you've lost a customer. Brand loyalty is just as important in an online environment as it is off line, perhaps even more so. Good usability builds good customer experience, builds good PR, builds good business.
As the internet becomes more and more ingrained in our everyday lives, open access becomes ever more important to provide equal opportunity to all. For most of us, especially of the "internet generation", communication, education, entertainment, reference, document storage, genealogy, general research, commerce, business and even sex life can at some time or another be conducted via the world wide web. The internet offers a fantastic opportunity for those with disability to operate in a digital world at parity with able bodied users. Properly designed environments enable individuals to communicate and collaborate in ways that may be inconceivable in the "real world" the potential positive impact on this section of and indeed wider society is massive.
Making a web site accessible may be a simple process or a more complex one, depending on the content that is served and the manner in which we serve it. For most standard web sites, which aren't serving rich media, good coding and a bit of consideration may be all that is required to produce a web site that all audiences can interact with.
Of course, widening the appeal and potential user base of a web site can't in any way be seen as a bad thing, but it should also be noted that accessibility isn't just a "minority consideration", or not in the sense that some might see it. Accessible web sites are generally of lower file sizes and more flexible formatting, making them perfect for use on PDA / mobile, slow internet connections etc, so for the canny designer, accessibility can wider your audience on a number of fronts and at some time or another, prove valuable to all of your users.
I hope this article has provided some tips, some good information and some inspiration for producing web sites in the right way. On a personal level, our move to ethical, inclusive business practice, both accessibly and environmentally, began some 7 or 8 years ago. Our standpoint has had several positive knock on effects for our business overall, not just in profile and brand value, but also in physical revenues and reputation. As a final summary, I would recommend that anyone working in the profession make the move sooner rather than later, and that as a content or web site owner, you insist on usability, not just visual impact be the first priority in your work.
this article is also published at www.karlbaxter.co.uk
As with navigation, content display need not reinvent the wheel, but there are some basic considerations that really shouldn't be ignored, especially not for the sake of creativity. Looking specifically at the computer screen. In 2008, by far the most widely adopted screen resolution is 1024 x 768 pixels (or above), however, a significant minority of users are still viewing web pages on an 800 x 600 pixel monitor. On my own web site, this figure is approximately 5%. I'm certain that to most designers, 5% is pretty insignificant, compared to the sacrifice to creativity in not using all that extra screen real estate, but again, back in the real world a 5% customer complaint rate is enough to take a business into a tail spin. No user with a wide screen is going to stop using your web site because you cater properly for your entire user base.
I'm not suggesting that your total web page width should be as narrow as 770 pixels if it compromises the content display, not at all. The well planned and designed site that cannot fit this specification, for whatever reason, should simply display the most important content and navigational tools within the first 770 pixels of width and ideally within the first 470 pixels of depth. Several designers now design variable width web sites to suit a variety of screens. Our web site does just that, although were it not for the fact that we are displaying hi definition video, I'd have opted for a fixed width and centered the page. I use a 1920 x 1200 wide screen 23 inch monitor and still prefer to view pages narrow and centered as it is familiar. It is that familiarity that forms the foundations of a usable web site.
The Importance of Cross Browser Coding
The browser market is a pretty crowded place at the minute. Internet Explorer still makes up the bulk of the market, but even there, its' 75% market share is split mainly between IE6 and IE7 which work in entirely different ways. Then comes Firefox at about 18% and the mac specific safari at 5%, with Opera and a few others making up the difference.Personally, I tend to use IE7 or Firefox on PC and Firefox on my Mac, it's a bit of a bug bear of mine that so many sites are "IE Specific". It's just downright laziness, especially when these IE specific web sites only work with IE6 and your auto-update of XP overwrote 6 for you... Microsoft aren't particularly concerned about the individual here, there's a browser race to win, it is up to the designer to consider this or their customers' user base. It's poor practice and bad business not to.
Going back to the 800 x 600 screen size argument, what use is a web site that can only sell to 75% of its visitors? If you have 2 electrical stores next door to each other on a retail park, the first you enter is out of stock, the first point of call is to check the other one... it's the easiest thing to do. Same online, it's extremely naive to presume your potential customer will quit out of their browser to buy your goods. They're far more likely to click out of your web site and visit your competition. If your competition got it right, you've not just lost a sale, you've lost a customer. Brand loyalty is just as important in an online environment as it is off line, perhaps even more so. Good usability builds good customer experience, builds good PR, builds good business.
Accessibility
The law has changed, if you don’t change with it, you are breaking it. As a public or corporate body, you now have an obligation to make your web site accessible to screen reader technologies and a host of other standards.
Web accessibility simply means that those with disabilities are able to understand, navigate and fully utilise your web site within the confines of the technological aids available to them and their individual disability. In years gone by, access to the internet was severely restricted by software and design, recent changes in legislation have been designed to combat this, as seemingly best practice alone wasn't and isn't enough.As the internet becomes more and more ingrained in our everyday lives, open access becomes ever more important to provide equal opportunity to all. For most of us, especially of the "internet generation", communication, education, entertainment, reference, document storage, genealogy, general research, commerce, business and even sex life can at some time or another be conducted via the world wide web. The internet offers a fantastic opportunity for those with disability to operate in a digital world at parity with able bodied users. Properly designed environments enable individuals to communicate and collaborate in ways that may be inconceivable in the "real world" the potential positive impact on this section of and indeed wider society is massive.
Making a web site accessible may be a simple process or a more complex one, depending on the content that is served and the manner in which we serve it. For most standard web sites, which aren't serving rich media, good coding and a bit of consideration may be all that is required to produce a web site that all audiences can interact with.
Of course, widening the appeal and potential user base of a web site can't in any way be seen as a bad thing, but it should also be noted that accessibility isn't just a "minority consideration", or not in the sense that some might see it. Accessible web sites are generally of lower file sizes and more flexible formatting, making them perfect for use on PDA / mobile, slow internet connections etc, so for the canny designer, accessibility can wider your audience on a number of fronts and at some time or another, prove valuable to all of your users.
I hope this article has provided some tips, some good information and some inspiration for producing web sites in the right way. On a personal level, our move to ethical, inclusive business practice, both accessibly and environmentally, began some 7 or 8 years ago. Our standpoint has had several positive knock on effects for our business overall, not just in profile and brand value, but also in physical revenues and reputation. As a final summary, I would recommend that anyone working in the profession make the move sooner rather than later, and that as a content or web site owner, you insist on usability, not just visual impact be the first priority in your work.
this article is also published at www.karlbaxter.co.uk
Antonio Centeno
Invite as author
A Great Knol Karl!
If you get the chance, you should write about balancing usability with online marketing. I’m wrestling with that at my men’s custom clothing site http://www.atailored
Again, great Knol!
To everyone who has replied - thanks for the positive comments - I'll look into market shares (and chrome) over the coming couple of weeks.
EditSaveCancelDeleteDeleteBlock this userReport abusive commentHide report window
Also, your style images should zoom and some more photography would really help. The close ups of the fabrics are fine - some manquinned / modeled shots of completed garments would also go a long way - At the minute, I can see that you're aiming for the top end of the market, and you're asking your customers to part with pretty big bucks - show a little more confidence in design. Traditional is fine, but, as they say, a picture speaks 1000 words.
I've not looked at the compliance aspects of it, but there's a whole bunch of tools on the web that can help you assess that. let me know if I can be of any further help
EditSaveCancelDeleteDeleteBlock this userReport abusive commentHide report window
Antonio Bellido
Invite as author
Very concise
Thanks for the Knol.
Anonymous
Invite as author
Kool Stuff
Ronnie Myers
Invite as author
Great article
A great un-biased article for new design clients.
(I have to second the request for updated market share info and possibly chrome when it becomes a public release.)
Gustavo Fortes
Invite as author
Very good information
Mark Carter
Invite as author
Website Usability