May 12 2017

A new look website for Natural Resources Wales

Natural Resources Wales

S8080 recently had the pleasure of working with Natural Resources Wales (NRW) on a comprehensive and ambitious user experience design project focused on improving and enhancing their public facing website.

The challenge

Although the website was packed with informative content, feedback suggested users were having trouble finding content and information and were having to resort to contacting NRW through traditional channels. Four key elements of our user experience design brief was to:

  • Improve information architecture (IA) and search visibility
  • Improve layout and template structure
  • Improve NRW’s link with recreation in Wales
  • Improve delivery of content on mobile devices

How we approached the project

Improving the site structure

In the initial stages, we went back to basics which generally involves printouts, sticky tape, a blank wall and a huge pile of Post-it notes – it’s all very analogue.

We took the existing IA, adding each key section to a stack of Post-it notes and recreated the sitemap of the website on the wall. Over time we organised, re-organised and chunked information together, rethinking ambiguous terminology and section headings and tested, iterated and simplified the user journeys.

Our final IA decisions were influenced by NRW personas (based on real users and analytical data) which gave us ‘top task’ journeys to simulate when testing the final IA structure. The new IA was shared with the digital team and stakeholders at NRW and following collaborative feedback and improvements, we developed a revised version which we validated by performing an on-line Tree Tests (Tree Testing is a technique used to evaluate the findability of content within the information architecture).

For a typical Tree Test, participants are given a task and are asked to navigate through a tree menu structure to identify where they believe they would find an item or piece of information. The Tree Test study gave us positive results and invaluable, unbiased feedback on areas for improvements such as cross linking or simple labelling changes.

Sketch to prototype

With the new IA tested and iterated, we could move onto the visual phase, rapidly creating wireframe templates using industry standard prototyping software, balsamiq mockups.

The key to success in this phase is to temporarily ignore colour palettes, imagery and graphic design and concentrate on the usability of the layout – the visual hierarchy of elements on the page and the terminology used, to assist the user.

The NRW website holds a vast amount of information and although we needed a suite of templates to suit different types, we were conscious that to many would reduce the benefit of introducing memorable design patterns across the website. To befit the wide-ranging audience with varying online capability, we created 3 key template types: Homepage, Service and Recreation.

The Services template type would be used for sections that had a specific end goal or transaction, such as a payment, licence or permit renewal, or informational content, such as what to do in response to flooding. The Services template group has minimal graphic embellishments and typically wouldn’t require photography or promotional areas.

The Recreation template type would, in contrast to the services template, have more visual appeal, allowing more use of imagery and encourage the user to explore and interactive with section content. This template group would be used for campaign pages and sections such as ‘Days out’: A section that showcases places to visit in Wales, including NRW’s visitor centres and attractions.

The Homepage combines elements from both the Service and Recreation templates and displays an oversized search box, flood warning data and a ‘most popular’ listing, dynamically generated based on user’s top-tasks.

Natural Resources Wales templates

High fidelity graphics

With the IA and wireframes finalised, we started the visual design to develop a single creative approach that has two distinct roles: 1. Simple service design with minimal visual clutter 2. A visually rich campaign template with imagery and interaction.

So these template types could exist together in one website, we created a masthead full-width strip that would appear across all templates. The masthead strip contains the page heading and intro paragraph. Attributes such as background colour and the branded graphics can be toggled on or off within the CMS giving the administrator control of the level of creative detail. This flexibility allows the services template to be simplified while retaining the consistent global masthead.

A strong brand and compelling photography of Wales allowed our design team to create dramatic campaign and centre pages for the ‘Days out’ section, aligning NRW’s recreation pitch with any modern tourism site online.

The inclusion of custom web fonts means the online presence can faithfully replicate the offline collateral, building stronger brand recognition and the use of custom SVG icon sets allow the NRW team to add high quality iconography as the content develops.

A fully responsive design has been rolled out for the new website with much of our design time focusing on mobile users, ensuring a truly inclusive experience across devices.
Natural Resources Wales mobile

Agile and smooth running

With any large project, careful management helps keep things on track. The project management team at S8080 worked closely with NRW during the planning stages to ensure all risks where highlighted and mitigated before any work started.

With many stakeholders and users feeding into the process and NRW’s existing development team, Method4 working on the build, collaborative working and meticulous progress tracking was critical to the success of the project.

Together with NRW, our project management team developed an agile approach to the management of the project. In the first instance, a product roadmap and a series of sprints (work phases) split into daily and weekly tasks were planned. These sprints would be reviewed internally daily, reviewed with NRW weekly and a stakeholder ‘show and tell’ meeting would be held every 2 weeks.  When possible, the meetings would be video or Skype conference calls with screen-share walk-thoughts as the UX design progressed.

Our design team also use online collaboration apps such as InVision to prototype designs and collect group feedback at key review stages of the project.

The S8080 team are extremely proud of the part we played in delivering this new user focused website, working closely with the digital team at NRW and the technical team at Method4 to deliver our ambitious, original vision in a very tight timescale.

naturalresources.wales

“This was a big team effort, with lots of input from colleagues from different teams and feedback from over 100 external customers that took part in our online survey. We’ve been lucky to work with two fantastic local digital agencies – the brilliant team of designers at S8080 in Swansea and the excellent developers at Method4 in Cardiff.”

Heledd Evans Digital Manager

Apr 20 2017

Sparking innovation

Be the Spark Wales

The Welsh Government needed a web site for a campaign that would bring together people with great ideas and facilitate a movement of entrepreneurship and innovation across Wales.

Nine of Wales’s most prominent business leaders are working with the Welsh Government as part of their ‘Be the Spark’ campaign, to bring together forward thinking people throughout various sectors.

The website needed to meet the expectations of the Welsh Government whilst achieving the goals of the nine panel members. As the web design and digital agency for the project, we worked closely with a leading marketing agency who were tasked with implementing the campaign as a whole.

Whilst the initial phase of the project set out the objectives of the movement, it needed to be implemented with the long-term vision for the project in mind. Ultimately the goal is that the project will organically grow a community and culture of innovation across Wales.

Be the Spark Wales

The initial impact of the site had to engage and inform the audience. A prominently displayed video background combined with a video explainer was used to immediately engage the user and introduce the Be the Spark concept. As one of the first sites to implement the new Wales brand, the new website had to adhere to the brand guidelines whilst at the same time finding its own identity. The overall result is a modern, impactful and engaging site that is in line with the expectations of this user group.

With the longer-term goals of the project in mind, engagement with the site was a critical factor in creating traction for the movement going forward. With a diverse range of user groups from business to academia, it was critical to serve content that was pertinent to each type of user. The strategy of the information architecture was to create a clear user journey for each distinct user group, allowing for relevant information to be served and resulting in increased engagement.

The site was built using Drupal 7 which gave the content editors a stable, scalable and easy to use content management system. The site is fully responsive and CSS3/HTML5 compliant. Using CSS3/HTML5 enabled smooth scaling, colour changing image transitions. Flexible and fast loading carousels contributed to the modern, fluid experience.

S8080 are very proud of how the site came together in such a short time and to such a high standard. We look forward to working on future phases of the project and helping to drive innovation and entrepreneurial culture across Wales.

Mar 23 2017

S8080 launch revamped Wales.com Drupal website

Wales.com

With the recent launch of the exciting new Wales brand, Welsh Government’s Wales.com team wanted to align their website with the clean, confident and outward looking appearance of this new identity.

As well as giving the site a fresh new look, the team wanted to look at other UX and Drupal improvements that would help enhance the user’s experience and re-focus the site.

Wales.com

Although the content on the existing site was sensibly grouped making it easy to navigate, an incredible range and number of articles were hidden away as 3rd level content. A major consideration of the redesign was to surface some of this valuable content at a higher level so it was more immediately visible. This allowed us to present engaging images and articles on the homepage, but meant that we needed to structure the content in a way that still accommodated for the specific audience groups.

Being one of the first sites to utilise the new Wales branding system made it a straightforward task to give the site its clean, fresh appearance. By grouping the content using the brand’s new colour palette, colour based segmentation was used homepage and throughout the site to help the distinct audience groups.

Wales.com

From a technical point of view, the major task was dealing with the amount of content on the existing site. Over 500 pages of content needed to be migrated into the new Drupal structure and styled, without the need for major changes to the mark-up. Our Drupal development team also built a bespoke full browser width multi-tile carousel which works across a range of browsers and devices. This means the site can be enjoyed in its entirety on everything from a desktop PC to an iPhone.

Take a look at the new Wales.com Drupal site here.

Mar 6 2017

New website for the Parliamentary and Health Service Ombudsman (PHSO) goes live

PHSO

S8080 recently launched the new site for the Parliamentary and Health Service Ombudsman, delivered through the G-Cloud framework.

The redesign and development of the site will help people access PHSO services more easily by structuring the content more clearly through a reworking of their IA. The site also contains an interactive tool that allows users to quickly assess whether they are ready to take their complaint to the Ombudsman. This tool, placed on the homepage helps users understand the complaints process and signposts them to the correct information while helping PHSO filter enquiries that are not quite ready for the complaints procedure.

PHSO iPad Pro

The design had to be sensitive to the user’s emotional state, as at the time they first engage with the service they were likely to be unhappy. By presenting the content clearly and showing them the clear path the complaint process takes, they are immediately helped and given them confidence in the service.

During UX and development, the site has undergone extensive usability and accessibility testing with third party specialist testing agencies. The site was user tested under laboratory conditions and the findings of the usability report assisted the organisation in evolving the experience based on user’s needs and wants. Real-world accessibility testing was undertaken under a variety of conditions so the site and content can be accessed by all.

PHSO mobile website

The website was built with the newly released Drupal 8 content management system. This latest version of Drupal offers many benefits over previous versions including performance improvements, an enhanced administration user experience as well as more control and customisation from a development perspective. In addition to these front-end improvements, using the open-source Drupal 8 CMS also assures a more ‘future-proofed’ website and by extension a greater level of security and performance for both users and their data.

The feedback from the organisation and the site’s users has been overwhelming positive. It’s been a pleasure to work with PHSO, who were highly engaged throughout the UX, creative and development phases. Their enthusiasm and subject expertise helped us understand their objectives and assisted in delivering a site that will make a real difference to its users and the organisation.

Take a look at the new Drupal 8 PHSO website here.

Oct 13 2016

S8080 now a Registered Umbraco Partner

infra-blog-large-a

After working with the Umbraco CMS for many years, we are proud to announce that S8080 are now a Registered Umbraco partner. Being a registered Umbraco partner helps us keep to the forefront of the latest Umbraco developments.

Our experienced team of Umbraco developers have delivered many high profile and complex .NET based websites for public sector and private sector clients including the Department of Energy and Climate Change (DECC), HM Cabinet Office, CITB Construction Skills and Ministry of Justice.

Umbraco is one of the most popular Web Content Management Systems on the Microsoft .NET platform. It’s open source, meaning you don’t need to pay licensing costs. It’s also a very powerful and yet easy to learn CMS that is highly extensible.

It’s great to be part of the Umbraco family and we look forward to working with Umbraco over the coming years.

 

Feb 12 2015

How we do agile and lean development projects in our web agency

At S8080 we like to keep things lean and we like to get things done. How exactly do we like to get things done? By sticking to some key principals taken from Prince2 and Agile (why limit yourself to only one project management methodology!)

After the client alignment, UX and creative phase, we’ll have a big kick off session. This ensures that everyone on the team knows the end goal, how it can be achieved and their role in achieving that goal.

User stories and the agile wall

Once all is understood and all questions asked, the team will plan out the project by creating user stories, these are simply cards that contain a specific story, or goal. For example one story may be “As a student, I want to be able to view all books available”. Once all stories have been built up, the team as a whole will estimate how long each story will take to complete.

With all the stories created and work estimated, the team place the cards up onto the Agile wall. Think of the Agile wall as a huge ‘to-do’ list.

As the team work on a story they will pass through several stages from the ‘backlog’ to being ‘accepted / completed’. To ensure this process runs smoothly, the teams will have a quick 5-10 minute stand up in the morning, at these stand ups the team will work though any problems or ‘blockers’ that are stopping them from working.

Iterative approach and sprints

We keep our clients well informed by showcasing our work to date at the end of every iteration / sprint. This is a great opportunity to gather feedback early on in the development process, instead of the big reveal at the end. We couple these showcases with a weekly report, which contains contains a general status, dependencies, risks and any issues.

At the end of each sprint, we will perform a retrospective, this is the opportunity for the team as a whole to suggest how we can make improvements for the next iteration – and usually demolish a pack or two of Welsh cakes.

Because some customers require a fixed scope, time and budget we also provide a Gantt chart, this will contain a detailed list of the functional outputs along with any user testing, security testing, UAT and other dependencies. If there is any additional work to be added to the scope, this is simply dealt with via a change request.

Our key take away points are:

  • Encourage team communication through daily stand ups
  • Encourage team organisation through visible Agile boards
  • Encourage early feedback from the client by introducing end of iteration showcases
  • Encourage team performance with end of iteration retrospectives

Sometimes agencies can get too clogged up in ‘how to do Agile development’ to the letter instead of finding a method that works for them, after all, not all clients, teams and companies are the same.

May 22 2013

Information architecture – content audits and inventories – why we bother and some quick tips

This post is about content audits and inventories, tools we use as a key step in the reshaping of the information architecture and content strategy on any web design project. It has to be said they are an essential but often daunting first step of a big old redesign, restructure or migration…IMAGE of information architecture work shop

Why bother with content analysis, content audit’s and content inventories?

When we redesign or restructure websites the aim is to provide users with better information, user experience and to hit key organisation metrics. To do this we need to know what content there is on the current website, then with some user research we can provide recommendations for gaps, where content may need to be reworked and where we think content can be removed to de-clutter.

It has to be said it is not the task any UX professional looks forward to – but as we work through the site and create a content audit or inventory (typically hundreds or thousands of rows in a spread sheet), we get really under the skin of the website and the content – a crucial step in the UX design process.

The content audit – a sample of the website content not a full inventory

We use the content audit when sampling an existing site in order to inform the UX phase.

The content audit gives a really good feel and flavour for the content of the site, it doesn’t guarantee to have every piece of content logged in a spread sheet – that’s what a full content inventory is for. The content Audit does allow us to understand what is in the existing site so we can reorganise it along with user feedback and the organisation’s objectives.

All of the results are logged in a spread sheet along with annotated images – we typically start on the home page and follow the key links on the page – the key sections of the site. Then for sub sections of the website’s IA we do the same – follow the key links, and then we look at high traffic areas of the web site too.

When we are auditing the content we will be looking at qualitative attributes, like readability, relevance to audience, things that are going to require human or editorial input. We also give a description of the content and we categorise the content – allocating it to themes or genres.

The content inventory – a monster spread sheet

We create a content inventory when we are performing a migration and have to account for every item, the output is a huge spread sheet. The content inventory is a detailed page by page log of all the pages in the site, it helps us to keep track of all of the content and map it to a revised IA, and of course helps us to estimate the amount of effort needed for the migration.

The content inventory is more quantitative than the audit and includes: page title, current URL, H1 tag etc. The content inventory will then evolve into a core part of the web editorial calendar and on-going content strategy by manually adding the content owner, person responsible for migrating and updating the page, review period, when it was published, date it was last edited, ROT status and new Location that we are migrating it to.

For inventories we’ll use crawlers alongside a manual inspection and audit of key pages.

What about content analysis on really large sites – 5,000 pages plus?

We are regularly asked to help on big websites with between 5,000 to 20,000 pages, sometimes XXL websites that exceed 50,000 pages in multiple languages. When we work on larger sites we will typically do an inventory including every page on the site using automatic tools and then layer on top a human audit of the top 2 or 3 levels, plus exceptions, and of course we look in detail at high traffic areas of the site.

Ok that stage of the UX phase was painful… but key

Now we really know what is on the website when layered into the user research (user surveys and card sorting) we can really provide solid recommendations to shape the information architecture – and work through the really fun parts of the user experience process!

If you would like to chat about how S8080 could help improve your web design and user experience, call 01792 485566 and ask for me, Matt Howard, or email, info@s8080.com.

Sep 24 2012

Engaging with audiences

redseal-engaging

We are currently working on several very large website design and build projects for NGO and public sector clients. Our User Experience (UX) team have been travelling the length and breadth of Britain undertaking stakeholder engagement workshops, focus groups and in-depth interview sessions.

These engagement exercises enable us to gather complex requirements to ensure the new websites are designed with the user experience at their heart.
During the design phase, lab based usability testing plays a very important role and allows us to hone the wireframes and creative treatment.

The unique and robust UX processes we have developed have been vital in offering publicly funded organisations real value for money – saving egg-on-face and costly re-dev’s due to websites not performing as well as they could.

And for smaller organisations…

We are now adapting our methods and tools, scaling them to enable us to offer this level of UX service to organisations and businesses of all sizes, so if you would like to take a user centered design approach on your next website project, please get in touch with Matt or myself.

Jul 20 2009

Writing detail pages / information pages

The ‘inverted pyramid style’ of writing and structuring information pages for the web, where the first paragraph summarises the key point of the whole page, is tightly aligned with how users scan and gather information from the web.

In a previous post ‘What are navigation pages / pathway pages‘ I looked at rules of thumb for navigation pages, how to get users to the detailed information quickly.

Now your users have got to the information pages we’ll talk about what to put in them and how to structure them – the ‘inverted pyramid style’, this is relevant for both blog pages and deep content in a site.

What are the user goals on information pages?

  • Scan to check that they got where they thought they were going
  • Scan to see if what they are looking for is on the page
  • Scan to find the key point of the page
  • Possibly read more details to get background information

User research clearly shows users look at the page title, the headings and scan for key words in the text – primarily the first paragraph and then decide if they are going to read the whole page or note.

So how do I write information pages in the ‘inverted pyramid style’

  • Put the key message / main point first – users tend to be selective (and lazy) they will read a few words or a paragraph before deciding if the information is relevant.
  • Sum up the point of the page in a single summary paragraph at the top of the page
  • Then add supporting information, which is ordered relevant to users
  • Finally add history, background, additional links to find our more detail and detailed documents

Why a pyramid?

The pyramid represents the number of users who’ll read the different layers of the page, only a few get to the end – that’s why it’s so important to summarise the key point in the top paragraph of your page.

Who supports the inverted pyramid style?

Web usability gurus such as Jakob Nielson: http://www.useit.com/alertbox/9606.html

Finally you may find these posts useful:

Writing copy for the web:
http://www.s8080blog.com/2006/08/writing-website-copy/

How much do we read online:
http://www.s8080blog.com/2008/12/how-much-do-we-read-online/

F-shaped pattern for reading online:
http://www.s8080blog.com/2009/01/f-shaped-pattern-for-reading-online/

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

May 11 2009

Usability tweaks that have saved money

Pick up any usability book and it will say (rightly so) that considered usability, information architecture and user experience work will save money and get your site performing better whether it’s a Charity Site, NGO information site, E-commerce store or FTSE 100 site. Here’s a couple of usability tweaks, not redesigns, which have had big impacts:

Jared Spool (www.uie.com), usability guru suggested a tweak on Amazon; this added an estimated $2.7 billion to Amazon’s revenue. Jared and the team found that products with more than 20 reviews had a much higher sales conversion rate, so by adding a question ‘was this review helpful to you’ and then tweaking the site to place the most relevant reviews at the top, meaning more conversions – a real big winner for Amazon.

See the full article here: http://www.uie.com/articles/magicbehindamazon

I’m sure you’re frustrated when you have to register to actually buy something on an online store which you probably won’t return to? Here’ another example by Jared Spool (www.uie.com) on a different e-commerce store where a minor tweak increased to site’s annual revenue of $300 million per year!

In a nutshell users would have to login and register after they had filled their shopping cart but before they could actually enter delivery and credit card information to pay for their goods – sound familiar?

Jared and his team found that first time shoppers didn’t want to register – they just wanted to pay for the goods quickly and leave, in fact the users tested really resisted registering. Jared and the team also found that repeat customers didn’t find the process helpful either – with 45% of all customers having multiple registrations. The solution was simple, and one that many sites are now taking, remove the register button before the actual check out but add a message:

You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.

And what about the money?

The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.

See the full article here: http://www.uie.com/articles/three_hund_million_button/

Giving exact ROI figures is always going to be more difficult for non transactional sites, but with Google Analytics we can quickly benchmark and show improvements (using metrics such as reduced bounce rate, increased average time on site, increased page views, increased page visits and higher Google Adwords conversions if you are using them).

I’m always great to that sometimes a minor tweak to the user interface, labelling or say the process of filling in a form can make huge differences to the usability and performance of web sites.

May 7 2009

Really shout the purpose and message of your site

We’ve just got back from some detailed user testing and the importance of getting the home page to answer VERY LOUDLY the user’s immediate question’s “What is this site? What is the purpose of the site? Who is it for? What can I do here” is clearly still so important…

If the purpose of the site is not clear to the user within the first few seconds of landing on the home page then the user often makes up a site purpose in their mind. This distorts their whole experience of the site making it much harder for them to interpret the site, ultimately meaning they will misinterpret something, get frustrated and leave.

When users do “get it”, understand the purpose of the site, they are much much more likely to understand the rest of the site, follow the carefully crafted user journeys and information scents – achieve their goals and have a good experience…

Getting the purpose of the site across

Every element on the home page builds a users understanding of the purpose of the site and what they can do on the site.

That being said when testing with eye tracking we really saw users scan two areas of the page where they expect to find a concise and easy to understand statement of the purpose of the site, these were the ‘tag line / strap line’ – right next to the logo and the ‘welcome blurb’.

By tweaking the text in the tag line and welcome blurb we were able to ensure participants “got it”

  • The tag line

– right next to the Logo / Site ID is one of the most valuable bits of ‘real estate’, when users saw some text visually connected to the Logo / Site ID they knew it was meant to be a description summarising the whole site

  •  The welcome blurb

– this short description of the site, above the fold in an obvious position should be a terse description of the site, try and keep it to less than 30 words, we found this really reinforced the tag line if it echoed the tag line and expanded on it slightly.

 

see: www.wales.com(this wasn’t the site we were testing but is a good example of the principle)

Why have both a tag line and welcome blurb?

Not everyone will use both these elements; if someone is deep linked into the site then there will be no welcome message so the tag line but the tag line next to the logo should give the user a good summary of the purpose of the site. So have both on the home page and use the tag line throughout the site.

In a nutshell – getting the message across

  • Don’t be subtle… don’t take the approach “we don’t need to, it’s obvious”
  • Use a tag line right next to the site’s Logo – and make sure it is easy to understand
  • Use welcome blurb to reinforce the tag line
  • Good tag lines are clear and informative
  • Vague tag lines are bad

If you can test the site on someone who hasn’t been involved in the site’s design asking the question “What do you think the purpose of the site is”, if the participant can give you a credible answer you’ve cracked it – nice work…

….and it helps with search engine optimisation (SEO)

Twitter and Facebook do it

see: www.twitter.com

Of course some sites don’t need to follow these principles – because they are huge global brands: Apple, BBCetc.

See also:

For a really great no nonsense summary of usability read this book: Steve Krug: Don’t Make Me Think – a common sense approach to web usability.

Apr 20 2009

Quick and dirty usability testing – the 5 second tests

A few years back (2005) Christine Perfetti wrote a great article about 5-second tests (http://www.uie.com/articles/five_second_test/), a simple usability testing technique to test that content pages are understandable to users and that the key / priority information is being communicated.

The 5-second test in a nutshell

Most content pages have (or should have) a distinct primary purpose, the 5 second test aims to quickly check that the design makes this primary purpose obvious to a user…

How to do it:

  • Give the user a simple task – e.g. “find out what the email updates include”; “ can you see the property location on a map ”; “ what sizes are available ”
  • Tell the user they will be shown the page for 5 seconds, and ask them to try and remember everything they see for this short period
  • When 5 seconds is up minimise the window and ask them to write down everything they remember about the page
  • When they are done ask them the 2 questions: “ What is the most important information on the page”, and depending on the task “ how would you go about finding what the email updates include ” / “ how would you go about finding where the property is located ” / “ how would you go about finding what sizes are available”

Now analyse the results:

  • Listen to the users initial impressions – this will tell you if the content page is clear and concise, understandable pages allow the user to quickly recall critical content and tell you the main purpose of the page

When is it good to use the 5 second test?

For quick improvements to content pages where users have said the site’s content pages are cluttered or confusing.

SEE: http://www.uie.com/articles/five_second_test/

Apr 15 2009

First 2 Words are critical for scanning lists and headings

Here’s the latest snippet of usability testing from useit.com who tested how well users understand the first 11 characters of web site links & headlines

In a nutshell:

Lists are great for scanning and web copy and therefore used all over web sites (search results, category pages, news lists, blog lists, twitter feeds, table of contents, site maps, bulleted and numbered lists in content etc etc).

The research finds users scan and typically see about 2 words for most list items, approximately 11 characters.

The best links had these characteristics:

  • Plain and simple language
  • Specific terminology was used
  • Follow conventions for naming common features
  • Action oriented
  • Show numbers as numerals in web text to catch the users eye and get more into the headline and links

The worst links had these characteristics:

  • Generic, bland words
  • Made up words or terms were used
  • Start with waffle

 

SEE the full article: http://www.useit.com/alertbox/nanocontent.html

Mar 27 2009

Mega Drop-Downs Work

Here’s some usability research on mega drop-downs which have been appearing on sites (particularly clothing sites and online shops) recently: http://www.useit.com/alertbox/mega-dropdown-menus.html undertaken by useit.com .

So What Are Mega Drop-Downs?

They are those big, chunky, typically 2 column drop-down panels which group navigation options, use typography, icons and tool tips to provide the user with links to content within a section of the site – meaning everything is visible at once with no scrolling.

Mega Drop-Downs vs. Regular Drop-Downs

The bottom line is that regular drop-down menus have many usability problems, but the mega drop-downs from usability studies have overcome the limitations.

Things to Think About When Considering Mega Drop-Downs

  • Speed of the mega drop-downs is critical
  • Grouping of related options
  • Using descriptive labels
  • Labels should be a medium level of granularity – and act as trigger words

Finally, it’s important to test the drop-downs, make sure they don’t obscure other key navigation devices (particularly search) and understand accessibility issues for assertive technologies and mobile devices.

Source: http://www.useit.com/alertbox/mega-dropdown-menus.html

Jan 30 2009

Usability: What is a heuristic evaluation?

The goal of heuristic evaluation is to find usability problems early in the design of a website so that improvements can be made as part of the iterative design process.

Heuristic evaluations are usually conducted by a small set (one to three) of evaluators. The evaluators independently examine a user interface and judge its compliance with a set of usability principles. The result of this analysis is a list of potential usability issues or problems. The usability principles, also referred to as usability heuristics, are taken from published lists. [1]

What is a heuristic?

An example of some high-level heuristics might be:

  • Help users recognize, diagnose, and recover from errors. [2]
  • Design to facilitate recognition rather than recall memory. [2]
  • Enable frequent users to use shortcuts. [3]

Lower-level heuristics may include:

  • Clearly and prominently communicate the purpose and value of the web site on the home page. [4]
  • Provide feedback to let users know where they are within a web site. [4]
  • Make the link text consistent with the title or headings on the destination (i.e. target) page. [4]

What are the advantages of a heuristic review?

The method can provide some quick and relatively inexpensive feedback to designers. Feedback can be obtained early in the design process. Assigning the correct heuristic can help suggest the best corrective measures to designers. [5]

How does it differ from an expert review?

In an expert review, the heuristics are assumed to have been previously learned and internalised by the evaluators. That is to say, evaluators do not use a clear-cut set of heuristics. As a result, the expert review tends to be less formal, and usually there is no requirement to assign a specific heuristic to each potential problem. [6]

Sources

  1. http:www.usability.gov/methods/heuristiceval.html#whatis
  2. Jakob Nielsen, Ten Usability Heuristics: http://www.useit.com/papers/heuristic/heuristic_list.html
  3. Shneiderman’s Rules for Design
  4. Usability.gov, Research-Based Web Design & Usability Guidelines
  5. http://usability.gov/methods/heuristiceval.html#advan
  6. http://usability.gov/methods/heuristiceval.html#how
Jan 26 2009

Usability – some rules, principles and a glossary

I found this nice little summary of some usability rules and principles on the smashingmagazinesite, it also includes a small usability glossary, worth a quick scan.

See: http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/

Jan 20 2009

Say no to CAPS in navigation menus

If you are asked to use CAPS in navigation menus argue hard that you should be using mixed cases – even if it isn’t ‘on brand

The online guidelines are against using all caps in navigation menus, as this reduces legibility & readability by 10%. When mixing cases there is a more varied letterform which is easier to read than than the BOXY SHAPES OF ALL CAPS.

Jan 19 2009

Sign up forms – keep it simple, really simple

In the autumn we did a big IA project for a client and we wanted & needed to make the point that sign up for news forms should be VERY short.

The marketing data vultures always want a form longer than my leg (I’m 6ft 5″ so that’s long), so we went to a load of the bigger brands and showed them how they do it – they don’t get their users to jump through hoops to sign up they make it REALLY simple and fast to fill in a form, typically just getting the user to leave their email address.

Here’s how Nintendo do it:

 

 

 

 

 

 

 

 

 

The sign up form is really short, the button is descriptive and obvious and the opt ins are opt ins…

 

 

 

 

 

 

 

 

 

 

 

 

 

 

and what I really liked about Nintendo was that right next to the fill in form they tell you what you get before you sign up.
Source: http://www.nintendo.co.uk/NOE/en_GB/news/index_newsletter.jsp

So next time your marketing data vultures say they want a 40 field form show them how the bigger brand sites do it, and tell them that if they want to increase the number of subscribers they need to reduce the input fields to the absolute minimum.

Jan 16 2009

Instapaper

Instapaper is a really simple way to save web pages for reading later. They give you a little bookmarklet which you can stick in your browser’s bookmarks bar. Then, if you get to an article/page online that you don’t have to time to read just now, click the bookmark and the page will be added to your Instapaper list. Instapaper stores a link to the web page and also creates an easy-to-read text-only version of the page. This is especially handy for reading on the go, with the help of their iPhone application.

I’d certainly recommend it, and it seems everyone else loves it too.

From a web usability point of view, the site is incredibly easy to use. In particular, I really like the signup form:

 

 

 

 

 

 
You don’t even have to set a password! (Although you can later, once you’ve made the account). The barrier-to-entry here is so low, and it’s so easy to get started. It’s a refreshing change from pages-long signup forms that want your name, address, phone number, height, shoe size, favourite flavour of crisps… and something I think more sites should try and aspire to. As Luke Wroblewski says: Signup Forms Must Die!