Tag Archives: navigation

Show 85: Bulletproof

Posted in Classic shows on by Paul Boag

On this week’s show: Paul provides some design advice for developers, Marcus provides so post launch pointers and we review Jeremy Keith’s Bulletproof AJAX book.

Play

Podcast: Download (20.3MB)

Download this show.

Launch our podcast player

News and events

Unfolding the fold

The first news story today is actually not news at all. Well, its news to me (because I wasn’t previously aware of it) but the actual post was made back in December of last year.

The post relates to that most irritating of subjects; “the fold”. I have spoken about the fold many times before. The mythical point at which people have to start to scroll. I say mythical because this point changes depending on your screen resolution, browser type and toolbars.

The reason it is so annoying is because clients are obsessed with it. They are convinced that users don’t scroll (a perception rooted in the early 90s) and no amount of persuasion seems to change their minds.

However, hopefully the post I found this week will help. “Unfolding the Fold” is a post on the ClickTale blog that provides some hard stats about the fold and scrolling in general. It demonstrates that the vast majority of people scroll, with almost all of them scrolling right to the bottom of the page. Their conclusion is that there really is no reason to squeeze all of your content above the fold.

d.construct tickets on sale 10th July

If you are in the UK on the 7th September you should be sure to come to d.construct. d.construct is in my opinion one of the best web design conferences around. The reason I like it so much is that it works hard to maintain a grass root feel that is accessible to anybody.

For a start the price ticket is very accessible at £85 + VAT. Secondly, the whole thing happens on a single day so there is no need for expensive hotel bills if that is a problem. Finally, they have a great mix of speakers with many of the big names you would expect but also a lot of less well known people in order to “shake up the scene”.

The reason I mention it now is because the tickets are going on sale next tuesday (the 10th). Historically they sell out incredibly fast. Although this year they do have a larger venue and so that should help somewhat.

I really want to encourage you to attend this event if at all possible. I will definitely be there and it would be great for us all to meet up.

Fonts licensed for web apps

Talking of d.construct, Richard Rutter (one of the organizers of the event) has posted an interesting blog entry on “font licensing“. Admittedly font licensing, doesn’t sound very exciting but potentially it could be. Richard has spotted a press release from a prominent font provider. This press release talks about a new type of license…

Ascender Corporation announced a new licensing program for font software implementations with server-based applications.

Richard goes on to suggest this might be another move towards browsers supporting downloadable fonts. This would allow us to use whatever font we wished on a website rather than being limited to what the user has on his or her desktop.

Richard does warn that this might just be in reference to Silverlight, because Ascender does work very closely with Microsoft. However, personally within the context of Opera’s move towards downloadable fonts, I am hopefully this might be something more.

A new way to visualize your desktop

Finally today, I wanted to mention a technology called Bumptop. I recently watched a demonstration of the system and was blown away. Basically, Bumptop is a new way to work with files that mirrors much more closing the experience of interacting with your desk in the physical universe. You can stack files, throw them around and even crumple them up in a 3D environment.

When I first watched this demo it felt like a novelty, but the more I thought about it the more potential I saw to organize content in a more dynamic and flexible way.

What I like most about this interface is that it is not trying to teach us a new method of interaction. Instead it is trying to replicate something we are already familiar with. The idea of using metaphors we already understand is a staple of interface design and is what makes things like tabs, desktops and folders so successful.

I think as web designers we could learn from technologies like this. We should be looking to build on established conventions people understand rather than always seeking to do the next big thing or be innovative in someway. Bumptop is innovative but it does so in a way that is instantly accessible to everybody.

Paul’s corner: Design advice for developers

I received this great question from Simon that I thought worth addressing on the show…

I hear lots of questions about the technical and business side of Web design, but what I don’t hear is how do the already technical amongst us become better designers – maybe being a visual thing this just won’t work on an audio podcast, but at least you could give us your top 5 ways to grow artistically.

As has become tradition, I decided to blog on the subject a few days ago but unsurprisingly failed to stick to “5 ways to grow artistically”. Instead I managed to produce a long and rambling essay on “when designers design” which I bore you all with on the show.

Marcus’ bit: Post launch Protocol

Everyone, client and agency, seems to understand the principle of not letting a site stagnate. Content should be regularly updated and, ….and what?

We see a lot of client demands for content management systems that are then often not used for lengthy periods of time. Therefore I thought it could be useful to look at what options there are to a site manager after that big day when the site goes live.

Of course, not everything here will apply to everyone but hopefully some of it will.

News and events

Stories, articles, seminars, fun days, whatever. These are your opportunity to create new content very regularly.

Clients are invariably perfectly happy with their site when it goes live. This is understandable, they have more often than not spent months working on it, tinkering with this, fretting with that and a) they need to spend some time on other aspects of their job (that have been neglected) and b) the site really has never been more up to date!

But what often happens is that a couple of months down the line they realise that new content needs creating but they can’t remember any of the CMS training. The 50 page accompanying manual is too scary so things get left. This happens until we are asked to add the new content because we’re too busy and it’s urgent and often, later on, further CMS training is booked.

News and events provide a steady stream of new content that helps keep the site fresh but also the CMS skills of those looking after the site.

Shortcuts

Updating shortcuts to key content is again a simple way of refreshing a site’s content without putting that much effort in.

Homepage shortcuts tend to link to:

  • Latest news
  • Latest events
  • Repeated main navigation
  • Products
  • Special offers
  • Facilities e.g. login, subscribe etc
  • Important ‘deep’ content
  • Popular topics

I guess the point I’m making here is a lot of these shortcuts can simply be rotated giving a feeling of change on the site. For example, changing a link to a main section on a weekly basis is a simple task and one that does not require the writing of any new content.

Utilising usage stats may be a good way of seeing which areas of the site need further promotion. In fact, use everything at your disposal, stats packages, CMS, content suppliers, agency support contract, internal marketing team etc so that you are as informed as possible.

Imagery

Don’t just update copy. Adding new banner imagery can really rejuvenate a tired looking design. Always look to include appropriate imagery with news articles, events etc.

Communicate

Keep your eyes open to what’s happening within your company/organisation. There may be a new project/department/member of staff etc that might be outside your sphere, that would really add value to the website.

Make yourself (and your role) known to everyone. Send out questionnaires or surveys asking people what they want to see on the site or if they have any pertinent content.

Think big

Finally, don’t lose sight of the main purpose of the site while dealing with the smaller things. It may be that the main purpose of your site is to promote your brand so updating the look and feel of the site regularly may be a lot more important than updated content. In fact, continually evolving the design of a site over time is probably far more cost effective (not to mention the effect it has on keeping the site fresh) than ‘big bang’ redesigns every 3 years or so.

Alternatively, sales leads may be the site’s primary function. In which case, keep in touch with sales and experiment with ways to boost leads.

The other really big area that site owners need to look at is site promotion. This warrants a post of its own so I’ll look at that another time.

Review: Jeremy Keith’s Bulletproof AJAX

I have decided not to do “ask the expert” this week, so we can have a review instead. Unfortunately we don’t have the time to do both segments every week so I have to mix and match from time to time.

The book I want to review is “Bulletproof Ajax” by Jeremy Keith. I read it almost 6 months ago, but haven’t had an opportunity to talk about it on the show until now.

The book is designed to be the sequel to Jeremy’s previous book “DOM Scripting: Web Design with JavaScript and the Document Object Model” which was written as an introduction to Javascript for designers. Bulletproof AJAX is therefore written in a similar tone with the focus on making AJAX accessible to designers rather than providing the technical detail you would expect from a developers book.

I have to confess I found the book a little frustrating at first. As somebody that had bought and learnt Javascript through Jeremy’s first book, I felt a little annoyed that the first 2 chapters seemed to be dedicated to laying the foundations we had already covered in the first book. I am guessing the idea was that people could buy this book in isolation without first owning DOM Scripting, but in my opinion the amount of detail provided in Chapter 1 and 2 wouldn’t make that possible. For me those first 2 chapters felt like padding to make a short book feel slightly more substantial.

However, that criticism aside the rest of the book was definitely worth the very reasonable price tag. Jeremy has an excellent writing style that is clear and engaging. He seems to explain complex topics in such a manner that you wonder what all the fuss is about. You come away from the book thinking this “AJAX stuff” is easy and wondering what all of the fuss is about. Admittedly he only covers the basics, but it is enough to get you producing the kind of AJAX applications most designers would like to build.

But, Jeremy doesn’t shy away from the more complex underlying issues surrounding AJAX. In particular he talks about accessibility and ensuring your applications work with Javascript disabled. He does this through a technique called HIJAX. I will not endeavor to explain to you the details of it here, except to say it relies on the server doing most of the heavy lifting.

From applying the principles taught in this book I have to say the HIJAX approach works very well. All of the complex stuff is handled by the developers on the server side and I get to focus on how the information is returned to the user. AJAX is a funny area that sits between client side and server side and leaves designers and developers wondering who is responsible for what. Using the HIJAX approach taught in this book, the division is much clearer.

So would I recommend this book? As with DOM Scripting it depends on who you are. If you are a designer who has read Jeremy’s first book and would like to start producing AJAX applications then absolutely. However, if you haven’t read his first book then I suggest you do that first, unless you are already confident in producing unobtrusive javascript.

If you are a developer on the other hand then my recommendation is to steer clear. This book is not meant for you and you will find it frustratingly lightweight.

When developers design

Posted in Design on by Paul Boag

Although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.

First things first, I am not going to be able to teach you good design practice in a single post. That comes with time, training and to some degree, talent :)

However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

General comments

Before I plunge head first into specific tips I would like to share some more general comments based on my observations of when developers do design. Hopefully these will help you think of design as more than arranging pixels.

Empathy

In many ways developers work in a world of absolutes. A piece of code either works or it doesn’t. Your world tends to be very literal, very straightforward. Computers are in many ways easy to understand. People on the other hand are a very different matter. We are messing beings full of contradictions and inconsistencies. This is the world of the designer.

Designers are trying to engage with people and to do that they empathize. They try and put themselves in the shoes of the user, to really understand how they think, how they approach a problem.

One of the most common mistakes I see developers make is that they fail to do this. To a lesser or greater extent they perceive the user as being similar to themselves. They make assumptions about the users motivations and abilities. They often misunderstand what the user is trying to achieve.

If I could give only one piece of advice it would be to encourage you to empathize. Really think through what the user is like. Are they in a hurry? Do they have a specific aim? What is their outlook on life? Will they have kids clamoring for their attention while they surf your site?

Really try to get inside their heads. It will definitely help.

Avoid graphical applications

The temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.

Its hard enough to apply the principles of good design without adding learning a new application on top of it.

You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…

Don’t try and be great; be invisible

Don’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate.

Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it.

If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!

Specific advice

Okay, so enough with the airy fairy advice, lets get specific. How do you make your design good enough to be invisible, non-offensive? Well, let me suggest 5 areas that you should pay particular attention to. Obviously I could write reams on each but lets keep this very simply and easy to implement.

Typography

The key to good typography is constraint and consistency.

Avoid using too many typefaces, normally 1 or 2 is enough. Also avoid having too many variations in sizes and weighting. Only use size and weighting to emphasis the hierarchy of the content. The larger and bolder the type, the more important the content.

Also try to be consistent in your application of typography. If something is a certain size and weight on one page ensure it is done the same on another. Although CSS makes this relatively easy, watch out if you are working with ems as you may have inheritance problems.

Finally, don’t just think about the type itself but also line length and line height. Don’t allow lines of text to become too long (between 40 – 60 characters is good) because they are hard to read. Also add some whitespace between lines of text as it will make the page feel more spacious, which brings us nicely onto…

Whitespace

Whitespace is the not-so-secret weapon of good design. For simplicity sake, I think the rule of thumb is to add more whitespace than you are naturally inclined to do. Whitespace improves legibility, gives a sense of simplicity and communicates a feeling of openness and style.

In order to limit scrolling, we feel the need to cram as much content in as possible so squeezing out whitespace. Resist this temptation. Be generous in your padding, margins and line height. Don’t be afraid of “empty” parts of the screen.

The grid system

You often hear people complain that a website looks boxy but in actual fact boxes are good. A good website should have a strong underlying structure of columns and rows. It helps the user identify hierarchy and communicates a sense of order in the site. Although a good designer will break out from the grid he will always have a grid structure still there underneath.

Think about how many columns the site is going to have. Ensure these are applied consistently across the whole site, but don’t be afraid to occasionally span across multiple columns. Also ensure elements are placed consistently in this grid from page to page. Do not move elements around, especially navigational elements like the menu bar and search.

A grid may seem restrictive and not very “creative” but it essential to all design.

Colour

Working with colour is particularly tricky and so I would suggest where possible you avoid making too many colour choices. Your best bet is to turn to an automated colour creator like Kuler. You can either choose from one of the existing palettes or enter a base colour (usually a corporate colour) and it will produce a palette based on that.

Notice that Kuler only includes 5 colours in its palette. This is good practice, resist the temptation to use too many colours. Apart from this site (where I was just being silly), I tend to use a very limited colour palette. One nice little trick however is to use a strong contrasting colour to highlight important content. Because it is a contrasting colour it will make content stand out from the rest of the site.

Imagery

The design work I have seen done by developers tends to shy away from the use of imagery and in someways that is not a bad thing. It is easy to get imagery wrong but I would encourage you to be a little more adventurous. Imagery is a great way to draw the users eye and so can be used to highlight key content.

Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…

  • Avoid animation.
  • Choice images with a strong foreground element.
  • Compress your imagery but not too much!
  • Use faces, people are naturally drawn to them.
  • Avoid clipart illustrations

I am sure there is more I could suggest but those are the ones that immediately spring to mind.

Taking it further

So there you go. Hopefully that has helped a little. Obviously, there is so much more that could be said, but that should have at least started you off. If you do want to take the next step and improve your design skill then check out Jason Beaird’s book “The Principles of Beautiful Web Design”.

Show 84: Maybe

Posted in Classic shows on by Paul Boag

On this week’s show: Paul explains why Headscape does Design Testing, Marcus talks about growing your web design and Mark Buckingham provides an introduction to Search engine optimization.

Play

Podcast: Download (24.1MB)

Download this show.

Launch our podcast player

News and events

Pagination 101

I came across a great post this week that provides a solid introduction to producing pagination. If you haven’t come across the term pagination before it refers to the navigational elements that allow you to move through multiple pages of results. They often include links marked previous and next or numbers to allow you quickly to jump to a specific page of results.

We use pagination all of the time and most websites seem to have them. However, they are an overlooked function that doesn’t get the attention they deserve. The post I found this week, entitled pagination 101, explains to the reader through examples what make pagination work. Although I am not convinced I agree with everything written here it generally provides some very sound advice.

Personally I love posts like this that cover very basic stuff. It helps remind us not to get so caught up in the cool stuff that we neglect the fundamentals.

Free CSS based design course

John Allsopp and Maxine Sherrin have released a free online course that introduces people to CSS based design. If you are still to make the switch from table based design or are finding the change challenging then I would highly recommend this course.

We are not talking about a short introduction here. Rather, this is an in-depth course that builds up over a series of weeks into a comprehensive guide to building with standards. Not only does the course tell you how to build with standards it also explains why which in my opinion is just as important.

Zeldman says no to Maybe

I wanted to quickly mention a post I saw from Jeffrey Zeldman this week. Its not exactly earth shattering stuff but it caught my eye nevertheless. Zeldman, suggests that it is probably a mistake to use 5 star ratings on websites or indeed any other option which allows a neutral answer. The problem is that if you allow people to rate something between 1 and 5 they will often rate it as a 3 because 3 is the most neutral response.

As Zeldman points out this problem is a lot broader than just 5 star ratings. It also applies to any response that allows for people to be uncommitted. Given a choice people will normally take a neutral stance.

As I said, this wasn’t an earth shattering post. But, what it did drive home is that web design is as much about understanding your users psychology as it is about good design or clean code.

IE Net render

I came across a site this week called IE Net Render that takes free instant screengrabs of your site displayed on IE 7, 6 or 5.5. This is a great way to see how your site is rendering on IE 6 or 5.5 once you have upgraded to 7. Its also damn useful if you are a mac or Linux user.

Of course, there are similar services out there but most of them charge and those that don’t are incredibly slow. What impressed me about IE Net Render was the speed with which it returned results. The only draw back is that it does not return content below its artificial fold.

Paul’s corner: Design testing

Headscape has always used design testing as part of its development process and yet we seem to be in the minority. We are often met with a lot of skepticism about the benefits of putting a design concept in front of real users as well as questions about how the process works. As I have received two emails on the subject over the last week I thought it was about time I explained the idea properly.

I have blogged about design testing. How we do it and why we think it works?

Marcus’ bit: Growing a web design buisness

Got this question from Andrew:

Last year I started my web design business from a back bedroom with very little experience and an old copy of Dreamweaver! I’m pleased to say I’m still here and the business is growing steadily. Your forum and podcasts have been invaluable and offered loads of great advice and support and no doubt helped many others in my position so thank you!
My question for you both is have you any advice on managing the growth and development of a web design business? As a one man band, when is a good time to take someone on, or could I realistically work with freelancers all the time? It seems that to take someone on is very costly (not just in terms of skills) but if I want to expand the business and our services for clients I can’t do it alone. Should I hire someone who can do everything, or someone who can sell leaving me to do design and development work? What are the pitfalls that I should look out for?

Any thoughts or insight into your experiences would be really helpful.

Interesting question, and one we have a lot of experience of but… one I feel I need to add a caveat to. What I am about to say is my personal opinion and does not constitute legal advice!

Ok, the easy bit first:

Sales people

Bless ‘em… we had enough bad experiences of sales people during our tenure at our previous company to know that the only people who reliably sell the services of a web design company are the people that own it.

I’m not saying there aren’t any good sales people out there, just that selling quite highly priced solution based work does not fit well with the standard sales ethos. Sales people like products. They like products with set prices (that they can cut). They like having demonstrable ROI.

Design, in particular, is very hard to put figures to. I can’t tell a company that redesigning their site will boost sales by X or Y percentage. I can talk about brand values and the importance of conveying quality online but I can’t put hard figures to it.

Most web design sales involve responding to a tender with a lengthy proposal and subsequent pitch that is tailored for that particular prospective client. It usually draws from all aspects of the business – design, technical, consultancy – and therefore needs someone with a good understanding of the business to put it together. I.e. the company owner/director.

Who to employ

Headscape currently includes the following general production roles:

  • Designer
  • Developer
  • Project manager
  • Information architect
  • Testing facilitator

Again, the directors tend to share IA and testing with the project managers. Project managers are invaluable members of any team but if you are looking to employ your first member of staff you need to get a designer or developer on board first.

Look at your own skills and see where you’re lacking. Maybe filling the gaps is the right way forward. However, that may only be appropriate if you’re looking to take on more complex work and simply doubling up on what you already have may be the most prudent move. Often, a new project win will point towards who the right person is.

When we started we had Paul doing design and some technical work, Chris doing project management and me doing sales. At the time, we had a great client that kept firing Flash work at us. We outsourced a couple of times but eventually ended offering a permanent position to one of these guys (he is still with us, as is the other guy who we outsourced to then!).
You mentioned hiring someone who can do everything – Chris, who was the first guy to join us, is a bit of a jack-of-all-trades so was perfect for us at the time. As we have grown though, we have looked for more and more specialist people.

Permanent or freelancer

Taking on freelancers can often mean the difference between being able to deliver a job or not. However, they are expensive and will badly erode your bottom line if you do it all the time. So, ask yourself – if I had an employee instead of a freelancer over the past X months, how much would I have saved?

Employees are a responsibility though and need looking after . One thing we have learned over the years is that happy staff make for more productive and more effective staff. As we have mentioned recently, Headscape has started encouraging everyone to spend a few hours each Friday afternoon working on anything they like. We get together monthly to present our ideas to each other – best idea wins something cool.

But sometimes you have to have to be prepared to make some very tough decisions. The bottom line is that the company always comes first. One final point though – and in the words of the late, great Douglas Adams – don’t panic! It is very easy to see things as much worse than they actually are.

Ask the expert: Mark Buckingham on SEO

This week we have Mark Buckingham on the show from netseek.co.uk to introduce us to the world of search engine optimization.

Mark helps dispels some myths surround SEO. He discusses best practice and talks about specific techniques such as keyword density and link popularity.

To be honest I felt like we only just scratched the surface of the subject of search engine optimization and would be keen to speak with Mark again. Its such a massive area that it is hard to know where to begin. So, if you have any specific questions you would like answered on SEO then drop me a line at [email protected] and I will get Mark back on soon.

Book recommendations

Finally, I just wanted to let you know that I have finally sorted my act out in regards to my reading list. One of the most common emails I receive asks me if I can recommend a book or what I am currently reading.

Now, I posted a list of recommended books ages ago but I never got around to updating it. Well I have finally done so and also gone a step further by creating an RSS feed of any books I read (be warned these will not all be web design related).

I promise to keep both the post and RSS feed up to date from now on!

The importance of Undo

Posted in User experience on by Paul Boag

An easily available undo function creates a sense of simplicity because it instills in the user the attitude of “what the heck, I can always undo it”.

Many internet users lack confidence when interacting with the web. It is our job as web designers to try and reassure them and provide a safety net when things go wrong. Providing various methods by which users can undo actions is a useful crutch to the less confident user.

Benefits of undo

Undo functionality seems to be in increasingly short supply on the more recent raft of web 2.0. websites, especially on sites that make heavy use of AJAX. This is a sad day for web design as the ability to undo provides three crucial benefits:

Alleviate apprehension

I have said this many times but it always bears repeating; the majority of people do not like computers. It is so easy for us to forget that, as we live and breath computers everyday. I have to confess that I am more comfortable working with a computer than the real world. After all, how many times have you tried to CTRL Z reality!

However, although we are comfortable with computers the majority of people aren’t. They are intimidating, impersonal and far from intuitive. This is not only true for the PC but also for the web. After all who would design a system where the interface changes when you move between sections (sites).

The ability to undo, go back or escape is a lifeline to many users. It is immensely reassuring to know that you can always undo something if you get it wrong and when that option is not available it can be incredibly disturbing. Take for example the first time you ever bought something online. Do you remember a feeling of apprehension when you realized that the next click would place the order and that there was then no going back.

A way to overcome complexity

I am a huge fan of simplicity, largely because I recently finished reading “The Laws of Simplicity” by J Maeda. In his book he talks about the fact that the ability to undo creates an impression of simplicity even in the most complex applications.

An easily available undo function creates a sense of simplicity because it instills in the user the attitude of “what the heck, I can always undo it”. Once the user has that attitude they perceive things as simpler than they actually are.

A method to build confidence

The “what the heck” attitude is largely about confidence. A confidence in the power of undo to do its magic, is what allows us to play and experiment with an application. Through experimentation and play we learn and with knowledge comes a confidence in our own abilities. That is the power of undo.

Opportunities to provide undo

Now that I have established the importance of undo the next step is to look at what options are available to us as web designers to provide undo to our users. I have come up with four ways this is possible, however the sad reality is that we continually undermine these different methods in the way we code and design.

Back Button

I must have sat through hundreds of usability sessions over the last decade and I do not recall one where the user did not use the back button at some point. The back button is the primary life line used by most people to correct problems and yet in more and more sites it does not work. The problem lies in the use of AJAX and Flash which break the page metaphor on which all browsers are built. The same problem occurred with frames and was one of the major reasons that the use of frames died out.

Although there are fixes for this problem in both flash and AJAX, they are far from perfect and rarely implemented. Serious attention needs to be given to this problem when developing modern web applications as a failure to do so not only undermine usability but damages user confidence.

Breadcrumbs

There was a time when users didn’t really understand breadcrumbs. However as has been suggested recently by Jakob Nielsen, that is no longer the case.

Although breadcrumbs should never be seen as a replacement for the back button, they do work as a handy alternative for more experienced users. What is more, although they have traditionally been used on page based websites they can also translate well onto web applications.

Favorites

In usability sessions I have also occasionally seen favorites and bookmarks used as an undo tool to go back to a previous page. However as with the back button this functionality is often broken in modern web applications that update sections of pages instead of the entire page. Favorites provide the valuable ability for the user to quickly return to marked “safe points” in their surfing and as a result we should be doing our upmost to ensure that this ability remains.

Home

Almost all websites have a link back to the home page, however not all of them make that link very obvious. A common practice is to make the logo a link back and although in itself this technique is fine, it is not obvious this link exists and so many users are not aware of it.

Having a link back to the home page is a great way of letting the user “start again” but if you are going to provide that functionality it needs to be obvious.

So there you have it; why undo is important and some techniques to undo easier on your website. Hope it helps.

Keeping your home page clean

Posted in Design, User experience on by Paul Boag

In the fight for real estate, usability and design aesthetics are often the first causalities.

One of the most common sticking points I encounter when developing a website is the sign off of the home page. Client’s want to cram it with as much content as possible, while the designer is seeking to maintain the integrity of the design. So, what is the best way of avoiding this kind of confrontation?

I am sure you have come across requests like this before…

I need the logo bigger, more space for news, events and features, shortcuts to key applications, more prominent navigation and can you make the search stand out. Oh yes, and I don’t want the page to scroll at 800 by 600. Also, sales would like to add banner advertising across the top and down the side.

In many cases these absurd scenarios occur because of a perception that the home page is the most valuable location on a website. As a result all the various departments clammer to get their piece of the limelight.

In the fight for real estate, usability and design aesthetics are often the first causalities. Below I outline four techniques I am starting to use in order to bring some sanity back to the home page scramble.

Recognizing the changing role of the home page

One of the first steps to home page utopia is to get the stakeholders (those who are fighting for home page prominence) to recognise that the home page doesn’t have the importance that it once did. In fact I think it would be fair to say that we are going to see a continued decline in the traffic going to home pages over the coming years.

Jakob Nielsen in his book “Prioritizing Web Usability” talks about a change he is seeing in the way users are interacting with the web.

There was a time, says Nielsen, when users who had a specific task would go to a site where they thought that tasks could be completed. For example, if they wanted information on the Crisis in Darfur they would go directly to CNN or the BBC. However, more and more it would appear that instead of turning to a specific site and finding content via that sites home page, they are instead looking to search engines. The search engine takes the user directly to the information they require thereby completely bypassing the sites home page. Obviously, this deep linking seriously reduces the prominence of the home page.

Add to this the rise of RSS feeds and more people accessing information via mobile devices, and you begin to see the focus shifting from the website home page towards the individual pages of content. That is not to say home pages are no longer important, they are simply not as important as once they were and so do not justify the level of competition they receive in some organisations.

Don’t rush into the home page

Another technique I am starting to use more often is to avoid addressing the home page too early in the process. By starting with standard textual pages (which after all make up the majority of the site) you get to set the design style before it gets diluted by the land grab for home page real estate. Once the client has “bought in” to the design they will perceive it as being more important and so are less likely to allow it to be railroaded by content demands.

However, delaying the home page development isn’t just a “political” move. It is also the right thing to do. A home page should reflect the sites content at the highest level and signpost the user to key content deeper in the site. In the majority of projects I work on the client hasn’t finalized all of the content in the initial design stage. In my opinion it is hard to create an effective home page until you have a full understanding of what content it is meant to signpost and represent.

Communicating the importance of white space

In the case of home page design the heart of the conflict between designer and client is often a perception of the importance of white space. Every designer knows that white space is a fundamental tool of good design, but we are often bad at expressing why in a way the client can associate with.

This is an area I have been thinking about a lot recently and I have come up with a possible solution which I am yet to try. It was inspired by the book “The Laws of Simplicity (Simplicity: Design, Technology, Business, Life)” which I am currently in the process of reading. On the subject of white space the author says:

“The opportunity lost by increasing the amount of blank space is gained back with enhanced attention on what remains.”

Or in other words; the more you add the less importance anything has.

I think this is where we sometimes go wrong as designers. We sell white space on the basis that it looks better. Instead we should be selling it on the basis that every item you add to the page detracts from the rest.

To help the client think this through I am wondering whether a point system of some kind might help. You might want to suggest that a user has 10 points worth of attention they can give to the home page. Every “module of content” added to the home page takes a minimum of 1 point. More points should be assigned to more important elements. This approach will quickly show that the more you add to a page, the more likely important elements are going to get lost in the crowd.

I am not sure whether the approach would work in practice or not, but it does strike me as a good way to focus the clients mind on what is important.

Embrace rather than fearing the fold

The killer blow to any home page design is when the client says: oh yes, and we want all of that to fit above the fold. This inevitably leads to smaller typefaces and less white space.

I think we need to work hard as designers to dispel the myth that users never scroll. Sure, users don’t always scroll but that is okay as long as we put less important elements further down the page.

The idea that users don’t scroll is horribly out of date and probably comes from the very early writings of Jakob Nielsen. However as early as 1997 he was suggesting that users were becoming more comfortable with the idea.

If your client needs further proof then install Crazy Egg or some other heat map service on the clients site. This will actually show where on the page a user chooses to click. You will see a decline lower on the page but not enough to justify putting everything above the fold.

The emphasis should be prioritizing content rather than cramming everything into the small space above this ill defined line that we call the fold.

But how?

Of course the fundamental problem with educating our clients, is that in many cases you cannot talk to the people that are demanding home page space. This is a very real problem and in many cases there is little you can do to overcome it. However I was impressed by Shane Diffily’s idea of running stakeholder workshops in his recent A List Apart article. Having a workshop at the beginning of a project where you can talk about good practice and dispel some of these common myths is a superb idea and should help a lot of projects run that much smoother.

Show 78: POSH?

Posted in Classic shows on by Paul Boag

This week on Boagworld: Paul redesigns the way clients and designers interact, Marcus asks if you really need a content management system, and Garrett Dimon sharings his experiences of information architecture.

Download this show.

Launch our podcast player

News and events

Breadcrumbs are good, its official

When Jakob Nielsen speaks the world listens. This week he has come out with the shocking revelation that Breadcrumbs are good. Okay, so this doesn’t come as a surprise to most of us, but its still an interesting read. Apparently more and more people have come to rely on this secondary navigation tool and notice if it isn’t there. Jakob believes that breadcrumbs never cause problems in user testing (although sometimes they are not seen) and provide a wealth of benefits to visitors that do use them. Finally, he goes on to talk about the fact that breadcrumbs should always show a sites hierarchy rather than the path a user has taken through a site.

Techcrunch drool over Silverlight

So the guys over at Techcrunch have spent the last week at MIX07 and seem to have been brainwashed by the nice fellows at Microsoft. They are positively drooling over Silverlight, Microsoft’s challenge to Flash. In one post they say:

“It makes Flash/Flex look like an absolute toy… without exaggeration, Ajax looks like a bicycle next to a Ferrari when compared to Silverlight”

Personally, I haven’t had a chance to look at Silverlight yet so cannot express much of an opinion. However, I find it hard to believe that Silverlight will topple Flashes dominance before Adobe responds with something equally impressive.

Although competition can never be a bad thing, it strikes me that this is yet another plugin for people to download and another platform we have to worry about developing for.

RSS in plain english

RSS can be a difficult concept to get your head around the first time you encounter it. Its still a good idea to explain what RSS is on your site for those that don’t know. Obviously you can create a page yourself explaining or sometimes I link to the BBC website which provides an excellent description. Of course if you want something a little more exciting you might want to link to this superb video that explains exactly what RSS is and how it works. Its just a shame they don’t offer the option to embed it directly into your own site.

How POSH are you?

I have to say I was very cynical about this news story when I first encountered it but after hearing Jeremy Keith’s argument on the last .net podcast I have to say I am coming around. POSH is yet another another “catchy” web acronym. It stands for “plain old semantic HTML”. So why do we need yet another acronym? Well the argument goes that nobody is getting excited about semantic HTML these days. Its just not cool. Instead we are obsessed with Microformats or AJAX, things that are perceived as being “in” and “trendy”. The POSH acronym is designed to get us talking about semantic HTML again. The idea is that we start blogging about how we mark stuff up and sharing ideas with one another. The example Jeremy gave on the show was; what is the best way to mark up a conservation in HTML? He suggested that it was simply an ordered list of blockquotes. Do you put that much thought into your code? I can’t say I always do.

So with that in mind I have opened a new section on the Boagworld forum where you can post your examples of good code. You can ask questions like; what is the best way to markup… or simply post how you choose to markup different elements. Whatever the case lets start sharing our good practice in HTML.

Client corner: Do you really need a CMS

Apart from a few ‘design only’ projects we get involved in, every tender that comes through the door includes the words “control over content is a must have”… or words to that effect.

But thinking about all the ‘full’ CMS based projects we have delivered, is that really what the client wanted/needed?

So what types of CMS solutions are there? Here’s a quick summary:

Limited CMS (non-structural) e.g.
  • News
  • Events
  • Popular a few years ago when ‘full’ CMS was a much more expensive.
  • Pros – simple to understand (and build)
  • Cons – clients tend to request more and more areas of the site become CMS controlled and you can end up with a bit of a mess and the cost of replacing can be prohibitive.
Blogging tools
  • Article based
  • With commenting
Full CMS
  • Control over structure: move pages, edit pages, create news pages (and sections) and the front end navigation updates automatically
  • Usually modular: news, events, downloads, forms (dynamic), lists, newsletter, etc
  • User management: Roles, permissions, preview, workflow
  • Licensed or bespoke?

You need to ask yourself a couple of fundamental questions:

Even if I have these tools, will I have time to use them? All websites need to have an owner or editor. Someone who’s job it is to manage all content sources and keep the site up to date. We have been asked many times to carry out work content population work on a CMS that we built…

How much of my content needs updating more than monthly and how often do I need to add new pages to my site? It seems that having the ability to extend a site is often seen as a ‘must have’ when in reality new pages are only added, say, quarterly at most. Added to that, the only content that changes regularly is, for example, news, events and case studies. Employing an agency to add new pages and manage site structure/navigation is not a big job (though some seem to charge extortionate rates). Added to that, clients who do not use a CMS very often tend to forget how to use it and then go back to the agency simply because of that.

To summarise, think very carefully about your requirements in this area and talk to prospective agencies about what they recommend. You could end up making a costly mistake.

Ask the expert: Garrett Dimon on Information Architecture

I am a huge fan of Garrett Dimon’s work and so I am really excited to have him on the show this week. Garrett’s job title is “information architect” and so unsuprisingly he joins us to share some of his experiences on working with information architecture. His advice includes:

  • Embrace constraints
  • Know when to challenge the constraints
  • Explore lots of ideas
  • Work in conjunction with clients
  • Don’t use your computer
  • Throw away more than you keep
  • Don’t worry about the details until later on
  • Simplify and cut back on details
  • Communicating is more important than documentation
  • Make your IA deliverables visual as they are easier to understand

Agony uncle: The wish list brief

This week I am back on Agony Uncle duty with an email from Dan in Swansea:

I am increasingly frustrated by the briefs I am getting through from potential clients. They read more like wishlists than real briefs. They lack focus and often ask for functionality they just don’t need. How do you respond to briefs like that?

Its a great question and set me thinking a lot about the web design process. In fact it was the primary motivation for a recent blog post on the subject which we talk about on the show. I think the key to this question is to not be afraid to go back to the client and challenge them. Perhaps propose a rough costing based on some of the items in their list but suggest that the first step (if you are taken on) would be to define and price a more accurate brief. I think most clients will respect you for suggesting an alternative and more effective strategy. In many ways its like the speculative design argument, it may feel scary to challenge the client before anything is signed but in my experience clients respond positively to a carefully thought through argument.

Review: Spoken Text

A while back I asked people to submit their own reviews. I didn’t specify that people couldn’t review their own product and so I recently received a review from Mark promoting Spoken Text. Now, I don’t want to open the flood gates to shameless self promotion but I like spoken text so much that I want to include it on the show. It is basically a free, text to speech system that allows you to convert multiple file types into audio files.

Mark shares four great reasons why he thinks we might be interested in it as web designers:

  • Use spoken text to provide alternative audio versions of the content on your website
  • Allow users to record and save any content from your website they want
  • Create a podcast of your websites content
  • Create your own podcast of other people’s content that you want to listen to while on the go

There are two things that excite me most about this service (beyond the fact that it is free). First is the accessibility benefits it could bring for visually impaired users and secondly the ability to make instant podcasts of new stories from your site without the complication of finding somebody to present it.

This isn’t a service that is useful to everyone but I think in certain circumstances this could be a killer app.

Show 68: Tagtastic

Posted in Classic shows on by Paul Boag

This weeks show includes hints on email campaigns, writing Web design contracts and site navigation approaches.

Play

Podcast: Download (23.1MB)

On this week’s show; Matthew Patterson from Campaign monitor shares some handy hints on sending an email campaign, Marcus finishes his series on web design contracts and Paul looks at some interesting alternative approaches to site navigation.

Download this show.

To subscribe directly within itunes click here

News and events

Diversity in web design

This week the web design blogosphere has been dominated by discussions about the lack of women speakers at conferences. Jeffrey Zeldman, Eric Meyer, Jeremy Keith, Tantek… the list goes on and on. Frankly, I find the debate less than helpful. It is interesting to note that all of the women I have seen post on the subject have seemed very defensive almost as if they are under attack for not speaking more!

More on Open ID

Open ID continues to build momentum with both AOL and Digg.com saying they will support the standard. Dan Webb also provides a guide on how to support Open ID in your web applications.

Validation: why it matters

Ethan Marcotte has just published an interesting article on the List Apart website looking at the business benefits of validation and why it continues to polarise the web community.

The sorry state of web accessibility

The subject of web accessibility receives another body blow this week with Mike Davies posting a damning criticism. What is probably most disturbing is that I am yet to find a post disagreeing with him.

Client Corner: The statement of work (final chapter!)

This week sees the end of Marcus’ series on the statement of work (I know, it is distressing for us all!). In this final segment he takes a look a:

  • Milestones and timescales
  • Project management
  • Testing
  • Deliverables
  • Pricing

Ask an expert: Matthew Patterson on email campaigns

Matthew Patterson works for campaign monitor one of the best email management sites about. Their site is stuffed with great advice for those thinking of running an email campaign and so it seemed only natural to get him on the show and get his thoughts on how best to run a successful campaign.

Non hierarchical navigation

Headscape was recently approach by a potential client who had literally hundreds of thousands of web pages which were almost impossible to organise into a traditional information architecture. They wanted us to suggest some alternatives and so I thought this sounded like a great issue to cover on the show.

Instead of trying to stuff everything we covered in those show notes, I have instead posted a separate article on non hierarchical navigation which includes everything I said and the links I mentioned. Hope you find it useful.

Non hierarchical navigation

Posted in User experience on by Paul Boag

By bringing together search, tagging and related links in a relatively automated process I really believe that active navigation provides a viable way of dealing with massive websites.

Just occasionally you come across a website that just doesn’t fit the normal pattern of things. Headscape was recently approach by a potential client who had literally hundreds of thousands of web pages which were almost impossible to organise into a traditional information architecture. They wanted us to suggest some alternatives and so I thought I would share with you my response.

There are lots of reasons why a normal information architecture might not work for your site. However, probably the most common is that your site has simply outgrown the constraints of a hierarchical tree and that your users are getting lost deep in the information architecture. Often the answer is simply to do some radical pruning to remove much of the deadwood, however occasionally a different approach needs to be found.

So what are the alternatives available to you?

Search

The most obvious approach is to use search as your primary navigational method. Indeed search is the primary mechanism we use to navigate the entire web and so we know that it has the scalability required. However, although potentially the best solution it is often poorly implemented. I have written about how best to implement search before and so I am not going to repeat myself here. Nevertheless, there are additional things to take into account when search is used as the primary navigation for an extremely large site.

Firstly, position is important. A search box is a relatively small screen element and so can easily be lost within a design. When search is the main way that a user will find their way around your site you need to make this obvious. Move the search into a more central screen position like Google or Amazon does.

Secondly, on a large site advanced search is important. The problem is that users struggle to build complex search queries. They find concepts such as using quotation marks or Boolean joins difficult to grasp. As web designers we need to search for new ways to help the user build these complex searches. As it happens the answer might be right under our noses.

Screenshot of find and replace functionality in Dreamweaver

Dreamweaver comes with an interesting tool that helps users build complex search and replace commands without having to know about regular expressions. Although a similar approach has been used on websites in the past, the arrival of AJAX and DOM Scripting now means this kind of functionality can be implemented in a much more intuitive and responsive way.

Related Links

Although not a replacement for traditional navigation, related links can work as an effective accompaniment to search. Related links allow you to establish a loose relationship between documents which is much more flexible than the static hierarchy of an information architecture. They can provide a context to a document which search alone does not offer. However related links are not without their problems. When publishing new pages it is a relatively simple process to link those pages back to previously published pages in order to provide context and additional information. However older documents are often neglected and when a new page is published these older pages aren’t updated with a link to the new page. In other words old pages atrophy. The problem is caused because the system is reliant on editors remembering that there are older pages which need updating. Ideally some automated system should identify related pages, but we will come on to that later.

Breadcrumbs

Normally breadcrumbs are associated with a traditional information architecture where they show your current location in the hierachy. However, that is not the only use of breadcrumbs. A less used approach is that breadcrumbs show the path the user has taken through the site. The reason this approach is less used is because in theory the browser back button provides the same functionality. However, the majority of users are unaware that the back button allows them to skip back multiple stages. Historical breadcrumbs clearly show the user which pages they have previously visited and allows them to quickly jump back to anyone of those pages.

There is also an opportunity here to once again learn from desktop applications. Windows Vista has added an interesting new feature within its file explorer that might be adapted for our historical breadcrumbs. Basically the file explorer’s breadcrumbs allow you to view the children of any folder in the hierarchy:

Screenshot of the new file explorer system in Vista

This approach could be used with our breadcrumbs to show any links within a document allowing the user to quickly jump to related pages. The primary reason a user utilises breadcrumbs or the back button is to select another link so this approach could prove invaluable.

Tagging

Next to search tagging is the most common way of organising non hierarchical information. Indeed this post has been tagged as shown at the bottom of the page and you can view a tag cloud for the entire site. Sites like delicious also allow for the bundling of groups of tags to create a basic information architecture for the site.

However, tagging does have some fundamental issues which need to be resolved. The greatest of these is who does the tagging? The most popular answer to this question is that the user does it. Indeed Russ Weakly of the Australian Museum put together a very compelling presentation at Webstock for a user driven information architecture based on tagging. There are also a growing number of tools that facilitate user tagging of a website. Of course the problem with this approach is that it requires the user to be motivated enough to do the job. When tagging my bookmarks on delicious I am motivated to do so in order to allow me quick access to them in the future. However, the same motivation does not exist to tag a page on a standard website like this one.

The alternative to user tagging is that the owner of an individual page tags it. The owner is certainly much more motivated to tag the document but that doesn’t mean they are the best qualified to do so. The problem is that an owner’s mental model can be radically different to that of a user and so their choice of tag can be inappropriate to those navigating the site. Web page owners tend to rely heavily on jargon and view the world from an institutional point of view. Of course the other problem of editorial based tagging is this can present a massive problem if there is a substantial backlog of web pages that need tagging.

Active Navigation

Much of the problems that arise with both tagging and related links comes from the need for human intervention and in particular the degree of intervention needed to tag or link older documents. One solution might be to automate some of the process.

Back in 2000 I was fortunate enough to work with a ground breaking company called Active Navigation. These guys were working with similar algorithms to those found in a search engine like Google but applying them in a very different way. Like Google they were using linguistic routines to analysis a page and identify the keywords which best described the content. However instead of using the results to build a simple search engine they were also using it to build a navigational structure of related links and tags. This would ensure related links were always up to date and avoid much of the human intervention required for tagging. Instead of having to tag and manage individual documents they can simply edit and manage the tag cloud to ensure only the most relevant keywords are featured.

Because the system fundamentally uses the same approach as a search engine algorithm it is more than capable of also providing search functionality. By bringing together search, tagging and related links in a relatively automated process I really believe that active navigation provides a viable way of dealing with massive websites.

Talk business not technology

Posted in Web strategy on by Paul Boag

Nothing is ever new. Here I was thinking I was the only one talking about return on investment and that “good practice doesn’t always make good business”. In actual factor both Vincent Flanders and Jared Spool are saying it as well.

In a recent post Vincent Flanders wrote this:

There seems to be a cargo cult belief that if we use Web Standards, Usability, and tableless CSS, our web sites will make money, we’ll be famous (or at least cool), and 0ur sites will look great. If only it were that easy.

He then went on to quote Jared Spool:

I learned quickly that business executives didn’t care about usability testing or information design. Explaining the importance of these areas didn’t get us any more work. Instead, when we’re in front of executives, we quickly learned to talk about only five things:

  • How do we increase revenue?
  • How do we reduce expenses?
  • How do we bring in more customers?
  • How do we get more business out of each existing customer?
  • How do we increase shareholder value?

Notice that the words ‘design’, ‘usability’, or ‘navigation’ never appear in these questions. We found, early on, that the less we talked about usability or design, the bigger our projects got.

This has certainly been born out in our experiences too. We need to change the way we speak to clients.

Podcast 51: Better Google Listings

Posted in Classic shows on by Paul Boag

We all want better listings for our sites on Google, but search engine optimisation often appears to be a dark art and a morally murky area. In this show, we explore the issue and provide some practical advice.

Play

Podcast: Download (28.3MB)

Download this show.

To subscribe directly within itunes click here

Google accounts for over 49% of all searches and has one of the most complex and closely guarded search algorithms. It is not surprising therefore that your website ranking on Google can be a subject of much pain and frustration.

Ranking criteria

The exact nature of how Google ranks websites is largely unknown. However, it is generally accepted that the following items are a major contributing factor:

  • The age of your domain name
  • The amount of content available to the search engines
  • The amount of websites linking to your website and their popularity
  • The information architecture of your website
  • The quality of a page build
  • The relevancy to the end user

Page Ranking

A broad-brush indication of your rating is Google’s Page Rank. This numerical value provides some idea of your success in search rankings. There are numerous ways of viewing your page ranking but probably the simplest is to install the Google Toolbar.

Page Indexing

Another important factor in ranking your site is the accessibility of your content to Google. Google can only list your pages if it can access them. You can easily find out how much of your site is indexed by typing the following into Google:

Site:yourDomain.com

This won’t return every page as it will consider some pages duplicates. To see all pages click on the link at the bottom of the results.

Inbound Links

Of course probably the most significant factor in your page ranking, is still inbound links. The quantity and quality of links are crucial in how well your site is rated. You can view how many sites link to you by entering the following into Google:

Link:yourDomain.com

What does Google look at?

So when Google visits your site, what exactly is it looking for? Well, Google pays particular attention to the following elements on your pages:

  • The page title
  • The body content
  • Your meta tags
  • Headings
  • The naming and destination of links

Of course Google cannot index everything. It struggles with some content and cannot access others at all. Below is a list of the more troublesome elements. Although these elements can be used on a site you should not rely on a search engine being able to fully index them:

  • Images
  • PDF documents
  • Flash
  • Multimedia content

SEO Good Practice

Understanding how Google works is one thing, improving your listing is quite another. Below are is a list of good practices I have picked up while researching the show. These should go a long way to helping you improve your sites placement. However, ultimately search engine is a specialist area and you may wish to consider outsourcing this work if you are able.

  • Identify a list of keywords to focus on. Keep it short and specific. Trying to ranking highly on lots of broad phrases will prove impossible.
  • Endeavour to include keywords in your page URLs. Look at the address for this page. Notice that it repeats the title of the article. Does your site do this or does it have incomprehensible URLs?
  • Use Heading Tags and keeping the H1 tag for the page title rather than the title of the site.
  • Make sure that every page has real content rather than lists of links. I recommend at least 50 words per page.
  • Wherever possible using keywords in your links (both in the body of the page and within navigation).
  • Use breadcrumbs through the site.
  • Try to keep keyword density at around the 5% mark.
  • Separate your content from your design by using CSS based layout.
  • Make sure any Javascript you use is unobtrusive and degrades nicely.
  • Ensure that meta data (keywords and descriptions) is unique to each page and not generic across the whole site.
  • Remember that content only accessible after submitting a form is invisible to Google.
  • Wherever possible, link to other content within your own site using consistent link descriptions.
  • Ensure all images have an alt attribute (alt tag).
  • Make sure your site has a sitemap.
  • Look at your competition and analysis what SEO steps they are taking.

Conclusion

Improving your ranking on Google can be a slow and frustrating experience. It is not unusual for a website to take 4 months to be fully listed and even longer if it is a new domain. Even more frustrating is the fact that Google keeps much of its algorithm a closely guarded secret, which means that much of what we know about improving rankings is educated guesswork. Despite that, we cannot ignore Google. They are a dominant force in the marketplace and search engine listings are a vital component of any online marketing strategy.

Also in this show…

Also in this week’s show we review CSS – The Missing Manual, take a look at a standalone version of IE 7 and check out a new automated testing suit. In the news we also see @media go global and have a look at the latest Web standards advice from A List Apart.

50th podcast and our new site

Posted in News on by Paul Boag

I know! The launch of this new site was supposed to coincide with the 50th episode of the boagworld podcast, but then I realised I am away on Friday and Monday so the podcast is going to be released later than normal.

So in order to avoid lots of emails asking me where the 50 episode is, I thought I would kill two birds with one stone by launching the new site and telling you the next episode is going to be a day late.

So here it is; the new boagworld site! As you can see, I decided to evolve the design rather than start from scratch.  The main emphasis has been on making it scalable and improving some of the accessibility. However, I have also improved the site’s navigation and hopefully made it easier to find what you are looking for.

Additional functionality includes:

  • The ability to navigate by tag (no longer available)
  • A onsite podcast player
  • The ability to search the boagworld site OR our web design network
  • Improvements to the SPAM filters

I am intending to add a lot more functionality before too long, including a shop and a better forum facility.

I need your help

Of course, the whole thing was done in a huge rush and so will no doubt be riddled with bugs. As you spot them can I ask that you just make a note of them in the comments area of this post.

I am aware that a number of comments have been lost and that some of your subscriptions may stop working. I am very sorry for any hassle this might cause you. My advice is that if in doubt re-subscribe!

I would also like your thoughts on how the site can be improved. What functionality would you like to see added? How can it be made more accessible or usable? All feedback is much appreciated although I would ask that you be kind!

One final thing… yes I know it uses every web 2.0 design trick in the book. What can I say; I am a dedicated follower of fashion ;)

Dump your information architecture

Posted in User experience on by Paul Boag

Do you run a website made up of thousands of pages? If so, then you may want to consider listening to an excellent presentation by Russ Weakley. He proposes an interesting new approach to the information architecture of large sites.

I have written before about the unique challenges of coming up with navigational approaches for large sites. It is a subject particularly close to my heart as many of the sites I work on have huge numbers of pages. Sites of this size do not sit comfortably under traditional navigational models with information architectures that become very deep and convoluted.

The approach suggested by Russ in his presentation at Webstock is a radical departure and I can imagine a lot of hesitancy within larger organisations, however despite that, I still find it a fascinating concept.

Russ is proposing that website owners stop imposing navigational approaches on users of a site. Rather than creating an information architecture for a site, website owners should "let go control" and allow users to create their own paths to the information they require.

This is achieved through tagging. Instead of pages being grouped together in sections within a site’s architecture, each page is essentially standalone. Visitors navigate to a page using tags inserted by the author of a page and via the search mechanism. By not imposing an artificial site architecture onto the site you avoid problems like cross linking between sections and navigational problems associated with deep sites.

It is a very hard concept to explain and so I suggest that if you are running a large site you take the time to download Russ’ presentation.

Listen to Russ’ presentation

The approach is not without its problems but it is something to seriously consider if the information architecture of your site is causing you problems.

I have to confess that although I find the concept very exciting I cannot see many websites adopting it. The concept of isolated pages not organised into a predefined architecture will simply seem too alien to many website owners. However, in a world where users "information forge" by dipping in and out of sites via search engines, it makes perfect sense to organise website pages in a non-hierarchal way.

I do see real potential in this approach, which is why I am intending to implement a similar approach on the upcoming relaunch of the boagworld website.

Statstastic! Jakob loves his stats

Posted in User experience on by Paul Boag

I am currently reading Jakob Nielsen’s new book “Prioritizing Web Usability” and would highly recommend it for any user experience designer. The book is packed with some excellent statistics and I thought I would share a few of them with you.

Average visit

When a user is researching a new topic or trying to buy a purchase for the first time, they visit an average of 3.2 sites in addition to any search engine they might use to find the sites. On average they spend 1 minute and 49 seconds on each site with the exception of the final site they visit while trying to complete their task. In this case, they spent an average of 3 minutes and 49 seconds.

The initial page

Interior pages account for 60% of initial page views with the homepage making up the other 40%.

The homepage

The average user spends on 30 seconds on your homepage and will read only 10 to 20 words. What is more they will only scroll 23% of the time.

Interior pages

Users will spend slightly longer evaluating an internal page they initially arrive at. You can expect a user to spend 45 to 60 seconds on such pages. However, that time is reduced to 27 seconds on subsequent pages. This all means that you cannot expect users to read much more than 100 words of any individual page they visit.

Page linking

Surprisingly almost half of the links people clicked on within an interior page are found in the content body on the page. The other half was primarily made up of clicks on top, left or right navigation, with only a small percentage clicking on footer links.

Search engines

93% of users viewing a search engines results page did not go beyond the first page of results. Of those users, only 47% even bothered to scroll that first page. Finally, a massive 51% of users simply clicked on the first result in the listings.

Thoughts so far

Although I am only part way through the book, I am finding it incredibly enlightening. My only criticism is that Nielsen often comes across as being full of his own self-importance and spends too much time initially promoting his own companies activities. Despite that however, I would thoroughly recommend this book to anybody interested in website usability.

Podcast 42: Choosing the right design

Posted in Classic shows on by Paul Boag

It’s not unusual to be in a position where you have to choose between more than one design for a site. This podcast may help with the question “which design do I pick?”.

Play

Podcast: Download (30.7MB)

In this week’s podcast Paul and Marcus discuss the decision making process involved in settling on a design for your site. Whether you are a designer or web site owner this podcast provides some interesting techniques for choosing the right design.

Download this show.

To subscribe directly within itunes click here

Help us out. Complete our podcast survey

How to approach choosing a design

Your approach to assessing a design is as important as the quality of design itself. Approaching your assessment in the wrong way can quickly lead to the wrong conclusions. Below are a few quick tips on assessing a design:

Avoid personal opinions

Design is very subjective. We all know what we like and yet we very rarely agree on what that is. It is easy to simply assess a design based on your personal preference. However, the chances are you will not be the end user of your site and so the design should cater for a wider audience than just you.

Be careful who you show

Although you don’t want your decision to be based on your personal preference you still need to think twice before you start showing it around. The temptation is to show it to work colleagues to get their feedback however they aren’t your target audience either (unless you are building an intranet). Try and avoid design by committee, have one decision maker that collates feedback from end users rather than co-workers.

View the design in context

It’s important that you assess a design within its context. Never print a design out to make your decision. Access each design on screen and within a web browser. After all, that is how other people will view it.

Check on multiple monitors

A design can look radically different on various monitors due to colour balance and gamma settings. Make sure you look at the designs on as many different screens as possible. A good design needs to be flexible enough to accommodate the different screens your site visitors will be using.

View at different resolutions

A design not only needs to work on different monitors but also at different resolutions. The resolution your PC is running at affects what can be seen on a design before you need to scroll. It is therefore vitally important to ensure key content doesn’t slip below the fold.

Accessing the design

Once you have worked out how you are going to go about assessing the design the next step is to establish the criteria by which you are going to make that assessment. Below are some initial ideas you might wish to use. Each of these areas could go into a lot more depth but I have tried to keep to the main points within each area.

Colour

Colour is a very subjective area, so rather than asking people what they think of a colour, ask them what words they associate with a colour palette. That way if they say a colour conjures up images of "progressiveness" you can compare this with the messages you want the site to convey.

Layout

There are two things to look out for when assessing the layout. Does the design have enough white space and does it have an underlying grid structure. White space allows a design to breath, making content more readable. A grid structure provides some organisation to the design and its absence can leave a design feeling chaotic.

Weighting and flow

Does the design draw the eye to key content and show the user what to look at next? Ensure that the design you choose puts the emphasis on the right elements in the same way a newspaper always makes it clear what the lead story is.

Typography

As with layout there are two key things to look out for when it comes to the text on your site. Firstly, make sure that the text has a decent space between lines. Tightly packed text can be really hard to read and will dramatically reduce dwell time. Secondly make sure that the designer has broken up larger blocks of text with headings, sub headings, bullets etc, as this dramatically improves scanability.

Accessibility

Obviously accessibility is a huge area but within the context of choosing a design there is only one main thing you need to know: Can you read the copy? Is there sufficient contrast between foreground text and the background? Avoid designs that you have to strain to read because ultimately they will drive users away.

Usability

Is it obvious what the user should do next? Do links look like links? Is the main navigation clearly positioned and labelled? Is the user overwhelmed with too many options? In many ways usability is the key criteria I use for judging design. Ultimately users just want to get at information as quickly and easily as possible and the design should not get in the way of that objective.

Branding

To a website owner this is probably the most obvious of the assessment criteria. How well does the design conform to your style guide and tie in with existing print material. A continuity across marketing collateral is vital for establishing a strong brand identity and the web is very much a part of that.

Imagery

The final area of assessment is the choice of imagery. Imagery can make or break a website. Some warning signs to look out for include:

  • Small busy images that are hard to see
  • A lack of consistency across the site with different styles of imagery, all mixed up together
  • Images that grab your attention away from content rather than directing you to it.

The golden rule

If there is a golden rule to choosing the right design it would be communication between client and designer. A client should listen carefully to what a design has to say about their design approach and the designer should be able to clearly communicate their ideas and why they have made the decision to produce a certain design. Too many designers fail to justify their approach and too my clients make up their minds about a design without listening to the logic behind it.

Also in this show

In this week’s show we take a look at a number of web conferences including the @media podcast feed, Refresh Orlando (which Paul will be speaking at) and d.contruct. We also discuss the ethical issues surrounding being "inspired" by another website, as well as a review of the Wiltshire Farm Foods website.

Podcast 38: Navigational Approaches

Posted in Classic shows on by Paul Boag

Paul and Marcus take a detailed look at the different types of navigation that can be used on a website.

Play

Podcast: Download (25.5MB)

In this 38th episode of boagworld.com Paul and Marcus take a detailed look at the different types of navigation that can be used on a website. From the humble body link to the most complex site map, this episode tackles how to get the most from your sites navigation.

Download this show.

Help us out. Complete our podcast survey

Website navigation is a huge subject and really far too much to fit into a single podcast. However, despite the obviously foolishness of the endeavour we did our best to cover as much ground as possible.

We looked at the following types of navigation:

Main navigation

Because this is by far the most talked about form of navigation we didn’t dwell on this area for too long except to share a few words of advice learnt through bitter experience:

  • Allow room for expansion
  • Use JavaScript with extreme caution
  • Keep it simple
  • Avoid using graphics for navigation where possible
  • Don’t try and be clever!
  • Consider the depth of your information architecture
  • Keep titles short, descriptive and intuitive
  • Don’t have too many links on any one page

Breadcrumbs

We spent more time on this form of navigation, reflecting on the results of some recent research into how people perceive breadcrumbs. In particular we discussed the position of breadcrumbs and how you explained the concept to end users.

Related Links

We discussed the benefits of adding related links into the interface of your site and how to organise them into useful categories. We also discussed how to link to external websites.

Site maps

We explain why site maps are important before expanding on the points covered in my previous post on creating a good sitemap.

Body links

Finally we discuss the much ignored body link as previously covered in my post “the humble hypertext link“.

Also in this show…

This week Paul and Marcus also cover navigational terminology (siblings, parents, children) and discuss the upcoming @media conference. Finally Paul shares an excellent new Firefox extension he has discovered that allows you to better view the source of HTML pages you are viewing.

Tag your pages

Posted in User experience on by Paul Boag

You can’t swing a cat at the moment on the web without hitting some form of tagging. From delicious to flickr, tagging is all the rage, but what about tagging the pages on your website?

A company called Wanabo have released a free hosted system that allows your users to tag the pages on your site. It is a system that I am currently trialling here and you can see how it works by scrolling to the yellow box at the bottom of this article.

The benefits

Web page tagging does offer some interesting benefits. Allowing users to categories pages in affect creates a more organic navigational approach that is much more user centric than the traditional information architecture. It also has the possibility of making the site "stickier" with fewer dead ends. Each page would have associated tags that relate to other pages on the site so continually drawing the user on. User tagging also gives the web site owner a unique perspective into how visitors view the content and even an indication of areas that require improvement. There is also the benefit of linking tags across multiple systems. This would allow, for example, you to automatically associate images from your flickr account with specific pages on your site based on the tags used.

The reality

Although I can see the potential in paged based tagging I can also see some serious problems. Probably my biggest concern is the fact that different people have different mental models and so will associate radically different tags to a page. This will lead to situations where obviously related pages may not be linked because one person tagged a page with the keyword "dinner" while another tagged a different page with the keyword "lunch". This situation is further confused with plurals and misspellings.

Of course this makes the massive assumption that users will be bothered to tag a page in the first place. I guess this largely depends on the level of "commitment" they feel towards the site in question. For example, I would expect the number of users to tag pages on boagworld, to be higher than those who will tag their local council website, because users feel more committed to the boagworld community. Wanabo does provide a solution to this problem by allowing you to turn on "auto tagging". This uses the keywords entered into search engines to tag the page. However, this will still suffer from the same "mental model" problem I mentioned earlier.

One solution is to disable the user tagging and tag the entire site manually. The obvious problem with this is that it is a huge undertaking and undermines many of benefits derived from a user based navigational system.

In conclusion, I am not convinced that Wanabo have solved all of the problems yet. They don’t appear to have fully dealt with some of the drawbacks of user tagging and also suffer from some basic customisation issues.

Why add tagging to boagworld?

So why am I trying it out on boagworld.com? In short, to see what happens. By running it on a live site I hope to get a better idea of just how useful it is and what issues exist. In principle I find the idea of user tagging of pages very exciting but believe the area needs further examination and work before a truly innovative solution emerges.

Your thoughts

Has anybody come across any other websites that offer a similar service? I would be interested to hear what people think about the idea and what they would want from a service like this?

Podcast 29: The great flash debate

Posted in Classic shows on by Paul Boag

Flash is one of those web technologies that always generate a lot of debate. In this episode of boagworld.com Marcus and Paul go head to head arguing the pros and cons of this controversial plug-in.

Play

Podcast: Download (21.1MB)

Download this show.

Marcus and I have never really agreed when it comes to flash. Marcus is easily seduced by anything that animates or "shows off" in someway. I on the other hand take a much more balanced view, believing that flash is the spawn of the devil adding nothing to the web but accessibility and usability problems (hell its my blog, I can be completely bias if I want!). So with that in mind we decide to fight it out in the great flash debate:

The case in favour of flash

To be frank Marcus’ argument was appallingly weak and I can barely bring myself to repeat it in these notes. However, in the interests of fairness here is the crux of his argument.

  • Macromedia claim that Flash is available on well over 90% of the world’s computers.
  • That unlike HTML, CSS and even to some degree JavaScript, Flash renders fairly consistently across all browsers. This makes it a dependable and consistent development environment.
  • There are something’s that Flash just does better or that are simply impossible using other technologies.
  • That flash is the ultimate attention grabber with flash sites being far more visually engaging than HTML sites.
  • Flash advertising has a 5 times higher click through rate than HTML adverts. This demonstrates that people respond to it better.
  • With the number of people on broadband continuing to rise there is an ever greater demand for rich media content which utilises the increased bandwidth.

The case against flash

Although I was forced to grudgingly agree with some of Marcus’ points I wasn’t willing to give up without a fight. My valiant response went something like this:

  • Despite Macromedia’s outrageous claims about availability, ultimately Flash is a plug-in and so not everybody has it.
  • Search engines find it hard to spider flash files and so can have an adverse effect on your sites ranking.
  • Flash encourages poor practices including (but not limited to):
    • Mystery meat navigation
    • Annoying animation and sound
    • The "its art damn it" argument against making the things usable
    • A failure to test across different operating systems and browsers
    • As well as being hard to spider for search engines, flash also creates all kinds of accessibility problems for speech browsers.
    • By default flash breaks the back button in your browser
    • By default flash breaks bookmarking of specific parts of your flash application.
    • It is a closed format (no view source) preventing the cross fertilisation of techniques and ideas.
    • It doesn’t print well using the default browser print functionality.
    • Flash is often bandwidth intensive so penalising dial up users.
    • A lot of corporate environments actively block flash.
    • Flash is also often reliant on JavaScript creating even more accessibility problems.

I could have gone on. For example I could have mentioned IE’s latest problems supporting flash. But I guess I had made my point :)

The happy middle ground

Although we had a lot of fun arguing our corners, the reality is far less black and white. Like all technologies Flash can be used for good or evil. It is how you use it that matters not the technology itself. Flash is great for complex applications like mapping or horrendously long forms. It’s incredible at communicating complex ideas through audio, video or animation but even in these situations it can be used badly. Unless you know exactly the audience and user platform (like for some corporate intranets) you should always offer a more accessible alternative. You should avoid making entire sites in flash and using it too heavily for navigation which can not only cause accessibility problems but also search engine ranking issues.

Have your say

So what do you think? If you had your way would you ban flash from the web. Or do you believe that flash is the next natural evolution and we can all throw our HTML books away. Let’s see if we can’t start a flame war in the comments ;)

Design for your CMS

Posted in Design on by Paul Boag

With next weeks podcast being on content management systems I have been thinking a lot about how they work. In particular, I have been mulling over the unique challenges they create when it comes to the front-end design.

One of the biggest areas of business for us at Headscape is the creation of design templates for content management systems. A lot of organisations have in house developers who purchase or build their own CMS but don’t have the skills to do the design work involved in the front end of the site. As a result, they come to us looking for help.

Over the years, I must have worked with dozens of different content management systems, all with their own unique constraints. I really have seen every quirk imaginable, from systems that only allow colours chosen from the web safe palette, to a CMS that insisted on a strict three-column layout for all sites.

However, probably the most universal problem with any CMS is that it gives the website administrator limitless control. "Isn’t that half the point of a CMS?" I hear you cry. Well yes, it is, but that doesn’t mean it can’t prove annoying if you’re trying to design the interface. Let me explain what I mean:

Limitless sections

Many content management systems give website owners complete control over the structure of their site including the top-level sections. This means they can continue to add sections until inevitably they break the design. This is especially true of horizontal navigation because you obviously want to avoid horizontal scrolling. To be honest your options are limited:

  1. You instruct the users not to add top level sections or disable that feature.
  2. You avoid horizontal menu’s entirely and design your site in such a way to allow for expanding of vertical navigation.
  3. You create a horizontal navigation that wraps nicely when there are too many sections.

None of these options are particularly elegant, nevertheless this is something you need to consider carefully in the design stage.

Deep navigational structure

Of course, the problems don’t stop there. If a user has control over the structure of the site, it is also possible for them to create sections, within sections. With this kind of limitless flexibility, you cannot presume in your design that you only need to display one or two levels of navigation. In theory, your navigation has to be limitless.

This problem can be solved in a couple of different ways. One option is to show only the siblings, parent and children of any particular page. This works very well particularly when used in conjunction with breadcrumbs, however it does have some drawbacks.

Another approach is to use a breadcrumbs style of navigation. This is something I have covered before in my entry entitled "Dealing with complex navigation" so I won’t go into anymore details here.

Varying column heights

Of course as well as expandable navigation, there is also potentially endless content! With few clients following Steve Krug’s rule of taking your content and halving it, pages can get incredibly long. However, on other occasions it is common to find the navigation being longer than the body copy. With content and navigation being so flexible it is important that your design can comfortable expand or contract to fit what is there. The golden rule here is to test endlessly with different content and different navigation to see if your design breaks.

Ever-expanding names

With users having control over naming pages, another problem arises. As web designers, we have learnt that short snappy names for sections are much easier to read and digest. As a result, we tend to design on the assumption page names will be relatively short. However, you cannot guarantee this if the client has control over the site structure. Make sure you check that page names wrap nicely whether they appear at the top of the page or in your main navigation. Always design for the worst-case scenario and remember if your site is multi-lingual that some languages can have words considerably longer than their English equivalents.

Interchangeable boxes

Not only can the user control the site structure and page content but in many content management systems, they also have some control over the layout. This is often particularly true on the homepage where they can often reorder content "modules". This means any design that you propose has to be flexible enough to allow these "modules" to be moved around. The trick is to do this without the design becoming too blocky. I have found that using curved corners, overlaid imagery and removing borders can help to blur the lines between these "modules", creating a less boxy feel.

The evils of the WYSIWYG

Probably the biggest area of concern is the dreaded WYSIWYG editor. With this, a client can ignore all your lovely design rules and do whatever the hell they like with your page. This is probably the biggest danger area in content management design.

My recommendation is to try and persuade the client to swap out their CMS default editor with something like Xstandard. With this WYSIWYG the client enters content semantically rather than worrying about the design. In other words they tell the WYSIWYG that something is a heading and the CSS file defines its look, rather than the user defining the font, styling and colour themselves. Failing that it is important that the designer provide a very clear style guide covering exactly what is acceptable and what is not.

What’s your experience?

These are just a few of the challenges that I have discovered over the years but I would be interested to hear what your experiences have been? Which content management systems have you used and what problems have you encountered. What advise would you give to somebody designing for a content management system for the first time? Post your comments here.

Podcast 23: Defining your project

Posted in Classic shows on by Paul Boag

This week on boagworld.com Paul and Marcus discuss the need to define clearly the scope of your web project before rushing into the build.

Play

Podcast: Download (18.8MB)

Download this show.

TechnoBuster: Semantic code

Semantic code is a term that is thrown around a lot at the moment, but what is it and why should you care? I try to explain to Marcus in very small words what it’s all about!

Check out our article on this subject

Main feature: Scoping your web project

Carefully planning your website before you start to build might not sound like the most exciting theme for a podcast but it is fundamental to a successful website project. I know from bitter experience that not doing so can lead to a world of pain for both the developer and the client. In this weeks show we share loads of tips that we have learnt over the years. Here are just a few of them:

Take the long view

Many clients force agencies to start projects before they are fully prepared, either because they are unwilling to pay for a scoping phase or because they have a tight deadline to meet. This kind of short-term view does nobody any favours. If a project is not properly defined at the outset, it will inevitably lead to slippages and additional expense. A developer needs time to understand the requirements before they begin to build. If they don’t, they will be unprepared when they encounter unforeseen technical issues.

Everybody has to sign off

Having a statement of work that everybody has signed off on is a great way to ensure client, developer and designer are all singing off of the same hymn sheet. It avoids miscommunication and misunderstanding by clearly defining what is going to be delivered.

Do you really need that?

The scoping phase should not only identify what tasks need to be done, it should also take a long hard look at what functionality is being considered. If you are not careful, your statement of work can turn into a wish list of functionality rather than a considered document which factors in return on investment. Ask yourself, if I spend all of this time building a certain piece of functionality, will it pay dividends for my organisation.

Be specific

It is easy to be vague about your scope, but if you do, there is room for confusion. The statement of work should cover everything from how many design iterations there should be, to what browsers the site is going to be tested on. Make sure your list of tasks is as detailed as possible, that way you will avoid any nasty surprises half way through the project.

Phased development

Don’t be afraid to phase a project especially when faced with a tight deadline. If your website has to be live by a certain date, it might be wise to leave out some of the "bells and whistles" until post launch. It is easy to forget that your website should be an evolving animal that can grow over time. After all, saving some of the functionality and rolling it out later gives you a good PR opportunity.

The hidden technology killers

Beware of those little technology issues that are so easy to overlook. For example, pay particular attention to which browsers you are going to support and what accessibility level you will be conforming to. Finally don’t forget to factor in time to deal with those extra style sheets for print, mobile or low vision users.

Web resources: Getting your layout right

This week I picked two sites that help designers develop the perfect layout.

Web Design Practices
A great site that shows you the trends in layout based on an analysis of several hundred websites. This site answers invaluable questions such as; "where does the search box normally appear" and "do most sites use side or top navigation?"

Although slightly out of date and centred largely on ecommerce sites, this is still an excellent resource. However, remember, just because a lot of sites do something a certain way doesn’t make it good practice!

Layout cookbooks
Have you ever had a client who knows what they like when they see it? If so, send them over to the layout cookbook and get them to look through the hundreds of different screen layouts available there. It’s also a great place to get some inspiration when you feel like all your designs are using the same basic layout!