1 / 47

Vorlesung Informatik & Gesellschaft

Vorlesung Informatik & Gesellschaft. Dr. Andrea Kienle 04.07.2005. 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.)

hailey
Download Presentation

Vorlesung Informatik & Gesellschaft

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related