SlideShare ist ein Scribd-Unternehmen logo
Matthias C. Schroeder | SCHROEDER + WENDT


User Interface Design fürs Internet
Trends, Prinzipien und Herausforderungen
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“
                                                                                       < >
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?
                                            < >
SCHROEDER
      WENDT




WARUM IST EIN GUTES
INTERFACE SO WICHTIG?


                        < >
SCHROEDER
          WENDT




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




 Ergebnisse des Social Issuse Research Centre



UNTERSUCHUNG DER MUSKELKONTRAKTION UND KREISLAUF
                                                   < >
SCHROEDER
               WENDT




 Wonach beurteilen Sie die
 Glaubwürdigkeit einer Webseite?




 Consumer WebWatch befragten 2684 Personen



WEIL AUCH DAS INTERNET „OBERFLÄCHLICH“ IST
                                             < >
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
                                                        < >
SCHROEDER
                      WENDT




© GARMIN Pressebild




FIRMEN GEBEN HUNDERTTAUSENDE FÜR WERBUNG AUS ...
                                                   < >
SCHROEDER
          WENDT




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




ES GEHT ABER AUCH ANDERS
                           < >
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 ....
                                                                                   < >
SCHROEDER
      WENDT




WELCHE INTERFACES
GIBT ES ÜBERHAUT?


                    < >
SCHROEDER
        WENDT




WO IST UNSER SCHNITTSTELLE ZUM INTERNET?

                                           < >
SCHROEDER
         WENDT




KLASSISCH IM BROWSER
                       < >
SCHROEDER
         WENDT




AUF MOBILEN GERÄTEN
                      < >
SCHROEDER
         WENDT




ODER AUF DEM TOASTER
                       < >
SCHROEDER
          WENDT




     verbinden           rausfinden         interagieren

DREI AUFGABEN EINER WEBSEITE UND DAMIT DES INTERFACES



                                                           < >
SCHROEDER
                 WENDT




          verbinden          rausfinden                interagieren

DER KOMMUNIKATIONSWEG BEIM VERBINDEN
+ Monolog-Struktur                 + Dialog-Struktur



                                                                      < >
SCHROEDER
         WENDT




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




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




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




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




          verbinden                  rausfinden        interagieren

DIE DREI ASPEKTE DES INTERFACES BEIM RAUSFINDEN
+ Informationsaufbereitung   + Navigation         + Suche



                                                                      < >
SCHROEDER
         WENDT




INFO.AUFBEREITUNG - BEI SHOPS ANWENDUNGSORIENTIERT
                                                     < >
SCHROEDER
         WENDT




SUCHE - BEI SHOPS PARAMETERORIENTIERT
                                        < >
SCHROEDER
          WENDT




SUCHE - VISUELL
                      < >
SCHROEDER
          WENDT




SUCHE - SPIELERISCH / EXPERIMENTELL
                                      < >
SCHROEDER
          WENDT




SUCHE - EXPLORATIV
                      < >
SCHROEDER
                 WENDT




          verbinden                    rausfinden                   interagieren

INTERAKTION DURCH ...
+ direkte Eingaben über die Hardware         + indirekte Eingaben



                                                                                   < >
SCHROEDER
           WENDT




TASTATUR
                       < >
SCHROEDER
          WENDT




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




MAUS - MAUSGESTEN
                     < >
SCHROEDER
         WENDT




MAUS - STEUERUNG DER REALWELT
                                < >
SCHROEDER
         WENDT




EXPERIMENTELL MIT MAUS UND TASTATUR
                                      < >
SCHROEDER
         WENDT




MIKROFON - PUSTEN
                     < >
User Interface Design fürs Internet
SCHROEDER
         WENDT




MIKROFON - MELODIEERKENNUNG
                              < >
SCHROEDER
         WENDT




KAMERA - STRICHCODE-ERKENNUNG
                                < >
SCHROEDER
        WENDT




KAMERA - BEWEGUNGSERKENNUNG
                              < >
SCHROEDER
         WENDT




KAMERA - DIREKTE OBJEKTSTEUERUNG
                                   < >
SCHROEDER
         WENDT




KAMERA - ABSTANDSERKENNUNG
                             < >
SCHROEDER
         WENDT




KAMERA - ANWENDUNGSBEISPIEL
                              < >
SCHROEDER
        WENDT




INTERAKTIONEN OHNE EINGABEN

                              < >
SCHROEDER
          WENDT




LOGIN / COOKIES
                      < >
SCHROEDER
         WENDT




BROWSER- / BETRIEBSSYSTEMABFRAGE
                                   < >
SCHROEDER
        WENDT




METADATEN
                    < >
SCHROEDER
         WENDT




IP-ADRESSE UND LOKALISATION
                              < >
SCHROEDER
         WENDT




BANDBREITE
                     < >
SCHROEDER
      WENDT




WIE GESTALTE ICH
EIN GUTES INTERFACE?


                       < >
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
                                                                                                                       < >
SCHROEDER
           WENDT




VIEL WICHTIGER IST ...



                         < >
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
                                                                                      < >
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, ...
                                                                                                          < >
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)

                                                                                                    < >
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?

                                                                                                     < >
SCHROEDER
          WENDT




                                        „Ästhetik ist Usability!“


4. FRAGE: MACHT MEINE SEITE SPASS?
5. FRAGE: IST MEINE SEITE ÄSTHETISCH?


                                                               < >
SCHROEDER
       WENDT




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




            < >
SCHROEDER
WENDT




            < >
SCHROEDER
WENDT




            < >
SCHROEDER
WENDT




            < >
SCHROEDER
       WENDT




KLARE STRUKTUREN!


                    < >
SCHROEDER
WENDT




            < >
SCHROEDER
WENDT




            < >
SCHROEDER
          WENDT




MAXIMAL EINE ANIMATION PRO SEITE!
                                    < >
SCHROEDER
         WENDT




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




(VISUELLE) REDUKTION!
                        < >
SCHROEDER
      WENDT




WIE BEKOMME ICH RAUS, OB
MEINE SEITE FUNKTIONIERT?


                            < >
SCHROEDER
         WENDT




VORAB: CARD SORTING
                      < >
SCHROEDER
         WENDT




GRUPPENDISKUSSION
                     < >
SCHROEDER
        WENDT




WWW.FENG-GUI.COM
                    < >
SCHROEDER
        WENDT




WWW.FENG-GUI.COM
                    < >
SCHROEDER
         WENDT




NUTZERTEST
                     < >
SCHROEDER
          WENDT




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




  EXPERTENANALYSE

Start   |   Internet   |   Software   |   Beispiele   |   Projektablauf   |   Kommunikation   < >
SCHROEDER
   WENDT




  EXPERTENANALYSE

Start   |   Internet   |   Software   |   Beispiele   |   Projektablauf   |   Kommunikation   < >
SCHROEDER
   WENDT




  EXPERTENANALYSE

Start   |   Internet   |   Software   |   Beispiele   |   Projektablauf   |   Kommunikation   < >
SCHROEDER
         WENDT




                        Gruppe A




                        Gruppe B


STATISTIK-ANALYSE MIT UNTERSCHIEDLICHEN TEMPLATES
                                                    < >
SCHROEDER
         WENDT




STATISTIK-ANALYSE DER SUCHBEGRIFFE
                                     < >
SCHROEDER
      WENDT




WAS WIRD DIE
ZUKUNFT BRINGEN?


                   < >
SCHROEDER
          WENDT




    Bedürfnissen             Hardware   Software

ANALOGE ENTWICKLUNG ZU ...



                                                   < >
SCHROEDER
          WENDT




    Bedürfnissen             Hardware   Software

ANALOGE ENTWICKLUNG ZU ...



                                                   < >
SCHROEDER
         WENDT




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




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




               INTERFACE STANDARDS?




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




JOY OF USE
                         < >
SCHROEDER
         WENDT




EINKAUFSERLEBNIS (MIT ONLINE-KONFIGURATOREN)
                                               < >
SCHROEDER
          WENDT




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




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




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




                INTERFACE STANDARDS?




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




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




    Bedürfnissen             Hardware   Software

ANALOGE ENTWICKLUNG ZU ...



                                                   < >
SCHROEDER
        WENDT




KAMERAS WERDEN STANDARD
                          < >
SCHROEDER
         WENDT




UNENDLICH VIELE MÖGLICHKEITEN - GESICHTSAUTHENTIFIZIERUNG
                                                        < >
SCHROEDER
         WENDT




UNENDLICH VIELE MÖGLICHKEITEN - OBJEKTERKENNUNG
                                                  < >
User Interface Design fürs Internet
SCHROEDER
         WENDT




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




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




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




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




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




    Bedürfnissen             Hardware   Software

ANALOGE ENTWICKLUNG ZU ...



                                                   < >
User Interface Design fürs Internet
SCHROEDER
         WENDT




VERBINDUNG VON 3D UND AUGMENTED REALITY
                                          < >
SCHROEDER
          WENDT




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




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




GROSSE CHANCE: JOY OF USE MIT DER „SCHÖNEN NEUEN 3D-WELT“
                                                        < >
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 ...

                                                                                                          < >
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 ...

                                                                                                          < >
SCHROEDER
WENDT




VIELEN DANK FÜR IHRE AUFMERKSAMKEIT

            SCHROEDER + WENDT AUF DER WEBINALE 08




                                               < >
SCHROEDER
          WENDT




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

Weitere ähnliche Inhalte

Andere mochten auch

2011 eurocloud brunch 04 microsoft
2011 eurocloud brunch 04 microsoft2011 eurocloud brunch 04 microsoft
2011 eurocloud brunch 04 microsoft
EuroCloud.Austria
 
J Downloader Tutorial Ver. 4.0
J Downloader Tutorial Ver. 4.0J Downloader Tutorial Ver. 4.0
J Downloader Tutorial Ver. 4.0
guest1faa10d
 
Session „Kommunikation“ auf dem FreelaceCamp 2009
Session „Kommunikation“ auf dem FreelaceCamp 2009Session „Kommunikation“ auf dem FreelaceCamp 2009
Session „Kommunikation“ auf dem FreelaceCamp 2009
Norbert Hayduk
 
Eu Osterweiterung
Eu OsterweiterungEu Osterweiterung
Eu Osterweiterung
Prof Dr Mehmed ERDAS
 
Sistema Nervioso Central
Sistema Nervioso CentralSistema Nervioso Central
Sistema Nervioso Central
Angelimar98
 
I views semantische-netze
I views semantische-netzeI views semantische-netze
I views semantische-netze
intelligent-views-gmbh
 
Wissensmanagement in KMU
Wissensmanagement in KMUWissensmanagement in KMU
Wissensmanagement in KMU
lernet
 
Axel Wolpert: E-Learning - Was geht heute? Ein Überblick
Axel Wolpert: E-Learning - Was geht heute? Ein ÜberblickAxel Wolpert: E-Learning - Was geht heute? Ein Überblick
Axel Wolpert: E-Learning - Was geht heute? Ein Überblick
lernet
 
Apa6
Apa6Apa6
Comparativo redes
Comparativo redes   Comparativo redes
Comparativo redes
Campo Elias Sánchez Vargas
 
Arquitectura manierista
Arquitectura manieristaArquitectura manierista
Arquitectura manierista
CDPL17
 
Adobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesignAdobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesign
anthesis GmbH
 
Transporte ruizr6513 ca cidec
Transporte ruizr6513 ca cidecTransporte ruizr6513 ca cidec
Transporte ruizr6513 ca cidec
transportesruizr6513
 
Gerencia ind planificacion
Gerencia ind planificacionGerencia ind planificacion
Gerencia ind planificacion
nayiriaez
 
Ngc Best Photos
Ngc Best PhotosNgc Best Photos
Ngc Best Photos
Tachi
 
Magic dance
Magic danceMagic dance
Magic dance
Adri Paz
 

Andere mochten auch (18)

2011 eurocloud brunch 04 microsoft
2011 eurocloud brunch 04 microsoft2011 eurocloud brunch 04 microsoft
2011 eurocloud brunch 04 microsoft
 
J Downloader Tutorial Ver. 4.0
J Downloader Tutorial Ver. 4.0J Downloader Tutorial Ver. 4.0
J Downloader Tutorial Ver. 4.0
 
Handarbeit
HandarbeitHandarbeit
Handarbeit
 
Session „Kommunikation“ auf dem FreelaceCamp 2009
Session „Kommunikation“ auf dem FreelaceCamp 2009Session „Kommunikation“ auf dem FreelaceCamp 2009
Session „Kommunikation“ auf dem FreelaceCamp 2009
 
Eu Osterweiterung
Eu OsterweiterungEu Osterweiterung
Eu Osterweiterung
 
Sistema Nervioso Central
Sistema Nervioso CentralSistema Nervioso Central
Sistema Nervioso Central
 
I views semantische-netze
I views semantische-netzeI views semantische-netze
I views semantische-netze
 
Wissensmanagement in KMU
Wissensmanagement in KMUWissensmanagement in KMU
Wissensmanagement in KMU
 
Axel Wolpert: E-Learning - Was geht heute? Ein Überblick
Axel Wolpert: E-Learning - Was geht heute? Ein ÜberblickAxel Wolpert: E-Learning - Was geht heute? Ein Überblick
Axel Wolpert: E-Learning - Was geht heute? Ein Überblick
 
Apa6
Apa6Apa6
Apa6
 
Comparativo redes
Comparativo redes   Comparativo redes
Comparativo redes
 
Arquitectura manierista
Arquitectura manieristaArquitectura manierista
Arquitectura manierista
 
Adobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesignAdobe Formulare in SAP Business ByDesign
Adobe Formulare in SAP Business ByDesign
 
Transporte ruizr6513 ca cidec
Transporte ruizr6513 ca cidecTransporte ruizr6513 ca cidec
Transporte ruizr6513 ca cidec
 
Gerencia ind planificacion
Gerencia ind planificacionGerencia ind planificacion
Gerencia ind planificacion
 
Ngc Best Photos
Ngc Best PhotosNgc Best Photos
Ngc Best Photos
 
Magic dance
Magic danceMagic dance
Magic dance
 
Austin.
Austin.Austin.
Austin.
 

User Interface Design fürs Internet

  • 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 < >
  • 63. SCHROEDER WENDT KLARE STRUKTUREN! < >
  • 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 < >