Academic Research, Desktop Systems, Homework, Software

Audiofile – Experience Music through Time & Space

Old categorizations of artists into specific genres are increasingly dissatisfactory to music lovers all over the world.

Audiofile is a iTunes plugin that will add the dimensions of time and space to your music. Now, searching by continent, country or city will reveal hidden associations between artists. Zooming through out timeline will help you discover treasures of past days or encourage excited shrieks when finding odd, but fascinating contemporaries.

Read more: PDF


More on Pycessing

Here’s a Screenshot of Pycessing:

I have also produced a quick overview on Pycessing as a PDF binder, including a short guide to its corporate design:

Pycessing Quick Overview


Explore Pycessing

Pycessing Logo

Pycessing combines the programming language Python with the famous visual coding software Processing. Connecting and incorporating media into your Python-based project is easy and comfortable.


The software is available both for Mac, Windows, and Linux.


Homework, Software, Techniques for Interface Design

Endprojekt “Phoney” Android

Das MP3-Player-Mockup hier nochmal verlinkt:

Phoney Mockup from nomi sum on Vimeo.

Mockup of a vintage Android MP3-App.

Sowie das A3-Erläuterungsposter:



Final Projects

Ok.  So we talked last week about our final projects.  Here’s a few links to get you started with research and sketching:

Qt Creator can be downloaded here.

Rut – GUI for “Byron the Board”:

Konstantin – New GUI for PyCessing:

Freddie – Campus Media Channel:

Simon – Music Player for Android:

Jin – Personal Photo Collection Manager:

George – Vector Drawing Console:

Academic Research, Desktop Systems, Historic Interfaces


LifeStreams logo

LifeStreams was a project at Yale University in the mid-90s by David Gelernter and Eric Freeman.  The goal of the project was to create a new network-centric metaphor to replace the desktop.  Many of the ideas that you guys used in your Data-Overflow projects were implemented in this system almost 15 years ago!  I highly recommend reading the original paper.


For Class on 10.05.2010

NASA Appolo Computer

Please don’t forget we will be doing a critique of your ideas.  You don’t need to get fancy but you will need to have a few sketches together to present and explain your concept.  We will also try out some stop motion paper prototypes so bring paper and drawing supplies and a web cam if you have one.

Techniques for Interface Design

Stop Motion for Video Prototypes

gyro animationmouse pointer

Making a video prototype for an application can really pay off in the end when your audience understands the idea and the developers understand the work-flow.  Video is especially useful for explaining interactions in ways that are not possible using static images.  The animated nature of moving images helps highlight the movements, gestures and details involved in an interaction.  But all that filming and animation can be way too much work for an early stage prototype.

Paper prototyping on the other hand is quick, easy and highly dynamic.  So one possibility is to combine the advantages of both by using the old-school animator’s technique of stop-motion.  We begin by working through a paper prototype in a sit down brainstorming session.  Once we feel we have a firm idea, we quickly story-board a short script for our demo video.  Now we need to work out which items will be animated in each shot and roughly calculate the timing.  Then we grab a cheap web cam, some simple stop motion software (or camera) and set up a little animation stand.   Now put the “mouse” into Mickey Mouse.

The whole point is to make it quick and dirty and give the audience a good feeling for your interface design.  Your prototype is not going to be on TV in front of millions of viewers.  So, try to do it in just one or two takes.

Here’s a couple of Open Source stop motion packages:


Homework: Research for 19.04.2010

Due in class on 19.04.2010

Make one or more screenshots to document an annoying situation managing data on your computer.  It could be trying to find, organize or modify documents, images, audio, video, email or any other class of data.  Think about how this situation could be better designed both graphically and in terms of the work flow.  What were your assumptions as a user?  How could the application understand the context of your needs?  What sort of visual cues would make the solution more obvious?

Bring your screenshots and notes to class.  We will post them to the course blog.

Administration, Homework

Final Presentations

70s Era Terminal

First, there will be NO CLASS on 28.01.2010 as I will be in Boston at the TEI conference.

So we are coming up on the end of the semester.  We will have a Final Presentation on  February 4th, 2010.  For our topic “Data Overload on the Desktop” I need the following from each student or group on or before the 4th:

  • Poster: either 2x A4 pages or 1x A3 page, that presents your design solution.  Make it look nice!  The good ones will go up on the wall.
  • 3 JPEG/PNG screen shots showing examples, solution, etc.  At least 500 x 300 px.
  • Description: 200-400 words summarizing the problem, background / research and your solution.
  • PDF of your presentation slides.

The best screenshots and descriptions will go into our btk interaction yearbook.

For those of you who have not been around or have missed several class meetings, this is your chance to get things together and make sure you get a decent grade.  If you’re worried about where you stand, feel free to send me email.  And if you need to refresh your memory, the grading standards are here.  I’m looking forward to some stimulating presentations.