Viele analoge Werkzeuge im Umgang mit digitalen Medien sind zwar schon lange Jahre in Verwendung, aber nicht perfekt. Die Studierenden haben Human Interface Devices bearbeitet, um die Interaktion zu optimieren oder gar neu zu erfinden.
Hands on
Wie lässt sich die Steuerung digitaler Devices näher an Erwartungen und Gewohnheiten aus der analogen Welt heranbringen? Und welche Potentiale ergeben sich daraus? Jenseits der üblichen Werkzeuge wie beispielsweise Maus oder Tastatur sollten neue Bedienkonzepte entwickelt oder Bestehendes verbessert werden, um die Interaktion zwischen Mensch und Produkt zu vereinfachen oder gar neu zu denken. Die Studierenden konnten ihr Thema auf Grundlage eigener Alltagsbeobachtungen selbst wählen und mögliche Lösungen detailliert ausloten.
Sie entwickelten dazu verschiedene Gestaltungsansätze von Recherche über Konzept und Prototyping bis hin zur Evaluation. Die Aufgabe wurde kursübergreifend in „Interface Design 1“ und „Usability“ gestellt und die Entwurfsarbeit methodisch u.a. durch Nutzerbefragungen und -tests begleitet.
Prof. Michael Schuster, Prof. Carmen Hartmann-Menzel
Color Picker
Problemstellung
Oftmals sieht man Farben im echten Leben, die man gerne auf eigene Designs übertragen möchte. Versucht man dies, trifft man jedoch nicht immer den richtigen Farbton, zudem kann die herkömmliche Farbangleichung auch viel Zeit in Anspruch nehmen. Diesen Prozess wollten wir mit einem Colour Picker für das echte Leben erleichtern.
Funktionsprototyp 1
Durch regelmäßigen Input lernten wir zu Beginn vom Semester, wie man einen Arduino programmiert und verkabelt. Dieses Wissen haben wir uns zu Nutze gemacht und auf einem Breadboard einzelne Komponenten ausprobiert und selbst getestet. Zur Farberkennung haben wir einen RGB Farbsensor verwendet. Zudem haben wir eine RGB-LED für Farbfeedback mit eingebaut. Um den Prototypen funktionsfähig zu machen, verwendeten wir das Programm “MacroRecorder” für MacOS, welches wir durch simulierte Tastatureingaben durch Arduino auslösten. Das Enthaltene Makro öffnete in Photoshop das Auswahlfenster für die Primärfarbe und kopierte den HEX-Wert der gelesenen Farbe direkt dort hinein.
Designprototypen 1
Wir haben erste Designprototypen aus Schaumstoff gebaut. Es entstanden 3 verschiedene Varianten in verschiedenen Größen.
Zudem haben wir erste Renderings in Cinema4D erstellt.
Usability Test
Beim Usability Test hatten wir 4 Testteilnehmer die alle Vorerfahrung mit Bildbearbeitung hatten. Wir haben den Test in zwei Teile unterteilt, im ersten Teil testeten wir den Funktionsprototypen, im zweiten den Designprototypen.
Funktionsprototyp 2
Die Erkenntnisse die wir im Usability Test gesammelt haben, haben sich auch auf unseren Funktionsprototypen ausgewirkt.
Auf den LED Streifen haben wir verzichtet.
Zudem haben wir uns mehr Gedanken zu unserem Tastschalter gemacht. Dieser sollte wie ein Kamera Auslöser funktionieren; bei leichtem andrücken wird die Farbe anvisiert, beim durchdrücken aufgenommen. Um die Tatsächliche Funktionsweise des Prototyps herzustellen, simulierten wir diese mithilfe einer Webseite. Das Programm “P5SerialControl” kann die serielle Schnittstelle auslesen und so eine Verbindung mit unserem Arduino herstellen. Als Anzeige bauten wir mit Javascript, CSS und HTML eine Ausgabe. Die gelesene Farbe wird dort live angezeigt, wenn man den Auslöseknopf leicht drückt, und sie wird dorthin komplett übertragen, wenn man den Auslöseknopf durchdrückt. Dort erscheinen dann auch die RGB- und HSL-Werte, der HEX-Code sowie die Pantone-Farbe, falls der HEX-Code mit einem aus der Pantone-Tabelle übereinstimmt.
oben der Prototyp, unten vier Zustände der Webseite
Designprototypen 2
Aus unseren Learnings vom Usabilitytest heraus zogen wir folgende Schlüsse: Die Benutzer:innen wünschten sich, dass man ein Feedback in Form eines Farbbildschirms bekommt. Dieser sollte einen Live-Feed aus der Sicht des Sensors zeigen. Zudem wählten sie das Oval als ihren Favoriten aus, die weitere Entwicklung lief also basierend auf dieser Grundlage ab. Wir fügten eine Spitze hinzu, in der sich der Sensor befinden soll, damit man gut zielen kann.
Aufbau
Unser gesamter Funktionsprototyp war zunächst noch auf einem Breadboard gesteckt und war sehr unübersichtlich und groß. Deswegen haben wir dann unseren gesamten Prototypen auf eine Platine gelötet und uns somit viele Kabel und viel Platz gespart. Außerdem haben wir Holzplatten zugelasert um unseren Funktionsprototyp damit zu verkleiden. Um Kurzschlüsse durch berühren der Lötverbindungen zu vermeiden haben wir unseren Verkleidung noch mit Isolierband umklebt.
Tastschalter
Die Idee beim Tastschalter war es zwei unterschiedliche Tastschalter aufeinander zu kleben. Der untere löst sehr früh aus, konnte aber nach dem auslösen noch weiter runter gedrückt werden. Der daraufliegende war ein ganz normaler Tastschalter der schwerer auszulösen ist als der untere. Dadurch wurde erst der untere ausgelöst und dann der obere, ähnlich wie der Auslöser einer Kamera.
o.: Verkleidungen für den Tastschalter, l.u.: der erste Prototyp, r.u.: der finale Tastschalter
Endergebnis
Da wir unseren Color Picker nicht in echt bauen können, haben wir als Abschluss unserer Arbeit alles in einem 3D-Rendering in Cinema4D vereint.
Ausblick
Im Idealfall würden wir unser Produkt zur vollen Reife ausbauen. Wir glauben, dass unser Ansatz sehr viel Potenzial hat und eine realistische Lösung für das Problem der Farbübertragung von der echten in die virtuelle Welt darstellt.
Wir möchten das haptische Feedback des Tastschalters perfektionieren, sodass man diesen intuitiv bedienen kann. In einer weiteren Runde von Usability Tests würden wir das Thema der Ergonomie nocheinmal fokussieren. Die Elektronik würden wir verkleinern und in das ausgearbeitete Gehäuse integrieren. Wir würden zudem die Konvertierung der gelesenen Farben in Pantone und RAL perfektionieren, sodass die gelesenen Farben geeicht, genormt und eindeutig zuzuordnen sind. Technische Probleme würden wir mithilfe von Adobe selbst angehen um eine saubere und verlässliche Übertragung direkt in Photoshop zu ermöglichen.