vorlesung informatik & gesellschaft dr. andrea kienle 04.07.2005
Post on 05-Apr-2015
106 Views
Preview:
TRANSCRIPT
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Design von Webseiten (Page Design)
Seite 11 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Design von Webseiten – Themen
■ Entscheidendes Kriterium: Download-Zeit!
■ Seitenaufteilung
■ Links
■ Die Verwendung von Frames
Seite 12 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Titel für Links - Beispiele
Nielsen, S. 61
PC Version
Mac-Version
Seite 20 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Frames auf unterschiedlichen Anzeigegeräten
■ Oben: auf einemPalm-Monitor
■ Links: Webpage aufeinem PC-Monitor
■ Nielsen, S. 88/89
Seite 22 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Design von Inhalten (Content Design)
Seite 23 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Design von Inhalten – Themen
■ Überfliegen (Scanability) ermöglichen!
■ Hypertext
■ Zur Verwendung von Grafiken, Fotos, Multimedia etc.
Seite 24 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Ü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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Scannability - Textbeispiele
Nielsen, S. 105
Seite 26 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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.
Seite 29 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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.
Seite 30 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Design eines „Webauftritts“ (Site Design)
Seite 33 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Design eines „Webauftritts“ – Themen
■ Fakten zu Websites
■ Navigation
■ Informationsstrukturierung
Seite 34 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Shneiderman, S. 638 ff.
Seite 35 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Shneiderman, S. 638 ff.
Seite 36 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Navigation auf der I&G-Website
Sitemap
PfadnavigationLink zur
Home-page
Subsites
Seite 40 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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.
Seite 42 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Site-Metapher: Beispiel 1
Nielsen, S. 181
Seite 44 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
Site-Metapher: Beispiel 1
Nielsen, S. 182
Seite 45 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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)
Seite 46 /47
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
Informatik &Gesellschaft
Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005
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
top related