Vortrag von Matthias C. Schroeder von SCHROEDER + WENDT zur webinale 08 Mehr unter: www.schroeder-wendt.com/blog www.schroeder-wendt.de

1. Matthias C. Schroeder | SCHROEDER + WENDT
User Interface Design fürs Internet
Trends, Prinzipien und Herausforderungen

2. SCHROEDER
WENDT
MATTHIAS C. SCHROEDER
... ich bin Interface Designer
+ Kaufmann gelernt und als IT-Kaufmann gearbeitet
+ von dort quer ins Webdesign bei einer Werbeagentur eingestiegen
+ dann Interface Design am Fachbereich Industriedesign der HS Magdeburg studiert
+ 2004 SCHROEDER + WENDT gegründet
+ aktives Mitglied im GC UPA - Ausrichter des World Usability Days in Sachsen-Anhalt
+ Blog-Autor „Interface Design und Usability Blog“
< >

3. SCHROEDER
WENDT
Die Bedeutung einer guten Schnittstelle
Umfassenden Überblick über die Arten der
Interfaces im Internet
Prinzipien der Interface Gestaltung
Überblick über Evaluierungsmöglichkeiten
Ausblick
WORUM GEHTS IN DER NÄCHSTEN STUNDE?
< >

4. SCHROEDER
WENDT
WARUM IST EIN GUTES
INTERFACE SO WICHTIG?
< >

5. SCHROEDER
WENDT
WEIL EIN SCHLECHTES DICH TÖTEN KANN!
< >

6. SCHROEDER
WENDT
Ergebnisse des Social Issuse Research Centre
UNTERSUCHUNG DER MUSKELKONTRAKTION UND KREISLAUF
< >

7. SCHROEDER
WENDT
Wonach beurteilen Sie die
Glaubwürdigkeit einer Webseite?
Consumer WebWatch befragten 2684 Personen
WEIL AUCH DAS INTERNET „OBERFLÄCHLICH“ IST
< >

8. SCHROEDER
WENDT
„ ... Durch eine an Anwendererwartungen und -
bedürfnissen ausgerichtete Optimierung von
Produktinformationen auf E-Commerce Websites
konnten Umsatzzuwächse von über 200% erreicht
werden ....“
Bericht des Bundesverbandes der Digitalen Wirtschaft
WEIL ES EINE DIREKTE AMORTISIERUNG GIBT
< >

9. SCHROEDER
WENDT
© GARMIN Pressebild
FIRMEN GEBEN HUNDERTTAUSENDE FÜR WERBUNG AUS ...
< >

10. SCHROEDER
WENDT
... ABER SCHAUT MAN DANN AUF DIE SCHNITTSTELLEN ZUM NUTZER
< >

11. SCHROEDER
WENDT
ES GEHT ABER AUCH ANDERS
< >

12. SCHROEDER
WENDT
2012 werden 43% aller Einzelhandelsverkäufe
(bezogen auf die USA) online getätigt oder vom
Internet beeinflusst.
Forrester:quot;The Web's Impact on In-Store Sales“ and U.S. Department of Commerce.
UND DABEI SOLLTE MAN BEDENKEN ....
< >

13. SCHROEDER
WENDT
WELCHE INTERFACES
GIBT ES ÜBERHAUT?
< >

14. SCHROEDER
WENDT
WO IST UNSER SCHNITTSTELLE ZUM INTERNET?
< >

15. SCHROEDER
WENDT
KLASSISCH IM BROWSER
< >

16. SCHROEDER
WENDT
AUF MOBILEN GERÄTEN
< >

17. SCHROEDER
WENDT
ODER AUF DEM TOASTER
< >

18. SCHROEDER
WENDT
verbinden rausfinden interagieren
DREI AUFGABEN EINER WEBSEITE UND DAMIT DES INTERFACES
< >

19. SCHROEDER
WENDT
verbinden rausfinden interagieren
DER KOMMUNIKATIONSWEG BEIM VERBINDEN
+ Monolog-Struktur + Dialog-Struktur
< >

20. SCHROEDER
WENDT
STATISCHE WEBSEITE - NUTZER ALS EMPFÄNGER
< >

21. SCHROEDER
WENDT
NUTZER ALS SENDER - MONOLOG - ZEITVERSETZTER DIALOG
< >

22. SCHROEDER
WENDT
NUTZER ALS SENDER + EMPFÄNGER - PSEUDO-ECHTZEIT-DIALOG
< >

23. SCHROEDER
WENDT
NUTZER ALS SENDER UND EMPFÄNGER - ECHTZEIT-DIALOG
< >

24. SCHROEDER
WENDT
verbinden rausfinden interagieren
DIE DREI ASPEKTE DES INTERFACES BEIM RAUSFINDEN
+ Informationsaufbereitung + Navigation + Suche
< >

25. SCHROEDER
WENDT
INFO.AUFBEREITUNG - BEI SHOPS ANWENDUNGSORIENTIERT
< >

26. SCHROEDER
WENDT
SUCHE - BEI SHOPS PARAMETERORIENTIERT
< >

27. SCHROEDER
WENDT
SUCHE - VISUELL
< >

28. SCHROEDER
WENDT
SUCHE - SPIELERISCH / EXPERIMENTELL
< >

29. SCHROEDER
WENDT
SUCHE - EXPLORATIV
< >

30. SCHROEDER
WENDT
verbinden rausfinden interagieren
INTERAKTION DURCH ...
+ direkte Eingaben über die Hardware + indirekte Eingaben
< >

31. SCHROEDER
WENDT
TASTATUR
< >

32. SCHROEDER
WENDT
MAUS - IN EINEM 2D- ODER 3D-RAUM
< >

33. SCHROEDER
WENDT
MAUS - MAUSGESTEN
< >

34. SCHROEDER
WENDT
MAUS - STEUERUNG DER REALWELT
< >

35. SCHROEDER
WENDT
EXPERIMENTELL MIT MAUS UND TASTATUR
< >

36. SCHROEDER
WENDT
MIKROFON - PUSTEN
< >

38. SCHROEDER
WENDT
MIKROFON - MELODIEERKENNUNG
< >

39. SCHROEDER
WENDT
KAMERA - STRICHCODE-ERKENNUNG
< >

40. SCHROEDER
WENDT
KAMERA - BEWEGUNGSERKENNUNG
< >

41. SCHROEDER
WENDT
KAMERA - DIREKTE OBJEKTSTEUERUNG
< >

42. SCHROEDER
WENDT
KAMERA - ABSTANDSERKENNUNG
< >

43. SCHROEDER
WENDT
KAMERA - ANWENDUNGSBEISPIEL
< >

44. SCHROEDER
WENDT
INTERAKTIONEN OHNE EINGABEN
< >

45. SCHROEDER
WENDT
LOGIN / COOKIES
< >

46. SCHROEDER
WENDT
BROWSER- / BETRIEBSSYSTEMABFRAGE
< >

47. SCHROEDER
WENDT
METADATEN
< >

48. SCHROEDER
WENDT
IP-ADRESSE UND LOKALISATION
< >

49. SCHROEDER
WENDT
BANDBREITE
< >

50. SCHROEDER
WENDT
WIE GESTALTE ICH
EIN GUTES INTERFACE?
< >

51. SCHROEDER
WENDT
Sind ALLE Seiten zueinander konsistent?
Wurde genug Freiraum gelassen (und nicht die gesamte Seite mit Inhalten ausgefüllt)?
Wurde beim Menü und Inhalt der „Fold“ (je nach Auflösung die Stelle, an der der Browser nach unten endet) beachtet?
Wurde die Seite wirklich um alles was möglich war (visuell) reduziert?
Sind die Kontrastverhältnisse überall ausreichend?
Ist der Abstand überall(!) zwischen zusammengehörigen Elementen kleiner als der zwischen nichtzusammengehörigen?
Sind die Mauswege zwischen allen Navigationselementen so gering wie möglich?
Wurden überall die allgemeinen Farbcodes beachtet (grün für Bestätigungen, rot für Warnungen etc.?
Wurde auf „visuelle Haptik“ geachtet (Buttons nicht als flache Fläche sondern, leichter räumlicher Wirkung?
Sind alle Interaktionselemente (insbesondere „Weiter“-Buttons) groß genug?
Sind alle Schriften groß genug oder vergrößerbar?
Wird nirgends die Größe des Browsers beim Nutzer geändert?
Werden PopUps vermieden?
Wird bei Multimedia-Inhalten (z.B. Flash) ein alternativer Inhalt angezeigt, falls die PlugIns deaktiviert sind?
Sind alle Linkbezeichnung eindeutig und präzise?
Wurden alle Links überprüft / Funktionieren alle Links?
Sind alle Texte in einer anschaulichen Weise geschrieben?
Können alle Aktionen (insbesondere bei der Bestellung) rückgängig gemacht werden?
Werden Details nicht sofort, sondern erst auf nach und nach dargestellt?
Werden wiederkehrenden Besuchern „Abkürzungen“ angeboten?
KLEINE CHECKLISTE
< >

52. SCHROEDER
WENDT
VIEL WICHTIGER IST ...
< >

53. SCHROEDER
WENDT
INDIVIDUALITÄT BEACHTEN!
+ es gibt nicht DEN Nutzer - es gibt nur eine sehr breite Masse an Persönlichkeiten
+ Jeder navigiert und interagiert auf seiner persönliche Art und Weise
+ Ziel ist es: ALLEN eine optimale Schnittstelle zu bieten
< >

54. SCHROEDER
WENDT
1. FRAGE: WENN SPRECHE ICH WIE AN?
+ Nutzergruppe genau analysieren: Welche gibt es? Wie sind deren Erwartungen an die Seite und deren
Inhalt? Welche anderen Webseiten nutzen diese jeweils und wie sind deren Erfahrungen?
+ Die Ergebnisse beziehen sich auf alle Elemente: Sitemap, Aufteilung, Navigation, Inhalte, Design, ...
< >

55. SCHROEDER
WENDT
2. FRAGE: WIE SIEHT DAS SZENARIO MEINES NUTZERS AUS?
+ Welche Absichten verfolgen die einzelnen Nutzer, wenn sie die Webseite besuchen?
+ Finden alle Nutzer innerhalb kürzester Zeit die gesuchte Information bzw. können die gewünschte
Aktion ausführen oder eine Kommunikation starten? (Siehe Aufgaben einer Webseite)
< >

56. SCHROEDER
WENDT
3. FRAGE: KOMMUNIZIERE ICH MIT DEM BENUTZER?
+ Wie gut beantwortet die erste Seite die Frage, mit der der Nutzer auf die Webseite gegangen ist?
+ Führe ich mit dem Besucher einen Dialog oder „drücke“ ich ihm nur die Informationen auf, die ich
kommunizieren will?
< >

57. SCHROEDER
WENDT
„Ästhetik ist Usability!“
4. FRAGE: MACHT MEINE SEITE SPASS?
5. FRAGE: IST MEINE SEITE ÄSTHETISCH?
< >

58. SCHROEDER
WENDT
EMOTIONEN!
DENN GEFÜHLE BEEINFLUSSEN UNSERE ENTSCHEIDUNGEN
< >

59. SCHROEDER
WENDT
< >

60. SCHROEDER
WENDT
< >

61. SCHROEDER
WENDT
< >

62. SCHROEDER
WENDT
< >

63. SCHROEDER
WENDT
KLARE STRUKTUREN!
< >

64. SCHROEDER
WENDT
< >

65. SCHROEDER
WENDT
< >

66. SCHROEDER
WENDT
MAXIMAL EINE ANIMATION PRO SEITE!
< >

67. SCHROEDER
WENDT
TEXTE „SCANNBAR“ MACHEN! „UMGEKEHRTE PYRAMIDE“ NUTZEN!
< >

68. SCHROEDER
WENDT
(VISUELLE) REDUKTION!
< >

69. SCHROEDER
WENDT
WIE BEKOMME ICH RAUS, OB
MEINE SEITE FUNKTIONIERT?
< >

70. SCHROEDER
WENDT
VORAB: CARD SORTING
< >

71. SCHROEDER
WENDT
GRUPPENDISKUSSION
< >

72. SCHROEDER
WENDT
WWW.FENG-GUI.COM
< >

73. SCHROEDER
WENDT
WWW.FENG-GUI.COM
< >

74. SCHROEDER
WENDT
NUTZERTEST
< >

75. SCHROEDER
WENDT
INTERVIEWS / (ONLINE) FRAGEBÖGEN
< >

76. SCHROEDER
WENDT
EXPERTENANALYSE
Start | Internet | Software | Beispiele | Projektablauf | Kommunikation < >

77. SCHROEDER
WENDT
EXPERTENANALYSE
Start | Internet | Software | Beispiele | Projektablauf | Kommunikation < >

78. SCHROEDER
WENDT
EXPERTENANALYSE
Start | Internet | Software | Beispiele | Projektablauf | Kommunikation < >

79. SCHROEDER
WENDT
Gruppe A
Gruppe B
STATISTIK-ANALYSE MIT UNTERSCHIEDLICHEN TEMPLATES
< >

80. SCHROEDER
WENDT
STATISTIK-ANALYSE DER SUCHBEGRIFFE
< >

81. SCHROEDER
WENDT
WAS WIRD DIE
ZUKUNFT BRINGEN?
< >

82. SCHROEDER
WENDT
Bedürfnissen Hardware Software
ANALOGE ENTWICKLUNG ZU ...
< >

83. SCHROEDER
WENDT
Bedürfnissen Hardware Software
ANALOGE ENTWICKLUNG ZU ...
< >

84. SCHROEDER
WENDT
WELTWEIT EINFACHER ZUSAMMENARBEITEN - FÜR JEDENMAN
< >

85. SCHROEDER
WENDT
SOFTWAREUNABHÄNGIG ÜBERALL ARBEITEN KÖNNEN
< >

86. SCHROEDER
WENDT
INTERFACE STANDARDS?
SOFTWAREUNABHÄNGIG ÜBERALL ARBEITEN KÖNNEN
< >

87. SCHROEDER
WENDT
JOY OF USE
< >

88. SCHROEDER
WENDT
EINKAUFSERLEBNIS (MIT ONLINE-KONFIGURATOREN)
< >

89. SCHROEDER
WENDT
JEDER IST IM NETZ - JEDER KANN SEINE KREATIVITÄT UMSETZEN
< >

90. SCHROEDER
WENDT
JEDER IST IM NETZ - JEDER KANN SEINE KREATIVITÄT UMSETZEN
< >

91. SCHROEDER
WENDT
JEDER IST IM NETZ - JEDER KANN SEINE KREATIVITÄT UMSETZEN
< >

92. SCHROEDER
WENDT
INTERFACE STANDARDS?
JEDER IST IM NETZ - JEDER KANN SEINE KREATIVITÄT UMSETZEN
< >

93. SCHROEDER
WENDT
WIRKLICH JEDER IM NETZ? - MANCHE FALLEN DURCHS RASTER
< >

94. SCHROEDER
WENDT
Bedürfnissen Hardware Software
ANALOGE ENTWICKLUNG ZU ...
< >

95. SCHROEDER
WENDT
KAMERAS WERDEN STANDARD
< >

96. SCHROEDER
WENDT
UNENDLICH VIELE MÖGLICHKEITEN - GESICHTSAUTHENTIFIZIERUNG
< >

97. SCHROEDER
WENDT
UNENDLICH VIELE MÖGLICHKEITEN - OBJEKTERKENNUNG
< >

99. SCHROEDER
WENDT
GRÖSSERE BANDBREITE - FERNSEHEN VERLAGERT SICH INS WEB
< >

100. SCHROEDER
WENDT
DAMIT AUCH DIE SYNERGIEN DES ENDGERÄTES NUTZEN
< >

101. SCHROEDER
WENDT
DIE GROSSE AUFGABE: VON „LEAN FORWAD“ ZU „LEAN BACK“
< >

102. SCHROEDER
WENDT
DIE GROSSE AUFGABE: VON „LEAN FORWAD“ ZU „LEAN BACK“
< >

103. SCHROEDER
WENDT
ENDGERÄTE-DIVERSIFIKATION - TRENNUNG INHALT UND DESIGN
< >

104. SCHROEDER
WENDT
Bedürfnissen Hardware Software
ANALOGE ENTWICKLUNG ZU ...
< >

106. SCHROEDER
WENDT
VERBINDUNG VON 3D UND AUGMENTED REALITY
< >

107. SCHROEDER
WENDT
3D-WELTEN OHNE INSTALLATION - DIREKT IM BROWSER
< >

108. SCHROEDER
WENDT
WIE WERDEN WIR IN UND MIT DER 3D-WELT INTERAGIEREN?
< >

109. SCHROEDER
WENDT
GROSSE CHANCE: JOY OF USE MIT DER „SCHÖNEN NEUEN 3D-WELT“
< >

110. SCHROEDER
WENDT
ABER BEI ALL DEM BEDENKEN WIR MAL ...
... das wir vor fast genau 15 Jahren gerade mal ein Bild in Hypertext einfügen konnten ..
... und wir heute für diese unendlichen Möglichkeiten und Oberflächen auch in den nächsten Jahren in
erster Linie die beiden Eingabegeräte zur Verfügung haben, die wir auch die letzten 40 Jahre hatten ...
< >

111. SCHROEDER
WENDT
ABER BEI ALL DEM BEDENKEN WIR MAL ...
... das wir vor fast genau 15 Jahren gerade mal ein Bild in Hypertext einfügen konnten ..
... und wir heute für diese unendlichen Möglichkeiten und Oberflächen auch in den nächsten Jahren in
erster Linie die beiden Eingabegeräte zur Verfügung haben, die wir auch die letzten 40 Jahre hatten ...
< >

112. SCHROEDER
WENDT
VIELEN DANK FÜR IHRE AUFMERKSAMKEIT
SCHROEDER + WENDT AUF DER WEBINALE 08
< >

113. SCHROEDER
WENDT
MEHR UNTER: www.schroeder-wendt.com/blog
< >