Multitouch and Beyond

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.

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.

Wie bereits erwähnt soll die Masse der Kugel auf der schiefen Ebene verstellbar sein, sodass sich dadurch Auswirkungen auf andere Größen ergeben. Wir haben einige Visualisierungen der Einstellung durchgespielt und finden folgende für am Besten geeignet:

Schieberegler zum Einstellen der Masse

Sobald auf die Kugel getippt (“geklickt”) wird, erscheint ein größerer Einstellungsring um die Kugel herum, der die Kugel in sein Zentrum nimmt. Durch einen Schieberegler auf dem Ring kann nun das Gewicht und damit die Masse der Kugel verstellt werden, da die Kugel an sich nur schwerer und nicht größer wird. Wird der Schieberegler mit dem Uhrzeigersinn bewegt gewinnt die Kugel an Masse, gegen den Uhrzeigersinn verliert sie an Masse. Das aktuelle Gewicht der Kugel wird in Kilogramm über der Kugel angezeigt.

Die Masse wird durch Farben zusätzlich visualisiert. Es gibt Einstellungsmöglichkeiten zwischen 1 und 25kg. Dabei reicht das Farbspektrum von Hellblau (sehr leicht) über Blau (leicht), Dunkelblau (schwer) nach Schwarz (sehr schwer).

Tippt man erneut auf die Kugel, wird die Einstellung gespeichert und der Einstellungsring verschwindet.

Grobkonzept

Jetzt kommt das Grobkonzept auf den Tisch:

Die schiefe Ebene und die Kugel sollen durch den Nutzer erst einmal per Gestenerkennung auf den Tisch gezeichnet werden. Wie das funktioniert, lässt sich in vorherigen Blogeinträgen nachlesen. Das Konzept sieht vor, dass der Nutzer nur die Basisgrößen direkt verändern kann. Also Höhe und Länge der schiefen Ebene, sowie auch die Masse, indem er das Gewicht der Kugel verändern kann. Diese Größen lassen sich auch in der richtigen Welt verändern. Indirekt beeinflusst er durch eine Änderung natürlich auch bspw. den Winkel der schiefen Ebene oder die Geschwindigkeit der Kugel. Allerdings soll dies immer nur ein Resultat anderer Veränderungen sein.

Die schiefe Ebene ist im rechten Winkel fix, die anderen Winkel sind jedoch über die Anfasser an den Ecken verstellbar, indem eine andere Höhe oder Länge der schiefen Ebene eingestellt wird.

Die weitere Wissenvermittlung soll immer mehr an Abstraktion gewinnen. Der Erkärungs- und Berechnungs-Prozess ist in einzelne Bereiche untergliedert, die in verschiebbaren Boxen dargestellt werden. Diese sind jedoch, unabhängig davon wo sie hinverschoben werden, mit Pfeilen verbunden, sodass man einen roten Faden aufgezeigt bekommt, der Schritt für Schritt, Wissen vermittelt. Die Bereiche sind folgendermaßen aufgeteilt:

1. Größen, Basisgrößen (Erklärung und Berechnung von Länge, Masse, Höhe);
2. Größen, abgeleitete Größen (Erklärung und Berechnung von Kraft und Gewichtskraft);
3. Kraftzerlegung (Erklärung und Berechnung von Hangabtriebskraft, Normalkraft);
4. Einheiten, Formeln (Erklärung und Berechnung von Geschwindigkeit, Beschleunigung, etc.,  ohne Reibungskräfte und bei gleichbleibender Beschleunigung mit den Bedingungen auf der Erde)

Gestaltung

Gestalterisch haben wir uns auch schon ein paar Gedanken gemacht. Das ganze soll das “Look and Feel” eines typischen Collegeblocks bekommen. Dies kann z.B. durch Strichzeichnungen und einem Hintergrund aus zerknüllten Papier geschehen. Die Anwendung soll an schulische Zeiten erinnern, gleichzeitig das Thema aber auflockern und spielerisch darstellen. Durch die Gestaltung der Anwendung wollen wir die Nutzer auch zum Experimentieren, “Kritzeln” und Entdecken animieren.

Es hat sich was getan auf unserem Blog. In den letzten Tagen hat dieser sich nicht nur mit Inhalt gefüllt, sondern auch einen neuen Anstrich bekommen. Wir haben das ursprüngliche Template “SimpleX” nicht nur auf Deutsch übersetzt, sondern auch Typografie und Erscheinungsbild überarbeitet. So passt das Design nun viel besser zum Thema Multitouch. Nebenbei haben wir auch das Eine oder Andere über das WordPress CMS gelernt.

Da das Entwickeln bzw. Überarbeiten von Templates für WordPress mitunter knifflig sein kann, gibt’s im Folgenden ein paar hilfreiche Links:

• WordPress auf MacOS lokal installieren: MAMP (Server-Emulation)
• Ausführliche Dokumentation für WordPress: WordPress Codex
• Nützlicher Helfer für’s Coden: Web Developer Add-on für Firefox

Außerdem ein paar gut-funktionierende Plug-Ins:

• Lightbox für Bilder: Lightbox 2
• Search Engine Optimization: All in One SEO Pack
• E-Mail Adressen verschlüsseln: CryptX