Vorlesung Informatik & Gesellschaft

1. VorlesungInformatik & Gesellschaft Dr. Andrea Kienle 04.07.2005

2. Informatik & Gesellschaft – Kapitel der Vorlesung • 4. Lernen, Qualifizierung und Wissensmanagement • 4.1 Grundlagen Lernen und Qualifizierung (06.06.) • 4.2 Technische Systeme CSCL und Wissensmanagement (13.06.) • 5. Arbeitspsychologie und Softwareergonomie • Arbeitspsychologie (20.6.) • Softwareergonomische Grundlagen, DIN-Normen, etc. (20.06.) • Gestaltung am Beispiel Webdesign (27.06.) • 6. Rechtliche Grundlagen • Datenschutz/Datensicherheit und Privatheit (04.07.) • Urheberrecht (11.07.) • 7. Klausur (18.07.) 27.06. 04.07. 11.07.

3. Gliederung für die heutige Sitzung • Webdesign für breite Nutzergruppe! • Design von Seiten (Page Design) • Design von Inhalten (Content Design) • Design eines „Webauftritts“ (Site Design)

4. Breites Nutzerspektrum! • Studie Georgia Tech Uni (1996) (Shneiderman, S. 642) • Durchschnittsalter: 35 Jahre • Haushaltseinkommen > 60.000 Dollar • 69 % männlich, 82 % nutzen das Internet täglich • Online-Studie ARD/ZDF für Deutschland, 2003 • 34,4 Mio Personen (53,5 Prozent der Bevölkerung ab 14 Jahren) • 56 % männlich, 44 % weiblich • 22% in Ausbildung, 63% berufstätig, 16% Rentner/nicht berufstätig

5. Unterschiedliche Nutzereigenschaften (1/2) • Alter und Geschlecht • Vorwissen, Nationalität • Abbildungen und Angaben mit Maßeinheiten, Datumsangabe etc. sind häufig länderspezifisch • Aufkommen von automatischen Übersetzern, Tests mit Nutzer aus unterschiedlichen Ländern sind notwendig, z.B. bei großen Unternehmen • erstmalig, periodisch, häufiger Webnutzer (nach Shneiderman das entscheidende Merkmal!) • Erstnutzer brauchen Dienste, um zu verstehen, was es gibt • Periodische Nutzer benötigen wieder erkennbare Strukturen • Häufige Nutzer wollen Abkürzungen, die wiederholte Aufgaben beschleunigen

6. Unterschiedliche Nutzereigenschaften (2/2) • Nutzer mit Behinderungen: Guidelines beim Word Wide Web Consortium, z.B.: • Für Hör/Sehbehinderte: Jedes Multimediaelement (Abb., Sound, …) in Text umsetzen • Der Text kann dann ggf. durch entsprechende Tools) vorgelesen werden • Genereller: „universal usability“ (Lazar, S. 721): Unabhängig vom Zugang, Plugins, Alter, Behinderung sollte der Inhalt von Websites wahrnehmbar sein • Keine Schulung für Nutzer: „Another challenge in designing for the web is the absence of training“ (Lazar, S. 715) • Websites, ihre Navigationsstruktur etc. müssen selbsterklärend sein!!! • Auf Konsistenz achten / Standards benutzen, Bespiele • Hyperlinks sind unterstrichen, erscheinen als blaue Links, bereits besuchte als rote/lilafarbene Links

7. Nutzung / Umstellung auf verschiedene(r) Browserversionen Individuelle Betrachtungsfunktionen bei Nutzern • Monitorgrößen: Unterschiede: Faktor 100 zwischen Anzeigegeräten (Computer, Handhelds, Handys), bei anderen Anwendungen Faktor 6 (Laptop vs. high-end-Workstation) • Bandbreiten • Browser • Browsereinstellungen(z. B. Schriftgrößen) • Schrifteninstallationen

8. Resultierende Gestaltungsempfehlungen • „Resolution-Independent Design!!!“ • Trennung von Inhalt und Darstellung (  Verwendung von Stylesheets) • Keine absoluten Größen für • Breiten von Tabellen • Schriftgrößen und Schriftarten (Standards verwenden) • Stattdessen Prozentangaben des verfügbaren Platzes • Möglichst geringe Auflösung von Grafikelementen, 100 dpi • Tipp: Als Webdesigner ältere Browserversionen sammeln • um vor der Freischaltung zu testen • um Fehlerreports von Nutzern nachvollziehen zu können Nielsen, S. 29 ff

9. Stylesheets ( Formatvorlage) • Zwei Möglichkeiten der Implementierung • Embedded Style Sheet: als Teil einer Webseite • Linked Style Sheet: als separate Datei •  Empfohlen wird die „wirkliche“ Trennung, d.h. die Verwaltung in einer eigenen Datei • Cascading Style Sheets (CSS): Style Sheet der Seite und Style Sheet des Nutzers werden zusammengefügt • Empfehlungen zum Inhalt von Style Sheets • Ein Style Sheet sollte nicht mehr als zwei Schriftarten enthalten • Unterschiedliche Schriftgrößen relativ darstellen (%-Angaben) • Vorteile: • Durch CSS wird die Seite für den jeweiligen Nutzer optimal dargestellt • Alle Seiten einer Site stellen sich gleich dar  Wiedererkennung beim Nutzer

10. Design von Webseiten (Page Design)

11. Design von Webseiten – Themen • Entscheidendes Kriterium: Download-Zeit! • Seitenaufteilung • Links • Die Verwendung von Frames

12. Entscheidendes Kriterium: Download-Zeit • Zu lange Ladezeiten frustrieren den Nutzer • Die Einschätzung der Qualität einer Site kann mit steigender Downloadzeit sinken, der Nutzer glaubt an einen Fehler • Je länger die Downloadzeit, desto eher verliert der Nutzer den Kontext (Infos auf der vorherigen Seite) Lazar • Experiment: Anwendung der 10 Seiten mit dem höchsten Zugriff sowie 10 Seiten großer amerikanischer Firmen • Seiten mit dem höchsten Zugriff: durchschnittlich 8 Sekunden • Seiten der großen Unternehmen: durchschnittlich 19 Sekunden • die stark frequentierten Seiten sind stark frequentiert, weil sie so schnell herunterladbar sind („the best sites are fast“) Nielsen, S. 46

13. Download-Zeit: Empfehlungen • Das Laden einer Seite sollte, nachdem der Nutzer einen Link ausgewählt hat, nicht mehr • als 10-15 Sekunden dauern (Lazar) • als 10 Sekunden dauern (Nielsen) • beeinflussbar durch den Designer ist die Größe einer Seite •  Größe limitieren, indem er „maßvoll“ mit den Elementen (Grafiken, Multimedia etc.) umgeht

14. Unterschiedliche Elemente: Beispiel • Navigation (gelb, 51 %) • Content (grün, 14 %) • Browser (blau, 16 %) • Sonstiges, z.B. Werbungrot, 6 %) • Weiße Fläche (weiß, 13 %)

15. Seitenaufteilung – Empfehlungen • Beobachtung: nur ein geringer Teil wird auf den Inhalt verwendet, der Größte auf die Navigation • Daumenregel: Inhalt sollte mindestens 50 %, besser 80 % der Seite einnehmen ( Unterschied zwischen Navigations- und Inhaltsseiten, vgl. Folie X). • „Navigation is a necessary evil that is not a goal in itself and should be minimized“ (Nielsen, S. 18) • Platzierung der Navigationsstruktur: Nicht links oder oben auf einer Seite (das wesentliche ist der Inhalt!) • Zur Unterteilung von Bereichen weiße Flächen statt Linien verwenden

16. Unterschiedliche Typen von Links • Links als Teil der Strukturübersicht:führt zu Unterteilen der gesamtenWebsite • Links im Inhalt:meist unterstrichene Wörter, die auf Seiten mit weiteren Informationen führen • „See Also“: Führt zu ähnlichen Seiten; hilfreich, wenn die aktuelle Seite nichtgenau zu denBedarfen des Nutzers passt

17. Gestaltung von Links • „Click here“-Link vermeiden, statt dessen Link mit dem wesentlichen Inhalt benennen (Nielsen, S. 55) • Nicht „Für weitere Informationen zur Vorlesung Mensch-Maschine Interaktion, Click here“ • Sondern: „Weitere Informationen finden Sie auf der Seite zur „Vorlesung Mensch-Maschine Interaktion“ •  Das Augenmerk wird eher auf den Begriff des Inhalts gelegt, weil ein Link hervorgehoben wird! • Standardisierte Verwendung • Nicht länger als zwei bis vier Wörter • Blau für Links, rot/lila für besuchte Links • Links sind unterstrichen • Für Links Text verwenden( Downloadzeit!) Studie (Nielsen, S. 64): In 16 % wurde das Nicht-Auffinden von Informationen mit nicht-standardisierter Farbgebung der Links begründet

18. Titel für Links • Vorteil: Informationen über die Seite • Der Nutzer erhält Entscheidungshilfen, ob die Seite für ihn interessant sein könnte. • Benennung • Name der Site, zu der der Link führt • Untersite, falls man auf der Site bleibt • Weitere Informationen über den Inhalt, den der Nutzer erwarten kann • Ggf. auch, in welchem Verhältnis die gelinkte Seite zu der aktuellen Seite steht

19. Titel für Links - Beispiele PC Version Mac-Version Nielsen, S. 61

20. Zur Verwendung von Frames • Frames  (Text)rahmen innerhalb einer Seite • Frames werden verwendet, um die Navigationselemente immer sichtbar zu haben • Nachteile: • Der Nutzer hat keine eine URL, um zu einem bestimmten Inhalt zu gelangen ( problematisch bei der Verwendung von Bookmarks) • Meist nicht gut druckbar • Suchmaschinen haben Probleme mit Frames (können nicht zielsicher auf Teile einer Site verweisen) • Schwieriger zu erlernen, besonders für gelegentliche Nutzer • „Frames: Just say no“ (Nielsen, S. 85) • Ausnahme: Meta-Pages, die andere Webseiten kommentieren/klassifizieren

21. Frames auf unterschiedlichen Anzeigegeräten • Oben: auf einemPalm-Monitor • Links: Webpage aufeinem PC-Monitor • Nielsen, S. 88/89

22. Design von Inhalten (Content Design)

23. Design von Inhalten – Themen • Überfliegen (Scanability) ermöglichen! • Hypertext • Zur Verwendung von Grafiken, Fotos, Multimedia etc.

24. Überfliegen (Scanability) ermöglichen! • Lesen längerer Texte am Bildschirm wird von Nutzern vermieden • 79 % der Nutzer überfliegen Webseiten (statt lesen) • Gründe: • Schnellere Augenmüdigkeit am Bildschirm • Dauert 25 % länger • Web als „User Driven Medium“: der Nutzer möchte selbst aktiv sein, klicken, seinen Leseweg selbst bestimmen • Wegen der Fülle von Webseiten interessiert den Nutzer als erstes, ob eine Seite für ihn interessant bzw. passend ist oder nicht • Informationsüberflutung, d.h. die Nutzer müssen in immer kürzerer Zeit mit immer mehr potenziell interessanten Webseiten/E-Mails etc. umgehen Nielsen, S. 106

25. Scannability - Textbeispiele Nielsen, S. 105

26. Schreiben für das Web • Text in mehrere Gliederungsstufen unterteilen • Sinnvolle Überschriften verwenden (inhaltlich, selbsterklärend) • Aufzählungspunkte oder ähnliche Elemente, um zu langen Fließtext zu unterbrechen • Hervorhebungen, um auf das Wesentliche zu lenken Nielsen, S. 106 • Text ist das inhaltstragende Format für Webseiten • hohe Kontraste zwischen Hintergrund und Textfarbe • Schriftgröße groß genug • Kein Blinken etc., weil dies schwieriger zu lesen ist Nielsen, S. 126

27. Hypertext • Goldene Regeln für Hypertext (Shneiderman, S. 631) • Es gibt eine große Menge an Informationen, die in zahlreiche Teilstücke gegliedert ist • Die Teilstücke beziehen sich aufeinander • Der Benutzer benötigt jederzeit nur ein Bruchstück dieser Teilstücke • Empfohlen wird die Verlinkung zu Anhängen, Glossaren, Originalquellen, Literaturzitaten • Schlechtes Design von Hypertexten, wenn… • zu viele Links • zu lange Ketten von Links, um relevantes Material zu erreichen • ungeeignete Überblicke (Inhaltsverzeichnisse), die den Inhalt des Hypertextes nicht erkennen lassen Shneiderman, S. 631 ff.

28. Aufgaben bei der Erstellung von Hypertexten • Ziel: Wissen so aufbereiten, dass… • …sich der Leser in einem Einführungsartikel ein Überblick verschaffen kann. • … die Gesamtstruktur deutlich wird. • … eine Übersicht über behandelte Themen erkennbar ist. • Konkrete Aufgaben: • Geben Sie einen Überblick! • Verwenden Sie einen hierarchischen Ansatz! • Organisieren Sie die Startseite als ein detailliertes Inhaltsverzeichnis! • Ermöglichen Sie eine leicht durchführbare Suche! Shneiderman, S. 631 ff.

29. Optimale Länge von Hypertextartikeln • Untersuchungen zeigen, dass viele kurze Artikel einer kleineren Zahl langer Artikel vorzuziehen sind. • Experiment an der Universität Maryland: • 46 kurze Artikel (4-83 Zeilen) und 5 lange Artikel (104-150 Zeilen) • Testpersonen wurde 30 Minuten Zeit gegeben, um Antworten auf Fragen zu finden. • 16 Testpersonen, die mit den kürzeren Artikeln arbeiteten, beantworteten mehr Fragen richtig und fanden die Antworten schneller • „Optimale“ Länge hängt ab von • Bildschirmgröße und Reaktionszeit • der Art der Aufgabe und der Erfahrung der Benutzer Shneiderman, S. 631 ff.

30. Zur Verwendung von Grafiken, Fotos, Multimedia, etc. • Experiment mit zwei Gruppen mit unterschiedlicher Bandbreite • High-End Grafiken beeindrucken nur die Gruppe mit großer Bandbreite • Das Gefühl, „verloren“ zu sein, stieg mit großen Grafiken und der damit verbundenen Erhöhung der Wartezeit bis zum Aufbau einer Seite (vgl. Folien zur Download-Zeit) • Verwendung hängt ab vom Ziel der Webseite: Entertainmentseiten vs. Informationsseiten • Bei Informationsseiten eher auf Grafiken, Fotos und Multimedia verzichten • Bei Entertainmentseiten  s. nächste Folie Lazar S. 723 ff.

31. Entertainmentseiten: Verwendung von Grafiken, Fotos, Multimedia, etc. • nach Möglichkeit zwei Versionen anbieten: reiner Text und Text mit Grafik (kommt in der Realität selten vor) • Ansonsten: „Design mit dem kleinsten gemeinsamen Nenner ist wichtiger als […] Gebrauch zahlreicher Grafiken“ (Shneiderman S. 654) • Ggf. Elemente nach und nach einblenden der Nutzer sieht, dass etwas passiert und kann Teile des Inhalts wahrnehmen • Bei Verwendung von Fotos „Thumbnails“ verwenden, bei Bedarf größeres Bild durch Verlinkung • Beim Download großer Dateien die erwartete Downloadzeit anzeigen ( Transparenz beim Nutzer!)

32. Design eines „Webauftritts“ (Site Design)

33. Design eines „Webauftritts“ – Themen • Fakten zu Websites • Navigation • Informationsstrukturierung

34. Ziel Verkauf von Produkten Werbung für Produkte Informieren / Ankündigungen Zugang anbieten Anbieten von Diensten Diskussionen Pflege von Gemeinschaften Organisationen Verlage, Kaufhäuser Autohändler, Filmstudios Universitäten, Museen, Städte Bibliotheken, Zeitungen Regierungen, Verwaltungen Bürgerinitiativen (Politische) Gruppen / Verbände Ziele von Websites Shneiderman, S. 638 ff.

35. Zahl der Webseiten 1-10 5-50 50-500 500-5.000 5.000-50.000 50.000-500.000 500.000-5.000.000 >5.000.000 Beispiele Persönliche Biografie Publikationen, Fotogalerie Buch, Stadtführer, Jahresbericht Fotosammlung, Museumstour, Musik- oder Filmdatenbank Universitätsführer, Zeitungen Telefonverzeichnis, Flugplan Zeitschriftenkurzfassung Nasa-Archiv Websites: Größe und Beispiele Shneiderman, S. 638 ff.

36. Homepage – „Front Door of the Site“ • Sollte einen Überblick über Subsites geben ( vgl. Folien zur Informationsstruktur) • Ort für aktuelle Nachrichten • Es sollte ein Link zu einer Seite mit Übersicht über alle Seiten der Sites (SiteMap) angeboten werden (Shneiderman, S. 657) • Nicht jeder Nutzer steigt über die Homepage ein  alle Seiten einer Site sollten ein klickbares Logo haben (bietet Kontext und gleichzeitig einen Navigationsbutton zur Homepage der Site)

37. Navigation • Unterschiedliche Navigationsmöglichkeiten: • Über Browserfunktionalitäten • Über Elemente der Webseiten • Die meiste Navigation findet über die Elemente auf den Webseiten statt • Browserfunktionalitäten: Back-Button als Sicherheitsnetz • Orientierung: Der Nutzer sollte zu jeder Zeit wissen, an welcher Stelle der Site er sich gerade befindet • Transparenz: Jede Seite sollte mehr als den Link zur Einstiegsseite der Site beinhalten (Lazar) • Navigation konsistent auf allen Seiten einer Site

38. Navigation • Navigation über Bereiche (Sectional Navigation) • Unterschiedliches Design für unterschiedliche Größe • Bei kleiner Menge an Seiten von jeder Seite zu allen anderen • Falls mehr Seiten, dann (Hierarchie von) Inhaltsbereichen zur Untergliederung bilden • Alternative: audience-Splitting (Lazar): Navigationsstruktur für unterschiedliche Nutzergruppen • Pfadnavigation (Path navigation) • „breadcrumbs navigation“ (Nielsen) • Anzeige des Pfades, über den ein Nutzer von der Einstiegsseite zu der aktuellen Seite gelangt • Die Zwischenschritte sind anklickbar  die Pfadangabe ist zur Navigation nutzbar Sectional Navigation Und Pfadnavigation schließen sich gegenseitig nicht aus.

39. Navigation auf der I&G-Website Link zur Home-page Pfadnavigation Subsites Sitemap

40. Informationsstruktur – Breite vs. Tiefe • eher breite als tiefe Struktur wählen, da der Nutzer dann nicht durch zu viele Ebenen navigieren muss, ehe er zu den Inhaltsseiten gelangt • alle Seiten einer Site sollten mit 4-5 Clicks erreichbar sein „Research has found that four or five clivcks in a Web site is the maximum that a user will complete before giving up“ (Lazar, S. 720)

41. Unterschiedliche Informationsstrukturen von Sites • Kurze, unstrukturierte Liste z.B. für Hightlights einer Stadtführung, Übersicht über laufende Projekte • Lineare Strukturen  Veranstaltungskalender, alphabetische Listen • Datenfelder oder Tafeln  Abfahrtsort, Datum, Uhrzeit • Hierarchien, Verzweigungsbäume  Kontinent-Land-Stadt • Vielfachverzweigungen, Aspektabruf  Fotos sortiert nach Datum, Themen • Netzwerke  Zeitschriftenzitate, Stammbäume Shneiderman, S. 644 ff.

42. Verwendung einer Metapher für die Site • Nahe liegender Ausgangspunkt: Metaphern aus traditionellen Medien • Beispiele: • Aktenschränke mit Ordnern und Dokumenten • Einkaufspassage mit Geschäften und Regalen darin • Metapher muss nützlich sein • Um Konzepte auf hoher Ebene darzustellen • Angemessen, um Objekte auf mittlerer Ebene auszudrücken • Effektiv, um auf Details auf Pixel-Ebene hinzuweisen Shneiderman, S. 647

43. Site-Metapher: Beispiel 1 Nielsen, S. 181

44. Site-Metapher: Beispiel 1 Nielsen, S. 182

45. Gliederung für die heutige Sitzung • Webdesign für breite Nutzergruppe! • Entscheidendes Kriterium: Download-Zeit! • Seitenaufteilung • Links • Die Verwendung von Frames • Design von Seiten (Page Design) • Design von Inhalten (Content Design) • Design eines „Webauftritts“ (Site Design) • Ausblick (Future Predictions)

46. Zusammenfassung • Webdesign für breite Nutzergruppe! • Design von Seiten (Page Design) • Entscheidendes Kriterium: Download-Zeit! • Seitenaufteilung und Links • Die Verwendung von Frames • Design von Inhalten (Content Design) • Überfliegen (Scanability) ermöglichen! • Hypertext • Zur Verwendung von Grafiken, Fotos, Multimedia etc • Design eines „Webauftritts“ (Site Design) • Fakten zu Websites • Navigation • Informationsstrukturierung

47. Literatur • Sutcliffe, A. (2003): Multimedia User Interface Design. In: Jacko, Julie A.; Sears, Andrew (Eds.) (2002): The Human-Computer Interaction Handbook. Mahwah, New Jersey: LEA. S. 245-262. • Visual Design principles for usable interfaces. In: Jacko, Julie A.; Sears, Andrew (Eds.) (2002): The Human-Computer Interaction Handbook. Mahwah, New Jersey: LEA. S. 263-286. • Shneiderman, Ben (2002): User Interface Design- deutsche Ausgabe. MITP • Lazar, Jonathan (2002): The world wide web. In: Jacko, Julie A.; Sears, Andrew (Eds.) (2002): The Human-Computer Interaction Handbook. Mahwah, New Jersey: LEA. S. 714-730. • Nielsen, Jakob (2000): Designing Web Usability. Indianapolis: New Riders. • ARD/ZDF-Studie (zuletzt abgerufen am 17.1.2004): http://www.zdf.de/ZDFde/inhalt/29/0,1872,2065693,00.html