Vorlesung Informatik & Gesellschaft Dr. Andrea Kienle 04.07.2005

VorlesungInformatik & Gesellschaft

Dr. Andrea Kienle

04.07.2005

Seite 2 /47

Informatik &Gesellschaft

Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 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.)

■ 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.

Seite 3 /47



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)

Seite 4 /47



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

Seite 5 /47



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

Seite 6 /47



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

Seite 7 /47



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

■ Nutzung / Umstellung auf verschiedene(r) Browserversionen

Seite 8 /47



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

Seite 9 /47



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

Seite 10 /47



Design von Webseiten (Page Design)

Seite 11 /47



Design von Webseiten – Themen

■ Entscheidendes Kriterium: Download-Zeit!

■ Seitenaufteilung

■ Links

■ Die Verwendung von Frames

Seite 12 /47



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)

■ 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

Lazar

Seite 13 /47



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

Seite 14 /47



Unterschiedliche Elemente: Beispiel

■ Navigation (gelb, 51 %)

■ Content (grün, 14 %)

■ Browser (blau, 16 %)

■ Sonstiges, z.B. Werbungrot, 6 %)

■ Weiße Fläche (weiß, 13 %)

Seite 15 /47



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

Seite 16 /47



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

Seite 17 /47



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 dasNicht-Auffinden vonInformationen mit

nicht-standardisierterFarbgebung der Links

begründet

Seite 18 /47



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

Seite 19 /47



Titel für Links - Beispiele

Nielsen, S. 61

PC Version

Mac-Version

Seite 20 /47



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

Seite 21 /47



Frames auf unterschiedlichen Anzeigegeräten

■ Oben: auf einemPalm-Monitor

■ Links: Webpage aufeinem PC-Monitor

■ Nielsen, S. 88/89

Seite 22 /47




Seite 23 /47



Design von Inhalten – Themen

■ Überfliegen (Scanability) ermöglichen!

■ Hypertext

■ Zur Verwendung von Grafiken, Fotos, Multimedia etc.

Seite 24 /47



Ü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

Seite 25 /47



Scannability - Textbeispiele

Nielsen, S. 105

Seite 26 /47



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 istNielsen, S. 126

Seite 27 /47



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.

Seite 28 /47



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!


Seite 29 /47



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


Seite 30 /47



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.

Seite 31 /47



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!)

Seite 32 /47




Seite 33 /47



Design eines „Webauftritts“ – Themen

■ Fakten zu Websites

■ Navigation

■ Informationsstrukturierung

Seite 34 /47



Ziele von Websites

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


Seite 35 /47



Websites: Größe und Beispiele

Zahl der Webseiten1-10

5-50

50-500

500-5.000

5.000-50.000

50.000-500.000

500.000-5.000.000

>5.000.000

BeispielePersönliche Biografie

Publikationen, Fotogalerie

Buch, Stadtführer, Jahresbericht

Fotosammlung, Museumstour, Musik- oder Filmdatenbank

Universitätsführer, Zeitungen

Telefonverzeichnis, Flugplan

Zeitschriftenkurzfassung

Nasa-Archiv


Seite 36 /47



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)

Seite 37 /47



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

Seite 38 /47



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 NavigationUnd Pfadnavigation

schließen sichgegenseitig nicht aus.

Seite 39 /47



Navigation auf der I&G-Website

Sitemap

PfadnavigationLink zur

Home-page

Subsites

Seite 40 /47



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)

Seite 41 /47



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


Seite 42 /47



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

Seite 43 /47



Site-Metapher: Beispiel 1

Nielsen, S. 181

Seite 44 /47



Site-Metapher: Beispiel 1

Nielsen, S. 182

Seite 45 /47



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)



Ausblick (Future Predictions)

Seite 46 /47



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

Seite 47 /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

Documents

Vorlesung Informatik & Gesellschaft Dr. Andrea Kienle 04.07.2005