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
No we haven't become part-owners of Chelsea, Manchester United or Watford (much to MD Simon's disappointment), but we are this years shirt sponsors for the under 14 team at Axbridge Saxons in Somerset, who play in the Cheddar Valley and Woodspring Leagues.
With our logo splattered all over their kit, no doubt the team will be inspired to great victories. Although things got off to a shaky start with a 6-2 defeat in the season opener.
The Axbridge Saxons are only part of the community work we have supported in 2016. We've also helped rebuild a sensory garden at Mobberley Pre-School with our friends at Carillion plc, and we continue to raise funds for the Neonatal Dept at St Thomas Hospital in London - a unit for which we've raised over £5000 since 2012.
Created on Tuesday September 20 2016 08:41 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
This is Focus are one of Bristol's longest established and trusted digital studios, trading since 1996. We provide accessible, content managed web sites and bespoke web applications to a wide range of sectors including local government, commercial organisations and charities. Today we are working with Bristol City Council, London Boroughs of Richmond, Kingston and Camden, the NHS, Marks and Spencer, Scottish and Southern Energy and Hartlepool Borough Council amongst many others.
We have an order book full of new projects for 2016 and want to continue our innovation within the local government sector and so we are looking to expand our technical team who are responsible for creating and maintaining our products and systems. We have a number of opportunities for web developers with different levels of experience to join our friendly and enthusiastic company. We are keen to hear from people who might have several years of relevant programming experience including time spent in an agency, or experienced developers who might be looking to move into a supervisory / management role, or people who are looking to start their career in web development and digital.
Whatever your experience you must have a genuine passion for all things digital and a keenness to be part of an expanding and progressive agency who are increasing their market share within local government. We have a casual but professional office environment and you'll have access to the latest spec machines to work on. We run our projects using elements of agile and we are ISO9001:2008 certified.
We are delivering innovative and outstanding digital products and services to our customers; with the user experience and quality of our work at the heart of everything we do. The sort of things our tech team get stuck into include:
- coding up complete projects from specification through to deployment.
- new product design and development.
- maintaining existing sites with updates, upgrades and fixes.
- product design, including our own content management system and development of new / enhanced functionality.
- working with business development teams on quotations and preparation of proposals, some liaison with key clients.
- automated testing and web site optimisation.
Independent of your technical experience we're looking for people with:
- a genuine interest in digital and a desire to join an enthusiastic, experienced team creating great products.
- ongoing learning of new skills, techniques and technologies.
- excellent communication skills and a demonstrable ability to manage your own schedule of work to meet deadlines and priorities.
We are interested in hearing from developers that cover any of these bases; so if you are experienced in a few of them, but have an interest in learning the others, we would be interested in talking to you - we don’t expect you to have experience in all the technologies we list:
- we are exclusively Ruby on Rails for all back-end development.
- we find ourselves doing more and more front-end scripting including Ionic / Angular (for hybrid app development), jQuery, vue.js, and others.
- responsive site build in HTML5, CSS3 and Bootstrap and also some Sass.
We use Git and Gitlab to manage process and version control.
- Servers are Linux, mainly RedHat / CentOS, running Passenger on Apache.
- Development machines are either OSX-based, or Vagrant on Windows.
- Elasticsearch for data searching / filtering.
- CouchDB / PouchDB for data replication / offline applications
Benefits we can offer include:
- generous starting salary dependent on skills and experience with regular salary reviews.
- 23 days holiday, increasing 1 day with each full year of service, additional and extended Christmas and New Year holiday.
- company pension scheme (from 2017).
- based in new offices located in Temple Quay, three minute walk from Temple Meads train station.
- subsidised restaurant on site and other facilities.
- attendance at relevant events and conferences.
- choice of PC / Mac platforms, latest kit.
- some flexible / remote working for the right candidate (for more experienced roles)
- everyone makes a contribution and can make a difference.
If you are interested in finding out more or would like to log your interest with us, then please email us (using this link) in the first instance, with some summary details about your background and level of experience, the sort of role you are looking for and what's important to your working life.
We are likely to be arranging informal Skypes / chats over the phone initially and we are looking to appoint several roles before the summer of 2016.
Agencies - please do not contact us about these or any roles. Please do not ignore this request to not contact us. Please do not cold-call or spam us about these roles, you will be wasting your valuable time.
Created on Thursday April 21 2016 07:50 PM
Time is money for you business folk so let's answer this quickly and efficently: What is accessibility?
It's designing and developing your website so that people with disabilities can perceive, understand, navigate, interact with and contribute to the web. It's providing the same functionality and experience to users with disabilities as those without.
Disabilities come in many forms, so to break it down for you, these are:
Blind or low vision users that are potentially using screen readers, screen magnification or even a braille display.
Deaf or hard of hearing that may require closed or open captions or transcripts for all of the rich, multimedia content that exists such as audio files or video files.
Ambulatory / motor skills
People with difficulties or inability to use a mouse, that may only be using a keyboard to navigate the website. Or possibly even speech to text software.
People with learning disabilities or the inability to remember or focus on large amounts of information. They may rely on thoughtful layout. They may also be using an array of the previously mentioned technologies.
Web content needs to be made available to the senses, sight, hearing and/or touch. Get accessibility right and it can better your business by:
- Improving your brand reputation
- Helping to meet the needs of a constantly evolving market
- Increasing Search Engine Optimisation (SEO)
- Improving use across mobile devices and tablets
- Reducing your litigation risks
The most obvious financial benefit to building accessible websites and web apps comes from the increased market, the more people you can connect with through your website, the more of your content is being consumed. Resulting in more clients, customers, subscribers, and those seeking your services.
Also, who doesn't like to save money? Well that's what web accessibility may do for you too. Some companies have reported noticeable cost savings in the form of lower maintenance costs, a reduced requirement to provide web alternatives, and even in avoiding expensive legal fees and fines.
Financial benefits are of course a driver to make your site accessible but more importantly, we should all be working towards making the web a hospitable place for everyone, whatever their abilities.
Created on Friday April 15 2016 09:15 AM
When Tim Berners-Lee invented the world wide web, he intended it to be an open platform for society to connect, improve communication and build knowledge. It was a way to provide everyone with vast amounts of information, not just some or a select privileged few. It is said that building accessibility was his vision for bettering the globe.
If you want to stay in Tim's good books, you might want to avoid these incredibly common accessibility mistakes:
1. Alt text for images
Images are often not properly marked up with alternative text for those who can't see images, or separated so that only the relevant images are relayed to the user, or conveyed.
2. Keyboard Accessibility
Users can find themselves 'trapped' inside of a page's content and be prevented from interacting unless they're using a mouse.
3. Dynamic Content Focus
Content appears based on a users action without any indication to those who can't see it. This could be form errors or a date picker: Equally frustrating for those who can see it but can't use it.
4. Focus indicators
No knowledge of where a user is on the page when they're only using a keyboard. Making it very difficult to navigate the site.
5. Data tables
Tables that have corresponding column and row heading associations that cannot be deciphered with ease.
6. Poor heading structures
Undetermined list content where it's conveyed like a list but not structured like one.
7. Colour cues
Using colour alone to convey a part of the page, for example 'For further information select the red button below'. Those with a colour deficiency are going to struggle.
Missing captions from instructional or informative web experiences.
9. Skip to content
Someone who is unable to use a mouse is forced to repeat their steps if there is no skip to content option. This would be extremely tedious on pages containing unchanging content such as a content heavy main navigation.
10. Page titles
It's a small but very important element that is the very first thing users hear on a page. It indicates what the user is about to discover. Without it, users don't know what to expect.
Get accessibility right and it can even better your business. We'll tell you how in our next blog - so watch this space!
Created on Tuesday March 22 2016 01:27 PM
It's that time of year again where I give up everything I consider to be fun food: crisps, chocolate, sweets and more.
So when I push down the red velvet seat to watch Deadpool on the big screen, without stifling my laughter with popcorn, the experience feels somewhat incomplete. Equally a rendition of Happy Birthday has a much flatter tone when I know I won't be getting cake at the end of it. The moral of the story here isn't 'don't be greedy' (wise words though!) I am pointing out the fact that I didn't involve everything I needed to, to make the experience a success. I denied myself of what I felt was the ultimate experience.
If we as web professionals were to try to achieve web accessibility with either design or development, our users would suffer the same disappointment, well, worse in fact. These aspects are complementary. We need to consider both design and development in order for accessibility to succeed. The only way it will is if you make sure you’ve got accessibility taken care of as part of your process.
We follow a design and development cycle and hopefully we can integrate accessibility into several different phases: content planning, wireframing, visual design, development and so on. Your process may differ but what should remain the same is your goal to prevent accessibility issues in the first place rather than trying to fix them at a later stage.
Many concentrate mainly on just one aspect, either design or development. For accessibility to really work though, the two must go hand in hand. A flawed design coded perfectly is just as useless as a brilliant design coded poorly.
Accessibility is the responsibility of the developers and the designers. If you can find a team that work closely together and understand each other, the way we here at focus do, then that's the best start you could possibly have.
Yes, a lot of accessibility is totally development. People seem to believe that accessibility is something that is created programmatically, mostly in the domain of the web developer. They're close. There is indeed a lot that needs to be done programmatically to ensure that what you create is accessible to people with disabilities. But you can’t rely on programmatic accessibility alone. Yes it's what we need to provide for most screen reader users. But what about those with low-vision? They rely on the visual aspects of a design to be able to make sense of it and perceive the interface as intended. And there are cognitive difficulties to take in to consideration as well as language barriers. These need the visual aspects of a design to speak to them in a voice that they can connect with. There is a lot more to it than just programmatic accessibility.
And that’s where I come in, as the designer. Accessibility is super important in the design phase of a project. We can usually predict which areas will be a problem just by looking at wireframes (the 'skeleton' of the design layout). We look at the layouts, how design elements will harmonise together, hierarchy of information and all sorts like that. This provides us with insight into what is likely going to be a challenge for people with disabilities.
Accessibility issues should be pointed out and addressed as early as possible in the design process. The longer you wait, the more costly it will be to change or fix later.
Created on Friday February 26 2016 12:54 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
Making websites accessible for people with disabilities is an integral part of high quality websites (in some cases, it's a legal requirement!).
As a designer at Focus, that's a big responsibility. It's easy to get overwhelmed by all the things to consider when designing for accessibility. I'm an active member of the web accessibility community in Bristol and often attend presentations that can get very technical and propel me far from the safety of my design knowledge. It's at this point that I call on a skill I've had my whole life: empathy. An important thing to remember is that accessibility is about understanding people and the barriers that they face.
Many of the barriers people with disabilities are faced with, also effect people using mobile devices when interacting with web content. Some examples of this include the fact that mobile phone users will struggle if a website's navigation requires the use of a mouse. Similarly, desktop computer users with a motor disability will have a hard time using a website if they can't use a mouse.
Some shared experiences are comparable to temporary disability; If you need to use your mobile to access a website when you're at a concert, the noise that surrounds you likely means you are experiencing the website similar to how a deaf person would. Equally you may struggle reading small text as those with low vision do with most text. The iPhone is less than 10% of a typical desktop screen. 'Fat fingers' denying you all accuracy could equate to difficulties faced by those with hand tremors. A 40 pixel finger is big on a small target! Mobile is disabling for everyone.
There are guidelines to help you keep accessibility in mind, such as the BBC's mobile accessibility guidelines http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile and of course Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/
Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your website.
So next time you wonder whether a design feature is accessible and immediately rely on tools such as a colour contrast checker, first consider disabilities of all levels and the struggles faced by others and maybe even yourself . Surely I'm not the only one who's complained of 'fat fingers'?
Created on Thursday December 24 2015 10:24 AM
- September 2016 (2)
- May 2016 (2)
- April 2016 (2)
- March 2016 (1)
- February 2016 (1)
- January 2016 (1)
- December 2015 (4)
- November 2015 (2)
- October 2015 (4)
- September 2015 (1)
- August 2015 (2)
- July 2015 (1)
- June 2015 (1)
- April 2015 (3)
- March 2015 (3)
- February 2015 (3)
- January 2015 (1)
- December 2014 (4)
- October 2014 (3)
Bristol: 0117 949 8008