Grundlagen des UI Designs

Microsoft Student Partners© 2012 Microsoft Corporation. Alle Rechte vorbehalten.

Bei der Gestaltung von Benutzeroberflächen geht es nicht in erster Linie um Ästhetik, sondern darum, dass der Benutzer damit seine Aufgaben so effizient und einfach wie möglich erledigen kann.

Welche Anwendungsszenarien sollen abgebildet werden?

„Als Anwender möchte ich Tankstellen in meiner nähe finden, diese anhand ihrer Preise vergleichen und schließlich zur günstigsten oder nächstgelegenen Tankstelle navigieren können“

Anwendungs-Szenarien können also mehrere Schritte umfassen und sich auch über mehrere Bildschirme erstrecken.

Ein guter Startpunkt ist, den folgenden Satz zu vervollständigen:„In ihrer Kategorie ist meine App die beste darin….“

z.B.

„In ihrer Kategorie ist meine App die beste darin, Anwender schnell zur nächstgelegensten und günstigen Tankstelle zu navigieren.“

Wir erinnern uns:Gute Apps lösen genau ein Problem und das perfekt.

Meine App ist die beste darin, …

Wenn man sich Anwendungsszenarien für die eigene App überlegt, sollten diese stets auf das „Meine App ist die am besten darin,…“ Statement einzahlen.

Gut:

„Als Anwender möchte ich die Preise mehrerer Tankstellen vergleichen können“

Schlecht:

„Als Anwender möchte ich die Freundlichkeit des Tankstellenpersonals bewerten können“

Ausgehend von den Anwendungsszenarien, lässt sich meistens ein geeignetes Navigationskonzept finden

Das hierarchische System

DEMO

Das flache System

DEMO

Natürlich gibt es auch Kombinationen von hierarchischen und flachen Navigationsmodellen.

Mit Hilfe des gewählten Navigationsansatzes lässt sich die Struktur einer App definieren und davon ausgehend die UI-Elemente die notwendig sind, um von einer Seite der App zur nächsten zu navigieren.

Die Windows UI

Windows hat eine eigene Designsprache. Sie definiert Prinzipien, denen Windows Apps folgen sollten.

Welche Design-Prinzipien könnt ihr hier erkennen?

Sei stolz auf deine Arbeit

Weniger ist oft mehr

Schnell und dynamisch

Digital authentisch

Gemeinsam gewinnen

Sei stolz auf deine Arbeit

Wer stolz ist auf seine Arbeit hat oft auch einen hohen Anspruch daran.

Bei der Gestaltung von Benutzeroberflächen geht es um die Liebe zum Detail und darum, jeden einzelnen Schritt, den der Benutzer innerhalb der eigenen App macht durchdacht und feingeschliffen zu haben.

Typographie gehört zum Handwerkszeug eines Designers und spielt bei Windows Apps eine große Rolle. Typographie gibt Struktur und verdeutlicht die Hierarchiebeziehungen der Inhaltselemente einer Seite.

Windows 8 Apps nutzen ein einheitliches 20x20 Pixel Raster, an dem alle UI-Elemente ausgerichtet werden sollten.

Sie haben außerdem eine einheitliche Silhouette. Der Inhalt beginnt 120 Pixel vom linken und 140 Pixel vom oberen Rand.

Weniger ist oft mehr

Der Focus einer App sollte ihr Inhalt sein. Eine gut gestaltete App vermeidet Ablenkungen.

Ein RSS-Reader, wie es ihn unter Windows 7 geben könnte. Hier dominieren Steuerelemente und Trennlinien („Chrome“) das Bild.

Schnell und dynamisch

Zwischen einer Benutzerinteraktion und einer Reaktion auf dem Bildschirm dürfen höchstens 100 Millisekunden vergehen, sonst wirkt die Anwendung träge. Insbesondere bei der Touch-Bedienung ist das wichtig.

DEMO

Digital authentisch

Einem Designer steht es frei, jeden Pixel des Bildschirms zu gestalten, wie es ihr/ihm beliebt. Dabei die physikalische Welt zu imitieren wird dem Medium nicht gerecht.

Windows 8 ist bunt, flach und nutzt starke Kontraste weil es nicht versucht so zu sein, wie die physikalische Welt.

Piktogramme in Windows 7 haben Schatten, Reflexionen und Verläufe. Piktogramme in Windows 8 sind meist einfarbig und flach, tragen deshalb aber nicht weniger Information.

Gemeinsam gewinnen

Jede App ist ein Unikat und soll ein eigenes Aussehen haben. Die Windows UI Prinzipien helfen dabei, das sich die Apps trotzdem in ein „großes Ganzen“ einfügen.

Durch die Einhaltung dieser Prinzipien können Apps enger Zusammenarbeiten, ohne dass dabei optische Brüche entstehen.