WARUM?
Menschen lieben gute Interfaces
STUDIE
Gute Interfaces erobern Märkte
           Quelle: admob
iPhone OS   RIM OS        Windows Mobile OS   Palm OS   Android
Hiptop OS   Symbian OS




                         STUDIE...
iPhone OS   RIM OS         Windows Mobile OS     Palm OS   Android
Hiptop OS   Symbian OS



                             ...
INTERFACE
INTERFACE
INTERFACE


Ding 1
INTERFACE


Ding 1
INTERFACE


Ding 1               Ding 2
INTERFACE


Ding 1               Ding 2
INTERFACE


Ding 1                     Ding 2
           Schnittstelle
INTERFACE


Ding 1                     Ding 2
           Schnittstelle



Mensch
INTERFACE


Ding 1                     Ding 2
           Schnittstelle



Mensch        Grafik
INTERFACE


Ding 1                      Ding 2
           Schnittstelle



Mensch                     Computer
           ...
INTERFACE


 Ding 1                        Ding 2
              Schnittstelle



Mensch                        Computer
  ...
INTERFACE


 Ding 1                        Ding 2
              Schnittstelle



Mensch                        Computer
  ...
INTERFACE


 Ding 1                         Ding 2
              Schnittstelle



Mensch                         Computer
...
WARUM GIBT ES SO VIELE
   MITTELMÄSSIGE
  SCHNITTSTELLEN?
1958, Deutsches Bundesarchiv Bild 146-1969-169-19
1958, Deutsches Bundesarchiv Bild 146-1969-169-19




„Natürlich können Sie
dem Lu fahrtministe-
rium ein Flugzeug mit
all...
MENTALE MODELLE
Kann man sich vorstellen, dass ein Designer
einem Benutzer erklärt, wie der Programmierer
die Idee des Kunden umgesetzt ha...
DING 1: MENSCH
DING 1: MENSCH

Die grobe Konfiguration ist in den meisten Fällen identisch, aber
      nicht immer gleich leistungsfähig (...
DING 1: MENSCH

Die grobe Konfiguration ist in den meisten Fällen identisch, aber
      nicht immer gleich leistungsfähig (...
DING 1: MENSCH

Die grobe Konfiguration ist in den meisten Fällen identisch, aber
      nicht immer gleich leistungsfähig (...
DING 1: MENSCH

Die grobe Konfiguration ist in den meisten Fällen identisch, aber
      nicht immer gleich leistungsfähig (...
DING 1: MENSCH

Die grobe Konfiguration ist in den meisten Fällen identisch, aber
      nicht immer gleich leistungsfähig (...
DING 2: COMPUTER
DING 2: COMPUTER


   Bildschirm, Maus, Tastatur
DING 2: COMPUTER


           Bildschirm, Maus, Tastatur

Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast
DING 2: COMPUTER


           Bildschirm, Maus, Tastatur

Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast

  Eingabe: Spra...
DING 2: COMPUTER


              Bildschirm, Maus, Tastatur

   Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast

     Eing...
DER INTERFACE DESIGNER
Wer glaubt, die Gestaltung einer
Schnittstelle erfordere die alleinige
Kenntnis von Ding 1 oder Ding 2?
Um eine Schnittstelle zu gestalten,
    muss man alle relevanten
Informationen über beide Seiten
           besitzen!
KENNTNISSE EINES
INTERFACE DESIGNERS
KENNTNISSE EINES
INTERFACE DESIGNERS
       Gestaltung
KENNTNISSE EINES
INTERFACE DESIGNERS
       Gestaltung
       Heuristik
KENNTNISSE EINES
INTERFACE DESIGNERS
       Gestaltung
        Heuristik
       Psychologie
KENNTNISSE EINES
INTERFACE DESIGNERS
       Gestaltung
        Heuristik
       Psychologie
       Archivierung
KENNTNISSE EINES
INTERFACE DESIGNERS
       Gestaltung
        Heuristik
       Psychologie
       Archivierung
      Medi...
KENNTNISSE EINES
INTERFACE DESIGNERS
       Gestaltung
        Heuristik
       Psychologie
       Archivierung
      Medi...
KENNTNISSE EINES
INTERFACE DESIGNERS
       Gestaltung
        Heuristik
       Psychologie
       Archivierung
      Medi...
Das Interface ist das Produkt, soweit
 der Nutzer das beurteilen kann.
TOLERANZ UND
 MOTIVATION
TOLERANZ UND
        MOTIVATION


Je komplexer das Interface, desto weniger Toleranz.
TOLERANZ UND
             MOTIVATION


    Je komplexer das Interface, desto weniger Toleranz.

Je stärker die Motivation,...
BEISPIEL 1
BEISPIEL 1


Starkes Bedürfnis
BEISPIEL 1


       Starkes Bedürfnis

Eindeutige, sichere Befriedigung
BEISPIEL 1


             Starkes Bedürfnis

      Eindeutige, sichere Befriedigung

Qualität des Interface ist absolut na...
BEISPIEL II
BEISPIEL II


Starkes Bedürfnis
BEISPIEL II


       Starkes Bedürfnis

Eindeutige, sichere Befriedigung
BEISPIEL II


          Starkes Bedürfnis

  Eindeutige, sichere Befriedigung

Erforschung des Interface ist das Ziel
MÖGLICHKEIT 1
Man ist in der Lage, perfekte, bahnbrechende
          Schnittstellen zu gestalten.
MÖGLICHKEIT 2
Man ist nicht in der Lage, perfekte, bahnbrechende
            Schnittstellen zu gestalten.
BEST PRACTICES
ANTIZIPATION
ANTIZIPATION


  Zielgruppe kennen
ANTIZIPATION


    Zielgruppe kennen

Relevante Werkzeuge geben
ANTIZIPATION


     Zielgruppe kennen

 Relevante Werkzeuge geben

Relevante Informationen geben
VERTRAUTHEIT
VERTRAUTHEIT



Kognitiven Aufwand reduzieren
VERTRAUTHEIT



 Kognitiven Aufwand reduzieren

Eine vertraute Umgebung schaffen
EINFACHHEIT
EINFACHHEIT


Nicht zu viele Entscheidungen
EINFACHHEIT


Nicht zu viele Entscheidungen

  Nicht zu viele Angebote
EINFACHHEIT


           Nicht zu viele Entscheidungen

              Nicht zu viele Angebote

Jedes Element der Anwendung...
WAS ANBIETER WOLLEN:
WAS NUTZER WOLLEN:
WAS DESIGNER WOLLEN:
WAS KUNDEN WOLLEN:
VERFÜGBARKEIT
VERFÜGBARKEIT


Das Interface muss ständig verfügbar sein
VERFÜGBARKEIT


     Das Interface muss ständig verfügbar sein

Die Ladezeit muss im Verhältnis zum Ergebnis stehen
VERFÜGBARKEIT


          Das Interface muss ständig verfügbar sein

     Die Ladezeit muss im Verhältnis zum Ergebnis ste...
MODUS
MODUS


Der Nutzer muss jederzeit wissen, in welchem Modus das
                 System sich befindet
MODUS


  Der Nutzer muss jederzeit wissen, in welchem Modus das
                   System sich befindet

Der Verzicht auf ...
http://www.flickr.com/photos/lincolnose2/2317699857/
FEHLERTOLERANZ
FEHLERTOLERANZ

 Machen Sie Aktionen umkehrbar
FEHLERTOLERANZ

 Machen Sie Aktionen umkehrbar

 Erlauben Sie immer „Rückgängig“
FEHLERTOLERANZ

 Machen Sie Aktionen umkehrbar

 Erlauben Sie immer „Rückgängig“

 Bieten Sie immer einen Ausweg
FEHLERTOLERANZ

              Machen Sie Aktionen umkehrbar

              Erlauben Sie immer „Rückgängig“

              ...
FEHLERTOLERANZ

               Machen Sie Aktionen umkehrbar

               Erlauben Sie immer „Rückgängig“

            ...
KONSISTENZ
KONSISTENZ


Einen stabilen Rahmen bieten (Styleguide)
KONSISTENZ


 Einen stabilen Rahmen bieten (Styleguide)

Geregelte Konsistenz wenn Dinge gleich sind
KONSISTENZ


      Einen stabilen Rahmen bieten (Styleguide)

     Geregelte Konsistenz wenn Dinge gleich sind

Geregelte ...
STATUS
STATUS

Der Status eines Systems muss auf den ersten Blick ersichtlich
                           sein
STATUS

Der Status eines Systems muss auf den ersten Blick ersichtlich
                           sein

   Browserbasierte...
STATUS

Der Status eines Systems muss auf den ersten Blick ersichtlich
                           sein

   Browserbasierte...
AUTONOMIE
AUTONOMIE


Der Benutzer sollte das Interface kontrollieren, nicht das
               Interface den Benutzer
AUTONOMIE


Der Benutzer sollte das Interface kontrollieren, nicht das
               Interface den Benutzer

Zu wenig Fre...
AUTONOMIE


Der Benutzer sollte das Interface kontrollieren, nicht das
               Interface den Benutzer

Zu wenig Fre...
METAPHERN
METAPHERN

Metaphern aktivieren Sinne: Sehen, Hören, Berührung
METAPHERN

  Metaphern aktivieren Sinne: Sehen, Hören, Berührung

Metaphern müssen angemessen sein und zur Aufgabe des
   ...
METAPHERN

  Metaphern aktivieren Sinne: Sehen, Hören, Berührung

Metaphern müssen angemessen sein und zur Aufgabe des
   ...
METAPHERN

  Metaphern aktivieren Sinne: Sehen, Hören, Berührung

Metaphern müssen angemessen sein und zur Aufgabe des
   ...
ICONS
ICONS

Icons sind nicht immer die beste Lösung
ICONS

     Icons sind nicht immer die beste Lösung

Icons sollten nicht alleine stehen, ohne Beschriftung
ICONS

     Icons sind nicht immer die beste Lösung

Icons sollten nicht alleine stehen, ohne Beschriftung

      Tooltips...
ICONS

     Icons sind nicht immer die beste Lösung

Icons sollten nicht alleine stehen, ohne Beschriftung

      Tooltips...
ICONS

     Icons sind nicht immer die beste Lösung

Icons sollten nicht alleine stehen, ohne Beschriftung

      Tooltips...
EFFIZIENTE NUTZUNG
EFFIZIENTE NUTZUNG


Informationen dort anzeigen, wo sie benötigt werden
EFFIZIENTE NUTZUNG


 Informationen dort anzeigen, wo sie benötigt werden

Alle relevanten Informationen müssen dargestell...
EFFIZIENTE NUTZUNG


 Informationen dort anzeigen, wo sie benötigt werden

Alle relevanten Informationen müssen dargestell...
BESCHÄFTIGUNG
BESCHÄFTIGUNG

Wartezeiten lösen stressähnliche Reaktionen aus
BESCHÄFTIGUNG

           Wartezeiten lösen stressähnliche Reaktionen aus

Vortäuschung von Aktivität macht Wartezeiten na...
BESCHÄFTIGUNG

           Wartezeiten lösen stressähnliche Reaktionen aus

Vortäuschung von Aktivität macht Wartezeiten na...
BESCHÄFTIGUNG

           Wartezeiten lösen stressähnliche Reaktionen aus

Vortäuschung von Aktivität macht Wartezeiten na...
BESCHÄFTIGUNG

           Wartezeiten lösen stressähnliche Reaktionen aus

Vortäuschung von Aktivität macht Wartezeiten na...
ÄSTHETIK
ÄSTHETIK


Content is King
ÄSTHETIK


     Content is King

Dezente Farben bevorzugen
ÄSTHETIK


      Content is King

Dezente Farben bevorzugen

Zurückhaltende Animationen
ÄSTHETIK


      Content is King

Dezente Farben bevorzugen

Zurückhaltende Animationen

      Klare Struktur
DIALOGE/SPRACHE
DIALOGE/SPRACHE

 Dialoge müssen verständlich sein
DIALOGE/SPRACHE

   Dialoge müssen verständlich sein

Orthografie und Grammatik sind wichtig
DIALOGE/SPRACHE

   Dialoge müssen verständlich sein

Orthografie und Grammatik sind wichtig

   Prozesse müssen verständli...
DIALOGE/SPRACHE

   Dialoge müssen verständlich sein

Orthografie und Grammatik sind wichtig

   Prozesse müssen verständli...
DIALOGE/SPRACHE

   Dialoge müssen verständlich sein

Orthografie und Grammatik sind wichtig

   Prozesse müssen verständli...
DIALOGE/SPRACHE

       Dialoge müssen verständlich sein

   Orthografie und Grammatik sind wichtig

       Prozesse müssen...
FITTS‘ GESETZ
FITTS‘ GESETZ


Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum
                     Ziel und der Zielgrö...
FITTS‘ GESETZ


Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum
                     Ziel und der Zielgrö...
FITTS‘ GESETZ


Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum
                     Ziel und der Zielgrö...
INTERFACE RE-DESIGN
INTERFACE RE-DESIGN


      Behutsam sein!
INTERFACE RE-DESIGN


        Behutsam sein!

     Vorsicht walten lassen!
INTERFACE RE-DESIGN


                     Behutsam sein!

                 Vorsicht walten lassen!

Vorteil nutzen: man w...
INTERFACE RE-DESIGN


                     Behutsam sein!

                 Vorsicht walten lassen!

Vorteil nutzen: man w...
VIELEN DANK!


Webseite: http://nitzsche.info/

 E-Mail: stefan@nitzsche.info

      Twitter: stn1978
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Interface Design – Best Practices
Nächste SlideShare
Wird geladen in …5
×

Interface Design – Best Practices

3.997 Aufrufe

Veröffentlicht am

Schnittstellen zwischen Mensch und Maschine sind selten technologieabhängig. Welchen Sinn sie auch ansprechen, sie haben alle die gleiche Zielgruppe: den Menschen, egal in welcher Sprache sie geschrieben, oder mit welchem Werkzeug sie erstellt wurden.

Der Vortrag „Interface Design – Best Practices“ soll einen Überblick über Aspekte geben, die man bei der Gestaltung einer Mensch-Maschine-Schnittstelle beachten muss. An zahlreichen aktuellen Beispielen erläutert Stefan Nitzsche unterhaltsam die wichtigsten Richtlinien und haarsträubendsten Fehltritte.

Veröffentlicht in: Design

Interface Design – Best Practices

  1. 1. WARUM? Menschen lieben gute Interfaces
  2. 2. STUDIE Gute Interfaces erobern Märkte Quelle: admob
  3. 3. iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS STUDIE Gute Interfaces erobern Märkte Quelle: admob
  4. 4. iPhone OS RIM OS Windows Mobile OS Palm OS Android Hiptop OS Symbian OS 1% 6% 6% 4% 11% 50% 22% STUDIE Gute Interfaces erobern Märkte Quelle: admob
  5. 5. INTERFACE
  6. 6. INTERFACE
  7. 7. INTERFACE Ding 1
  8. 8. INTERFACE Ding 1
  9. 9. INTERFACE Ding 1 Ding 2
  10. 10. INTERFACE Ding 1 Ding 2
  11. 11. INTERFACE Ding 1 Ding 2 Schnittstelle
  12. 12. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch
  13. 13. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Grafik
  14. 14. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik
  15. 15. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik Bedürfnis
  16. 16. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik Schnittstelle Bedürfnis
  17. 17. INTERFACE Ding 1 Ding 2 Schnittstelle Mensch Computer Grafik Schnittstelle Bedürfnis Befriedigung
  18. 18. WARUM GIBT ES SO VIELE MITTELMÄSSIGE SCHNITTSTELLEN?
  19. 19. 1958, Deutsches Bundesarchiv Bild 146-1969-169-19
  20. 20. 1958, Deutsches Bundesarchiv Bild 146-1969-169-19 „Natürlich können Sie dem Lu fahrtministe- rium ein Flugzeug mit allen gewünschten Eigenscha en bauen – solange Sie nicht zwingend voraussetzen, dass es dann auch iegt.“ Willy Messerschmitt Flugzeugkonstrukteur (1898-1978)
  21. 21. MENTALE MODELLE
  22. 22. Kann man sich vorstellen, dass ein Designer einem Benutzer erklärt, wie der Programmierer die Idee des Kunden umgesetzt hat, die ihm vom Konzepter beschrieben wurde?
  23. 23. DING 1: MENSCH
  24. 24. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik)
  25. 25. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten
  26. 26. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen
  27. 27. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen Kulturelle Prägungen
  28. 28. DING 1: MENSCH Die grobe Konfiguration ist in den meisten Fällen identisch, aber nicht immer gleich leistungsfähig (Motorik, Sensorik) Gewohnheiten Erfahrungen Kulturelle Prägungen Vorkenntnisse
  29. 29. DING 2: COMPUTER
  30. 30. DING 2: COMPUTER Bildschirm, Maus, Tastatur
  31. 31. DING 2: COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast
  32. 32. DING 2: COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit
  33. 33. DING 2: COMPUTER Bildschirm, Maus, Tastatur Ausgabe: Auflösung, Farbtiefe, Schärfe, Kontrast Eingabe: Sprache, Tastenanzahl, Genauigkeit Architektur, Datenformate, Vernetzung, Abhängigkeiten
  34. 34. DER INTERFACE DESIGNER
  35. 35. Wer glaubt, die Gestaltung einer Schnittstelle erfordere die alleinige Kenntnis von Ding 1 oder Ding 2?
  36. 36. Um eine Schnittstelle zu gestalten, muss man alle relevanten Informationen über beide Seiten besitzen!
  37. 37. KENNTNISSE EINES INTERFACE DESIGNERS
  38. 38. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung
  39. 39. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik
  40. 40. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie
  41. 41. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung
  42. 42. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung Medientheorie
  43. 43. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik
  44. 44. KENNTNISSE EINES INTERFACE DESIGNERS Gestaltung Heuristik Psychologie Archivierung Medientheorie Informatik Soziologie
  45. 45. Das Interface ist das Produkt, soweit der Nutzer das beurteilen kann.
  46. 46. TOLERANZ UND MOTIVATION
  47. 47. TOLERANZ UND MOTIVATION Je komplexer das Interface, desto weniger Toleranz.
  48. 48. TOLERANZ UND MOTIVATION Je komplexer das Interface, desto weniger Toleranz. Je stärker die Motivation, desto unwichtiger die Komplexität.
  49. 49. BEISPIEL 1
  50. 50. BEISPIEL 1 Starkes Bedürfnis
  51. 51. BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung
  52. 52. BEISPIEL 1 Starkes Bedürfnis Eindeutige, sichere Befriedigung Qualität des Interface ist absolut nachrangig
  53. 53. BEISPIEL II
  54. 54. BEISPIEL II Starkes Bedürfnis
  55. 55. BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung
  56. 56. BEISPIEL II Starkes Bedürfnis Eindeutige, sichere Befriedigung Erforschung des Interface ist das Ziel
  57. 57. MÖGLICHKEIT 1 Man ist in der Lage, perfekte, bahnbrechende Schnittstellen zu gestalten.
  58. 58. MÖGLICHKEIT 2 Man ist nicht in der Lage, perfekte, bahnbrechende Schnittstellen zu gestalten.
  59. 59. BEST PRACTICES
  60. 60. ANTIZIPATION
  61. 61. ANTIZIPATION Zielgruppe kennen
  62. 62. ANTIZIPATION Zielgruppe kennen Relevante Werkzeuge geben
  63. 63. ANTIZIPATION Zielgruppe kennen Relevante Werkzeuge geben Relevante Informationen geben
  64. 64. VERTRAUTHEIT
  65. 65. VERTRAUTHEIT Kognitiven Aufwand reduzieren
  66. 66. VERTRAUTHEIT Kognitiven Aufwand reduzieren Eine vertraute Umgebung schaffen
  67. 67. EINFACHHEIT
  68. 68. EINFACHHEIT Nicht zu viele Entscheidungen
  69. 69. EINFACHHEIT Nicht zu viele Entscheidungen Nicht zu viele Angebote
  70. 70. EINFACHHEIT Nicht zu viele Entscheidungen Nicht zu viele Angebote Jedes Element der Anwendung, das nicht hilfreich ist, unbarmherzig eliminieren!
  71. 71. WAS ANBIETER WOLLEN:
  72. 72. WAS NUTZER WOLLEN:
  73. 73. WAS DESIGNER WOLLEN:
  74. 74. WAS KUNDEN WOLLEN:
  75. 75. VERFÜGBARKEIT
  76. 76. VERFÜGBARKEIT Das Interface muss ständig verfügbar sein
  77. 77. VERFÜGBARKEIT Das Interface muss ständig verfügbar sein Die Ladezeit muss im Verhältnis zum Ergebnis stehen
  78. 78. VERFÜGBARKEIT Das Interface muss ständig verfügbar sein Die Ladezeit muss im Verhältnis zum Ergebnis stehen Sagt man dem Nutzer, was ihn erwartet, ist er bereit zu warten
  79. 79. MODUS
  80. 80. MODUS Der Nutzer muss jederzeit wissen, in welchem Modus das System sich befindet
  81. 81. MODUS Der Nutzer muss jederzeit wissen, in welchem Modus das System sich befindet Der Verzicht auf Modi ist der Erlernbarkeit eines Interface stark zuträglich
  82. 82. http://www.flickr.com/photos/lincolnose2/2317699857/
  83. 83. FEHLERTOLERANZ
  84. 84. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar
  85. 85. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“
  86. 86. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“ Bieten Sie immer einen Ausweg
  87. 87. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“ Bieten Sie immer einen Ausweg Stellen Sie sicher, dass Benutzer niemals ihre Arbeit verlieren
  88. 88. FEHLERTOLERANZ Machen Sie Aktionen umkehrbar Erlauben Sie immer „Rückgängig“ Bieten Sie immer einen Ausweg Stellen Sie sicher, dass Benutzer niemals ihre Arbeit verlieren Menschen in fehlerintoleranter Umgebung machen nicht mehr Fehler als in einer fehlertoleranten Umgebung, sie arbeiten nur wesentlich langsamer (sorgfältiger), um Fehler zu vermeiden
  89. 89. KONSISTENZ
  90. 90. KONSISTENZ Einen stabilen Rahmen bieten (Styleguide)
  91. 91. KONSISTENZ Einen stabilen Rahmen bieten (Styleguide) Geregelte Konsistenz wenn Dinge gleich sind
  92. 92. KONSISTENZ Einen stabilen Rahmen bieten (Styleguide) Geregelte Konsistenz wenn Dinge gleich sind Geregelte Inkonsistenz wenn Dinge unterschiedlich sind
  93. 93. STATUS
  94. 94. STATUS Der Status eines Systems muss auf den ersten Blick ersichtlich sein
  95. 95. STATUS Der Status eines Systems muss auf den ersten Blick ersichtlich sein Browserbasierte Produkte existieren zunächst in einer zustandslosen Umgebung
  96. 96. STATUS Der Status eines Systems muss auf den ersten Blick ersichtlich sein Browserbasierte Produkte existieren zunächst in einer zustandslosen Umgebung Benutzern sollte es ermöglicht werden, sich im Büro auszuloggen, nach Hause gehen und genau dort fortfahren zu können, wo sie aufgehört haben
  97. 97. AUTONOMIE
  98. 98. AUTONOMIE Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer
  99. 99. AUTONOMIE Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer Zu wenig Freiheit schränkt ebenso ein wie zuviel Freiheit
  100. 100. AUTONOMIE Der Benutzer sollte das Interface kontrollieren, nicht das Interface den Benutzer Zu wenig Freiheit schränkt ebenso ein wie zuviel Freiheit Im gleichen Interface immer mehrere Wege zu einem Ziel anbieten (Navigation, Button, Tastenkombination)
  101. 101. METAPHERN
  102. 102. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung
  103. 103. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung Metaphern müssen angemessen sein und zur Aufgabe des Nutzers passen
  104. 104. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung Metaphern müssen angemessen sein und zur Aufgabe des Nutzers passen Implizite/Explizite Handlungsaufforderung (Button)
  105. 105. METAPHERN Metaphern aktivieren Sinne: Sehen, Hören, Berührung Metaphern müssen angemessen sein und zur Aufgabe des Nutzers passen Implizite/Explizite Handlungsaufforderung (Button) Erforschbarkeit (entsteht aus Gewohnheiten)
  106. 106. ICONS
  107. 107. ICONS Icons sind nicht immer die beste Lösung
  108. 108. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung
  109. 109. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung Tooltips ersetzen nicht die Beschriftung
  110. 110. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung Tooltips ersetzen nicht die Beschriftung Icons brauchen zeitgemäße Metaphern
  111. 111. ICONS Icons sind nicht immer die beste Lösung Icons sollten nicht alleine stehen, ohne Beschriftung Tooltips ersetzen nicht die Beschriftung Icons brauchen zeitgemäße Metaphern Icons müssen abstrahieren
  112. 112. EFFIZIENTE NUTZUNG
  113. 113. EFFIZIENTE NUTZUNG Informationen dort anzeigen, wo sie benötigt werden
  114. 114. EFFIZIENTE NUTZUNG Informationen dort anzeigen, wo sie benötigt werden Alle relevanten Informationen müssen dargestellt werden
  115. 115. EFFIZIENTE NUTZUNG Informationen dort anzeigen, wo sie benötigt werden Alle relevanten Informationen müssen dargestellt werden Nutzer sollen erkennen statt erinnern
  116. 116. BESCHÄFTIGUNG
  117. 117. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus
  118. 118. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher
  119. 119. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher Alle Klicks auf Schaltflächen binnen 50 Millisekunden durch sicht- oder hörbares Feedback bestätigen
  120. 120. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher Alle Klicks auf Schaltflächen binnen 50 Millisekunden durch sicht- oder hörbares Feedback bestätigen Alles, was länger als 2–3 Sekunden dauert, sollte mit einer Ladeanzeige (Spinner, Balken) ausgestattet werden
  121. 121. BESCHÄFTIGUNG Wartezeiten lösen stressähnliche Reaktionen aus Vortäuschung von Aktivität macht Wartezeiten nachweisbar erträglicher Alle Klicks auf Schaltflächen binnen 50 Millisekunden durch sicht- oder hörbares Feedback bestätigen Alles, was länger als 2–3 Sekunden dauert, sollte mit einer Ladeanzeige (Spinner, Balken) ausgestattet werden Restzeit oder Fortschritt angeben, wenn möglich!
  122. 122. ÄSTHETIK
  123. 123. ÄSTHETIK Content is King
  124. 124. ÄSTHETIK Content is King Dezente Farben bevorzugen
  125. 125. ÄSTHETIK Content is King Dezente Farben bevorzugen Zurückhaltende Animationen
  126. 126. ÄSTHETIK Content is King Dezente Farben bevorzugen Zurückhaltende Animationen Klare Struktur
  127. 127. DIALOGE/SPRACHE
  128. 128. DIALOGE/SPRACHE Dialoge müssen verständlich sein
  129. 129. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig
  130. 130. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein
  131. 131. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein Gute, knappe Hilfetexte
  132. 132. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein Gute, knappe Hilfetexte Konsistente Benennung
  133. 133. DIALOGE/SPRACHE Dialoge müssen verständlich sein Orthografie und Grammatik sind wichtig Prozesse müssen verständlich sein Gute, knappe Hilfetexte Konsistente Benennung Verzicht auf Fachbegriffe oder technische Termini
  134. 134. FITTS‘ GESETZ
  135. 135. FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße
  136. 136. FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Ergebnis: die Menü-Umsetzung unter Mac OS X ist fünfmal schneller bedienbar als die Menü-Umsetzung unter Windows
  137. 137. FITTS‘ GESETZ Die Dauer, ein Ziel zu treffen, ist abhängig von der Distanz zum Ziel und der Zielgröße Ergebnis: die Menü-Umsetzung unter Mac OS X ist fünfmal schneller bedienbar als die Menü-Umsetzung unter Windows Große Schaltflächen für wichtige Funktionen verwenden
  138. 138. INTERFACE RE-DESIGN
  139. 139. INTERFACE RE-DESIGN Behutsam sein!
  140. 140. INTERFACE RE-DESIGN Behutsam sein! Vorsicht walten lassen!
  141. 141. INTERFACE RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist!
  142. 142. INTERFACE RE-DESIGN Behutsam sein! Vorsicht walten lassen! Vorteil nutzen: man weiss, womit der Nutzer vertraut ist! Nicht alles, was neu ist, ist besser
  143. 143. VIELEN DANK! Webseite: http://nitzsche.info/ E-Mail: stefan@nitzsche.info Twitter: stn1978

×