Homepagebau

Tutorial für Anfänger

Tutorial

Inhaltsverzeichnis

1. Kapitel: Designelemente
2. Kapitel: Navigationselemente
3. Kapitel: Layout der Navigation
4. Kapitel: Marketing
1. Anhang: Beispiele

Kapitel 2: Navigationselemente

Navigationsleisten:

geeignet für: Rubriken

Navigationsleisten sind eine Art Inhaltsverzeichnis: allerdings reduziert auf das absolut notwendigste.
Eine Liste von Links auf bestimmte Seiten einer Homepage.
Diese Seiten können wiederum neue Navigationsleisten enthalten, die auf weitere Seiten verweisen usw.

Navigationsleisten werden getrennt vom übrigen Inhalt meist längs der eigentlichen Seite, bzw. oberhalb oder unterhalb eingefügt und stellen eine Leiste besonders interessanter oder wichtiger Links dar, die mit der aktuell angezeigten Seite (irgendwie) in Verbindung stehen.

Navigation verläuft meistens - auch wenn es ihnen nicht gleich bewusst wird - in mehreren Gliederungsebenen.
Also zum Beispiel 1. meine Homepage, 1.1 Privates, 1.1.1 Über mich, 1.1.2 meine Familie, 1.2 Gästebuch, ... etc.
UND normalerweise wird eine Nav-Leiste pro Ebene verwendet - was gleichzeitig bedeutet, dass sich dies nur für flache Strukturen (also nicht tiefer als 3 Ebenen) eignet, da sonst sehr viele verschiedene Leisten angelegt werden müssen.

Nav-Leisten bestehen aus purem HTML (evtl. in einer Framestruktur) und sind somit leicht umzusetzen.
Diese Struktur lässt sich - etwas schmucklos aber wesentlich platzsparender - auch mit mehreren verketteten Dropdownfeldern umsetzen (lesen sie dazu mehr im Abschnitt "Layout"), wodurch viele Seiten etwas übersichtlicher werden können.
Das heißt, "1. Homepage", "2. ..." wird in einem Dropdownmenü angezeigt, "1.1 Privates", "1.2 Gästebuch" etc. in einem 2. Feld usw. (auf die Nummerierung können sie natürlich verzichten)

Da elektronische Bücher und einige Datenbanken häufig eine sehr tief verzweigte Struktur haben, werden hierfür statt HTML auch spezielle Nav-Leisten in Form von Navigationsbäumen verwendet, die mehrere Ebenen auf einmal abbilden können - dazu ebenfalls mehr im nächsten Abschnitt. Rein optisch ist das fast identisch mit dem Verzeichnisbaum, den sie aus dem Windows-Explorer oder ähnlichen Programmen kennen.

Wie gestaltet man Navigationsleisten?
Sinnvollerweise sollte man die Einträge zunächst nach Kategorien - bei Printmedien nach Rubriken bzw. Kapiteln - ordnen. Das klingt zwar simpel, wird sich meist aber als wesentlich schwieriger darstellen als es zunächst scheint.
Es gibt gewisse "Standards", was die Namesvergabe angeht, wie bei "Gästebüchern", "Foren" und "Chats" - aber normalerweise steht hinter der Navleiste eine stressige Suche nach - auch dem Besucher - einleuchtenden Begriffen.

Technisch sollten sie nach Möglichkeit von Anfang an strikt zwischen Daten und Layout trennen.
Warum? Falls sie sich eventuell später dazu entschließen, dass Design ihrer Homepage zu überarbeiten, oder einfach nur Links zu ändern, geht das so wesentlich schneller, als wenn die Formatierung für alle Einträge getrennt angepasst werden muss, wobei ja auch noch jederzeit die Gefahr besteht, in der Eile Fehler einzubauen.

Die eigentlichen Links werden dazu in eine Blanko-Seite eingefügt. Ohne Designelemente und Layout, sondern nur als strukturierte Liste.
(Dabei können bestimmte Tags oder von ihnen definierte CSS-Klassen verwendet werden) 
Jetzt wird eine zweite - die eigentliche - Seite erstellt, welche ein passendes Stylesheet enthalten kann, eventuelle Designelemente einfließen lässt und - vor allem - den Inhalt der Navigationsleiste selbst aus der anderen Datei importiert.

 

Sitemaps:

für große Homepages - als Ergänzung zu anderen Navigationselementen

Eigentlich sind Sitemaps nichts anderes als strukturierte Listen von Links auf wichtige Inhalte ihrer Homepage.
Strukturiert in dem Sinne, dass sie nach Rubriken, Zielgruppen, oder anderen Kriterien geordnet sein können - also anders geordnet, als es die strenge hierarchische Struktur eines normalen Inhaltsverzeichnisses vorsieht.
Das geschieht am besten durch eine geeignete Tabelle, die obendrein den Vorteil hat, dass sie mehrspaltig sein kann und eventuell auch Themengebiete farblich getrennt werden können.

Sitemaps bieten dem Besucher alle wichtigen Informationen auf einen Blick, die er sonst innerhalb der Navigationsstruktur suchen müsste.

Ein Nebeneffekt: leitet man Suchmaschinen - die mit Frameseiten nicht umgehen können, mit einem ganz normalen Link auf die Sitemap um, werden (von hier aus) die Links trotzdem verfolgt und auch die untergeordneten Seiten indexiert - was bei normalen Frameseiten nur in Ausnahmefällen der Fall ist und zu besseren Platzierungen bei diesen Suchmaschinen führt.

 

Indexseiten:

für große Homepages - als Ergänzung zu anderen Navigationselementen

Sie kennen das aus Büchern: den alphabetischen Index, in dem Schlüsselwörter zu bestimmten Themen alphabetisch geordnet sind und somit schneller mach bestimmten Begriffen gesucht werden kann.
Absolut nichts für kleine Homepages - für große aber unerlässlich.
Aber: machen sie sich keine Illusionen, denn diese Navigationshilfen werden fast nie von Hand sondern von automatischen Skripten geschrieben

Diese Profiwerkzeuge sind teuer und werden von professionellen Webdesignern - wenn überhaupt - wohl eher widerwillig aus der Hand gegeben.
Der Quelltext? Absolut nichts für Laien: zunächst wird ein Hash oder wahlweise ein Binärbaum erzeugt. Eine Dateiliste wird eingelesen. Alle Dateien werden von einem HTML-Parser durchlaufen und alle dabei gefundenen Wörter mit einer Seitenreferenz abgelegt, bzw. wenn das Wort schon vorhanden ist die Seitenreferenz ergänzt.
Am Ende bleibt eine Struktur aus Wörtern und Links auf Textstellen, die nach einem vorgegebenen Muster als neue HTML-Datei(en) oder als Datenbank ausgelesen wird.
Dabei werden die Einträge gleichzeitig geprüft und bestimmte Wörter, die einfach zu viele Referenzen erhalten würden übergangen.
Eine manuelle Nachkontrolle ist sehr oft dennoch notwendig um überflüssigen Einträgen vorzubeugen.
Diese Datenbank bzw. HTML-Seite(n) kann auch für eine Webinterne Suchmaschine verwendet werden.
Dazu benötigen sie wiederum ein Skript, dass sie nicht selten wiederum entweder teuer bezahlen oder mühsam anpassen bzw. selbst entwickeln müssen.

 

Querverweise:

die Seele einer Homepage

Auch dass kennt man von Fachliteratur... siehe auch Seite X - im Web ist das oberflächlich "nur" ein einfacher Link.
Wie viel Arbeit hinter einem solchen Link steht, wenn man nicht gerade ein Tool hat, dass während des Schreibens des Webs automatisch auf geänderte Dateinamen reagiert, kann eigentlich nur jemand nachvollziehen, der bei einem Verlag arbeitet und kurz vor dem Druck noch einmal hektisch mit der Druckerei telefoniert, weil jeder Verweis auf Seite X auf Seite X+1 geändert werden muss - da der Autor kurzfristig wenige Seiten zuvor eine persönliche Anmerkung eingefügt hat. (inzwischen gibt es auch hier gottseidank automatische Hilfen)

Was tun? Nun: wenn sie ihre Seiten immer noch mit Notepad schreiben, sollten sie Querverweise sofort wieder vergessen. Bei einem Webprojekt, dessen Inhalt regelmäßigen Änderungen unterworfen ist, ist es sinnvoll, in einem Editor zu arbeiten, der eine Linkprüfung bietet und geänderte Hyperlinks automatisch korrigiert; sonst verlieren sie schnell den Überblick.
Bei Webprojekten mit statischem Inhalt - zum Beispiel CD-Publikationen - ist das anders. Hier ist es sinnvoll, die Verlinkung erst am Schluss komplett von einer automatischen Routine erledigen zu lassen.

Solche Routinen können sie eigentlich nur selbst schreiben, da es sie nur in entsprechenden Firmen gibt und sie normalerweise nicht frei verkäuflich sind. Ein Haken bleibt aber: irgendjemand muss sich schon beim Schreiben bzw. spätestens beim Satz die Mühe machen - in welcher Weise auch immer - die Schlüsselwörter zu verankern.

Kapitel 3: Layout

Standard HTML:

perfekt für kleine Homepages und Datenbanken

klassische HTML-Variante

Voraussetzung ist hier allerdings, dass es sich um eine möglichst kleine Seite handelt, die nur über eine Stammrubrik verfügt. Der Grund ist, dass die Verlinkung über eine (1!) einzige Seite erfolgen muss. Ab einer gewissen Anzahl von Links wird dies jedoch zu unübersichtlich.

Aus diesem Grund eignet sich dieses Layout z. Bsp. für die Darstellung von Datenbankinhalten.
Dabei kann eine "Willkommen"s-Nachricht, wichtige Hinweise + evtl. Zugriffszähler auf der Startseite platziert werden. Auf der Navigationsseite lassen sich die einzelnen Datenbankfunktionen abrufen, die dann jeweils auf einer eigenen Seite dargestellt werden.
In den Staaten, wo man gern besonders schnell auf den Punkt kommt, sind die meisten Homepages ohnehin sehr klein - wenn sie hier etwas anbieten, verzichten sie auf alles, was nicht unbedingt nötig ist.

Für diese Struktur ist der Einsatz eines möglichst geschlossenen Designs - zumindest für die Navigationsseite - sinnvoll. Dies erreichen sie durch geschickte Anwendung von Tabellen. Der Rahmen wird absichtlich nicht ausgeblendet, die Tabelle mit einer festen Breite zentriert. Dadurch entsteht die Wirkung von Fenstern, die quasi frei über dem Seitenhintergrund schweben - wie Fenster über einem Desktop.
Damit lassen sich Informationen besonders kompakt darstellen.

 

Hot-Link Modell:

für E-Books und Publikationen

Eigentlich das älteste Modell - allerdings ist ausgerechnet dieses, seit Microsoft diese Form der Navigation für sich entdeckt hat wieder im kommen.

Hier existiert eigentlich nur ein primäres HTML-Dokument, sowie eventuell eine Indexseite - ähnlich wie in einem Buch. Das heißt: die gesamte Website besteht aus einem einzigen langen Text und eventuell einer Art Stichwortverzeichnis. Der Besucher kann aber in diesem Dokument auf interessante Textstellen klicken, die als Querverweise entweder auf themenverwandte Textstellen verweisen, oder via Popup-Fenster nähere Informationen liefern.

Dies ist für eine private Seite sehr arbeitsaufwendig. Wenn aber Firmen E-Books oder ähnlich strukturierte Texte als HTML umsetzen, wird dies dennoch bevorzugt, weil solche Querverweise mit geeigneten Routinen automatisch erzeugt werden können, wo hingegen ein Inhaltsverzeichnis samt klassischer Navigation nicht selten Handarbeit ist.

 

(Frame-)Modell:

Für große Seiten

HTML mit 1 Ebene,
oder (Java-)Navigationsbaum

Besonders beliebt in Deutschland - und vor allem für große Webprojekte geeignet. Frameaufteilungen haben einen unschätzbaren Vorteil: sie verkürzen die Ladezeiten der Seite und ermöglichen eine einfache Handhabung multipler Hierarchieebenen. Es gibt dabei mehrere Möglichkeiten der Umsetzung, abhängig davon, wie tief ihre Hierarchie tatsächlich ist. Die Startseite wird normalerweise direkt im Hauptframe geladen und die Navigationselemente bleiben (da im eigenen Frame) permanent sichtbar.
Einmal abgesehen von der Frage, wie sie ihre Frames anordnen gibt es mehrere Möglichkeiten, die Navigation ihrer Seite zu realisieren, die hier - gerade weil sie stets und ständig sichtbar ist - besonders im Vordergrund stehen sollte.

Die Navigation kann passiv über klassisches HTML erfolgen, oder aktiv mit geskripteten Elementen.

 

Passive Navigation via HTML

Passiv heißt vor allem Navigationsleisten und Links. Bei HTML werden Nav-Leisten mit wenigen Einträgen vorzugsweise oberhalb, längere meist links angezeigt. Wahrscheinlich hängt dies mit der Leserichtung im westlichen Kulturraum zusammen, die von oben links, nach unten rechts verläuft.

HTML heißt auch die Wahl zwischen grafischen Buttons (eventuell mit Script) oder (möglicherweise mit CSS optisch aufgewertete) schlichtere Links. Grafische Buttons benötigen mehr Platz und sind schwer zu pflegen, weil die Beschriftung später nicht geändert werden kann - Links sind besser in der Handhabung, häufig leichter lesbar, sehen aber eher langweilig aus.

 

 

Dropdown-Navigation

Aktive Navigation über Dropdown

Im Netz existieren wenige Beispiele für Dropdownavigation. Diese Variante zeichnet sich dadurch aus, dass sie besonders wenig Platz benötigt, kann aber dem Stil der Homepage schlecht angepasst werden. Daher wird sie inzwischen nicht mehr so häufig allein sondern eher als Ergänzung zu HTML-Varianten verwendet, wo sich das anbietet. Insbesondere zum Beispiel für Downloadlisten.

Beispiel

Als Stand-Alone kann man über mehrere Navigationsleisten eventuell auch mehrere Ebenen abbilden, wenn mit einer Auswahl des ersten Feldes der Inhalt des zweiten Feldes aktualisiert wird, mit einer Änderung des zweiten, der Inhalt eines dritten und so weiter.
Das hat jedoch bisher in der Praxis bei den meisten Besuchern kaum Anklang gefunden.

 

HTML mit 2 Hierarchieebenen

Aktive Navigation über Java-Applets / Scripts

Zusätzlich gibt es im Web Java-Applets, die ganze Navigationsbäume abbilden können. Die Darstellung ist ähnlich, wie im Windows-Explorer Fenster. JavaScript-Varianten gibt es ebenfalls, allerdings sie diese meistens langsamer und deswegen nicht zu empfehlen. Weil viele Besucher aber Java deaktiviert haben, ist diese clevere Variante eher eine Ausnahme.
Es gibt zwar neuere Skripte, die noch eleganter aussehen, allerdings muss hier stets die Kompatibilitätshürde genommen werden, was nicht selten bedeutet, zusätzlich eine HTML-Variante anzubieten: was der Sache nicht unbedingt dienlich ist.

 

Templatebasierte - Seiten:

Bestehen aus einem oder mehreren "Templates" (das sind HTML-Musterseiten), die statt den eigentlichen Daten Platzhalter enthalten.

Jeder Klick resultiert in einer Anfrage beim Server. Dabei wird ein Schlüsselwort oder eine ID übergeben. Der Server löst diese ID meist mit Hilfe einer Datenbank auf und baut die angeforderte Seite in Echtzeit zusammen, indem er das Template mit den gewünschten Informationen füllt. Danach überträgt er die Seite (komplett) neu an den Besucher.

 

Fazit:

Es hat sich ausgezahlt, grafische Buttons nur für primäre Rubriken, oder unveränderliche Einträge, wie Gästebücher zu verwenden. Bitte denken sie daran, stets eine "Rohling" - also einen leeren Button ohne Beschriftung - für den Fall der Fälle gespeichert zu lassen. Navigationsleisten mit Textlinks - angereichert mit CSS - haben sich bewährt. Allerdings konnten sich Applets für wichtige Navigationselemente nicht durchsetzen. Nicht zuletzt wegen langer Ladezeiten bei größeren Datenmengen und Kompatibilitätshürden. Vor allem: natürlich könnten sie ein solches Skript einsetzen - aber was sie immer noch benötigen ist ein Tool, dass ihnen zu ihrem Web den eigentlichen Navigationsbaum erzeugt, den dieses Skript als Parameter benötigt. Das Applet oder Skript bekommen sie kostenlos. Aber das Tool, welches den Index erstellt: nicht.

Überall dort, wo gleichartige Inhalte angeboten werden, wie bei Downloadlisten oder Themensammlungen sind Dropdownfelder ideal, da sie klein und ohne zusätzlichen Platz zu verschwenden erweiterbar sind.

 

Trotz aller Ideen und Bemühungen ist es schwierig, besonders wenn Seiten sehr groß werden, die Übersichtlichkeit zu wahren.

Kataloge:

als Beispiel für spezielle Navigation

klassischer Aufbau eines Produktkatalogs
 

Webkataloge haben - wie ihr Print-Gegenstück ein zentrales Thema: der Kunde und sein Problem (und wie ihre Produkte es lösen können).

 

Der klassische Fehler bei der Strukturierung eines Katalogs, entsteht aus der Idee heraus, Produkte thematisch in Rubriken unterteilen zu wollen. Vielmehr ist es aber so, dass der Kunde selbst eine bestimmte Idee im Kopf hat und strukturiert nach Stichworten sucht, die dieses Problem beschreiben. Solche Probleme könnten zum Beispiel sein, "ich möchte eine Couch mit Federkern, die farblich zum Teppich in meinem Wohnzimmer passt". Der Kunde wird nun nach (wahrscheinlich) "Wohnzimmer" und dann nach "Couch" suchen. Normalerweise rein optisch - ohne den Text zu lesen. Erst wenn er ein Produkt gefunden hat, dass seinem Wunsch nahe kommt, wird er sich der Beschreibung des Produkts widmen. Wenn sie also erst 5 Seiten bzw. Klicks später darauf hinweisen, dass es jede Couch in mehreren Farben gibt, haben sie den Kunden bereits verloren.

Beachten sie, dass der Kunde bei Katalogen (und Datenbanken) erwartet, auf der Startseite eine möglichst unkomplizierte Suchfunktion zu finden. Auch der Warenkorb sollte bei Webshops wenn möglich ständig eindeutig erkennbar und sichtbar sein.

Achten sie auf große, qualitativ hochwertige Produktbilder - wenn möglich mit weißem Hintergrund und verzichten sie auf lange Texte.

 

Linklisten:

als Beispiel für spezielle Navigation

Linklisten haben es eigentlich einfach - es gibt keine eigenen Inhalte.

Einfach? Nein - denn fremde Inhalte zu finden ist ein Kapitel für sich und die Liste aktuell zu halten erfordert mehr Zeit, Geduld und Nerven als einem Bildredakteur beim Schwätzen zuzuhören.

Ein weiteres Problem: Sobald sie sich in diesem Bereich thematisch nicht eng genug einschränken werden sie inhaltlich oberflächlicher und der Besucher muss auch auf ihrer Homepage wiederum suchen - was zur Folge hat, dass sie automatisch mit den großen Suchmaschinen konkurrieren müssen - und dabei (soviel ist fast sicher) haben sie keine Chance.

Sie besetzen somit immer eine Nische des Webs, sind dazu verdammt, Webseiten zu bewerten und setzen sich und ihre Meinung damit ständiger Kritik aus. Ab einer bestimmten Anzahl von Links wird es nicht mehr möglich sein, die Beschreibung und Bewertung aktuell zu halten. Falls das geschieht - erfahrungsgemäß ca. ab 300 Links und mehr - sollten sie in Erwägung ziehen auf eine Datenbank umzusteigen und die Bewertungen online durch ihre Besucher eingeben zu lassen - dazu benötigen sie allerdings wenn möglich mehr als 50 Besucher pro Tag. Haben sie weniger, werden die Webmaster der betroffenen Seiten sicher die Einzigen sein, die eine Bewertung abgeben

Dank thematischer Abgrenzung ist es meist einfach die Seite vom Layout her den angebotenen Links anzupassen.
Die Navigation über großflächige Bilder mit Hotspots eignet sich meist gerade bei Linklisten sehr gut.

Kapitel 4: Marketing

Es scheiden sich seit jeher die Geister an der Frage, wie man eine Website gestalten muss um ein Produkt richtig in Szene zu setzen. Wer nachfragt bekommt häufig nur ein paar gestammelte Wortfetzen wie "übersichtlich", "nicht zu verspielt", "nicht langweilig"…

Hier und heute kann und will auch ich ihnen nicht das ganze Geheimnis des Erfolgs enthüllen. (Wenn ich es wirklich wüsste - warum sitze ich dann wohl noch hier und schreibe darüber - und das kostenlos?) Deswegen kann und soll dieser Artikel auch nur eine kleine Einführung sein.

Werfen wir einmal einen Blick auf eine bekannte Marke: Adidas. Zunächst haben wir hier das "Markenzeichen". Ein Markenzeichen ist ein Symbol oder eine sichtbare Eigenschaft der Produkte, an denen man alles was aus dem Hause Adidas kommt überall auf der Welt erkennt. Im Fall von Adidas sind das die berühmten 3 Streifen. Wichtigstes Merkmal eines Markenzeichens ist: das es vom Kunden (wieder-) erkennbar sein muss, für andere deutlich sichtbar ist und sich in wirklich allen Produkten wieder findet und zwar im Extremfall vom T-Shirt bis zum Klopapier des Managers. Es muss darüber hinaus eindeutig sein, d. h. es existiert kein ähnliches Markenzeichen einer anderen Firma am Markt. Und es sollte verständlich sein - das heißt insbesondere, es sollte keine Schrift enthalten, damit es auch über Ländergrenzen hinaus unverändert bleibt. Typisches Markenzeichen der Firma "Aral" zum Beispiel ist das so genannte "Aralblau", dass sie nur bei Tankstellen dieser Marke finden. Bei CocaCola ist ein Markenzeichen auch die typische Form der Flaschen, die es nur bei Getränken der Marke CocaCola gibt und die überall auf der Welt die gleiche ist.
Sie merken bereits, dass ein "Markenzeichen" einer Firma etwas anderes ist als ein "Logo".

Auf dieser Beobachtung fußt das so genannte "corporate design". Corporate design bedeutet zum einen, dass ein Markenzeichen sich wirklich unveränderlich durch alle Bereiche der Firma hindurch fortsetzt und quasi Teil der "Unternehmenskultur" wird.
Für eine Website bedeutet das, dass ein charakteristisches Grundelement sich durch alle Seiten der Homepage hindurch nicht verändert. Das kann eine Kopfzeile sein, oder zum Beispiel ein charakteristisches Hintergrundmuster. Zum Beispiel könnte eine Musikseite eine bestimmte Gitarrenform als Markenzeichen verwenden. Diese als Wasserzeichen in alle Hintergründe der Seite einblenden und bei allen E-Mails des Webmasters in den Briefkopf integrieren. Falls sie von dieser Seite ein T-Shirt kaufen, wäre (egal welches Motiv) die Gitarre immer ein Teil des Drucks. Auf diese Weise wird aus der Gitarre ein Markenzeichen eben dieser Internetseite. Ob es ein erfolgreiches Markenzeichen ist, sei einmal dahingestellt. Tatsächlich ist eine Gitarre eher ein schlechtes Beispiel.

Corporate design treibt das Ganze in letzter Konsequenz nun auf die Spitze, indem verlangt wird, dass alle Elemente der Firma und ihrer Produkte (auch Schriftstücke) mit denen der Kunde direkt in Kontakt kommt sich nach dem Markenzeichen ausrichten. Das heißt insbesondere, dass andere Elemente in den Hintergrund treten und das Markenzeichen selbst nicht verdecken oder von ihm ablenken sollen.
Aber das heißt auch, dass der Briefkopf der Firma XY immer den selben Aufbau hat. Das eine Überschrift immer die selbe Schriftart, Schriftgröße und Farbe besitzt. Ein Messestand ist nicht in einem Jahr blau und im nächsten Jahr rot, sondern hat eine für das Unternehmen charakteristische Farbe, die immer gleich bleibt. Dieses Konzept hat einen großen Vorteil: es schafft Ordnung und Übersichtlichkeit. Das Unternehmen strahlt dadurch Konsistenz und Professionalität aus. ABER: wer das corporate design zu ernst nimmt riskiert kreativen Stillstand, friert quasi die Unternehmenskultur - den Motor der Innovationsfähigkeiten eines Unternehmens - ein und gefährdet damit die Zukunft der gesamten Firma oder Website.

Kommen wir zu einem anderen Thema: "Logos". Wenn ich sie bitten würde ein Adidas-Logo zu malen, wären sie dazu fähig? Überlegen sie kurz, warum es wichtig ist, dass ein Logo reproduzierbar ist. Ein farbiges Logo ist sicher eine feine Sache. Bis zu dem Tag, an dem sie zum ersten Mal ein Kunde fragt, ob sie ihm nicht ein Fax schicken können. Danach ärgern sie sich schwarz, weil ihr Logo nicht mehr erkennbar ist - während der Kunde sich fragt, was das den bloß für ein merkwürdiger Verein ist. Das Logo sollte stets schlicht sein. So schlicht, dass der Kunde keine Probleme hat, es sich zu merken und wenn nötig aufzuzeichnen. Kinder in der Schule malen zum Beispiel gern die Logos von Automarken. Fragen sie ein Kind danach welches Auto es später einmal fahren möchte sagen die wenigsten "Mercedes" oder "Opel" sondern viel eher "so ein Auto wo ein Stern drauf ist". Das klingt vielleicht witzig - ist aber ein wichtiger Faktor bei der Entscheidung, welches Logo für sie das richtige ist. Ganz besonders sinnvoll sind daher Logos, die der Kunde mit einer geometrischen Figur, einem Objekt oder Buchstaben bzw. Zahlen verbindet, die er kennt. Das Adidas-Ahornblatt ist ein solches Beispiel. Aber auch "C&A" (dieses Logo kann man sogar sprechen - das klingt zwar unwichtig, ist aber keineswegs so).

In manchen Situationen ist ein Logo zu offiziell, oder man möchte einfach keines verwenden. In diesem Fall ist ein "Maskottchen" die richtige Wahl. Maskottchen sind quasi veränderliche Logos. Ein gutes Beispiel ist der Lycos-Hund. Die Silhouette des Labradors ist stets und ständig die Gleiche und überall wieder erkennbar. Aber ein Maskottchen kann etwas, was ein Logo nicht kann. Es kann einen Gesichtsausdruck haben, einen bestimmten Charakter. Es kann mit dem Kunden "kommunizieren" als eine Art "Webguide". Darüber hinaus kann es etwas, was garantiert kein Logo kann: witzig sein. Auch den Lycos-Hund können sie ohne Probleme zeichnen (oder wissen zumindest wie er aussieht). Wichtig ist, dass ein Maskottchen sympathisch ist. Eine sprechende Geranie ist ein schlechtes Beispiel (außer für eine Gartenseite). Eine Fleischfressende Pflanze ist aber selbst für eine Gartenseite keine gute Wahl. Wichtig ist auch die Assoziation. Sie haben eine Seite, die den Leuten mehr Speed im Internet verspricht? Dann wäre eine Schnecke sicher die falsche Entscheidung, während ein Hase ideal ist. Lycos ist eine Suchmaschine - hier ist der Hund also gut aufgehoben. Shell hat als Logo eine Muschel. Das Maskottchen der Firma ist zumindest in den aktuellen Spots der bekannte regenbogenfarbene Fisch, der unter Wasser Werbung für die neuen Shell-Kraftstoffe macht.
Haben sie schon einmal daran gedacht, ihren Chef als Maskottchen zu missbrauchen? Auch wenn es auf lange Sicht sicher wieder vom Markt verschwindet: menschliche Webguides (zum Beispiel als Flashanimation) sind eine Alternative zu ihren haarigen Verwandten. Und wenn sie zum Beispiel Dessous an den Mann oder die Frau bringen wollen ist ein rassiger Latinolover, welcher der Kundschaft die entsprechenden Teile vorführt - zumindest im Web - eine Idee, welche sie ins Auge fassen könnten.

Zuletzt wollen wir uns mit "Verkaufsstrategien" befassen. Haben wir uns bislang mit dem Design beschäftigt, geht es nun eher um das "Handling" einer Seite. Out sind seit langer Zeit Bannerwerbungen. Viele Kunden nervt es mit Dingen bombardiert zu werden, die sie nicht sehen wollen. Überlegen sie, warum ihre Kunden hauptsächlich ins Netz gehen. Stichwort "Information". Was sich seit jeher gut verkauft ist eine geschickte Kombination aus kritischer Produktvorstellung am besten mit Bewertungssystem, bei dem der Kunde gleich auf der Website seine Meinung zu dem Produkt loswerden und eine Empfehlung an andere Kunden aussprechen kann. Ihnen als Händler glaubt der Kunde nur eines: das sie wirklich verkaufen wollen. Vertrauen hat der Kunde meist nur zu anderen Kunden oder Instituten, die ein Produkt tatsächlich unabhängig getestet haben.
Beispiel: sie haben eine "Literaturecke" auf ihrer Seite, auf der sie aktuelle Bücher vorstellen und bewerten. Darunter wäre Platz zum Beispiel für einen Vote, bei dem der Kunde das Buch bewerten kann oder per Text die Chance erhält seine Meinung zu äußern.
Jetzt nimmt es ihnen auch garantiert niemand mehr übel, wenn sie Preis und Verlag des Buches angeben und einen Link "klicken sie hier um dieses Buch zu bestellen" anbringen. Diese Art Werbung hat der Kunde explizit gewünscht und auch erwartet, als er diese Seite geöffnet hat. Somit ist es aus Sicht des Kunden ein Service - der ihnen sicher einige Klicks und evtl. sogar einige Euro einbringt.

Ähnlich ist es bei Vergleichstests. Sie haben Partnerprogramme mit verschiedenen Händlern, die alle ähnliche Produkte anbieten? Auch hier können sie das eben vorgestellte Konzept anwenden. Eine tabellarische Gegenüberstellung der einzelnen Händler: zum Beispiel von Lieferzeit, Produktpalette oder Versandkosten - am besten mit Platz für ein Meinungsfeld ihrer Besucher. Das hat den Vorteil, dass sie Feedback zu denen von ihnen angebotenen Händlern erhalten und evtl. schwarze Schafe eliminieren können, bevor der Kunde am Ende wegen eines schlechten Kaufs sauer auf sie ist.

Nehmen wir als Beispiel für einen (guten) "Produktkatalog" die Firma IKEA. Ganz typischer Designaspekt für Kataloge ist eine farbige Einführungsseite mit wenig Text, gefolgt von einigen Beispielen und einer abschließenden Übersicht über weitere Produkte der Palette. Auffallend bei IKEA ist besonders die (klassische) 3-Teilung der Seiten: ganz links ein großes farbiges Bild, welches die Stimmung wiedergibt und aus dem mit einem Blick ersichtlich ist, ob es sich zum Beispiel um Küchen- oder Schlafzimmermöbel handelt. Darunter ein Text, in dem allgemeine Erläuterungen zur Produktpalette zu finden sind. Neben diesem Abschnitt (nach einer Trennlinie) untereinander angeordnet eine Liste der angebotenen Möbel (die sie teilweise auch auf dem großen Bild sehen) als verkleinertes Pic mit kurzen technischen Angaben und einem Preis. Ganz außen ein farbiger Seitenstreifen, der ihnen mit Text und charakteristischen Farben angibt, in welcher Rubrik des Katalogs sie sich gerade befinden.
Die abschließende Übersichtsseite soll besonders übersichtlich sein - hier ist sie mehrspaltig und listet die restlichen Artikel jeweils mit Bild und ganz kurzer Beschreibung auf. Hier finden sie all das, was als reine Accessoires nicht direkt zum Thema gehört.
Wichtig bei Katalogen ist, das Produktbilder sich nicht überdecken dürfen und die Objekte nach Möglichkeit freigestellt sind (das heißt: ohne Hintergrund) - nichts aber auch gar nichts sollte (so die klassische Lehrbuchauffassung) vom Produkt selbst ablenken.

Letzter Punkt in Sachen Verkaufstrategie ist die "Informationspolitik". Glauben sie eigentlich alles was sie im TV sehen oder im Radio hören? Hat eine Radiosendung um 6 Uhr morgens, bei welcher der 50te Anrufer 100 Euro gewinnt wirklich 50 Anrufer? Definitiv nicht. Sie können hier sicher annehmen, es wird tatsächlich 5 Minuten gewartet und dann der erste genommen, der wach genug ist die Nummer zu wählen. Wichtig ist nur, dass der Hörer das Gefühl hat, dass sich etwas bewegt. Man will das Gefühl erzeugen, dass die Hörer eine große Gruppe sind und den potentiellen Kunden dazu bringen, dieser Gruppe angehören zu wollen.
Manche Fernsehstudios haben kaum mehr als 40 Sitzplätze und sind auch wenig größer als eine Garage. Die Mitarbeiter des Senders dürfen sich in ihrer Pause zwischen die 20 Zuschauer setzen damit es voll aussieht. Nur beim schwenken der Kamera sieht der Zuschauer, dass pro Reihe nur 10 Plätze vorgesehen sind und die Reihen nach oben schmaler werden. Die Mikros sind direkt unter den Bänken der Zuschauer. Geschickt abgemischt gibt das selbst bei einem kleinen Publikum eine perfekte Soundkulisse.
Was sie daran erkennen sollen ist nicht, dass das gesamte Showbusiness Betrug ist, sondern: wenn sie ein Produkt verkaufen wollen bei dem sie auf die breite Masse angewiesen sind, informieren sie ihren Kunden nur dann über schlechte Nachrichten, wenn er sie sowieso erfährt. Wenn dem aber so ist, informieren sie ihn gründlich. So ist es zwar ein Fehler, aber der Kunde fühlt sich gut aufgehoben durch den guten Service. Falls der Kunde aber nicht mit dem Fehler konfrontiert wird, belästigen sie ihn damit auch nicht. (das ist so als würde die ARD mitten im Programm groß einblenden: "In Niedersachsen haben sie im Moment leider kein Bild") Aber vor allem: tun sie immer so, als steppt bei ihnen (und nur bei ihnen) jeden Tag der Bär. Denn wenn ihr Kunde sowieso weiß: sie laden alle Neuerungen immer Samstags um 19 Uhr hoch, braucht er vor Sonntag auch nicht mehr auf ihre Website zu gehen.

Damit ist natürlich noch nicht das Ende erreicht und man kann sich über Details weiter streiten.
Diese Vorschläge entstanden zum Teil in Anlehnung an verschiedene BWL - Vorlesungen der Universität Jena, insbesondere "Marketing" (Herr Dr. Helm), sowie "Organisation und Führung" (Frau Prof. Dr. Alewell). Aber auch nach verschiedenen Tipps und Erfahrungen anderer Mitstudenten und Webmaster. Trotzdem: niemand ist vollkommen und dies kann nur eine Anregung und keine starre Vorlage sein. Machen sie das beste aus ihrem Business!!

Anhang: Beispiele zum Download

	"Kinder der Nacht" Frame-Beispiel testen! 60 kbyte
	"Teddybär und Freunde" Dropdown-Navigation testen! 104 kbyte
	"... unendliche Weiten!" grafische Menüs & Gimmicks  testen! 170 kbyte
	"my Firm GmbH" Firmenweb testen! 86 kbyte

(ac/tom) Diskussion