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

2. 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.

3. 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.

4. 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.“

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

6. 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“

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

8. Das hierarchische System

9. DEMO

10. Das flache System

11. DEMO

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

13. 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.

14. Die Windows UI

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

17. Welche Design-Prinzipien könnt ihr hier erkennen?

18. Sei stolz auf deine Arbeit
Weniger ist oft mehr
Schnell und dynamisch
Digital authentisch
Gemeinsam gewinnen

19. 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.

20. 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.

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

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

23. Weniger ist oft mehr
Der Focus einer App sollte ihr Inhalt sein. Eine gut gestaltete App vermeidet Ablenkungen.

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

26. 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.

27. DEMO

28. 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.

29. 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.

30. 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.