Usability / Software-Ergonomie Dr. Siegfried Olschner · 2009-12-04 · Web-Design, Referenten:...
Transcript of Usability / Software-Ergonomie Dr. Siegfried Olschner · 2009-12-04 · Web-Design, Referenten:...
Web-DesignUsability / Software-ErgonomieDr. Siegfried Olschner
Referenten:Monika PilarskaMartin Schmidkunz
Erlangen, 10.02.2006
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 2/73
InhaltAllgemeines – Design Fehler 2005Navigation
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 Lesbarkeitzu 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 Linksnicht ersichtlichkein Unterschied zwischen benutzt/unbenutztunklares LinkzielEinsatz ungewohnter Techniken
Öffnen neuer Fenster
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 5/73
Allgemeines –Design Fehler 2005
Flashsinnloser 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 verfasstzu 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ätBrowser Statistik 12/2005
IEFirefoxSafariNetscapeOpera
Quelle: http://marketshare.hitslink.com/report.aspx?qprid=3 Non-IE = 15%
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 9/73
Allgemeines –Design Fehler 2005
Beschwerliche Formulareunnö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öher1024x768800x600640x480unbekannt
Quelle: 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
analogesModemISDN
DSL
andere/unbekanntQuelle:
http://www.agof.de/die_internet_facts.195.html
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 14/73
InhaltAllgemeines – Design Fehler 2005Navigation
Links
Grafik
Methoden
eCommerce
Schlechte Beispiele
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 15/73
NavigationJede 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
Navigationdie Navigationsbereiche auf den Webseiten optimal anordnen zu könnendie 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
NavigationNavigationstrukturen
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:
BaumstrukturRegisterListenPull-Down-MenüsHyperbolische Bäume
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 18/73
NavigationNavigationstrukturen
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
NavigationNavigationstrukturen
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 20/73
NavigationNavigationstrukturen
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
NavigationNavigationstrukturen
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 22/73
NavigationNavigationstrukturen
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:
BaumstrukturenRegistereinfache Listen von HyperlinksKlassische Drop-Down-MenüsHyperbolische Bäume
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 23/73
NavigationNavigationstrukturen
Baumstrukturen
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 24/73
NavigationNavigationstrukturen
Register
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 25/73
NavigationNavigationstrukturen
Eine Liste mir Hyperlinks
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 26/73
NavigationNavigationstrukturen
Drop-Down-Menüs
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 27/73
NavigationNavigationstrukturen
Hyperbolische Bäume
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 28/73
NavigationAnforderungen
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
NavigationAnforderungen
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 30/73
NavigationAnforderungen
Eine gute Navigation zeichnet sich durch folgende Eigenschaften aus:
die Navigationselemente sind dem Thema und dem Charakter der Website angepasstdie Navigation wird konsistent in der gesamten Website verwendetdie Navigation bietet dem Benutzer mehrere Wege, um zu den gewünschten Seiten zu gelangen
die Navigationselemente sind nicht dominantdie Navigation funktioniert intuitiv, d.h. die Navigationselemente sind sofort begreifbar und müssen nicht gelernt werden
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 31/73
NavigationNavigationsstrukturen können auf der Website oben, unten, links, rechts und mittig platziert werden. Am häufigsten findet man eine Kombination von oberen und linken Navigationsbereichen.Seltener ist ein rechts angeordneter Navigationsbereich.Der untere Bereich sollte nur für bestimmte Hyperlinks verwendet werden. Eine zentrale Anordnung empfiehlt sich nur bei Startseiten und für Aufzählungen in Übersichtslisten.
Navigationsbereich platzieren
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 32/73
NavigationNavigationsbereich platzieren
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 33/73
NavigationNavigationsbereich platzieren
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 34/73
NavigationNavigationsbereich platzieren
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 35/73
NavigationHyperlinks darstellen
Durch das Web zu navigieren bedeutet auf Hyperlinks zu klicken, die einzelne Webseiten miteinander verbinden.
Schaltflächen (buttons)Bilder (images) einschließlich Piktogrammen (icons)Teile von Bildern (hotspots)
Hyperlinks können auf einer Website unterschiedlich dargestellt werden, durch:
Texte (hotwords)
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 36/73
NavigationHyperlinks darstellen
Schaltflächen (buttons)
Texte (hotwords)
Piktogramme (icons)
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 37/73
NavigationSuchen in Websites
Größere Websites sollten eine lokale Suchmaschine besitzen, deren Benutzungsoberfläche in das Design der Websites integriert wird. Bei sehr großen Websites empfiehlt sich eine erweiterte Suchmaschine.Die Suchergebnisse müssen dem Benutzer in einer leicht auswertbaren Darstellung angeboten werden.
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 38/73
NavigationSuchen in Websites
Einfache Suche
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 39/73
NavigationSuchen in Websites
Erweiterte Suche für große Websites
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 40/73
NavigationSite Map und Site Index
Viele Websites bieten eine Site Map, in der sich die Benutzer über die Inhalte der Website informieren und über einen Hyperlink direkt verzweigen können. Während die Site Map Hyperlinks logisch gruppiert, sind in einem Site Index alle Hyperlinks alphabetisch geordnet.
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 41/73
NavigationDiese Site Map zeigt die Inhalte der Website www.uni-erlangen.de
Site Map und Site Index
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 42/73
NavigationDie Website www.intel.de zeigt die Site Map in tabellarischer Form
Site Map und Site Index
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 43/73
NavigationSite Map und Site Index
AOL verwendet einen alphabetisch sortierten Site Index
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 44/73
InhaltAllgemeines – Design Fehler 2005Navigation
Links
Grafik
Methoden
eCommerce
Schlechte Beispiele
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 45/73
LinksEingebettete Links
Kontext-Links
Struktur-Links
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 46/73
LinksKlar anzeigen
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 47/73
LinksInterne von externen Links unterscheiden
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 48/73
LinksEindeutige Beschreibung
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 49/73
LinksText-Links statt Image-Links
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 50/73
Links
Mouse-over-Effekt vermeiden
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 51/73
LinksTabs effektiv präsentieren
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 52/73
LinksBesuchte Links kennzeichnen
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 53/73
InhaltAllgemeines – Design Fehler 2005Navigation
Links
Grafik
Methoden
eCommerce
Schlechte Beispiele
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 54/73
GrafikBilder im Web
Websites ohne Bilder kann man sich heute kaum mehr vorstellen.Bilder sind ein unverzichtbarer Bestandteil von attraktiven Websites. Dabei ist es wichtig, einen geeigneten Kompromiss zwischen guter Qualität und kurzer Ladezeit zu erreichen.Grundsätzlich lassen sich zwei Arten von Bildern unterscheiden:
VektorgrafikenBitmaps
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 55/73
GrafikBildformate für das Web
Bitmaps bestehen aus einer Vielzahl von Pixeln (Bildpunkten), von denen jedes eine Farbinformation besitzt.Bei den Bitmaps werden im Web die Formate: JPEG, GIF und PNG verwendet.Vektorgrafiken benötigen wesentlich weniger Speicherplatz als pixelorientierte Bilder. Ihr Aufbau ist mathematisch definiert. Beispielweise besteht eine Linie aus einem Startpunkt, einem Endpunkt und einem Winkel.
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 56/73
GrafikBildformate für das Web
Für Fotos immer JPEG verwenden.
GIF
JPEG
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 57/73
GrafikBildformate für das Web
Für Logos GIF oder PNG verwenden, niemals JPEG.
JPEGGIF
PNG
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 58/73
GrafikBildformate für das Web
GIF
PNG
JPEG
Für Schriftzüge immer GIF oder PNG verwenden, niemals JPEG.
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 59/73
GrafikBildformate für das Web
Alt-TexteMan soll in HTML für Bilder einen kurzen Alt-Text angeben. Bei Bildern, die nur der Formatierung dienen, wird der Text alt=”” angegeben.
Bilder in Websites sollten durch Texte ergänzt werden, die als Tooltip angezeigt werden, wenn das Bild mit der Maus berührt wird.Wenn man darauf verzichtet, geht einer Website wichtige Information verloren, wenn der Nutzer die Anzeige von Bildern deaktiviert hat (z.B. um lange Webseiten schneller herunterzuladen).
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 60/73
GrafikBildformate für das Web
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 61/73
GrafikBildformate für das Web
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 62/73
InhaltAllgemeines – Design Fehler 2005Navigation
Links
Grafik
Methoden
eCommerce
Schlechte Beispiele
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 63/73
MethodenForschungstests
Assesment-Tests
Auswertungstests
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 64/73
MethodenBeobachtungCard-SortingFragebogen
Experten-Review
Experiment
Checklisten
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 65/73
InhaltAllgemeines – Design Fehler 2005Navigation
Links
Grafik
Methoden
eCommerce
Schlechte Beispiele
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 66/73
eCommerceNur etwa 56% aller beabsichtigten Online-Einkäufe verlaufen erfolgreich. Das heißt, in fast der Hälfte der Fälle gelingt es dem Kunden nicht, das gewünschte Produkt auch wirklich zu kaufen. Die meisten eCommerce Sites befolgen nur ein Drittel veröffentlichter Usability Guidelines.
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 67/73
eCommerceJeder dritte Kunde (33 Prozent) hatschon mal eine Online-Einkaufstour abgebrochen, weil er die gesuchte Information nicht finden konnte.
Drei von zehn Nutzern ließen sich vom Kauf abhalten, weil sie den Bestellvorgang als zu umständlich empfanden.Mehr als jeder fünfte befragte Online-Kunde (21 Prozent) gab an, er habe auf einen Kauf verzichtet, weil er den Warenkorb oder die Kasse nicht finden konnte.
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 68/73
eCommerceHauptgründe für Kaufabbrüche sind:
Unübersichtlichkeit und schlechte Bedienbarkeit des ShopsSicherheitsbedenken Fehlendes Vertrauen Performance Technische ProblemeMangelnde Informationen
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 69/73
InhaltAllgemeines – Design Fehler 2005Navigation
Links
Grafik
Methoden
eCommerce
Schlechte Beispiele
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 70/73
Schlechte Beispielehttp://www.deutsche-bank.de
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 71/73
Schlechte Beispielehttp://www.freenet.de
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 72/73
Schlechte Beispielehttp://www.t-online.de
Web-Design, Referenten: Monika Pilarska, Martin Schmidkunz [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 73/73
VIELEN DANK
Für Ihre Aumerksamkeit !