Fünf Tipps für ein gutes GUI-Design bei HMI-Applikationen

In der digitalen Welt ist die Benutzererfahrung entscheidend für den Erfolg eines Produkts. Eine noch so gut durchdachte Applikation mit beeindruckenden Funktionen kann schnell an Attraktivität verlieren, wenn die Benutzeroberfläche (GUI) nicht überzeugt. Spezialdistributor Glyn ist mit über 20 Jahren Erfahrung Experte in HMI-Anwendungen.

Er gibt in diesem Beitrag Tipps und Empfehlungen, wie Entwickler mit einem guten benutzerfreundlichen GUI-Design beim Anwender punkten können.

Diese Fünf Tipps dühren zu einem überzeugenden 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 Software-Lösungen TouchGFX hilft bei der 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. Aktuell gibt es spezielle Software für diese Aufgabe.

Eine dieser Software-Lösungen ist TouchGFX und stammt aus dem Hause STMicroelectronics. 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.Der 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 (Bild 1).

Zusätzlich können den Widgets 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 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 Bild 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.

Custom Container und 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. (bs)