GambientFication

A few weeks after my last post about designing a use case using ambient displays, I'm back to report about the experiment I carried out (started last Tuesday). I have developed several artefacts to show in the ambient display (an iPad at the end) as a digital frame (like it was part of the furniture): a couple of charts using highcharts, a couple of games and an activity stream (really linked to it, not developed it), all of them integrated in a single app. As I told you before, the data I use comes form tinyarm, that tool for researchers to report read/skimmed papers, suggest to each other and create a list of papers to read. Therefore, my research this time fits better in CSCW (computer supported collaborative work) than in the e-learning topic, but I hope I could extrapolate some of the results (and the created artefacts) to that field too.

As I described, my intention is to provide awareness to the users (in this case researchers) about their activity (read papers), and engage them in the process of reading and suggesting papers each other. We'll see if the results of the evaluation of this research point into that direction.

In this post, I'm going to focus on the games as the title denotes. The idea is that the ambient displays could be used to enrich the ambient of the user with digital data, and I'm mixing this concept with gamification (the usage of game dynamics and mechanics to increase the engagement of the users). That's why I coined the term of GambientFication, or the use of ambient displays to show the users some parts of a game, that is itself the result of gamifying another process (in my case, the activity of reading/suggesting papers by researchers).

Regarding my own experiment, I ended up developing a couple of games: "The Hangman" and "Risk" (both of them modifications of popular games). Almost everybody know The Hangman. Its core mechanics consist of representing the failures you make trying to guess letters in a word by means of a man hanged: the most letters you fail, the more parts of the hangman are drawn. If you succeed to guess the word without being hanged, you're dead. Annotating the number of failures in another ways (just with numbers or little sticks) would not be the same: you don't want to be hanged, man! Why did I choose to link the hangman mechanics to research activities? I thought quite a bite about it, and I ended up finding a solution: as a researcher, if you don't read at least 2-3 papers per month, you got disengage from the state-of-the-art, you got dead, you got hanged! That's it! So, let's use the metaphor of the hangman to say that to researchers.

On the other hand, I wanted to make another game for several reasons: do something a bit more complex, visually attractive, and to compare the hangman with. So I looked for another metaphor and, although my colleagues didn't like it at the beginning, I ended up implementing that too: a modified version of Risk. Risk is a board game which objective is, in turns, to conquer the world accumulating army and expanding your troops abroad your domains. But I didn't want to foster competition among researchers for "who reads more papers in the group", so I modified the mechanics. The participants cannot conquer other participant's country, so the objective is not only individual (conquer as much countries as possible) but also made up a collective/collaborative one: the group members should conquer a complete continent in a given time period. Therefore, the individual work turns also into a work for the team, expecting that collaboration flourish and out of it the group itself appears strengthened. Anyway, certain level of competition is not bad also, so there's a case when 2 participants want to conquer the same country and only one will succeed.

That goes without saying that I took advantage of the HCI principles and techniques that I learnt here in Leuven (my first idea of the darts game seems so far in time), to develop the games and the other components. And hopefully the results of the experiment could led to a nice publication, as a result of the collaboration with the HCI group in KUL.

Design a use case with ambient displays

Here we go! Once I have learned about ambient displays, explored different datasets and tried several visualization tools, it's time to build a simple use case to test all the stuff. The use case will take place in the KU Leuven HCI group during the last 2-3 weeks of August 2012. I will make use of the tinyarm data to provide to the researchers in the group awareness about reading papers habits, combined with engagement by means of gamifications (I'll explain myself more concretely in future posts). The point is that, independently of the viz and the purpose, I need to take this info and present it to the researchers in an ambient display. How can I do that? The purpose of this post is to try to answer that question.

My first idea was to use a PC monitor in my room to display the data. When the other colleagues came by my office, the would be able (but not forced) to have a look at the viz. The problem of that solution is that I want to prepare a use case for a couple of weeks. If the guys are not passing by my office for a long time, they won't have a look at the display.

Another option (pointed by Erik) was to create a screensaver for OSX (everyone here use a Mac) that displays the viz when the user is not active in his/her computer. Therefore, the attention of the user was in another activity: maybe reading/writing on paper, thinking deeply, etc. and the display could be considered in the ambient. Developing a screensaver from scratch in Objective C is not a good idea for a 3 months period, so I explored other solutions. There's a possibility of defining a screensaver based on a RSS channel: the system fetches static images from a RSS feed and displays them in the screen. The problem here was that the visualization libraries I have explored (d3, highcharts, gephi, raphael) create interactive visualizations (normally using SVG). Therefore I looked for a way of creating a static image from these visualizations, doing the rendering in the server via nodejs and found this so interesting solution. Besides that, for gephi I had to create the network diagram for new data with no user interaction, but I found gephi toolkit that allow you to do that in Java. When I thought I had a clear solution, Mountain Lion was released a couple of days ago and... guess what? there's no RSS screensaver anymore. But there's still the possibility of choosing a folder on your computer with images to show as a slideshow. Then, I could change dynamically the content of this folder using dropbox (or a similar cloud service), so this is my first makable solution (required a bit of configuration in the client, but it should work fine).

After that, I was exploring the possibility of using digital photo frames with WiFi for the purpose. The objective of these devices is just decorative, so I think they fit perfectly in the ambient display definition. I searched for cheap one on the Internet and found out they're quite expensive (over 100$), so I could afford to buy 6 of them with my own money (because applying for funding I don't think would be successul). But in the same search I found some users discussions claiming that for this price people prefer buying a tablet over a digital frame. And, in the HCI group they have enough iPads to cover my needs: what if I asked them to put an iPad on their desktop and think of it as a digital photo frame? They could have access to the info whenever they wanted it (while in the office), and I could display some nice visualizations there (and no need any server rendering). I asked some colleagues and they (and I) think that this option is better than the screensaver since users have access to the viz more easily, and not forced to wait for the screensaver or to come by my office. Therefore, I will follow this approach and will design a web app for the iPad (you can display them in full screen) that will show several visualizations as a slideshow and (hopefully) will provide awareness to the researchers about their work (as I will eventually describe).

Image from http://www.readymade.com/blog/tech/2010/04/22/three-easy-ipad-stands/

Now it's time to prepare the use case: prepare the viz, fulfill them with real data, test them on an iPad, (maybe) develop a simple native app (to remotely control some stuff in the iPads), integrate the real time data from tinyarm, ... it'll be a nice 3 weeks vacation :)

PS: I have to find cheap solutions for docking the iPad, like this cardholder at Staples (unfortunately not available in Belgium).

Ambient displays and exploring datasets

Ambient displays are artefacts used to arise awareness about certain data not directly observable in the physical world (e.g., learning progress), and integrated in the environment. That is, they are not the main focus of the users activity but display information that could be consulted when needed, that make them aware of something interesting for their activity. In the concrete case of ambient displays for learning, several use cases have been analysed in the awesome Dirk and colleagues' literature review. Some conclusions could be drawn out of their work, for instance, that ambient displays if well used have been demonstrated not to distract the students. And that generally the amount of data displayed is quite low. The most sophisticated displays got to make what they called situational awareness, that is, besides acquiring some knowledge and understanding of the situation, the users could obtain a pinch about the future; that is, the data displayed if correctly interpreted could predict future events.

Therefore, I'm playing around with some datasets to come up with a suitable visualization for an ambient display: my dataset from the classon use case; another dataset from tinyarm, a tool for awareness of researchers; and, in the near future, with a dataset from stepUP. I have to first explore the dataset in order to determine how the visualizations should look like (bottom up approach). But I'm also exploring some tools for creating data visualizations, in order to get to know some novel visualization approaches that could be applied to the data (top down approach). Let's see what could I find in the mid-way, supported by the tools and the data itself.

In this regard I wanted to quickly visualize the tinyarm data, provided to me in JSON. I could not find a suitable tool, so my best chance was to export it into CSV using a JS script (I'm using JS for absolutely any processing I need, executed with node). I was pointed to a couple of tools to explore: on the one hand gephi, but it is more about networks (nodes and relations), not so useful for visualizing time series; and gapminder, that could be used to nicely visualize data about countries in the world, but you cannot upload your own data. Anyway, they point to another solution in the FAQ: to use Google Public Data Explorer, where you could upload your data in Dataset Publishing Language. For using this format, you should have your data in CSV plus a XML file describing your data: concepts (organized in topics) and their relations (slices). I can say that constructing the XML is not so easy (and so funny). Besides, I realized that there's a simpler and more powerful tool that I could use: Google Spreadsheets. So, after processing the data with the JS script I'm uploading it into a spreadsheet and visualizing the data using the built-in charts, very powerful to visualize this dataset (around 1.5k rows).

Regarding the visualization of the datasets for the ambient displays, my co-advisor @rcg0 pointed my to a very interesting blog post about visualization of speedos and tachometers. Roughly, it describes why the "in principle not convenient" circular visualization of the speedo make a lot of sense to detect acceleration. At the end of the post a visualization of the last BMW dashboard is presented, and the circle of the tachometer and speedo are linked by a fuzzy line to indicate that both measures are related, and this relation is important in sport mode (in this mode the link appears). That relation could be used as a metaphor for the relation between effort and outcomes (quality outcomes), since a great effort should imply a higher speed if controlling the gears correctly. Sometimes the students claim to devote a lot of effort in a course and the outcomes are not the ones they expect. By means of this dashboard they (and we as teachers) could detect easily these situations and we'll be able to help them to change to the correct gear.

Image from http://blog.visual.ly/

I have created a simple visualization using the Google chart's gauge. Let's see if it works for the purpose.

Paper prototyping and what I will be doing at KUL

It turns out the I'm learning good stuff about HCI in my stay at KUL. On the one hand I am following the course at Stanford (not at the rate I'd like); and on the other hand, the people in here really believes in the methodology (I remember the discussion I had with them about the utility of paper prototyping).

OK, so... what am I going to do here? Let's see! Narrowing the possibilities, I came up with two options: create data visualization for students including some gamification concepts anda data portraits, and create more complex visualizations for teachers, using complex techniques and a multitouch table as the backing for the collaboration of several teachers in a course.

Let's start from the second idea (the least mature one). Given the dataset I collected in a Multimedia Applications course, I'd use a to-be-defined visualization (like this d3 plugin or this d3 based library of reusable components) to present the data in a way that a teacher (or group of teachers) were able to take advantage of the data in order to improve the course. And then I have to explore the use of the the tabletop for the teachers to collaborate. More detailed information about the table is in this Bram's post.

Regarding the second idea, about visualization for students and data portraits, I started the to use the HCI methodology from the beginning. Firstly, in order to concretize the ideas I wanted to explore and establish a common artifact for sharing my ideas: I drew a storyboard that tells the story behind my project. I shared it with a couple of colleagues and I think it works well for its purpose.

And then, paper prototype time! At first, I didn't believe much in it but helped me in two ways: firstly to concretize a interface before programming it (I usually start programming and have some hints of what I want in the UI, but not it completely defined!); and secondly, because it helped me to explore several possibilities for the UI, since I had a general idea for the UI but let me explore and validate other possibilities.

I started with a prototype consisting of a list of portraits with the data of the students over them, and ordered according to their activity in the course (a weighted sum of several components, like progress in the sessions, attendance, questions and answers, and work from home). The weight of every component had to determined in the design of the gamification strategy: for example, +10p for finishing a section in the assignment, +1p for connecting to the assignment (maximum once a day, and an extra for connecting from home a day different of the face-to-face session) and +2p for questions and answers. Another good visual info was to blur the faces of the students that were bad in the course, to indicate that they were not completely enrolled to the course (thanks Joris!).

Next prototype, is similar but use a dock-like metaphor (Mac's dock) for positioning the students in a row, that again indicates their activity.

But, lately I have been attracted for the aesthetics (what is important according to the experts) of the circle-like visualizations. Moreover, this kind of visualization could be identified with a darts target, what brings more context for a game. It also can show clearly which students are in the good track and which one are out of it. I showed that to who I think will be my main collaborator in this project, and I think really liked it too.

Finally, I had to design an interface for the detailed info about the participants. I had the idea of using something similar to Big Brain Academy, but I have to think a bit about the variables that I want to represent and what is the relation between them to put them together. I have another couple of ideas to work with (visualization of the students working in distance sessions to provide virtual presence and elaborate more on the gamification of the activities).

Finally, I have developed a simple mockup of the app that will be completed these days using the target and my picture :) After finish, time to evaluate it again. That's what I learnt: continuos feedback is as good for students as it is for researchers/designers. See yap!

I write only in June!

It's a fact: I write in this blog only in June. I spent like a year to go back to the blog and write something "interesting".
Right now I'm in Leuven, doing a research stay with Prof. Erik Duval. Right now, my main concern is to find out very concrete aspects to collaborate with the "ariadne" lab people. Last week, I gave a short presentation about my PhD stuff and raised 3 topics for collaboration:

• visualization of students data: I've collected a great amount of data during a experiment in class using classON; in order to make this data useful, I wanted to come up with nice visualization to make the data useful for teachers and students. I can distinguish two different scenarios: a) visualize in class (synchronous) what has to be very simple and straightforward (teacher and students are carrying out a task and the visual info is just a support); and b) visualize after the class, or even after the course (async), what could be much more elaborated and teachers/students could devote more attention to the artefact.
• gamification: as classON collects different types of data, a useful purpose is making use of it to engage students. I'd have to analyse some gamification strategies and patterns, but I had in mind that the goals/badges/medals/whatever should be granted based on the history of the individual, e.g., if an individual demonstrates improvement on his regular activity.
• use case: the last topic I proposed was to use classON in a course at KUL. The idea was not so well received, since it is designed of a scenario where the resources are scarce (the teacher's time to provide feedback) and that doesn't seem to happen in here. At the end, it could be used in a couple of sessions of different courses maybe...

Next step was to talk to each of the people in here, and propose them more concrete topics, relevant both for them and for me. After a few talks, I found 2 main topics of interest, both related to data visualization.

Firstly, try to exploit the relation between STEP UP! and classON, since both of them have commonalities: both are tools that provide awareness about what's happening in a course, and use visuals to transmit this info to the students/teachers. But they have also different approaches, since classON uses data related to progress, questions and question ratings; and stepup! makes use of more social data, like blog posts, comments on the blogs, tweets, toggle (time on activity report), etc. In this line, we envisage a couple of common interests: a) utility of the data types we collected for students and/or teachers; and b) utility of different visualizations for students/teachers (namely, data portraits, data tables, widget dashboard, etc). Besides, I want to explore another dimension that is the utility of visuals in class (sync) or after it (async). We'll see.

Secondly, we're trying to figure out common interests with a work for visualizing of the data collected in TiNYARM (papers read, toread, skimmed, etc.) in a community of research. Again, the data collected is "more social" and the subsequent SNA could be applied over it, but again there's a common ground on techniques we want to use (concretely, in the classon visualizations after the class for teachers/students to appraise what really happened and hints for improvement the learning activities). In this case, we roughly thought about a visualization like this one in order to represent questions and answers (instead of foo and bar), or papers read and recommended.

To sum up, on the one hand we have two groups of stuff: a set of types of data, and a set of visualization tools/techniques; on the other hand, we have two dimensions: target group (teachers/students), and synchrony of application (sync/async). Objetive: let's match of all these!