Advertorial: GLYN
Fünf Tipps für ein gutes GUI-Design bei HMI-Applikationen
Erfolg in der digitalen Welt hängt von Benutzererfahrung und GUI ab. GLYN, Experte in HMI, teilt in diesem Artikel Tipps für Entwickler, um mit benutzerfreundlichem GUI-Design zu überzeugen.
Die Bedeutung von gutem GUI-Design
Egal ob Smartphone, Tablet oder industrielle Steuerung – eine durchdachte grafische Benutzeroberfläche ist entscheidend. Leider scheitern viele Produkte an mangelnder Standardisierung, fehlendem Wissen oder mangelnder Kreativität. Ein überzeugendes GUI-Design lädt den Benutzer ein, das Gerät zu bedienen, und kann somit maßgeblich über den Erfolg eines Produkts entscheiden.
Fünf Tipps für ein erfolgreiches GUI-Design
Intuitiv: Ein gutes GUI-Design ermöglicht es den Benutzern, Funktionen und Menüs schnell zu verstehen. Klare Symbole und Beschriftungen sind selbst für Personen verständlich, die sich mit der Materie wenig bis gar nicht auskennen.
Wiedererkennbar: Eine intuitive GUI erzeugt Vertrautheit. Symbole sollten aus dem Alltag bekannt sein und leicht wiedererkannt werden. Eine gründliche Recherche ist dabei unerlässlich.
Flüssig: Schnelligkeit ist entscheidend, insbesondere bei Touch-Displays. Verzögerungen von wenigen Millisekunden können störend wirken. Falls Wartezeiten nicht vermieden werden können, ist eine klare Rückmeldung in Text oder grafischer Form wichtig.
Konsistent: Die GUI sollte logisch und konsistent in Inhalt und Verhalten sein. Alle Elemente und Aktionen sollten wie aus einem Guss wirken.
Aufgeräumt: Ein aufgeräumtes Erscheinungsbild ist essenziell. Standardisierte Schriftarten, Ausrichtung, Abstände und Farben tragen dazu bei. Bei jedem Menü und jeder Seite sollte die Frage gestellt werden, ob ein bestimmtes Element wirklich nötig ist – Stichwort: Minimalismus.
Die Umsetzung
Nun stellt sich die Frage, wie Ideen möglichst schnell umgesetzt werden können. Vorbei sind die Zeiten, in denen man GUI-Elemente pixelweise programmiert und mühsam mit Funktionen und Touch-Koordinaten verknüpft. Heute gibt es spezielle Software für diese Aufgabe.
Eine dieser Software-Lösungen stammt aus dem Hause STMicroelectronics und nennt sich TouchGFX. Dieses kostenlose Grafik-Framework ist Bestandteil des STM32Cube Ökosystems. Mit Hilfe des TouchGFX Designers können Entwickler direkt am Computer die GUI ihrer Applikation erstellen. Das Framework generiert C++ Code, den der Entwickler einsehen und erweitern kann.
TouchGFX Designer beinhaltet Widgets, die per Drag-and-Drop auf dem Bildschirm platziert werden. Zu diesen Widgets gehören Schieberegler, Buttons und Menüs. Wer seine eigenen GUI-Elemente designt hat, kann diese als PNG-Datei importieren (Abb. 1). Zusätzlich können den Widgets sogenannte Interaktionen zugewiesen werden. Diese definieren u. a., was passieren soll, wenn eine Schaltfläche berührt oder ein Schieberegler bewegt wird. Zu diesen Interaktionen gehören auch die Navigation durchs Menü oder das Aufrufen einer Funktion zum Ansteuern von Hardware.
Praktische Design-Hilfen
TouchGFX bietet viele Funktionen, die das Designen von Oberflächen vereinfachen und den Zeitaufwand reduzieren.
Hilfslinien: Mit den Hilfslinien lassen sich Elemente genau positionieren und aneinander ausrichten.
Buttons: Standardmäßig können Schaltflächen mit unterschiedlichen Eigenschaften ausgewählt werden. Diese sind vielfältig in Design und Funktion.
Images: Dieses Widget ermöglicht das Einbinden von Bildern unterschiedlichster Art. Dazu gehören Hintergrundbilder und animierte Bildsequenzen.
Container: Mit sogenannten Containern können moderne Funktionen umgesetzt werden, wie man sie vom Smartphone oder Tablet kennt – Scroll-Rad, Scroll-Listen, Pop-Ups, Wischgesten, Drop-Down Menüs.
Shapes: Hierunter finden sich diverse geometrische Formen.
Progress: Texte, Kreise, Balken aber auch Bilder können genutzt werden, um einen fortschreitenden Prozess darzustellen.
Verschiedenes: Noch erwähnenswert sind Widgets wie Schieberegler (Abb. 2), Uhren, Zeiger, Graphen und Videos. Letzteres ist natürlich von der Auflösung und der Leistungsfähigkeit des Controllers abhängig.
An dieser Stelle sei auch noch der Simulator erwähnt. TouchGFX erzeugt auf Wunsch eine .exe-Datei. Diese simuliert die GUI in einer 1:1 Darstellung am PC. So kann der Code zeitnah, ohne Flashen der Zielhardware, auf seine Funktion überprüft werden. Zudem können sich mehrere Personen einen Eindruck vom Entwicklungsstand der GUI machen – ohne die Hardware vorliegen haben zu müssen.
Pflegeleichter Code
Eine besonders praktische Funktion von TouchGFX ist der Custom Container. Damit können Sie selbst Vorlagen erstellen, die dann auf jeder beliebigen Seite eingebunden werden können. Änderungen müssen so nur an einer Stelle gepflegt werden. Beispiel: Man möchte den Softwarestand (z. B. den Text „Version 1.43“) und das Firmenlogo auf allen Menü-Seiten an der gleichen Position darstellen. Bei 50 Untermenüs wäre es sehr aufwendig, jedes Mal an 50 Stellen etwas händisch zu ändern. Mit Custom Containern gelingt das in wenigen Sekunden.
TouchGFX basiert auf dem Modul-View-Presenter Prinzip (MVP). Diese Struktur trennt den hardwarerelevanten Code von allem, was mit der grafischen Gestaltung zu tun hat. So können Hardwarefunktionen eingebunden werden, ohne im gleichen Moment den Code für die GUI zu verändern. Dadurch werden nicht nur Fehler vermieden, sondern es können sich auch mehrere Personen gleichzeitig mit dem Projekt beschäftigen. Zudem ist der Code einfacher zu pflegen und erweiterbar.
STMicroelectronics liefert TouchGFX direkt mit Board-Support-Packages für die Smart Embedded® Display-Familie von GLYN aus. Eine Übersicht der Displaygrößen und Starterkits bietet GLYN auf https://www.glyn.de/produkte/displays/smart-embedded/.
SUPPORT-Aktionen zu Thema HMI bietet GLYN im Rahmen der Embedded World 2024 auf seinem Messestand in Halle 3A, Stand 3A-319.
Lesen Sie mehr zum Thema
