W3C's Mobile Web Best Practices Course

Having finished the W3C's online course: An Introduction to Mobile Web Best Practices, I have been reflecting a little over the things I have learnt about the mobile (and not so mobile) web.

One of the tasks was to try out 3 of the sites we often use from a desktop computer using either a mobile phone or an emulator. The aim was to discover what works well and what doesn't. Many major sites have serious issues and many cannot even be accessed or viewed properly.

For the experiment I was using mobile emulators rather than real a mobile, which may have effected the conclusions to some degree. Anyway, below I attach the screenshots with comments.

The sites analyzed were: amazon.co.uk, yahoo.com, guardian.co.uk and tumblr.com. Yahoo.com was the clear winner in terms of usability whereas tumblr.com came last!

Amazon.co.uk
Using the dotMobi Emulator

1. Pages were kept short to avoid endless scrolling, but...

2. there is no visual grouping of the different fields; the question "Do you have an Amazon.co.uk..." looks like it has nothing to do with the email address.

3. What does the bright blue text field mean? Is it disabled or highlighted?

4. The soft key option "More" has nothing to do with what is on screen.


5. It's impossible to know what functionalities and content of the PC version you are going to be able to access until you try.
Although it makes sense to prioritize tasks that can be done on a mobile, it's a little disappointing as a user to not be able to do all the things you would like and are used to doing.









Yahoo.com
I couldn't log in using the dotMobi Emulator, so I switched to the Opera Mini one.

1. The blue highlighting makes it easier to see where the cursor
is.

2. The slightly larger screen and/or smaller text makes it possible to see the whole login form at once.











3. The content was relevant and nicely thought-out.

4. Horizontal scrolling was avoided.

5. In general the yahoo site seemed well-adapted to mobile use.










The Guardian.co.uk
1. Some familiarity with the PC site is useful to get your bearings. If you're looking for something specific, it may be hard to find it from the home page.

2. A lot of content requires you to sign up, though the advantages of doing so are not made clear.

3. The main menu is quite useful to find a section of interest and then browse within that category.

4. Navigating from one column to the next is not the most natural or the easiest way to move around a page.



5. Once zoomed in, the article summaries and headlines are quite easy to read and do not require horizontal scrolling.
















Tumblr.com
The page did not resize to fit the window, making the website extremely difficult if not impossible to use. I had to abandon.















Conclusions:

• Websites designed for desktop computers do not automatically render and function correctly on mobile devices. In many cases it will be necessary to have 2 separate sites or redesign the traditional site for use on mobile devices.
• Excessive vertical scrolling and any horizontal scrolling should be avoided as both are hard work on a mobile.
• Typing should be kept to a minimum as it is also a laborious activity.
  
• Related content should be grouped visually as it would be on a desktop site.
  
• Images should be reduced to a minimum in size and number and more care than ever should be taken to ensure section titles are easy to understand and links are not broken.
• Forward and back navigation make correcting mistakes a lot easier.
• Extensive testing with different mobile devices is needed to make sure content is accessible and the experience satisfying.
• A website optimized for mobile use is likely to be more accessible to users of assistive devices.

It will be quite interesting to see over the next year or so in what ways usability best practices will differ for the mobile web as opposed to the "non-mobile" or PC-based web. I also suspect - or at least hope - that the demand for the mobile web will improve the accessibility of sites in general.

Letter to Blogger

Hey guys!

I like the blogger site, it looks good and it's pretty easy to use. But still, with a few tweaks here and then the accessibility of the blogs created would be much better to everyone's benefit.

One thing that's missing are easy-to-add alt tags from the image upload dialogue box:

>>>An alt tag is a description of the image or its purpose. This way, users of screen readers or those with the images disabled know the function of or the information portrayed by the image.

According to the Authoring Tool Accessibility Guidelines (ATAG), all authoring tools, including blogging websites such as this one for example, should make it easy for the author to create accessible content, this includes prompting for alternative information:

ATAG 1. Checkpoint 3.1

Prompt the author to provide equivalent alternative information (e.g., captions, auditory descriptions, and collated text transcripts for video).

ATAG 2.0 (Draft)

Support the production of accessible content
B.2.1 Prompt and assist the author to create content that conforms to WCAG. [Relative Priority]

Currently we have to edit the HTML by hand.
>>>Click on the edit HTML tab and look for: alt=""
Add your image description between the "", e.g. alt="type short image description here"

Of course, if you are not familiar with accessibility issues, you are unlikely to be motivated enough to take that step, - assuming you have the knowledge required to do so.

Please make it easy for bloggers to create accessible content with an extra "alt tag" field and "What is this?" link in the dialogue box. A couple of examples, e.g. "Blogger logo", "Me blowing out the candles on my ninth birthday" and problem solved.

Blogger, Tumblr, all you other sites out there, please listen, the responsibility is yours!

Read more:
A quick and dirty introduction to accessibility
Introduction to Accessibility from the W3C
Report by Jakob Nielsen: Beyond Alt tags (PDF)

Accessibility, Windows and icons

In the same week that Microsoft announced they are reducing the price of Windows Vista by 40%, I came across this report which takes a look at the differences in the accessibility options of Windows XP and Windows Vista.

The article by Magnifiers.org starts by mentioning a Forrester Research report commissioned by Microsoft in 2003 which found that:

One quarter [of users included in the study] had a visual impairment, nearly the same percentage had dexterity difficulties, and one fifth had hearing problems. [And therefore that] ...nearly two thirds of the survey sample would be likely to benefit from accessibility technology in one way or another. The real eye-opener was that the survey sample consisted entirely of 18- to 64-year-olds.

The good news is this equates to a lot of positive publicity for the need and demand for accessible websites and computer applications.

>>> As a Microsoft Vista user myself, I have to say that I was pleasantly surprised to find so many options available to users. I have tried using them to try to get a better understanding of both the tools available, the advantages they offer and difficulties encountered when using the computer. However, I'll let you read the article for yourselves and come back to my experiments another day.

Peter Verhoeven of Magnifiers.org considered the changes to be a positive move forward and an extension of the previous toolkit.

Peter goes on to mention that one of the most eye-catching changes is that the icon of a wheelchair used to represent accessibility options on Windows XP has been changed to one of a round button with arrows on Windows Vista (see picture).

What I found interesting about this is that the wheelchair icon is still found many sites today, in fact I'd say it's becoming more and more common.

I would think this could be on account of google using it on their gmail sign-up page, as so many people look to google for examples of usable design and best practice.

However,

1. the wheelchair gives a fairly limited perception - to say the least - of the users who need or are more comfortable using accessibility tools.
   The report mentioned above gives evidence of this as all the difficulties and disabilities mentioned do not imply the users were wheelchair bound, and that accessibility needs are varied.
2. The icon may confuse, discourage or even offend users from using that option who could benefit from it.
3. What does it suggest? What tool or feature could it represent?! In the case of the gmail sign-up page, it provides the acoustic version of the captcha. However, if I couldn't make out the captcha or had the images

Conclusions

• It's great that Vista, with so many more accessibility options than Windows XP, has been reduced in price.


• Hopefully the change in perception of the accessibility market resulting from the Forrester Research report and Microsoft's efforts will encourage more people to concentrate more of their resources in that area.


• And finally, let's hope that goes hand in hand with a little more imagination and appropriacy when it comes to designing icons!

Video tour of accessibility

Definitely the best and the only way to learn the importance of accessible websites is to see users using assistive technologies for yourself.

Here is a collection of online videos about assistive technologies which do just that.

With thanks to dotjay's lab for putting this resource together.