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.