Friday, July 27, 2012

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).

Monday, July 23, 2012

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.