User Experience Design

Two children sit in front of a laptop computer. the boy has his arms raised in triumph. The girl points and looks amazed.There are three Universal Principles of User Experience Design according to Christopher Murphy in an Adobe blog. They are: Visual Grammar, Language and Typology, and Narrative Design. Understanding of other principles from psychology, anthropology and economics can be overlaid on these principles. As new technologies are imagined and invented they create problems that have never been solved before. Murphy argues that if you keep the the principles in mind at all times, the solutions stand a better chance of standing the test of time. The article goes on to explain the three principles in more detail. For people who are not involved in ICT some of the ideas and strategies are still relevant to other design disciplines – graphics are used in lots of places.

“As designers working in an ever-changing field, it’s important that we develop an understanding of the timeless design principles that underpin everything we do.” The three principles, “…which should sit at the heart of everything we design and build, are critical and will stand the test of time.”

Facebooktwitterlinkedinmail

7 tips for smart Word doc accessibility

Graphic of Microsoft Word with a cartoon person scratchng their head Your website might be W3C and WCAG compliant for accessibility, but what about the documents you upload? In some organisations operational staff are expected to write material such as fact sheets, promotional flyers, and other documents for uploading to the website. Larger organisations might have an editor or someone in charge of media and communications. But do they all know what is required to make these documents accessible?

Media Access Australia provides Seven Simple Tips for smart Word doc accessibility. While some of the advice looks a bit technical, most of it is fairly basic such as creating Alt-text for images so that a screen reader can identify the picture or graphic. Another good point is not using terms such as “Click here” to go to a link. Instead, embed a hyperlink within the name of the file that is in the text. And of course, avoid jargon. Note that .doc files don’t have the same accessibility features as the newer .docx (Word 2010).

Facebooktwitterlinkedinmail

Accessible Comics

A black graphic style demon sits on a person laying on the ground with the text of We're accessible! The person says Horray.Most people would not think about making a comic accessible for people with a vision impairment. Comics are, after all, very visual. The article from axesslab has two short videos showing the before and after treatment of a comic strip. The best that has been achieved in this area so far is basic alt-texts that are picked up by screen reader. They tend to just say things like “background”. The accessible comic reads well thought out alt-texts which explain what’s happening visually and what’s written in the text. A bit like audio description for documents. The comic is “100 Demon Diaries” and the article was found on the axesslab website, which is a good example of web design – love the large text. 

Facebooktwitterlinkedinmail

Service design done with UD principles

Distored digitised picture of young people sitting in a group.Most people think of universal design as being something for the built environment, but it is much more than that. Service design is an important factor in access and inclusion. There have been major disruptions in how we shop, get take-away food, share our accommodation and our cars. Universal design thinking processes have a major role to play in service design. This is the thinking of Airbnb and other similar platforms. The article in FastCompany lists a few things to think about. Here are the headings:

  1. Let a user do what they set out to do
  2. Be easy to find
  3. Clearly explain its purpose
  4. Set the expectations a user has of it
  5. Be agnostic of organizational structures
  6. Require as few steps as possible to complete a task
  7. Be consistent
  8. Have no dead ends
  9. Be usable by everyone, equally
  10. Work in a way that is familiar
  11. Make it easy to get human assistance
  12. Require no prior knowledge to use

Some of these aspects could be applied in other situations too.

Facebooktwitterlinkedinmail

Open Sesame! Packaging made easy

Exploded view of the package and all its partsIn marketing terms, the packaging is part of the product. The package shape, colour and brand are important in enticing consumers to buy. But all too often we have to get a sharp knife, a pair of scissors and wrestle with the packaging in order to get to the product inside. Microsoft has come up with a nice solution to packaging their Xbox Adaptive Controller – a gamepad for people who might not have use of their limbs. Good thinking – no good having a nicely designed accessible product that you can’t get out of the box! The video below shows the simple but effective design. There is another video on the FastCompany website or see the engadget website. Package designers take note. 

The title of the article is How Microsoft fixed the worst thing about product packaging.

 

Facebooktwitterlinkedinmail

Accessible video, forms, chatbots

A young woman sits at a desk with her laptop open. She has her face covered by her hands and is indicating distressAs the digital age moves ahead we need to make sure we aren’t creating a digital divide between those who are up to date and those who aren’t or can’t be. The canaxess website has three on-line and downloadable fact sheets that provide some of the simplest but effective advice. For example, in Principles of accessible video – don’t set to the video to scroll on opening. In Principles of accessible forms – don’t use an asterisk to indicate a mandatory field – screen readers announce “star”. In Principles of accessible bots – placing in lower right of the screen is difficult for keyboard users. For people who upload information or documents to their website, there are some good tips. For others who know about coding there is really helpful information. There is more information on the canaxess website.  

Facebooktwitterlinkedinmail

Making PDF Documents Accessible

graphic of a page with PDF on it red and whiteWhy is a Word document often preferred by some readers over a PDF document? They are more accessible for more people. Not everyone can see well; can use a mouse, can read English well, can remain focused easily when they read, and not everyone uses assistive technology. And not all PDF documents can be read by screen readers. In a slideshare Tammy Stitz explains some of the issues and solutions. She covers some of the technicalities as well as basics such as colour contrast, reading order and Alternative Text (alt-t). Logical structure, use of headings and placement and attributes of hyperlinks. The slideshare goes on to cover a list of things that need to be checked. Finally you can test the document using PDF Accessibility Checker. There is also such a thing as a PDF Association.  

Facebooktwitterlinkedinmail

Web guidelines don’t cover everything

one hand is holding a smart phone and the other is pointing at the screenA nicely written and easy to read article on the Axess Lab website explains that the WCAG – the Web Content Accessibility Guidelines were only updated to include vision impairments and assistive technologies. But what about hand control? Motor impairments were not included, but this doesn’t mean they should be overlooked. Uusing a smart phone can be very frustrating when bumping to a page that’s not wanted and having to get back again – frustrating for anyone, but more so when it happens all the time. Axess Lab have provided some simple design solutions. See the article for more and for more about WCAG. Axess Lab lives the message and has a really clean site with easy language – a good example for others. Lots of resources here.  

Facebooktwitterlinkedinmail

How to write meaningful alt-text

A laptop computer on a desk showing several pictures.When meeting a deadline to get something published on the web or social media it’s easy to leave out the description of the image in the alt-text box – but should you?. Alt-text is a description of an image that’s shown to people who for some reason can’t see the image. Among others, alt-texts help:

  • people with little or no vision
  • people who turn off images to save data
  • search engines

People with little or no vision are probably the ones that benefit most from alt-texts. They use a screen reader to navigate the web. A screen reader transforms visual information to speech or Braille. If you don’t include alt-text you run the risk of a screen reader trying to convey something like: “publicity_pre_launch_43.0001.jpg” or “cropped_img32_900px.png”. While Facebook has a built in feature to describe images automatically, the descriptions are too general. “Cat indoors” doesn’t say what the cat is doing. It’s all about context and meaning. Find out more from Axess Lab on how to convey context and meaning without writing an essay! Once you get into the habit, it doesn’t take long to do.

Some really useful tips here from Axess Lab – good information for everyone, nicely laid out and easy to read. As is often the case, attention to detail makes for greater accessibility and inclusion for everyone.

Editor’s Note: the alt-text for the picture on this page is, “A laptop computer on a desk showing several pictures.” And I’ve learned that a full stop at the end is important for screen readers. 

Facebooktwitterlinkedinmail

Google spells out accessible, inclusive, usable

A woman stands on a stage with a woman sitting behind her. She is making a presentation to an audienceIt would be good if all designers took their lead from the likes of Apple and Google: inclusion, accessibility and usabilty are about the design process. Apart from clearly explaining how these terms are linked and can be used together, Google’s half hour video also has some tips and tools for designers. It shows how three different users have the same need: a man with a mobility disability (permanent), a boy with a broken arm (temporary) and a woman with an armful of shopping (situational). Individual situations might be different but they all have the same need for accessibility. And people have the same goals they want to achieve regardless of their situation. While this instructional presentation is aimed at an audience interested in designing apps, particularly the second half of the video, the messages in the first half can be applied to other design disciplines. 

Facebooktwitterlinkedinmail