S8080 Blog

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

www.number10.gov.uk

S8080 are incredibly proud to announce that the new Number10 website was designed in Wales – by us!

The new site, which uses the WordPress platform, was launched a couple of weeks ago after an intensive UX, design and build phase.

More info soon.

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

We recently launched a large content managed website for TES Aviation Group – a large international, but Wales based aircraft engine management company.

For Matt and myself, it was one of those dream jobs – a fascinating subject, a great group of people and a thoroughly professional and forward looking organisation. One of the highlights of our initial alignment workshops was the tour of their vast facility in Bridgend, south Wales and getting up close to some of the most powerful engines in the world. A schoolboy dream.

We worked through our UX (user experience) processes, spending considerable time talking with the various teams in the organisation, gathering valuable insight into a very complex industry and its own unique set of interactions between client and supplier.

These interviews, combined with alignment sessions with the sales and marketing director and his team, user journey design, process mapping, competitor review and content audit meant we could design the IA (Information Architecture) and wireframe prototype matching the user’s’ needs tightly to TES’s business objectives.

Then our creative and interactive teams were let loose on the look and feel, extending their existing brand into online. The design was then wrapped around our content management system enabling the TES teams to keep their content up to date from anywhere in the world at any time of day or night (these guys travel a lot!).

The site is attracting a lot of industry interest as the analytics are already proving.

We look forward to a long and interesting relationship with TES. It is worth a visit just to see the most amazing (and valuable) coffee table in Wales – made of scrapped titanium aircraft parts.

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.

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!

An interesting article on mobile commerce by emarketer.com summarising recent polls in the US on what mobile users would buy via mobile commerce.

In a nutshell:

• Only 7% of online retailers had an m-commerce site in late 2008 (source: Internet Retailer)
• 71% of US adults would purchase via their mobile (source: Harris Interactive)
• 59% were willing to buy pizza online via a phone, 58% movie or event tickets, 43% hotel rooms (source: Harris Interactive)
• But PriceGrabber.com found most popular mobile purchases were digital content (ring tones and music)

See the full article with graphs: http://www.emarketer.com/Article.aspx?R=1007126

This all makes sense, our observations to date are that mobile users have different (and immediate) goals when using their mobiles on the move rather than when they have a desktop, laptop or net book handy.

Anyone for Pizza?

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 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

Just read this nice article by Graham Charlton on Econsultancy.com on the impact of Verified by Visa and MasterCard SecureCode, and how the poor usability and poor customer communication of these schemes is resulting in higher drop out rates in online checkouts.

Amazon still will not add the Verified by Visa scheme.

For more information see Graham’s the full article here: http://econsultancy.com/blog/3887-verified-by-visa-a-conversion-rate-killer