I highly recommend John for a personal service in website design, branding and print design – especially if you are in the Stockport area, where he is based.

http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/

This is a very different time to that of the browser wars, and we need to be careful that we don’t apply lessons learned then to the situation we are now in.

The number of and variety of devices and viewports which need to be supported can seem overwhelming, as can the job of making websites work on them. I think we need to take a step back, though, and focus more on the user experience. What kind of experience do we want to deliver to people in specific environments. I have conducted thousands of usability tests, and no-one has every said to me “the trouble with this website is that it’s not been optimised for this viewport.” I do, however, often come across people who get pissed off when they can’t get the full ‘desktop’ site on their smartphone. Unfortunately, many ‘mobile-optimised’ sites apply web app user experience patterns which often do not work on content driven websites.

The whole situation is dire for users.

If we focus on the user experience, then the situation becomes much simpler. There’s a great document on mobile web best practices:

http://www.w3.org/TR/mobile-bp/

So, as well as thinking about breakpoints, I urge developers to also consider how we create a consistent user experience. For example, how do we create a consistent navigation for mobile devices in portrait mode? We can’t use mobile app patterns, because they don’t work on mobile websites. And some solutions may work technically, like converting the nav into a form select, but I’m not convinced they are the optimum user experience.

http://www.slate.com/articles/technology/technology/2011/12/the_year_s_worst_tech_trend_complexity_.html

I would like to see more advances in consumer post-pc devices. To be post-pc, I want to do everything as a consumer on one device. If it’s one device, then it’s going to have to be a smartphone, because I don’t want to carry around two devices. This is what I need my consumer post-pc smartphone to do:

- I want to plug my smartphone into a TV and get a desktop-like experience with a fully-functional keyboard
- I want to update the smartphone without having to plug it into a computer
- I want to import CDs and paper books I have bought or been given as a gift into the smartphone without needing to rip or scan using a computer
- I want websites which consistently and reliably work on my smartphone
- I want a wifi hub which can be set up using my smartphone
- I want to remove the need to buy a tablet or laptop for day-to-day needs
- I want to back everything up into the cloud so I don’t have to worry about losing anything
- And just to be safe, to be able to archive all my data onto a disk connected to my wifi network which I can manage though my smartphone

This will be a truly post-pc consumer device. I want to tell my mum that if she gets a smartphone, she can ditch the PC because she can do everything she needs to do on her phone and by plugging it into the TV for the ‘desktop’ view.

And if I can do everything on one device, then all the issues of inter-device interoperability vanish. For example, my bookmarks don’t need to be synced because I’m only using one device. Simples.

Last week, I attended the Institutional Web Management Workshop (IWMW). I was just going for the day when I was giving a workshop on ‘Developing Your Personal Contingency Plan‘, but thanks to Statistics Into Decisions, I was able to go for the full three days. While at the conference, I also did a barcamp session on Instant Usability Testing.

I have been to IWMW three times before in 2005, 2006 and 2007 – so it was great to catch up with people again. I did really enjoy working in education, and the conference is a signal of the kind of community you don’t really get in the private sector. It also gave me a chance to meet with Stuart Church from Pure Usability, who organises the Bristol Usability Group. Hope he’ll be able to come to one of our Northern User Experience meetings which I help organise.

As part of the deal for attending, I am writing a report for Ariadne, so I will write a short post when that is published.

The only slight hiccup was that I couldn’t get wifi or network signal on my phone, so I couldn’t tweet and take part in twitterwall posts

There are too many higlights to mention. It was just great to meet people, run the workshops and get inspired! Thanks to UKOLN for organising it – hope there’ll be more.

1. Choose a destination (shows most popular destinations, and a more button)
2. Choose a standard class ticket type (with a button for first class options and a button for railcard options)
3. Default to one adult ticket with increment and decrement buttons for adult and children tickets
4. Option to print receipt while making payment

The Association of Train Operating Companies (ATOC) states that “most people use ticket machines with no problem at all.” This is disingenuous. The fact that 7 out of 10 people surveyed are ‘satisfied with ticket-buying’ is very poor. Imagine if 7 out of 10 people were satisfied with book buying on Amazon, I think they would be very concerned. I really think a passenger survey is not going to highlight how the ticket machines can be improved, as most people do not spend their time thinking about these things.

Next time I’m at the station, I think I’ll photo the screen which confuses me.

I would have be more impressed if ATOC had have quoted the results of usability tests on the system, or if they had taken advantage of the Passenger Focus report to say that they would carry out usability tests to make the ticket buying machines ‘even better’.

During the workshop, there were a couple of BarCamp sessions. Having attended BarCamp Bradford and BarCamp Newcastle, it was great to see this kind of session. The idea is that the participants write on a flipchart sheet anything they want to give a session on, and people are free to attend whichever session they want. There were two thirty minute sessions.

Just before the BarCamp, I was chatting with Helen Ghaly from the University of Salford about Usability Testing, and I said I’d run a BarCamp on it. So up my name went on the board. About a dozen people turned up. We were a bit late starting, so I only had 25 minutes, and in those 25 minutes, I managed to:

• Identify a client with a website which wanted testing
• Recruit a participant for the usability test
• Develop a task list with the client
• Develop a persona and scenario for the test
• Give the participant training
• Conduct the usability test
• Facilitate a discussion with observers on their usability observations

If you’d like to know more about Instant Usability Testing, take a look at http://www.extremeusability.co.uk

I was asked by UKOLN to present a workshop to about a dozen people on Developing Your Personal Contingency Plan.  Given that I used to work at the University of Salford, and have since found work in the private sector (at Lloyds Banking Group) and have now set up my own business (Extreme Usability), it seemed to make perfect sense – so I was really pleased to accept the invitation. The session covered the following:

• I shared my experiences of finding work, being made redundant, and setting up a business.
• We looked at ways of creating choices.
• We used a technique to analyse each choice to decide which one to focus on.
• We looked at techniques for creating a vision for the preferred choice.
• We discussed useful qualities for putting the plan into action.

I really enjoyed facilitating the session. It was great to share some of my favourite ideas which have helped me to change career direction twice within two years!

The Navigation Structure

Okay, let’s start with the story. Have a read of this: BBC News website redesign: telling the story. This article includes an image of what the BBC News website used to look like in 1998, which you can still see live on the internet. (How much longer this will last with all the cuts remains to be seen. Anyway, that’s another story).

What the article above says about navigation is:

The first thing you might notice is that the left-hand navigation has gone. A horizontal navigation now gives links to the same sections at the top of every page. This was one of the first – and certainly one of the most carefully considered – decisions made on the project, and one that we wouldn’t have made without good reason.

First, there was the issue of how much horizontal space the left-hand navigation took up. Story templates and indexes (the front page, the Magazine index and the specialist indexes like business and politics) were always compromised by having 100 or so pixels taken up by a piece of unrelated navigation. Now we can offer larger images and galleries, videos and interactive graphics across the site.

Second, horizontal navigation has long been the standard method of navigation across the rest of the BBC and is an understood interaction that we were sure people would find easy to use.

To support this fundamental design change, we carried out a round of user testing, pitting the current site against one with identical content but a horizontal navigation. Users reacted positively across the board, some not even noticing the difference until it was pointed out to them. With this decision made, we were able to start the redesign of the whole site with a wider, blanker canvas.

I want to explore two issues in this post: top vs left navigation, and information architecture.

Top vs Left Navigation

The reason given for top navigation is to allow more width in the body of the page. The additional width is required because of more multimedia used on the newer website. I really think this is disingenuous, when you consider the amount of width in the original website, and the fact that users will quite happily scroll in 2010. However, there are other reasons in favour of a top navigation. But first, a history lesson.

Before content management systems, server includes and DreamWeaver, navigation was tricky. It meant repeating HTML on every page. If the navigation changed, it might mean going in and changing every single page on the site manually and individually. To get around this, frames were used. A frame at the top for the header, and a frame on the left for the navigation. In addition, it took so long for even a small page to download, that it was desirable to keep as many navigation links on the page as possible so that the user could navigate at a reasonable speed. Those two issues no longer exist, which means we can ask the question: where is the best place to locate navigation; and how many navigation links do we need for navigation to be effective? Okay, I’ll come to the second question in the next section on information architecture. But what about where navigation should be located.

Research shows that users look at a page in an ‘F’ shape, but mayby that’s just because it’s where content happens to be located. Users will in general look at content first, and then look at navigation only if they need to. That means that navigation needs to have two qualities:

1. That people can tell it’s the navigation without looking at it by using their peripheral vision.
2. That when people do use the navigation, they can get around the website.

Although I haven’t run a usability test on the new BBC News website design, I would expect people to know where the navigation is with their peripheral vision. So the navigation is fine where it is. But is it better or worse?

If we take Scotland as an example, the previous design had four blocks (main navigation, video and audio, features, and related BBC sites), and it had 29 links. With the new design, the Scotland section has two blocks (1st and 2nd level news links) and 16 links – which is 55% of the original number of navigation links. Going back to my previous point: because the internet is faster than in 1998, it’s fine for people to click on ‘home’ if they can’t find what they are looking for on the current page. So the new design gets a big usability thumbs up, because the less links there are on a page, the easier it is for users to find the right link. It also means that the additional width means there is less scrolling as there is more space available for content. The content is also less cramped and uses a more mobile device type layout – ‘most popular’ looks like it was designed for mobile. This is a medium thumbs up. I personally find the layout a bit unclear, but that’s not really an issue with the navigation system, so I won’t give this a little thumbs down.

Okay, so from a usability perspective, the new navigation makes a lot more sense. But what about the information architecture.

Information Architecture

There always seems to be a fear of chaning the information architecture when a site is redesigned, in case people can’t find the content. I have no idea why. If you go into a department store, and the layout has changed, you wouldn’t be surprised if the signage has changed too.

In the news site, there are 14 top level navigation links. In the old site there was 15. The reduction is because ‘Also in the News’ has been moved to be a ‘Home’ second level links. The top level links in the new site are of three types:

• Home (which include second level links of features)
• Location (World; UK; England; N. Ireland; Scotland; Wales)
• Category (Business; Politics; Health; Education; Sci/Environment; Technology; Entertainment & Arts)

Okay, I hope you can see a problem straight away. Northern Ireland has been abreviated to N. Ireland, Science & Environment has been abreviated to Sci/Environment. This is not ideal, especially for SEO (Search Engine Optimisation). If you want to compare the effectiveness of top navigation vs left-hand navigation, then of course you want to compare like with like. But I do think the information architecture is not entirely logical.

I think the BBC have also designed the navigation so that the features hang off the home page so all the familiar links are visible. This means that the home page has 21 links in the navigation. It is not a coincidence that there were 21 links on previous home page main navigation block, excluding ‘related BBC sites’. Yes, the BBC have kept the same identical navigation items on the home page. Okay, so people can find their familiar links. But in the long run, it may not be the most findable solution – by findable, I mean the ability for users to find the page they want on the site.

I believe that the links off the home page called be described as ‘features’ and put in their own top-level links, and that the nation links would make more sense under UK. This is my more findable taxonomy (taxonomy is just a posh word for navigation structure).

• Home (no second level navigation)
• World
• UK (with England, Northern Ireland, Scotland and Wales as second level links)
• Business
• Politics
• Health
• Education
• Science & Environment (not abbreviated)
• Technology
• Entertainment & Arts
• Features (with Video & Audio, Magazine, Editor’s Blog, In Pictures, Also in the News, Have Your Say, and Special Reports in the second level).

The missing links which have now disappeared from the home page can be put in the footer area. As the footer would include all the links from the old BBC navigation (including ‘related BBC sites’) people can still get to where they want to be in one click. A block in the right-hand column or in the body for ‘features’ could also be added.

Okay, to be fair, let’s compare like with like:

• The main navigation on the home page of the old BBC news site had 21 links.
• The main navigation on the home page of the current BBC news site has 21 links: a reduction of 0%.
• The main navigation on the home page for my suggested taxonomy has 11 links, a reduction of 48% – making it much more findable.

There is the issue of third-level links to be sorted out in my design. For example, in the design, Scotland has sub-navigation for Scotland Politics and Scotland Business. These could either be added to the UK second level navigation, or the third level could be designed into either the navigation block, or even the content of the page. For example, once you clicked on Scotland the navigation could change altogether. The top level would be: Home | UK | Scotland, and the second level Scotland Politics | Scotland Business.

Maybe they thought this would be too much to do in one go with the new design. However, the BBC could have introduced a new taxonomy to the previous design before launching the new design. And they could change the taxonomy within the new design.

If we take a more agile approach to website development – one of constantly tweaking and improving. A little change here and a little change there. Then these improvements can be made. It’s only like moving socks from one aisle to another in a department store.

Design

I just want to quickly mention a design feature of the site. The navigation block links are plain text. I do like this. I prefer it to sites where the navigation is a design feature, as this overstates its importance. If I’m in a department store and I’m looking at the floor guide, I just want a nice simple plain list of what’s on each floor. I think the BBC news site makes good use of plain text, hover states, and simple seperators.

Conclusions

BBC News Navigation – heading in the right direction, but needs to be bold about cutting the number of items.

I would love to hear your comments on this post, in particular on the structure of the navigation links.

If you would like me to review the taxonomy (navigation structure) of your website, then please do get in touch. Either comment on this post, or see the contact details at http://www.extremeusability.co.uk

I’m really interested in the demise of left-hand navigation. When it was originally introduced, it was pretty difficult for people to get around websites. We didn’t have JavaScript and page includes and content management systems. This meant that to do anything sophisticated, each page would have to be hand-crafted, which was a lot of work. The first way we got around the problem, was by using frames. These allowed web  developers to put the navigation in one frame, and then a single navigation file could be used for a whole section of pages. But frames are not accessible. This was abandoned in favour of page includes. This allowed a single navigation file to be included on every page, but without the problems of frames. Finally, content management systems meant that menu systems could be included in the template (including DreamWeaver templates and library items).

But surely with the improved processing power of servers and improved interface design applications (such as DreamWeaver) we can produce better navigation. Wouldn’t it be great if navigation was contextual and you just saw the navigation relevant for the page you’re on. If I’m in a department store, I don’t want to see the sign for the whole floor on every aisle, just at the lifts and escalators. I just want to know where I am, what’s around me, and where I can go to see the full floor plan.

Hopefully the new BBC News navigation is a step to a more user-friendly navigation system.