Chancen und Herausforderungen bei der Anwendung der Windows 8 Designphilosophie (GUI&Design 2012)

1. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
METROfizierung industrieller
Bedienoberflächen
Chancen
und
Herausforderungen
bei
der
Anwendung
der
Windows
8
Designphilosophie
(Jan
Groenefeld
&
Sebas>an
C.
Scholz,
ERGOSIGN)
Goldpartner:
Veranstalter:

2. ERGOSIGN
INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Spezialisierter Anbieter von UI Design Services
für „Productivity-Produkte“
Goldpartner:
Veranstalter:

3. ERGOSIGN
INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Spezialisierter Anbieter von UI Design Services
für „Productivity-Produkte“
Goldpartner:
Veranstalter:

4. ERGOSIGN
INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Spezialisierter Anbieter von UI Design Services
für „Productivity-Produkte“
Goldpartner:
Veranstalter:

5. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
METROfizierung industrieller
Bedienoberflächen
Chancen
und
Herausforderungen
bei
der
Anwendung
der
Windows
8
Designphilosophie
Goldpartner:
Veranstalter:

6. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
1. Was ist METRO-Design?
2. Stärken und Schwächen
3. Anwendungsgebiete in der Industrie
4. Beispiel-Showcase
5. Resume
Goldpartner:
Veranstalter:

7. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
1. Was ist
METRO-Design?
[ Grundlagen und kurze Einführung ]
Goldpartner:
Veranstalter:

8. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
METRO Design ist wie englisches Frühstück
Geschmackssache!
hHp://img7.imagebanana.com/img/456tkdsy/DSC00686.JPG
Goldpartner:
Veranstalter:

9. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
METRO heißt jetzt
MODERN UI
hHp://cdn1.sbna>on.com/entry_photo_images/4980433/windows8_640_large_verge_medium_landscape.jpg
Goldpartner:
Veranstalter:

10. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
hHp://en.wikipedia.org/wiki/Metro_(design_language)
Goldpartner:
Veranstalter:

11. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Pride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
Goldpartner:
Veranstalter:

12. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Skewmorphismus
Geschmackssach
e! hHp://>dbits.com/ar>cle/11150
Goldpartner:
Veranstalter:

13. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Inspiration & Ursprung
hHp://spaceforfreedom.files.wordpress.com/2012/01/metro-­‐inspira>on.jpg
Goldpartner:
Veranstalter:

14. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Umsetzung
hHp://so_pedia.com
Goldpartner:
Veranstalter:

15. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Windows
Desktop
Win
RT
2 Welten
hHp://stadt-­‐bremerhaven.de/wp-­‐content/uploads/2012/08/Desktop.jpg
Goldpartner:
Veranstalter:

16. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Hub
Page
Sec>on
Page
Detail
Page
Screen Pattern
hHp://msdn.microso_.com/en-­‐us/library/windows/apps/hh761500.aspx
Goldpartner:
Veranstalter:

17. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Level 1: Process Area Overview
Level 2: Process Unit Control
Level 3. Process Unit Detail
Level 4: Diagnostics and Support
Empfohlene Hierarchie HMIs
Goldpartner:
Veranstalter:

18. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
2. Stärken und
Schwächen
[ Eingrenzung: WinRT | Touch ]
Goldpartner:
Veranstalter:

19. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Win8 als OS hat [...]
Unzulänglichkeiten.
Das hindert niemanden daran,
gute Apps dafür zu designen
hHp://cdn1.sbna>on.com/entry_photo_images/4980433/windows8_640_large_verge_medium_landscape.jpg
Goldpartner:
Veranstalter:

20. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Stärken
§ „Less Chrome. More Content“
§ Attraktives Design
§ Spielerischer Einstieg
§ Mobile first
§ Optimiert für Touch-Eingaben
§ Erhöhte Performanz (Sicherheit)
Goldpartner:
Veranstalter:

21. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Touch?!
Goldpartner:
Veranstalter:

22. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Schwächen / Herausforderungen
§ Nicht selbsterklärend
§ Einstiegshürde – Viel Neues...
§ Häufig inkonsistent
§ Orientierung leidet bei Tiefe
§ Scheinbar restriktive Pattern
§ Typographie-Fokus
§ Effizienz
Goldpartner:
Veranstalter:

23. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
3. Anwendungs-
gebiete in der
Industrie
Goldpartner:
Veranstalter:

24. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
hHp://www.dlr.de/Portaldata/1/Resources/portal_news/newsarchiv2006/
gsoc_kontrollraum.jpg
Goldpartner:
Veranstalter:

25. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
hHp://www.rondo-­‐online.com/uploads/pics/Smartline_00080_02.jpg
Goldpartner:
Veranstalter:

26. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
hHp://weltderfer>gung.de/images/k1024_4-­‐2011_bild1_510.jpg
Goldpartner:
Veranstalter:

27. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Goldpartner:
Veranstalter:

28. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Komplex
Einfach
Bedienung
Monitoring
Vorsicht bei zeitkritischer / direkter Maschinenbedienung!
Goldpartner:
Veranstalter:

29. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Bedieneffekte (User)
§ Allgemeine „Ent-Technisierung“
§ Spielerischer Einstieg und
Beherrschbarkeit
(...insbesondere für Benutzer mit
geringer Fachausbildung)
Goldpartner:
Veranstalter:

30. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Weitere
posi2ve
Effekte
(Vendor)
§ Skalierbarkeit
einer
Anwendung
über
mehrere
Geräte-­‐Klassen
bei
einheitlicher
Projek>erung
§ Programmierung
mobiler
Geräte
miHels
einheitlicher
ToolkeHe
nun
auch
auf
Windows-­‐Geräten
Goldpartner:
Veranstalter:

31. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
4. Ein Beispiel
[ Showcase SPS/IPC/DRIVES
2012 ]
Goldpartner:
Veranstalter:

32. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
MODERN UI – Showcase
§ Gezeigt auf der SPS/IPC/
DRIVES 2012 in Nürnberg
§ Applizierung von Modern UI auf
eine industrielle Anwendung
§ Erfundene Prozesskette, aber
vollständige Implementierung
mittels WPF/ WinRT/ HTML 5
und VisiWin7
Goldpartner:
Veranstalter:

33. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
32“: Voller Umfang
Goldpartner:
Veranstalter:

34. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
MODERN UI – Showcase 2/3
WinRT
Tablet
Na>ve
Monitoring
+
Rezepte
Tablet: Monitoring & Rezepte
Goldpartner:
Veranstalter:

35. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Tablet: Monitoring & Rezepte
Goldpartner:
Veranstalter:

36. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Tablet: Monitoring & Rezepte
Goldpartner:
Veranstalter:

37. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Smartphone: Monitoring
Goldpartner:
Veranstalter:

38. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Smartphone: Monitoring
Goldpartner:
Veranstalter:

39. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
(Special) Features
§ Orientierung
§ Breadcrumb-Element
§ Home-Button
§ Gesten
§ 1-Finger-Wischen
(Navigation)
§ 2-Finger-Wischen (Sprung)
§ 5-Finger-Zusammenziehen
(Home)
Goldpartner: § Gezielter Einsatz von Pattern
Veranstalter:

40. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
5. Resume
Goldpartner:
Veranstalter:

41. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
(Fast) endlich ein frisches „Window“
mit viel Potential für (manche)
steinalte Strukturen in der Industrie
Goldpartner:
Veranstalter:

42. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Everything is best for something
and worst for something else.
Bill Buxton, Microsoft
Goldpartner:
Veranstalter:

43. INDUSTRIAL SOFTWARE DESIGN
FOR THE MICROSOFT ECO SYSTEM
Vielen Dank!
Goldpartner:
Veranstalter: