PRP - artifact #6 - user testing videos

Here are two of the user observation videos that I took whilst getting users to complete certain tasks:

1. find out your animal if you were born in 1957
2. now read that animal's specific horoscope
3. tell me who you should avoid
4. what is the current chinese year and tell me a bit about it

--------------

-------------

Results:

• Users were able to read the text at the CSS size of :small;
• The red button placed in the top left corner of the page's content was recognised as the means to exit a page, no doubt in keeping with user's knowledge of Windows and Macs to close a window
• The heart and cross symbols were recognised and interpreted correctly
• People were able to find what they sought after eventually (sometimes people went round in a circle)
• The buttons were adequately sized, with only one users struggling to activate the link due to tapping the screen too quickly (a hardware limitation not the interface/design)

@

PRP - artifact #6 - iPhone & Android run through

After quite a bit of effort trying to resolve tricky CSS tags, particularly for Android renders that concern :active states, the site is now more or less complete.

The iPhone run through can be found here.

The Android run through can be found here.

The Nokia S60 and Opera Mini 5 runthroughs are also available but don't expect to see much of the site.

Unfortuntely they proved to not be competent enough to handle the site. This is a shame as in reality it would mean that the technologies currently in use would have to be reigned back, or certain hacks made to permit functionality. Doesn't sound too dissimilar to the IE browser fixes does it!!

-------------------

Notably, I am really pleased that I managed to get the site to wrap in portrait and landscape. This was achieved through fluid size formats for the main div in which the content is held.

Furthermore, although the iPhone with JQTouch enabled has a landscape specific CSS tag, this doesn't translate to the other devices. The problem I encountered concerned the background image remaining its original width: 320px.

Eventually I overcame this struggle by tiling the background image and rubbing out any part of the image that went off the left and right sides. This means it blends now.

LEFT: Original / RIGHT: Modified version with no content exiting side of image

LANDSCAPE: tiled background that blends

@

Effective TV ad - and fast

When this gets aired I think a lot of people will be willing to give it a go. IE can bid a bit more of its market share goodbye.

Shame that it isn't always quite so fast as demonstrated. Nonetheless, still the fastest out there and hence, my favourite.

@

PRP - artifact #6 - HTML character codes compatibility

Part of the condensing process required to mobilize information and make it easier to consume entails cutting out unnecessary content.

One way in which I have tried to do so is through symbols. Rather than words, you can put across information through image.

Importantly however, the literary sources all emphasised the risk this poses, when realistically, sites can be viewed anywhere in the world.

-------------------

I wished to convey the information is a less space-demanding manner, but also, easier to understand format, on the match-maker page. Users here can find out who their horoscope says they should get on well with, and also who not.

I first considered using an image:

(obviously not as large!)

The problem with this is obviously it would be another component to download. Admittedly it could then be cached and repeated by the browser but still, this was something to bear in mind.
Also, the image would need shrinking, compressing and means the above picture might not be as good a choice as it might become unclear and thereby fail to deliver the message as well as possible.

Secondly I remembered that the ASCII code has smileys ☺, which would work. Happy for like, unhappy for dislike. Problem is, the graphic might not translate well and provide enough detail when being viewed on a mobile device held at arms length etc.

Fortunately, after looking through the following site, I found one also for a heart ♥.
http://www.mistywindow.com/reference/html-characters.htm

----------------------

This seemed a better choice - it wouldn't add to the page load and the clarity/contrast could be achieved by using a black symbol on the white background.

Equally there are numerous options for a negative symbol. I opted for a cross ✖.

On iPhone this worked, on Android it did not.

Eventually, after trying different ones, I found the ballot box like cross to work.

I am happy with this and hope to prove that symbols can be used, if done so in a cognitively sensible manner. Obviously my assertions over hearts and crosses are Western ideas, people in the East might well not, and translating software would not be able to commute the symbols either.

@

PRP - artifact #6 - non-CSS view

The iPhone above demonstrates the site without CSS styling. This goes to show that bare basics still offer some sort of accessibility to the much lesser equipped devices.

Cufon styles the title - this being a decision I made in light of Android being non-compatible (so far) with font-face. I am still considering the use of the logo as an image. This means it will definitely work on Nokia, Blackberry too, but will add to the page load. Admittedly 3k might not be so bad, but the less the better.

-------------

This is the main bug I'm having with this artifact. To make a fully accessible, but rich mobile site means using tricks and tips, in turn meaning increasing data. On the other hand, you can make it really lean, utilising the latest CSS3 to dynamically generate content but at the cost of alienating the older devices.

So far, I'm leaning towards accessibility, but I still have a few ideas to help relieve the growing data packet.

@

PRP - artifact #6 - button hover states on touch screens

I encountered this problem previously and had to implement a quick work around that utilised the phone's :active/:hover states.

This time around I have taken the problem more to hand and tried a number of options to achieve fake hover effects.

-----------

The first one used image sprites as made popular by AListApart.

This however failed due to the CSS. Active states were recognised by iPhone and held, whilst Android needed hover but then found that the hover effect was still activated when you returned to that page.

-----------

Another option I tried was to use CSS directly and apply a large, noticeable area which would appear when the user had touched the button.

Again, this was doable on the iPhone but failed on Android.

----------

The last option I considered after reading advice directly from Apple was to use Javascript. A good heads up was actually Jacqui's portfolio site.

I experienced initial problems when trying to get text masked.

This technique is used so that the site will degrade if viewed by browsers that are text only etc and they will see Back rather than the symbol.

At first the image was sitting alongside the text. Eventually I altered the image's css to include text-align = -4000px.

This has proved the most effective method so far. I'm still trying to fine tune the CSS so that the hover problem in Android is curtailed. So far I am having to double up the :active and :hover tag together in the CSS.

@

PRP - artifact #6 - orientation of device

I'm currently building the site and this time focusing on using fluid sizing so that the page can wrap correctly when the device is positioned in landscape.

JQTouch already provides a .landscape CSS tag to style it any way you wish, but I now learn that the iPad (sans JQTouch) is getting in on the game.

http://www.cloudfour.com/ipad-orientation-css/

Simply use different stylesheets per orientation.

Alternatively, there's this option.

The only downside I can see if that if this is over 3G, it will mean that extra loading is required and therefore a delay is possible.

@