Abstract

Nowadays our orientation is very often not longer based exclusively on the actual geography and their landmarks. There are loads of alternatives, from street numbers to GPS routing in our smartphones, to guide us to a destination. All of those wayfinding devices have in common that they are abstracted projections of the real world’s spatial arrangement. Which brings us to two interesting implications: First, because abstraction means in this case a decrease of information, something is lost. And second, the longer you are using a device the more you accept it or get used to it. For instance the geographical structure of transportation networks are often reshaped to provide users with more understandable transit maps. These distortions have a major influence on people’s perception of a city’s geography, to the point they get stored mentally and become the collective representation of the real world’s geography.

‘Metrography’ attempts to explore this phenomenon using the most famous of transit maps: the London Tube Map.

Metrography – Print

The piece illustrates the topology of London reshaped according to the underground map. 150cm x 100cm, lambda print.

Inner city area

River around Canary Wharf

Metrography – Web Applet

Interactive version of the print, open in fullscreen

Real Geography of London’s Underground Network

Reshaped Structure According to the London Tube Map

Geography vs London Tube Map

Similar to the process of my MapMap Vauxhall project, all real world geographical locations of stations, railway tracks and thames riverbanks have been matched with the corresponding positions on the London Tube Map. In the image above this process is demonstrated, you can see the mapping of the river thames, victoria line and stations.

First video shows the mathematical deformation mesh, which is applied in the second clip to tube stations, railways and the river thames. Both videos start with the real world geography and blend then gradually over to the Tube Map structure.

With the help of the second clip it is also much easier to understand what the main deformations are. Basically the inner city parts are scaled up and the edges are compressed and marginalized.

Context

Metrography is an outcome of my Design Interactions master, the work is exhibited in the Work-In-Progress Show (1.2.2012 – 6.2.2012) at the Royal College of Art, London.

Credits

Abstract

In my ongoing Design Interactions Master my classmates and me recently had the opportunity to do an industry project in cooperation with Intel. We were asked to research, analyse, prototype, test and realize new perspectives and directions for Social Computing. The term Social Computing is very fuzzy, but refers in a general sense to the intersection between social behaviour and computational systems. According to this, pretty everything which is related to human interaction, society and culture then somehow relates to social computing. So you could imagine that the beginning of my research was quite meandering, the scope of this topic is just huge.

After a while I got interested in the area of location based social data and stigmergy. I was particular fascinated in all kinds of “space memory traces” e.g. cowpaths, shortcuts or the mechanisms of ants and pheromone traces. You could argue that the pheromone traces of ants are a form of social data and the ability of ants to “read” this location based date is just possible, because they have enhanced senses beyond the traditional ones humans possess. This thought brought me to an interesting hypothetical question:

• Is it possible to create a new human sense for social computing?
• What if humans could have a sensation of location based social data?

I was really interested in experiencing this “new” sensation personally, so I decided not to speculate too far in the future (in terms of “we all gonna have soon chip implants in our brain”). Instead I  focused in augmenting and enriching our exiting senses with an additional social computing data layer. After quite a lot of attempts like this, the Crime Sounds App was my final proposal to illustrate the idea.

Crime Sounds

Crime Sounds gives you a sense of crime around your current location by enhancing your hearing with a cinematic “soundscape”. Or, to put it in other words, Crime Sounds is literally a Sonification of the crime database published by the UK Police forces for England and Wales.

All crimes within a range of 50 meters are used to generate a soundtrack (the app loads on startup all data in a distance of 750 meters). The volume of four different instruments is controlled by the category and the amount of the crimes within the close range, all other crimes are muted. Because there are 11 crime categories in the database, which is a bit too much for an easy audible differentiation, the categories are grouped from worst to bad into 4 groups, one for each instrument.

The score for the individual soundtracks was composed by Patric Schmidt. Patric and I had quite a long discussion whether we should use abstract sounds or kinematic ones. We both had the feeling that “kinematic” is the better choice, it’s just much more legible to the users. Due to watching movies we are all able to decode immediately whether a musical score emphasis excitement, fear, danger or romance. So hopefully you can decode now easily our final samples:

• Strings
  
• Bass
  
• Drums
  
• Piano
  

Test Run

To get an impression what’s going on if you walk around in the city with crime sounds, the video below shows my test run around the RCA in South Kensington in London. I walked this route.

Implications

After wandering around some time in London with my new social sense, I had the feeling such a sense could have interesting or maybe even serious implications. The experience of specific location changes dramatically if you have an ad-hoc sense of threat and crime. I suppose that I probably wouldn’t rent a house if I had been welcomed with a crime sound. Or I thought a few times twice whether it’s really a good idea to walk further at night in some streets … The video illustrates the scenario.

Download

Crime Sounds has been submitted to the App Store and is awaiting approval.

Context

Crime Sounds is an outcome of my Design Interactions master, more background information, context, briefing, and with what my classmates came up etc. can be found in the Social Computing wiki.

Abstract

I always was fascinated by mental maps, the idea to ask a person to draw a map from memory, to get an insight of the person’s perception of the world. In my ongoing Design Interactions master we were invited to do a community related project with the local residents of Vauxhall (inner city area of South London), so finally I had a chance to engage myself in this concept.

Furthermore, I was wondering whether it is possible to go with the mental map concept one step further. My idea was not only to collect mental maps of Vauxhall, but also to combine these mental maps with real world map data to “interpolate”, or in a way, to fill the white spots of the mental maps with data of the realities. I was hoping to gain with these mashup maps new insights in terms how people “see” Vauxhall e.g.: how is the space order around them? are there things they would like to change? what is important for them? etc. Or to put it in other, more beautiful words and quote the excerpt or the book You Are Here by Katharine Harmon:

Mapmaking fulfills one of our most ancient and deep-seated desires: understanding the world around us and our place in it.

Because this seems a bit abstract at the first glance, I illustrated the idea/workflow on this poster:

Mental Map Survey

To get people to draw me their mental maps I did this little survey. This project claims not at all to be scientific, so a small sample was enough for my purpose. I ended up to have surveys like this (see below), whereas the example is a very detailed and surprisingly accurate one.

Map/Interpolate Mental to Real World

Next step was to match mental and real world maps. For this purpose I wrote two litte tools (in Processing), MapMap_App and TransformOSM_Droplet. With the first one I was able to create and save a transformation matrix, the procedere is highly subjective and envolves quite a lot of legwork. Btw. a huge thanks to Hartmut Bohnacker for helping me out with the math part, I was not savvy enough to figure it out in such a clever and smart way. The second tool processed then the delta (=transformation matrix) and the OpenStreetMap Data of Vauxhall to a last OpenStreetMap file. In the end I just had to render the file to it’s final visual representation. I decided to style the maps in the google maps style to give them a more “official” look; sidenote: it seems we are already all cognitive branded by google to their particular style. The rendering was done with Maperitive (free desktop app to styple OpenStreetMap files in a quite convenient way).

Video shows the interesting part of the process, the manual matching of the points.

Real World Map – OpenStreetMap

Untouched OpenStreetMap in Google Maps style (bounding box geo coordinates:
-0.131655135, 51.470347, -0.10908757, 51.48923637)

Mashup Maps (Selection) – Mental Maps and OpenStreetMap

Click to enlarge

Click to enlarge

Click to enlarge

Voilà, after this rather long and complicated process I’ve got just another bunch of maps. The maps didn’t  answer all questions I raised at the beginning, but after studying the maps more carefully I really appreciated the fact they look very ambivalent and “real”, which is nice because this reflects that a mental map is also some form of reality (at least of the person who drew it).

But of course you can see in the last map the limitation of the whole idea, if the delta between a mental and real map is too big, the result becomes too complex and is no longer readable. I have the feeling, that this method seems to be a nice starting point to put oneself in the position/world of participants, especially on similar macroscopic levels. Please let me know if you use my toolkit, I would love to see other results.

Download

You can download the source code of both tools (Processing sketches) at GitHub

Context

MapMap Vauxhall is my outcome of the first project of my ongoing Design Interactions master, more background information, context, briefing, and with what my classmates came up etc. can be found in the Design Philanthropy wiki.

The code for these kind of diagrams was mostly based on the programs presented in chapter M. 5 of our book, Generative Gestaltung.

Later on the design of the annual report was honored the iF communication design award.

Full documention, source code, examples etc. goes here: looksgood.de/libraries/Ani/

To get an impression what easily can be done with the library check the demos:

Ani Demo – Collage Space

Ani Demo – Valentine Drips

Language based interfaces are hip right now. Both iPhone and Android OS recently have been equipped with the ability to listen to your talk. So the technology seems to have reached a level where it’s ready to hit the consumer making it easier to communicate with certain devices and services. But the technology alone won’t do the job. It needs an appropriate interface in order for us to understand. Otherwise we won’t realise that a specific device is able to understand our commands.

For instance the Nokia N Series (N73, N80, N95 etc) has “voice recognition” included since several years but only a very few people know about that particular feature (or even use it). So we asked ourself some questions: What are the drawbacks of current voice interfaces? How can we get the human touch in language based technology? And how do we prototype these kinds of interactions in order to come up with new solutions?

How can we augment language based interfaces?

You talkin to me? Using a visual recipient for voice commands
One problem that we identified is the “recipient problem”: Who am I talking to? In which direction do I need to talk? Talking to a screen seems weird to us. The solution we came up with is using a metaphor. In our case a white rabbit.

Schau mir in die Augen, Kleines! Activating devices by looking at them
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” 10 Heuristics of Usability

Another problem we identified: the feedback! Is the device actually listening to me right now? Will the device listen to my commands all the time? Is it active? So we came up with two modes (quiet and listening) and a simple way of switching between them: Using your eyes.

• Quiet Mode: The device is “sleeping”. Nobody is looking at it so it won’t accept voice commands
• Listening Mode: Somebody is looking at it. It’s got the attention of somebody so it will actually listen to voice commands.

How can we prototype language based interactions?

Our setup: a microphone, a webcam, Macspeech Dictate, Nabaztag and a bit of hacking mindset. The quick solution for our rough prototyp: use a rabbit that knows your face! We’ve ‘augmented’ our nabaztag bunny with a webcam and used a face detection algorithm trough Processing to find out when somebody is looking straight into the eyes of our little bunny.

The result

We captured a video in order to document the setup and two simple example implementations for voice commands.

What did we learn?

• Constant feedback. After the conversation was started a constant feedback from the machine is needed like: “listening”, “understanding”, “misunderstanding”, “command was done” etc.
• Language is a fascinating additional layer to interaction design but it’s certainly not the ultimate tool for interacting with devices. A lot of contexts exist where language might not be the appropriate weapon of choice
• On the other hand some things can be expressed in language very easily (see our expample in the video)
• The technology is still not that smart like the one in Star Trek, damn. But it’s definitely a big space for innovation.
• Do we need communication patterns and standards?
• Is there a need for a set of standard vocabulary which can be used when interacting with devices? For example is there a need for some kind of standard “ping”, “help” or “Hey I’m talkin to you” command? We could use it to wake up specific devices around us?

All these findings and questions seem are certainly worth to explore. We’ll keep our ears on the ground in order to check for signals and innvations that will support these kind of interactions.

A book focused on the designer’s point of view

In 2007, Julia Laub and me got together as we were thrilled by the possibilities of this domain. We decided to use our Diploma (Generative Systems) to dive into its essentials and its underlying algorithms. A year later Hartmut Bohnacker and Claudius Lazzeroni teamed up and with the help of Verlag Hermann Schmidt we were finally able to share our thoughts and findings with the rest of the world in form of a book. “Generative Gestaltung” tries to focus especially on the designer’s point of view: the creation of images and visualisations by using code.

Visualizing ideas by using code

Image are no longer created manually but through a visual idea which is translated into rules and then implemented in a programming language in the form of source code. The result is a piece of software which hopefully creates the desired images or even permutations. To cut a long story short: design is created by coding software instead of using software. Sounds a bit abstract, hu? So what can actually be done with? Here a few possible fields of application and related best practice examples.

• Information Visualisations: Eigenfactor Eigenfactor is a interactive visualizations to explore citation patterns between scientific journals. The goal is “to map the structure of science”.
• Corporate Design: COP15 Generative identity for COP15 the United Nations Climate Change Conference held in Copenhagen in 2009. The logo Consists of 192 lines, one pr. member of the United Nations, conceiving the concept of “a world in continuous dynamic chaos unifying to the ideal constellation – a state of perfect balance”.
• Art & Photography: extracts of local distance Existing architectural photography are merged into multilayered shapes. The resulting collages introduce a third abstract point of view next to the original ones of architect and photographer.
• Rapid Prototyping / Fabbing / Fabrication: Reflection Reflection is a CNC-milled sound data sculpture, inspired by a musical piece by Frans de Waard.

… etc, there are a lot more, but i hope you see the potential.

Transforming signals and noise into information and knowledge

My motivation (as one of the authors of “Generative Gestaltung”) was to provide a solid foundation for others on how this modified design process can be used. Or in other words to empower people to do projects like the ones above. Because still a lot of designers think that coding is geeky and complicated stuff. But in my opinion it’s a powerful tool that fuels creative solutions and will help us to solve future problems. Generative Design will become more and more important in order to turn the growing numbers of signals and noise into useful information and knowledge.

A foundation to build upon

Last but not least you can get the complete source code as we’ve made it available under an Open Source License. You can grab them from the website that supports the book. We would be glad if you let us know of your experiments, ideas and explorations that might arise from our little seeds.

»In my opinion, Generative Gestaltung is by far the most exciting book that uses Processing published to date. The book is an extraordinary achievement …«

2010-08-24, Casey Reas, co-founder of processing

Generative Gestaltung (de)

Designing, Programming, Visualizing with processing
Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni (Ed.)
published by Verlag Hermann Schmidt, Mainz. ISBN 978-3-87439-759-9
www.generative-gestaltung.de | buy now at Amazon

Design génératif (fr)

Concevoir, Programmer et Visualiser
Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni (Ed.)
published by Editions Pyramid, Paris. ISBN 978-2-35017-215-6
www.generative-gestaltung.de | buy now at Amazon

Generative Gestaltung – the lecture

Because the book was a tremendous success we had the opportunity to give lots of lectures all over in Germany, Austria and Switzerland … a live recording of the lecture (german) goes here:

Generative Gestaltung at decoded 11 conference

This course aims at imparting knowledge concerning the basic principles of the three dimensional space as well as fundamental visualisation techniques to the students. The course is divided in a lecture with practical parts.

Key aspects

• conceptional development of visualisation models which are suited as demonstration of big and complex datasets
• enlargen the set of information to three or more dimensions (traditional visualisation techniques examine most of the times only the possibilites of the two-dimensional space)
• impart knowledge of analytical and methodical skills in three-dimensional thinking and visualisation

Subject of the project

Development of alternative visualisations of hierarchical data in the three-dimensional space

Currently all operating systems use as the only way to display data and folder structures lists and charts. The students develop new and  unconventional approaches to display these data structures far away from lists and charts.

Demo videos

Fabian Kreuzer + Tobias Precht

Mesut Kaya, David Ikuye + Frank Schaeffer

Anja Rapp + Benedikt Burgmaier

Daniel Höll + Philipp Seyschab

Olga Grischtschenko, Jonas Kimmelmann + Julia Staebler

Gero Nicklas, Ralf Retzler + Jan Schlegel

Alexander Wilhelm + Tobias Brossig

Christian Schaaf, Markus Schilling + Carsten Henschel

Jan Barth, Dominik Huber + Roman Grasy

Posters

Mesut Kaya, David Ikuye + Frank Schaeffer

Anja Rapp + Benedikt Burgmaier

Visualization of the proximity of the content. Press reload to load a new random set

Page context (ig.hfg-gmuend.de)

The proximity of the content aims at offering to the user an alternative possibility to navigate across the wiki ig.hfg-gmuend.de. Contrary to the conventional hierarchical way to navigate which you can find below “menu” – the focus of that kind of navigation is on the proximity of the content.

Interactions

• drag’n’drop: move and fix the nodes
• click: opens the hyperlink
• alt-click: break the fixation of the node
• Cmd/strg-click: opens the hyperlink in a new window

Proximity calculation

For the calculation of the proximity of the content we primarily needed the necessary data which are provided by the Wiki. This happens by the following way:
We query the data bank as followed: (simplified example) “dear data bank; please search all the pages in our Wiki that fulfil the following conditions”:

• at least 1 tag in common with the current page
• pages, that are linked to the current page
• pages, that are linked with outgoing links on the current page
• pages, that are at a level above in the breadcrumb-navigation

For all the Wikipages that were found, we now will calculate the Tanimoto coefficient to our current page. The Tanimoto coefficient represents the accordance of 2 sets of categories to each other. Example:
The Tanimoto coefficient of the following 2 sets

A: dog, cat, tree
And
B: dog, cat, house
Is 0,666

By applying now these calculated results; we are now able to place, categorize and filter all the provided Wikipages:

• nodes with links or back links to other nodes will be set on a higher rank
• by applying the Tanimoto coefficient, we are now able to create a ranking of all the nodes
• only nodes which correspond more than 5% to the conditions of the central node shall be provided

All the pages that fulfilled these conditions represent now our data basis in order to create our visualisation. The quality of our system depends always on the quality of the authors’ categorisation, because, without having tags we are not able to make any conclusions about the relation of the contents.

Visualization

The red node represents our current page. We call this our central node. The coloured codification – 3 different tones of grey – represent the moment of the last update (view also the legend). Principally, the distance between the nodes represents the distance of the content. Neighboured nodes therefore have the highest agreement. The branching structure of our visualisation is found because we are going in strict rotation through our ranking (ranked after the similarity to our current page). By applying the Tanimoto coefficient we are now trying at every step to find the node that fits the best and to link it afterwards with our current page. We repeat this step until we went through our complete ranking and until all the nodes are created. The positioning of the nodes is calculated by a so-called “force directed layout algorithm”. The idea is that every node repels automatically all the other nodes and every brink behave like a virtual feather. The system tries automatically to achieve a relaxed condition. That is why this algorithm is often used to create networks out of graphs.

XML interface

The data concerning the proximity of the content of a certain page are provided by a simple web service. Consequently, they easily can be found and read by a standard http search. They also can be used by every other application: The data are transferred by using a xml file.

Http Query

The http query is always done by adding “/naehe.xml after the url of a page of the Wiki.

Example: For the current page “medienlabor/inhaltliche-naehe” the url has to be http://ig.hfg-gmuend.de/medienlabor/inhaltliche-naehe.xml

XML Structure

For our current visualisation; we only have used a part of the provided data. We defined the interface as general as possible to allow creating a lot of different visualisations. The structure of a XML file is always categorized as followed:

• <naehe> root node, the highest point in the hierarchy
• <wiki_categories> all the tags of the Wiki (we didn’t use that in our current visualisation)
• <centralnode> the current page
• <breadcrumbs> all the pages of our Wiki that are higher in the hierarchy of the breadcrumb navigation
• <wiki_link_related> all the pages that are linked to our current page of the Wiki
• <category_related> all the other pages of the Wiki which possess an intersection of the tags to our current page

Source

Complete sourcecode Flex (AS 3) Project (16/12/2008).

Links

• Visualizing Data, First Edition by Ben Fry. Copyright 2008 Ben Fry, 9780596514556.
• XPath implementation for ActionScript 3.0
• German translation of this post

One of my main “side” projects running in 2008 was the conception and coordination for the new wiki of the department “Interaktionsgestaltung” (interaction design) at the HFG Schwäbisch Gmünd. Starting point was an analysis of all possible needs for the upcoming wiki:

• internal
  • project timeline and archive
  • documentation / course materials
  • stop the brain-drain (graduated students leave the school every semester)
    • project documentations
    • howtos
  • easy and comfortable transfer of knowledge
    • professor to student
    • student to student
  • collaborative working
    • research
    • process documentation -> blogs
• external
  • uncover whats going on at the HfG -> applicants
  • constant flow of attractive content for the “outside world”
  • project timeline and archive
  • establish the site as a professional problem solving site -> howto

This outline (shortened) was our basis for the final realisation.

We recognized that most of problems and needs can be categorized into these two main categories: internal and external. These two points are reflected in two slightly different views of the site. For instance the landing pages, the two right side menus, post-it box etc. change according to the user “role”. All students, faculty members etc. have an internal user role and the rest of the world an external one.

The benefit of using a wiki is to get very easy a comprehensive and permanent collection of knowledge, over all topics related to the department Interaktionsgestaltung like project documentations, technical howtos or course materials. This collaborative approach has furthermore the advantage to fulfil the internal communication need of sharing and distributing knowledge and at the same time being very attractive to an external public.

Screencast “Basic Overview” in german spoken by myself, including a funny southern accent. yeah!

Participants

Patricia Dobrindt, Miguel Nobrega, Martin Glueckler, Leandro Neves, Karl Meyer, Jonas Heuer, Eduard Warkentin, Dominic Specht, Christian van Elten, Asaad El Salawi, Ulrich Lang, Thomas Techert, Kirstin Walker, Barbara Saga, Andreas Brendle, Sandra Kuehefuss, Julian Koehn, Kathrin Guther, Johanna Stuke.

Task

We developed extensive architectural projections for the 100th anniversary of the HFG building. At the same time we got to know the visual programming language VVVV. The workshop aimed at having several possible scenarios which refer all to the architectural context of the building. A model of the building – in a scale of 1:50 – as well as all relevant parts of the building in a digital version were placed at our disposal. Therefore, we could completely focus on learning VVVV and the projections.

Setup: model, viewer and 2x projectors

Setup and model, scale 1:50

3d Matching

The key technology for the simultation of the projections on a real model is a so-called 3d matching. Basically, 3d matching means solving the question “how is it possible to bring a virtual 3d model in agreement with  real geometry?“ Because of the agreement of reality and virtuality, several completely new opportunities are provided,
Note, for example the following opportunities:

• you can illuminate a building in a way it would never be possible in reality
• the building exterior becomes a perspectively correct display
• the building or the parts of the building exterior can be extended without having to execute real changes
• the building or building exterior can be moved (compare also to kinetic building exterior)
• by a specific projection a certain kind of x-ray effect can be reached, which gives the viewer the feeling of looking into the building
• the volume of the building can be moved and documented

3d matching: real vs. virtual

#vvvv is only projected onto the cube

Workshop results

Patricia Dobrindt, Jonas Heuer, Dominic Specht und Leandro Neves

Martin Glueckler, Karl Meyer, Julian Koehn und Miguel Nobrega

Kirstin Walker und Barbara Saga

Kathrin Guther, Sandra Kuehefuss, Asaad El Salawi und Andreas Brendle

Eduard Warkentin, Christian van Elten, Ulrich Lang und Thomas Techert

Additional materials

• Initial lecture media facade
• Joreg’s links 2nd day:
  • eurekacarpark
  • moillusions.com
  • julian beever
  • 2loop.com

• Patches
• How To Project On Complex Geometry

Timelapse video over the whole 5 days