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.) 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. 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) 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 Das Kreisdiagramm zeigt die Verteilung der Onlinenutzer… 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 Abbildungen, Bsp. Applepapierkorb, der in England als Posteingangskorb verstanden wird (Lazar, S. 722) 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 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 Beim Browser: ein Jahr nach Erscheinen einer neuen Browserversion kann man davon ausgehen, dass ein großer Teil der Nutzer die neue Version hat (Nielsen S. 34/35) 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 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 Style sheets verwendet man, um den Nutzer bzgl. seines individuellen Anzeigegerätes entgegenzukommen ( CSS!) Bei Cascading Style Sheet: Der Designer einer Webseite kann nicht voraussagen, wie die Seite bei dem Nutzer letztlich aussieht („WYSIWYG is dead“) Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Design von Webseiten (Page Design) 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 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) 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“) Die ersten drei Aufzählungspunkte entstammen dem Artikel von Lazar, Das Experiment von Nielsen Nielsen, S. 46 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 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. Werbung rot, 6 %) Weiße Fläche (weiß, 13 %) 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 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 gesamten Website 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 den Bedarfen des Nutzers passt Die Strukturübersicht ist meist eine Liste von Links (Nielsen S. 51) Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

nicht-standardisierter 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 Die Benennung hat auch einen Lerneffekt; der Nutzer wird nicht alle verlinkten Webpages anklicken, um zu gucken, was darauf steht. Deshalb erst recht „sprechende Links“ verwenden!!! Nielsen, S. 55 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 Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Titel für Links - Beispiele PC Version Mac-Version Nielsen, S. 61 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 Ein Bookmark kann den Nutzer u.U. zu einem anderen Teil des Inhalts in dem Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Frames auf unterschiedlichen Anzeigegeräten Zeigt, dass es Devices gibt, bei dem man am besten nur den Inhalt darstellt, das die Navigationseite zu viel Platz wegnimmt… Oben: auf einem Palm-Monitor Links: Webpage auf einem PC-Monitor Nielsen, S. 88/89 Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Design von Inhalten (Content Design) 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. 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 Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Scannability - Textbeispiele Unterschiedliche Arten, die Scannability zu erhöhen Nielsen, S. 105 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 ist Text auch für Leute mit Behinderungen sinnvoll (vgl. Folien zu Nutzereigenschaften) Nielsen, S. 126 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. 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. 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. 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. 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!) Beispiel für Reihenfolge „nach und nach einblenden“ erst Text und Links, dann Abbildungen, Grafiken etc. Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Design eines „Webauftritts“ (Site Design) Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Design eines „Webauftritts“ – Themen Fakten zu Websites Navigation Informationsstrukturierung Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Ziele von Websites Ziel Organisationen 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. Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Websites: Größe und Beispiele 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 Shneiderman, S. 638 ff. 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) Nielsen verwendet den Begriff Homepage, Lazar den Begriff Front Door 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 Die ersten beiden Aufzählungspunkte vgl. Lazar Sicherheitsnetz aus Nielsen Konsistenz durch Stylesheets 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 Navigation Und Pfadnavigation schließen sich gegenseitig nicht aus. Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Navigation auf der I&G-Website Link zur Home-page Pfadnavigation Subsites Sitemap 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) 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. 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 Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Site-Metapher: Beispiel 1 Nielsen, S. 181 Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005

Site-Metapher: Beispiel 1 Nielsen, S. 182 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) 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 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 Dr. Andrea Kienle: Vorlesung Informatik & Gesellschaft 2005, UniDO 04.07.2005