Web-Design. Usability / Software-Ergonomie Dr. Siegfried Olschner. Referenten: Monika Pilarska Martin Schmidkunz

Transkript

1 Web-Design Usability / Software-Ergonomie Dr. Siegfried Olschner Referenten: Monika Pilarska Martin Schmidkunz Erlangen,

2 Inhalt Allgemeines Design Fehler 2005 Navigation Links Grafik Methoden ecommerce Schlechte Beispiele [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 2/73

3 Allgemeines Design Fehler 2005 Probleme mit der Lesbarkeit zu kleine oder festgelegte Schrift geringer Kontrast zwischen Text und Hintergrund [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 3/73

4 Allgemeines Design Fehler 2005 Unstandardisierte Links nicht ersichtlich kein Unterschied zwischen benutzt/unbenutzt unklares Linkziel Einsatz ungewohnter Techniken Öffnen neuer Fenster [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 4/73

5 Flash Allgemeines Design Fehler 2005 sinnloser Einsatz Splash-Screens Startseiten [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 5/73

6 Allgemeines Design Fehler 2005 Inhalt nicht für das Internet verfasst zu lang nicht scanbar weitschweifig keine Antworten auf Benutzerfragen keine Alltagssprache [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 6/73

7 Allgemeines Design Fehler 2005 Schlechte Suchfunktion [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 7/73

8 Allgemeines Design Fehler 2005 Browser Inkompatibilität Browser Statistik 12/2005 IE Firefox Safari Netscape Opera Quelle: Non-IE = 15% [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 8/73

9 Allgemeines Design Fehler 2005 Beschwerliche Formulare unnötige Fragen zu viele Pflichtfelder erstes Eingabefeld nicht markiert unklare Eingabeaufforderung unklares Eingabeformat [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 9/73

10 Allgemeines Design Fehler 2005 Keine Kontaktinformation Keine Firmeninformation Kein Impressum [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 10/73

11 Allgemeines Design Fehler 2005 Fest vorgegebenes Layout Quelle: com/browsers/browser s_stats.asp Bildschirm Auflösungen 07/2005 höher 1024x x x480 unbekannt [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 11/73

12 Pop-ups Allgemeines Design Fehler 2005 Druck-Probleme [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 12/73

13 Allgemeines Design Fehler 2005 Lange Ladezeiten Privater Internetzugang 09/2005 analoges Modem ISDN DSL Quelle: nternet_facts.195.html andere/unbeka nnt [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 13/73

15 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 [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 15/73

16 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 [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 16/73

17 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 [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 17/73

18 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 18/73

19 Navigation Navigationstrukturen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 19/73

20 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 20/73

21 Navigation Navigationstrukturen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 21/73

22 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 [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 22/73

23 Navigation Navigationstrukturen Baumstrukturen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 23/73

24 Navigation Navigationstrukturen Register [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 24/73

25 Navigation Navigationstrukturen Eine Liste mir Hyperlinks [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 25/73

26 Navigation Navigationstrukturen Drop-Down-Menüs [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 26/73

27 Navigation Navigationstrukturen Hyperbolische Bäume [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 27/73

28 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. Konkret erwartet der Benutzer Antworten auf folgende Fragen: Wo bin ich? Wohin kann ich gehen und wie komme ich dahin? War ich schon hier? [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 28/73

29 Navigation Anforderungen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 29/73

30 Navigation Anforderungen Eine gute Navigation zeichnet sich durch folgende Eigenschaften aus: die Navigationselemente sind nicht dominant die Navigation funktioniert intuitiv, d.h. die Navigationselemente sind sofort begreifbar und müssen nicht gelernt werden die Navigationselemente sind dem Thema und dem Charakter der Website angepasst die Navigation wird konsistent in der gesamten Website verwendet die Navigation bietet dem Benutzer mehrere Wege, um zu den gewünschten Seiten zu gelangen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 30/73

31 Navigation Navigationsbereich platzieren Navigationsstrukturen 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 31/73

32 Navigation Navigationsbereich platzieren [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 32/73

35 Navigation Hyperlinks darstellen Durch das Web zu navigieren bedeutet auf Hyperlinks zu klicken, die einzelne Webseiten miteinander verbinden. Hyperlinks können auf einer Website unterschiedlich dargestellt werden, durch: Texte (hotwords) Schaltflächen (buttons) Bilder (images) einschließlich Piktogrammen (icons) Teile von Bildern (hotspots) [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 35/73

36 Navigation Hyperlinks darstellen Texte (hotwords) Schaltflächen (buttons) Piktogramme (icons) [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 36/73

37 Navigation Suchen 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 37/73

38 Einfache Suche Navigation Suchen in Websites [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 38/73

39 Navigation Suchen in Websites Erweiterte Suche für große Websites [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 39/73

40 Navigation Site 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 40/73

41 Navigation Site Map und Site Index Diese Site Map zeigt die Inhalte der Website [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 41/73

42 Navigation Site Map und Site Index Die Website zeigt die Site Map tabellarischer Form in [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 42/73

43 Navigation Site Map und Site Index AOL verwendet einen alphabetisch sortierten Site Index [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 43/73

45 Links Eingebettete Links Kontext-Links Struktur-Links [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 45/73

46 Links Klar anzeigen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 46/73

47 Links Interne von externen Links unterscheiden [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 47/73

48 Links Eindeutige Beschreibung [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 48/73

49 Links Text-Links statt Image-Links [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 49/73

50 Links Mouseover-Effekt vermeiden [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 50/73

51 Links Tabs effektiv präsentieren [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 51/73

52 Links Besuchte Links kennzeichnen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 52/73

54 Grafik Bilder 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: Bitmaps Vektorgrafiken [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 54/73

55 Grafik Bildformate 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 55/73

56 Grafik Bildformate für das Web Für Fotos immer JPEG verwenden. JPEG GIF [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 56/73

57 Grafik Bildformate für das Web Für Logos GIF oder PNG verwenden, niemals JPEG. GIF JPEG PNG [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 57/73

58 Grafik Bildformate für das Web Für Schriftzüge immer GIF oder PNG verwenden, niemals JPEG. GIF JPEG PNG [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 58/73

59 Grafik Bildformate für das Web 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). Alt-Texte Man soll in HTML für Bilder einen kurzen Alt-Text angeben. Bei Bildern, die nur der Formatierung dienen, wird der Text alt= angegeben. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 59/73

60 Grafik Bildformate für das Web [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 60/73

61 Grafik Bildformate für das Web [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 61/73

63 Methoden Forschungstests Assesment-Tests Auswertungstests [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 63/73

64 Methoden Beobachtung Card-Sorting Fragebogen Experten-Review Experiment Checklisten [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 64/73

66 ecommerce Nur 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 66/73

67 ecommerce Jeder dritte Kunde (33 Prozent) hat schon 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. [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 67/73

68 ecommerce Hauptgründe für Kaufabbrüche sind: Unübersichtlichkeit und schlechte Bedienbarkeit des Shops Sicherheitsbedenken Fehlendes Vertrauen Performance Technische Probleme Mangelnde Informationen [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 68/73

70 Schlechte Beispiele [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 70/73

73 VIELEN DANK Für Ihre Aumerksamkeit! [Usability / Software-Ergonomie, Dr. Siegfried Olschner] 73/73