MA Web Design + Content Planning materials for applied art for the web • major project

peace sign in Ukrainian colours, blue + yellow
a11y + ux illustration, showing map, peaople and devices

Design for UX & Accessibility

As web workers, be that designers or developers, it is our job to create not only engaging user experiences but also to ensure an all inclusive design and setup. Making sure our content is presented in the most accessible and easy-to-use way will liberate our user to use the web freely and without hinderance, a benefit to all.

please note: the video is merely the recorded version of the visual part of presentation, no audio included.

view PDF

Venn a11y + ux

Effective inclusive UX design:

  • focus on your users. study & learn from their behaviour.
    listen & observe | review | iterate | repeat
  • consistency is key. establish your approach and stick to it, across all aspects:
    content | copy | design | interaction
  • provide alternatives to all media. content | copy | design | interaction
  • offer a positive experience. quality of content | tone of language | delight to use/access

Six thinking hats

  • lateral thinking method
  • tool for decision making and project planning
  • originally designed for helping business managers
  • this method can be applied to many fields/projects
6 thinking hats illustration

highly recommended watching!

Eric's talk is one of the most moving and insightful - one which everyone working in web should watch. This very personal experience, shared by one of the brightest minds in our industry, painfully illustrates how our designs and builds will fail in real life scenarios unless we consider our users mindfully.

watch Designing for crisis on vimeo

photo of Eric Meyer, delivering talk at AnEventApart

An Event Apart: video description

It’s easy to design for the idealized user, someone who’s smart, calm, and informed. It’s less easy, and thus more important, to design for a more realistic user: still smart, but harried and uncertain. The best designs handle both with care. But how many designs can help a user who is completely in the dark and barely capable of rational thought?

In this passionate presentation captured live at An Event Apart Austin, AEA cofounder Eric A. Meyer draws on his personal and professional experience to explore examples of crisis-mitigating design successes and failures. In the process, he illustrates ways that you can *and should* consider the needs of users teetering on the edge of panic. Helping them will make your designs more relevant and useful for *all* your users.

Eric Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML, CSS, and web standards.

Author of “Eric Meyer on CSS” and “More Eric Meyer on CSS” (New Riders), “Cascading Style Sheets: The Definitive Guide” (O’Reilly & Associates), “CSS2.0 Programmer’s Reference” (Osborne/McGraw-Hill), and “CSS Web Site Design” (Peachpit) as well as numerous articles for the O’Reilly Network, Web Techniques, Web Review, and A List Apart, Eric also created the classic CSS Browser Compatibility Charts (a.k.a. “The Mastergrid”) and coordinated the authoring and creation of the W3C’s first official CSS Test Suite.

In 2006, Eric was inducted into the International Academy of Digital Arts and Sciences for “international recognition on the topics of HTML and CSS” and helping to “inform excellence and efficiency on the Web.” quoting An Event Apart via vimeo

A Book Apart: Design for real life

Equally highly recommended and insightful is the book, a sequel to this talk and an excellent must-read.

photo of Eric Meyer, book cover of design for life. vimeo link: vimeo.com/148927676

#a11y | accessibility

To follow the ideal principle of the #oneweb means that websites need to be accessible: accessible inclusively to all people, accessible in turn to their chosen devices and accessible on connections of varying speeds.

I'd highly recommend to check out the brilliant The a11y Project for plenty of brilliant articles, checklists and resources.

#oneweb

The web’s ideal principle of universal access to content, promoted by Tim Berners-Lee, Jeremy Keith and many others.

This is for everyone. #oneweb

Tim Berners-Lee 2012
illustration: accessibility means to always consider all abilities. physical, sensory, cognitive - design for inclusion

physical

Ensure access to functions via keyboard - test by using tab key to navigate site

illustration: Ensure access to functions via keyboard/switches

sensory

Provide captions/transcripts for visual/audio content - provide text alternatives for images

illustration: provide alternatives to all media

cognitive

Add alternative versions of content - use visuals/icons and text in combination

illustration: add alternative versions of content

user-centred design

  • user experience builds on the foundation of accessible design, adding more depth
  • consideration of the complexities of people and their current situations
  • research and user testing to guide UX design
  • good UX will mean a pleasurable experience, meeting the needs of target group
  • recurring cycle of work for best results: test - review - iterate

related reading

a quick word on tools

No tool can replace a real person, a real human! The listed tools are useful additions and I'd recommend you use them. Testing for aspects of performance is part of accessibility too and for such details, these tools can deliver good insights.

Testing for accessibility, however, is not possible without getting people involved and testing the scenario, user journey or task in real life.

some tool options

Note: most user testing apps will require you to set up an account ~ and extended test will cost. Again, these are not recommendations just a short list of widely popular services.

To understand how someone with accessibility needs views a website, I'd highly recommend that you try this out yourself. Put your mouse away and try to manage with only keyboard navigation. Set up a screenreader and try out its function to see how well you'd manage to navigate the webpage. I found this to be a humbling experiment which highlighted the necessity of good accessibility of content.

Smashing Magazine published a brilliant article, titled How A Screen Reader User Accesses The Web: A Smashing Video – in which Bruce Lawson introduces a webinar with Léonie Watson. It shows recordings of Léonie using a screenreader to access the web – an excellent demo with insights not only from a blind user but one with special expertise in dev and accessibility. Make sure to watch in its entirety!

How A Screen Reader User Surfs The Web

While putting together the notes for this session, I was reminded that my favourite app for user testing is now retired. Silverback, by clearleft, was a mac-only app which recorded users via webcam and screencast. In-app tools allowed for study and annotations during review.

It was a friendly and easy-to-use, easy-to-explain tool which I highly recommended to all web students. In the past, I loved introducing this app, both for its own merit and in addition, for the beautiful work on the logo by Jon Hicks.

logo design, Jon Hicks

The reminder of Silverback app's demise prompted me to return to Jon site ~ and made me think of another logo I miss. Mailchimp started off with this lovely icon and has since evolved (and lost much of that original charm and personality in my view). When we talked about Jon's work during our icon design session the other week, I did not get the time to show you these.
Do check out the posts to read about Jon's process and have a look at his newer work while you're there ;)

read journal entry: Silverback

© Jon Hicks, 2008

read journal entry: Mailchimp

© Jon Hicks, 2008

A big thank you to Jon for his permission to feature these loops here :)