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.

A terrible user experience part 1

A true story.

The following took place in Madrid last week. The protagonist is a friend of mine and her story inspired the following cartoon.






A little summary in case you can't see the images or understand my cartoons!

1. Melissa goes to get some money out of a cash point in broad daylight on a busy street in the centre of town.
2. Two 10 year-old girls approach and one starts messing with the cash machine.
3. Melissa cancels the transaction, grabs her card and leaves.
4. Meanwhile the children continue to bang on the machine.
   
5. Melissa later discovers 300 euros were withdrawn from her account at the time of the incident.
6. She reports the whole thing to the police who not only know who the girls are, but have also heard the same story on numerous occasions(!!). They attribute the problem to a known fault with the cash machine and say they are powerless to do anything due to the children's age and on account of it not being a robbery per se!! Apparently banging on the screen or keypad in a certain way, - even after a transaction has been cancelled and the card removed, - can make the ATM spit out 300 euros. This money is then deducted from the last account to use the cash machine.
7. The bank is debating whether they will return her money or not, but will take a leisurely 1 to 2 months to decide!

Side note.
A lot of the banks in Spain have their cash machines in the entrance hall to the bank as opposed to facing out onto the street itself, (which is standard in the UK). When the bank is closed, you can only get in to get money out by swiping your bank card. Once inside, not only are you on camera, but you also lock the door behind you to stop someone else coming in.

I was always quite puzzled by the logic to this feeling somewhat claustrophobic while being locked in and quite vulnerable to attack when leaving the bank; thinking that people could be waiting just outside to relieve me of my cash.

So, maybe this a chicken and egg situation:
Have robbery techniques developed to take advantage of the vulnerability of the exposed cash points (as opposed to the "security" of enclosed ones)?
Or, have cash points traditionally been kept inside the bank to protect their customers from this type of attack?
And, most importantly, to what point does this affect the assignment of responsibility and accountability for secure, reliable and safe cash point operations?

Beautiful design of practical objects

...that's not to say that they're cheap!

Smashing Magazine got together a list of 25 objects (laptop cases, speaker systems among others) currently on the market, which combine beauty, style, elegance, in some cases a sense of fun.

Their mysterious product appeal suggests they offer an unmatched user experience. Can't guarantee all that just from the photos of course, but check out the mouthwatering pics anyway.

Among my favourites: attractive oilcloth lunch bags (always a sucker for anything which can be reused and reduces waste); the extremely handy drink selector mug, (see picture) - great for remembering everyone's coffee requests in the office, - and the extremely useful flexible dual screen system (the BTC Dual Monitor 150 DS).

Enjoy!