Vier Übungsaufgaben: Das Formular einer Freizeit-App wird anhand von Bewertungen und Interaktionsprinzipien analysiert, neu skizziert und getestet; eine Mitfahr-App eines Berufskollegs wird barrierefrei gemacht (WCAG-Prinzipien, Testbeobachtungen, Schrift- und Kontrastregeln, fehlerhaftes HTML, Prüfverfahren); zwei Prototypen einer Werkstatt-App werden mit Kennzahlen verglichen; für das Technikteam eines Barcamps entsteht ein Leitstand auf dem Smartphone.
Bedienelemente
Eine Anwendung kann fehlerfrei rechnen und trotzdem scheitern, weil niemand sie gern oder überhaupt bedienen kann. Dieser Artikel erklärt Usability, User Experience und Barrierefreiheit mit den passenden Normen (DIN EN ISO 9241, ISO/IEC 25010, WCAG, BITV, BFSG), zeigt die sieben Interaktionsprinzipien, Design-Richtlinien, passende Bedienelemente, typische Mängel von Oberflächen und Methoden für Usability-Tests und stellt konkrete Maßnahmen für barrierefreie Schrift, Farbe, Bedienung und Code vor.
Zwei Übungsaufgaben zum Entwurf von Benutzeroberflächen: zum Nutzen von Mockups Stellung nehmen, Wireframe, Mockup und Klickdummy unterscheiden, gewählte Bedienelemente beurteilen, ein Formular als Mockup skizzieren, Mängel eines Entwurfs den Interaktionsprinzipien zuordnen und zwei Zustände einer Seite skizzieren, Darstellungsformen Situationen zuordnen, einen persönlichen Tagesplan skizzieren, Diagrammarten zuordnen, einen Dashboard-Entwurf bewerten und eine E-Paper-Anzeige gestalten.
GUI-Seiten mit Wireframes und Mockups entwerfen
Im Design-Prozess einer GUI nutzen wir Wireframes für den Entwurf der Struktur und Gliederung und Mockups, um erste visuelle Eindrücke zu erhalten. In diesem Artikel werden die Rolle von Wireframes und Mockups beschrieben, gängige Bedienelemente und Darstellungsformen für Daten vorgestellt, das Skizzieren und Bewerten eines Mockups Schritt für Schritt gezeigt und einige Tools vorgestellt, mithilfe derer Wireframes und Mockups erstellt werden können.