Multitouch and Beyond

Physik und Multitouch

Die Multitouch-Technologie erlaubt neue und intuitive Formen der Interaktion mit Computern. Dabei werden Eingaben nicht über Maus und Tastatur getätigt, sondern direkt mit dem Finger. Neben vielen anderen Anwendungsgebieten, kann die Multitouch-Technik auch für multimediales Lernen eingesetzt werden. Besonders für exploratives und selbstgesteuertes Lernen macht dies Sinn.
TouchPhysics ist eine gesten-basierte Multitouch-Anwendung, die auf diesem Prinzip aufbaut. Dabei werden physikalische Verhaltensweisen von Objekten und ihre Auswirkungen auf andere Objekte veranschaulicht, die in der echten Welt nicht zu sehen sind. So werden zum Beispiel die verschiedenen Kräfte simuliert, die auf einen Körper einwirken.

Didaktik

Lernkarteikarte

Konkret geht es bei TouchPhysics um das Beispiel der Schiefen Ebene. Die Anwendung enthält, unter anderem, verschiedene Lernkarteikarten. Diese enthalten Erklärungen zum Themengebiet Schiefe Ebene, sowie alle nötigen physikalischen Formeln und Definitionen.  Ausgehend von den Eigenschaften der ausgewählten Objekte, werden dann die verschiedenen Kräfte dynamisch berechnet. Der Nutzer kann so beobachten, welche Parameter sich wo in den Berechnungen niederschlagen, und wie deren Auswirkung auf den gezeichneten Körper ist. Ziel von TouchPhysics ist es, das ganzheitliche Verständnis für das Thema zu fördern und interaktiv, spielerisch Wissen zu vermitteln. Es ist denkbar, dass das Physik-Lernprogramm im Unterricht verwendet wird. Ein Lehrer könnte so z.B. physikalische Berechnungen veranschaulichen. Außerdem könnte TouchPhysics als Ergänzung zum Unterricht dienen, bei dem Schüler selbstgesteuert ausprobieren und spielerisch ihr Wissen vertiefen.

Interaktion

Einstellen des Gewichts

Der Nutzer kann ganz einfach eine Kugel und eine Schiefe Ebene auf den Touchscreen zeichnen und diese mit dem Finger umher schieben. Die Elemente bekommen physikalische Eigenschaften und verhalten sich dabei ähnlich wie in der richtigen Welt. Diese Eigenschaften lassen sich direkt am Objekt ändern. So kann z.B. das Gewicht einer Kugel verstellt werden, indem der Nutzer den Pfeil der Gewichtskraft verlängert oder verkürzt. Diese Veränderung wirkt sich dabei unmittelbar auf die Interaktion aus. So wirkt eine schwere Kugel beim Bewegen träger als Leichtere. Größe und Winkel der Schiefen Ebene lassen sich ebenfalls bequem per Schieberegler verstellen.

Gestaltung

Schreibtisch Metapher

Besonderen Wert wurde bei TouchPhysics auf eine intuitive Bedienung und positive Nutzer-Erfahrung gelegt. Die Gestaltung basiert auf der Metapher eines Schreibtisches bzw. eines College-Blocks. Dadurch kann der Nutzer seine Vorerfahrungen aus der echten Welt auf das System übertragen. So verbirgt sich z.B. die Löschen-Funktion der Anwendung hinter dem Radierer, der ganz einfach auf der Zeichenfläche umher gezogen werden kann. Das Interface beinhaltet außerdem nur eine einzige Schaltfläche und lässt sich ansonsten komplett mit Bewegungen und Gesten steuern.

Umsetzung

Die konkrete Realisierung des Prototyps erfolgte auf dem ONE Multitouch-Tisch der Firma Evoluce. Die Anwendung selber wurde in ActionScript3 programmiert, wobei verschiedene ergänzende Programmierbausteine verwendet wurden. Zum einen liefert das Multitouch-Framework GestureWorks der Firma Ideum die nötigen Funktionen für die gestenbasierte Interaktion. Zum anderen ermöglicht die Physik-Engine Box2D, dass die gezeichneten Körper physikalische Eigenschaften erhalten. Zudem wurden weitere AS3-Ergänzungen verwendet, um z.B. die Objekt-Erkennung und die Funktionen von verschiedenen Interaktionselementen zu realisieren.

Allerdings konnte aufgrund von technischen Problemen und großer Komplexität nur ein Teil des ursprünglichen Konzepts umgesetzt werden. Trotzdem ist der Prototyp gut geeignet um die Grundidee der Anwendung zu erfahren und sein Physikwissen wieder etwas aufzufrischen.

Unsere Anwendung “Physik zum Anfassen” nähert sich so langsam dem finalen Stadium. Das heißt nicht, dass die Anwendung komplett umgesetzt und fertig für den Schul-Einsatz ist. Das wäre in so einer kurzen Zeit und mit den gegebenen Mitteln wohl kaum möglich. Ziel ist es, einen funktionsfähigen Prototypen zu erstellen, an dem sich unser Konzept erleben lässt. Und diesem Ziel sind wir schon sehr nahe. Hier ein paar aktuelle Screenshots:

Interfacedesign mit einer Schreibtisch-Metapher

Verstellen des Gewichts der Kugel über den Gewichts-Pfeil

Verstellen der Schiefen Ebene mit Schiebereglern

Die Schriftsuche ist immer die Qual der Wahl. Wir haben uns für zwei Schriften entschieden, die gut unterstreichen, was wir vermitteln möchten:

Hanoded Hand

Hanoded Hand

Zum Einen gibt es den Kritzel-Look, der in Überschriften und Beschriftungen auf dem Papier eingesetzt wird. Hier haben wir uns für die Schrift “Hanoded Hand” entschieden. Die Schrift ist schwungvoll, dynamisch und wirkt hand-geschrieben. Dadurch stellt sie die Verbindung zur restlichen College-Block-Gestaltung her.
Die Schrift ist für private Verwendung kostenlos und kann direkt von www.dafont.com heruntergeladen werden.

Rotis Sans Serif

Rotis - Sans Serif

Für die Verstell-Elemente (z.B. bei der Kugel) findet die “Rotis Sans Serif” Einsatz. Sie wirkt schlicht, offen, klar und bildet gleichzeitig  einen guten Kontrast zur “Hanoded Hand”. Darüber hinaus hat sie eine hohe x-Höhe, was sie gut lesbar macht. Die Schrift ist außerdem in verschiedenen Schriftschnitten verfügbar und so sehr vielfältig einsetzbar. Zum Beispiel lassen sich Hervorhebungen und visuelle Gewichtungen gut mit dieser Schrift lösen. Auch die längeren Texte und Formeln auf den Karteikarten werden deshalb in der Rotis geschrieben. Nähere Informationen zur berühmten Rotis-Schriftfamilie von Otl Aicher gibt es bei Wikipedia.

Interfacedesign der Anwendung

Wie bereits erwähnt, haben wir uns parallel zur Programmierung auch eine Menge Gedanken über die Gestaltung der Oberfläche gemacht. Wir haben viel an Feinheiten gearbeitet. Unter anderem wurden die “Karteikarten” auf eine angenehme Größe gebracht und wir haben der Umgebung gearbeitet, um den Gesamteindruck rund erscheinen zu lassen.

Darüber hinaus haben wir uns auch grundlegenderen Themen gewidmet, wie dem Konzept der Interaktionsgestaltung. Zum einen soll der Zeichen-, bzw. Kritzellook dazu animieren herum zu experimentieren und mit den Elementen viel auszuprobieren. Dies wird durch die Verbindung zu dem Collegeblock hergestellt, der an die Schulzeit erinnert. Zum anderen wollen wir durch die Gestaltung deutlich machen, welche Elemente im “wahren Leben” nicht sichtbar sind und welche Elemente nicht direkt, sondern nur durch das Verändern von Einheiten und Parametern zu beeinflussen sind. Dazu haben wir einen Look gewählt, der dem nahe kommt, was man aus der Webseitengestaltung kennt. Nicht so haptisch anmutend sondern mit glatten, leicht transparenten Oberflächen.

Ein Element, was sich jedoch durch alle Bereich durchzieht, sind die Anfasser. Sie bestehen aus zwei oder drei Vertiefungen in dem Element, und zeigen dem Nutzer, dass er hier etwas bewegen, schieben oder ziehen kann. In welche Richtung dies möglich ist, wird durch die Gestaltung der Regler verdeutlicht.

Die Kugelmasse

Verstellen der Kugelmasse

Darüber hinaus war eine Schwierigkeit das Verstellen der Kugelmasse zu visualisieren. Wir sind von unserer ersten Idee wieder abgekommen, dies über einen Regler um die Kugel herum umzusetzen. Statt dessen macht es viel mehr Sinn den Kraftvektor der Gewichtskraft selbst zu verkürzen oder zu verlängern und damit die Masse der Kugel zu beeinflussen. Das ist möglich, da die Beschleunigung der Kugel, (die Erdanziehung) unter unseren Umständen immer konstant bleibt.

Tippt man nun auf die Kugel oder direkt auf den Kraftvektor, erscheint eine Skala neben dem Vektor, um die Länge besser zuordnen zu können. Die Skala beginnt unmittelbar auf der Höhe des Kugelmittelpunkts. Die Schwere der Kugel soll nach wie vor zusätzlich über den Blauwert der Kugel visualisiert werden (wurde auf dem Screenshot noch nicht umgesetzt). In Zahlen ausgedrückt steht das Gewicht der Kugel direkt am Anfang des Kraftvektors, extra hervorgehoben. Auch die Farbe von Kraftvektor und Kilogramm-Anzeige wurde bewusst gewählt. Sie entspricht der Farbe der Karteikarte, die die Gewichtskraft einführt und erklärt. Ebenso ist dies bei Hangabtriebskraft und Normalkraft gelöst.

Abgeblendeter Hintergrund

Beim Einstellen der Kugelmasse sind alle in dem Moment unwichtigen Dinge abgeblendet. Zum einen, damit der Nutzer dabei nicht zu sehr von anderen Dingen gestört wird, zum anderen,  damit der Prozess des Verstellens deutlich wird.

Design von Kugel und Schiefer Ebene

Kritzel Kratzel, hin und her, jetzt haben wir endlich unsere Gestaltung der Elemente. Die Schwierigkeit bestand darin, dass sie schnell gezeichnet aussehen sollen, da der Nutzer selbst die Kugel und die Schiefe Ebene auf den Tisch zaubert. Für die physikalischen Experimente müssen die Elemente jedoch auch exakt sein.

Wir haben uns nun für einen “Scribble Look” entschieden, der frisch, dynamisch und vor allem ge-scribbled aussieht. Die Gestaltung trägt außerdem dazu bei, dass der Nutzer sieht wie schnell sich eine Kugel dreht.

Heute gibt’s eine kleine Video-Demonstration vom bisherigen Stand unserer Anwendung:

[swfobj src="http://www.info-design.net/multitouch/wp-content/uploads/2010/06/2010-06-12_1235.swf" alt="TouchPhysics Video Demo - Flashplayer nötig!" width="580" height="400"]

(Die Performance der Anwendung lässt noch etwas zu wünschen übrig. Das liegt im Video zum einen an der Screencasting-Software, zum Anderen müssen wir uns aber generell erst noch um Performance-Optimierung kümmern.)

Bisher implementierte Funktionen:

• Zeichnen: Gesten-Erkennung für Kugel + Schiefe Ebene
• Objekte: Erzeugen entsprechender Objekte basierend auf Größe und Position der Zeichnung
• Physik: Physik-Engine mit Erdanziehungskraft und Kollisionserkennung
• Objekt-Manipulation: Drag n’ Drop, Löschen per Doppel-Tap
• Steuerung: Pausieren der Physik-Welt

Keine Objektorientierung mehr

Zur Umsetzung ist noch zu sagen, dass wir uns von einer Objektorientierten Programmierung wieder entfernt haben. Unser Überlegungen bzgl. Klassen- und Vererbungsbeziehungen waren zwar der “saubere” Ansatz eine solche Anwendung zu programmieren, aber in der Umsetzung deutlich komplexer als erwartet.  Vor Allem die Kommunikation zwischen unabhängigen Klassen (was für die Integration von Box2D unbedingt nötig ist) hat uns große Probleme bereitet.
Wir haben uns deshalb entschieden nur noch einen “Minimal-OOP-Ansatz” zu verfolgen und haben (fast) alle Funktionen, etc. wieder in unsere Dokumentenklasse geschrieben. Das ist zwar nicht besonders elegant und widerspricht dem eigentlichen Sinn der Objektorientierung aber es funktioniert (für uns) einfacher!

Gestaltung

Das Video demonstriert nicht nur die Funktionen unserer Anwendung, sondern ist auch eine kleine Vorschau auf die Gestaltung. Wir haben uns in den vergangen Tagen viele Gedanken zu Interaktionselementen, Farben, Formen, Typografie, etc. gemacht. Unser Ziel ist ein Spagat zwischen dem Look and Feel einer Handzeichnung und, aus dem PC Bereich, bekannten Elementen zur Interkation. Näheres dazu in Kürze!

Oberflächengestaltung - Entwurf mit Pappe

Die Oberfläche hat sich noch ein wenig weiter entwickelt. Nun ist die Optik des Papiers noch einmal überarbeitet worden und die Boxen in Form von Karteikarten, die den Inhalt transportieren sollen, haben schon mal ein erstes Äußeres bekommen.

Die Karteikarten sind auf der Oberfläche frei bewegbar, sie sind beliebig ein- und ausklappbar und können auch außerhalb des Papiers platziert werden. Die physikalischen Objekte werden jedoch durch das Blatt Papier begrenzt.

Für den Hintergrund haben wir einiges ausprobiert. Von einfarbig über Verläufe und leichten Strukturen, bis hin zur Pappe ist alles mal da gewesen. Leider wirkt alles entweder zu unruhig, oder langweilig.

Oberflächengestaltung - Entwurf mit Holz

Da wir die anfänglich eingesetzte Holzstruktur sehr schön finden, haben wir nun versucht durch dunklere Farben einen stärkeren Kontrast zu dem Papier herzustellen und dem Holz an sich nicht so kontrastreiche Farben zu verleihen. Dadurch wird das Papier und alles darauf liegende trotz Struktur im Hintergrund in den Fokus gerückt.

Über das Aussehen der Kugel und der Schiefen Ebene müssen wir uns noch mal Gedanken machen. Auch die Schrift wird evtl. noch bearbeitet bzw. auf jeden Fall um eine serifenlose Schrift ergänzt, in der die Inhalte geschrieben werden.

Nicht nur technisch, auch in der Darstellung der Multitouchanwendung sind wir am Tüfteln und Ausprobieren. Da das Thema der Anwendung aus dem Schulischen kommt, wollen wir auch durch die Gestaltung an Schulzeiten erinnern. Um den Nutzer später mehr zum Ausprobieren und Experimentieren zu animieren, soll das ganze auf einem Papier stattfinden und einen “Kritzel Charakter” bekommen. Dafür haben wir uns für ein zerknittertes Karo-Papier als Experimentierfläche entschieden.

Ein erster Entwurf der Oberfläche

Darüber hinaus  sollen die gezeichneten Objekte auch eine gezeichnete Optik erhalten. Formeln, Herleitungen und Definitionen werden auf Karteikarten stehen, die der Nutzer so ein und ausziehen kann, wie er es benötigt.

Nach der Analyse des ersten Enwurfs haben wir uns für grade Kanten des Blattes entschieden. Auch der Untergrund des Blattes soll eine weniger auffällige Struktur bekommen und nicht aus Holzmaserungen bestehen. Die Elemente werden neu gestaltet und die Karteikarten werden entworfen.