Reflection with Interactive Tabletops: an Evaluation


Last Tuesday Jose and I had the opportunity to experiment on a couple of students during a thesis poster presentation taking place just before the last #chikul13 class. While Jose was focussing on making students more aware through ambient displays, I did my first test-run of the Navi Tabletop Application. As you may remember, we’ve been awarding students with activity and progress badges. This app visualises these achievements and gives students a collaborative tool to reflect upon their work.


The rapid prototyping with my custom HTML5/CSS3/Javascript framework works! I managed to get a fully functional tabletop prototype with actual badge-student relationship visualisations working in a weekend. Here’s a quick before-after screenshot comparison.


(please ignore the English in the screenshots, I have no control over the badge descriptions sent back to me by the data repository ;))

The bezier curves are courtesy of Paper.js. While I moved away from using a canvas element to draw my interface, it’s great as an extra layer to draw more demanding objects, like the relationship lines.

As I explained before, I want to create a tool to support collaborative reflection between students and teacher. The teacher would then guide this process. However during my testing on Tuesday I decided to let them freely explore the app by themselves and see what happens.

Navi Tabletop App

Let’s start with a quick explanation of how the app works.

navi_v2_step1 navi_v2_step2

Badges can be dragged onto the playfield (the top 70% of the screen). Students who have been awarded this specific badge will light up (in blue) in the student container. The opposite is also true: dragging a student onto the playfield will light up the badges in the badge container that this specific student has earned.

navi_v2_step3 navi_v2_step4

The highlighted items together show the union of the relationships with the items in the playfield. Touching an item in the playfield will show its relationship to other items in the playfield through connected lines. This will also limit the highlighted items (students or badges) to the ones related to the touched object.

Badges are awarded every 2 weeks. The user can cycle through these time periods in the badge container.

Test Chamber 1

I decided to use the think-aloud protocol, give no scenario and see whether the students could make sense of the tool and data by themselves. I filmed the whole process using a camera on a tripod and asked them to fill in a survey afterwards. For students who weren’t part of the #chikul13 course I gave a bit of background information on the badge system.

During the one hour poster presentation session, 14 students tested the application. 2 groups of 3 people and 2 groups of 2 people used the table simultaneously. The remaining 4 people used the application by themselves.

Almost everyone figured out how to use the app without guidance. Users started dragging items onto the playfield and started seeing and understanding the relationships between names and badges.

The most interesting events occurred when students of the #chikul13 course grouped up with their actual #chikul13 group members (they work in groups of 3 during the course): At one point they became interested in seeing their group badges per period. They dragged out their names and started cycling through the time periods. When noticing a low amount of awarded badges, they started reflecting about that period and found reasons for the lack of badges. They also saw which periods what person was more active and had an awkward but funny moment when 2 of them had a negative badge for not commenting at all during a 2 week period.


That group I just mentioned was a perfect example of our ideal target audience. It was interesting to see them behave the way they did: discussing and reflecting over their progress in the #chikul13 course even though the amount of data they were given was limited.

As for people using the tabletop app by themselves, results were less interesting. They were struggling to continue exploring and needed a little push now and then to have ideas on what to do. But as I am aiming for a collaborative tool, this isn’t a big issue.

The survey showed similar results. Students would like to use the tool with others, however there was more interest in using the tabletop with other students than with a teacher. The word “fun” was used a few times when asked if the collaboration added anything to the experience. They also admitted that using the tool together invites for more communication and quicker understanding of the data. Almost everyone agreed that more information would certainly improve the application as the actual comments, posts and tweets (on which the awards are based) aren’t yet available through the tabletop.

It was clear that the UI wasn’t flawless. People tried double tapping and wished the lines would remain visible when letting go of objects. Due to some issues with the time period selection and a lack of a time period spanning the entire course timeframe, people weren’t convinced the tabletop app helped them get a good total overview of the class’s progression

The survey also contained a SUS questionnaire. This resulted in a SUS score of 71 counting all students, 76 counting only the #chikul13 students. An above average score which is not too bad for a feature-limited prototype with a very specific purpose.

What’s Next

I am pretty happy with these results and it was exciting to see the students play around with the Navi Tabletop App. But there is a lot of room for improvement.

Period selection

First up is the time period issue. While I could fix the button’s responsiveness and provide the user with better visual feedback, I believe cycling through the periods is not necessary at this level of the interface. I will remove it and bring it back at badge level (including a default full course timeframe selection).


Items light up when related items are dragged onto the playfield, but this wasn’t obvious enough to some users. A more visually striking highlighting (e.g. animation) that catches users’ attention might solve this problem.

Double Tap

Quite some users attempted double tapping, something not very common on touch screens. I believe the lack of actions available on items might be the cause of this double tapping reaction. Some users expected the lines connecting related items to remain visible while the “correct” action was holding a finger down on the item. Adding action buttons to items in the playfield to support these kind of features could indirectly solve this behaviour.

Badge Information

People had to drag the badge all the way onto the playfield to see its description.  A simple touch should already show that information.

Lack of Information

The big next step is showing the actual blog/comment/tweet data. Most people agreed this would make the application more useful. Once Jose’s StepUp! backend can provide me that information, I’ll be adding that functionality to the tabletop. This will hopefully bring the reflection process to a whole other level.

Another Time Perhaps

Great, you got this far! I bet you were hoping on a video and… there isn’t one. But fear not, one will be posted soon! Screenshots and text can only say so much right?

Feedback, comments and ideas more than welcome as always, so feel free to fill that comment box below!