An Extra SIDE to Web Standards Based Design

SIDE Vs. the Legacy Gap

There is a renaissance going on in web design. Designers are rediscovering an awareness of the importance of web pages that do much more than just look pretty. No one argues that web sites need to communicate ideas visually as well as textually. However, the time has come to renounce the separation of visual design, information design and marketing. Amongst other things, the separation in thinking has opened the door to the harmful effects of some SEO and third-party marketing services.

I call this separation the, 'legacy gap', because it's been caused by old attitudes that haven't translated well to the Web. Previously, marketing decided what the message should be, and how it would be communicated. Graphic Designers created the visual representation of that message. Developers designed a content management system to deliver the message content to the graphic design. However, the Internet breaks down the information in the graphic design for web sites in to pure text and attempts to process that data with tools like search engines for mass broadcast / discovery / use. So while marketing creates the message and the graphic designers create the visual design, who is designing the information for broadcast? The answer, in many cases is no-one. Welcome to the legacy gap.

Currently, the legacy gap has been exploited by some harmful third party marketing or information services. They include SEO (search engine optimisation), link building services and fee-charging listings sites / aggregators. Although these services seek to fill the legacy gap, they can be significantly harmful and actually impede our access to information in many cases. It's spam. Some actively distort search results. Some provide incomplete and out of date information. Some add a huge directory of useless links to a web site in an effort to boost site ranking. Others aggregate data as long as there's a cheque attached. There is a place for good search engines and genuine data aggregation services to deliver topical information in bulk to users. However, adding the other harmful layer to the web is unnecessary and unsustainable. It only exists because of what companies are willing to pay to bridge the legacy gap. It's time to divert the budget to something more valuable.

It's time to add a little SIDE (Semantic Information Design Ethics) to web design and close the legacy gap for good.

SIDE is concerned with extending the ability of designers to free data from presentation so that it can be found and used by easily available and currently supported methods. There's no tricks, no hot tips, just a bit of plain old fashioned common sense that, as a minor addition to Web Standards, can have some significant side benefits for the Web as a whole.

The Audience Experience

The audience wants information to achieve specific aims. They want it in a consistent and comprehensive way so it can be easily understood. The most obvious examples are sites like Blog aggregators that list all articles about a certain topic (like Technorati), shopping comparison sites that allow users to compare some prices and products (like Froogle), and the emergence of personalised home pages where different aggregated data can be displayed depending on user preferences. Another example would be search engines themselves. They are still not comprehensive though, which is what users want.

• Data formats: The language to describe data in web pages meaningfully is available but standards in how to use the language are in their infancy. Microfomats uses well-supported HTML elements to describe chunks of data in a meaningful way without detracting from the visual design of a web page. Microformats may possibly be the most revolutionary part of the renaissance but I'll come to them in more detail later.
• Data aggregation tools: The software to aggregate data in Microformats, or any format to make the data useful is also in its infancy. We have some aggregators but today we still rely on search engines. Also, do not confuse listings or directory web sites with genuine aggregators. By and large, although they aim at comprehensive information, many of those sites only list a small portion of the available data.
• Buying behavior: Regardless of the absence of formats or software, some clients don't realise they are missing out on a huge opportunity to communicate with users now, today, using existing tools. Some web sites don't make data easily available for either search engines or users. Clients then become aware of the performance gap and employ Internet marketers or SEO companies to try and encourage more visitors to the web site. The paradox is obvious and later I will include ways in which designers and clients can remove the need for third-party marketing completely.

A Real World Example Problem - Office Space in Bristol

Let me give you a little background: This whole article was prompted by a personal experience of the harmful effects created by the legacy gap. I recently wanted a list of currently available office space in the Bristol central area. I accepted I'd probably end up looking at individual commercial agency sites and trawling different databases to find the information. It would probably be in totally different formats, with totally differing levels of usefulness and detail. Another probability would be me trying to negotiate directories of links to sites or aggregators of data that has been pulled from the agency sites. That's the nature of most search results so I figured that would be ok... I guess.

Sounds simple doesn't it? A Google search should do it, or at least get me started. At least that's what I thought. Wrong. I was faced with web sites that list other web pages. Either that or pages with a whole heap of SEO text without any applicable data in them at all. Even the sponsored links fell within this description. See the Google.co.uk results for 'bristol office space'. Now some would say that my search terms were wrong. That's fine; try other combinations yourself to get no better results.

The information is available for users. It's out there. The problem is that it's locked in to design that not only makes it difficult to find comprehensively, but actively disallows the users from using it in an effective, meaningful way. Search engines are only as good as the sites they index. Let me give you a concrete exampleÖ

Example Legacy Gap Web Site

An example of the legacy gap is the DTZ web site. Debenham Tie Leung (DTZ) is an international property company that also has an office in Bristol. Once I found out they actually existed via signboards around Bristol city centre their customer service was second to none. The international web site is supposedly built to the W3C XHTML 1.0 Transitional doctype which should make it at least somewhat semantic and improve the visibility of the information it contains to search engines. Not true. From too many examples to list here, one inhibiting error is that the page for the UK, and the page for Bristol both have a page title of, 'DTZ'. So do the rest of the pages of the web site. That is absolutely useless if they wish to assist search engines searching for pages about property agencies in Bristol.

Usability Gap

Even if you manage to find the web site and navigate to the Bristol page there are no links or lists of available properties in Bristol. Unbelievably there's no information! To get a list of Bristol properties you need to navigate 3 more layers of interface via the main site menu and search a UK database of properties through a huge verbose form. The exercise is totally separate from the Bristol page. The whole design is unintuitive, time-intensive and a barrier to the objectives of the business. Think of it like putting a maze in front of a storefront where you're advertising properties to rent and you'd not be far wrong.

So from a user perspective, the lack of comprehensive, quality, real time information, available in one place is painful. Combine that with a user experience on individual web sites that is often equally as painful and suddenly we're faced with a genuine and acute need to look again at how web sites are planned and built.

The Web Designers' Experience

When I speak of designers I'm really referring to a design team that is usually made up of a group of experts that all develop the structure and execution of the web site idea. On the face of it the designers' job is simple: Take an idea offered by the client and expressed as a set of objectives in a well-written brief or specification and execute it. What does that entail though?

Depracating Design Vs. Data

We are often faced with clients whose only concern might seem to be visual design. How their organisation is represented in the graphics comes first. When they think of a designer they think visuals. It's easy to give that to clients and save the argument over things like accessibility. However, without some of the components I'm describing here, producing a purely visually orientated design is like blacking out their shop window and focussing everything on a glorious interior. Unless they were selling sex toys, that would be bad for their business on the high street and it's bad for their business on the web. Showing clients the huge benefits of some insignificant compromises on the design in order to make the information visible should be at the top of our to-do list.

Get Your Expertise Ready

Part of the renaissance is a widening of the remit for designers and design agencies. Consultancy prior to the web site specification being written is a core component of the task. With very few exceptions, the majority of our clients rely on our expertise to inform what, how and why things are done. Enter semantic mark-up, web standards based design, usability and accessibility awarenessÖ All components of the renaissance, except one: 'SIDE'.

Until recently the designers toolkit was missing this obvious component. We have standards and recommendations around the technologies we use. However, the focus of these standards and recommendations is narrow and particularly concerned with user experience once they arrive at the site. What they don't address in any comprehensive way is how they arrive, or how the design of the client web site is contributing in a positive way to the value of the Internet as a whole. That may sound altruistic but it's not. It's an absolute key requirement if we want information to be as useful as possible to the audience. A SIDE benefit is a contribution to the Internet as the lexicon of valuable human information that it could be. The glaring benefit for our clients is that by freeing their data from their site they will develop sustainable, useful growth in audience for their specialist areas.

Relative and Intrinsic Value

The value of any client data has two components: Intrinsic Value as meaningful content, and Relative Value as a part of a wider information matrix.

Relative Value is what's missing in some cases. The content may be worthy, detailed, rich and applicable to the audience but if it is not dosed with some SIDE then the Relative Value is lost. The simple fact is that if information cannot be seen clearly by machines (like search engines) it cannot be aggregated for humans to use either.

Semantic Information Design Ethics are a common set of values around the treatment of data in web sites. It helps the data share its Relative Value. As we know design standards don't limit creativity; they actually give the output of that creativity better meaning. SIDE will add to that meaning for both the visitor to the web site and the larger audience searching for information contained in that web site. Mostly it's common sense.

A SIDE check list would include:

• Accessibility: (Added Mon 28/11/05) Conformance with the WCAG priority 1 and preferably priority 2 recommendations is a must. This was excluded previously as it is a baseline for good web design but on reflection perhaps it needs to be included in the check list explicitly. Accessible design automtically optimises content in a meaningful way.
• Descriptive URIs: Document URIs containing semantically dead variables are useless on every level. There may be exceptions, but when content management systems are easily capable of creating directories and writing a new hypertext document when necessary, why have a single page loading lots of different and valuable content in to it with a verbose URI that doesn't describe anything apart from a unique record ID? Use URIs that will mean something to the audience and can also be sustained over a long period of time. Why? You never know who's linking to the document or citing content in the document and what the life of that document will be. If, in the future the whole URI changes because it wasn't thought out, that document's place in the lexicon will be lost.
• Valuable Pages: Create individual pages that have Intrinsic and Relative Value in themselves as stand-alone documents of information, or an interface to a dataset of information. Also, if appropriate, identify the place of that document in a larger body of work or site using, at the most basic level, bread crumb links. This may seem obvious but if, for example, there is an office in Bristol and one in New York, have a page for each, don't just lump them together and expect machines to identify information below the fold and send the user to it.
• Descriptive Page Titles: Name the pages in a simple, descriptive way that will have value to the audience searching for the information. It may seem obvious but giving every page on the web site the same title (as in the DTZ example) or trying to be overly clever with special characters used as title decoration, or even worse, using deliberately obscure page titles is design narcissism and should be banned. Descriptive Page Titles will also help users with disabilities too.
• Meaningful Language and Hyperlinking: By meaningful I mean... meaningful. If a document is about a certain subject then specify that clearly. Use hyperlinks unapologetically in the document text. The content is a living breathing part of a matrix of knowledge and data that is all relative to each other. Make it so. Don't be afraid to link to external sources and other information. Use acronyms ar abbreviation tags properly. Allow users to drill into the document to get more information on relevant terms or phrases without having to search or use the menu. Organisations want their web site to be useful to their visitors. Providing visitors with a design cul-de-sac that traps them in a domain loop is the best way to do the opposite.
• Wise and Frugal Menus: Links in the document text and calls to action should be used to cite sources or indicate more information on a subject rather than ever expanding menu links. For example if a page about chocolates includes a mention of, 'Fair Trade' then make the words themselves a link to information about fair trade. Do not under any circumstances use a huge multiple-tier drop-down monstrosity of a menu instead of good textual links. Too many times I go to a web site only to find I have to navigate an overwhelmingly complex menu in order to find information on something mentioned in the document text but not hyperlinked to more information. I know there's more information somewhere; a simple link from the words in the page would have found it for me. Instead I have to go on a paper chase. It breaks the experience that should flow like an old-fashioned role-play adventure, from document to link to document. Not document to menu (or search) to menu to document. Getting lost in the menu tree is my idea of hyperhell and lets not forget, its hyperdeath for screen reader users.
• Meaningful Site Search and Site Map: Include a site search form on every page. Check and double check it returns useful results. Nothing is better than a good site search, and nothing worse than a poor one. Site maps are great too, as long as they are logical, comprehensive and well maintained with, again, descriptive page titles used for each link in the map. Search engines like them too - it helps them do their job.
• Microformats: This is a future recommendation for inclusion. I describe why later.

It's so obvious isn't it? Common Sense really. If SIDE was applied to the web sites containing data on central Bristol office space I wouldn't have had to beat feet around the city centre taking down telephone number from sign boards to get a list. Nor would we have to deal with irrelevant, out of date and narrow information from directories and pseudo-aggregators.

However, I don't claim this is a panacea. The data contained in a web page would still be uncategorized. Enter Microformats. (Please note the deliberate proper noun status whether it's deserved or not). You may find me editing this document to include a link to my take on how massively significant Microformats will be to Internet design in the future but here I'll just skim the surface: If you have not heard or have not read or engaged with the user-led community driving the Microformats revolution then metaphorically sprint to the Microformats web site and do so. Thank me later.

Microformats have the potential to categorise and make available exactly what users need: Aggregated and machine-processable data straight from a human-friendly web page. Imagine it as a magic pill that you give to your lonely and isolated data and suddenly it gets assimilated in to a good Borg. Imagine being able to access the borg hive mind in an instant and know everything you need to about a subject. Imagine no change in how web pages can look. With a few simple mark-up adjustments that are fully supported elements of meaningful HTML the information is truly valuable to machines too, not just as text but as categorised chunks of data that can be manipulated, processed, filtered and fiddled with to your heart's content. OK maybe it's not there just yet. You get the idea though? No more SEO tricks between you and your search results, no more bad aggregations, or missed information, no more ship-wrecked data waving frantically at passing users to come save them from graphic design death. The aggressive marketing by SEO companies will become irrelevant, calls from sales people to your clients offering paid directory listings will be giggle time for the recipient. Sounds good to me.

So if we add Microformats to SIDE suddenly the future is not just bright or orange, its whatever you want it to be; comprehensive, visual, real time information with meaning. Hear me sigh with longing.

The Client's Experience

A sad fact of legacy web design is that many clients don't really use their own web sites. They have email for sure. They may even have a PR or marketing department who update the news and add bits now and again. By and large though, the web site is another necessary tool in the 'talking to customers' toolkit. It's static though: A signboard, a shop front, a billboard or a flyer. It's a legacy from the print design ethics that has pushed the Web this far in some inspiring and important ways but in some harmful ways too. That's all about to change.

Bad client preconceptions and poor quality advice from the designers has left us with a legacy of web sites that inhibit the ability of the audience to use the very information the web sites are supposed to provide.

The paradox is that while sites battle for Internet market share, they seek to market that information to all (make it available freely) but also to own that information outright. The way in which many sites are developed fundamentally contradicts the users needs for comprehensive information.

The answer is a change in thinking. Current thinking amongst most is that the Internet is a confusing and possibly dangerous place where a lucky few use undecipherable techniques to be successful. Consequently, a web site is at worst a necessary evil that every organisation has to have that will hopefully be hassle free. Even at best it's a marketing or sales feature that requires careful control and limits placed on it. Let's not forget the fear of losing competitive advantage by giving away too much information.

After deciding a redesign is necessary, or a web site needs to be constructed, the process is traditionally chunked down in to items:

• Graphic Design: What it will look like.
• Interface Functionality: What will users be able to do.
• Content: What it will say.
• Control: How it will be managed and the information accessed.
• Marketing: How it will be publicised.

This thinking is now wrong. It belongs in the same archive as masking tape, sticky spray and scissors to layout a brochure; Useful for a time but now defunct.

Return on Investment with SIDE

On the face of it the confusion is logical: The return on investment on the web site is supposedly measured in visitor numbers to the web site. Therefore spending money on marketing the web site equals more visitors; that equals more conversions, equals more business. On the face of it that's correct. However, I'm going to stick my neck out and say that it is rubbish. What every organisation that has a web site should be interested in is users. A user is someone who comes to the web site or uses part of the information from a web site to achieve a specific task. A visitor is someone who comes to the web site or tries to use part of the information but does not achieve a specific task. Understanding the difference between visitors and users and how information design influences them is fundamental to understanding the problem. It is important to note that visitors and users both cost money in bandwidth. Every time they hit a site they use bandwidth and somewhere down the line the organisation pays for it. Paying to encourage visitors without allowing them to complete their task is a waste of money.

The real way to generate sustainable growth and return on investment from a web site is to firstly free the data from the design and allow it to be discovered, aggregated and placed before the users who want it. Secondly, and equally as importantly is to provide a quality, meaningful experience to the users, whether the data is delivered delivered to them or they come to the site to try and get it.

The issue of delivery is critical. Just think how much business some take-away places do just by communicating regularly with their local residents and delivering for free. The fact that customers are not eating the food in the no doubt sumptuous atmosphere of the restaurant or kiosk is irrelevant. The same applies to web sites. It's harmful to make hungry users always have to travel to the site to get it. Or even worse, travel the site only to not be able to find it.

What Clients Can Do

So the question becomes how can we deliver? The Designers' Experience section describes some of the technical suggestions but there are some steps clients can take to get the very best return on investment and at the same time sustain growth and relevance of their whole service to users:

1. Have a clear set of objectives but bring in a web designer to inform your specification with advice before setting it in stone.
2. Scrap your 'web site marketing' budget completely and refocus it towards the content of your actual web site itself which will market your site to the web far better than any other mechanism.
3. Don't rush in to design: Consultation to inform the content of your web site is crucial. A good web designer will understand your organisation's business and aims and how they can be best met with technology.
4. Be prepared to learn how to write content for the web or be prepared to use your web designer as an editor of content prior to publication to assess its Relative Value.
5. Publish content fearlessly: Be prepared to release your knowledge or data to your web site so that users can find specific topics you have expertise or information around. Users will surprise you in how specific their searches are. The Internet is filled with every niche humans have.
6. Finally and perhaps most importantly, ask your web designer about web standards based design, usability, accessibility, semantic mark-up and Microformats before you engage them, just to make sure your web site will fill the legacy gap, not add to it.

Re-designing Current Web Sites

If you already have a web site it's still not too late. Calculate all the fees you are paying to market the web site, or investing in someone to maintain it and re-invest in completing a SIDE check list. If it partially complies then at your next upgrade, have it fully comply. There are some exceptions to this advice but in the main, if it does not comply at all, stop spending money on maintenance and marketing now, today; re-invest it in a study of its relative value and a possible redesign.

So Whats Next?

My own feeling is that to archive a genuinely positive outcome for this renaissance in information design it has to include real world, measurable benefits for everyone at every stage. The trick is not creating new technology but using the existing technology better. The basic techniques that I've outlined here are, I believe, a starting point. They describe an attitudinal change in Designers and Clients that will be more than worth the effort. In fact, there is no choice. Somehow, someway, the Internet will find a way to become more meaningful, more honest as only data can be, and more human friendly. I believe the components are here with us today to help us accelerate towards that. I hope that one day in the future I can get all the available office space in Bristol delivered to me in a few keyboard strokes. I think I'll go and do some work towards that end now. Care to join me?

More articles