Reflection in Learning: Tabletops & Beyond

Last Wednesday our HCI group had the opportunity to meet with the folks of CUO, the Centre for User Experience Research, at the Social Science department of our university for a little brainstorm session. I was asked to present a bit of my work with which I threw a few ideas into the group and which provided me with some nice feedback. The slides of my presentation are available here, but they are pretty visual so won’t make much sense without me yapping along to them. The first half is much in line with what I’ve posted here and here though. As for the second half, let me give you an update.


We want to promote reflection and think our badge data is a good starting point. The badge data is an abstract, high level representation of the activity and achievements and can be a central access point from which we can further drill down into the raw data. While a student can figure things out by himself, input and guidance from a teacher through this reflection process can greatly improve the result. Putting students and teacher around a table for discussion seems like a good idea, so why not use a digital tabletop?

Tabletop Reflection

Let me explain how the first few steps of this process would work:

We put the teacher and a couple of students around the tabletop. The teacher drags out the names of the present students onto the tabletop. These expand and become the students’ personal consoles.

The teacher then pulls up the badges. As the tabletop app now knows which students are standing around the tabletop, it can adjust its badge visualisation and limit it to data relevant to these students. Dragging a badge onto the tabletop will expand the badge, provide more options such as showing its relation to the students and the class and provide a drilldown point to more information, in our case: tweets, blogs, comments, etc.

This provides the teacher and students with the basic elements required to facilitate discussion and reflection. The teacher has an immediate overview of the progress and the data of the students. He/she can give feedback, discuss the artefacts and guide the students in their learning process with the data available on the tabletop. The students can study and discuss the artefacts and compare their own work to that of their peers.

A couple of screenshots of the rough tabletop prototype:

Fullscreen_07_05_13_11_52 Fullscreen_07_05_13_11_51-4


Let’s do a quick tech intermezzo, before we lose half of the audience ;) While the goal is to create a tabletop reflection tool, we also want the technology to support multiple platforms. I walked away from the pure Paper.js idea I mentioned previously though and have now created a custom Javascript framework to suit my specific needs. The framework logic is built on a mix of Object-Oriented with Component-based design, the visual design is all HTML5 and CSS3. This allows me to quickly create classes that support multi-touch, animations (CSS3 and custom) and event triggers and can easily be hooked up to the DOM elements. No rocket science, just very helpful for rapid prototyping ;) As an example, the above prototype was developed in a couple of days.


The features required in our process aren’t all available yet in our prototype but will be developed soon. The next step (after some evaluations) will probably be about how we can expand this to collaboration. We want the students to collaborate around the tabletop but also collaborate with people out in the field. Imagine students outside or even out of the country being guided by the tabletop users and in turn providing the class with realtime data from these locations. Google Glass as a direct stream to what’s happening there? Why not!

We think there is potential in not just taking learning outside and the outside into the classroom, but also bringing these learning artefacts and analytics into the real world. We have more interesting ideas on this and how to involve the parents into the process, but more on that later. If I tell you everything now there’s no reason to come back right? ;)

Unified UX/UI across tabletops & mobiles

Let’s get a bit more technical today. I’ve been talking a lot about the pedagogical side of things but have been neglecting the technical aspects. Since I’ve spent the last 10 years as a software engineer, not a teacher, a “tech” blogpost seems in order..

If you’ve read my previous post you know I’ve developed Navi, a badge dashboard, which is a small (on-going) Java project running on Google App Engine. This dashboard allows students and teacher to access class progression data through their mobile phone and desktop browsers.

We want to take this a step further and go beyond desktops and mobile devices by exploring the possibilities of tabletops and ambient screens in class rooms and create collaboration and reflection tools using the learning analytics data we possess (Step Up!). Our goal is to create a unified, always-present digital environment that spans across all these devices and delivers a homogeneous UX and UI through its unique look and feel.

The requirements

Visual Uniformity
While a uniform look might help brand identity, our main reason to create a visual uniformity is to create a similar UX across all platforms. Moving from one device to another should be a seamless experience and require little extra effort from the user.

The learning analytics data we have needs to be visualised. To engage students we will require something more than tables and forms, certainly when we consider deploying on tabletops and creating interesting ambient displays.

Cross Platform
Creating a unified experience across this big range of platforms is tricky. Using each native environment would be very time consuming. While multi-platform tools do exist, they would not allow for the flexibility we require. (we have a couple of students comparing such tools for their master thesis here and here)

Multi-touch Interactivity
Multi-touch devices such as tablets, tabletops and (specific) ambient displays allow for rich multi- and single-user experiences. Therefore we need a solution that will not limit us to simple single touch interaction.

The technology

While web applications have always been a good solution to go cross platform, it’s only since the arrival of HTML5 that web development has become really viable to create proper applications. With the new Canvas element and CSS3 we can create much more interesting visualisations and UIs and aren’t limited anymore to the basic objects provided by the HTML framework. Throw some Javascript into the mix and you have yourself a very potent, interactive, animated, vector-based canvas to work on that runs across any device (with a proper web browser anyway).

There are quite a few libraries for visualisations on the web. Examples are D3.js, Processing.js and Paper.js. As the UI will be an important part of my development, my preference went to Paper.js, a vector graphics framework supporting scene graphs, bezier curves, interactive animations and more. As it is more focused on pure vector drawing (instead of data visualisations focus of D3.js), it seemed more suited for the job. With my game development background, it also felt a bit more familiar ;)

To create the unified touch experience, Javascript and HTML5’s touch events are a great starting point. We immediately have support for mobile devices and can easily support tabletops using the npTuioClient browser plugin and MagicTouch.js script which allows TUIO connectivity.

For my backend I continue using Java, building on the current Navi project by exposing its data through a RESTful webservice.

The framework

Getting this technology to work is quite straightforward, but I need an abstraction layer so I can focus on the UX and visualisations without having to worry about the underlying libraries. Therefore I’m first developing a simple UI framework (currently “cleverly” named Navi Framework) around this technology that will let me easily create the UI elements and interactions.

The explanation of the actual design of this UI framework deserves its own blogpost and since we’re busy hosting the #lak13 conference in Leuven it will have to wait another week. But if you have any thoughts on the technology I am using or have any interesting suggestions, feel free to throw your comments my way!

Learning from games

First a short recap, in case you haven’t read my previous posts: we are awarding the students in our #chikul13 course with badges in the same way achievements are awarded on Xbox360, Playstation3 and Steam. Our first results do indicate certain facets of this gamification are appreciated by our students and have a positive impact on their work. Badges in learning are quite new but maybe we can learn something from the years of experience all of you have with achievements, be it in games.

I remember not everyone was excited when Microsoft decided to introduce achievements 8 years ago. The overal Gamerscore, a total sum of all achievement points, would become the main focus for some. While it did boost sales, it didn’t always reward good game design, just easy achievements. Soon Sony would follow, as would PC games and even Apple with its Game Center. Achievements aren’t going anywhere soon it seems…

So I look at you, game developers, journalists and gamers. What do you think of achievements today. Please do post your comments and while you’re at it, could you answer a couple of the following questions?

  1. Do you check your own achievements?
  2. Do you compare your achievements with friends?
  3. Does knowing your friends’ achievements change the way you play your game?
  4. Do achievements cause you to play more/explore more than you would without them?
  5. Would you still play all the games you play today without the achievements?
  6. Do you check achievements on other devices? (mobile, websites,…)
  7. [for the designers] When designing achievements, what is it you want to achieve? (Replay, exploration, sales,…)

Happy Easter!

Open Badges & Motivation

Last time I mentioned how the students’ online presence helps both the students and the teachers keep track of their progress. By having them use Twitter, blogs and comments to report on their progress, we create an open system that helps awareness of the class activity for both teachers and students.

Thanks to Jose Luis Santos‘ trackers, we have detailed statistics on every student, showing us the amount of blog posts, tweets, comments but also the interaction between students and people outside the course. Indirectly, we can get an estimation of the quality of e.g. a blog post through the amount of comments it has received from others. We can also quickly discover inactive students.

Apart from just raising awareness, we also want to promote activity, quality and results. We try to do this through gamifying the progress of the course. This gamification concept comes from videogames where certain milestones and actions are rewarded and shared publicly with all your friends. These rewards are more commonly known as achievements.

In the learning environment we have set up, we can visualize the progress of our students through graphs and raw data through applications such as StepUp! (Jose Luis Santos) and the Activity Stream (Gonzalo Parra) but we can also limit this visualisation to the important milestones and actions reached during the course. And for this, we use badges (following the Open Badges standards).


Badges give the students an immediate overview of their achievements and allow them to compare these accomplishments to their peers. Through a personal badge dashboard (see image) they know at a glance the state of the class’s progression. It quickly becomes clear which achievements are easy to get, what the student is lagging behind on compared to the rest of the class and what work remains. This information should again raise awareness.

But there is also an immediate feedback which would otherwise be difficult to give outside of class. When a student shows a lot of activity on e.g Twitter, a badge is instantly awarded. Other badges are given after a 2-week period: No activity is not acceptable so a negative badge is awarded; a lot of comments on your blog post means it has provoked a lot of discussion and can be assumed qualitative, which deserves a positive badge. Deliverables are also awarded with badges. A good evaluation on their developed prototypes also deserves a badge.

With this feedback through rewards we hope to achieve a change in bad (inactive) behaviour, promote positive behaviour like activity and quality, and improve awareness in and outside of class. We also hope the dashboard will help the students reflect on their activities. By being aware of their peers’ progress and being rewarded (or not), they can conclude whether or not they are on the right track.

The exact effect on motivation, awareness and self-reflection is still under evaluation. But while we wait for further results, feel free to head over to Navi, the badge dashboard used for #chikul13 and share with us your thoughts!