Multi Device Controls – A Different Approach to UX

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

UX Experte und Java-Enthusiast Gerrit Grunwald war bei der JUGH in Kassel zu Gast und hat uns in die Geheimnisse digitaler Remote Controls eingeweiht.

Vergleichen wir die Nutzerzahlen von Desktops mit denen von mobilen Endgeräten, fällt eines ganz deutlich auf: Während dem Desktop der Werktagnachmittag gehört, sind Smartphones und Tablet praktisch Alleinherrscher über den frühen Morgen, den Feierabend und die Wochenenden. Wir von der JUGH haben uns gefragt: Welche Schlüsse ziehen eigentlich UX Experten daraus?

Es ist, als hätten wir mit zwei verschiedenen Generationen des digitalen Zeitalters zu tun: Während Desktop-Applikationen nur noch für Business-Anwendungen und somit im Arbeitsalltag der Menschen genutzt werden, sind mobile Endgeräte längst die Nummer eins für die digitale Freizeitgestaltung, für Social Media, Online-Shopping, Lesen, und zunehmend auch Spielen. Das hat Auswirkung auf das Erscheinungsbild von beiden: Während geschäftliche Applikationen von Textfeldern, Buttons und Drop-down-Menüs geprägt sind und ausschließlich über Tastatur und Maus gesteuert werden, verfügen mobile Applikationen über eine Vielzahl an Steuerungsmöglichkeiten und Features: Multitouch UIs, Spracherkennung, Kamerasupport, A/R-Funktionen und dergleichen.

Eine technische Apartheit, die UX-Spezialist Gerrit Grunwald von der Java User Group Münster nicht ohne weiteres hinnehmen will. In einem gemeinsamen Forschungsprojekt mit dem Fachbereich für Design und Softwareentwicklung der University of Applied Science and Arts in Northwestern Switzerland untersucht er Möglichkeiten, wie sich Desktop- und mobile Anwendungen synchronisieren und sich Desktops auch mobil ansteuern lassen. Ziel dieses UX Forschungsprojektes ist also eine digitale remote Control, über die klassische Rechner über das Smartphone oder Tablet angesteuert werden können und umgekehrt.

UX und Architektur in Version 1:

JavaFX: Java bietet mit JavaFX ein sehr gutes UX Framework zur professionellen Gestaltung und Verteilung plattform-übergreifender Java-Applikationen an. Als Nachfolger von AWT und Swing ist es heute mit das gängigste Werkzeug zur Entwicklung moderner und intuitiver Webanwendungen mit grafischen Benutzeroberflächen im OS-Umfeld. In diesem Projekt wird JavaFX für den Bau einer digitalen Remote Control verwendet, mit deren Hilfe Desktops und mobile Endgeräte synchronisiert werden können. Gleiches ginge auch mit JPRO, welches im Prinzip die gleichen Funktionalitäten bietet, allerdings rein über den Browser läuft. Für beides gilt übrigens: die Nutzeroberfläche folgt dem Material Design und ist damit auf das vertikale Format von Smartphones ausgerichtet, nicht auf das horizontale von Desktops. Für die Darstellung auf einem herkömmlichen Client sind sie also nur bedingt gut geeignet.

Gluon Mobile: Neben seiner Funktion als Plugin für verschiedene IDEs lassen sich mit Gluon Mobile nicht nur Desktop-Anwendungen bauen, sondern ihre mobilen Entsprechungen gleich mitentwickeln. Diese werden dann zu nativen Android- oder iOS-Applikationen kompiliert (Android ist eigentlich von sich aus mit JavaFX kompatibel, aber auch hier laufen die mit Gluon Mobile gebauten Apps wohl schneller und flüssiger, so ein Erfahrungswert von Gerrit). Besonderer Benefit: Wer das UI sauber von der Logik trennt, muss mit Gluon keinen Zusatzcode schreiben. Einzig das mobile UI sollte ggf. angepasst werden, da Android und iOS sich an dieser Stelle dann doch unterscheiden (aber auch das lässt sich mithilfe eines Responsive Layouts umschiffen). Weitere Vorteile sind Java end-to-end und Zugriff auf die Hardware des Mobile Devices.

Open Dolphin: Open Dolphin ist eine Servertechnologie, welche die Presentation Models der einzelnen Devices mithilfe von EventBus synchronisiert. Dazu wird lediglich die Steuerung (Control) an das jeweilige Presentation Model gebunden und kann dann via Server vollautomatisch synchronisiert werden. Nachteil: Open Dolphin benötigt einen gewissen Overhead, außerdem ist die Performance nicht auf einen hohen Datendurchsatz ausgelegt.

UX und Architektur in Version 2:

Gutes UX Design gibt sich bekanntlich nicht mit der erstbesten Lösung zufrieden – auch Gerrit Grunwald nicht. In der zweiten Version sollte nicht nur das UX schöner werden, sondern auch die Architektur insgesamt a.) für alle Standardsteuerungen mit Sonderfunktionen nutzbar sein und b.) plattform-unabhängig werden. Auszüge aus dem dafür verwendeten Technologiestack:

MQTT: Anstelle von Open Dolphin wird nun MQTT eingesetzt – ein binäres Protokoll, das ursprünglich von IBM für das Monitoring von Pipelines entwickelt wurde und, so sein erklärtes Ziel, mit sehr schlechten Internetverbindungen spielend zurechtkommt. Ideale Voraussetzungen also, um den Datenaustausch zwischen Desktop und mobilen Endgeräten effizient zu machen. Ein weiteres Plus: MQTT ist plattformunabhängig. In Verbindung mit dem Message Broker mosquitto und dessen Kapazität von 40.000 Nachrichten pro Sekunde ergibt sich ein hoch performanter Informationsaustausch zwischen den einzelnen Devices. Einziges mögliches Manko: Anders als bei Open Dolphin ist hier der Client für das Sicherstellen der Synchronität zuständig, nicht der Server. Dieses geschieht folglich nicht vollautomatisch, sondern muss nutzerseitig angestoßen werden.

JSON: Die JavaScript Object Nation (JSON) dient der Verpackung und dem Austausch von Datenformaten. Diese werden mit bestimmten Attributen versehen, hier etwa Control Type, Control ID, Number (Double oder Integer), Minimal- und Maximalwert, Einheit und Text und anschließend gebündelt als JSON-Datei verschickt.

Swift: Swift ist eine multiparadigmatische Programmiersprache von Apple, um für mobile Endgeräte Apps zu entwickeln – in dieser Version als Alternative zu JavaFX auf dem mobilen Endgerät am Start.

Polymer: Ebenfalls eine alternative zu JavaFX – diesmal für den Desktop. Um das eingangs erwähnte Problem des Material Designs zu lösen, sprich die vertikale statt horizontale Ausrichtung der App, wurde JavaFX in der zweiten Version auf dem Desktop durch Polymer abgelöst. Diese JavaScript-Bibliothek bietet die Möglichkeit, das Format der App an das Format des jeweiligen Gerätes anzupassen und macht auf diese Weise sowohl auf vertikalen Smartphones als auch horizontalen Desktops gleichermaßen eine gute Figur.

In Gerrits Beispiel weist die Remote App aka digitale Remote Control folgende Features auf: Textfelder für Nummern, für Numerik (zum Rechnen), Datum und Freitext (letzterer kann auf dem Mobile Device im Idealfall dann auch als gesprochenes Wort ausgegeben werden). Der Ablauf gestaltet sich dann wie folgt: Eingabe eines Befehls im gewünschten Textfeld der App – Verpackung als JSON-Datei – Verschickung via MQTT und mosquitto an das angesteuerte Endgerät.

Fazit

Kein Fazit. Denn das ist natürlich längst nicht alles. Um sämtliche Kniffligkeiten des Versuchsaufbaus zu meistern, waren noch weitere Technologien und Prozesse am Start, die uns Gerrit Grunwald in diesem Erfahrungsbericht praxisnah erläutert. Nebenbei gibt er sehr viele nützliche Tipps und Empfehlungen zum Thema ab. Für UX Tüftler im Webumfeld ein absolutes Must-see, findet die Redaktion.

Interesse am Thema UX oder selbst UX Experte? Dann empfehlen wir diese beiden Blogbeiträge: ProFI. Professionelles Prototyping für Ihren Projekterfolg und Ein Prototyp als Babelfisch, darüber, wie Prototyping die interkulturelle Kommunikation im Projekt unterstützt.

(jw)

Sebastian Hardt

Sebastian Hardt

Scroll to Top