Blog Archives

eLearning interactions the implications of mobile devices

mobile site mockups

One of our current projects is to revisit a highly interactive website we developed in 2009 to produce a version of this site which is appropriate for users of smart phones and tablets. As we know embedding interaction into our web content, when done well, can significantly enhance the user’s learning experience. However it seems obvious that the sort of interactions we have developed over the years for desktop users of our websites do not translate well onto mobile devices for several reasons:

  1. Small screen display – restricts the amount of information, images etc that can be viewed at once limiting the connections that the user can make between different supporting content.
  2. Limitations of touch – while using touch on mobile and tablets provides an appealing tactile experience, it is clumsy and sometimes slow in comparison with using a mouse of a desktop.
  3. Context - the circumstances in which a user is likely to visit a site using a mobile of tablet device are different to that in which a desktop is used. They are more likely to be surrounded by distractions in their environment, they are likely to be spending less time on the site and are unlikely to be viewing the site or even page content comprehensively.

In addition, Flash for years the default mechanism for implementing the majority of complex e-learning interactivity is not ever going to be available to most users of mobile and tablets and so needs to be substituted by standards compliant solutions (javascript, HTML5 et al).

Our initial approach to this project was to apply a responsive web design template on the website, whereby CSS is used to dynamically adapt the site layout to screen size used by the viewer. It became immediately apparent that retrofitting such a template on an existing site with predetermined HTML structures and CSS was very difficult and in this case wasn’t going to be viable. In addition such an approach was not going to be sufficient to adapt the existing interactive elements of the site. This led us to the decision to use an entirely different template to display the site content to mobile users (i.e. a separate mobile site) with design and navigation concepts drawn from best practice in web-app design. It is reassuring to see that our own interpretation is supported by extensive usability testing (see the Useit mobile site versus full site usability study).

Following this decision we have been building mock ups of various interactive elements of the current site usingjQuery Mobile for testing purposes (see screenshots above). This was based on the premise that in order for these interactions to be appropriate to mobile users and to a lesser extent tablet users they needed to make allowances for the restricted display space by removing less important content and interactivity, and provide large, clear elements for the remaining user interactions. Key elements for achieving this have been identified as buttonscollapsible sets (accordions) and various list views offered by this development framework.

At this point these mock-ups are still being developed and we are working towards a summer scheduled release of the finished mobile site. Between now and then we are anticipating learning a great deal from student testing of these mock ups.


Dragster on Android

I finally joined the rest of the world in owning a smart phone this Christmas.  My choice after literally years of consideration was an HTC Desire which uses HTC’s own Sense UI based on the Google’s Android. One major reason for my choice was the availability of the flash player on this platform. So one of the first things I did on turning on my shiny new phone was to try a Dragster activity (see below).

Dragster 3 activity on an HTC Desire

And I was not disappointed.  I was extremely pleased to see that not only did the activity load up exactly as one would expect on a laptop or PC, it also responded as I hoped with the labels dragging with finger swipes on the touch screen. The activity feedback is displayed by tapping on the activity feedback button as you would expect. The only real difference between a PC/laptop with a mouse and cursor, and on the phone is when it comes to displaying feedback on label positioning. As the phone touch screen has no equivalent of mouse/cursor roll-over, I found I needed to tap on the labels in order to display the answer areas and pop-up text. The only problem with this is that if you lift your finger from the screen the answer areas disappear again, so viewing these areas can be problematic if they are small and are obscured by your finger. However when these areas are larger and not obscured this isn’t a problem.

So I think we can now state that Dragster 3 activities can be delivered to users of modern Android smart phones that have an up to date flash player installed. My only reservations are about screensize which limits the accuracy of element positioning and can hinder viewing of feedback as descibed earlier.

This experience makes me very excited about the new generation of Android based tablet computers that are due for release later this year. With their flash compatibility and large touch screens they will be absolutely ideal for delivering tactile drag and drop interactions for learning with Dragster.  I’m expecting 2011 to be a very exciting year!


Geek Dad – Enough ABC apps already

Geek Dad on Wired asks app developers to move beyond applications to teach basic literacy arguing that these are all very similar, often not well thought through and do not make use of the unique characteristics of the iphone and ipad.

This is indeed a useful and valid point, but it seem to me to miss the fact that there are a huge number of free flash based educational “apps” already available on the web that users of these devices cannot currently access. So app developers have an opportunity here to recreate some of these as apps and make a bit of money in the short term from those users who will pay to access otherwise free resources on their preferred device. Those app developers that really get to grips with the unique educational opportunities offered by these devices will have in my opinion a more valid reason to build a business model around selling educational apps.

Personally I feel like waiting for the non-apple tablets to appear which are likely to run flash before I throw my hat into this particular ring and I would advise any purchaser of mobile devices who has learning and education in mind to do the same.


Flash and mobile phones (the HTC Hero)

I must admit that I haven’t really paid too much attention to mobile phones and consequently mobile learning to date.  That has been largely because the only available flash player on mobiles has been Flash Lite which offers a very limited set of functionality, and because of this it has not looked that likely that flash based applications such as Dragster would be usable on a mobile.

Well it looks like that is going to change and sooner rather than later…

In July 2009 HTC released their touch screen Hero handset which offers a much more capable flash player on the Android operating system. There are numerous reviews of this device out there but the video below (taken from this review by Rob Jackson) demonstrates some of the abilities and limitations of its current flash capabilities.


While its obviously not perfect, this is boding very well for the future, and according to Adobe the flash player is due to be upgraded later this year.

What this appears to be leading to is a future where flash development for the web and mobile devices will become much, much easier and may even get to a point of develop once and deploy onto any device. The project that is making this a reality is the Open Screen project.

This is all very exciting especially in combination with the developments in mobile touch screen interfaces which open up possibilities for more tactile interactions such as drag and drop.

I hope to get my hands on an HTC Hero soon and have a go myself… when I do I’ll post on how I get on.