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 !