Erstellung und Gestaltung attraktiver WWW-Präsentationen Internet-Tutorium für Fortgeschrittene WS 99/00 Erstellung und Gestaltung attraktiver WWW-Präsentationen

Inhalt: Psychologie und WWW-Präsentationen Hypertext: Charakteristika nicht-linearer Verknüpfungsstrukturen Kriterien für gelungene WWW-Präsentationen Allgemeines zum Layout Mögliche Verknüpfungsstrukturen Spezielle Layout-Fragen Wenn die Präsentation fertiggestellt ist... Literatur und Online-Quellen

1 Psychologie und WWW-Präsentationen Stichwort „Mensch-Maschine-Schnittstelle“ (Psychologen sind aufgefordert, die spezifisch menschlichen Charakteristika in diesem Bereich zu betonen/ zu erforschen  „wahrnehmungspsychologische Aspekte“; „kognitive Kapazitäten“; ...) Gute Gestaltung von WWW-Präsentationen ist eine neue, wichtige Kompetenz (analog zum Verfassen herkömmlicher wissenschaftlicher Arbeiten)  Kriterien müssen erst noch entwickelt werden!

2 Hypertext: Charakteristika nicht-linearer Verknüpfungsstrukturen Charakteristika von Hypertext: Bestehend aus Knoten und Links (Verknüpfungen) Links bestehen wiederum aus einem Start- und einem Zielanker Nicht-lineare Verknüpfungen möglich (im Gegensatz zu traditionellen Texten in Buchform, die linear-hierarchisch aufgebaut sind)  keine festgelegte Lesereihenfolge (also auch kein voraussetzbares Vorwissen: Knoten müssen unabhängig voneinander formuliert sein!) Vgl.bar: Enzyklopädien, Lexika, Karteikartensysteme (realisieren nicht alle Aspekte)

Hypertext (2) Hauptproblem der Nutzer: kognitive Überlastung! Gründe: Gleichzeitig zu leisten: Lesen/ Aufnehmen des Textinhaltes und Treffen von Navigationsentscheidungen Nicht verfolgte, aber interessierende Links müssen imGedächtnis behalten werden  Kumulation „unerledigter Aufgaben“ im Laufe des Leseprozesses  Phänomen: „lost in hyperspace“! Man weiß nicht, Wo genau im Hypertext man sich gerade befindet Wie man zu bestimmten (irgendwo im Hypertext enthaltenen Informationen) gelangen kann Welches der für die individuelle Fragestellung beste Weg durch den Hypertext ist Ob man wirklich alle relevanten Informationen gesehen hat Wie umfangreich der Hypertext wirklich ist, welche Infos enthält Was einen am anderen Ende eines Links erwartet

Hypertext (3) Auswege/ Hilfen: Untersuchungen zeigen: Inhaltsverzeichnis, das immer verfügbar ist Grafische Übersicht über die Hypertextstruktur Einschränkungen der komplexen Hypertextstruktur (z.B. Angebot einer „guided tour“ Rückwärtsgerichtete Navigationshilfen („Zurück“-Knopf, History-Liste, Lesezeichen, verschiedene Färbung gesichteter und ungesichteter Links) Links gezielt setzen, Hypertext nicht mit Links überladen Untersuchungen zeigen: Experten profitieren mehr von Hypertexten, Personen ohne Vorkenntnisse eher von linear strukturierten Texten (fehlende Vorstrukturierung/ Kohärenz scheint hier eher hinderlich)  Hypertext scheint ideal zur Suche nach neuen Infos bei hohem Vorwissen, aber eher ungeeignet, um sich ein Thema ganz neu anzueignen

3 Kriterien für gelungene WWW-Präsentationen: 3 3 Kriterien für gelungene WWW-Präsentationen: 3.1 Allgemeines zum Layout Die Präsentation als Ganzes Das Aussehen eines WWW-Angebots wird von der intendierten Funktion/ der angesprochenen Nutzergruppe beeinflusst (kurzweilig/ seriös/ motivierend/ ...) inhaltlich logische Gliederung (evtl. grafisch veranschaulicht) Bei längeren Seiten: Inhaltsverzeichnis (interne Verknüpfungen) optisch übersichtliches Layout: z.B. einheitlicher Kopf-/ Fußbereich auf jeder Seite mit Titel der Seite/ Logo o.ä. Name(n) der AutorIn/ Autoren und Kontaktadresse Erstellungs-/ Änderungsdatum Navigationsknöpfe verwenden als Orientierungshilfe (z.B.: „zurück zum Seitenanfang“/ „zurück zur Homepage“/ ...)! Text: mindestens 12 Punkt; kursiv ist schlecht lesbar!

3.1 Allgemeines zum Layout (2) Startseite des Angebotes (Homepage): wichtig: sich als AutorIn kenntlich machen Anschrift bzw. Kontaktmöglichkeit (E-Mail-Adresse) angeben eine inhaltliche Übersicht über die Präsentation geben (in Form von Links) evtl. Links zu interessanten Parallelangeboten bereitstellen evtl. (bei gut gepflegten/ häufig aktualisierten Seiten) einen „What‘s new“-Link installieren, der auf eine Seite führt, die alle Neuigkeiten des Angebotes auflistet Wichtigste Infos auf der Homepage (bzw. auf höheren Hierarchieebenen) ansiedeln

3.2 Mögliche Verknüpfungsstrukturen a) linear b) hierarchisch c) vernetzt (nach Gerdes, 1997, 146) (Untersuchungen zeigen, dass hierarchische Strukturen den vernetzten hinsichtlich mehrerer aVs überlegen sind; vgl. Gerdes, 1997, 147)

Mögliche Verknüpfungsstrukturen (2) Verknüpft werden können sowohl Text als auch Grafiken 3 Ebenen der Verknüpfung: Innerhalb des Dokuments Innerhalb der Hypertextstruktur (= der eigenen Präsentation) Extern (zu anderen Dokumenten/ Präsentationen im WWW) Hierarchische vs. assoziative Verknüpfungen Hierarchische Links erleichtern die Orientierung Assoziative Links stellen den eigentlichen Mehrwert gegenüber einem Buch dar Wichtig: Aussagekräftige Begriffe finden, wo ein Link hinführen wird Ideal: Alle Arten der Verknüpfung dort verwenden, wo sie angemessen sind, aber nicht im Übermaß!

3.3 Spezielle Layout-Fragen Exakte Formatierung von WWW-Dokumenten nicht möglich (abhängig von Browser, Hard- und Softwarevoraussetzungen der einzelnen Nutzer)  Tipps, um ungünstige Effekte zu vermeiden: Text: Formatierung in (unsichtbaren) Tabellen: Zellengröße relativ zueinander definieren! Grafiken lockern ein Angebot auf und erleichtern die Orientierung. Trotzdem: Mit Grafiken sparsam umgehen, um lange Ladezeiten bei privaten Nutzern zu vermeiden Hintergrundgrafik (wenn überhaupt): eher kontrastarm und in einheitlichem Ton, damit Vordergrund (eigentlich wichtige Information) nicht gestört wird Allzu lange Dokumente in mehrere kürzere aufspalten (Hypertextstruktur nutzen!)

3.4 Wenn die Präsentation fertiggestellt ist... Testen: funktionieren alle Links? Wie wirkt die Präsentation auf verschiedene Personen/ an verschiedenen Computern? WWW ist ein dynamisches Medium  regelmäßige Pflege und Aktualisierung (v.a. der Links) ist unerlässlich! Bekanntmachung der eigenen Präsentation: Seiten bei Suchmaschinen anmelden/ Schlüsselwörter angeben Anbieter guter und thematisch passender Übersichtsseiten informieren mit Bitte um Aufnahme des Links URL an thematisch relevante Newsgroups/ Mailinglisten senden

4 Literatur und Online-Quellen Allgemein: Batinic, B. (1997) (Hrsg.): Internet für Psychologen. Göttingen: Hogrefe. Krüger, T. und Funke, J. (1998) (Hrsg.): Psychologie im Internet. Ein Ratgeber für psychologisch interessierte User. Weinheim: Beltz.

4 Literatur und Online-Quellen (2) Speziell: Gerdes, Heike (1997): Hypertext. In: Batinic (s.o.) Gerdes, Heike (1998): Gestaltung attraktiver WWW-Angebote. In: Krüger/ Funke (s.o.) Krüger, T., Ott, R. und Funke, J.: Das WWW als Medium der Außendarstellung. In: Batinic (s.o.) Reips, U.: Tips zum Erstellen von WWW-Dokumenten. In: Batinic (s.o.) Schade, O.: WWW-Praxis. In: Batinic (s.o.)

4 Literatur und Online-Quellen (3) Merkblatt zur Arbeit mit dem NetScape-Composer (Internet-Tutorium für Anfänger) Erstellung privater Homepages über das URZ (Uni HD) verschiedene Pools mit Grafiken zum Herunterladen (im Zweifelsfall vorher per E-Mail kurz umErlaubnis fragen): http://www.iconbazaar.com/ http://www.mcs.net/~wallach/freeart/buttons.html http://www.westworld.com/~ghyatt/icons/buttons/index.html http://www.clark.net/pub/evins/Icons/ http://msdn.microsoft.com/downloads/images/toc.htm Online-Tutorials zum Thema http://www.boku.ac.at/htmleinf/ http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/intro.html http://www.netzwelt.com/selfhtml/ http://www.uni-siegen.de/help/html/ http://home.t-online.de/home/WernMannsd/internet.htm