Home Resume Contact
flxBoard
September 2013 - May 2015
INTRODUCTION

flxBoard is a project conducted over the course of a year and a half while I was in grad school to design and prototype a useful, usable interface for large multitouch display surfaces, such as walls, tables, and floors. Another goal of the project is to discover what applications, if any, are very well suited to the affordances granted by such a large interactive display. We wanted to design a new interface from the ground up, taking advantages of these affordances, rather than fitting paradigms and designs from current interface design, such as desktops, WIMP, and touchscreen based mobile devices to this new type of display that they weren't designed for.

STUDY METHODOLOGY

Informal user studies were conducted in the form of playful demos, often in public spaces, such as the Beckman Open House at the University of Illinois. The goal was to encourage creativity and play as a way to explore the design possibilities of large multitouch displays. The prototype system would be set up in either a wall or table setup, and users would be encouraged to play around with the system. I would explain the basic setup, including that you need to use the pen, and then ask them to have a go with it. We stressed to users that there are no "right" or "wrong" ways to use it, and encouraged them to think out loud. After the users had some time to play around, I would ask them, "now what do you think we can do to improve it?". Most users would give some feedback based on their brief experience, but some would spend a significant time thinking about it.

DESCRIPTION OF SETUP

flxBoard consists of a computer projector, a Microsoft Kinect, a computer running Windows 8, Ubi Interactive software, an Ubi Pen, a tripod, a surface to project on, and the flxBoard web app.

I designed and built custom mounting hardware at the Champaign-Urbana Community Fab Lab to mount the projector and Kinect on a standard tripod. It is constructed of laser cut acrylic, and a steel C bracket. I'm working on a way to attach the computer to this mount as well.

The computer I am using is an Intel NUC, which is a 4”x4”x2” computer with an Intel Core i5 processor.

The projector can be positioned to create an interactive surface on any flat surface.

There are currently two versions of the flxBoard web app. Both are digital whiteboards. The first one has a rectangular shaped drawing area with tool buttons on the right hand side. The second has a circular shaped drawing area with two rings around it. The rings are the tool buttons. This interface is designed for projecting on tables and horizontal surfaces. The first flxBoard app also has the capability to have the whiteboard shared over the internet with anyone who is also on the web application.

ANECDOTAL FINDINGS

When using the online connected whiteboard interface, people would almost always play a game of tic tac toe at some point.

Similarly, when using the circular table interface, almost everyone drew a smiley face at some point.

Kids almost always became comfortable with the interface and technology much more quickly than older users. They also weren't bothered by limitations in the technology, and just worked around it. For example, they quickly discovered that if you stand in between the Kinect and the surface, it wouldn't register your touches. After experiencing this once or twice, they simply stood off to the side or out of the way of the Kinect and continued playing with the interface. Most adults, upon discovering this limitation, just complained about it, and some still accidentally stood in front of the connect later on during their time playing with the interface.

One kid at the Beckman Open House suggested utilizing a click-pen like interaction to change between pen and eraser mode, with a button on the back of the pen. This would be a much more simple and unobtrusive interaction than tapping an onscreen button. This also solves the issue of having buttons placed where all users can easily interact with them at all times.

Many people expressed interest in being able to annotate web pages and other digital documents.

One person came up with the idea of "drawing outside of the margins". There is the main whiteboard space, but then allowing people to also draw outside of this, perhaps for notes or for a private drawing space.

Public versus private space came up a lot. Especially for the shared white board application, people said they would like to have a private drawing space in addition to the public drawing space. They could make their own notes or work on their own ideas there, and then share them publicly later. This reflects what we know about how people do work in a group. People often work together but then one or two will break off and work on their own and then come back to the group to share their ideas later. It makes sense to design for this sort of behavior on an interactive collaborative system such as flxBoard.

Some people suggested using flxBoard as a workspace for a professor in a class, and whatever they wrote on their table would appear on the projector at the front of the room. We could take this one step further and have every student sitting at a flxBoard enabled table. I worked on something similar to this in the spring of 2014 for a system for a graduate level university class.

PROCESS

I decided on an iterative design process where I would design and build a working simple watch while thinking about expandability, so I could easily modify and add more features. I settled on two basic designs, one with an analog display powered by twelve RGB LEDs, and one with a digital display.

SKILLS LEARNED

I learned how to build a web application that depended on real-time communication. To do this, I learned the concept of Comet Polling, and implemented it. I also learned a lot about MySQL, from triggers to how to kill processes from the terminal. In researching better ways to do real-time communication over the web, I discovered node.js and HTML5 Websockets, and learned how to implement those, completely rewriting my application's back end in the process. Because I designed my code well, my front end was able to remain unchanged. I also learned how to deploy my application to Heroku so I could scale it.