Usability / Software-Ergonomie Dr. Siegfried Olschner 2009-12-04آ  Web-Design, Referenten: Monika...

download Usability / Software-Ergonomie Dr. Siegfried Olschner 2009-12-04آ  Web-Design, Referenten: Monika Pilarska,

of 73

  • date post

    22-May-2020
  • Category

    Documents

  • view

    0
  • download

    0

Embed Size (px)

Transcript of Usability / Software-Ergonomie Dr. Siegfried Olschner 2009-12-04آ  Web-Design, Referenten: Monika...

  • Web-Design Usability / Software-Ergonomie Dr. Siegfried Olschner

    Referenten: Monika Pilarska Martin Schmidkunz

    Erlangen, 10.02.2006

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 2/73

    Inhalt Allgemeines – Design Fehler 2005 Navigation

    Links

    Grafik

    Methoden

    eCommerce

    Schlechte Beispiele

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 3/73

    Allgemeines – Design Fehler 2005

    Probleme mit der Lesbarkeit zu kleine oder festgelegte Schrift

    geringer Kontrast zwischen Text und Hintergrund

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 4/73

    Allgemeines – Design Fehler 2005

    Unstandardisierte Links nicht ersichtlich kein Unterschied zwischen benutzt/unbenutzt unklares Linkziel Einsatz ungewohnter Techniken

    Öffnen neuer Fenster

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 5/73

    Allgemeines – Design Fehler 2005

    Flash sinnloser Einsatz

    Splash-Screens

    Startseiten

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 6/73

    Allgemeines – Design Fehler 2005

    Inhalt nicht für das Internet verfasst zu lang

    nicht scanbar

    weitschweifig

    keine Antworten auf Benutzerfragen

    keine Alltagssprache

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 7/73

    Allgemeines – Design Fehler 2005

    Schlechte Suchfunktion

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 8/73

    Allgemeines – Design Fehler 2005

    Browser Inkompatibilität Browser Statistik 12/2005

    IE Firefox Safari Netscape Opera

    Quelle: http://marketshare.hitslink.com/report.aspx?qprid=3 Non-IE = 15%

    http://marketshare.hitslink.com/report.aspx?qprid=3

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 9/73

    Allgemeines – Design Fehler 2005

    Beschwerliche Formulare unnötige Fragen

    zu viele Pflichtfelder

    erstes Eingabefeld nicht markiert

    unklare Eingabeaufforderung

    unklares Eingabeformat

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 10/73

    Allgemeines – Design Fehler 2005

    Keine Kontaktinformation

    Keine Firmeninformation

    Kein Impressum

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 11/73

    Allgemeines – Design Fehler 2005

    Fest vorgegebenes Layout

    Bildschirm Auflösungen 07/2005

    höher 1024x768 800x600 640x480 unbekannt

    Quelle: http://www.w3schools. com/browsers/browser s_stats.asp

    http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_stats.asp

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 12/73

    Allgemeines – Design Fehler 2005

    Pop-ups

    Druck-Probleme

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 13/73

    Allgemeines – Design Fehler 2005

    Lange Ladezeiten

    Privater Internetzugang 09/2005

    analoges Modem ISDN

    DSL

    andere/unbeka nntQuelle:

    http://www.agof.de/die_i nternet_facts.195.html

    http://www.agof.de/die_internet_facts.195.html http://www.agof.de/die_internet_facts.195.html

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 14/73

    Inhalt Allgemeines – Design Fehler 2005 Navigation

    Links

    Grafik

    Methoden

    eCommerce

    Schlechte Beispiele

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 15/73

    Navigation Jede Website ist nur so gut wie ihre Navigation. Sie muss daher sorgfältig konzipiert werden. Dazu gehören:

    die Auswahl und Kombination der richtigen Navigationsstrukturen

    die Anforderungen an eine gute Navigation zu kennen und umsetzen zu können

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 16/73

    Navigation die Navigationsbereiche auf den Webseiten optimal anordnen zu können die systematische und ästhetische Gestaltung der Hyperlinks

    die Ergänzung der Navigationsstrukturen um eine lokale Suchmaschine

    zusätzlich einen Überblick über die Inhalte und Strukturen der Website anzubieten

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 17/73

    Navigation Navigationstrukturen

    Die primäre Navigation bildet die oberste Strukturierung für eine Webseite. Sie wird um die sekundäre Navigation ergänzt. Primäre und sekundäre Navigation werden durch Hyperlink-Strukturen dargestellt:

    Baumstruktur Register Listen Pull-Down-Menüs Hyperbolische Bäume

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 18/73

    Navigation Navigationstrukturen

    Die primäre Navigation besitzt für eine Webseite die gleiche Bedeutung wie die Kapitelstruktur für ein Buch. Sie teilt die Webseite in Hauptkategorien ein und sollte einen schnellen Überblick über die gesamte Webseite ermöglichen.

    Die primäre Navigation soll auf den meisten Seiten einer Website direkt zur Verfügung stehen. Dann kann der Benutzer jederzeit in eine andere Hauptkategorie wechseln.

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 19/73

    Navigation Navigationstrukturen

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 20/73

    Navigation Navigationstrukturen

    Die sekundäre Navigation entspricht der Strukturierung der einzelnen Kapitel innerhalb eines Buchs. Sie ermöglicht es dem Benutzer, zwischen den verschiedenen Seiten innerhalb einer Hauptkategorie zu navigieren. In einer Webseite sollte jede Seite über die primäre und sekundäre Navigation erreicht werden können.

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 21/73

    Navigation Navigationstrukturen

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 22/73

    Navigation Navigationstrukturen

    Primäre und sekundäre Navigation sollten getrennt vom Inhalt der Webseiten angeboten und durch strukturierte Hyperlinks realisiert werden d.h. Hyperlinks, die in einer Struktur angeordnet sind. Dazu gehören:

    Baumstrukturen Register einfache Listen von Hyperlinks Klassische Drop-Down-Menüs Hyperbolische Bäume

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 23/73

    Navigation Navigationstrukturen

    Baumstrukturen

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 24/73

    Navigation Navigationstrukturen

    Register

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 25/73

    Navigation Navigationstrukturen

    Eine Liste mir Hyperlinks

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 26/73

    Navigation Navigationstrukturen

    Drop-Down-Menüs

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 27/73

    Navigation Navigationstrukturen

    Hyperbolische Bäume

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 28/73

    Navigation Anforderungen

    Eine gut gestaltete Navigation erleichtert dem Benutzer die Orientierung, zeigt ihm, was es auf der Website zu sehen gibt und wie er dahin kommt. Außerdem kann der Benutzer erkennen, welche Seiten er schon besucht hat.

    Wo bin ich? Wohin kann ich gehen und wie komme ich dahin?

    Konkret erwartet der Benutzer Antworten auf folgende Fragen:

    War ich schon hier?

  • Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 29/73

    Navigation Anforderungen

  • Web-Design, Referenten: Monika Pila