Informationsarchitektur (digitale) Informationsräume strukturieren und organisieren Shilouette Gesamtansicht Eingangstor (menschlicher Maßstab) Detail Geometry Scale Proportion Rhythm Symmetry @ Fotostrecke: Taj Mahal http://www.boxesandarrows.com/view/we_are_all_connected_the_path_from_architecture_to_information_architecture Spree WS 2009/2010

(Digitale) Informationsräume strukturieren und organisieren Sie haben sich das dieses Thema gewünscht: (Digitale) Informationsräume strukturieren und organisieren Bevor ich meinen Programmvorschlag vorstelle, wüsste ich gerne: Was wünschen Sie sich, was erwarten Sie von dem Thema? Das vorgestellte Programm ist nur ein Vorschlag: ich bitte um Veränderungen, Ergänzungen Streichungen, …  Thema des Seminars Definitionen Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Kartenabfrage Jede/r darf maximal 3 Wünsche pro Frage äußern zu: Definitionen Jede/r darf maximal 3 Wünsche pro Frage äußern zu: Themen / Fragestellungen Arbeitsweisen Prüfungsleistung Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Definitionen Die IT – Definition Die Design – Definition Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Definitionen Definitionen Die IT – Definition Informationsarchitektur 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 Design – Definition „Information Architects make the complex clear; they make the information understandable to other human beeings.“ (Wurman, 2003) 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. (Morville & Rosenfeld, 1998) Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Beispiel – Informationsdesign-Ansatz Einstieg Richard Saul Wurmans minimalistische Darstellung des Verkehrssystems der Stadt Tokyo Zu Wurman: http://www.wurman.com/publications.html http://www.gslis.utexas.edu/~l38613dw/images/WurmanToyko1.jpg Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Aufgaben von Informationsarchitekten? Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Aufgaben von Informationsarchitekten? Aufgaben Angenehme Nutzererfahrung schaffen / user experience (Norman / Garrett) http://www.jjg.net/elements/pdf/elements.pdf Informationen ordnen und strukturieren Informationen benennen Informationen zugänglich und findbar machen Navigation Suche (Rosenfeld/Morville; Wodtke) http://iainstitute.org/de/ Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Explorationsaufgabe Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Explorationsaufgabe Aufgaben Schauen Sie sich bitte diese beiden Startseiten an http://www.bui.haw-hamburg.de/ http://www.design.haw-hamburg.de/ A) Wie unterscheidet sich die User Experience auf den beiden Seiten? ‚look and feel‘ 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 WS 2009/2010

Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Informationen ordnen Informationen ordnen 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 Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Ordnungsschemata Man unterscheidet unterschiedliche Ordnungsschemata Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Ordnungsschemata Ordnungsschemata 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 Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Ordnung und Webdesign Die visuellen Muster sollen die logischen Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Ordnung und Webdesign Ordnungsschemata 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: <http://www.bui.fh-hamburg.de/pers/ursula.schulz/webusability/praesentation.html> Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

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

 Strukturieren Die richtige Struktur für eine Aufgabe finden Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Strukturieren Strukturieren 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? Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Benennen Anforderungen an Benennungen Konsistenz z.B. im Sprachstil Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Benennen Benennung 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? Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Navigieren Funktionen von Navigationssystemen Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Navigieren Navigieren 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) Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Typen von Navigationssystemen Typen von Navigationssystemen Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Typen von Navigationssystemen Navigieren 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 Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  Fazit Fazit Informationsarchitektur nutzt bewährte Methoden der Wissensorganisation Information audit / Information needs Ordnung und Struktur, Konsistenz  Klassifikation Benennung  Indexierung und Thesaurus Navigation  Recherchesysteme, Browsinghierarchien Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010

 Quellen und weiterführende Ressourcen Umfrage Definitionen Aufgaben Ordnen Strukturieren Benennen Navigieren Fazit Quellen  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_information_architecture 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/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 Semesterapparat Spree: IWS WM 1–3: Informationssysteme und -dienstleistungen http://semapp.bbt.haw-hamburg.de/index.php Spree WS 2009/2010 Spree WS 2009/2010 Seminar I-Prax: Inhaltserschließung visueller Medien, 5.10.2004 Spree WS 2009/2010