Informationsarchitektur Informationsangebote in denen sich Nutzer zurecht finden

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

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

Definitionen § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen 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. Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Aufgaben Einstieg § Überzeugende Architektur § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen ü 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. Vgl. Eisenberg 2002 Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

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

Explorationsaufgabe Aufgaben § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen 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. 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 Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Informationen ordnen § Nehmen Sie sich 5 Minuten Zeit und ordnen Sie die unten aufgeführten Begriffe: § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen 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 Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

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

Ordnung und Webdesign Ordnungsschemata Die visuellen Muster sollen die logischen und funktionalen Beziehungen zwischen den Informationselementen widerspiegeln § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen §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 Besucher die Informationselemente wahrnehmen soll? vgl. Website von Ursula Schulz: <http: //www. bui. fh-hamburg. de/pers/ursula. schulz/webusability/praesentation. html> Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

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

Strukturieren § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen 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? Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Benennen Benennung § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen 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? Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Navigieren § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen 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 to. Web Usability. Indianapolis: Macmillan, 2000) Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Typen von Navigationssystemen Navigieren § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Typen von Navigationssystemen § Hierarchie / Architektur der Site § globale Navigationssysteme ü Hilfsmittel, 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 Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Tipps zur Gestaltung von Navigationssystemen Navigieren Halten Sie sich an die gängigen Konventionen §Berücksichtigen Sie die Navigationsmöglichkeiten der gängigen Browser § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen ü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. Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Tipps zur Gestaltung von Navigationssystemen Navigieren Vor- und Nachteile von Navigationssystemen § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen §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. Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Schnelltest von Navigationssystemen Test 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? ü ü ü Was ist das hier für eine Webseite? Wo genau befinde ich mich? Wie ist die Webseite gegliedert? § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen ü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? 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: 1. Wo steht die Site ID? 2. Name der Seite 3. Abschnitte und Unterabschnitte Spree So. Se 2008 4. Lokale Navigation 5. “Wo bin ich”- Hinweis? 6. Suche Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Fazit § § § § § 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 Spree So. Se 2008 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004

Quellen und weiterführende Ressourcen Quellen / Ressourcen 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 § § § § § Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen Kalmbach, James: Designing Web Navigation. Sebastopol, CA: O'Reilly & Associates, 2007 Krug, Steve: Don‘t 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/tutorial 1. 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 Seminar I-Prax: Inhaltserschließung visueller Medien, 5. 10. 2004