METRO UI Hype oder Alleskönner?

Transkript

1 METRO UI Hype oder Alleskönner? Claudia Oster Usability Engineer COPYRIGHT, TECHTALK -

2 Intoi Interactive Whiteboard Touch-Interface Angepasste UI-Elemente 2

3 Themen Ein Rückblick Hands On Anwendung Was ist Metro? Elemente Weitere Entwicklungen Design & Interaktion Offene Fragen Feedback Technologien Apéro 3

4 Frankenstein Experiment? my central complaint about Windows 8 generally and Metro specifically: This is a neat thing that Microsoft s building, it really is. But it should have occurred in something outside of Windows. Windows 8 isn t even Windows anymore. It s a tablet OS that s been grafted onto Windows like a monstrous Frankenstein experiment. PAUL THURROTT, windows-8-release-preview-rip-aero

5 Fragestellungen Was ist Metro und was kann es? Metro UI Vor- und Nachteile? Anwendungsmöglichkeiten 5

6 Ein Rückblick UI Entwicklung der letzten Jahrzehnte 6

7 Ein Rückblick - GUI Xerox Star

8 Ein Rückblick - GUI Apple Lisa OS

9 Ein Rückblick die 90er Microsoft Windows NT3.1, Windows 95 & Windows 98 Mac System 7 (1991) Mac OS8 (1997) 9 Quelle Windows Screenshots: Mac System 7:

10 Ein Rückblick seit 2000 Microsoft Windows XP (2001) Windows 7 (2009) Mac OS X Cheetah (2001) Snow Leopard (2009) 10

11 aber auch 11

12 Verschmelzung von Computer, Mobiltelefon und Unterhaltungselektronik Touch vs. Mouse Angepasst Eingabecontrols (Texteingabe, Slider) Neue Konzepte: Mehrere Desktops Hidden Features / Sensitive Zones: Funktionalitäten On Demand (Swipe) Ressourcenverbrauch (chrome/aero) 12

13 Was ist Metro? Die Ideen Transportation & Reduktion 13

14 Was ist Metro? Designsprache von Microsoft: Modern & Clean - Fokus auf Schrift: Inhalt & Typographie - Klare Linien, Strukturen und Farben - Vermeiden von komplexen Grafikelementen (z.b. Verläufe / chrome) - Animationen 14

15 Die Idee from transportation to pixels Quelle: 15

16 Ursprung: Schweizer Grafikdesign Reduktion auf das Wesentliche Wichtigkeit von Typografie und Signaletik Swiss Style: Lesbarkeit und maximale Wirkung (50er Jahre, serifenlose Schriften) Veranstaltungsempfehlung: 100 Jahre Schweizer Grafik Museum für Gestaltung Zürich, bis

17 Metro UI Die Anfänge Zune Player (2006) & Software Media Center ( Vista, 2007) 17

18 Metro UI Xbox & Phone Xbox 360 (Dez. 2011) Windows Phone 7 18

19 Metro UI Windows 8 19

20 Elemente Was umfasst Metro UI? 20

21 Elemente DESIGN & INTERAKTION Guidelines, Konzepte & Ressourcen Navigation und Befehle Animation Grafik und Typografie Touch-Interaktion Skalierung TECHNOLOGIE HTML, CSS and JavaScript C#/C++/VB WinRT 21

22 Design & Interaktion Guidelines und Ressourcen 22

23 Design & Interaktion Fokus: Touch first! Navigation und Befehle Animation Grafik und Typografie Touch-Interaktion Skalierung 23

24 Navigation und Befehle Hierarchisches System Flaches System Befehlsdesign 24

25 Navigation 25 Quelle - Bilder:

26 Navigation Hierarchisches System: Master > Detail 26 Quelle - Bilder:

27 Navigation Flaches System: Seite 1, Seite 2, 27 Quelle - Bilder:

28 Navigation Horizontal scrolling 28 Quelle - Bilder:

29 Befehlsdesign 29 Quelle - Bilder:

30 Animation Randbasierte Animationen Listenanimationen Übergangsanimationen UI-Animationen 30

31 Wieso Animation? Feedback Schnelles Feedback für Aktionen Unterstützt Darstellung der Hierarchie und Visualisierung von Mental Models Ist etwas untergeordnet zum aktuellen Inhalt? Beziehen sich diese Funktionalitäten auf die aktuelle Anwendung? Öffnet sich eine neue Anwendung? 31

32 Arten von Animationen Laden von Inhalten Einblenden von Menübereichen Auswahl von Animationen muss bewusst getroffen werden! 32

33 Animationen Beispiel Internet Explorer & Store 33

34 Grafik & Typografie Grafikelemente Tiles Typografie 34

35 Grafik Design Ressourcen verfügbar! Reduziert und klar Klare Farben Einfache Verläufe Stark unterschiedlich Gestaltung der Anwendungen 35

36 36

37 37

38 38

39 39

40 40

41 Tiles App tiles & Secondary tiles Live Tiles: Tiles die aktuell Informationen anzeigen 41

42 Typografie Fonts Segoe UI für UI Elemente Cambria für lange Textinhalte Calibri für schreiben & lesen Einsatz von Größe, Position und Font-Weight (Bold) zur Strukturierung von Inhalt White space! 42

43 Touch-Interaktion Gesten Interaktions- & Lesebereich Wichtige Konzepte 43

44 Touch-Interaktion Gedrückt halten > Weitere Informationen Tippen > Hauptaktion Ziehen > Verschiebung, Zeichnen, Schreiben Streifen > Auswählen, Anzeige Befehle Drehen > Objekt rotieren Zusammendrücken/ Aufziehen > Zoom/Skalieren Vom Rand aus streifen > Anzeige Befehle (AppBar) Vom Rand aus streifen > Anzeige Befehle (Systembefehle) 44 Quelle - Bilder:

45 Wichtige Konzepte Controls für Touch-Interaktion wählen Sofort Rückmeldung geben. Interaktion soll umkehrbar sein. Zeitlich-abhängige Interaktionen vermeiden. 46 Quelle - Bilder:

46 47 Skalierung

47 Flexible Layouts 49 Quelle - Bilder:

48 Design & Interaktion Zusammenfassung 50

49 Design & Interaktion Viele Konzepte müssen berücksichtigt werden für eine USER EXPERIENCE Starker Fokus auf Touch Herausforderungen Viele Inhalte und Umsetzung datengetriebener Anwendungen Inhalte ohne visuelle Repräsentation 51

50 52 Technologien

51 Metro - Technologien WinRT API HTML 5 & JavaScript XAML & C#/C++/VB 53

52 WinRT Runtime environment für Windows 8!= Windows RT 54 Quelle - Bilder:

53 Metro Apps - Contracts Anwendung für andere Anwendung verfügbar machen Search Sharing App to app picking: Files von anderer Anwendung auswählen und verwenden. Settings Beispiel: Store -> Suche 55

54 Tools How to get started Windows SDK for Metro Style apps Online samples & tutorials Library of templates Common layout and interaction models Grid app, navigation app, and split app 56

55 Hands On Einstieg in ein Projekt (C#/XAML) 57

56 Anwendung Vor- und Nachteile Einsatzgebiete für Metro Apps 59

57 60 Vorteile

58 Vorteile des Metro UI Ein UI für verschiedene Plattformen Ein Konzept für alle Devices PC Tablet Mobile Unterschiedliche Entwicklungsplattform HTML5/Javascript C#/VB C++/C 61

59 Vorteile des Metro UI Fokus auf Inhalte Spezifische Inhalte auswählen Aufbereitete Inhalte optimal präsentieren Reduzierung der Funktionalität On Demand 62

60 63 Nachteile

61 Nachteile des Metro UI Es ist neu eventuell zu neu. Inkonsistente Anwendungen Komplett neue Interaktionskonzepte und Aufbau von Anwendungen Animationen Große Interaktionselemente 64

62 Nachteile des Metro UI Fokus auf Consumer-relevante Anwendungen Deployment grundsätzlich im Store nur für Firmen side-installation möglich Aufwand? 65

63 Nachteile des Metro UI Usability-Probleme Welche Texte sind klickbar? Wie öffnet man Menüs? Keyboard-Shortcuts 66

64 Mögliche Einsatzgebiete COPYRIGHT, TECHTALK -

65 Einsatzgebiete Zusätzliche Module für große klassische Business Anwendungen die ausgelagert werden Genehmigungsprozesse die auch Mobil erreichbar sind UI muss angepasst werden. 68

66 Einsatzgebiete Anwendungen die Benutzer aktuelle Informationen bereitstellen LiveTiles für Arbeitsvorrat Erfassung oder Bearbeitung von Informationen unterwegs UI für Tablets / mobile Touch-Devices 69

67 Weitere Entwicklungen Wo führt der Weg hin? 70

68 Weitere Entwicklungen Was ist state of the art? Inkonsistente Anwendungen Windows 8 Kinderkrankheiten Metro UI & Mausinteraktion Verbesserter Support Metro UI in Unternehmen Metro UI als Standard -Desktop? Installieren von Anwendungen 71

69 Weitere Entwicklungen Appification Wenig Funktionalitäten diese aber gut aufbereitet. Offenes: Wie werden sich Apps auf PCs entwickeln? 72

70 Zusammenfassung Was ist Metro und was kann es? Metro UI Vor- und Nachteile? Anwendungsmöglichkeiten 73

71 Danke! Fragen? 74

72 Danke! Feedback 75