METROfizierung industrieller Bedienoberflächen

43
Goldpartner: Veranstalter: 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)

description

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

Transcript of METROfizierung industrieller Bedienoberflächen

Page 1: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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)  

Page 2: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Spezialisierter Anbieter von UI Design Services für „Productivity-Produkte“

ERGOSIGN  

Page 3: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Spezialisierter Anbieter von UI Design Services für „Productivity-Produkte“

ERGOSIGN  

Page 4: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Spezialisierter Anbieter von UI Design Services für „Productivity-Produkte“

ERGOSIGN  

Page 5: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

METROfizierung industrieller Bedienoberflächen Chancen  und  Herausforderungen  bei  der  Anwendung  der  Windows  8  Designphilosophie  

Page 6: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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

Page 7: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

1.  Was ist METRO-Design? [ Grundlagen und kurze Einführung ]

Page 8: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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  

Page 9: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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  

Page 10: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

hHp://en.wikipedia.org/wiki/Metro_(design_language)  

Page 11: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Pride in craftsmanship Be fast and fluid Authentically digital Do more with less Win as one

Page 12: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Skewmorphismus Geschmackssache! hHp://>dbits.com/ar>cle/11150  

Page 13: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Inspiration & Ursprung hHp://spaceforfreedom.files.wordpress.com/2012/01/metro-­‐inspira>on.jpg  

Page 14: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Umsetzung hHp://so_pedia.com  

Page 15: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Win  RT  

Windows  Desktop  

2 Welten hHp://stadt-­‐bremerhaven.de/wp-­‐content/uploads/2012/08/Desktop.jpg  

Page 16: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Hub  Page  

Sec>on  Page  

Detail  Page  

hHp://msdn.microso_.com/en-­‐us/library/windows/apps/hh761500.aspx  

Screen Pattern hHp://msdn.microso_.com/en-­‐us/library/windows/apps/hh761500.aspx  

Page 17: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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

Page 18: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

2.  Stärken und Schwächen [ Eingrenzung: WinRT | Touch ]

Page 19: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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  

Page 20: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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)

     

Page 21: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Touch?!  

Page 22: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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

Page 23: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

3.  Anwendungs- gebiete in der Industrie

Page 24: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

hHp://www.dlr.de/Portaldata/1/Resources/portal_news/newsarchiv2006/gsoc_kontrollraum.jpg  

Page 25: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

hHp://www.rondo-­‐online.com/uploads/pics/Smartline_00080_02.jpg  

Page 26: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

hHp://weltderfer>gung.de/images/k1024_4-­‐2011_bild1_510.jpg  

Page 27: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Page 28: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Vorsicht bei zeitkritischer / direkter Maschinenbedienung!

Komplex   Einfach  

Bedienung   Monitoring  

Page 29: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Bedieneffekte (User) §  Allgemeine „Ent-Technisierung“ §  Spielerischer Einstieg und

Beherrschbarkeit (...insbesondere für Benutzer mit geringer Fachausbildung)

Page 30: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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  

Page 31: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

4.  Ein Beispiel [ Showcase SPS/IPC/DRIVES 2012 ]

Page 32: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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

Page 33: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

32“: Voller Umfang

Page 34: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

MODERN UI – Showcase 2/3

WinRT  Tablet  Na>ve    Monitoring  +  Rezepte  

Tablet: Monitoring & Rezepte

Page 35: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Tablet: Monitoring & Rezepte

Page 36: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Tablet: Monitoring & Rezepte

Page 37: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Smartphone: Monitoring

Page 38: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Smartphone: Monitoring

Page 39: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

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) §  Gezielter Einsatz von Pattern

Page 40: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

5.  Resume

Page 41: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

(Fast) endlich ein frisches „Window“ mit viel Potential für (manche) steinalte Strukturen in der Industrie

Page 42: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Everything is best for something and worst for something else. Bill Buxton, Microsoft

Page 43: METROfizierung industrieller Bedienoberflächen

Goldpartner: Veranstalter:

INDUSTRIAL SOFTWARE DESIGN FOR THE MICROSOFT ECO SYSTEM

Vielen Dank!