Usability and Accessibility

I’ve been doing a bit of writing lately, trying to introduce user experience concepts to people who don’t deal with this stuff day to day. Thought I’d share a bit. 🙂

don norman's three teapots

Don Norman’s three teapots, from a story on usability and design of everyday objects.

Usability describes how easy a system is for its audience to use and learn. This isn’t restricted to just websites and software – you can consider the usability of everyday objects too, like teapotstelephones and ticket machines – anything someone can interact with towards a specific goal.

On the web, usability is important because it enables users to do what they came for. If users can’t get what they want, they either leave or complain – two things that can end up costing you money.

The terms ‘usability’ and ‘user experience’ are sometimes used interchangeably, but don’t mean the same thing. A site can be usable – ie. easy and functional – but not a delightful experience at all. User experience is primarily concerned with feelings, and while usability is just one aspect, it can have a huge influence over what a person gets out of using a system.

You’ll sometimes hear usability and accessibility discussed together. They’re two different concepts, focusing on different aspects of websites, but they ultimately share the same purpose – to allow any user to get what they came for.

Accessibility refers to how available something is to a wider audience, regardless of location, experience, physical and mental condition, or the type of technology used. It is considered a matter of human rights – much like how anti-discrimination laws require parking spots and wheelchair ramps in the offline world, there are laws for online spaces too.

So you’ll often hear about accessibility in the context of how people with disabilities can get the information they need, but disabilities aren’t limited to physical, learning or neurological conditions – they also include technological ‘disabilities’ like sub-optimal hardware, and slow, unreliable or expensive internet connections. Web accessibility aims to include everyone who uses the internet to perform tasks or acquire information.

Web accessibility is guided by WCAG, a set of internationally recognised guidelines on how to offer text, websites, images, video, audio, documents (eg. PDFs, Word docs), forms and interactive content in the most usable way for as many people as possible.

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, inventor of the World Wide Web.

I did some reading at:

What the hell is a grid system?

grid.png.scaled500

“The Grid System,” they said. And I was confused. #anotherhipsterbuzzword?

We know what a grid is and what it’s for. But it’s a big mental leap from “school exercise book” to “trendy designr tool”. As always, the hype leads you to believe it’s akin to the rapture – some ground-breaking paradigm that will take weeks to master. But, of course, it’s not.

Pictured above is a humble grid (img sauce) – used to make sure the stuff in your web pages are aligned nicely to each other. Just like the ones in school, it’s a series of evenly spaced lines to use as a guide when doing your thing.

Pre-made grid guides are widely available to use as templates in your design environment:

And there’s a buttload of articles and examples for best good practise, nice practise, interesting practise, aesthetic theory and other stuff:

Again like in school, it’s entirely possible to miss the grid or fubar a design completely. This isn’t a foolproof system that will make your work awesome 5eva – just a starting point for getting stuff to line up.

Yeah, that’s really it.

Additive vs Subtractive Colour Systems

Did you know that colours on the computer are different to colours in real life? True facts. The difference is due to dealing with stuff that absorbs/reflects white light vs the colour of the light itself.

cmykrgb.png.scaled500

Subtractive colour applies to stuff like paint, crayons and other substances that absorb certain frequencies of light – thereby subtracting those frequencies from the light you see. For instance, red paint looks red because all the other light frequencies have been absorbed by the paint, leaving only red to be reflected.

Additive colour refers to mixing lights of different colours, aka. adding them together.

Learn more about it at the site I stole the picture from: http://www.worqx.com/color/color_systems.htm

And if you wanna have some fun, go enjoy this (additive) Color Theory flash game.

Device-agnostic, responsive web design

I avoided ‘responsive design’ at first cos it totally sounded like an old thing repackaged.
Now I’ve looked into it more, I can say confidently that yes – it totally is.

If you’ve been webdeving for the last few years – optimizing for different resolutions, building mobile version stylesheets, etc. – you’re already in at ground level.

‘Responsive’ is just the executive floor upstairs where you do less work to achieve the same effect.

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

http://www.html5rocks.com/en/mobile/responsivedesign/

Responsive web stuff essentially works by combining fluid css (eg. percentage widths) with css media queries (“are you a 320px mobile screen or a giant fuckoff BenQ?”) to make a site layout adjust and ‘optimise’ itself automagically in whatever environment. Which means you’re not up all night redoing different versions of things every time a pixel sneezes.

I’m new to this too, so if you find any interesting responsive web things, please feel free to share!