Information, Interaktion, Intuition: Mit Cloud-Technik zu modernen Benutzerschnittstellen.

User Interface Designer lieben Cloud-Anwendungen! Noch nie war es für uns so einfach, schöne, intuitive und hochgradig interaktive Benutzeroberflächen zu entwickeln, die nicht von einem bestimmten Betriebssystem oder Endgerät abhängig sind.

Zur Erinnerung: In der Vergangenheit sahen Anwendungen auf Windows-Systemen immer etwas anders aus als auf Apple-PCs und wieder anders als auf Unix-Rechnern – einfach, weil diese Betriebssysteme jeweils ihren ganz eigenen Satz an Interaktionselementen mitbrachten; mit anderen Farben und Formen und auch nicht immer mit denselben Möglichkeiten.

Und an die Übertragung von Benutzeroberflächen auf mehrere Geräteklassen – Laptops, Tablets, Smartphones, XXL-Displays ‑ mit ganz unterschiedlichen Bildschirmauflösungen war ebenfalls kaum zu denken, zumindest nicht routinemäßig: Einfach viel zu viel Aufwand. Schrecklich!

Cloud-Anwendungen ändern dies, weil sie für die Bildschirmausgabe und Interaktion auf HTML, die Seitenbeschreibungssprache des World Wide Webs, setzen. Und Webbrowser, die HTML-Inhalte anzeigen können, gibt es heutzutage für nahezu jedes Endgerät. Häufig sind sie als Teil des Betriebssystems vorinstalliert und sofort einsatzbereit.

HTML als Lingua Franca der Benutzerschnittstellen

Zum Hintergrund: Bei cloudbasierter Software hat man es in der Regel mit Client-/Server-Lösungen zu tun. Während das Back-End – der Server – in einem entfernten Rechenzentrum ausgeführt wird, läuft das Front-End – der Client – auf dem Endgerät des Nutzers ab.

Und so, wie Software-Container die Ausführung des Back-Ends von einer bestimmten Hardware- oder Server-Konfiguration unabhängig machen, wünscht man sich dies auch beim Front-End. Einfach, damit die Nutzung einer cloudbasierten Lösung auf Anwenderseite nicht an ein bestimmtes Endgerät oder Betriebssystem gebunden ist.

Bei vielen Cloud-Lösungen ist der eigentlichen Applikationslogik deshalb ein Webserver vorgeschaltet. Gibt der Nutzer im Webbrowser die Webadresse seiner Cloud-Lösung als URL (http://...) ein, gelangt der Aufruf zu diesem Webserver und wird von dort an die Cloud-Lösung weitergeleitet.

Alle Ausgaben der Cloud-Lösung werden in HTML formuliert und gelangen über den Webserver zurück zum Webbrowser des Nutzers. Dort erscheinen sie als die Benutzeroberfläche der Anwendung auf dem Bildschirm. Eine zusätzliche Client-Software wird nicht benötigt, solange ein Webbrowser vorhanden ist.

Ansprechend und effizient dank HTML und CSS

Die stetige Weiterentwicklung des HTML-Standards bis zu seiner aktuell gültigen Version 5 hat dazu beigetragen, dass in HTML mittlerweile alle Elemente und Funktionen für die Realisierung ansprechender und intuitiver Benutzeroberflächen zur Verfügung stehen. Millionenfach genutzte cloudbasierte Lösungen wie etwa der Facebook-Client oder Google Office machen dies deutlich.

Und während HTML die Struktur einer Bildschirmseite und deren Inhalte festlegt, bestimmen Cascading Style Sheets (CSS) das Erscheinungsbild dieser Elemente ‑ ihre Größe, Farbe, Position und vieles mehr. Cascading Style Sheets lassen sich dabei leicht zwischen verschiedenen Bildschirmgrößen umschalten, was die dynamische Anpassung von Benutzeroberflächen an den Formfaktor des jeweiligen Endgeräts extrem erleichtert.

Und CSS ermöglichen es uns als User Interface Designer, unsere Arbeit noch besser von den Anwendungs-Entwicklern – der Software den HTML-Code generiert – zu separieren, um mit ihnen Hand in Hand zu arbeiten.

Internet-Seiten, die sich wie Applikationen anfühlen

HTML-Elemente in Webseiten sind zunächst einmal statisch. Sie bleiben so, wie sie sind. Für die Anzeige interaktiver Elemente im Webbrowser kommt deshalb die Programmiersprache JavaScript als Programmiersprache ins Spiel.

Die entsprechenden JavaScript-Routinen werden gemeinsam mit den HTML-Seiteninhalten ausgeliefert. Auch dafür ist keine Software-Installation im Endgerät des Nutzers erforderlich. Als Reaktion auf die Eingaben des Benutzers verändern diese Routinen zur Laufzeit die HTML-Inhalte und bei Bedarf auch die Cascading Style Sheets, was sich unmittelbar auf die Bildschirmanzeige durch den Webbrowser auswirkt.

Und JavaScript ist auch die erste Wahl, um die Daten aus einer Cloud-Lösung im Back-End als HTML-Inhalte aufzubereiten. Bedienelemente, Listen und ganz allgemein Inhalte aus Datenbankabfragen werden so für die Darstellung in HTML umgesetzt.

Dafür haben sich verschiedene Standard-Bibliotheken etabliert, die von großen Marktteilnehmern entwickelt und der Gemeinschaft als Open Source-Lösung zur Verfügung gestellt werden, beispielsweise React von Facebook oder Angular von Google.

So entstehen im Zusammenspiel von HTML, CSS und JavaScript Lösungen, die sich nicht wie statische Webseiten, sondern wie ganz moderne, interaktive Anwendungen anfühlen.