articles tagged with: website
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.
Created on Thursday September 22 2016 01:23 PM
Negotiators of the European Parliament, the Council and the Commission have just this month agreed on the first EU-wide rules to make the websites and mobile apps of public sector bodies more accessible.
In the world of web, these adjustments are about introducing steps to make a website or service accessible for people with visual impairments, manual dexterity issues or learning difficulties.
The internet has become a key way of accessing and providing information and services, it is now crucial we ensure absolutely everybody can do so, regardless of ability. Accessibility enables people with disabilities to understand, navigate, interact with and contribute to websites and apps.
Statistics tell us that about 80 million people in the EU are affected by a disability. This figure is expected to increase to 120 million by 2020 as the EU population ages.
The Directive will cover public sector bodies' websites and mobile apps, this could be administrations, courts and police departments or public hospitals, universities and libraries. They will be accessible for all citizens - in particular the blind, hard of hearing, deaf, and those with low vision and functional disabilities.
Vice-President for the Digital Single Market, Andrus Ansip, is understandably all for the agreement and said: "Tonight's agreement is an important step towards a Digital Single Market, which is about removing barriers so that all Europeans can get the best from the digital world."
The Commissioner for the Digital Economy and Society, Günther H. Oettinger, was equally enthusiastic: "It is not acceptable that millions of European citizens are left behind in the digital society. The agreement that we have just reached will ensure that everyone has the same opportunity to enjoy the benefits of the internet and mobile apps."
The following is the agreed text of the Directive:
- covers websites and mobile apps of public sector bodies with a limited number of exceptions (e.g. broadcasters, livestreaming).
- refers to the standards to make websites and mobile apps more accessible. For example, such standards foresee that there should be a text for images or that websites can be browsed without a mouse which can be difficult to use for some people with disabilities.
- requires regular monitoring and reporting of public sector websites and mobile apps by Member States. These reports have to be communicated to the Commission and to be made public. The Directive on web accessibility along with the European Accessibility Act proposed in December 2015 (press release) which covers a much wider number of products and services, are both part of the efforts of the Commission to help people with disabilities to participate fully in society.
The text will now have to be formally approved by the European Parliament and the Council. After that it will be published in the Official Journal and will officially enter into force. Member States will have 21 months to transpose the text into their national legislation.
So many people avoid using the vast amount of support and opportunities available to them online, all because of unnecessary barriers they are faced with. These can be avoided. If you want to lead in improving accessibility, we can help you with that, a good place to start is to get in touch with us.
Created on Wednesday May 25 2016 10:33 AM
Last year bad User Experience (UX) reportedly cost LInkedIn over £9 million.
Attention to detail is imperative when it comes to producing great design with a smooth UX. But with so much involved in the design process, there is a risk of things going unnoticed.
It doesn't take much to damage the users experience so here are some things worth checking before a design is signed off and deemed good to go...
Don't rely on colour to convery a purpose, heierarchy or content
We are big on accessibility here at focus so to us producing a website that is accessible is not considered a nice-to-have but a must-have. People with visual disabilities for example colour blindness, would not be able to use your site effectively if you were to rely on colour, they would therefore become an excluded demographic.
Test it: colorfilter.wickline.org will let you put a color filter on top of your webpage and test it for different kinds of color blindnesses.
Avoid / reduce repetitive actions where possible
An example of a repetitive action is filling in a form that asks for your address more than once, you may have seen this being tackled with a tickbox you can select to say your billing adddress is the same as your shipping address. If you're not careful, users will grow tired and search for an alternative option (like a competitor!) where they can achieve their goals better and faster.
Test it: Make sure there is a way of facilitating repetitive actions such as an option to use previously entered information.
Accessing help does not get in the way of progress
Users ask for help when they're stuck so of course It is important for help to be an extension of what they are already doing, they should be able to easily return to that once they have received the help they need.
Test it: Put yourself in the place of the user, consider where they will ask for help, and see whether their progress are interrupted.
Users have to be able to find their way around and achieve their goals no matter what page they find themselves on.
Test it: Make sure that navigation is reachable on every page and that your pathways are as intuitive as possible.
Foreground and background are sufficiently contrasted
This is especially important for people with visual disabilities. It also improves a user’s understanding. Clear distinction aids with navigation, draws more attention to buttons and increases usability.
Test it: You could capture the screen, apply a gaussian blur to a Radius of around 3px to 5px then see if you can easily tell what’s in the foreground and what’s in the background. Then alter accordingly.
Don't use much more than two distinct font families
Although this isn’t a strict rule it is best for accessibility. For usability and visual purposes, sticking to two simplifies your typographic hierarchy, which improves comprehension.
Test it: Simply check that your design isn’t mixing more than two type families. You should also make sure that the ones you choose are properly matched, you can find out more on this.
Text fonts are no smaller than 12 pixels
Again, it’s not a fixed rule but generally speaking readability is severely reduced for sizes below 12 pixels. Ideally a minimum of 14px is said to be better for accessibility.
Test it: Pretty obvious I suppose, check all of your content to ensure all fonts used are at least 12px.
Reserve uppercase words for labels, headers, or acronyms
Limiting the use of uppercase words is less visually heavy and easier for the user to digest. It should be used specifically for emphasis or very restricted cases such as acronyms.
Test it: A thorough content check to make sure that uppercase words are kept to a minimum and only used where necessary.
You're stil wondering what LinkedIn did so wrong aren't you? A settlement in California resulted in LinkedIn dishing out over £9 million to compensate users who were manipulated by the site’s deceptive UX into handing over their address books, which LinkedIn then used to spam their contacts with connection requests.
See, bad UX can cost you!
Created on Monday May 09 2016 02:14 PM
Whenever I stop by to see my parents, I am reminded of how far I've come (and I don't mean geographically). There is a framed school project piece of mine that hangs proudly on their wall. I remember feeling that was well deserved at the time. Now though, I'm convinced it gets worse with each visit but even that doesn't date as quickly as websites can. It's frightening how fast web design moves, but with that comes a continuos flow of new and exciting trends and techniques to take on.
There are many factors that can change in web design; technology, user behaviour and other creative fields that can influence the web such as graphic design and fashion.
- Responsive Web Design (RWD)
It is so popular right now and will no doubt continue to be throughout the year. It serves the same HTML code to all devices and uses CSS to alter how the page appears on the device. It is also what Google recommends to build mobile-friendly websites. Many of the trend predictions featured in this list are most suited to RWD.
- Increase in UI Patterns
We've seen a lot of similar looking websites lately which many blame on RWD and the rise of WordPress. Take the hamburger menu for example, it has been criticised for being everywhere but this is also why it is so easily recognised by users. UI patterns are there to guide users through the experience, making it easy to navigate and the hamburger menu does just that. I think we'll see designers working hard this year to be the one to come up with the next popular UI pattern. This will no doubt result in a lot of visually inspiring attempts.
- Memorable Typography
We are no longer limited to a few system fonts. Services like Google Fonts and Typekit make custom fonts readily available and easy to use on the web. Expect adventurous experimentation with type to make a strong statement in design.
- Material Design: dramatic alternative to Flat Design
Like flat design except it uses shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user. Material Design creates clean, modernistic design that focuses on UX.
- Flat Design with a Twist
It has been around for a while now but it looks set to stay for 2016 with a few differences to keep things interesting. A little like material design long shadows will bring more depth to flat designs. Vibrant colour schemes. Simple typography and ghost buttons will allow for functionality without distracting from the UX. Minimalism will reduce the number of elements and create a raw, tidy UI.
- HD Visual Assets
HD background images and videos on websites could well grow even stronger in 2016 due to increased bandwidth, wide browser support of HTML5 video, and ways to serve high resolution graphical assets selectively to devices with retina screens.
- Striking Custom Iconography and Illustrations
.jpg and .png files can result in a pixelated look on retina displays, which spoils the aesthetics of a website. Now though, there is wider browser support for Scalable Vector Graphics (SVG) and easily implemented icon fonts. The outcome? more web designs showcasing colourful custom illustrations SVG icons that remain crisp and engaging at any screen resolution.
Thinking of it now, my 'work of art' has gradually been demoted from hallway masterpiece to bathroom backdrop. Perhaps even a mother's love isn't strong enough to ignore the fact that design moves on quickly and unless you don't mind your hard work being tucked away, it's best to keep up!
Created on Tuesday January 12 2016 11:02 AM
Monday 19th October saw Simon and Annette travel north to join Hartlepool Borough Council for the launch of Hartlepool Now, a new web site created by the team at Focus that helps the local authority meet new information duties from The Care Act 2014.
Taking place at Hartlepool College of Further Education, the launch event was a great success. Attendees had a number of workshops to choose from including a run through of the web site itself, a demonstration of the new online Equipment Finder and a chance to see The Ricochet Project from local charity Incontrolable, which lends tablets to disabled people in the community and provides basic training in using them.
Following the workshops, Hartlepool Now was officially launched by council Chief Executive Gill Alexander, who stated that the new web site "helped Hartlepool set a new standard for publishing clear information and advice".
Our branded cupcakes went down a treat as well.
A massive thanks to the project team at Hartlepool for inviting us to the launch, it was great to be part of the event and hear the positive feedback the web site is already receiving.
Created on Friday October 23 2015 11:36 AM
Rife Guide is a dynamic online platform where young people can keep up to date with what’s happening in Bristol and get involved in a wide range of activities. Part of Bristol City Council's pioneering online virtual youth service and created by Focus in partnership with Watershed, Rife Guide is managed by a team of talented young journalists, content creators and editors who know what’s important to Bristol’s young people.
Rife Guide includes a calendar of events and activities in Bristol as well as information and advice on important issues such as housing, drugs and sexual health. What’s more, visitors can create a login that will give them access to a portal of content that is appropriate to them - events and services are suited to their age and preferences and then pushed to them every time they log in, without the need to search.
As well as being a hub for young people, Rife Guide is also a platform where local businesses, organisations and providers can promote their services - they too can create a login and upload the details of their organisation or event which is then moderated by the Rife team before being published to the website.
Annette Ryske of Focus says the involvement of young people at all stages of the project has been crucial in it's success:
"Consultation was key. From the very beginning, we worked closely with Watershed on a series of workshops and engagement sessions with both service providers and target users. This involved visiting local schools, youth groups, clubs and children in local authority care. Our work with providers led the development of systems for publishing their information quickly and efficiently."
"Working with young people showed us that the majority of their internet use was via mobile, they were using social media to share content and the content itself should consist of less text and be rich in images and video."
Now that Rife Guide is live, ongoing engagement with young people is more important than ever, and we are already planning new content and features based on feedback from users.
Created on Friday October 23 2015 09:39 AM
Guesswork can only get you so far before it becomes a problem. My 'genius' theory of 'If in doubt choose B' served me well in my multiple choice French exam. It proved less useful in my oral exam when I told my teacher I keep a large duck in my kitchen every other day.
Yet it's come to light that many people with disabilities are navigating websites with the help of good guesswork, such as assuming the 'Contact' button will be the last link in the navigation bar.
A website should be intuitive to anybody who chooses to use it. Nobody should have to guess their way around and risk missing much of it's content. Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web.
Alastair Campbell oversees both usability and development aspects at Nomense, a company that believes, just as we at focus do, that everybody has the right to access inclusive design, regardless of ability. He spoke with us about the importance of considering accessibility right from the start of the design process. We want to share a few of those things with you.
The main content is often not the first thing on a web page. Keyboard and screen reader users tend to have to navigate a long list of links, sub-lists, corporate icons and more before ever arriving at the main content. So these users will thank you for enabling them to bypass or 'skip' over repetitive web page content. You can press the tab key on the Nomensa site for an example of a skip link http://www.nomensa.com/
You should be able to achieve everything with keyboard controls alone.
• tab key to progress through links and controls
• shift-tab to reverse
• enter to follow links
• space to select form controls (e.g. tick boxes)
• cntl-f / cmd-f to find a link or text
On many sites, the closer you zoom in, the more of the site's content is lost off-screen. Not with the Microsoft website: https://www.microsoft.com/en-gb/ this responsive site behaves as if you are viewing it on a smaller device each time you zoom, so eventually you are looking at a mobile view with all content still easily accessible.
Make sure the results of user input happens close to where they perform the action. To experience the difficulties that incur if you don't, zoom in on this website https://www.overclockers.co.uk/index.php and add something to the basket. When you do, you're left wondering as nothing appears to change, unless of course you navigate all the way to the top right of the screen and view your basket. Do the same on amazon and an 'Added to Basket' notice immediately appears within view. Yes, that ab-cruncher I'll never use is mine all mine!
Alistair, photographed above, says there are 4 questions to ask yourself:
• Can you use it with a keyboard?
• Can you see it when zoomed?
• Does it provide appropriate information to
• Is it easy to understand?
Yes, it's a lot to take in and on the surface it may seem that this will limit your creativity. If anything, these guidelines will push these limits as you discover visually pleasing designs that improve the online experience for a wider set of users. And that's a fact. Even in French.
Created on Friday October 16 2015 11:42 AM
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...
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.
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!
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!
Created on Wednesday August 26 2015 03:06 PM
"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.
Created on Monday June 01 2015 12:18 PM
Back in May 2010, one of our most popular blog articles took a quick look at the web sites of the leading four political parties just before election night. It turned out that Labour had the worst performing web site in terms of code validation - and look how that turned out for them.
So clearly, the true test for how an election will end up is a test of their web site against W3C standards (obviously). Five years later, and it's time to do it all again before we all go off to the polling station.
Here's how the seven (seven?!) main party web sites fared:
Does it pass Google's Mobile Friendly test: Yes.
Validation errors: 7 errors and 3 warnings, that's a worse performance than 2010 for the Tories.
2. Liberal Democrats.
Does it pass Google's Mobile Friendly test: Yes.
3. Labour Party.
Does it pass Google's Mobile Friendly test: Yes.
Validation errors: 16 errors and 11 warnings. Much better than 2010's stats of 286 errors and 45 warnings. But web site usability not helped greatly by the instrusive splash / signup page on entry.
4. Scottish National Party
Does it pass Google's Mobile Friendly test: No! Our first fail.
Validation errors: 3 errors. But lots of points lost for all those tablet and mobile users.
5. Plaid Cymru
Does it pass Google's Mobile Friendly test: No! Disappointing again.
Validation errors: It gets worse, the W3C validator is unable to validate Plaid Cymru's web site due to an encoding issue. Doesn't bode well for May 7th.
Does it pass Google's Mobile Friendly test: Yes.
Validation errors: Oh dear Nigel. 115 errors and 33 warnings.
7. Green Party
Does it pass Google's Mobile Friendly test: Yes!
Validation errors: 4 errors and 1 warnings, not bad at all.
So it's quite clear - on the 8th May we'll have a Green Party majority, and UKIP will be in the pub fixing those validation errors. But some time on the naughty step please for the SNP and Plaid Cymru for those mobile-unfriendly web sites. *
* yes, we know there are other parties, but this is a bit of fun and in no way endorses any political party or policy - apart from having a responsive web site.
Created on Friday April 24 2015 02:57 PM
Bristol: 0117 949 8008