Digitale Medien. Inhalt. Web-Usability. Usability. Usability. Verbreitete Usability-Fehler. Tote Links oder fehlende Bilder.

Transkript

1 Inhalt Digitale Medien 6. WEB USABILTY/DESIGN Webdesign Probleme, häufige Fehler Richtlinien Organisation von Informationen Bilder und ihre Parameter Barrierefreiheit Typographie Validierung 2 Usability 3 Definition: Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen. [EN ISO Standard ] Entwurfsprinzipien für die Entwicklung interaktiver Systeme [Preim, 1999]: Frühzeitige und kontinuierliche Konzentration auf den Benutzer Frühzeitiges und kontinuierliches Testen Iteratives Design Integriertes Design Web-Usability Benutzbarkeit von Webseiten good website usability: being easy to learn, easy to remember, effective to use, understandable, and giving satisfaction Four key factors: usefulness, effectiveness, learnability, and attitude 4 Dave Lawrence, Soheyla Tavakol: Balanced Website Design, Springer London, 2007 Screendesign, Informationsdesign, Interfacedesign Interactiondesign, Usability Film /Video /Animationdesign Ton/Musik/Sounddesign 5 Verbreitete Usability-Fehler Tote Links oder fehlende Bilder 6 Webseiten, die under construction sind 1

2 Verbreitete Usability-Fehler 7 Eingangsseiten, die keinen Inhalt transportieren aber einen Mausklick benötigen, um auf die eigentlichen Seite zu kommen. Eine Webseite, die rein graphisch ist und keine Möglichkeit für nicht graphische Browser bietet Webseiten die ausschließlich Flash einsetzen Webseiten, die einen schlechten Kontrast zwischen Text und Hintergrund besitzen und schlecht lesbar sind. Seiten, die Lange brauchen, um herunter geladen zu werden (noch schlimmer, solche, die nach langer Ladezeit auch noch uninteressant sind) Inhalt, der ein spezielles Plugin benötigt Seiten, die einen speziellen Browser benötigen, um dargestellt zu werden. 8 Verbreitete Usability-Fehler 9 Links, die nicht so aussehen, so dass man in jeder Zeile danach suchen muss Farbschemata für Links, bei denen man nicht sieht, ob man sie schon besucht hat Links zu Seiten, die viele versteckte Seiten öffnen (Werbung!) Links, die auf ein unbekanntes Ziel verweisen (z.b. hier klicken ) Mystery Meat Navigation eine, den Benutzer erschlagende Anzahl von Links auf der Seite Verbreitete Usability-Fehler automatische Weiterleitungen die die Funktion des Zurück Knopfs aufheben Sehr lange Seiten ohne einen schnellen Weg sie zu überspringen Unverständliche Menüs oder Icons in Navigationsleisten, die bedeutungslos für die meisten Benutzer sind. Verwirrende Struktur, so dass der Besucher nicht erraten kann, wo sich die gesuchte Information befindet 10 Beispiele für schlechte Webseiten schlechte Navigation: Brown University, Störender Einsatz von Flash, Javascript: schlechte Farbwahl/Kontrast: NEIU Foreign Exchange Lab: störende Animation: Massenhafte Verlinkung: Hauptseite nur durch Klicken erreichbar 12 Weitere Probleme Unklare Formulierung des Zwecks einer Seite: viele Webseiten gerade von Firmen lassen nicht auf den ersten Blick erkennen, worum es geht bzw. was diese Firma produziert Schlechte Lesbarkeit, viele (typographische Fehler): Zu kleine Schriftarten, keine Möglichkeit der Größenveränderung, schlechter Kontrast Inhalt hlohne Datumsangabe: Inhalte sollten datiert sein, um deren Aktualität einschätzen zu können. kleine Vorschauansichten von großen, detaillierten Photos: Oft werden so kleine Vorschaubilder verwendet, dass nichts mehr darauf zu erkennen ist. PDFs als Webseiten 13 2

3 Weitere Probleme 14 nicht webgerechte Präsentation von Inhalten Webseiten sind keine Bücher, sie sollten schnell erfassbar, kurz und punktiert sein Statische Layouts: Die sich nicht der Bildschirmgröße anpassen Wie kann man Fehler vermeiden? Verstehen des Webs (Technologie und Phänomen) Verstehen des Zwecks einer Webseite Benutzung von Style Guides 15 Webpage vs. Website Website: kompletter Webauftritt Besteht aus einzelnen Webseiten Webpage: einzelne Webseite Teil eines Webauftritts 16 Die DIN-EN-ISO 9241, Teil 110 beschreibt die Grundsätze der Dialoggestaltung regelt die leichte Benutzbarkeit von Benutzungsschnittstellen interaktiver Systeme, wie Webseiten oder Software Grundsätze: Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Steuerbarkeit Erwartungskonformität Fehlertoleranz Individualisierbarkeit Lernförderlichkeit 19 Erwartungskonformität 20 Wo erwarten Benutzer den Link zur Startseite/Homepage? Erwartungskonformität Wo erwarten Benutzer Navigationslinks? 21 Startseiten-/Homepage-Link: oben links (44 %), aber auch unten Mitte (15 %) und unten links (11 %) 3

4 Erwartungskonformität Wo erwarten Benutzer seiteninterne Suche? 22 Erwartungskonformität Wo erwarten Benutzer Werbung? 23 Erwartungskonformität Wo erwarten Benutzer Anbieterkennzeichnung? 24 Jede Website braucht: Wer?: Informationen über den Autor (Person oder Institution) Was?: einen aussagekräftigen Titel (der auch als Bookmark gespeichert wird) Wann?: ein Erzeugungs oder Datum der letzten Veränderung Wo?: in der Welt befindet sich die Homepage 26 Site Design Menschen können nur 5 7 Fakten im Kurzzeitgedächtnis behalten Beispiel: Folien sollten nur 5 7 Stichpunkte enthalten kleine, strukturierte Informationseinheiten sind besser als lange ungeordnete Absätze fünf f Schritte Shi für die Organisation i von Informationen: Unterteilung des Inhalts in logische Einheiten Entwickeln einer Hierarchie von Wichtigkeiten Strukturierung von Relationen zwischen den Einheiten Website erzeugen, entsprechend der Strukturierung Analyse der funktionalen und ästhetischen Wirkung 27 Organisation von Informationen Sequenz: einfachste Art der Strukturierung chronologisch logische Folge von Themen Entwicklung vom Allgemeinen zum Speziellen alphabetisch, ähnlich einem Index, 28 4

5 Organisation von Informationen Hierarchie: gut für komplexe Strukturen einfach zu verstehen repräsentieren oft die reale Struktur von Institutionen 29 Organisation von Informationen Netzstrukturen: gut für assoziative Organisation unterstützen das freie Denken erlauben das verfolgen von Ideen ohne Vorgaben 30 Elemente von Web-Sites Home pages: Einstiegspunkt, zentrale Seite um die alle anderen logisch angeordnet sind jede Seite sollte einen Link zur Homepage haben Menus and Unterseiten: bei zu vielen Links Link (Resource)listen, "other related sites" pg pages "What's new?" pages Suchmöglichkeiten Kontaktinformation und user feedback Bibliographien and Anhänge FAQ Seiten 32 Visueller Eindruck wichtige Dinge sollten hervorgehoben werden erster Eindruck ist entscheidend: Leser nehmen zuerst Form und Farbe, Kontrast zwischen Vorderund Hintergrund war eigentliche Information ist sekundär konsistentes Layout über die gesamte Site 34 Seitenausdehnung, -länge Unterschied zwischen Webseite und Papier Bildschirm ist schmaler Scrollen in zwei Richtungen ist unschön, vertikal ja, horizontal: nein generell bedeutet Scrollen Verwirrung Seitenlänge richtet tetsich nach: Bildschirmgröße Inhalt des Dokumentes ob ein Dokument online gelesen wird oder gedruckt die Übertragungsgeschwidigkeit Unterteilen des Dokumentes in sinnvolle Abschnitte diese sollten nicht länger sein als zwei gedruckte Seiten ein Gesamtdokument bereitstellen, das der Leser herunterladen und ausdrucken kann. 35 Kopf- und Fußbereich 36 Webseiten repräsentieren eine Institution, eine Person eine gut gestalteter Seitenkopf gibt der Seite eine visuelle Identität Wiedererkennungswert steigt Sinn und Ziel der Seite sind einfacher zu erkennen jede Seite sollte Informationen über letzte Änderungen, den Autor, etc. haben: Impressum Fuß der Seite 5

6 Kopf und Fuß einer Seite 37 Layout Parameter zur Layoutveränderung: Zeilenlänge Spalten und deren Abstand 38 Ränder ki keine Tbll Tabellen als Layouthilfe Fix vs. Flexibel Aussehen auf unterschiedlichen Plattformen Immer noch Unterschiede zwischen Browsern 39 Zugänglichkeit 40 Niemand darf wegen seiner Behinderung benachteiligt werden. Grundgesetz der Bundesrepublik Deutschland Artikel 3, Absatz 3, Satz 2. Barrierefreiheit Allgemein 41 bedeutet die uneingeschränkte Nutzung von Gegenständen, Gebrauchsgütern und Objekten durch alle Menschen über denselben Zugangsweg. Beispiel: barrierefreies Bauen barrierefreies Internet auch: Zugänglichkeit, Accessibility Barrierefreies Internet 43 Nutzung von Internetangeboten unabhängig von körperlichen und technischen Möglichkeiten Eine Website ist barrierefrei, wenn jeder Benutzer mit jedem Browserund jeder beliebigen technischen Ausstattung in vollem Umfang zugänglich und nutzbar ist. 6

7 Barrieren 44 Farbfehlsichtigkeit 45 Blinde Menschen: Problem: Bilder, Text in Bildern, Navigation über Bilder Sehschwache Menschen: Schriftgröße, Anordnung der Information Farbfehlsichtigkeit (Rot/Grün Blindheit) Barrieren Menschen mit motorischen Problemen: können Maus nicht bedienen Tastatur zur Navigation können Rechner nur mit Maus bedienen haben alternative Eingabegeräte Gehörlose Menschen: akustische Inhalte, Video lernbeeinträchtigte Menschen: Probleme beim Verständnis eines Dokumentes, langer und umständlich formulierter Texte Probleme mit komplizierten Ausdrücken, Fremdwörtern, komplizierter Navigation 46 Web Content Accessibility Guidelines W3C Recommendation 5-May Punkte mit unterschiedlicher Priorität 1 muss erfüllt werden 2 sollte erfüllt werden 3 kann erfüllt werden entsprechend der Erfüllung dieser Prioritäten ist festgelegt: ein Dokument hat Konformität Stufe "A" erfüllt alle Punkte mit Priorität 1 Konformität Stufe "Double A" erfüllt alle Punkte mit Priorität 1 und 2 Konformität Stufe "Triple A" erfüllt alle Punkte mit Priorität 1, 2 und 3 48 Was ist zu beachten? Stellen Sie äquivalente Alternativen für Audio und visuellen Inhalt bereit Benutzung des ALT Attributes Verlassen Sie sich nicht auf Farbe allein 49 Vernünftigen Kontrast einstellen Farbenblindheit beachten unterschiedliche Bedeutungen in Kulturkreisen Verwenden Sie Markup und Stylesheets korrekt Trennung von Inhalt und Layout Unterschiedliche Stylesheets für unterschiedliche Ausgabegeräte Was ist zu beachten? Verdeutlichen Sie die Verwendung natürlicher Sprache Erklären von Abkürzungen Erstellen Sie Tabellen, die elegant transformieren Tabellen sollten auf unterschiedliche Ausgabegeräte transformiert werden können Seiten, die neue Technologien verwenden, sollten elegant transformierbar sein Neue Technologien: JavaScript, Ajax, Flash, Java 50 7

8 Was ist zu beachten? Sorgen Sie für eine Kontrolle des Benutzers über zeitgesteuerte Änderungen des Inhalts. Animationen, Audio, Video muss abschaltbar sein Sorgen Sie für direkte Zugänglichkeit eingebetteter Benutzungsschnittstellen. Sicherstellen, dass programmierte Elemente (Skripte, Applets) zugänglich sind oder mit der von Menschen verwendeten Technologie funktionieren Wählen Sie ein geräteunabhängiges Design Bedienbarkeit über Tastatur sollte gewährleistet sein 51 Was ist zu beachten? Überbrückungslösungen für ältere Browser keine Popups Beschriftung zu Formularelementen vernünftig zuordnen lineare Textalternative für alle Tabellen Stellen Sie Informationen zum Kontext und zur Orientierung bereit. Große Informationsblöcke unterteilen t Beschriftungen explizit zuordnen Stellen Sie klare Navigationsmechanismen bereit Informationen zur Orientierung, Navigationsleisten, eine Sitemap usw Sorgen Sie dafür, dass Dokumente klar und einfach gehalten sind. klare und angemessene Sprache verwenden kein komplizierter Satzbau 52 Typographie 53 wesentlicher Aspekt: Lesbarkeit hier wieder wichtig: Ausrichtung Blocksatz, Rechts oder Linksbündig nicht vergessen: Ausrichtung der Titelzeile ambesten lesbar: linksbündigertext Typographie Zeilenlänge Problem auf Webseiten: zu geringe Auflösung des Bildschirms schlechte Lesbarkeit dazu kommt: zu lange Zeilen Bücher nehmen Rücksicht auf die von Menschen erfassbare Zeilenlänge Webseiten oft nicht Webseiten sollten schnell zu erfassen sein ( überfliegbar ) 54 Typographie Zeilenhöhe Erinnerung vorvergangene Vorlesung: zu geringer Zeilenabstand schlechte Unterscheidbarkeit der Zeilen zu hoher Zeilenabstand Zeilen fallen auseinander Anfang der nächsten Zeile wird nicht gefunden. Faustregel: bei 12pt Schriftgröße 14 16pt Zeilenhöhe wichtig auch hier: Einrücken bei neuen Absätzen 55 Typographie im Web Richtlinien Auflösung Bildschirm: 100dpi, gedrucktes Dokument: >600dpi Variabilität: Browser als Interpreter meist wenig Fonts verfügbar 56 oft schlechter Blocksatz in heutigen Browsern Spaltenbreite ungefähr 365 Pixel für eine 12 Punkt Schriftart ungefähr 8 bis 10 Wörter pro Zeile etwas erhöhter Zeilenabstand (e.g. 16pt für einen 12pt Font) 8

9 Typographie im Web Richtlinien Trennen von Absätzen durch mindestens eine Zeile Schriftarten, die einfach zu lesen sind und für Bildschirme entwickelt wurden: Georgia, Verdana, Helvetica CSS benutzen und Alternativen angeben, e.g. p {font-family: "Times New Roman", Georgia, Times, serif } Keine ausschließliche Verwendung von Großbuchstaben 57 Typographie im Web Richtlinien Vernünftige Wahl von Seitentiteln Bookmarks nicht vergessen Think global Seitenzugriff erfolgt weltweit Sprache der Zielgruppe sprechen sinnvolle Link Texte verwenden, nicht hier klicken Unterscheidung von unterschiedlichen Links ist oft hilfreich zur Navigation inhaltliche Verknüpfungen externe Verknüpfungen Platzierung von Links innerhalb von Absätzen kann störend wirken betreffende Person ist versucht, dem Link zu folgen ohne zu ende gelesen zu haben 58 Wichtige Parameter Graphik Bildschirmgröße: Anzahl Pixel Horizontal, Vertikal Bildschirmauflösung: Punkte pro cm, Zoll Farbtiefe Gamma Download time 59 Graphik Richtlinien Eigenschaften der Graphikformate beachten: Farbtiefe Interlaced möglich? Transparenz Animationen Antialiasing beachten 60 Antialiasing Graphik 61 Welches Format wofür? Graphik - Richtlinien GIF: Icons mit wenig Farben, kleine Bilder, eventuell Animationen besser PNG PNG: ersetzt GIF, für Photographien JPEG: Photographien SVG: Illustrationen Größe beachten! 62 9

10 Möglichkeiten der Validierung Tests mit Lesern und Leserinnen Tests auf unterschiedlichen Browsern automatische Validierungstools benutzen Beispiel: 63 Literatur JakobNielsen: Designing Web Usability, New Riders Publishing, Indianapolis, USA, 1999 Jakob Nielsen & Marie Tahier: Homepage Usability 50 Websites deconstructed, New Riders Publishing, Indianapolis, USA,