android

Arjen Vrielink and I write a monthly series titled: Parallax. We both agree on a title for the post and on some other arbitrary restrictions to induce our creative process. For this post we agreed to create a design concept for a mobile Moodle application. The concept should include screen mockups. You can read Arjen’s post with the same title here. This month we are delighted to have two guest writers writing about the same topic. Marcel de Leeuwe (read his post here) and Job Bilsen (his post can be found here).

Mobile applications have taken off. This is largely due to the trailblazing work that Apple has done with the iPhone and the App Store. If you have been watching my Delicious feed, you will have noticed that I too have succumbed and will be part of the iPhone-toting crowd (I will write more about me losing my principles later).
Nearly every web service that I use has a mobile application. Examples are Last.fm, Flickr, WordPress, Dropbox, NY times, Paypal and more, the list is endless. Moodle, the web application that I use most often, does not have a mobile app yet. There have been a couple attempts at creating themes that display well on a mobile (such as here). These mobile themes usually try to deliver all of Moodle’s functionality, which often limits their phone specific interaction and their user friendliness. Other applications use JAVA applications that gives people access to specific Moodle functionality (examples here and here).

It would be great to have a true mobile Moodle application. Here are some initial thoughts for a design.

Audience
The audience for this Moodle application would mainly be students/participants. I want the functionality to focus on things that are easily delivered on a mobile platform. I don’t think grading and reporting interfaces lend themselves well to a smaller screen. The things that people like to do with a mobile device are usually: seeing what has happened/is happening, plan and communicate. This Moodle application will enable the users of a Moodle installation to do exactly those things.

Getting rid of the course paradigm
Moodle is extremely course centric. I have always thought that this has some great advantages, mainly that all the learning is very contextual. Students, however, often have to “multi-course” (doing multiple courses at the same time). A mobile application should make the most urgent or current events, actions and resources bubble to the top. This requires the application to get rid of the course paradigm and show a personal page per user.
People that have used Moodle for a while might know of the “My Moodle” page. This page also tried to pull up the most relevant information for a particular user, but would still display this information on a course by course basis.

This application will consist of four main screens. Each screen has its own icon at the bottom of the screen that stays available at all times. Each screen could of course lead to other screens that take you deeper into the Moodle installation.

1. Recent activity stream
Facebook and Twitter have really taught us the use of activity streams. These pages display short status messages about what is happening in reverse chronological order. Moodle has had an activity stream since its inception: the recent activity block. This block shows what has been happening in a particular course. Examples are forum posts, work being handed in or materials being added by the teacher.
This screen will work in a similar way, but will include all the courses a user is participating in. I would imagine that each update on the screen would include a date and a time, would link to an extended version of the update and would include a user image if the update concerns another user, or an activity icon if it concerns a particular activity. The newest updates would be at the top of the screen and the user would be able to scroll down to see older entries (very similar to Twitter). See below for an example:

You would have to think about each Moodle module and decide what a status update would look like for that particular module. Some examples of events that could trigger a status update:

A forum post is added to a course of which the user is a member.
An activity becomes available (either because it was added or because it had certain time that it would become available, like the choice or assignment activity) or a deadline has passed.
An entry is added to a database activity or a glossary that the user has access to.
A topic or week has been made current by the teacher/facilitator.
A message has been sent to the user.
The user hands in work for an assignment, fills in a choice, starts a lesson, gets the results for a quiz or starts a SCORM object.
A change is made to a wiki page that the user has access to.

These status updates could announce themselves on the home screen in a similar way to how the mobile platform shows that you have new email messages: by showing how many new updates are available.

2. Upcoming events
This screen is also an extension of existing Moodle functionality made course independent. Conceptually it is what you would see if you would scroll up on the recent activity screen. Upcoming events that can be displayed are:

Anything that is in the user’s calendar.
Activities that will become available or that have a deadline.
Courses that will start and that the user is enrolled in.

This screen would look very similar to the “Recent Activity” screen as shown above.

3. Social: contacts, interests and messaging
A mobile device is used for communications and a mobile Moodle application should facilitate that. This screen is an alphabetical list of all the users that a student/participant shares a course with, combined with an alphabetical list of all the interests that a user has put in their profile and all the courses the user is enrolled in. See example:

Selecting a user will take you their profile page. This page will focus on the ways that the user can be contacted. You can message the user from here, call (or Skype) them, send them an email and click on the links to their external websites (a blog, Twitter, Facebook, etc.). See this example:

Profile page

Selecting an interest or a course will apply a filter to the alphabetical list. It will now only show users that share this interest or this course. It might allow the user to contact all these users in one go (if this role has been given the permission for this capability).

4. Browsing courses, activities and resources
I really like a side scrolling drill down navigation (examples are the way that email works on the iPhone or the “Slider view” on Grazr). A mobile Moodle application should allow the user to navigate to activities and resources in their course by constantly drilling down. This can be done it two ways: course centric or activity-type centric. The application should probably support both.
The first screen shows a list of all the courses the user is participating in and below that a list of all the activity types that exist in Moodle.
Clicking on a course will make the previous screen slide to the left and display a new screen. The first option on this screen will be called “Course overview”. If you click on this you will see all the section/topic summaries, all the activities and resources and all the labels in their correct order (blocks are completely ignored in this mobile application). Below the course overview are links to the overview pages of each activity type. Clicking these will display all the instances of a particular activity or resource.

If you click on an individual activity or resource you will be shown that activity (again by making the screen slide to the left). What is shown here and what interactions are possible is dependent on the activity module. The minimum it would show is the title and the description. This would probably be the case for SCORM modules for example or for “upload a file” assignments. You would not implement a mobile SCORM player, nor will people likely have files for upload on their phone. The one activity that would benefit from being a bit richer would be the forum activity. It should be possible to follow and contribute to a forum discussion from the mobile Moodle application.

Technical considerations
The (start of a) functional design that I describe above will certainly have technical consequences (not to write obstacles). Below some of my first thoughts:

What platform? The nice thing about web applications is that you only have to develop them for one single platform: the platform that the server is using. Of course it would be possible to create a mobile version of a Moodle site, but this would negate some of the great things that a native application can do. We are now in the unfortunate situation that we have multiple mobile development platforms. The two obvious choices for mobile development would be an iPhone app and an app for Android. But what about people who use a Blackberry, or a Symbian or Maemo phone? I have no knowledge of how easy it is to port an Android app to the iPhone, but I do know that multiple platforms will be a reality in the next couple of years. You better write portable code!
Where does the code live? It is easy for Facebook to create an iPhone application. They run a single installation and can have server-side code and client-side code to make it all work. Moodle’s install base is completely decentralised. That means that Moodle installations will have to get some code that will allow a client to talk to it. In the client you will then need to be able to say what Moodle installation you want to connect to. This poses a couple of questions. Will a mobile Moodle app require a special server module? Will Moodle 2.0 expose enough of itself to an external API to make a client like I describe above possible? Should one client be able to plug into multiple Moodle installations at the same time? I am not a software architect, so I would not have any answers to these questions, but they will need to be resolved.
Performance? Moodle’s data structure is course-centric and not user-centric. Moodle currently does not have internal functions that deliver the data in a format that the Moodle client can use. I think that the query to deliver a recent activity feed that is cross-course and has the perspective of a single user is very complex and will create a huge performance hit on the server. Again, I am not an architect, but I would imagine that this requires a special solution. Maybe more push and less pull? More database tables? Server-side pre-caching? Who knows? I certainly don’t!
Roles/permissions/capabilities? Any new Moodle client that uses existing Moodle data (as opposed to new modules) needs to be very aware of any existing capabilities. All of these need to be checked before information can be shown to the user. I am sure this has further performance implications.
Online/offline? A lot of mobile applications cache their information so that a user can continue to use the application even if an Internet connection is not available (e.g. the New York Times app). Even though it might be useful for a Moodle application too, I wouldn’t put any initial effort into solving that problem. Smartphones that have decent application support function well in a context where there is persistent mobile broadband. It is therefore okay for the first version of mobile Moodle application to assume that it is online.

A note on prototyping/mockups
I used the excellent Balsamiq to create the mockups that go with this post. This easy tool delivers quick static results, although it lacks a bit of precision that I would like to have added. Moodle has Balsamiq integrated into the Moodle Tracker, making it trivial for anybody to add a user interface mockup to any issue. There are other tools that could be used to do iPhone prototyping. This blog post gives a good overview.

Continuing the dialogue
I would really like an application like this (or something similar) to come into existence. I look forward to working with other people with a similar interest (bored developers? Google Summer of Code students?). Let’s make this happen! Any and all comments are welcome…

My favourite gadget of all time is the Psion 5MX. EPOC, its operating system, was sheer genius. It had a great interface and was a joy to use. EPOC became Symbian S80 and when the lack of Internet functionality of the Psion became too bothersome I decided to switch to a Nokia 9500, then to a Nokia E90 and now I own a Nokia E71 with Symbian S60 3rd edition.

Suddenly I find myself stuck with a smartphone that has an operating system which doesn’t leverage the keyboard of the device and is in many ways quite clunky (some options are hidden more than five layers deep). However I much prefer Symbian to the other available platforms: the iPhone is extremely nice but married to iTunes and locked down, Palm hasn’t been resurrected yet, Windows Mobile is a joke (using a pen is ridiculous in this day and age), the Neo Freerunner is too experimental, Maemo doesn’t allow me to use a SIM card and all the phones running Android that currently exist have no battery life.

I like to get the maximum potential out of all the technology that I use. I have spent quite a bit of time setting up my phone exactly the way I like it, so that I have quick access to information on the go (see for example the custom mobile start page that I created). In due time I will write a post about the programs that I use on my phone. In this post I want to focus on a small widget that I developed yesterday evening.

A couple of months ago I read a post on Lifehacker about a great service for people who own a mobile device with email capabilities: SnapAsk allows you to send an email to ask – at – snapask -dot- com with a keyword and a query in the subject line. SnapAsk will then reply to your email with an answer to your query. So “wiki Symbian” will return the Wikipedia page for Symbian and “news economic crisis” will return an email with relevant news articles. Some of the keywords are a bit US centric and don’t return proper results for me in the Netherlands (e.g. weather, traffic or flight), others are quite innovative: Know some words of a song, but can’t remember the name or who sang it? Send an email with the subject “lyrics A full commitment’s what I’m thinking of” to Snapask and you will be textually Rickrolled.

Using SnapAsk on my phone proved more difficult than I had hoped. I had to either type in the email address in the To: field or select it from my contacts, remember (the hardest part!) and type the keyword I wanted to use and finally type the query. I also learnt the other day that Nokia has decided to support widget development on their Symbian platform. So I gave in to my tinkering spirit and committed to trying to write a little widget which would make it easier to use SnapAsk on my phone.

I set the following criteria for the widget:

It should require the least amount of possible clicks
It should be as close to self explanatory as possible
I would have to be done with it in a couple of hours

At first I thought I would create links for each keyword and an input field for the query. The user would first click on the link with the keyword, then write the query and finally click on a link or press a button to start the email application. Later I realised that I could eliminate one step by making the keywords buttons. This way the user would only have to type in the query and select the correct keyword.

This idea required some Javascript. I have been wanting to try jQuery, so I wrote the initial implementation using that library. When I tried loading the page on my phone I learnt that jQuery seemingly was not supported by Nokia’s built-in browser. I then decided to try and write it with normal Javascript code and this worked perfect. With some CSS I managed to get the input field to be the full width of the top of the page (where the cursor is likely to be). I also made the field higher by increasing the font-size property, so that it is easy to get your cursor on it, in case it isn’t. The only thing I couldn’t manage to do was get the field to auto-focus on load. It seems that Nokia doesn’t want to support that function.

All I had to do, after finishing the HTML file (with inline CSS and Javascript), was create an XML file called info.plist with the name of the widget and its version number and an icon.png file of 88×88 pixels. I then put these three files into a folder, zipped it and changed the extension to .wgz.

The great thing about these widgets is that they install like any other Symbian program and can, by default, be found in the Installations directory on your phone. Ajax can be used and apparently some Javascript methods exist that allow you to map certain functions to the softkeys of the phone.

I really like how standardised web technology is becoming. This widget should run on any other device with a standards based browser and if you keep the structure of the page simple and clean you can expect each individual mobile browser to display the page optimally.

My employer has standardised on Symbian smartphones for all their consultants. It should be relatively easy for them to develop a highly relevant widget that will enable me to do my work better and more efficiently. I have to say I am bit puzzled about the fact that Nokia is not pushing this concept a bit harder. Where is the Nokia Widget Store?

I would love for people to use the widget and give me some feedback on whether they like it:

Download the Widget
(or try in your browser if you don’t have a Symbian phone)

If you know of any other interesting widgets for Symbian please let me know!

Tag: android

A Design Concept For a Mobile Moodle Application

A SnapAsk Widget for Symbian S60