Hermann von Helmholtz-Zentrum für KulturtechnikWissensmanagement mit Neuen Medien

Übung

Wissensmanagement mit NeuenMedien:Website-Konzeption

Hermann von Helmholtz-Zentrum für KulturtechnikÜ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 Webgemeint. 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äthttp://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 Aspekteklä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)- SucheBeispiel: http://www.museum.hu-berlin.de/home.asp- Liste häufig gestellter Fragen (FAQs = frequently askedquestions 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 Informationenwo eingeordnet werden und wie die Seiten miteinanderverknüpft sind.Ziel: Bestmögliche Orientierung für den Benutzer

Das bedeutet konkret:- Struktur und Themen festlegen - Gliederungssystem ausarbeiten (wieviel Ebenen, flache odertiefe Sitestruktur) - Querverlinkungen beachten (jede Seite sollte mit der nächst-hö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 Benutzerweiter auf der Site bleibt oder nicht.

Für die Startseite müssen die Kategorien bestimmt undgute, aussagekräftige Begriffe für die entsprechendenButtons 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 derBenutzer auf der Site bewegt. Der Benutzer sollte immerdie volle Orientierung haben, er stellt sich z.B. folgendeFragen

- 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 dieBewegung auf der Site zu erlauben.

- Home-Button: Jede Seite sollte einen deutlichplatzierten Link zurück zur Startseite haben (Text oderGrafik)Beispiel: Logo der Humboldt-Universitäthttp://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 rechtsdaneben 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 diesenverzweigen.

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-Seitenladen, die voneinander unabhängig ausgetauscht werdenkönnen.

- Der Benutzer hat die Navigationsleiste immer im Blick undkann jederzeit - ohne zu scrollen - zu einer anderen Seitespringen.

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 Leisteeine Liste der Unterpunkte dieser Kategorie. Bei einem Klick aufeine andere Kategorie verschwindet die erste Liste wieder unddie 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 sieist ein Pop-up-Menü eingebaut, das auf Klick oder bei einemRollover 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 Benutzerdurch Pfadangaben die Orientierung (engl. „bread crumbs“,„Brotkrümel“, die – wie bei ‚Hänsel und Gretel‘ – den Wegmarkieren)

Beispiel:http://www.museum.hu-berlin.de/home.aspHauptseite : 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 lilaangezeigt.

Hermann von Helmholtz-Zentrum für KulturtechnikÜbung: Wissensmanagement mit Neuen Medien

Website-Konzeption

Formulare

Formulare sind in vielen Fällen von zentraler Bedeutung undnicht 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 Datenbankenhttp://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 andCollections)

- Diskussionsforum oder Gästebuchhttp://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. EinigeGrundregeln zur Umsetzung:

- Immer an den Benutzer denken (der Designer soll nicht dieÜberhand gewinnen!)- Um beim Benutzer Vertrauen in die Site zu wecken, muss erimmer das Gefühl haben, sich in einer einheitlichenUmgebung zu bewegen. Die Seiten müssen in jeder Hinsichtdurchgängig gestaltet (konsistent) sein. Das gilt für den Stilgenauso wie für die Position der Elemente. Die Position derNavigationselemente 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. Immerdarauf achten, dass die Website in allen Auflösungen und aufallen Bildschirmgrößen (kleine Browserfenster!) möglichst gutaussieht.- Bilder können Seiten auflockern und wichtige Informationenvermitteln. Bilder können aber auch dazu führen, dass dieLadezeit sehr lang oder die Site überladen wird. Daher müssenBilder 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 Bildernbesetzt wird (Freiraum mit weißem oder hellgelbemHintergrund)- 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 zwarangeben, man darf aber nicht davon ausgehen, daß sie aufden 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 istam Bildschirm schlecht lesbar)- Seite optisch gliedern. Ein zu langer Text wirkt abschreckendund 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 Speicherungals Bookmark/Favorit)- nicht zu lange Seiten füllen- Links sollten nicht von der eigenen Seite wegführen (immerein neues Browserfenster anbieten); das Ziel muß immereindeutig 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- undMultimedia-Anwendungen entwickeln. München, Boston, SanFrancisco [...]: Addison-Wesley, 2002.