Nov 10 2011

A new website for the National Assembly for Wales

Late last week, after many months of hard work, we launched the brand new website for the National Assembly for Wales.

Well, I say ‘new’…

Earlier this year, we won the contract to redesign and redevelop the NAfW website www.assemblywales.org, but instead of implementing a new content management system, we would be working into their legacy CMS system. This would give significant cost savings.

Usability

One of our tasks was to improve the usability of the website. We used many sophisticated techniques to ensure it would be easy to navigate. We started with a content audit of the existing site to help us determine the depth and breadth of the site and categorise the types of information that the Assembly needed to present (and the stuff they didn’t!)

Then we developed a suite of personas – based on real people who use the website – and scenarios of use and user journeys for each of these. This ensures that everything going forward is based firmly on a User Centred Design approach. We interviewed many types of users, including AMs, journalists, and members of the public to find our exactly what they needed and how they wanted to use the site.

Information architecture

Once these two stages were complete, we could then use the findings to redevelop the information architecture (site map) and create a set of wireframes that explain each key page in detail and the way the users will interact and travel through the site – making their journey as easy as possible. Wireframes really do help save time and money on all web projects as amendments can be made quickly and cheaply, before the ‘look and feel’ or coding is developed. It’s a very agile and cost effective approach.

Getting creative

Then we moved into the design phase. After consultation, we presented three distinct creative routes. The Assembly project team gathered thoughts and feedback and the final creative direction was decided upon. This design was then implemented into the CMS, and the resulting templates were accessibility tested to ensure everyone would be able to use and enjoy the content on the new site.

Then came the mighty task of applying the design to the content – thousands of pages of information.

After one more round of accessibility testing, the new site was launched without a hitch thanks to the hard work of many people from S8080, The National Assembly for Wales, and our project partners Method4. Thank you everyone, it was an immense task.

You can see the new website at www.assemblywales.org

We’re very grateful to S8080 for the hard work they’ve put into this project, and we’re immensely pleased with the final product. From the outset, they stood out head and shoulders above their competitors, with their down to earth attitude and excellent project management skills. They took the time to understand our needs as an organisation, and now the result is a clean and crisp design and a new site architecture that is helping visitors to our site find what they are looking for and enjoy the site experience.”

Iwan Williams, Media, Brand and e-Democracy Manager

National Assembly for Wales

Mar 18 2011

Design is how it works

Nov 17 2010

Children’s web sites, designing web sites for children

We’ve been working on designing number of children focused web sites and micro-sites recently, which is always a real treat. When working on the usability and IA aspects we undertook a lot of research and this recent piece of research form Jakob Nielsen was a real help:

http://www.useit.com/alertbox/children.html

In a nutshell Neilsen’s research found that the older kids age groups have moved on substantially in their web proficiency since their last studies, this is due to the early exposure of children to computers so generally children today are much more experienced in using computers and the internet.
It was also really interesting to read that kids from 7 years and older were showing ‘fairly advanced behaviors’, so now all but the youngest kids scroll down pages.
In the article there’s a great table which summarises the differences between children’s and adults user behaviors. Some of the key points and things to keep in mind for me were:
  • Kids love to explore, they will try and play with options and mine-sweep the screen
  • Kids find multiple / redundant navigation confusing
  • Real-life metaphors for example spatial navigation is really good for pre-reading kids
  • Font size: 14 point for your kids, 12 point for older kids
  • Typing is slow and poor mouse control is common so interactive elements need big distinct clickable areas
  • Animation and sound is liked (unlike adults who typically dislike these)
  • Kids tend to use bookmarks more than search, whereas the older kids and adults use search more

There’s some more information on our web site design specifically for Children here:  http://www.s8080.com/sectors/childrens-websites/

Sep 22 2009

Busy times ahead

It has been a crazy few weeks for us. Good crazy though.

We won two major (and fascinating) contracts at the end of August and we are off to London later this week for a kick-off meeting for another big win for a brand new client.

I can’t talk too much about it just yet, but it’s one of those career defining projects that our team will talk about for years to come.

We are incredibly pleased and proud to have won it and look forward to showing you later this year 🙂

Nice to be having some decent weather at last too.

Sep 8 2009

Using active voice for web copy

When writing online we always recommend ‘the active voice’ – it is more direct, less wordy, easier to understand. Active voice helps people to grab information quickly and naturally leads to a more conversational tone of voice.

What is the difference between active and passive voice?

This is the way I’ve always explained it:

Active voice
is when the subject is doing something or causing the action

John kicked the ball” – the sentence describes who does what to whom, John is kicking the ball..

The passive voice is the other way around – something is being done to the subject, the subject is the recipient of the action

The ball was kicked by John” – the subject (the ball) is being kicked by John

More examples of the active voice:

Active: Craig slammed down his iPhone

Passive: The iPhone was slammed down by Craig

Active voice minutes:We discussed user journeys. Jane presented the analytics report, further user testing will be undertaken next quarter

Passive voice minutes:User journeys were discussed by those in attendance. The analytics report was presented by Jane, it was agreed that further user testing is to be undertaken next quarter

Writing in the active voice uses less word, makes copy more concise which ticks another online writing basic – remove excess words and use smaller everyday words where possible.

Sep 2 2009

Functional mindmaps

Here’s a nice little article on the Wireframes site about using mind maps to think about functional requirements of the web site and user goals / tasks before diving into the detail and sketching wire frames.

By using functional mind maps first (whether they are sketched or done using tools such as Mindmeister) it allows us to explore ideas and start mapping associated activities of the users.

Source: http://wireframes.linowski.ca/

Jul 22 2009

Do duplicate links on a page to the same destination page make it easier or harder for user to find information?

The other day in a IA work shop session one of our clients asked a really valid question:

…do too many links in a page to the same destination page make the page harder to use because visitors have to look through more content to find what they’re looking for? For example on the home page we have links to the same destination page in the navigation bar, the content area and the promotional area.”

Some argue that more than one link to the same destination page is just too many, and I agree that if there is more than one link to the same destination page then there needs to be a good, and well considered, reason for this.

However as with many usability and IA questions there is no definitive rule, and the answer depends on many variables…

More than one link is OK but don’t just duplicate your navigation bar

For real priority content and key user tasks we will often make sure that there is more than one link. So say a key business objective is ‘to get more users to sign up’ we may have a link in the navigation bar and a link or a big button in the content area to the sign up form.

The reason we take this approach, having more than one link to core content and key tasks, is that we’ve observed users in the same testing sessions navigate only using the navigation bar and others navigate only by scanning the content area for links and buttons (seeming almost blind to the navigation bars). Therefore the argument is very strong to add more than one link to key tasks on a page.

What we really don’t like to see is a web site where the whole of the navigation bar is repeated in the content area, and worse still some sites where key user goals and call to actions are in the navigation bar, cross promotional navigation area and content area!

That’s why user journeys and listing core tasks / goals is so important, with this understanding we can make sure that on relevant pages we have 2 or potentially 3 ways into that primary business function, on other pages where that specific task is not as important we will have fewer links.

Big buttons help prioritise key tasks and speed up user journeys

The other ‘trick’ we use is pushing key journeys with big buttons, we know big buttons are clicked more often and more quickly, so by making a link really big gives the user a very clear entry point to a key task. It screams to the user ‘this is really important’ and will often out perform a number of smaller links. Of course you can’t super size all your links – just your really core user task(s) on that page.

So on a page non core business functions / ‘non key tasks’ should not be duplicated – instead rely on good Information Architecture.

We find that using trigger words works really well on navigation pages, helping to ensure that the different audience groups understand the IA of the site, grouping and labelling of content.

Thinking of making tweaks and changes?

Before we make fundamental changes we typically we like to get a detailed understanding so we’ll often use a mix of these to help build our knowledge:

  • Know where you want your users to go – review your audiences and their key user journeys, look at specific tasks and the IA
  • Check analytics to see which links are being clicked on
  • Split test if possible (A, B test – try removing duplicate links for a period of time and see what the impact is)
  • Do some quick and dirty user testing
  • Keep reviewing the site’s aims and business objectives

As you can see this was a really great question and deserved more than a one line answer!

Jul 6 2009

What are navigation pages / pathway pages?

In this post I wanted to talk about the user’s needs and general rules of thumb for navigation or pathway pages…

So what’s a navigation page?

Navigation pages are the pages between the home page and the information pages. The aim of navigation pages is to get the user quickly to the information they are looking for.

Most site visitors are on a hunt – they have a goal or task and the navigation page is THE way to get them there quickly (by increasing the scent of information and giving clear links as next steps).

Above: Navigation pages – where they sit in the site hierarchy

From our observations, and other research, people don’t want to read a lot when they are ‘hunting / foraging’ for information. Only when the user has reached the page which screams ‘here’s the information you are looking for’ does the user suddenly turn from information hunting to gathering, they are now ready to feast, read – and devour information!

Some rules of thumb for navigation pages:

  • Navigation pages are really table of contents – they give a quick overview of what’s offered and show the user where to go next
  • Cut the text – most users won’t read even a paragraph of text on a navigation page, the page needs to tell them what to click on / do without reading
  • Links with a short one line of text which includes trigger words / keywords helps
  • Images can help too – make sure they add to the users understanding of what is behind the link and are not just ‘eye candy’
  • Bullet points work really well
  • Marketing messages and copy will be ignored – on navigation pages just make sure user can find the information they are hunting for quickly
  • Don’t panic about the “3 click rule” (or rather “3 click myth”), observing users has taught us they are happy to go beyond 3 clicks if these are quick clicks and the information scent is getting stronger
  • Don’t make people think on navigation pages – use simple language, bullet points, big obvious links to all speed up navigation

An example of a navigation page we designed for visitwales.co.uk – the aim for users to be able to move to the information they need VERY quickly

Directgov (www.direct.gov.uk) has lots of really good navigation pages, here’s one for Motoring:

Lots of quick links and bullet points making a highly scannable and therefore quick navigation page.

Of course on many bigger sites we have a couple of layers of navigation page, as long as the information scent gets stronger as the user clicks through these they are fast links and get the user to their destination really quickly.

From the motoring page on DirectGov site clicking on “registering a vehicle” takes the user to another navigation page which then goes to the full information page

What about users landing inside the site?

Many users will land directly in your site, maybe on a navigation page so that’s why its important that navigation pages include:

  • Site logo, name
  • Strapline (make the logo a link to the home page)
  • Global navigation device
  • Home link
  • Site search box if there is one on the site
  • Footer and utility navigation devices

Finally users aren’t perfect!

On navigation pages we see uses clicking / choosing the first option that looks like it fits the bill. Therefore when organising the navigation page make sure:

  • the ordering of lists and priorities on the page are carefully considered
  • the most important information and links are high up the page
  • if you want to persuade users to click one link over another put the priority link above the other one

Once you’ve built the navigation pages test them with users against tasks and goals.

For more information on writing for the web this book is great: ‘Letting go of the words – writing for the web’ by Janice (Ginny) Redish

Feb 17 2009

Open a window or not

Here’s a neat article from Smashing magazinesummarising whether to open a new browser window or not:

http://www.smashingmagazine.com/2008/07/01/should-links-open-in-new-windows/

A quick summary / rule of thumb is open links in a new window only if:

  • The link is to a non HTML document e.g. a PDF, XLS, MP3 etc, in this case use a popup window without browser control toolbar
  • The link provides help / assistance (so the user doesn’t have to navigate away fro the page they are currently on)
  • The link interrupts an ongoing process (e.g. filling in a form, checkout forms) so a user doesn’t lose information that they have already typed in
  • The link is to a large image which takes time to load (opening the image in a new window allows the user to read the content while the big image is loading)

Everything else should open in the same page unless explicitly stated that links are opened in a new window – and don’t open a new window unless there’s a really good reason.

Feb 12 2009

What is information scent?

Sometimes you see a link and you are dead sure you know what information you’ll see when you click on it – other links you just haven’t got a clue. When you are searching for information and have a specific goal the extent to which you can predict what you will find if you follow a certain path and links through a site is called the ‘Information Scent’.

‘Information scent’ is part of the information foraging theory which uses the analogy of animals hunting for food to ex plain how users interact with a web site.

In the same way that a hunting animal is sure that that following a stronger and stronger scent will mean that they find their prey at the end. Your visitor clicking through your site searching for specific information or with a specific goal will continue to do so if the information scent is getting stronger and they keep on finding links which take them closer to their goal.

This is why it’s important that the navigation is clearly defined, labels state what they will find, that the language is plain and easy to understand, and why its great to add trigger words as cues within your links – all to make that information scent particularly smelly!

Jul 9 2008

Information Architecture demand grows

S8080 are well known for our comprehensive and thorough Information Architecture (IA) and Usability consultancy. We have built and refined our unique and scalable process over a number of years and now we are expanding our team.

We are happy to welcome recent graduate, James Frost to the IA team. James will be helping to hone the process further and will be charged with developing a new IA product aimed squarely at smaller organisations.

“Enabling SME’s to take advantage of our expertise has been an aim of ours for a while now. We have developed a User Testing service aimed at smaller businesses and organisations allowing them to really understand what is wrong with their old site before they invest in a brand new one” said Matt Howard, our Technical Director and Usability Expert. “Now we are working on refining and improving our high end IA consultancy, and at the same time, developing a cut down version that will pretty much guarantee that a website will be successful. It’s a bold claim, but it works”

Oct 3 2006

What is IA and how does it help? 1 of 2

Firstly this is a 2 part blog! This first blog focuses on “What is IA (Information Architecture) & how does it help”, I’ll explain the essential role of IA in the development process and hopefully help demystify.

In the second blog I’ll go through some of our standard IA steps – different techniques are employed depending on the size of the project and of course the agency, this is not a full road map for every project but will hopefully give you a little of an insight as to what it’s all about.

Definitions of information architecture (L Rosenfeld & P Morville 2002)

  • The combination, organisation, labelling and navigation schemes within information systems
  • The art and science of structuring and classifying web sites and intranets to help people find and manage information
  • A practice focussed on bringing principles of design and architecture to the digital landscape

Ok, enough of definitions! The IA process enables us to understand the full requirements of the client and the end user – your website visitors, and to structure & organise information to fulfil both your users needs and your organisations needs, which can be quite different!

  • It ensures that the organisation needs & information is analysed, gaps identified, categorised and labelled in a logical & easy to understand way for the end user group(s) in terms of the site hierarchy.
  • It ensures that on a page level, presentation of information layout is carefully considered ensuring users immediately notice the important stuff!
  • Finally it gives a blue print for our creative and web programming team which has been agreed with the client.

One of the key advantages of a good IA process mixed in with some usability testing is that the majority of usability & functionality issues are caught in the design phase where changes are quick and cheap to fix (a quick revision to a document rather than creative or programming time).

However, for me it is the key to a completely successful project as it ensures a constant dialogue with the client through the architecture and design phases of the project – this means the client will have contributed to the project many times before the creative or programming teams even start work. This means much less scope creep, on time delivery, a tightly aligned client / agency relationship and solution matching the business objectives – good news all round.

We do sometimes have difficulty persuading the very cost conscious client to take IA components! However it is an essential part of building a successful web solution Even the smallest sites benefit hugely (we have a great low cost (XS) IA product). We see so many sites that have been designed with little or no thought to the information on the site and how the users interact with that information – the result is typically a poor performing site which may look nice but doesn’t meet the business objectives.

What’s next

In my next blog on this subject, I’ll give a brief overview of our standard IA steps in a web project.