Website-Konzeption - Helmholtz-Zentrum - Interne Seiten - Hu

Hermann von Helmholtz-Zentrum für Kulturtechnik
Wissensmanagement mit Neuen Medien
Übung
Wissensmanagement mit Neuen
Medien:
Website-Konzeption
Website vs. Webseite
Mit dem Begriff Website ist der Auftritt eines Unternehmens,
einer Person oder einer Organisation im World Wide Web
gemeint. Sie besteht in der Regel aus vielen Webseiten,
also einzelnen HTML-Dokumenten.
Die erste Seite einer Site nennt man Homepage (Startseite)
Beispiel: Homepage der Humboldt-Universität
http://www.hu-berlin.de/
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Vorüberlegungen
Bevor man eine Website anlegt, sollte man folgende Aspekte
klären:
- Ziel(e) des Internetauftritts
- Zielgruppe
- Inhalte
- Funktionen
- Designvorgaben (Corporate Design bzw. Corporate Identity,
Gestaltungsrichtlinien
- Sprachfassungen
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Was sollte eine Website enthalten?
Startseite
- Inhaltsseite
- Kontaktadresse/E-Mail-Adresse/Telefon und Faxnummer
Bei einer Website mit mehr als 25 Seiten:
- Sitemap (Übersicht bzw. Inhaltsverzeichnis)
- Suche
Beispiel: http://www.museum.hu-berlin.de/home.asp
- Liste häufig gestellter Fragen (FAQs = frequently asked
questions oder Q & A - questions and answers)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Festlegung der Informations-Architektur
Die Informations-Architektur bestimmt, wie welche Informationen
wo eingeordnet werden und wie die Seiten miteinander
verknüpft sind.
Ziel: Bestmögliche Orientierung für den Benutzer
Das bedeutet konkret:
- Struktur und Themen festlegen
- Gliederungssystem ausarbeiten (wieviel Ebenen, flache oder
tiefe Sitestruktur)
- Querverlinkungen beachten (jede Seite sollte mit der nächsthöheren in der Hierarchie verlinkt sein, außerdem sollte man von
überall zur Startseite gelangen)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Gliederungssysteme
Beispiele
Helmholtz-Zentrum: http://www2.hu-berlin.de/kulturtechnik/
Humboldt-Universität: http://www.hu-berlin.de/
Deutsches Historisches Museum: http://www.dhm.de/
Deutsche Staatsoper: http://www.staatsoper-berlin.org/de/intro.htm
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Medien bestimmen
- Text
- Fotos und Zeichnungen
- Animation(en)
- Simulationen /Spiele
- 3D Modelle
- Video
- Webcam
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Startseite
Die Startseite ist das „Aushängeschild“ der Site. Der
„Einstieg“ entscheidet häufig darüber, ob der Benutzer
weiter auf der Site bleibt oder nicht.
Für die Startseite müssen die Kategorien bestimmt und
gute, aussagekräftige Begriffe für die entsprechenden
Buttons gesucht werden.
Beispiel: http://www2.hu-berlin.de/hzk
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Navigations-Architektur
Die Navigations-Architektur bestimmt, wie sich der
Benutzer auf der Site bewegt. Der Benutzer sollte immer
die volle Orientierung haben, er stellt sich z.B. folgende
Fragen
- Wo bin ich?
- Was bietet die Site?
- Wie finde ich, was ich suche?
- Wie komme ich zurück?
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Navigationshilfen
Navigationshilfen haben die Aufgabe, dem Benutzer die
Bewegung auf der Site zu erlauben.
- Home-Button: Jede Seite sollte einen deutlich
platzierten Link zurück zur Startseite haben (Text oder
Grafik)
Beispiel: Logo der Humboldt-Universität
http://www.hu-berlin.de/index.html
- Navigationsleiste (Text, häufig als Grafik umgesetzt)
Beispiel: http://www.hu-berlin.de/cms/
(Computer- und Medienservice der Humboldt-Universität)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Aufteilungen
Eine der üblichsten Aufteilungen einer Seite ist das „gekippte L“.
Links oben ist das Logo zu sehen, in der Waagerechten rechts
daneben finden sich die Standard-Navigationshilfen wie Suche,
Hilfe, Kontakt.
In der Senkrechten unterhalb des Logos, am linken Rand der Seite,
stehen die Kategorien der Site, die als Buttons zu diesen
verzweigen.
Beispiel: http://www.wiko-berlin.de/kolleg/wiko/?hpl=1
(Wissenschaftskolleg zu Berlin)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Frames
Vorteile:
- In eine HTML-Seite kann man mehrere andere HTML-Seiten
laden, die voneinander unabhängig ausgetauscht werden
können.
- Der Benutzer hat die Navigationsleiste immer im Blick und
kann jederzeit - ohne zu scrollen - zu einer anderen Seite
springen.
Beispiel:
http://www.volkswagen-stiftung.de/stiftung/index.html
(Volkswagen-Stiftung)
Vgl. demgegenüber:
http://www2.hu-berlin.de/kulturtechnik/lehre.php
(Helmholtz-Zentrum)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Aufklappende Navigationsleisten
Wählt der Benutzer eine Kategorie aus, erscheint in der Leiste
eine Liste der Unterpunkte dieser Kategorie. Bei einem Klick auf
eine andere Kategorie verschwindet die erste Liste wieder und
die Liste für die neue Kategorie erscheint.
Beispiel:
http://www.helmholtz.de/
(Helmholtz-Gemeinschaft Deutscher Forschungszentren)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Pop-up-Navigationsleisten
Pop-up-Navigationsleisten erweitern sich nur kurzzeitig. In sie
ist ein Pop-up-Menü eingebaut, das auf Klick oder bei einem
Rollover erscheint (platzsparend!)
Beispiel:
http://www.dfg.de/
(Deutsche Forschungsgemeinschaft)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Karteikarten oder Reiter
Reiter (engl. tab) sind kleine Etiketten, auf dem ein Name steht.
Eine (Kartei)Karte ist der dazugehörige Bereich mit Text
Beispiel:
http://www.amazon.de
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Pfadangaben
Geht die Site weit in die Tiefe, erleichtert man dem Benutzer
durch Pfadangaben die Orientierung (engl. „bread crumbs“,
„Brotkrümel“, die – wie bei ‚Hänsel und Gretel‘ – den Weg
markieren)
Beispiel:
http://www.museum.hu-berlin.de/home.asp
Hauptseite : Ausstellungen : Sehenswertes
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Links
Links sind in der Regel blau und unterstrichen dargestellt.
Links, die der Benutzer schon besucht hat, werden in lila
angezeigt.
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Formulare
Formulare sind in vielen Fällen von zentraler Bedeutung und
nicht selten der eigentliche Grund für einen Webauftritt, z.B.
beim Online-Shopping.
Formularbeispiele
- Kontaktaufnahme:
http://www2.hu-berlin.de/kulturtechnik/kontakt.php
- Bestellen:
http://www.stiftung-warentest.de/
(Stiftung Warentest)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Sonstige Funktionen
- Anbindung an Datenbanken
http://www2.hu-berlin.de/kulturtechnik/mitglieder.php
(HZK, Mitgliederliste)
http://www2.hu-berlin.de/kulturtechnik/listen.php
(HZK, Mailingliste)
http://publicus.culture.hu-berlin.de/collections/
(HZK, World Wide Database of University Museums and
Collections)
- Diskussionsforum oder Gästebuch
http://www.dhm.de/guestb_intro.html
(Deutsches Historisches Museum, Gästebuch)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Designkonzept
Das Design unterstützt die Kommunikation. Einige
Grundregeln zur Umsetzung:
- Immer an den Benutzer denken (der Designer soll nicht die
Überhand gewinnen!)
- Um beim Benutzer Vertrauen in die Site zu wecken, muss er
immer das Gefühl haben, sich in einer einheitlichen
Umgebung zu bewegen. Die Seiten müssen in jeder Hinsicht
durchgängig gestaltet (konsistent) sein. Das gilt für den Stil
genauso wie für die Position der Elemente. Die Position der
Navigationselemente muss auf allen Seiten gleich sein.
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Designkonzept
- Alle Benutzer haben unterschiedliche Bildschirme. Immer
darauf achten, dass die Website in allen Auflösungen und auf
allen Bildschirmgrößen (kleine Browserfenster!) möglichst gut
aussieht.
- Bilder können Seiten auflockern und wichtige Informationen
vermitteln. Bilder können aber auch dazu führen, dass die
Ladezeit sehr lang oder die Site überladen wird. Daher müssen
Bilder mit Bedacht eingesetzt werden.
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Typographie
- Raum lassen, der weder von Buchstaben noch von Bildern
besetzt wird (Freiraum mit weißem oder hellgelbem
Hintergrund)
- Schrift: Für Fließtext kommen nur drei Möglichkeiten infrage:
Courier bzw. Courier New, Times bzw. Times New Roman,
Arial bzw. Helvetica. Alle anderen Schriften kann man zwar
angeben, man darf aber nicht davon ausgehen, daß sie auf
den Rechnern der Benutzer installiert sind.
- Beschränkung auf wenige Schriftarten: eine Schrift für die
Überschriften, eine für den Fließtext und eine für die Menüs.
Schriftgrößen auch auf drei beschränken.
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Typographie
- Hervorhebungen am besten mit fetter Schrift (Kursivsatz ist
am Bildschirm schlecht lesbar)
- Seite optisch gliedern. Ein zu langer Text wirkt abschreckend
und lässt sich auch schwer lesen.
- Einfachste Strukurierungsmöglichkeiten: Absätze Zwischenüberschriften - Listen - Tabellen
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Texten für den Bildschirm
- Sprachstil der Zielgruppe verwenden
- Fremdwörter bedacht einsetzen
- Jargon vermeiden
- technische Begriff mit Vorsicht einsetzen (z.B. Browser,
Protokoll, Cookie)
- Abkürzungen ausschreiben
- kurze Sätze bilden
- Passiv vermeiden
- Texte kurz halten
- immer mit dem Wichtigsten beginnen
- Rechtschreibung und Grammatik sorgfältig prüfen
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Umsetzung
- Titel vergeben für die Seiten (u.a. wichtig für die Speicherung
als Bookmark/Favorit)
- nicht zu lange Seiten füllen
- Links sollten nicht von der eigenen Seite wegführen (immer
ein neues Browserfenster anbieten); das Ziel muß immer
eindeutig sein
- Bilder nach Möglichkeit mit einer Bildunterschrift versehen
(Vermittlung von zusätzlichen Informationen)
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption
Quelle
Jens Jacobsen, Website-Konzeption. Erfolgreiche Web- und
Multimedia-Anwendungen entwickeln. München, Boston, San
Francisco [...]: Addison-Wesley, 2002.
Hermann von Helmholtz-Zentrum für Kulturtechnik
Übung: Wissensmanagement mit Neuen Medien
Website-Konzeption