Recommended Agency

text controls: text only | A A A

Annette is at #winwithoutpitching today with @Bristol_Media and @blairenns, will be an interesting afternoon, posted about 1 month ago

RSS feed icon What is RSS?

blog.

articles tagged with: usability


Displaying articles 1 - 10 of 16 in total

The 3 U's in designing for the user

The 3 U's in designing for the user

You could be forgiven for thinking usability, user experience (UX) and user centred deisgn (UCD) are all pretty much the same thing. Kind of like Ant & Dec: You're not sure which is which but understanding the difference matters very little. Well you'd be wrong! (In terms of design I mean - not whether or not Dec is the shortest).

Understanding the user is an absolute requisite for successful design. Here's a very simple breakdown of the 3 U's you may have heard being thrown around:

Usability is how easily a user can do what they set out to do.

User Experience is a combination of usability and and how much the user will enjoy themselves along the way.

User Centred Design is a case of keeping usability and user experience in mind from the very start of the design process.

There are various requirements of a succcessful product, these include:

Learnability - it should be intuitive so that there's essentially nothing to learn.

Efficiency - it should serve a purpose or assist in achieving a goal.

Memorability - it should encourage visitors to return. Popularity grows through word of mouth, people talk about what they remember.

Errors - it should have a low error rate. Evaluate and test the design, especially on the intended user.

So next time you tune in to 'I'm a celebrity get me out of here' you might not be able to tell which one stands on the left but at least you can confidently create a user focused product that will get people talking!

Jordana Jeffrey
Jordana

Created on Tuesday June 20 2017 10:05 AM


Tags: website ux ucd usability


Comments [0]








7 ways to maximise online donations

7 ways to maximise online donations

When I was asked to write an article about UX for the Fundraiser – the publication from Charity Choice providing practical advice and insight to the third sector – I wondered how on earth I was going to take such a huge topic turn it into something bite size.

UX and UI are expansive subjects, so rather than try to cram them into a side of A4, I decided instead to compile a list that would hopefully get the readers to try out some simple UX testing methods for themselves. 

For charities, encouraging visitors to donate and to keep donating is paramount, and ultimately good UX = more conversions which means more donations. Good UX really is as important for charities as it is for ecommerce.

The list is by no means exhaustive, but hopefully it will inspire some readers from the third sector to think more about UX, to utalise its potential and to try out some simple UX tests for themselves.

7 ways to maximise online donations

Jenny Corfield
Jenny

Created on Thursday September 22 2016 01:23 PM


Tags: website charity technology web-design userexperience ux usability


Comments [0]








Accessible Colours and Web Design

Accessible Colours and Web Design

For some it's driving fast cars, for others it's a risky bungee jump, for me I get plenty of excitement from discovering handy tools like this accessible colour palette generator! colorsafe.co
Stay with me, I'll get a life right after I tell you why this is worth shouting about...

Colour is super important in web design. It's not only used to make the website visually appealing but also to increase it's usability and accessibility.

What we must remember is not to assign too much meaning to colour in web design as this is of no use to users who cannot view the colour as you intend them to. That’s why when designing a website you should ensure that the information conveyed with colour is also provided through another means.

We must also ensure there is sufficient color contrast for all content. The goal is to make sure that all visual designs meet the minimum color-contrast ratio for normal and large text on a background. There is a lot to consider but this colour palette generator does much of the thinking for you. It is based on WCAG Guidelines of text and background contrast ratios.

You simply set up the canvas and text by entering a background color and the styling of your text. Then accessible text colours are generated with WCAG Guidelines recommended contrast ratios. Ready for you to simply pick your favourite!

 

Jordana Jeffrey
Jordana

Created on Tuesday October 20 2015 10:48 AM


Tags: web-design usability web onlinetool


Comments [0]








Screenreader Compatibility Tips

Screenreader Compatibility Tips

I watch as person after person pulls furiously on a door handle before giving it a shove, flying through the doorway much to their surprise and quickly patting down their disheveled attire.
(I'm allowed to laugh as it makes me feel better about doing it myself shortly before, only much less gracefully).
The problem here? The door handle was giving the wrong message. What looked like a handle was indeed a hinge.
My point is, the need for accessibility is everywhere and it is as important in web design as it is in architecture.

When designing for web we must consider various factors such as colour contrast and text size but many forget to consider screenreader users (Screen readers are audio interfaces that convert text into synthesised speech so that users can listen to the content). Luckily there are a few simple things that can be done in order to improve usability for screenreader users, and ultimately all web users...

Logical linearization
Unlike sighted web users who can scan a web page and pull out at random what they consider to be the important information. Screen reader users tend to listen to a page from start to finish, top to bottom, left to right. So it is best to have the important parts towards the top of the page.

Descriptive page title
The first thing a screen reader user hears is the page title. It is imperative that this gives users a clear idea of what to expect from that page. Obviously this benefits everyone as anyone can use the page title to orientate themselves and confirm they are where they want to be on the website.

Descriptive headings
One of the most important usability features for screen reader users is on-page headings. The page structure can then be more easily understood. Although text on the page may appear to be a heading for sighted users, screen readers read through the HTML code so it must be labelled as a heading within that. The screen reader will then announce it as such.

Descriptive link text
Screen reader users can call up a list of on-page links and browse a web page that way. They simply activate links of interest to them. Therefore non-descriptive link text like ‘click here’ is meaningless out of context so avoid it like the plague!

Lists
Using lists within the HTML code is super useful as screen readers announce the number of items in each list before reading them out. This way screenreader users have a better idea of what to expect when hearing a list of items, for example site navigation.
A bit like the way an answer machine tells you how many messages you have received rather than just reeling them off one after the other. You feel more prepared for what you're about to listen to. The use of lists (using the <li> tag) is a behind-the-scenes change to the code that shouldn't really affect what the website looks like.


The great thing about these screenreader friendly tips is that each and every one of them will improve overall user experience.
We as humans like to know what to expect and are comfortable with what feels familiar. It's always good to bear this in mind when designing for web and there is no reason this should jeopardise your creativity. Maybe give the web equivalent of dodgy door handles a miss though, just a thought!

Jordana Jeffrey
Jordana

Created on Wednesday August 26 2015 03:06 PM


Tags: website technology web-development accessibility communication usability screenreader


Comments [0]








Making Information Accessible

Making Information Accessible

"We are drowning in information but starved for knowledge" - know who said that? You have two guesses... if neither of them were author John Naisbitt, you don't win a prize (well you don't win one either way but it feels good to be right doesn't it?)

Accessible Communications Consultant, Katie Grant, kicked off her engaging talk with that very quote. Katie quite rightly pointed out that information often comes at us faster than we can make sense of it, regardless of disability. So if you're the one dishing out all that know-how, you might want to consider whether it is meaning as much to your audience as it is to you. You should be thinking about:

Language - keep it clear and simple.
Tone of voice - is it appropriate to your audience and your organisation?
Message - should be clear and targeted.
Structure - have a clear intro and overview of the subject.
Content - keep complex data separate.
Readability - pitch at the correct reading level.

Web accessibility should focus on people with all types of disabilities - visual, auditory, physical, speech, cognitive, and neurological disabilities - including older people with age-related impairments.
Potential audience groups who may benefit from an accessible website also include:

- people with long term health conditions.
- those for whom English is not their first language.
- people with low literacy levels / poor social access.
- people with neurodiversity conditions such as autism.

Some say what has caused a lack of awareness is a lack of empathy. Hearing from those who require accessible websites is so valuable and there was a lady present who kindly shared her needs and preferences with us. She has a few conditions including dyslexia and favours websites with accessibility bars that have the option to change the background colour (you can see this on many sites designed by Focus i.e. www.afclocaloffer.org.uk)

Focus work with many charities and enjoy enriching the lives of others through our technology but there are benefits to be had by all when accessibility is considered seriously. Legal & General spent a lot of time and money making their website accessible. In doing so they experienced many side benefits: visitor numbers almost doubled, maintenance costs halved and there was a huge increase in traffic to the site. Even though it's a few years old their case study is an inspiring read and you can view their case study online.

The message is simple. It's a pretty good idea to make accessibility the aim behind communicating any information. Whatever your reasons are for doing so, the benefits are countless.

Jordana Jeffrey
Jordana

Created on Monday June 01 2015 12:18 PM


Tags: website charity technology userexperience usability accessibility


Comments [0]








It's play time!

It's play time!

The BIG launch! The new-look "Go Places to Play" is here - an online park finder that makes it easy for you and your family to enjoy fun and exciting play opportunities in and around Bristol.

We've recently redesigned goplacestoplay.org.uk for Bristol City Council so that it not only looks better than before but it works better. "Go Places to Play" is now even more intelligent so that you can find parks and play areas far more quickly and efficiently. We understand that you live busy lives and need information at your fingertips - wherever you may be. The site is now responsive so it is easy to use on smartphones, tablets and laptops. This means you can quickly  find your nearest park when you're out and about. You can click on map points to get further information about the park or site you are interested in, or you can use the postcode search to bring up sites in your area.

The online calendar means you can search for local events that suit your requirements and interests. You'll be provided with results if you search using a relevant keyword, or you can find something more specific using the handy advanced search which allows you to search by event type, location and distance from your chosen postcode.

There are also some great ideas for play featuring tips and suggestions from our Play friends and partners - a particularly good resource for the school holidays. Plus, our brand new FAQs section answers many of the common questions we get asked.

As before the option is there to register as an event organiser which means you can upload your own events to feature on the events calendar. Once approved you will see them published.

People like to feel as though they are a part of a website and the 'community' that use it. Interaction is key so if you find something you like on Go Places to Play you can "Share with a friend". Regular news updates also ensure that everybody is on top of all that's going on. It's a site that seems to have people talking, if you want to be a part of the excitement please like the Go Places to Play Facebook page here: https://www.facebook.com/goplacestoplaybristol or better still, go and check out the site to see for yourself!




Sneak preview just for you!

Sneak preview just for you!

We can't contain our excitement, we simply have to share with you what's bubbling away in the studio!

Improvements are being made to our current online park finder "Go Places To Play" - a website that forms a part of Bristol City Council's campaign to encourage children to play outdoors.

We don't want to give the game away but here are a few snippets of what to expect.

Mobile friendly - We've added more functionality that is based on your current location i.e. your closest park is. It is also a mobile first build; usually mobile sites are designed as a result of a desktop design that is scaled down. Not this site. We've started with the mobile design and scaled up! The build is responsive; meaning you get an optimised view on desktop, tablet and mobile.

User friendly - Much easier to navigate the site. You're guided through it and it is clear to see all it can do and how it can benefit you.

Age appeal - Adults often view the site with their children in mind. The site is much less childlike and now appeals to a wider age range so that it is great for parents to navigate, but still has a family, child-related feel.

Search to suit you - We want people to be able to find personalised information based on where they are and what they like to do rather than just general information.

We've put some serious effort in to not only making the site look good but in making it a useful tool that you feel you can go to and rely on. It's not yet a finished product but we can't wait until it is and you'll be the first to know about it!

If you would like to see the online park finder as it is now, please go to http://goplacestoplay.org.uk/




Accessibility and the Olympics

Accessibility and the Olympics

World Usability Day 2013 at the M Shed this year had a host of great talks from usability professionals and enthusiasts from around the world. One talk really caught my attention and that was "BBC Olympics: An Accessibility Study" by Alistair Duggin the lead front-end developer at Money Advice Service. The talk looked back on the BBC Olympics website and the huge task taken on by the BBC to cover the Olympics in the digital age They wanted to make 24 HD live streams, over 2500 hours worth of video coverage as well as huge amounts of stats and data available world wide to a massive audience across mobile, tablet, PC and connected TV.

By the end of the project there had been 37 million UK browses, 66% of the adult population had visited the website as well as having 57 million global browses with 111 million video requests across all available platforms. These numbers were not the only difficulties of the project, the team at the BBC had an immovable deadline of a huge profile event and were working with teams of mixed knowledge in terms of accessibility. On top of this for added pressure the Australian olympics had been sued for being inaccessible.

So the team had one page for each of the 10,000 athletes, 205 countries, 36 sports, 304 medal winning events and 30 venues that they had to make usable and accessible for people with a range of visual, auditory, motor and cognitive abilities. This is where I was really surprised by the talk, I was expecting a full range of teams running huge usability studies and endless testing to make sure everything was perfect deploying more resources than is possible in a normal sized project. In reality the methodology and practices followed by Alistair and his team were reusable on any scale and in fact should be used on all web projects. It is not spending a lot of time changing designs and code to make it accessible, if you have accessibility in the back of your head when creating websites then you should only have to do it one time.

They had a library of common html widgets and reusable components that could be dropped into any page promoting the reusability and consistency of their code. Then for content, html, css and javascript they had a few simple rules to help create usable websites. For content having alt text for images, captions for tables and full text for abbreviations as well as having content in a logical order. Using appropriate html elements, not duplicating links as well as coding forms and tables to the correct standards helped create markup that was accessible for users using screen readers or navigating with a keyboard. For css having a non javascript layout, setting style on focus as well as hover, not using !important and checking for colour contrast were all very important. Feature detection in javascript as well as making sure the javascript generated valid html and there were no keyboard traps that stopped a user being able to navigate past certain points with a keyboard were all employed throughout the pages.

These are all the kind of coding practices that we can all follow on our websites but not necessarily something we check as often as how a page looks in IE7 or displays on a mobile device. I learned a lot from Alistair's talk, especially coming from the view point of a front end developer it showed me how important accessibility is for users, we should not be thinking about making it better for a minority of users but instead creating universal accessibility. He also talked about having a website that is one hundred percent accessible as not being realistic and that we need to prioritise in real world projects but that accessibility does not have to compromise design or ingenuity in websites.

Steve Fenn
Steve

Created on Monday December 09 2013 10:00 AM


Tags: accessibility conference userexperience ux usability


Comments [0]








User Experience Lecture

User Experience Lecture

Recently myself and another previous student of UWE returned to the User Experience module of the new Digital Media degree to talk in one of the first lectures of the year. We were asked by Praminda and Paul, lecturers at UWE we were previously students for, to do an introduction to User Experience and to try and talk about what we had learned in our first years as graduates. My partner in crime was Richard Foggin who is working at True Digital, we sat down before hand to try and work out what we would have wanted to learn about User Experience in our introductory lectures and what insights we could give as students who had been there before.

It was a hard decision to either talk about primarily what they would need as students of that module to pass, or what they would need as young professionals going out into digital and web work. User experience is such a vital part of our industry that it is almost certainly going to be part of their job in some way no matter what specialisation the students decide to go into. Rich and I decided that we would give an introduction to ourselves, the subject and what it meant to us but that we would need to get practical in order to give the students a real taste for UX work.

We decided to run the students through a practical that Rich and I had taken part in during a talk at UX Bristol by John Waterworth. We had the students design mini user interviews picking subjects they had an interest in and then took it in turns to be the interviewer and facilitator / note-taker. This was to give the students a feeling for all of the skills required to gain insights and collect requirements from user interviews. I think at the end of this process we had probably learned more than the students, I had not fully understood how hard it would be to run a workshop, keep everyone on track and making sure they got the most out of their time there.

We finished off our talk a bit exhausted with our collection of cheat-sheet / hacks for student life, little techniques and lessons we wanted to pass back as previous students to try and make it easier being a student! It was definitely a real experience going back to UWE, brushing up on our public speaking skills and really surprising just how much information you have that you want to share, it isn't until you start planning your time you realise the extent of the user experience subject. I would definitely recommend to any other professionals to go back to their universities and offer their services, it is a lot of fun and could be a good excuse to meet up with old university friends to work on something together.

Steve Fenn
Steve

Created on Friday October 25 2013 01:19 PM


Tags: userexperience ux usability youngpeople


Comments [0]








Web Analytics 101 - Bounce Rate

Web Analytics 101 - Bounce Rate

At Focus we are believers in keeping things simple - so over the course of a few blog articles I'm going to try and apply that approach to an area of digital marketing that can by it's nature get a bit complex - that being web site analytics.

The information you can gain from software such as Google Analytics (other analytics platforms are available!) can overwhelm - so we're going to pick a few more of the important KPIs and have a bit more of a delve and look at them - including their meaning and usefulness. (For the purposes of these articles I'm going to be referring to Google Analytics - or GA - as it's the most widely used analytics software and we happen to use it at Focus).

We start off with Bounce Rate - generally defined as the percentage of visitors who came to a page on your web site, viewed a single page, and then left - either to go to another site or by closing the browser. Bounce Rate (BR) is an important KPI that people get very excited about - especially when it's high, as this indicates lots of people are hitting your site and leaving straight away.

But is that a bad thing? It might not be - we'll explain more later.

Firstly, back to Google Analytics - which provides an overall bounce rate as part of it's 'Content' overview. But remember this will be for the whole web site, and for that reason, the overall BR isn't the most useful of stats. Instead it's best to focus on bounce rates for individual sections and pages - which is available in the list of pages seen at:
Content -> Site Content -> Pages.

To improve the accuracy of this list we also need to remove statistical anomolies that can skew the numbers (general good practice if you remember back to GCSE Maths). To do this, apply an Advanced Filter in Google Analytics to exclude these outliers - we tend to only include pages where the bounce rate is more than 10% and less than 95%.

Graphic showing Advanced Filters in Google Analytics

(See above 'advanced' surrounded in red - clicking this will allow you to apply a filter, of the type shown in green.)

Google Analytics also allows you to view bounce rates for different visitor types - by adding a Secondary Dimension. For example: if we add a Secondary Dimension of 'Visitor Type' we obtain seperate bounce rates for New and Returning visitors - this can give an insight into how engaging your web site is to different audiences.

There are other Secondary Dimensions - such as Keyword, Campaign and Landing Page - that are derived from your Google AdWord marketing activities. When applied correctly we now obtain bounce rates for individual pay per click (PPC) campaigns running from your AdWords account - this data is gold dust when looking at how successful paid-for campaigns have been (and where changes needs to be made).

So once you've got your bounce rate, how do you know if it's any good? When should the alarm bells start ringing? Whilst there are some general rules (see later), you need to bear in mind that bounce rates will vary between sites and use cases. At Focus we've built quite a few online directories for local authorities - and organisations listed in these directories tend to have high search engine rankings for specific key terms (such as their names). In this case, a user might want some contact information for an organisation - and having done a keyword search in an engine such as Google, they see the details they need in our Directory and leave the site having the information they require. In this instance - a high bounce rate, but the site has fulfilled the needs of the user.

eCommerce sites are a different story - generally we want users to convert, that is, land on a product page, move deeper into the site, use the basket and checkout. So high bounce rates on eCommerce sites are of poor value to the business and these pages need to be reviewed as priority.

Remember what was said before - look at the bounce rates of individual sections of your site rather than the site as a whole. If you are a charity, an overall bounce rate of 65% for the whole site will probably cause panic. What's more important though is to look at bounce rates for sections such as the donation facility - if 65% of users are leaving that section after one page, there's clearly some usability issues that need looking at. Taking each section at a time - with the most important sections addressed first - will help provide structure and reassurance, rather than trying to tackle the whole picture head-on.

Back to those rules then, and these are to be taken as general guides only:

  • bounce rates of 60% or over: take a snapshot, review your content as soon as you can and start planning some changes.
  • bounce rates of 25% to 60%: are generally the average, these should make up the majority of your report.
  • bounce rates below 25%: great, but don't ignore them. Make sure these pages are working really hard as clearly they are engaging the user, so ensure you include promotional news, or offers, or target them to really drive that 'call to action' and web site conversion.

Where you feel that your bounce rate is a bit scary, you'll want to consider making some changes:

  • review your content, is it out of date or innaccurate, does it engage the user? See our article on writing good content for the web, which is aimed at charities but has guidelines for all.
  • look at web site usability, is it obvious enough to the user where to go next? Does the site layout and navigation inhibit users from getting further into your site, and completing the desired 'call to action'? This is particularly crucial for landing pages used as part of PPC campaigns - literally money can be being poured away through poor design.
  • check how quickly your pages load, nothing whacks up the bounce rate like a slow loading web site.

It's also worth noting that Google Analytics allows you to check the bounce rate from mobile devices. If you've got a high bounce rate from iPhones, Androids etc the key reason could be users are hitting your 'non mobile' web site. With more and more people using their phones and tablets to view the web, having a site that's 'mobile-usable' is more important than ever.

So for starters, that's a whole lot of bouncing. We hope you've found the information above interesting and useful (well, about as interesting as stats can be....)

If you've got any questions then do get in touch, and we'll be publishing more web analytics blogs in the near future, so keep an eye out for more hints, tips and advice.

Simon Newing
Simon

Created on Thursday June 27 2013 08:25 AM


Tags: google ux usability analytics101


Comments [0]