Senior citizens' first iPad encounter

Last week I had the opportunity to witness an elderly couple try out the iPad for the first time. They each had some limited experience of using email and web browsing on a slow old PC. They are a little scared of computers on the whole. One of them has impaired vision, unable to see a whole screen at once and what can be seen is somewhat blurred.

Before this began I was anticipating that the iPad's screen size was going to be a problem and that it would be too fiddly for some not-so-dexterous hands. I also expected that the on-screen keyboard would prove awkward and we may have to resort to a full size external keyboard for typing emails etc. What transpired came a bit of a surprise.

I gave them almost no instruction other that to say what the device might be used for.

First impressions
Both subjects immediately remarked on how clear the screen was. They were rather nervous of touching it to begin with, worried that they might press something wrong and break it. Indeed they were not sure where to press at all. Once shown the email and web icons however, they soon got the hang of navigating with a tap of a finger. Some confusion was caused when not every tap was accepted but they got more accurate and confident with their taps after some minutes.

Playing
Once they got into the mindset that they they weren't going to break it they transitioned from helpless "battling" to confident "playing".
Interestingly the more relaxed approach also lead to both subjects picking up the iPad with their other hand. Prior to this evolution they had dared not pick it up. This seemed to help with their confidence and feeling of control.

Accidental drags
Some difficulties continued to arise from accidental taps and drags. Particularly drags. Some taps became drags because of lack of dexterity or other parts of the hand touching the screen. Again, this improved with practice and the realisation that you can't rest your hand on the screen!

Scrolling the wrong way
One curious expectation that the subjects had was the direction of vertical scrolling when content extended below the visible area of the screen. They found it odd that the content scrolled up in order to move down it. The rest of us take the scrolling direction for granted and never think to question it.

Feedback
After the session the subjects were generally pleased with the iPad. Both agreed it was the easiest computery thing they had used.

They made a couple of intriguing points:

• They loved the way iPad's single button returned them to the main menu. They saw it as a way to escape from trouble. To "get me out of here". It made them feel safe.

• The on-screen keyboard turned out to be much favoured over a separate keyboard because they did not have to re-focus their eyes to look at it. It was definitely a feature that made the device more accessible for them.

One last experiment...
Out of interest I let the couple loose on a MacBook after using the iPad. It was described as "ok" but both subjects found they disliked having to locate and move a little pointer around the screen now that they were used to point-and-tap.

DDDSouthWest 2010 jQuery AJAX slides and demos

Here we are DDDSW folks, my slides and demos.

DDDSW jQuery AJAX Demos all zipped up

DDDSW jQuery AJAX Slides (AKA Agenda! ;o) all zipped up

A great crowd. All up for a laugh so thank your for your enthusiastic feedback etc!
@GeorgeAdamson

DDDScotland jQuery slides and demos

You lot asked for the slides and demos so here they are.

Many thanks to those who attended my jQuery session at DDDScotland, and for the lovely feedback and mentions. Glad you enjoyed it. (Apologies for the two who did not find it "structured" enough! ;o)

• jQuery intro demos all zipped up
• jQuery intro slides in pdf all zipped up

Looking forward to speaking about AJAX with jQuery at DDDSouthWest on 5th June 2010

Cheers,
George

New Twitter "lists"

It seems that Twitter has started offering a new "lists" feature to a limited number of users. Playing with my lists today I think they could be useful for organising followers into related groups. Not sure how helpful the current implementation will be for organising large numbers of followers but what they've done so far is nice.

There's some more info on a twitter blog.

Merb "select" list form field causes error on create or save new

A little note for Merb enthusiasts...

If Merb throws this message when you try to submit a new item from a form:
undefined method `new_record?' for "":String"

then it could be because you have a <%= select :propertyName ... %> element and you've used the property name just as you would with text_field etc. Try using the table name instead, such as :property_name_id.

Measure raw image dimensions using jQuery

In a recent project I needed to be able to display the original dimensions of a bunch of images pulled from other servers. Using JavaScript to measure image width and height is fairly straightforward (as long as you don't measure the dimensions applied through CSS by mistake!). I bundled the functionality into a little jQuery plugin. Might be useful for someone.

To use it just call .imgSize(callback) on a jQuery array of images.
Provide it with a callback function as a parameter. The callback will receive the dimensions as its first parameter in the the form of an object hash of { width, height, fileSize }
(I included fileSize as a bonus, though it practice it can only be measured in Internet Explorer. It will be zero in other browsers.)

For example:

jQuery("IMG").imgSize(function(size){
 alert(size.width + "x" + size.height + "px " + size.fileSize + " bytes");
});

So why not just return the width and height right away instead of requiring a callback function? In order to measure image dimensions without reading the style values or affecting the display of the page we have to load a hidden dummy image and measure that instead. Images load asynchronously so the best we can do is let the script carry on running while we wait for the dummy image to load. When it loads we measure it's dimensions and trigger the callback function.

(By the way, Mozilla and Chrome provide properties called .naturalHeight and .naturalWidth on an image element.)

Here's the plugin: (Apologies for ugly formatting. My fault for using Blogger I suppose!)

// Measure the dimensions of all images in the current jQuery array of elements:
// Optional: Specify deep=true to also measure dimensions of all images within the array of elements.
// Required: Provide a callback to receive the measurements. (This is necessary because images are loaded asynchronously)
// The callback will be triggered for every IMG in the jQuery array that has a "src" attribute.
// The callback is passed 2 params:
// - The first param is an object of {width,height,fileSize}.
// - The second param is the temporary IMG element that was used for measuring. (It gets destroyed after callback)
// Inside the callback you can use "this" to refer to the IMG element that was in the original jQuery array. 
// Note that fileSize can only be measured in IE. This value will be 0 in browsers that doe not support IMG.fileSize.
jQuery.fn.imgSize = function(deep,callback){

 callback = callback || deep;
 var $images = this.filter("IMG[src]");
 if(deep) $images.add( this.find("IMG[src]") );

 $images.each(function(){

  var origImg = this;
  var url = $(origImg).attr("src");

  $("<img>").load(function(){
   var $dummy = $(this), size = { width:$dummy.width(), height:$dummy.height(), fileSize:0 };
   try{ size.fileSize = parseInt($dummy.attr("fileSize")) || 0 }catch(e){};
   jQuery.isFunction(callback) && callback.apply( origImg, [size,this] );
   $dummy.remove();
  })
  // To be on the safe side, apply inline styles to prevent any css styles affecting our measurements:
  // (We use a try-catch workaround for IE7 because it raises errors when we try to set maxWidth/maxHeight)
  .css({ display:"none", width:"auto", height:"auto", minWidth:"auto", minHeight:"auto" })
  .each(function(){ try{ $(this).css({ maxWidth:"auto", maxHeight:"auto" }) }catch(e){}; })
  .addClass("imgSize-temp-img")
  .appendTo(document.body)    // The width/height would be zero if img is not added to DOM.
  .attr({ src:url });

 });

 return this;
}

Yay! UXLondon next week

Very much looking forward to UXLondon next week. Some great speakers and a spot of networking. (Provides a nice break from building BBC web sites too!)
See you there...?!