Interactive model-driven generation of graphical user interfaces for multiple devices

Abstract

Die Entwicklung von Graphischen User Interfaces (GUIs) ist zeitaufwändig und teuer, insbesondere wenn für dieselbe Applikation GUIs für verschiedene Endgeräte (z. B., Smartphone, Tablet oder Desktop PC) benötigt werden. Modell-getriebene GUI-Generierung erlaubt es potentiell den Entwicklungsaufwand durch automatische Transformationen von Geräte-unabhängigen Interaktionsmodellen in GUI-Quellcode zu verringern. Allerdings ist die Benutzbarkeit von automatisch generierten GUIs meist nicht zufriedenstellend. Manuelle Anpassungen erlauben es, die Benutzbarkeit zu verbessern, werden aber im Falle einer Neugenerierung üblicherweise nicht automatisch mitberücksichtigt. Diese Arbeit erweitert einen Modell-basierten GUI Generierungsansatz - die Unified Communication Platform (UCP) - um zwei Aspekte. Erstens sollte die automatische Transformation von Interaktionsmodellen in Geräte-spezifische GUIs besser unterstützt werden und zweitens sollte der Designer mehr Kontrolle über die resultierenden GUIs bekommen, um gewünschte Anpassungen schon während des Generierungsprozesses vornehmen zu können. Die automatische Anpassung des GUIs an ein bestimmtes Endgerät durch Optimierung sollte dessen Benutzbarkeit verbessern. Solch eine Anpassung erlaubt es, die Benutzbarkeit von GUIs für Geräte mit kleinen Displays (z. B. Smartphones) zu erhöhen, da diese durch ihre geringe Displaygröße stärker eingeschränkt sind als Geräte mit großen Displays (z. B. Desktop PCs). Im Allgemeinen wird solch eine automatische Anpassung nicht ausreichen, um die gewünschte Benutzbarkeit bzw. den gewünschten "Look & Feel" zu erreichen. Wir präsentieren deshalb einen interaktiven GUI-Generierungsansatz, der es dem Designer erlaubt, zwischen unterschiedlichen Anpassungsstrategien zu wählen und das resultierende GUI durch spezielle Transformationsregeln und manuelle Adaptierungen eines "Screen-basierten" GUI Models anzupassen. Die UCP-basierte Implementierung unseres Generierungsansatzes unterstützt die vollautomatische Generierung des GUI-Quellcodes und von Teilen der Applikationslogik. Basierend auf diesem Tool präsentieren wir einen iterativen und inkrementellen Prozess für Interaktionsdesign und GUI-Anpassungen, der es erlaubt, GUIs mit guter Benutzbarkeit zu entwickeln, sowohl deren Verhalten als auch deren Struktur betreffend. In einer früheren Version von UCP wurde bereits die automatische Transformation von Geräte-unabhängigen Interaktionsmodellen, sogenannten Diskurs-basierten Kommunikationsmodellen, zu Web-basierten GUIs unterstützt. UCP wurde in dieser Arbeit um ein Screen-basiertes Modell (das sogenannte Screen Modell) erweitert. Dieses Screen-basierte Modell definiert die Struktur der einzelnen GUI-Schirme. Es bildet die Basis sowohl für unsere automatische Geräteanpassung als auch für manuelle Anpassungen. Wir benutzten unseren Transformationsansatz und unseren iterativen und inkrementellen Entwicklungsprozess, welcher ebenfalls UCP nutzt, zur Entwicklung von zwei kleineren Applikationen (Flugbuchung und Fahrradverleih) und einer etwas größeren Urlaubsplanungsapplikation. Mittels dieser drei Applikationen zeigen wir die prinzipielle Umsetzbarkeit unseres konzeptionellen Ansatzes. Abschließend präsentieren wir eine Evaluierung der damit entwickelten GUIs.

Graphical User Interface (GUI) development is time-consuming and error-prone, especially if GUIs for different devices (e.g., smartphone, tablet or desktop PC) are needed for the same application. Model-driven GUI generation approaches have the potential to decrease the development effort through applying automated transformations while refining device-independent high-level interaction models to GUI source code. However, the usability of such automatically generated GUIs is typically rather low. Manual customizations on GUI models can be applied to improve the usability, but are typically lost in case of regeneration. This work extends a previous model-driven GUI generation approach - the Unified Communication Platform (UCP) - to support the automated transformation of device-independent high-level interaction models to device-tailored GUIs, and to give the designer more control over the resulting GUIs. Tailoring a GUI, through optimizing it for a specific device, improves its usability. This helps to achieve a good level of usability for devices with a small screen (e.g., smartphones), because they are more constrained in terms of screen size than devices with a large screen (e.g., desktop PC). In general, however, even an optimized GUI may still not be sufficient to achieve the desired level of usability or the desired "look & feel" of a GUI. We, therefore, propose an interactive GUI generation approach that allows the designer to select between different tailoring strategies and to customize the optimized GUI through specific transformation rules or adaptations on a screen-based GUI model. The UCP-based implementation of our conceptual approach supports the fully automatic generation of the GUI code and parts of the application back-end. Based on this tool, we defined an iterative and incremental process for interaction design and GUI customization, to achieve a good level of usability for the GUI's behavior and its structure. In its previous version, UCP already supported the transformation of device-independent high-level interaction models, so-called Discourse-based Communication Models, to Web-based GUIs. We extended UCP to provide a screen-based GUI model (the Screen Model). The Screen Model provides the basis for both, our automated approach for tailoring the GUI for a specific device, and for manual customization. We applied our new approach and our iterative and incremental development process using UCP, to develop two small applications (flight booking and bike rental), and a more elaborate vacation booking application. This allowed us to test the feasibility of our conceptual approach and to evaluate the usability of the generated GUIs.