Letzte Aktualisierung: 2008-05-19 Spree SoSe 2008 Informationsarchitektur Informationsangebote, in denen sich Nutzer zurecht Fotostrecke: Taj.

Präsentation zum Thema: "Letzte Aktualisierung: 2008-05-19 Spree SoSe 2008 Informationsarchitektur Informationsangebote, in denen sich Nutzer zurecht Fotostrecke: Taj."—  Präsentation transkript:

1 Letzte Aktualisierung: 2008-05-19 Spree SoSe 2008 Informationsarchitektur Informationsangebote, in denen sich Nutzer zurecht finden @ Fotostrecke: Taj Mahal http://www.boxesandarrows.com/files/banda/we_are_all_connected_the_path_from_architecture_to_information_architecture / Shilouette Gesamtansicht Eingangstor (menschlicher Maßstab) Detail Geometry Scale Proportion Rhythm Symmetry

2 Zum Einstieg eine kleine Umfrage Einstieg Was halten Sie für die wichtigsten Elemente einer guten Website? reichhaltig bebildert einfache Navigation coole Bezeichnungen informative und nützliche Inhalte Übersichtlichkeit viele verschiedene Navigationsmöglichkeiten Einsatz neuester Technologie (plug ins...) Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

3 Definitionen Definitionen Die IT – Definition Informations-Architektur ist die Planung und Verwaltung der IT-Infrastruktur einer Organisation. Darin eingeschlossen ist die Entwicklung von Grundstrukturen und Richtlinien dafür, wie IT-Ressourcen wie Computer, Daten, Software und Kommunikationsmöglichkeiten verwaltet werden sollen. Die Wissensorganisations-Definition Informations-Architektur ist der Prozess des Organisierens, Benennens und des Entwickelns von Navigations- und Suchsystemen um Nutzer bei der Suche nach und dem Management von Informationen zu unterstützen. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

4 Aufgaben Einstieg Überzeugende Architektur Vor der Planung einer Website sollten folgende Fragen berücksichtigt werden: Welche Aktionen sollen mit der Website ausgeführt werden? Wer soll davon überzeugt werden, diese Aktionen auszuführen? Was benötigt diese Person, damit sie sich auf der Seite wohl fühlt/Vertrauen zur Seite hat. Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Vgl. Eisenberg 2002

5 Aufgaben von Informationsarchitekten? Aufgaben Informationen ordnen Informationen strukturieren Informationen benennen Erstellen eines Navigationssystems Erstellen eines Suchsystems Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Struktur und Navigation haben große Überzeugungskraft in der Informationsarchitektur

6 Explorationsaufgabe Aufgaben Schauen Sie sich bitte diese beiden Startseite an http://www.faz.net/s/homepage.html (die hinteren beiden Reihen) und http://www.spiegel.de/flash/0,5532,16632,00.html (Rest) an. http://www.faz.net/s/homepage.html http://www.spiegel.de/flash/0,5532,16632,00.html A) Wie werden: Informationen geordnet? Informationselemente benannt? Welche Navigations- und Suchmöglichkeiten gibt es? B) Was gefällt Ihnen, was gefällt Ihnen nicht? Begründen Sie Ihr Urteil Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

7 Informationen ordnen Informationen ordnen Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Nehmen Sie sich 5 Minuten Zeit und ordnen Sie die unten aufgeführten Begriffe: Architekt, U-Bahn, Bahnhof, Krankenschwester, Krankenhaus, Lehrer, Haus, Meer, Wissenschaftler, Arzt, Schule, Mechaniker, Seemann Was fällt an dieser Inhaltsübersicht einer Website einer Bibliothek auf? - Benutzerausweis beantragen - Bücher vormerken - Erwachsene - Jugendliche - Kultur und Medien - Naturwissenschaften - Teenager - Über uns Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

8 Ordnungsschemata Ordnungsschemata Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Man unterscheidet unterschiedliche Ordnungsschemata Exakte Ordnungsschemata Alphabetisch Chronologisch Geographisch Sprache … Mehrdeutige Ordnungsschemata Nach Themen Architektur, Bildung, Erziehung,... Nach Aufgaben Bearbeiten Einfügen Formatieren Nach Nutzergruppen Studenten, Lehrende, Frauen,… Metaphorisch Virtueller Klassenraum Kandidaten-Karussel Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

9 Ordnung und Webdesign Ordnungsschemata Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Die visuellen Muster sollen die logischen und funktionalen Beziehungen zwischen den Informationselementen widerspiegeln Gruppierung Sind verwandte Elemente durch 'white space', grafische Begrenzungen, gleiche Helligkeit, Farbe oder Textur gruppiert? Sind nicht-verwandte Elemente optisch voneinander unterschieden oder räumlich voneinander getrennt? Abstufung von Bedeutung Wird die Abstufung der Bedeutung einzelner Elemente im Verhältnis zu anderen Elementen grafisch unterstützt? Farbgebung, Platzierung, Größe, Isolierung, Komplexität und Kontrast erregen besonders leicht Aufmerksamkeit. Konsistenz und Vorhersagbarkeit Ist das Design konsistent und vorhersagbar? Werden Elemente, die logisch oder funktional gleich sind, optisch gleich behandelt? Ist das Platzierungsmuster der Elemente auf den Seiten konsistent? Ist der Hintergrund konstant? Reihenfolge Unterstützt das Design die Reihenfolge, in der der Besucher die Informationselemente wahrnehmen soll? vgl. Website von Ursula Schulz: Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

10 Strukturieren Strukturieren Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Die Struktur einer Site ist dadurch bestimmt, in welcher Beziehung Informationen zueinander stehen: Abb. 1 Flache Hierarchie Abb. 2 Tiefe Hierarchie Abb. 3 Hypertext/Netz Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Abb. 4 Facettenstruktur Farbe: gelb Rand: ohne Form: Rechteck

11 Strukturieren Strukturieren Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Die richtige Struktur für eine Aufgabe finden Für welche Aufgaben würden Sie eine flache Hierarchie wählen? Für welche Aufgaben würden Sie eine tiefe Hierarchie wählen? Für welche Aufgaben würden Sie eine Hypertextstruktur wählen? Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

12 Benennen Benennung Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Anforderungen an Benennungen Konsistenz z.B. im Sprachstil eine Benennung sollte nicht auf verschiedenen Seiten unterschiedliche Bedeutungen haben Berücksichtigung von bestehenden Konventionen wenn Sie abweichen, sollte das einen Grund haben Linkbenennungen: z. B. keywords als Links Benennungen im Kontext und ohne Kontext Bilder? ein Wort sagt mehr als tausend Worte? Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

13 Navigieren Navigieren Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Funktionen von Navigationssystemen Offensichtliche Funktionen von Navigationssystemen Standortbestimmung Suchhilfe / Browsingstruktur 'Übersehene' Funktionen von Navigationssystemen Orientierungsfunktion - bietet Sicherheit und Kontrolle Macht die Inhalte der Site sichtbar Zeigt, wie die Seite zu nutzen ist Wo ist der Anfang? Welche Auswahlmöglichkeiten gibt es? Schafft Vertrauen in die Urheber der Seite "...denn sie wissen, was sie tun" (vgl. Steve Krug: Don't make me think! A Common Sense Approach toWeb Usability. Indianapolis: Macmillan, 2000 ) Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

14 Typen von Navigationssystemen Navigieren Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Typen von Navigationssystemen Hierarchie / Architektur der Site globale Navigationssysteme Hilfsmittel, die die Navigation quer zur Hierarchie erlauben Navigationsleiste Home-Button Frames lokale Navigationssysteme für Unterbereiche spontane Navigationssysteme durch interne und externe Links ausgelagerte Navigationssysteme Inhaltsverzeichnis Index Site map Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

15 Tipps zur Gestaltung von Navigationssystemen Navigieren Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Halten Sie sich an die gängigen Konventionen Berücksichtigen Sie die Navigationsmöglichkeiten der gängigen Browser URL eingeben (sprechende URL wählen) Titelanzeige im Kopf des Browserfensters (sprechenden Titel wählen) Vorwärts- / Rückwärts-Button Verlauf (History) (Wo war ich alles?) Bookmarks (Was war relevant für micht?) Verfärbung besuchter Hypertext-Links von blau zu violett (Wo war ich schon?) Prospektive Anzeige der URL am Fuß des Browser-Fensters (Wo komme ich hin?) Berücksichtigen Sie die Standards seitenintegrierter Navigationssysteme Navigationsleisten sollen am oberen und unteren Ende der Seite platziert werden Die Nutzer sehen sofort, wo sie sind, während die Seite sich lädt Eine bewährte Platzierung von Navigationsleisten ist das umgedrehte L. Grafiken laden sich langsamer als Text und sind aufwändiger zu ändern oder zu ergänzen. Grafische Lösungen immer durch eine textuelle Alternative ergänzt werden (ALT-tag) Icons als Navigationselemente sind nicht so eindeutig wie Text. Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

16 Tipps zur Gestaltung von Navigationssystemen Navigieren Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Vor- und Nachteile von Navigationssystemen Frames Vorteile: Mehrere Fenster können unabhängig voneinander gescrollt werden Links in einem Fenster können Inhalt in einem anderen Fenster kontrollieren. Nachteile: Jedes weitere Fenster kostet Platz. Frames können wichtige Browser-Funktionen außer Kraft setzen: : Bookmarking, History- Liste, Zurück-Button, eine Seite neu laden. Eine Seite mit Frames lädt sich langsamer. Ein Design mit Frames kann sehr kompliziert werden. Pull-down Menüs Vorteile: Man kann viele Optionen unter bringen Platz sparend Nachteile: Je mehr Optionen, desto schwieriger ist die Anwendung für den Benutzer. Benutzer müssen selbst aktiv werden, um zu sehen, welche Optionen ihnen zur Verfügung stehen. Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen

17 Schnelltest von Navigationssystemen Test Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Der Fallschirmspringertest Stellen Sie sich vor, Sie sind als Fallschirmspringerin auf einer Website ausgesetzt. Wissen Sie sofort, wo Sie sind? Beantwortet Ihnen das Navigationssystem folgende Fragen? Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Testablauf Schritt 1: Wählen Sie eine beliebige Website und drucken Sie aus Schritt 2: Nehmen Sie einen Stift zur Hand und versuchen Sie so rasch wie möglich folgende Elemente zu finden: Was ist das hier für eine Webseite? Wo genau befinde ich mich? Wie ist die Webseite gegliedert? Welche Abschnitte gibt es? Welche Wahlmöglichkeiten habe ich auf dieser Ebene? Auf welcher Ebene befinde ich mich in der Gesamtstruktur? Wie kann ich suchen? 1. Wo steht die Site ID? 2. Name der Seite 3. Abschnitte und Unterabschnitte 4. Lokale Navigation 5. Wo bin ich- Hinweis? 6. Suche

18 Fazit Fazit Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree SoSe 2008 Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Informationsarchitektur nutzt bewährte Methoden der Wissensorganisation Ordnung und Struktur, Konsistenz Klassifikation Benennung Indexierung und Thesaurus Navigation Recherchesysteme, Browsinghierarchien

19 Quellen und weiterführende Ressourcen Quellen / Ressourcen Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Chiou, Fu-Tien: We are all connected : The path from Architecture to Information-Architecture. In: Boxes and Arrows, 2003/11/10 http://www.boxesandarrows.com/view/we_are_all_connected_the_path_from_architecture_to_infor mation_architecture http://www.boxesandarrows.com/view/we_are_all_connected_the_path_from_architecture_to_infor mation_architecture Kalmbach, James: Designing Web Navigation. Sebastopol, CA: O'Reilly & Associates,2007 Krug, Steve: Dont make me thiink! Indianapolis: Macmillan, 2000 Rosenfeld, Louis Rosenfeld und Peter Morville: Information Architecture for the World Wide Web. Sebastopol, CA: O'Reilly & Associates, 1998 Shiple, John: Information Architecture Tutorial http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial1.htmlhttp://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial1.html einführender E-learningkurs Weiterführende Links: The Information Architecture Institute http://iainstitute.org/en/ University of Minnesota: Web Design References http://www.d.umn.edu/itss/support/Training/Online/webdesign/architecture.html