TapTune

Das Projekt „TapTune“ ist ein interaktives Design-Projekt aus dem vierten Semester Interaction Design, vorgelegt von Elisa Gerber. Die Motivation für dieses Projekt lag darin, Menschen auf eine spielerische Weise Instrumente näherzubringen. Um dies zu erreichen ist ein Exponat mit Hands-On-Charakter entstanden. Die Besucherinnen sollen ein Handy nehmen und in die Halterung setzen, wodurch sich über einen NFC Tag eine Website öffnet. Auf dieser Website finden die Besucherinnen das Interface des jeweiligen Instruments, welches sie nun mit dem Finger oder einem der beigelegten Zubehör-Teile spielen können. Um zusätzliche Informationen zu erhalten können sie auf das Noten Symbol klicken und durch die Infoseite scrollen.

KW 29: Präsentationsvideo

Überarbeitetes Pitch Deck:

PDF

Link zum Prototyp:

Cello: https://www.figma.com/proto/ZVIDl3xcydV5XdSa1WPJkf/Prototyp-Instrument?page-id=171%3A2&node-id=171-3&viewport=226%2C157%2C0.15&t=Z9MGhpWRiTOUnSma-1&scaling=min-zoom&content-scaling=fixed

Gitarre: https://www.figma.com/proto/ZVIDl3xcydV5XdSa1WPJkf/Prototyp-Instrument?page-id=171%3A76&node-id=171-77&viewport=237%2C133%2C0.19&t=kyyoIC0JDBNMdzP9-1&scaling=min-zoom&content-scaling=fixed

Gong: https://www.figma.com/proto/ZVIDl3xcydV5XdSa1WPJkf/Prototyp-Instrument?page-id=171%3A148&node-id=171-149&p=f&viewport=290%2C45%2C0.16&t=jVxlkauPgSB42Ao4-1&scaling=min-zoom&content-scaling=fixed

KW 28: Werkschau

Am 11.07.2025 stand die Werkschau an und das Projekt musste fertig sein.

Ich habe die Folien auf Tische geklebt und die Halterungen angebracht. Außerdem habe ich die NFC-Tags beschrieben und ein paar letzte Feinschliffe am Figma-Prototypen vorgenommen

Das Exponat hat gut funktioniert auf der Werkschau. Das einzige Problem, was sich herausgestellt hat war, dass einige nicht verstanden haben, dass der Ton nur spielt, wenn sie die Fläche antippen. Viele haben versucht zu swipen oder länger auf eine Stelle zu drücken, was Figma nicht als Touch erkennt. Auch habe ich eine Person gesehen, die versucht hat ihr eigenes Handy in die Halterung zu stellen, bevor sie gesehen hat, dass ein passendes Handy vorhanden ist.

KW 27: 3D-Druck und Plotten

3D-Druck: 3 Handy Halterungen für Google Pixel 7a

Zubehör für 3 Instrumente

Plotter: 3 Instrumente (Outlines)

Probleme am Prototyp: Töne spielen nicht zuverlässig. Sehr zufällig, ob es gerade geht oder nicht. Durch Trial and Error konnten wir herausfinden, dass das Problem an Figma liegt und ich es nur halbwegs beheben kann, wenn ich die klickbaren Rechtecke dupliziere und dann erst die MP4 Dateien ersetzen

KW 26: Technikfrage

Nachdem die Woche zuvor auf Protopie alles recht gut funktioniert hatte, taucht jetzt das Problem auf, dass sich ein Ton nicht mehrmals on Tap abspielen lässt. In der kostenlosen Version kann man MP3 Dateien lediglich einmal abspielen lassen. Somit habe ich mich entschieden zu Figma zurück zu gehen, auch wenn dort kein langes Drücken oder Swipen möglich ist.

Bildschirmfoto 2025-07-08 um 09.14.38.png

Da die Instrumente auf Tische mit Folie geklebt werden, musste ich mich für Folien-Farben entscheiden. Vor Ort gab es lediglich rote Folie, weswegen ich noch zwei weitere bestellen musste. Entschieden habe ich mich für ein Türkis und ein Lila

KW 25: Informationsseiten

Bildschirmfoto 2025-07-08 um 09.10.19.png

Ich habe die Informationsseiten zu den jeweiligen Instrumenten auf Figma gebaut und sie zunächst über ein Plugin in Figma übertragen.

KW 23 & 24: Interface auf Protopie

Ich habe auf Protopie mein Interface gebaut. Dies funktioniert wesentlich besser, als auf Figma, weil Protopie viel mehr Optionen zum Abspielen von Audio hat.

Man kann jetzt:

tippen = Ton wird einmalig abgespielt

gedrückt halten = Ton wird solange gedrückt ist abgespielt

schwingen = alle Saiten werden kurz angespielt

Problem: Wie bekomme ich es hin, dass man in die andere Richtung schwingen kann und somit der Ton in der entgegengesetzten Reihenfolge abgespielt wird?

User Flow:

https://www.figma.com/proto/ZVIDl3xcydV5XdSa1WPJkf/Prototyp-Instrument?page-id=38%3A332&node-id=38-519&viewport=122%2C111%2C0.07&t=gKYc06fIpCvP2185-1&scaling=min-zoom&content-scaling=fixed

KW 22: Interface und Umsetzung

Problem mit Figma: Es spielt entweder nur jeden Ton einmal und man kann ihn kein zweites mal spielen oder es spielt falsche Töne oder es spielt von selbst oder es dauert ewig.

KW 21: Test Interface

Titelideen:

„TapTune“, „Touch'n'Play“ (Antippen = Klang)

„Hör hin!“ „Spiel' und Lern'“ (für jüngere Zielgruppe)

„Spiel das Bild“, „Berühr' den Ton“ (Anspielung auf 2D Grafik)

Auswahl: „TapTune“

Darstellung der Instrumente: Farbige Liniengrafiken

Bildschirmfoto 2025-06-03 um 09.17.06.png

Noten der Saiten des Cellos in Garage Band bauen

Bildschirmfoto 2025-06-03 um 09.14.15.png

Test in Figma:

Versuch, Sound on click/tap einzufügen

Problem: gleicher Ton spielt nicht mehrmals hintereinander

https://www.figma.com/design/ZVIDl3xcydV5XdSa1WPJkf/Prototyp-Instrument?node-id=0-1&t=hbRaCywSP36qeLE6-1

Möglichkeiten das Smartphone an der Wand zu befestigen:

-Magnet

-Halterung 3D Druck

-> entweder ganze Box drucken, die schräge Seiten hat und sich sozusagen der Wand annähert

-> oder halbe Box/Stand, bei der man Handy reinschieben kann

Form Google Pixel 7a: https://www.thingiverse.com/thing:6142115

Halbe Box: https://www.printables.com/model/976968-pixel-7a-spigen-liquid-air-vertical-nordmarke-phon

In Wand: https://www.printables.com/model/931638-in-wall-support-for-google-pixel-7a

Wie könnte man zwischen den beiden Anwendungen auf dem Smartphone switchen?

-Kamera (hell/dunkel Erkennung)

-Accelerometer (Abstand zur Wand)

-Zeit

-selbst wechseln (muss nach einer Zeit wieder von selbst auf Instrumentenansicht wechseln)

Frage: Wie könnte es gehen, dass es an der richtigen Stelle, das richtige Instrument anzeigt?

-man könnte mit RFID oder NFC arbeiten

-man könnte Zwischenseiten einbauen, auf denen der User selbst das Instrument auswählt

-man könnte Michaels Tool nutzen (in die Halterung Bilder, die von Kamera erkannt werden und dann die passende Seite öffnen)

-man könnte mit Teachable Machine arbeiten (Bilder in Halterung und es wird erkannt welches Instrument es ist)

Lösung: höchstwahrscheinlich NFC

KW 20: Mögliche Umsetzung

Bare Conductive in Verbindung mit leitfähigem Klebeband:

Funktioniert deutlich zuverlässiger.

Plektrum mit Bare Conductive: Funktioniert aus einem bestimmten Winkel, aber nicht zuverlässig

Mögliche Skizzen -> Umentscheidung Instrumente: Gong / Tam Tam statt Pauke

Test Nahfeld-Beamer:

Pro: Man kann ziemlich nah an die Wand gehen und sieht immer noch das Bild. Der eigene Schatten stört nicht wirklich.

Contra: Der Beamer stört ein wenig wenn er da steht. Man kann sich nicht wirklich vor dem Bild bewegen, ohne über den Beamer zu fallen.

KW 19: Technologien

Fragen und Probleme:

Darstellung: Wie kann ich die Instrumente am besten darstellen? Sie sollen leicht erkennbar und ästhetisch sein. Evtl ist es sinnvoll jedem Instrument eine eigene Farbe zu geben. Ein Problem ist die Perspektive der Darstellung. Bei Cello und Gitarre ist es einfach sie klar erkennbar von vorn darzustellen. Nehme ich aber als drittes Instrument die Pauke, müsste ich sie aus einer schrägen Perspektive darstellen, damit man den Körper und das Fell unterscheiden kann.

Lösung: ein anders Instrument wählen (z.B. Tam Tam, Xylophone, Glockenspiel); Versuchen eine einheitliche oder zumindest zusammen passende Darstellung zu finden

Welches Smartphone könnte man nutzen?

iPhone: gute Wahl, aber nicht genug vorhanden

Google Pixel: Hat das Pixel Magneten an der Rückseite, die ihn in der Halterung halten könnte? Scheinbar nicht, aber man kann klebende Magnet Ringe oder Hüllen nachrüsten, um eine MagSafe Technologie zu imitieren.

Da eine Idee der Umsetzung eine Projektion mit dem Beamer war, habe ich mir den Philips PicoPix Beamer ausgeliehen und getestet. Er wirft bei einem Wand Abstand von ca. 1,5m ein klares Bild auf die Wand, welches ca. 50cmx1m groß ist. Wenn ich an der Wand stehe und sozusagen mit ihr interagiere, sehe ich das Bild weiterhin recht gut und verdecke es erst, wenn ich vor der auf die Wand geworfenen Fläche stehe. Für meinen Gebrauch wäre es vermutlich nicht perfekt geeignet, da man selbst das Bild verdecken kann und die an die Wand geworfene Fläche recht klein ist.

Ich habe das Plektrum als Beispiel Zubehör für ein Instrument von Celina mit leitendem Filament drucken lassen.

Variante: Säule nutzen. Instrumente sind um Säule angeordnet. Instrumente sind an die Wand geplottet und es gibt einen Kasten, in dem ein Handy eingelegt wird. Ist das Smartphone eingelegt, zeigt es den Teil des Instruments und man kann es durch Zubehör mit leitbarem Filament spielen. Wenn man das Handy herausnimmt, zeigt es einem Zusatzinformationen zum Instrument an.

KW 18: Varianten

3D Modell Plektrum: https://www.thingiverse.com/thing:3803744

https://www.thingiverse.com/thing:378703

Variante 1:

iPad ist in Holzplatte eingebaut. Um das iPad herum ist eine Projektion von dem Instrument. Man kann das Instrument selbst auswählen. Das Instrument lässt sich auf dem iPad mit zugehörigem 3D-gedruckten Zubehör spielen. Wenn man weiter klickt bekommt man auf dem iPad Informationen zu dem jeweiligen Instrument.

Variante 2:

Die Abbildungen der Instrumente sind nebeneinander an der Wand. Das iPad kann von einem Instrument ins nächste gesetzt werden und somit das Instrument gespielt werden, wie in Variante 1.

Variante 3:

Kleine Modelle der Instrumente, die 3D gedruckt sind. Man kann sie auf eine Fläche stellen und dann spielen sie das Instrument ab. Hinter den Modellen erscheinen die Informationen, an die Wand projektiert.

KW 17: Skizzen und Storyboard

Mögliche Umsetzung:

Vereinfachte Darstellung der Instrumente Cello, Pauke und Gitarre, mit dem Folienplotter ausgeschnitten und an die Wand gebracht.

1. Die Bilder sind ausgestattet mit conductive Thread als Saiten und Conductive Paint als Fell der Trommel. Die Zubehörteile auf dem Tisch haben leitfähige Eigenschaften und können so den Sound des Instruments abspielen.

2. Ein Stromkreis wird errichtet, der bei Berührung einer Zone (z.B. Saite des Cellos) geschlossen wird. Eine solche Zone muss mit leitfähigem Material ausgestattet sein. Am Bogen ist ebenfalls leitfähiges Material angebracht. An die jeweilige Zone wird vom Mikrocontroller eine Spannung angelegt. Wenn der Nutzer den Bogen hält wird der Stromkreis geschlossen und der Mikrocontroller erkennt ein High. So kann der Sound abgespielt werden.