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
< >
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?
< >
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
< >
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?
< >
104. SCHROEDER
WENDT
Bedürfnissen Hardware Software
ANALOGE ENTWICKLUNG ZU ...
< >
105.
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 ...
< >