Website-Konzeption - Von der Idee zum Storyboard GERMAN 389842152X, 9783898421522

Citation preview

Liebe Leserin, lieber Leser, wir freuen uns, dass Sie sich für ein Buch der Reihe Galileo Design entschieden haben. Galileo Design ist die Reihe für professionelle Screen-, Web- und GrafikDesigner und Experten im Prepress-Bereich. Unsere Bücher zeigen, wie man es macht – strikt aufgabenbezogen und mit Beispielmaterial professioneller Designer erschließen sie die Anwendung aller relevanten Tools und Techniken. Sie vermitteln das technische Know-how, und sie sind Ideengeber und überraschen mit originellen und inspirierenden Lösungen. Wissen teilt sich nicht nur sprachlich, sondern auch visuell mit. Satz und Layout tragen dem Rechnung. Und wo immer es dienlich ist, ist ein Buch vierfarbig gestaltet. Unsere Bücher sind eine Augenschule: indem sie gefallen, setzen sie Kreativität frei. Denn Designer lesen anders. Jedes unserer Bücher will Sie überzeugen. Damit uns das immer wieder neu gelingt, sind wir auf Ihre Rückmeldung angewiesen. Bitte teilen Sie uns Ihre Meinung zu diesem Buch mit. Ihre kritischen und freundlichen Anregungen, Ihre Wünsche und Ideen werden uns weiterhelfen. Wir freuen uns auf den Dialog mit Ihnen. Ihre Ruth Wasserscheid Lektorat Galileo Design Galileo Press Gartenstraße 24 53229 Bonn [email protected] www.galileodesign.de

Maria Grotenhoff Anna Stylianakis

Website-Konzeption Von der Idee zum Storyboard

Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei der Deutschen Bibliothek erhältlich ISBN 3-89842-152-X

© Galileo Press GmbH, Bonn 2002 1. Auflage 2001

Der Name Galileo Press geht auf den italieni-

Das vorliegende Werk ist in all seinen Teilen urhe-

schen Mathematiker und Philosophen Galileo

berrechtlich geschützt. Alle Rechte vorbehalten,

Galilei (1564–1642) zurück. Er gilt als Gründungs-

insbesondere das Recht der Übersetzung, des

figur der neuzeitlichen Wissenschaft und wurde

Vortrags, der Reproduktion, der Vervielfältigung

berühmt als Verfechter des modernen, helio-

auf fotomechanischem oder anderen Wegen und

zentrischen Weltbilds. Legendär ist sein

der Speicherung in elektronischen Medien.

Ausspruch Eppur se muove (Und sie bewegt sich

Ungeachtet der Sorgfalt, die auf die Erstellung

doch). Das Emblem von Galileo Press ist der

von Text, Abbildungen und Programmen verwen-

Jupiter, umkreist von den vier Galileischen

det wurde, können weder Verlag noch Autor,

Monden. Galilei entdeckte die nach ihm

Herausgeber oder Übersetzer für mögliche Fehler

benannten Monde 1610.

und deren Folgen eine juristische Verantwortung oder irgendeine Haftung übernehmen.

Lektorat Ruth Wasserscheid, Bonn

Die in diesem Werk wiedergegebenen Ge-

Einbandgestaltung Helmut Kraus, Düsseldorf

brauchsnamen, Handelsnamen, Warenbezeich-

Herstellung Iris Warkus

nungen usw. können auch ohne besondere Kenn-

Grafiken Stefan Engenhorst, Frechen

zeichnung Marken sein und als solche den gesetz-

Korrektorat Alexander Reischert, Köln

lichen Bestimmungen unterliegen.

Satz Werner Köhler, Krefeld Druck und Bindung J.P. Himmer, Augsburg

Liebe Leser, Um Ihnen beim Lesen die Orientierung zu erleichtern und ein besonderes Lesevergnügen zu ermöglichen, haben wir für unsere Reihe Galileo Design ein spezielles Layout entwickelt.

Spezielle Symbole in der Marginalspalte machen auf besonders wichtige Textstellen aufmerksam: Diese Abschnitte sprechen eine Warnung aus.

Durch visuelle Hilfen wurde der Text in Funktionseinheiten gegliedert: Durch das farbige Registersystem ist es Ihnen ein Leichtes, auf die einzelnen Kapitel und Teile des Buchs zuzugreifen. In Blau gehaltene Texte beinhalten Zusatzinformationen, Denkanstöße oder besondere Hinweise.

Hier verraten unsere Autoren Tipps und Tricks zur Erleichterung Ihrer Arbeit. Weiterführende Hinweise werden Ihnen so nahe gebracht. Step-by-Step können Sie unsere Beispiele nachvollziehen.

Texte mit roten Überschriften kennzeichnen Beispiele bzw. Schritt-für-Schritt-Anleitungen.

Danksagung Ein besonderer Dank gilt unserer Lektorin Ruth Wasserscheid sowie dem gesamten Team von Galileo Press für die hervorragende Zusammenarbeit während der Manuskripterstellung und Produktion. Wir danken MetaDesign und Stylepark, die uns ihr Projekt als Fallstudie zur Verfügung gestellt haben. Insbesondere danken wir Susan

Buric und Thomas Klein, die uns mit umfangreichen Informationen und Materialien zu »stylepark.com« tatkräftig unterstützten. Ebenso bedanken wir uns bei den Mitarbeitern aller beteiligten Agenturen und Unternehmen, die durch ihre Praxistipps und Projektbeiträge unser Buch bedeutend bereichert haben.

Danksagung

5

Inhalt

8 Einleitung 288 Glossar 298 Index

14 Definition 16 Projektstart 30 Online-Strategie 44 Wege zur Strategie 58 Making of Stylepark

64 Kreation 66 MainIdea 84 Ideenentwicklung 96 Präsentationsformen 102 Making of Stylepark

106 Umsetzung 108 Grobkonzept 116 Inhalte und Funktionen 148 Usability-Testing 154 Making of Stylepark

6

Inhalt

158 Entwicklung

246 Praxisbeispiele

160 Produktionsgrundlage

248 E-Branding

170 Bausteine

254 Globale Corporate Website

184 Website-Typen

262 Info- und Auktionsplattform

212 Konzeptmanagement

268 E-Commerce-Website

216 Making of Stylepark

276 Online-Community 282 Intranet/E-Learning

222 Produktion 224 Textentwicklung 230 Content-Handling 238 Produktionsbegleitung 242 Making of Stylepark

Inhalt

7

Einleitung »...(a) successful information architecture ties together users and content, all against the backdrop of what the sponsoring organization’s goals and constraints are.« Louis Rosenfeld, Argus Associates

Als metaphorische Umschreibung und Veranschaulichung des Tätigkeitsfeldes Konzeption hat sich im englischsprachigen Raum der Begriff »Information Architecture« etabliert. Im Kontext hochtrabender und gleichzeitig austauschbarer Modeschlagworte der New Economy präsentiert sich diese Bezeichnung erfrischend anachronistisch und durchaus zutreffend: Ebenso wie gute Architektur stets mehr darstellt als ein nützliches Dach über dem Kopf, entsteht eine erfolgreiche Website nicht allein durch eine praktikable Seitenstruktur. Das Zusammenspiel von Inhalt, Gestaltung und Navigation sind ebenso entscheidende Erfolgskriterien wie die Akzeptanz der Nutzer. Damit bewegt sich Website-Konzeption im Spannungsfeld zwischen Strategie, Kreation und Management. Da sind zum einen Marketing-relevante Fragestellungen zu Unternehmenszielen, Zielgruppen, Geschäftsstrategien und Wettbewerbern zu berücksichtigen. Kreative Impulse und ein Gespür für die Zielgruppenbedürfnisse sind hingegen gefragt, wenn es darum geht, eine Idee zu entwickeln, die der Website ein einzigartiges Profil verleiht und die – im Idealfall – bis hin zum Mail-Formular der Website ihre erfolgreiche Umsetzung findet. Und nicht zuletzt bedeutet Konzeption immer auch Teamarbeit: Als Schnitt8

Einleitung

stelle zwischen Kunden-Briefing und Realisation einer Website gehört die Kommunikation mit Kunde und Team zum Projektalltag. Das Tätigkeitsfeld der Website-Konzeption reicht von der Positionierung eines OnlineProjekts über die dramaturgische und inhaltliche Gestaltung der Website bis hin zur Erstellung eines Storyboards und produktionsbegleitenden Qualitätskontrolle. Ergebnis dieses kontinuierlichen Entwicklungsprozesses sollte stets eine optimale Lösung sein, die Kunden wie Zielgruppen gleichermaßen begeistert. Konzeptverantwortliche stehen dabei vor ständig neuen Herausforderungen: 왘 Welche aktuellen Chancen eröffnet das Internet meinem Kunden? 왘 Wie positioniere ich sein Unternehmen im Internet? 왘 Wie ich erreiche ich die Zielgruppen? 왘 Wie entwickle ich eine angemessene Erzähl- und Darstellungsform für die Website? 왘 Wie führe ich potenzielle Nutzer durch das Online-Angebot? 왘 Wie vermittle ich meine Ideen dem Kunden, wie dem Projektteam? 왘 Wie bekomme ich meine Idee ins Netz? 왘 Wie schaffe ich die Basis für eine optimale Website-Produktion?

Antworten auf diese Fragen und Anleitungen für die praktische Umsetzung finden Sie in dem vorliegenden Buch. Es vermittelt die Grundlagen konzeptioneller Tätigkeiten und beschreibt die notwendigen Schritte, Methoden und Qualitätsmaßstäbe – angereichert mit zahlreichen Beispielen und Tipps aus der Praxis. Wir möchten damit alle Konzeptverantwortlichen darin unterstützen, professionelle und qualitativ hochwertige Websites zu konzipieren.

Konzeption im Projektverlauf Konzeption bedeutet nicht nur einsame Bildschirmarbeit. Wer das inhaltliche Konzept erstellt, verfolgt und begleitet das Projekt von Anfang bis Ende – in seinen Hochs und Tiefs, den kreativen und produzierenden Phasen, der internen Kommunikation und im Austausch mit dem Kunden. Jede Agentur hat ihr eigenes Vorgehen, wie sie das Projekt vom ersten Kundenkontakt zum finalen Ergebnis führt. Die einen arbeiten nach einem festen Plan, die anderen lassen die Dinge auf sich zukommen und reagieren nach Bedarf. Prozesse sind auch eine Frage der Kultur. Große und insbesondere IT-lastige Agenturen bevorzugen tendenziell einen standardisierten Projektverlauf. Gibt man sich spontan kreativ, ist auch das Prozedere eher undogmatisch, was nicht unbedingt zu schlechteren Ergebnissen führt. Bei der Angebotserstellung ist man allerdings gezwungen, seine Arbeitsweise offen zu legen. Wie auch immer die Projektphasen und Ergebnisse dann benannt werden: Letztendlich führt alles über einen Analyseprozess zur Planung und Realisierung. Die Konzeption hat dabei in erster Linie eine Planungsfunktion. Dafür benötigt sie die Ergeb-

nisse aus der Analyse und holt sie im Idealfall selbst ein. In der Phase der Realisierung steht sie für Rückfragen zur Verfügung und kontrolliert die Ergebnisse aus inhaltlicher Sicht. Die Rollenverteilung bei der Konzeptentwicklung ist ebenfalls agenturspezifisch. Mit dem Wachstum der ursprünglichen Multimedia-Agenturen hat sich der Beruf des Konzepters bzw. Konzeptioners etabliert. Die zunehmende Komplexität der Projekte zwang zur Spezialisierung. In den heutigen Agenturen und Full-Service-Dienstleistern tummeln sich Account Directors, Projektmanager, Etatdirektoren, Consultants, Strategische Berater, Concept Developer, Konzeptioner, Content-Developer, Screen Designer, Production Artists, Creative Directors, Art Directors, IT-Manager, Software-Architekten, Web Developer und vieles mehr – ein Titeldschungel, den sich jede Agentur individuell gestaltet hat. Je kleiner eine Agentur ist, desto bescheidener sind meistens die Aufschriften der Visitenkarten. Wer dabei für die Konzeption verantwortlich ist, unterscheidet sich nach Größe und Ausrichtung der Agentur oder des Unternehmens. Manchmal übernimmt der Projektmanager, Designer oder Etatdirektor diese Rolle, oder es gibt eben spezielle Konzepter. Was den Verantwortungsbereich der Konzeption umschließt, ist gerade in großen Agenturen Thema für permanente Grenzkämpfe. Heißt Konzeption auch Strategieentwicklung? Wie grenzt sich die Strategie von der Unternehmensberatung ab? Darf die inhaltliche Konzeption in das Design eingreifen? Wie viele technische Fragen muss oder darf die Konzeption beantworten? Konzeption meint in den folgenden Betrachtungen weniger die Berufsbezeichnung als die Rolle, das Projektergebnis inhaltlich zu ent-

Einleitung

9

Abbildung 1 왘 Der Verantwortliche für das inhaltliche Konzept ist in den gesamten Projektprozess involviert

Projektphasen

Definition

Anforderungsanalyse

Kreation & Umsetzung

Entwicklung von Main Idea und Grobkonzept

Entwicklung

Entwicklung des Feinkonzeptes

Produktion

Testen

Auslieferung Review Dokumentation

Teilnahme an Reviews

Bewertung der Anforderungen Entwicklung der Strategie

Aufgaben des Verantwortlichen für Strategie und inhaltliches Konzept

wickeln. Sie schließt hier die strategischen Aspekte ein, sieht einen maximalen Handlungsspielraum für das Design vor und ist auf die Kompetenz der Technik angewiesen, mit der sie in ständiger Kommunikation steht. Definition Jedes Projekt beginnt mit einer Analyse der Anforderungen. Dabei werden die Wünsche des Kunden und die Bedürfnisse der Nutzer aufgenommen. In diesen Prozess können je nach Projektanforderung alle Bereiche involviert sein: Der Projektmanager sammelt Informationen zum Projektvolumen, Budget und Zeitplan. Der IT-Verantwortliche analysiert die technische Infrastruktur des Unternehmens und die technischen Anforderungen an das Projekt. Gleichzeitig erforscht er mögliche Risiken und Machbarkeiten. Der Designer, Art Director oder Creative Director erkundet Rahmenbedingungen für die Gestaltung. Der Verantwortliche für Konzept und Strategie fragt nach übergeordneten Strategien, Zielen und inhaltlichen Anforderungen an das Projekt, analysiert die Geschäftsprozesse und den Bedarf der Zielgruppen. 10

Einleitung

Aus den Anforderungen wird ermittelt, um welchen Projektumfang es sich grob handelt, ob das Vorhaben realistisch und die Agentur in der Lage ist, alle Anforderungen zu erfüllen. Der Analyseprozess findet häufig vor der Auftragserteilung statt und ist Teil der Akquisition – das heißt der Kunde muss an dieser Stelle erst einmal gewonnen werden. Oft verlangt er recht bald ein Angebot für die Realisierung des gesamten Projekts. Dieses ist insbesondere bei komplexen Vorhaben ein Risikogeschäft für beide Seiten. Die Agentur tendiert zu einer großzügigen Kalkulation, um mögliche finanzielle Risiken im Vorfeld abzusichern. Damit kann sie sich allerdings schnell aus dem weiteren Geschäft herauskatapultieren, da es meistens Konkurrenten mit niedrigeren Angeboten gibt. Für den Kunden besteht die Gefahr, dass er den scheinbar preisgünstigsten Anbieter wählt, im weiteren Projektverlauf dann mit Nachkalkulationen konfrontiert wird oder ein mäßiges bis schlechtes Ergebnis erhält. Gerade bei großen Projekten ist es sinnvoll, zunächst nur die jeweils folgende Phase verbindlich anzubieten und für den Rest der Strecke einen finanziellen

Rahmen vorzugeben. Das Vorgehen ist allerdings äußerst schwierig zu verkaufen, und häufig muss man sich doch auf ein Pauschalangebot einlassen. Ist das Projekt dann beauftragt und das Team aufgestellt, beginnt die eigentliche Arbeit der Strategieentwicklung. In Workshops mit dem Kunden werden die Anforderungen spezifiziert und gemeinsam bewertet. Die Konzeption durchleuchtet Markenwerte, Zielgruppen, Nutzen und Wettbewerb. Das Design beschäftigt sich ebenfalls mit der Marke und mit möglichen Tonalitäten der Website. Der IT-Verantwortliche eruiert erste Lösungsansätze und steht in engem Kontakt zu den technischen Experten auf Kundenseite. Am Ende wird alles zu einem gemeinsamen strategischen Ansatz verdichtet, der Grundlage der Ideenentwicklung ist. Kreation und Umsetzung Die Phasen der Ideenentwicklung und anschließenden Umsetzung der Idee in Konzept und Design ist für den Konzepter der intensivste Part im Projektverlauf. In einem internen Workshop wird die MainIdea, das zentrale Leitmotiv der Website, entwickelt. An dem Kreationsprozess sind Design und Konzeption gleichermaßen beteiligt, häufig wird aber auch ein Vertreter der Technik einbezogen. Damit können nicht nur Machbarkeiten überprüft werden, sondern auch ein Techniker bringt Schwung und inspirierende Einfälle mit ein. Von wem der entscheidende Anstoß für die MainIdea kommt, ist irrelevant. Wichtiger ist, dass alle mit dem Ergebnis glücklich sind und es sich logisch aus der Strategie ableitet. Nach der Ideenpräsentation beim Kunden beginnt die eigentliche Konzeption, sowohl aus inhaltlicher wie auch aus visueller und

technischer Sicht. Der inhaltliche Konzepter erstellt ein Grobkonzept, das Design entwickelt ein Basislayout und der Techniker beschreibt die technischen Anforderungen und Spezifikationen. Der Projektmanager überprüft währenddessen das Timing und pflegt den permanenten Kontakt zum Kunden. Die Umsetzungsphase endet meistens mit einer Präsentation der Ergebnisse beim Kunden. Danach werden die weiteren Schritte besprochen und gegebenenfalls ein Folgeangebot für die Entwicklungs- und Produktionsphase erstellt. Entwicklung Der Kunde hat das inhaltliche, visuelle und technische Grobkonzept nach entsprechenden Korrekturläufen abgesegnet. Jetzt geht es um die spezifische Ausarbeitung. Der Konzeptverantwortliche formuliert aus dem Grobkonzept ein Feinkonzept, das alle Details der Anwendung aus inhaltlicher Sicht beschreibt. Das Design überführt das Basislayout in ein visuelles Konzept und definiert dabei die einzelnen Screens. Das visuelle Konzept ist weniger ein Textdokument, sondern besteht aus den eigentlichen Ergebnissen, die schriftlich kommentiert sein können. Auf IT-Seite entsteht das technische Grobkonzept – eine erste Grundlage für die Entwickler und Systemintegratoren. Häufig wird in dieser Phase ein erster lauffähiger Prototyp erstellt. Damit kann das Konzept auf seine Machbarkeit und Konsistenz hin überprüft werden. Ein Prototyp zeigt aber auch dem Kunden das erste greifbare Resultat und kann als Grundlage für Usability-Tests dienen, in denen die Benutzerfreundlichkeit überprüft wird. Bei komplexen Projekten oder dem Einsatz neuer Technologien findet regelmäßig eine Risiko- und Machbarkeitsanalyse statt. Manch-

Einleitung

11

mal ist man gezwungen, den Kurs noch einmal um ein paar Grad zu drehen. Besser, man stellt es an dieser Stelle fest, als im Produktionsprozess, der auch kleine Änderungen sehr teuer werden lässt. Produktion Die Entwicklung ist abgeschlossen und der Kunde hat grünes Licht für die Produktion gegeben. Im Designbereich werden nun alle Screens nach Vorlage des visuellen Konzepts ausproduziert: das heißt Gifs schneiden, Schriften glätten und akribischer Feinschliff bei der Zusammenstellung der Screen-Elemente. Bei einer »multimedialen« Website werden neben dem Design häufig auch Sounds, Videos und Animationen produziert, zum Teil in Kooperation mit externen Dienstleistern. Häufig ist auch ein Texter aktiv, der die Vorlagen des Kunden überarbeitet oder neue Inhalte erstellt. Parallel zur Designproduktion beginnt die Programmierung. Die Entwickler produzieren die einzelnen Module und führen sie nach mehreren Testdurchläufen zur gesamten Anwendung zusammen: ein Prozess, der gut gesteuert sein muss, da man auf rechtzeitige Anlieferung des Materials aus dem Design angewiesen ist. Wenn auch für die Konzeption die Hauptarbeit abgeschlossen ist, so bleibt der Konzeptverantwortliche im Produktionsprozess weiterhin ein viel gefragtes Teammitglied. Auch ein noch so ausgefeiltes Konzept lässt Lücken und Missverständnisse zurück. Manchmal stellen sich erst jetzt nicht geahnte Unzulänglichkeiten heraus, die eine Überarbeitung des Konzepts erfordern. Am Ende steht die erste Beta-Version zum internen Test. Der Konzeptentwickler kennt

12

Einleitung

die Anwendung aus theoretischer Sicht am besten und ist deshalb der ideale Tester. Er überprüft mögliche inhaltliche Fehler, sucht aber auch technische Bugs. In dieser Etappe findet eine rege Kommunikation mit den Technikern statt, die parallel testen und korrigieren. Hier besteht zudem die Möglichkeit zu einem finalen Usability-Test, um die Benutzerführung einem Feinschliff zu unterziehen. Die intern getestete Version wird schließlich für den Kunden freigeschaltet und von ihm noch einmal bis ins Detail geprüft. Häufig kann er aber auch schon vorab Einzelmodule sehen und testen. Die Korrekturwünsche des Kunden werden von der Programmierung und teilweise auch vom Design ausgeführt, und nach nochmaligem internen Test wird die finale Version erstellt. Die zentrale Steuerungsfunktion der Produktionsabläufe übernimmt der Projektmanager. Er achtet darauf, dass alles im kalkulierten Zeitrahmen verläuft, koordiniert Review-Termine mit dem Kunden und sorgt für rechtzeitige Abnahmen. Implementierung, Dokumentation und Review Die Website ist fertig und wird von dem TestServer auf den Live-Server überspielt. Mit der Online-Stellung ist häufig eine weitere technische Implementierung erforderlich, wenn z.B. Datenbanken des Kunden angebunden werden sollen oder ein Zugriff auf externe Applikationen erfolgt. Manchmal besteht auch Schulungsbedarf aufseiten des Kunden z.B. für die Bedienung eines Redaktionssystems. Handbücher und Trainingsunterlagen werden erstellt, und ein Techniker schult die Redakteure vor Ort.

Wenn dann alles glatt läuft und die Website zur allgemeinen Zufriedenheit im Netz steht, fällt der erste Vorhang. Das Projekt ist allerdings noch nicht vollständig abgeschlossen. Um für die Zukunft zu lernen und auch dem Kunden die Möglichkeit zu Kritik und Lob zu geben, trifft man sich zu einem finalen Review-Termin. Jeder berichtet, was ihm gefallen oder nicht gefallen hat und was man besser machen könnte. Hier ist neben Technik, Design und Projektmanagement auch der Entwickler des Konzepts intensiv eingebunden; er nimmt wertvolle Hinweise für seine weitere Arbeit mit. Im Idealfall werden in dem Review Optionen für Folgeprojekte angestoßen und vielleicht sogar ein Termin für weitere strategische Schritte vereinbart. Der Review ist nicht nur vorläufige Abschlussveranstaltung, sondern kann auch ein Incentive für alle Seiten sein – beispielsweise verbunden mit einem gemeinsamen Essen. Ein Review findet allerdings nicht nur mit dem Kunden, sondern auch intern statt. Offen und ehrlich – mit der Prämisse »konstruktiv« – wird positive und negative Kritik ausgetauscht und in einem Abschlussbericht festgehalten. Am Ende sollte dann eine Projektdokumentation verfasst werden, was in der Regel Aufgabe des Projektmanagers ist. Die Dokumentation ist nicht nur Formalität, sondern eine wichtige Orientierungshilfe für andere Teams, die vielleicht später einmal für den gleichen Kunden arbeiten oder ein ähnliches Projekt betreuen werden.

Aufbau des Buches Das Buch orientiert sich am chronologischen Verlauf eines Web-Projekts und gliedert sich in folgende Bereiche: 왘 Definition: Projektstart und Strategieentwicklung 왘 Kreation: Ideenentwicklung und Definition der MainIdea 왘 Umsetzung: Erstellung des Grobkonzepts 왘 Entwicklung: Erstellung des Feinkonzepts 왘 Produktion: Produktionsbegleitung und Testing 왘 Praxisbeispiele 왘 In jedem Kapitel werden die wichtigsten konzeptionellen Schritte der entsprechenden Projektphase erklärt und von angewandten Beispielen und Praxistipps begleitet. Anhand unserer Fallstudie Stylepark.com können Sie den Making-of-Prozess von der Strategie bis zum Launch der Website mitverfolgen. 왘 Im letzten Kapitel finden Sie Praxisbeispiele zu verschiedenen Website-Typologien vom E-Branding bis zur Intranet-Anwendung. In Interviews mit Mitarbeitern führender Agenturen werden Idee und Realisierung verschiedener Website-Konzepte erläutert. Wir wünschen allen Lesern viel Spaß und Anregungen für zukünftige Projekte. Berlin, August 2001 Maria Grotenhoff, Anna Stylianakis

Austausch und Information Auf der Verlags-Website www.galileodesign.de finden Sie die im Buch erwähnten Links sowie Checklisten und Dokumente zum Download. Unter [email protected] können Sie in Dialog mit den Autorinnen treten.

Einleitung

13

Definition

16 Projektstart 17 Auftragschancen

31 Die vier strategischen Werte

18 Der Kunde

41 Positionierung und Vision

23 Das Projekt

41 Strategic Brief

28 Projektvorspann Consulting

14

30 Online-Strategie

Definition

44 Wege zur Strategie

58 Making of Stylepark

44 Workshop

59 Die Herausforderung

49 Benchmark

59 Analyse und Verdichtung

54 Potenzialanalyse

61 Workshop

55 Bedarfsanalyse

63 Conclusion

56 Anforderungsspezifikation

Definition

15

Projektstart Annäherung und Analyse Bevor der offizielle Startschuss für ein Projekt fällt, gibt es viel zu besprechen. Ein Briefing liegt auf dem Tisch und hinterlässt zahlreiche Fragezeichen. Große Pläne stehen einem bescheidenen Budget gegenüber. Was ist realistisch? Wo steht der Kunde? Wohin möchte er?

Die Telefonzentrale stellt Herrn Meier durch, Marketingassistent eines mittelständischen Verlagshauses. Sein Unternehmen plant den Ausbau der bestehenden Corporate Website durch einen Community-Bereich. Junge Leser sollen durch Chats, Spiele und Kontaktfunktionen gewonnen werden. Das Vorhaben erscheint ambitioniert – vielleicht zu ambitioniert. Die Frage nach dem Budget kann nicht einmal mit einem »von bis« beantwortet werden. Man einigt sich auf einen Gesprächstermin vor Ort im Verlag. Ein Flug wird gebucht, die Standardpräsentation eingepackt, und der Verantwortliche für das Neugeschäft macht sich auf zum ersten persönlichen Kennenlernen mit dem potenziellen Kunden. So könnte der Beginn eines Projekts aussehen, in dem aus den Community-Plänen vielleicht letztendlich ein Extranet für den Buchhandel wird.

16

Definition

Bevor ein Projekt klar definiert ist und ein unterzeichneter Auftrag vorliegt, steht in der Regel viel Arbeit an. Das Wissen um die Möglichkeiten des Internets ist auf Kundenseite deutlich gestiegen. Häufig legt der Kunde ein ausführliches Briefing vor, das sehr detailliert die Zielrichtung vorgibt. Eine intensive Kommunikation in der Definitionsphase erübrigt sich dadurch allerdings nicht. Der Analyseprozess gehört zu jedem Projekt – und sei es nur, um möglichen Missverständnissen vorzubeugen. Eine spannende Etappe für den Konzeptverantwortlichen, der an dieser Stelle den Prozess aus inhaltlicher Sicht unterstützt und alles einsammelt, was der Kunde über sich und sein geplantes Projekt erzählt. Hier werden die Weichen für den Erfolg aller weiteren Schritte gestellt. Die Methode heißt, Fragen zu stellen – besser zu viele, als zu wenig, denn manchmal entscheiden Details über den Kurs und das Gelingen des Ganzen.

Auftragschancen Ob eine Anfrage schließlich auch zum Auftrag führt, hängt nicht nur vom Kunden, sondern auch von der Agentur ab. Wichtig ist, dass beide zusammen passen – dass also sozusagen die Chemie stimmt. Möchte ein Kunde auf schnellstem Wege zu einer irgendwie akzeptablen Lösung kommen, wird dieses zu Konflikten mit einer innovativ orientierten Agentur führen. Grundsätzlich ist allerdings nicht auszuschließen, dass sich der Kunde im Projektverlauf neu orientiert, die Zielrichtung ändert und vielleicht den Zeitpunkt des Online-Starts zu Gunsten der Qualität verschiebt. Bei PitchPräsentationen – das heißt wenn mehrere Agenturen dazu eingeladen werden, im Wettbewerb um den Auftrag zu präsentieren – weiß man nie, ob schon eine Vorentscheidung getroffen wurde und der Rest pro forma inszeniert wird, um das interne Prozedere der Auftragsvergabe einzuhalten. Das gemeinsame Abtasten ist ein eher psychologischer Prozess, der allerdings ein strukturiertes Vorgehen nicht ausschließt. Hier heißt es, die richtigen Fragen zu stellen: Wie kam der Kunde zu der Agentur, welche Wettbewerber hat er parallel angesprochen, was ist seine zentrale Vision? Der Konzeptverantwortliche spielt in dieser Phase nicht unbedingt die entscheidende Rolle, es sei denn, er ist zentral auch für die Akquisition zuständig. In der Regel liefert er Zuarbeiten aus dem Hintergrund: Erfahrungen mit ähnlichen Projekten, Benchmarks und vielleicht sogar erste inhaltliche Anregungen, die man in Initialgespräche einstreuen kann.

Zur Erfassung der Projektchancen gehört natürlich auch die Abschätzung, ob ein echtes Projektinteresse und das nach erster Einschätzung benötigte Budget vorliegen. Konkrete Antworten wird man auf diese Fragen nur selten erhalten. Man handelt an dieser Stelle mit emotional gesteuerter Risikobeurteilung, die nur bedingt durch Fakten unterstützt werden kann.

Diese Fragen helfen Ihnen, die Chancen der Auftragserteilung zu bewerten 왘 Wie ist der Interessent zu der Agentur gekommen? 왘 Hat der Interessent schon einmal mit der Agentur zusammengearbeitet? 왘 Kennt der Interessent das Agenturprofil und die Agenturleistungen? 왘 Steht der Interessent in Kontakt zu anderen Beratungen, Produktionen (konkurrierend oder ergänzend)? 왘 Ist ein Pitch vorgesehen? Wer sind die Mitbewerber? 왘 Wie ist das realistische Interesse an einer Auftragserteilung zu beurteilen (nur allgemeine Orientierungsabsichten oder konkreter Projektdruck)? 왘 Wie begreift der Interessent die Agentur? Wird sie als Berater wahrgenommen oder geht es nur um die Umsetzung eines Projekts? 왘 Wovon ist es abhängig, dass die Agentur den Auftrag bekommt? Gibt es dazu konkrete Erwartungen? 왘 Was kann die Agentur tun, damit die Chancen zur Auftragserteilung erhöht werden? Was sollte vermieden werden?

Projektstart

17

Der Kunde Um den Kunden optimal bedienen zu können, muss man ihn kennen. Im Gespräch, durch Informationsmaterial des Kunden, aber auch durch Recherchen in Sekundärquellen soll ein möglichst umfangreiches Bild entstehen. Das Wissen über den Kunden dient als Grundlage für die Zieldefinition, die Beurteilung von Machbarkeiten und die möglichst effiziente Implementierung der Online-Aktivitäten in die Prozesse des Unternehmens.

Das sollten Sie über den potenziellen Kunden wissen 왘 Wie groß ist das Unternehmen? Wie ist es strukturiert? 왘 Was ist die Geschichte des Unternehmens? Was ist seine Kultur? 왘 Was ist die Unternehmensphilosophie und -strategie des Unternehmens? Was sind die zentralen Unternehmensziele? 왘 Welche Branche und Märkte bedient das Unternehmen? Welche Produkte und Leistungen bietet es an? 왘 Mit welchem Alleinstellungsmerkmal positioniert sich das Unternehmen im Markt? 왘 Wie ist die Marktstellung des Unternehmens zu bewerten? Mit welchem Image positioniert es sich im Markt? 왘 Wie ist das Thema Internet im Unternehmen positioniert? Wie beurteilt das Unternehmen Chancen und Gefahren des Internet-Einsatzes? Was hat es bisher im Internet unternommen und welche Erfahrungen hat es damit gemacht? 18

Definition

Positionierung Ein Konzern wie Siemens positioniert sich als global operierendes Unternehmen im Technologiesektor. Der Konzern teilt sich in verschiedene Unternehmensbereiche, die wiederum unterschiedliche Branchen bedienen, z.B. als Hersteller elektronischer Bausteine für die Automobilindustrie oder als Lieferant von Kraftwerkskomponenten für die Energiewirtschaft. Siemens produziert Produkte für den Endverbraucher wie z.B. Mobiltelefone oder Waschmaschinen. Das Unternehmen ist gleichzeitig Zulieferer für andere Unternehmen und bietet sich als Realisierer von Großprojekten an – z.B. für den Bau eines Flughafens oder Staudamms. In einigen Segmenten kann sich Siemens als Marktführer bezeichnen, in anderen liegt die Konkurrenz weiter vorne. Das Unternehmen hat eine historische Entwicklung von mehr als 150 Jahren hinter sich. Es trägt den Namen des Gründers und hat sich im Laufe der Zeit durch Übernahmen und Restrukturierungen in diverse Subunternehmen aufgesplittet, die in Teilen dezentral gesteuert werden. Das Beispiel Siemens zeigt, dass die Positionierung eines Unternehmens sehr komplex sein kann. Sie bündelt sich bei diesem Beispiel allerdings in einem: der Marke Siemens. Bei einem Konzern wie Procter & Gamble sieht das anders aus. Auch dieses Unternehmen ist ein global operierender Konzern, der in unterschiedlichen Bereichen aktiv ist und Marktführerschaften behaupten kann. Die Marke Procter & Gamble existiert allerdings für den Endkunden so gut wie nicht. Die Markenpolitik fokussiert sich auf die Tochterunternehmen wie z.B. Knorr oder auf einzelne Produkte wie Ariel.

Durch die Analyse eines Unternehmens sammeln Sie Fakten und Werte, die seine Entstehung, momentane Positionierung und perspektivische Ausrichtung kennzeichnen. Diese Faktoren haben Einfluss auf die Online-Strategie, das spätere inhaltliche Konzept und die gestalterische Tonalität. Die Online-Strategie muss mit der Unternehmensstrategie konform gehen. Die Unternehmensstruktur wird beispielsweise bei einem Corporate-Auftritt gerne als Vorbild für die Grundstruktur der Site gesehen. Man kann nur konstruktive Gegenvorschläge machen, wenn man diese Struktur kennt. Unternehmenskultur und Markenwerte können die Grundausrichtung des Designs bestimmen. Welche Informationen über das Unternehmen für das Online-Projekt relevant sein werden, kann in dem Analyseprozess noch nicht entschieden werden. Deshalb ist es wichtig, alle Fragen zu stellen, um die bedeutsamen Antworten in den weiteren Schritten identifizieren zu können. Entscheider Der zentrale Ansprechpartner in einem Projekt ist nicht unbedingt der Entscheider über Budgets oder der Verantwortliche für inhaltliche Abnahmen. Häufig stellt sich dieses allerdings zu spät heraus. Im schlimmsten Fall sind die Entscheiderrollen im Unternehmen unklar. Gerade in vom Inhaber geführten Unternehmen haben wir einige Male diese bittere Erfahrung gemacht. Design und Konzept wurden vom Marketingleiter abgesegnet, und die Produktion lief auf Hochtouren. Überraschend kam dann die Meldung, dass der Inhaber des Unternehmens noch mal einen Blick auf die Screens richten wollte. Er kannte die Vorgeschichte nicht, war nicht in die Briefings und Workshops involviert und urteilte aus subjek-

tiver Sicht, dass ihm das Ergebnis nicht gefällt. Damit war klar: Er ist der Entscheider. Wenn in einem solchen Fall kein klares Reglement für so genannte Change Requests (Änderungswünsche bezüglich schon abgestimmter Inhalte und Prozesse) vereinbart wurde, beginnt der Streit um die Kosten für den entstandenen Aufwand und geforderte Neuentwürfe. Häufig endet die Geschichte in einer unerfreulichen Kompromisslösung oder führt sogar zum Abbruch des Projekts. Prozesse Die real existierenden Unternehmensprozesse haben Auswirkungen auf den Projektverlauf und auf das Konzept. Sie werden in der Initialphase des Projekts grob erfasst, erfordern danach insbesondere bei prozessorientierten Websites eine Detailanalyse. Dabei werden dann nicht nur die bestehenden Prozesse erfasst, sondern es wird in einer zielgruppenspezifischen Bedarfsanalyse ermittelt, wie sie optimiert werden können.

Ansprechpartner = Entscheider? Stellen Sie gleich am Anfang des Projekts fest, wer der Entscheider im Abnahmeprozess ist. Häufig ist es nicht Ihr erster Ansprechpartner. Wird er zu spät involviert, können Sie im schlimmsten Fall mit dem Konzept wieder bei Null anfangen.

Projektstart

19

Die zunächst analytische Prozessbetrachtung ermittelt, wie die Produktentwicklung, die Fertigung, der Vertrieb sowie wie die interne und externe Kommunikation organisiert sind und welchen Weg Entscheidungen nehmen. Letzteres ist insbesondere für das Projektmanagement ein wichtiger Hinweis für die Planung von Reviews und Abnahmen. Die Produktions-, Vertriebs- und Kommunikationsprozesse können für die Konzeption von der Strategie bis zum Feinkonzept Relevanz haben. Auf strategischer Ebene werden Optimierungspotenziale und Hürden identifiziert. Im Konzept findet dann die Übertragung auf OnlineEbene statt. Sie werden allerdings nicht in jedem Projekt alle Prozesssichten analysieren – das wäre viel zu aufwändig. Im Vorfeld sollten Sie deshalb genau überlegen, welche Abläufe im Unternehmen mit dem Projekt zu tun haben könnten. In einem E-Commerce-Projekt betrachtet man dabei die Zulieferung, den Vertrieb und die Zahlungsabwicklung. Bei einem Intranet richtet sich die Aufmerksamkeit auf interne Kommunikationswege und WorkflowProzesse. Der Konzeptverantwortliche ist mit den Prozessen teilweise bis ins kleinste Detail konfrontiert. Entwirft er z.B. eine Online-BankingWebsite, muss er genau wissen, welche Daten für eine Überweisung erfasst werden müssen, wie Konten verwaltet werden und wie der Freischaltungsprozess für eine TAN-Liste organisiert ist. Auch der Fertigungsprozess eines Produktes kann für seine Arbeit inhaltliche Bedeutung haben. Ein Beispiel: Für einen Lebensmittelkonzern sollte eine Website entwickelt werden, die den Nutzer zum Produktentwickler macht – das heißt zum so genannten »Prosumer«. Die Website-Besucher waren aufgefordert, ein neues Produkt virtuell kreie20

Definition

ren, um es danach in die reale Fertigungsstrecke zu bringen. Für die Konzeption stellten sich dabei viele Fragen an reale Prozesse: Welche Komponenten können im bestehenden maschinellen Prozess zu einem Produkt kombiniert werden? Wie viel Zeit vergeht, bis das erste Handmuster in den Test gehen kann? Welche Kosten sind bei der Verpackungsgestaltung zu bedenken? Die Antworten machten schnell deutlich, dass die Freiheiten begrenzt werden müssen, wenn der Kunde in die Produktentwicklung involviert wird. Ein weiteres Beispiel dazu: Das Prinzip der »Mass Customization« – das heißt der kundenindividuellen Massenproduktion – steht sicher noch am Anfang seiner Möglichkeiten, findet aber immer mehr Anhänger. Autohersteller bieten einem schon seit einiger Zeit die Möglichkeit, sein Fahrzeug nach mehr oder weniger individuellen Wünschen ausstatten zu lassen. Mittlerweile öffnen sich auch Hersteller mitteloder niedrigpreisiger Massenprodukte der kundenindividuellen Produktion. adidas startete z.B. seinen ersten Pilotversuch bei der Herstellung von Turnschuhen für professionelle Ansprüche. Die Kunden konnten über einen 3-D-Fußscanner ihre persönlichen Maße erfassen lassen, nach denen dann ihr Schuh produziert wurde. Das Projekt erforderte eine sehr intensive Auseinandersetzung mit den Abläufen im Fertigungsprozess sowie in der Zu- und Auslieferung.

Abbildung 1 Beispiel Mass Customization: Die Website greift in Produktions- und Lieferprozesse ein. 왗

Website

Produktkonfiguration

Bestellung

Prozesse Zugelieferte Produktbestandteile schränken die Konfiguration ggf. ein oder müssen angepasst werden.

Zulieferung

Im gesamten Herstellungsprozess muss berücksichtigt werden, für welchen Empfänger das Produkt mit welchen Eigenschaften produziert werden soll.

Fertigung

Im E-Commerce wird eine schnelle Lieferung erwartet. Entsprechend zügig muss die Bestellung weitergeleitet werden und das Produkt nach der Herstellung direkt in die Auslieferung gelangen.

Lieferung

Beispielfragen einer Prozessanalyse für eine E-Commerce-Website 왘 Mit welchen Lieferanten arbeitet das Unter왘 Wie sieht die Kapazität der verschiedenen nehmen zusammen? Wie läuft die KommuLager in Normal- beziehungsweise Spitzennikation mit den Lieferanten? zeiten aus? 왘 Existiert ein Zentrallager oder sind mehrere 왘 Wie verläuft die Kommissionierung? 왘 Wie ist die Schnittstelle zwischen BuchhalLager vohanden? 왘 Welche Filialen werden aus welchen Betungs- und Warenwirtschaftssystem beständen und auf welchem Transportweg beschaffen? 왘 Wer ist für die Verbuchung der Geld- und liefert? 왘 Existieren verschiedene Transportwege für Zahlungseingänge verantwortlich? 왘 Existiert eine Call-Center-Anbindung? unterschiedliche Produktkategorien? 왘 Wird es eigene Lagerbestände für den On왘 Welche sonstigen Kommunikationswege line-Shop geben? gibt es? 왘 Wer antwortet auf E-Mails? Gibt es ein Dialog-Management-System?

Projektstart

21

Technische Infrastruktur Der Blick auf die technischen Voraussetzungen des Unternehmens soll aufschlüsseln, wie das Projekt möglichst effizient in vorhandene Systeme implementiert werden kann beziehungsweise welche Zusatzvoraussetzungen dafür geschaffen werden müssen. Die Fragen richten sich auf Hardware, Software und Datenhaltung: Wie sieht die interne System- und Software-Ausstattung aus? Welche ERP-Software wird eingesetzt? Welche Hardware wird eingesetzt? Wie ist die Online-Anbindung beschaffen und welche Browser werden genutzt? Welche Datenbanken existieren bereits? Wie sind die Daten miteinander vernetzt? Gibt es eine zentrale Datenhaltung, z.B. für Kundenoder Produktdaten?

Diese Fragen interessieren den IT-Experten 왘 Wie sieht die bestehende technische Infrastruktur aus? Welche Systeme und welche Software werden eingesetzt? 왘 Welche Datenbanken werden genutzt? Wie erfolgt die Datenhaltung und -weiterverwertung? 왘 Wie sieht die bisherige Online-Anbindung aus? 왘 Was sind die technischen Anforderungen an das Projekt? Welche Systeme und Applikationen sollen angebunden werden (z.B. Content-Management-System, ApplicationServer)? Welche direkten technischen Schnittstellen sind geplant (z.B. SAP-Anbindung)? 왘 Was sind die technischen Mindestvoraussetzungen aufseiten der Nutzer? 22

Definition

Die Fragen betreffen zwar in erster Linie den IT-Bereich, sind allerdings für die inhaltliche Konzeption nicht irrelevant. Schlägt der Konzeptentwickler z.B. vor, auf der Website eine Produktsuche über alle Bereiche anzubieten, müssen die Voraussetzungen im Backend dafür gegeben sein oder geschaffen werden, was in der Regel mit einem erheblichen Aufwand verbunden ist. Insbesondere auch die Verwaltung von Kundendaten hat Auswirkungen auf das Konzept. Ist z.B. eine Personalisierung geplant, müssen die Kundendaten zentral erfasst oder zumindest vernetzt sein, um bereichsübergreifend miteinander kommunizieren zu können.

왘

왘

왘

왘

왘

왘

Ist eine Kooperation mit technischen Partnern vorgesehen? Wie sieht die Aufgabenverteilung aus? Wie häufig ist eine Aktualisierung einzelner Inhalte oder gesamter Programmmodule zu erwarten? Welche Anwendungsbereiche sind beständig, welche unterliegen einer hohen Aktualisierungsanforderung? Ist eine ständige Erweiterbarkeit der Anwendung geplant? Ist eine schrittweise Plattformerweiterung oder ein Plattformwechsel geplant? Wünscht der Interessent eine Mehrfachverwertung der entwickelten Module und Assets (z.B. für sonstige Kommunikationsmaßnahmen des Unternehmens)?

Das Projekt Der Kunde liefert mit seiner Anfrage mündlich oder schriftlich eine Beschreibung seines Vorhabens in Form eines unterschiedlich umfangreichen Briefings. Das Volumen eines Briefings schwankt zwischen ein paar Stichworten und einer komplexen Projektdefinition, die schon erste Konzeptansätze enthält. Mit zunehmender Internet-Kompetenz der Unternehmen sind auch die Briefings detaillierter geworden. Im Ausnahmefall ermöglicht ein

ausgereiftes Kunden-Briefing, gleich in die inhaltliche Konzeption einzusteigen. In der Regel aber bleiben Fragen offen, zeigen sich Unstimmigkeiten, oder der Kunde möchte zu viel in einem Schritt erreichen. Die Bewertung findet im Rahmen der Strategieentwicklung statt. In der Analysephase geht es darum, alle Aspekte aufzunehmen und den Wunschzettel vollständig zu erfassen.

Mit diesen Fragen erkunden Sie die wichtigsten Eckdaten zum Projekt 왘 Wie positioniert sich das Projekt im KonWer hat das Projekt initiiert (Position, Abteilung)? kurrenzumfeld? Wie kann man sich von 왘 In welcher Phase befindet sich das Projekt? den Auftritten der Konkurrenz absetzen? Gibt es derzeit erste Vorüberlegungen oder Gibt es ein Alleinstellungsmerkmal bezievielleicht schon ein laufendes Projekt, das hungsweise die Chance, eine freie Nische optimiert werden soll? zu besetzen? 왘 Wie ist das Projekt in laufende beziehungs왘 Gibt es eine kreative Ausgangsidee? Was weise geplante Kommunikations- und Marsind Vorbilder beziehungsweise Negativbeiketingmaßnahmen integriert? spiele? 왘 Welche Online-Kommunikationsmaßnah왘 Was sind die Gestaltungsrichtlinien? Gibt es men sind für das Projekt geplant? einen Style-Guide? Wie ist das Corporate 왘 Was ist die Zielplattform des Projekts? Auf Design des Interessenten definiert? Gibt es welchen Ausgabegeräten soll die AnwenVorstellungen über zielgruppen- beziedung zugänglich sein? hungsweise projektspezifische Gestaltungs왘 Welches zentrale Motiv steckt hinter dem richtlinien? 왘 Was sind die Erfolgskriterien (erwartete Projekt (»Me too«, Erfahrung sammeln, Kosteneinsparung, Umsatzsteigerung, Nutzerzahlen, Image-Effekte, UmsatzzahMarkterschließung durch Konkurrenzdruck)? len)? Wie soll der Erfolg gemessen werden? 왘 Welche Zielgruppen sollen angesprochen Welche Instrumentarien der Erfolgsmeswerden? Was sind die Zielgruppenerwarsung können eingesetzt werden (Webtungen? Tracking, Feedback-Kanäle)? 왘 Gibt es schon Vorstellungen über ge왘 Was sind die Perspektiven des Projekts? wünschte Inhalte und Funktionalitäten? Wie lautet die Zukunftsvision? 왘 Was ist die zentrale Botschaft beziehungsweise wie lautet der Arbeitstitel des Projekts? 왘

Projektstart

23

Ziele Den inhaltlichen Kurs eines Projekts bestimmen die Ziele. An oberster Ebene stehen die Unternehmensziele, aus denen sich Marketing-, Kommunikations- und schließlich die Projektziele ableiten sollten. Ein Kunden-Briefing enthält allerdings häufig im Schwerpunkt Maßnahmen und Lösungsansätze: Welche Inhalte und Funktionen sollen umgesetzt werden, welche Plattformen sollen besetzt werden, wann soll das Projekt online gehen, welche Folgeschritte sind geplant? Es ist zwar wichtig, diese Wünsche aufzunehmen. Um sie allerdings bewerten und bei Bedarf korrigieren zu können, muss man die übergeordneten Ziele kennen: Geht es um Imagesteigerung, Gewinnung neuer Kunden, Verbesserung der Kundenbeziehungen oder Kosteneinsparung? Interessant sind allerdings nicht nur die Ziele selbst, sondern auch die Motive, die hinter dem Projekt stecken. Gilt es, ein internes Problem zu lösen? Hat ein aktueller Trend oder der Druck der Konkurrenz zu der Projektentscheidung geführt?

Zielformulierung Ziele beschreiben einen Zustand, der zu einem definierten Zeitpunkt in der Zukunft erreicht sein soll. Formulieren Sie Ziele am besten in der Gegenwart als vollständige Sätze. z.B.: »Die Umsätze haben sich im Kerngeschäft bis Ende des Jahres deutlich verbessert.«

24

Definition

Bei der Erfassung und Bewertung der Ziele sollten Sie die Zielhierarchie berücksichtigen. Was möchte das Unternehmen erreichen? Welche Ziele leiten sich daraus für das Marketing ab? Mit welchen Zielen ist das OnlineProjekt positioniert? Nicht immer sind die Projektziele deutlich von den übergeordneten Zielebenen abzuleiten. Kritisch wird es allerdings, wenn sie ihnen entgegen laufen. Man kann den Kunden natürlich nicht zwingen, seine Ziele zu ändern, sollte aber entsprechende Gefahren erkennen und darauf hinweisen. Gerade in einem dezentral gesteuerten Unternehmen haben die Bereiche häufig große Freiheiten, ihren eigenen Kurs zu bestimmen. Damit ist nicht ausgeschlossen, dass sich im Verlauf des Projekts eine zentrale Steuerungsstelle einschaltet und den Zielkorridor neu ausrichtet. In einem solchen Fall ist es wichtig, das Verfahren für Änderungen in den Projektvorgaben eindeutig geregelt zu haben, denn in der Regel kann man jetzt wieder von vorne anfangen oder es kommt zum generellen Stopp.

Um die Realisierbarkeit der Ziele einschätzen zu können, hilft es zu erfahren, an welcher Stelle das Projekt initiiert wurde. Hierbei geht es wieder um die Frage: Wer darf was entscheiden? Wurde ein E-Commerce-Projekt auf Vorstandsebene angestoßen, besteht kaum die Gefahr, dass es von anderer Stelle wieder zurückgepfiffen wird. Ist die Entscheidung allerdings im Marketing eines Produktbereichs gefallen und hat man sich dort nicht nach oben abgesichert, sind Konflikte vorprogrammiert. Ein Beispiel: Der Bereich Sachversicherungen eines Versicherungskonzerns entscheidet, seine Produkte nun auch online zu vertreiben. Der Außendienst wittert Konkurrenz und läuft Amok. Das Problem eskaliert in Windeseile nach oben, da die zentrale Vertriebspolitik angegriffen wurde. Die Zielanalyse befördert häufig einen bunten Strauß unterschiedlichster Vorstellungen zu Tage, was das Projekt erreichen kann und soll. Die Agentur leistet dabei gerne auch ihren Anteil, die Wünsche zu vermehren, da ja so vieles möglich ist. Man sollte sich an dieser Stelle nicht beunruhigen lassen, allerdings auch nicht die Erwartungen zu hoch schrauben. Wichtig ist es, im nächsten Schritt wieder auf den Teppich zu kommen, die Ziele zu selektieren, zu priorisieren und ein klares Leitziel herauszufiltern.

Erfolgskriterien Um nachträglich feststellen zu können, ob die Ziele des Kunden erreicht wurden, braucht man möglichst messbare Kriterien. Ideal sind quantitativ erfassbare Faktoren, die über das Nutzerverhalten ermittelt werden können. Das Internet bietet hierfür die optimalen Voraussetzungen. Über ein Web-Tracking können die Bewegungen und Aktionen der Nutzer anonym protokolliert und unter verschiedenen Blickwinkeln ausgewertet werden. Der Report kann z.B. aufzeigen, auf welchen Seiten die Website am häufigsten verlassen wurde, an welchen Tagen und zu welchen Zeiten am meisten Bewegung verzeichnet wurde und welche Wege die Nutzer zu einem bestimmten Produkt bevorzugt genommen haben. Die Erfassung von Browser-Version und Betriebssystem ist hilfreich im Zusammenhang mit weiteren Präferenzen des Nutzers. So deutet z.B. Unix als Betriebssystem auf Nutzer mit ausgeprägtem technischen Hintergrund. Über den Provider des Nutzers können z.B. Universitäten – und damit Studenten – identifiziert werden. AOL ist ein Provider mit einem familienfreundlichen Angebot für private Nutzer. T-Online deutet ebenfalls auf einen privaten Nutzer hin. Bei Nutzern, die an ihrem Arbeitsplatz durch das Netz surfen, lässt sich die Firma oder Organisation bestimmen (z.B. Siemens, IBM etc.). Die Kenntnis der Organisation ist hilfreich, um ein Angebot zeitlich für eine Zielgruppe zu optimieren (z.B.: für Berufstätige während der Mittagszeit; für Studenten nicht vor zehn Uhr und nicht in den Semesterferien). Die Referrer-URL gibt an, von welcher Site der Nutzer zum Online-Angebot gekommen ist; dadurch kann unter anderem die Effektivität der dort geschalteten Werbung evaluiert werden. In registrierungspflichtigen

Projektstart

25

Bereichen lässt sich die Auswertung personenspezifisch vornehmen. Erfasst man zusätzlich Profildaten der Nutzer, erfährt man beispielsweise, in welchen Berufs- oder Altersgruppen die Website auf besonders hohes Interesse stößt. Der Erfolg für den Kunden liegt nicht unbedingt primär in einer möglichst hohen Nutzerzahl. Vielleicht ist es ihm wichtiger, wenige und dafür exklusive Nutzer zu erreichen, die die Site sehr häufig besuchen und lange verweilen. Eine intensive Nutzung der Website ist allerdings nur die Voraussetzung für den eigentlich angestrebten Erfolg, der in einer Steigerung von Bekanntheit, Optimierung des Images, Gewinnung von Neukunden oder einer Erhöhung des Umsatzes liegen kann. Ein Abverkauf über eine E-Commerce-Website lässt sich eindeutig in der Orderzahl der Produkte messen. Auch die Gewinnung von Neukunden kann konkret ermittelt werden, wenn

Web-Tracking Ein Web-Tracking erfasst die Nutzungsvorgänge auf der Website und liefert wichtige Informationen für die Kontrolle und Optimierung von Online-Angeboten und Online-Werbekampagnen. Darüber hinaus dient es einer Effizienzanalyse. Startpunkt des Web-Trackings sind die so genannten Logfiles, die die Nutzungsvorgänge auf der Website sekundengenau protokollieren und somit Rückschlüsse über die Nutzung eines Web-Angebotes und der Nutzer ermöglichen.

26

Definition

sie z.B. an eine Registrierungsfunktion gekoppelt ist. Image-Effekte oder Umsatzsteigerungen, die indirekt über die Website ausgelöst wurden, sind in der Regel nur schwer zu messen oder ihrer Ursache zuzuordnen. Hier sind Ideen des Konzeptverantwortlichen gefragt. Über Kommunikationskanäle für den Nutzer lässt sich qualitatives Feedback abfragen. Die Minimalversion bildet dabei der einfache E-Mail-Kontakt. Gezielter kommt man mit einer Umfrage zu Ergebnissen, die zur Motivation vielleicht noch an eine Gewinnmöglichkeit gekoppelt ist. Denken Sie auch darüber nach, wie die Website mit der realen Welt verkoppelt werden kann. Ein Beispiel: Der Nutzer kann sich auf der Website einen Einkaufsgutschein herunterladen und diesen dann im stationären Handel einlösen. Damit erhält man nicht nur eine Möglichkeit der Erfolgsmessung, sondern motiviert gleichzeitig eine Steigerung des Verkaufs.

Jeder Logfile-Eintrag erfasst standardmäßig folgende Informationen: 왘 Zeitpunkt der Anfrage 왘 Adresse des Web-Angebots 왘 IP-Adresse, von der aus die Anfrage erfolgte (Host-Name) 왘 Übertragene Datenmenge 왘 Version der Navigations-Software (Browser) 왘 Kerndaten des Betriebssystems des Nutzers 왘 Referrer-URL (Adresse, die der Nutzer unmittelbar vorher besucht hatte) 왘 Abrufstatus (fehlerfreier oder fehlerhafter Abruf)

Stakeholder Die so genannten Stakeholder – das heißt alle im weitesten Sinne am Projekt Teilhabenden – nehmen im Projektverlauf erheblichen Einfluss auf die Konzeption. Zu Projektbeginn sitzen sie häufig nicht gemeinsam am Tisch und sorgen erst später für Überraschungen und Zielkorrekturen. Ein solches Szenario haben wir mit einem ambitionierten Projekt für einen Pharmakonzern erlebt. Ein Relaunch des Unternehmensauftritts sollte die verstreuten Websites der Geschäftsbereiche unter einem Dach zusammenbringen und in ein homogenes Gestaltungsprinzip überführen. Strategie und Konzeptansatz entwickelten wir in enger Abstimmung mit den Projektverantwortlichen aus der Unternehmenskommunikation. Als dann die Inhalte der Bereiche integriert wer-

den sollten, zeigte sich das Problem. Die eigentlichen Stakeholder waren die Unternehmensbereiche, auf die die Projektverantwortlichen keinen direkten Einfluss hatten. Somit konnten sie auch die gemeinsame Ausrichtung nicht in der gewünschten Form durchsetzen. Jeder Bereich brachte seine Sonderwünsche ein, die man irgendwie zu integrieren versuchte. Die anfangs visionären Pläne wurden immer weiter ausgehöhlt und endeten in einer recht dürftigen Kompromisslösung. Das unbefriedigende Ergebnis verschleuderte dann auch noch ein horrendes Budget, da man sich fast ausschließlich über Kursänderungen und widersprüchliche Anforderungen stritt. Hätten die Beteiligten von Anfang an zusammengesessen, wäre dieser Verlauf wahrscheinlich zu verhindern gewesen.

Diese Fragen interessieren das Projektmanagement 왘 Wer ist Entscheider über den Einsatz der 왘 Welche Termine sind für den Launch bezieNeuen Medien? hungsweise Relaunch geplant? Sind 왘 Sind die Entscheider deckungsgleich mit Zwischenstufen erwünscht? 왘 Sieht der Interessent heute schon Ausbauden Ansprechpartnern? 왘 Wer sind die Projektbeteiligten im Unterstufen oder Folgeprojekte vor? 왘 nehmen? Wer sind die Know-How-Träger? Was sind die Meilensteine im Projektver왘 Wie groß ist die Manpower aufseiten des lauf? Welche Auftrags- und Projektphasen Interessenten für die Projektbetreuung? sind geplant? 왘 Wie hoch ist der Grad der Steuerbarkeit? 왘 Wann und mit wem sollen Abstimmungs왘 Welcher Etat steht zur Verfügung bezietermine stattfinden? 왘 Wie ist die Anlieferung von Material organihungsweise in welchem Budgetrahmen bewegt sich das Projekt? siert? Wer ist aufseiten des Interessenten für das Material verantwortlich?

Projektstart

27

Entscheidend ist also, in der Definitionsphase schon zu erfahren, wer an der inhaltlichen Ausrichtung der Site beteiligt sein wird oder zu den späteren Nutzern im Backend gehört. Das kann z.B. der Pressebereich sein, der seine Presseinformationen regelmäßig einpflegt, oder das Call-Center, welches über eine Shared-Browsing-Funktion mit den Website-Besuchern kommunizieren soll. In großen Unternehmen kennen sich die Bereichsverantwortlichen häufig nicht untereinander und stellen dann in gemeinsamen Workshops fest, dass sie konträre Interessen verfolgen oder aber parallel an gleichen Lösungen arbeiten. Diese Erkenntnisse gilt es frühzeitig zu sammeln. In der Vorphase des Projekts muss deshalb genau ermittelt werden, wer im Unternehmen oder als externer Partner mit der Website zu tun haben wird, um möglichst zeitig ihre Anforderungen und Interessen abfragen zu können. Ressourcen Eine Website ist kein statisches Unternehmen, sondern erfordert regelmäßige Pflege und Betreuung, insbesondere wenn sie sich das Attribut aktuell auf die Fahnen geschrieben hat. Die Pflege ist in der Regel Aufgabe des Kunden, oder es werden externe Kräfte engagiert. Dafür muss das entsprechende Budget zur Verfügung stehen. Klären Sie zu Beginn des Projekts, wie viel personelle oder auch finanzielle Ressourcen für den laufenden Betrieb bereit stehen. Weisen Sie auf den Mindestbedarf hin. Stellt sich an dieser Stelle heraus, dass nur bescheidene Mittel vorhanden sind, muss man sich von dem Aktualitätsanspruch trennen und auf andere Werte setzen.

28

Definition

Projektvorspann Consulting Bevor ein Projekt in die Hände einer Agentur gelegt wird, kann es sein, dass die unternehmensinternen Weichen durch ein ConsultingUnternehmen gestellt wurden. Die klassische Unternehmensberatung hat das Thema Internet in ihr Portfolio aufgenommen. Umgekehrt rekrutierten Internet-Agenturen Consultants, um den Anspruch eines Full-Service-Dienstleisters einlösen zu können. Die Leistung des Consulting bewegt sich auf Ebene der Unternehmensstrategie und betrachtet die Unternehmensprozesse und -strukturen im Hintergrund geplanter oder laufender Online-Aktivitäten. Ergebnis ist ein Maßnahmenplan und ein Kalkulationsmodell, das z.B. die Einsparungspotenziale eines Online-Transfers von Geschäftsprozessen oder den möglichen Zeitpunkt einer Refinanzierung für ein geplantes Web-Projekt prognostiziert. Ein detaillierter Business-Plan ist beispielsweise für den Aufbau eines elektronischen Marktplatzes im Business-to-Business-Bereich (B-2-B) dringend erforderlich, da hier enorme Investitionen getätigt werden, die niemand orientierungslos versenken möchte. Wenn ein Consulting-Unternehmen im Vorlauf eines Projekts als Berater einbezogen wird, muss eine rechtzeitige Verzahnung mit der Konzeption stattfinden. Sobald sich die Konturen eines Projekts abzeichnen, sollte der Konzeptverantwortliche involviert werden, um einen fließenden Übergang zur Online-Strategie entwickeln zu können.

Die Realität sieht häufig anders aus. Die Vernetzung mit dem Agenturgeschäft wird vernachlässigt, oder eine unscharfe Aufgabenteilung führt zu Grabenkämpfen zwischen Konzeption und Consulting. Oft fehlt es den klassischen Beratungsunternehmen aber auch an den nötigen Erfahrungen, die onlinespezifischen Anforderungen zu erkennen und zu lösen. Einige Consulting-Unternehmen haben sich entsprechend spezialisiert, z.B. auf Themen, die das Backoffice einer E-Commerce-Plattform betreffen, wie Risikomanagement, Zahlungsabwicklung, Logistik und Forderungsmanagement. Sie können damit zu wertvollen Partnern im Projekt werden, die nicht nur den Vorlauf gestalten, sondern während des gesamten Projektverlaufs beratend zur Seite stehen.

Projektstart

29

Online-Strategie Der Weg zur Erreichung der Ziele Aus den Zielen leitet sich die Strategie ab. Sie formuliert den Handlungsrahmen, um den gewünschten Zustand zu erreichen. Manchmal gibt es eine übergreifende Online-Strategie. Häufig wird diese allerdings erst mit dem oder für das Projekt definiert.

Strategisch gibt es wie in der Zielsetzung eine klare Hierarchie: An oberster Stelle steht die Unternehmensstrategie. Über die Zielebene leitet sich daraus die Marketingstrategie ab, die im nächsten Schritt dann in die Produkt-, Preis-, Vertriebs- und Kommunikationsstrategie heruntergebrochen wird. Wo das Thema Internet in diesem Modell angesiedelt wird, differiert je nach Projektausrichtung, hat aber auch mit der Unternehmensgröße und -struktur zu tun (Abbildung 1). Ein großer Konzern steuert die Internet-Aktivitäten im Rahmen des Marketings häufig zentral. Die einzelnen Projekte werden dann von den zuständigen Bereichen oder durch bereichsübergreifende Projektteams betreut. Für eine Corporate Website ist wahrscheinlich die zentrale Unternehmenskommunikation zuständig. Für ein E-Commerce-Projekt gibt es möglicherweise ein eigenes Projektteam, das sich aus Marketing-, Produkt-, Vertriebs- und Technikexperten zusammensetzt. Eine Online-Kampagne gilt als Below-the-Line-Maßnahme im Kommunikationsmix und könnte in den Händen des Werbeleiters liegen.

30

Definition

Je höher das Thema Internet im Unternehmen aufgehängt ist, desto zielgerichteter kommt man zu einem erfolgreichen Ergebnis. Dabei ist nicht unbedingt entscheidend, auf welcher Hierarchiestufe das Projektteam steht, wenn übergeordnet die Internet-Strategie geregelt wurde. Entscheidend bleibt, dass sich die Ziele und Strategien von oben nach unten sinnvoll fortsetzen und die Maßnahmen auf Online- und Offline-Ebene miteinander synchronisiert werden. Wird eine Online-Kampagne als separates Projekt abgewickelt, verpasst man Synergien und gegenseitige Impulse. Noch kritischer wird es, wenn die Internet-Aktivitäten von der übergeordneten Strategie abschweifen und zum unkontrollierten Selbstläufer werden. In den letzten Jahren gab es in den Unternehmen ein bewegtes Gerangel um Verantwortlichkeiten und Positionen bei der Verteilung der Online-Themen. Mittlerweile haben sich gewisse Strukturen etabliert, und die Notwendigkeit wurde erkannt, Online- und Offline-Aktivitäten strategisch und organisatorisch zu vernetzen. Dieses wird umso wichtiger, je mehr das Online-Geschehen in die Unternehmensprozesse eingreift und damit zum Thema für die Unternehmensleitung wird.

Abbildung 1 Die strategische Aufhängung von Online-Maßnahmen hängt von der Unternehmensstruktur und -größe sowie der Projektausrichtung ab. 왗

Unternehmensziele

Unternehmensstrategie

z.B. eine konsolidierte und sichere Marktposition erreichen

z.B. Konzentration auf das Kerngeschäft

OnlineStrategie Marketingziele

Marketingstrategie

z.B. erhöhte Kundenzufriedenheit, verbessertes Image und verbesserte Produktqualität erreichen

z.B. Optimierung der Kundenbetreuung, Konzentration auf Kernprodukte, Verstärkung der Kommunikation

OnlineProjektStrategie

Marketing-Mix Produkt- und Sortimentspolitik

Kontrahierungspolitik (Preis)

Distributionspolitik (Vertrieb)

Kommunikationspolitik

Die vier strategischen Werte Die Analysephase hat ein Bündel unterschiedlichster Ziele zu Tage gefördert. Das Image soll verbessert werden, Investoren sollen Vertrauen gewinnen, die Presse soll mit einem umfangreichen Serviceangebot versorgt werden, und schließlich sollen Neukunden gewonnen werden und alles über Produkte und Services erfahren. Insbesondere eine Corporate Website wird häufig mit einem solchen Forderungskatalog in die Konzeption geschickt. Bei unreflektierter Übernahme führt das Ergebnis zum wohlbekannten Einheitsbrei, der keine Differenzierung zu anderen Websites ermöglicht und wahrscheinlich keines der Ziele einlösen wird. Um zu einer konzentrierten Projektvision und schlüssigen Strategie zu kommen, müssen die Ziele priorisiert und ein Kernziel identifiziert werden. Dafür braucht man Bewertungskriterien. Orientierungshilfe bieten dabei die vier strategischen Werte:

das Produkt beziehungsweise Unternehmen, von dem man sich ein Alleinstellungsmerkmal erhofft, 왘 die Marke, die Vertrauen schafft, 왘 die Zielgruppe, für die das Angebot im höchsten Maße relevant sein soll und 왘 der Wettbewerb, von dem man sich deutlich abgrenzen möchte. Die Werte wirken in Abhängigkeit zu einander und sollten vollständig berücksichtigt werden. Aus Zielgruppenperspektive ist der Benefit entscheidend. Das so genannte Nutzenversprechen ergibt sich aus den Eigenschaften des Produktes oder Unternehmens. Gibt es keinen erkennbaren Benefit, so bleibt auch die klare Markenpositionierung wirkungslos, und einer Differenzierung zum Wettbewerb fehlt die argumentative Grundlage. Umgekehrt kann ein relevanter Benefit verpuffen, wenn sich der Wettbewerb mit einem schwächeren 왘

Online-Strategie

31

Abbildung 2 Die vier strategischen Werte helfen bei der Zielfokussierung und Strategieentwicklung. 왗

Zielgruppe

Vertrauen Aufmerksamkeit

Benefit

Marke

Produkt/ Unternehmen

Differenzierung

Angebot stärker positioniert. Ein starker Nutzen in einem verschwommenen Markenbild kann zwar ein hohes Nutzerinteresse auslösen, für das Unternehmen bleibt der Erfolg allerdings begrenzt, da es nicht stark genug mit der Leistung in Verbindung gebracht wird. Ein Beispiel: Das mittlerweile legendäre MoorhuhnSpiel ist durch seine simple Originalität zum Massenspielzeug quer durch die Generationen geworden. Welcher Whisky damit allerdings ursprünglich beworben werden sollte, weiß kaum jemand, und somit dürften auch die Verkaufszahlen durch das Spiel wenig beeinflusst worden sein. Damit soll der beachtliche Vermarktungserfolg allerdings nicht in Frage gestellt werden, bei dem der Whisky-Hersteller sicher auch seinen Anteil abschöpfen durfte.

32

Definition

Wettbewerb

Produkt und Unternehmen Die Betrachtung von Produkt und Unternehmen findet bei der Entwicklung einer OnlineStrategie auf zwei Ebenen statt. Initial geht es um ein existierendes Produkt oder Unternehmen, das ins Netz gebracht werden soll. Das zugehörige zentrale Nutzenversprechen ist in der Regel definiert und wird über die klassischen Kommunikationswege bereits kommuniziert. Entscheidend ist der Transfer auf die Online-Plattform, durch den der Benefit aufgewertet oder um einen Zusatznutzen bereichert werden soll. Dafür lohnt es sich, die Eigenschaften, Stärken und Schwächen eines Produktes oder Unternehmens noch einmal genau unter die Lupe zu nehmen und nach Potenzialen für Mehrwerte zu suchen.

Abbildung 3 Die Deutsche Bahn bietet auf ihrer Homepage www.bahn.de das Online-Ticket zum Ausdrucken an. Ihre aktuelle Strategie sieht den Ausbau der Website zum bestbesuchten deutschen Reiseportal vor. 왗

Ein Beispiel: Die Deutsche Bahn bietet an, Menschen von A nach B zu bringen. Gleiches kann man auch mit einem Auto oder Flugzeug erreichen. Mit dem Auto steht man allerdings regelmäßig im Stau, der Flughafen ist nicht gleich um die Ecke, und Flugzeuge fliegen nur eine begrenzte Anzahl von Zielen an. Die Bahn hat also eine einzigartige Dienstleistung im Programm, die sie dabei noch als Monopolist vertreiben darf. Diese Botschaft ins Internet zu bringen, würde nicht unbedingt zu Besucheranstürmen führen. Schlüsselt man nun die Einzelaspekte der Dienstleistung auf, so gibt es nicht nur die Zugfahrt, sondern daran hängen Beratungsleistungen, Fahrplaninformationen und Ticketverkauf. Naheliegend ist nun, Beratung und Fahrplaninformationen auch auf die Online-Plattform zu bringen, was sicher auch als Standardangebot vom Nutzer erwartet wird. Interessanter ist allerdings der Blick auf den Ticketverkauf. Das Ticket ist ein notwendiges Übel, für das man meistens auch noch in der Schlange anstehen muss. In dieser Schwäche liegt die Chance für die Online-Strategie.

Die Bahn entschied, Tickets nicht nur über das Netz zu verkaufen, sondern auch die Möglichkeit zu schaffen, sie auf dem eigenen Drucker ausdrucken zu können. Das Online-Ticket erhielt zusätzlich einen Preisvorteil für schwach frequentierte Strecken und Zeiten. Ein deutlicher Mehrwert, der für eine entsprechende Resonanz sorgte. Im nächsten Schritt richtete die Bahn den Blick auf ihre Leistung als Reiseunternehmen und suchte nach Erweiterungsmöglichkeiten. Der Internet-Auftritt wird nun zu einem komplexen Reiseportal aufgebaut. Durch Partnerschaften mit Unternehmen aus der Touristikbranche, Autovermietern und Hotels soll der Nutzer seine Reise komplett vorbereiten können: Buchung von Flügen, Hotels, Mietwagen und Pauschalreisen. Die Bahn holt sich damit sogar Konkurrenten an Bord. Ziel ist, den Traffic weiter anzukurbeln und die Position als meistbesuchte touristische Web in Deutschland zu verteidigen. Der Verkauf von Fahrkarten über das Netz soll in den nächsten drei Jahren um das Fünfzehnfache steigen.

Online-Strategie

33

Bei dem Versprechen für ein Produkt oder Unternehmen sucht man nach einer möglichst einzigartigen Aussage. Eine so genannte Single Minded Proposition – abgekürzt SMP – formuliert einen Nutzen, der sich auf einen einzelnen Aspekt konzentriert. Ein USP – übersetzt Unique Selling Proposition – verspricht einen einzigartigen Vorteil, den kein anderes Produkt oder Unternehmen bieten kann. Den begehrten USP zu finden, ist bei der wachsenden Angebotsschwemme nicht gerade einfach, zumal sich dieser häufig auch nur temporär seiner Einzigartigkeit erfreuen kann, bis er von anderen kopiert wird. Eine Single Minded Proposition kann man auch aufstellen, wenn es keinen einzigartigen Nutzen gibt. Die Einzigartigkeit liegt dabei in der Interpretation des Nutzens. Man hebt einen Aspekt hervor, der von anderen in gleicher Form nicht kommuniziert wird. Ein Versprechen funktioniert allerdings nur, wenn es wahr ist. Gleichzeitig muss es relevant sein. Die Recherche nach diesem Versprechen können Sie methodisch angehen, indem Sie alle Wahrheiten über ein Produkt oder Unternehmen sammeln und danach hinsichtlich ihrer Relevanz aussortieren. Betrachten Sie das Produkt oder Unternehmen aus unterschiedlichen Perspektiven und formulieren Sie daraus wahre Sätze. Diese können auch negative Aspekte aufzeigen, wodurch Potenziale für eine Optimierung auf Internet-

Formulierung von USP oder SMP Fassen Sie das Nutzenversprechen möglichst in einem Satz zusammen, der leicht verständlich ist und einen hohen Erinnerungswert birgt. Fokussierung ist auch hier die oberste Regel. 34

Definition

Ebene aufgedeckt werden. Bleiben wir bei dem Beispiel der Deutschen Bahn. Der Satz »Beim Kauf eines Bahntickets steht man häufig in der Schlange« könnte zur Idee des ausdruckbaren Online-Tickets geführt haben. Ein anderer wahrer Satz könnte sein: »Die Bahn hat häufig Verspätungen.« Daraus ließe sich ein SMS-Service ableiten, der mich über Verspätungen informiert, bevor ich die Anreise zum Bahnhof angetreten habe. Marke Die Marke ist ein wertvolles und sensibles Unternehmenskapital, das in erster Linie als Vorstellung in den Köpfen der Verbraucher existiert. Die Marke repräsentiert nicht den Namen, das Aussehen oder den Nutzen, sondern eine innere Welt, die der Verbraucher mit einem Produkt, einer Produktgruppe oder einem Unternehmen verbindet. Die differenzierte Ausprägung dieser Wahrnehmung fällt bei jedem unterschiedlich aus. Der Wert der Marke darf im Internet nicht gefährdet werden. Andererseits funktioniert das Online-Medium anders als z.B. TV oder Print. Wichtig ist eine sensible Übersetzung, bei der die Potenziale des Internets zur Stärkung der Marke genutzt werden. Eine wichtige Transferleistung übernimmt dabei das Design. Es reicht nicht, das Logo abzubilden und die Hausfarben einzuhalten. Die Identifikation muss auch in der Ausdifferenzierung stimmen, und die findet idealerweise in enger Abstimmung zwischen On- und Offline-Maßnahmen statt. Ein Beispiel dafür liefert Mercedes-Benz mit seinen Aktivitäten zum 71. Internationalen Genfer Automobilsalon. Messestand und Website zitierten in harmonischer Übereinstimmung die japanische Papierfalttechnik. Das Standdesign arbeitete mit asynchronen

Abbildung 4 Die Website von Mercedes-Benz zum 71. Internationalen Genfer Automobilsalon www.mercedes-benz.com/ genf2001 greift analog zur Standgestaltung das Prinzip der japanischen Papierfalttechnik auf. Der Premiumanspruch der Dachmarke wird online und offline in homogener Form repräsentiert. 왗

Schrägen und abgeknickten Flächen. Die Agentur Scholz und Volkmer übertrug das Prinzip auf die Website und verlieh ihr damit einen dreidimensionalen Charakter. Beides passte zusammen und vertrat gleichzeitig die Marke Mercedes-Benz als Premium-Anbieter im Automobilsektor. In der Konzeption fällt die Übersetzung der Marke schwerer als im Design. Markenaffine Erlebniswelten sind ein aktueller Trend. Andere versuchen sich in einer narrativen Übersetzung. Geschichten zur Marke werden erzählt oder die Nutzer aufgefordert, eigene Geschichten zu entwickeln. Low-Involvement-Marken werden durch Partnerschaften informativ aufgewertet oder man versucht sich in reinen Online-Marken, die von den Nutzern nach eigenen Wünschen zusammengesetzt werden können. In beiden Feldern bewegt sich derzeit der Konzern Procter & Gamble. Unter www.reflect.com realisierte er eine Website, auf der die Nutzer Hautpflegeartikel nach persönlichen Wün-

schen zusammenstellen und bestellen können. Diese so genannten E-Brands werden allerdings auch kritisch betrachtet, da man ihnen nicht das Potenzial einer »physikalischen« Marke zutraut. Nach strengen Markenbegriffen handelt es dabei auch erst einmal nur um Produkte; die Marke als Vorstellungswelt existiert noch gar nicht. Für Procter & Gamble geht es in erster Linie um ein Experiment. Der Konzern setzt vornehmlich auf seine bestehenden Markenprodukte, die online über Partnerschaftsmodelle kommuniziert werden. Der Konzern vertreibt im Schwerpunkt Produkte, über die es wenig Aufregendes zu erzählen gibt. Eine Website zu einem Waschmittel wird kaum ohne Zusatzinhalte auskommen, und auch dann stellt sich die Frage, ob genügend Interessenten gelockt werden können. Procter & Gamble setzt deshalb nur vereinzelt auf Produkt-Websites. Die Online-Strategie sieht Kooperationen mit reichweitenstarken Plattformen vor, deren Inhalte zu den Marken passen. Für Pampers wurde beispielsweise ein

Online-Strategie

35

왗 Abbildung 5 Procter & Gamble experimentiert auf der Site www.reflect.com mit einer so genannten E-Brand. Die Nutzer können sich hier Hautcremes nach eigenen Bedürfnissen zusammenstellen und online bestellen.

Jointventure mit dem Internet-Portal www. rund-ums-baby.de geschlossen. Pampers bringt sich dort unter anderem mit Ratschlägen und Produktangeboten in den zugehörigen Newsletter ein und erreicht dadurch kostengünstig die Zielgruppe der Eltern mit großer Reichweite. Die Eigenschaften einer Marke sind nicht nur richtungsweisend für das Design, sondern geben auch dem Konzepter Hinweise für die passende Tonalität, Strukturgestaltung, Navigation und inhaltliche Ausprägung. Eine Marke, die für Leichtigkeit steht, sollte nicht durch eine strukturell dichte Website erdrückt werden. Eine dynamische Marke verträgt sich nicht mit einem Überangebot statischer Textseiten. Für eine Marke, die Vertrauen ausdrückt, 36

Definition

wird die Verbindung mit einer experimentellen Benutzerführung zu Konflikten führen. Die Marke steht für eine Gefühlswelt, die aus dem Stegreif heraus gar nicht so leicht in Worte zu fassen ist. Auch hier kann eine einfache Methodik weiterhelfen. Betrachten Sie die Marke als Persönlichkeit und stellen Sie dazu Fragen: Wie alt ist die Marke? Ist sie männlich oder weiblich? Wohnt sie in einer Villa oder einer beengten Einzimmerwohnung? Wie ist sie eingerichtet? Welches Auto fährt sie? Ist sie Single, verheiratet und hat sie Kinder? Was bedeuten Freunde in ihrem Leben? Welchen Beruf hat sie? Wie viel verdient sie? Wohin fährt sie in Urlaub? Die Antworten spiegeln die Eigenschaften der Marke über einen klei-

Abbildung 6 왘 Die Markenstrategie von Procter & Gamble setzt in Deutschland auf Partnerschaften mit hochfrequentierten Portalen. Auf der Website www.rund-umsbaby.de können frisch gebackene Eltern den PampersNewsletter abonnieren.

nen Umweg wider. Dabei können sich Attribute wie edel, dynamisch oder experimentierfreudig herausbilden. Die Fragen zur Markenpersönlichkeit müssen allerdings nicht verbal gestellt werden. Man kann auch mit Bildern arbeiten. Legen Sie z.B. eine Fotosammlung mit Abbildungen von Menschen, Tieren, Musikinstrumenten und Fortbewegungsmitteln auf den Tisch und lassen Sie zuordnen, was zur Marke passt. Wird sie eher mit einem kraftstrotzenden Sportler oder einem Geschäftsmann in korrektem Dreiteiler in Verbindung gesetzt? Passt die Marke eher zu einem Delfin oder zu einer

Raubkatze? Würde sie ein Flugzeug fliegen oder ein Fahrrad fahren? Hört sich die Marke eher wie ein Kontrabass oder wie eine Querflöte an? Nachdem die Motive zugeordnet wurden, sollten die Assoziationen kommentiert werden. Warum wird die Marke mit den ausgewählten Bildern in Verbindung gebracht? Drückt sich dadurch Intelligenz, Schnelligkeit oder Modernität aus? Auch auf diesem Wege gelangen Sie zu jenen Attributen, die den strategischen Rahmen ergänzen und Ihnen als weiche Faktoren bei der Konzeptentwicklung Orientierung geben.

Online-Strategie

37

Zielgruppe Ein Kunden-Briefing ergänzt den bunten Strauß an Zielen gerne um eine ebenso lange Wunschliste wichtiger Zielgruppen. Bestandskunden, potenzielle Neukunden, Investoren, Journalisten, Bewerber und die allgemein interessierte Öffentlichkeit sollen gleichwertig erreicht werden. Das Dilemma reduziert sich, wenn das Projekt im Vorfeld fokussiert wurde und z.B. als Kampagne exklusiv auf die Zielgruppe zahlungskräftiger Neukunden ausgerichtet ist. Eine Website ist zwar in der Lage, Inhalte für unterschiedlichste Zielgruppen anzubieten, da ihr Umfang zunächst einmal nicht begrenzt ist. Trotzdem empfiehlt es sich, eine Priorisierung zu finden, um auf der Homepage die wichtigsten Nutzer mit dem für sie relevanten Versprechen abholen zu können. Im Idealfall wird eine Kernzielgruppe identifiziert, auf die man sich inhaltlich und hinsichtlich der Tonalität genau einstellen kann. Sekundäre Zielgruppen müssen dabei nicht ausgeklammert werden, sondern können bei Bedarf über Subdomains separat bedient oder strukturell tiefer platziert werden. Häufig ist es allerdings gar nicht möglich, ein scharfes Zielgruppenprofil zu definieren. Ein Buch-Shop mit einer Sortimentsbreite quer durch Belletristik, Sachund Fachbücher richtet sich per se an eine

Interessenssicht Für die Zielgruppen im Internet sind weniger demografische Kriterien interessant als situative und rollenspezifische Interessen, mit denen sie die Site betreten. Alter und Einkommen sind hier nur bedingt verhaltensbestimmend. Entscheidender sind Motive und Wünsche, z.B. ein Produkt auf möglichst schnellem Weg erwerben zu können. 38

Definition

heterogene Masse, deren Gemeinsamkeit vielleicht nur noch in der Verfügbarkeit eines Internet-Zugangs liegt. In solch einem Fall wird man nicht versuchen, die Zielgruppe in allen Facetten zu beschreiben. Die Konsequenz könnte sein, dass der Shop mit einer Personalisierungsfunktion ausgestattet wird und somit die Option bietet, dass sich jeder nach individuellen Wünschen einrichten kann. Dreh- und Angelpunkt für den Erfolg einer Website ist der Nutzen für die angestrebte Zielgruppe. Die Ansprüche sind im Vergleich zu anderen Medien enorm hoch. Das Internet wird als Werkzeug betrachtet, mit dem man Dinge schnell erledigen kann, kostenlos Informationen zu allen Themen findet oder auch einfach nur Spaß hat. Das Nutzenversprechen muss mit den Motiven und Bedürfnissen der Zielgruppe kompatibel sein. Diese begründen sich in den meisten Fällen weniger demografisch als situations- und rollenspezifisch. Eine Investor-Relation-Website spricht eine Zielgruppe in ihrer beruflichen Rolle als Analysten oder Investoren an. Ob diese nun männlich oder weiblich, jung oder alt sind, bleibt dabei irrelevant. Wichtig ist, dass die rollenspezifischen Interessen analysiert und mit dem Nutzenversprechen in Einklang gebracht werden. Einen Klick später könnten die gleichen Nutzer Besucher eines Online-Shops sein, in dem sie dann in ihrer Rolle als Leser und Kunden empfangen werden.

Neben den Interessen der Zielgruppe müssen auch ihre persönlichen und situativen Voraussetzungen berücksichtigt werden: 왘 Internet-Erfahrung (Einsteiger oder Profi) 왘 Technische Voraussetzungen (z.B. verwendete Browser-Generationen oder eingeschränkte Download-Möglichkeiten durch eine Firewall) 왘 Finanzielle und zeitliche Ressourcen (Geld und Zeit zum Surfen) 왘 Umfeld (Ist z.B. Sound störend oder gewünscht?) Bei einer breiten Zielgruppe muss man sich manchmal auf den kleinsten gemeinsamen Nenner einigen, was die Gestaltungsmöglichkeiten erheblich einschränken kann. Beliebter sind Projekte, die sich an technikaffine und experimentierfreudige Menschen richten. Es kann aber auch eine spannende Herausforderung sein, mit den geringsten Mitteln zu einem innovativen Ergebnis zu kommen. Um all diese Aspekte über Ihre Zielgruppe und deren Rollenbedürfnisse zu erfahren, werden Sie auf unterschiedliche Informationsquellen zurückgreifen müssen. Viele Fragen kann der Kunde selbst beantworten oder Ihnen dazu eigene Auswertungen zur Verfügung stellen. Möglicherweise betreibt er ein ausgefeiltes Customer Relation Management und kann Ihnen detaillierte Daten über das Verhalten der eigenen Kunden liefern. Hilfreich ist es auch, mit den Personen zu sprechen, die im direkten Austausch mit den Zielgruppen der Website stehen. Das können z.B. Mitarbeiter aus dem Kommunikationsbereich sein, die Kontakte zu den anvisierten Journalisten pflegen oder aber Berater, die in der Bestandskundenbetreuung aktiv sind. Häufig aber können die offline betreuten Zielgruppen nicht direkt auf die Online-Plattform übertragen werden.

Beispielsweise wird bei einem Online-Shop für Lebensmittel die potenzielle Käuferstruktur im Netz nicht der im realen Leben entsprechen, oder es wird gezielt ein anderes Klientel verfolgt. Über das Verhalten und die Voraussetzungen bei den Zielgruppen erhalten Sie über Sekundärquellen Hinweise, die sie in Teilen auch kostenlos im Internet finden. Häufig erhalten Sie darüber allerdings nicht die differenzierte Betrachtung, die für Ihr Projekt erforderlich ist. Es empfiehlt sich dann, die Zielpersonen selbst zu befragen. Dazu könnten Sie eine Online-Befragung entwickeln, Fokusgruppen ins Haus laden oder aber auch ein Meinungsforschungsinstitut beauftragen. Bei einem bescheidenen Budget können allerdings auch schon kleinere Stichproben im persönlichen Umfeld oder dem der Kollegen weiterhelfen. Wettbewerb Die Abgrenzung zum Wettbewerb wird bei dem stetig wachsenden Angebot zunehmend schwieriger. Andererseits eröffnet die technische Entwicklung immer wieder neue Möglichkeiten und wird mit Lösung der Bandbreitenproblematik den Spielraum nochmals erweitern. Es geht allerdings nicht darum, sich mit gestalterischen Gimmicks oder technischen Highlights von der Konkurrenz abzusetzen, sondern einen sinnvollen Mehrwert zu

Informationsquelle Im Internet finden Sie diverse Informationen zu Nutzerverhalten und -anforderungen. Zahlreiche Links zu Statistiken befinden sich z.B. auf der Website www.internet-shop.de/stati.html, die Sie an Forschungsunternehmen und aktuelle Studien verweist.

Online-Strategie

39

Abbildung 7 Der Wursthersteller Wolf gewährt auf der Website www.wurst.tv über eine Vielzahl von Webcams Einblick in die Produktionsprozesse. Neben der unmittelbaren Einlösung des Vertrauensversprechens setzt er sich damit auf unkonventionelle Weise von Konkurrenzauftritten ab. 왗

schaffen, der mit dem zentralen Nutzenversprechen einhergeht. Um besser als der Wettbewerb sein zu können, muss man ihn kennen. Mit einer Benchmark-Analyse können Sie die Websites der Konkurrenten nach projektspezifisch definierten Kriterien vergleichen und daraus Potenziale für eine Abgrenzung erkennen. Das Resümee aus einer solchen Analyse ist häufig: »Die Konkurrenz macht vieles, aber keiner macht alles. Machen wir also alles.« Folge ist, dass die Websites immer komplexer werden und an klarer Aussagekraft verlieren. Entscheidet man sich aus dem Konkurrenzvergleich heraus, mehr anzubieten als der Wettbewerb, sollte der strategische Auftrag lauten, die Komplexität verdaulich zu machen. Vielleicht führt dieses zu Teilprojekten oder einer innovativen Form der Personalisierung. In vielen Fällen schafft man eine erfolgreiche Abgrenzung eher durch Reduktion auf ein zentrales Feature als durch Volumen. Dieses betrifft insbesondere Websites, die einen Kommunikationsauftrag haben und image40

Definition

prägend sein sollen. Der Hersteller von ökologischen Eiern verschaffte sich beispielsweise einen temporären Besucheransturm, in dem er ganz simpel eine Webcam auf der Wiese seiner freilaufenden Hühner platzierte und das ungetrübte Glück live auf die Website übertrug. Damit bewies er sein Produktversprechen, dass sich die eigentlichen Erzeuger seiner Eierprodukte in natürlicher Umgebung bewegen und gesund ernähren. Eine kleine Idee, die für viel Zulauf sorgte. Ähnlich ging auch der Wursthersteller Wolf vor. In Zeiten von BSE bzw. Maul- und Klauenseuche war das Vertrauen in die Fleischprodukte arg geschwunden. Der Hersteller hängte somit diverse Webcams in seinen Produktionsbetrieb, um zu zeigen, dass keine risikobelasteten Bestandteile verwendet werden.

Positionierung und Vision

Strategic Brief

Mit der Analyse der strategischen Werte haben Sie den Zielkorridor eingegrenzt und sind nun aufgefordert, die Ergebnisse in prägnanten Sätzen zusammenzufassen. Mit der Positionierung beschreiben Sie den zentralen Auftrag der Website zum Launch beziehungsweise Relaunch. Betrachten Sie die Site als Produkt: Was kann es? Wie groß ist es? Was sind seine wichtigsten Qualitäten? Eine Positionierung könnte z.B. lauten: »Die Website bietet eine Arbeitsumgebung für Firmenkunden, um ihre Finanzgeschäfte mit der Bank XY schnell und komfortabel abzuwickeln. Sie unterstützt die Kunden durch zahlreiche Tools und intelligente Hilfen.« Die Projektvision definiert das Maximalziel des Projekts. Die Vision sollte nicht utopisch sein, sondern den Idealzustand zukunftsorientiert formulieren. Sie ist damit gleichzeitig Stimulanz und Wegweiser für Konzeption, Design und Technik, zielgerichtet nach den besten Ideen auf dem Weg zur Optimallösung zu suchen. Eine Projektvision zur oben beschriebenen Positionierung könnte sein: »Die Firmenkunden der Bank XY nutzen die Website als tägliches Arbeitsinstrument für alle Finanzgeschäfte, die sie zu erledigen haben.«

Das Strategic Brief ist eine Form des Rebriefings und ein mögliches Ergebnis der Definitionsphase. Es fasst die Zieldefinition, Projektvision, Positionierung, Nutzendimensionen und ermittelten Rahmenbedingungen in einem Dokument zusammen, das dann dem Kunden zur Abnahme vorgelegt wird. Ein Strategic Brief sollte noch keine detaillierten Feature-Listen enthalten oder Ideen vorgeben, sondern konzentriert sich allein auf die Ziele und den strategischen Rahmen. Aus dem Strategic Brief kann ein Creative Brief extrahiert werden, das für die Kreation in sprachlich inspirierender Form die wichtigsten Eckwerte auf eine Textseite herunterbricht. Häufig ist das Creative Brief nur ein internes Dokument. Es soll den Ideenprozess ankurbeln und kann deshalb auch unkonventionell und provokativ formuliert sein.

Online-Strategie

41

Beispielinhalte (verkürzt) eines Strategic Brief Kategorie Kunde

Mögliche Inhalte Direktversicherer im Bereich Sachversicherungen Marktführer in Deutschland Hochwertiges Produktangebot im mittleren Preissegment

Primärziel Weitere Ziele

Die Marktführerschaft ist weiter gestärkt. Der Kundenstamm ist um gewonnene Neukunden deutlich gewachsen. Das Image ist modern und frisch.

Kernzielgruppe Weitere Zielgruppe(n)

Junge Erwachsene und Jugendliche als potenzielle Neukunden Bestandskunden Potenzielle Neukunden aus allen Alters- und Einkommensschichten Journalisten

Projektvision

Die Website ist die erste Adresse, wenn es um Direktversicherungen geht.

Positionierung

Ein höchst dynamisches Leistungsspektrum für dynamische Menschen

Alleinstellungsmerkmal

Kürzeste Bearbeitungszeiten

Botschaft

»Wir sind die Formel-1 unter den besten Direktversicherern.«

Plattform(en)

Internet Mobiltelefon (SMS)

Partner

SMS-Partner Call-Center Content-Provider

Nutzen (Anbietersicht)

Kosteneinsparung bei der Rekrutierung von Neukunden Imageprofilierung bei jungen und weiteren potenziellen Zielgruppen Gewinnung von Profildaten der Kunden

Nutzen (Anwendersicht)

Convenience in der Abwicklung von Anfragen und Schadensabwicklung Auf schnellstem Wege zum Ergebnis Hohe Produktqualität Kompetente und direkte Beratung

Nutzen (Inhalte)

Transparenz der Produkt- und Serviceleistungen nach allgemeinen und individuellen Kriterien Exklusive Zusatzinformationen

Nutzen (Funktionen)

Direkte Abwicklung von Abschlüssen und Schadensregulierungen

Erfolgskriterien (qualitativ)

Steigerung von Bekanntheit und Image bei jungen Zielgruppen und allen potenziellen Neukunden

Erfolgskriterien (quantitativ)

Traffic-Steigerung um 200% bis Ende diesen Jahres Gewinnung von 150000 Neukunden bis Ende nächsten Jahres

Perspektiven

42

Plattformerweiterung auf alle mobilen Endgeräte

Rahmenbedingungen Plattform

Netscape- und Explorer-Browser ab Version 4x

Rahmenbedingungen Budget

1 bis 1,5 Mio. DM

Rahmenbedingungen Zeitplan

Relaunch Anfang Juni

Definition

Schrittweise zum Strategic Brief 1. Beginnen Sie mit der Analyse. Sammeln Sie alle Informationen über den Kunden, sein geplantes Projekt und seine Ziele. Stellen Sie viele Fragen und erkunden Sie jedes Detail. 2. Nach der Analyse folgt die Bewertung. Überprüfen Sie die Konsistenz und Erreichbarkeit der Ziele. Orientierung bieten Ihnen dabei die vier strategischen Werte Produkt/Unternehmen, Marke, Zielgruppe und Wettbewerb. 3. Filtern Sie aus Perspektive der Zielgruppe ein zentrales Nutzenversprechen heraus. 4. Formulieren Sie die Positionierung und Vision des Projekts in wenigen klaren Sätzen. 5. Fügen Sie alle Aspekte zum Strategic Brief zusammen. Das Strategic Brief ist das Fundament für die weitere Konzeptentwicklung. Lassen Sie das Strategic Brief vom Kunden abnehmen. 6. Wenn Sie möchten, können Sie das Strategic Brief in einen Creative Brief überführen – eine inspirierende Textseite mit allen wichtigen Eckdaten, die den Funken bei der Ideenentwicklung entfachen soll.

Online-Strategie

43

Wege zur Strategie Empfehlungen zum methodischen Vorgehen Die meisten Agenturen haben ihr eigenes Vorgehen entwickelt, wie sie die Projektanforderungen aufnehmen und zur Strategie verdichten. Es gibt aber auch bewährte Standardmethoden, die den Prozess erleichtern können.

Der Auftrag für alle Methoden zur Strategiedefinition heißt Fokussierung. Unwichtiges sollte von Bord geworfen und Wichtiges hervorgehoben werden. Um den Fokus allerdings erkennen zu können, ist ein strukturiertes Vorgehen erforderlich. Gespräche, Recherchen und Bewertungen führen leichter zum Ergebnis, wenn sie nach einem bewährten Schema durchgeführt werden. Workshops mit dem Kunden sind ein wichtiges Instrument, müssen allerdings sorgfältig vorbereitet sein, um brauchbare Ergebnisse liefern zu können. Erstellen Sie im Vorfeld eine Konkurrenz-Analyse, bereiten Sie die Fragen vor und überlegen Sie sich, wie Sie den Kunden zur aktiven Mitarbeit motivieren können.

44

Definition

Workshop Zu jedem Projekt gehört mindestens ein eintägiger Workshop mit dem Kunden. Auch wenn Ihnen der Kunde ein ausführliches Briefing vorgelegt hat, ist ein Verzicht auf das gemeinsame Erarbeiten der Ziele nicht zu empfehlen. Meistens reicht ein Workshop-Tag allerdings nicht aus. Je komplexer die Anforderungen sind, desto häufiger werden Sie sich mit dem Kunden zusammensetzen und dabei mit unterschiedlichsten Vertretern aus seinem Hause sprechen. Ein Workshop bedeutet Arbeit, sollte aber auch den Spaßfaktor nicht vernachlässigen. Neben der Sammlung und Bewertung von Informationen geht es darum, ein Wir-Gefühl zu schaffen und den Kunden in die Strategie- und Konzeptentwicklung aktiv zu involvieren.

Teilnehmer Der Erfolg eines Workshops hängt entscheidend von der Kompetenz und den Verantwortlichkeiten der Teilnehmer ab. Dieses gilt sowohl für die Agentur- als auch für die Kundenseite. Mit Blick auf die Workshop-Themen muss genau überlegt werden, wer zu den entsprechenden Fragen Stellung nehmen kann und über die nötige Entscheidungskompetenz verfügt. Als Konzeptverantwortlicher sollten Sie sich gut vorbereiten, welche Fragen Sie stellen möchten und wer diese beantworten könnte. Häufig ist es allerdings nicht möglich, Ihre Wunschliste der Teilnehmer zusammenzubringen. Oft scheitert dieses an ihrer zeitlichen Verfügbarkeit. Sollte allerdings die nötige Minimalbesetzung zum gewünschten Termin nicht zu Stande kommen können, empfiehlt sich eine Terminverschiebung.

Eine kleine Teilnehmerschar ist in der Regel effizienter als eine Gruppe von 20 Menschen. Gerade im ersten Workshop werden allerdings häufig sehr viele Personen anwesend sein müssen, um alle Aspekte mit den jeweils Zuständigen besprechen zu können. Eine gute Moderation und ein abwechslungsreiches Programm, das jeden Teilnehmer aktiv einbezieht, führt auch bei großzügiger Besetzung zu guten Ergebnissen. Agenda Ein Workshop braucht eine detaillierte Agenda, um nicht vom Kurs abzukommen. Man verzettelt sich sonst schnell in Randthemen und verliert den Faden. Wichtig ist, vorher genau zu definieren, was aus dem gemeinsamen Arbeitstag hervorgehen soll. In der Regel ist es Aufgabe des Projektmanagers, die Ziele zu defi-

Exemplarische Agenda für einen Kick-off-Workshop Uhrzeit

Workshop

09.30–10.00 Uhr

Erwartungen der Teilnehmer (Sammlung und Priorisierung – Flipchart)

10.00 –10.30 Uhr

Projektstatus (Präsentation – Beamer)

10.30 – 11.30 Uhr

Definition der Projektziele (Sammlung und Priorisierung – Metawand)

11.30 – 11.45 Uhr

Kaffeepause

11.45 – 12.00 Uhr

Benchmark – Konkurrenz-Websites (Präsentation – Beamer)

12.00 –13.00 Uhr

Gestaltungsvision (Bildauswahl und Interpretation)

13.00 –14.00 Uhr

Mittagspause

14.00 –15.30 Uhr

Definition der Kernzielgruppen und Erwartungen (Sammlung und Priorisierung – Metawand)

15.30 –16.00 Uhr

Kaffeepause

16.00 –16.30 Uhr

Projektvision (Moderation – Flipchart)

16.30 –17.00 Uhr

Next Steps (Moderation – Flipchart)

17.00 –17.30 Uhr

Resümee der Ergebnisse und Prüfung der Erwartungen (Moderation – Flipchart)

Wege zur Strategie

45

nieren, dem Workshop einen klaren Titel zu geben und den Ablauf zu definieren. Dies geschieht in enger Abstimmung mit dem Projektteam. Agenda und Teilnehmerliste sollten mindestens eine Woche vor dem WorkshopTermin an den Kunden geschickt und bei Bedarf seinen Änderungswünschen angepasst werden. Die Ziele und Erwartungen werden dann noch einmal zu Beginn des Workshops vorgestellt und miteinander abgeglichen. Methoden Ein guter Workshop setzt Energie frei und sorgt für ein angenehmes Erlebnis. Durch eine abwechslungsreiche Gestaltung werden die Teilnehmer motiviert, aktiv dabei zu sein, ihr Wissen einzubringen und Ideen zu entwickeln. Setzen Sie unterschiedliche Medien und Methoden ein. Zwischenpräsentationen können anregend sein, sollten aber möglichst knapp und plakativ auf den Punkt kommen, um die Teilnehmer nicht in eine ermüdende Zuschauerhaltung zu drängen. Zentral ist eine steuernde und inspirierende Moderation. Die Moderation hat dabei nicht nur Einfluss auf die Atmosphäre, sondern in erster Linie die Aufgabe, den Diskussionsprozess zu leiten, Ergebnisse zu fixieren und die Einhaltung des Zeitplans zu gewährleisten. Meistens übernimmt der Projektmanager die leitende Moderation. Einzelthemen können dann aber auch von anderen Teammitgliedern moderiert werden. Für die Abstimmung der Inhalte kann der Konzeptverantwortliche selbst das Wort ergreifen. Wichtig ist, dass die Rollen vorher abgestimmt wurden und man nicht während des Workshops fragend umherschaut, wer sich für die nächste Runde verantwortlich fühlt.

46

Definition

Ziel eines Workshops ist es, von allen Teilnehmern möglichst viele Anregungen zu erhalten und diese dann auf das Wesentliche zu konzentrieren. Bei abstrakten und sehr weichen Aspekten sind direkte Fragen an die Teilnehmer oft wenig zielführend. Wirft man z.B. die Frage in den Raum, welchen Gesamteindruck die Website vermitteln soll, landet man schnell bei dem allgemeinen Wunsch: »Sie sollte innovativ sein.« Hier kann eine indirekte und spielerische Vorgehensweise zu konkreteren und projektspezifischen Antworten führen. Bilder oder haptische Gegenstände wecken Assoziationen, die mit dem Projekt in Verbindung gebracht werden können. Der Spaßfaktor kann dabei zusätzlich angehoben werden, wenn die Teilnehmer zur Aktivität aufgefordert werden, z.B. eine Collage aus dem vorgegebenen Material zu gestalten. Manchmal braucht es ein bisschen Überwindung, bis sich die Teilnehmer auf die im Arbeitsalltag etwas ungewöhnliche Tätigkeit einlassen. Aus Erfahrung geht es dann aber sehr schnell, dass man sich engagiert der Bastelleidenschaft hingibt und am Ende positiv überrascht ist von der Qualität und Verwertbarkeit der Ergebnisse. Einen Schwerpunkt der Workshops bilden gesteuerte Diskussionen. Da allerdings nicht jeder gleichermaßen redefreudig ist, legt eine moderierte Fragerunde nicht unbedingt alle wichtigen Faktoren offen. Gerade in einer großen Teilnehmerrunde empfiehlt es sich, Ergebnisse in schriftlicher Form einzusammeln. Die schriftliche Methode eignet sich z.B., um Projektziele, Zielgruppen, Bedürfnisse und gewünschte Inhalte zu erfassen. Die Teilnehmer schreiben in einem vorgegebenen Zeitraum ihre Vorstellungen zu einer definierten Fragestellung auf. Jede Karte sollte nur einen Punkt enthalten, der in ein paar Stichworten oder

einem kurzen Satz festgehalten wird. Auf einer Metawand werden dann die beschrifteten Kärtchen gesammelt, sortiert und bewertet. Vorteil ist, dass man die Karten während der Diskussion immer wieder neu strukturieren und priorisieren kann. In der Flexibilität der Metawand liegt allerdings auch eine kleine Tücke, auf die man am Ende des Workshops trifft, wenn man das Ergebnis einpacken möchte. Das Abnehmen der Karten ist etwas mühselig, und ihre Zuordnung geht verloren, wenn man sie unsortiert in die Tasche stopft. Hilfreich ist deshalb, eine Digitalkamera griffbereit zu haben, mit der man das Ergebnis abfotografiert und später dem Workshop-Protokoll anfügen kann. Neben der Metawand ist das Flipchart ein bewährtes Instrument, um Ergebnisse zu sammeln, zu bewerten oder vorbereitete Inhalte zu präsentieren. Es empfiehlt sich, die Agenda auf einem Flipchart vorzustellen und während des gesamten Tages präsent zu halten. Diskussionsergebnisse, die für weitere Themen eine besondere Relevanz haben, sollten ebenfalls verfügbar bleiben. Hängen Sie die Blätter einfach im Raum gut sichtbar auf und verweisen Sie an inhaltlich passenden Stellen wieder darauf. Der Raum wird bis zum Ende des Tages bunt plakatiert sein und vermittelt das Gefühl, dass man viel geschafft hat. Für die Bewertung und Priorisierung der Vielzahl an Wünschen und Anregungen gibt es eine einfache Methode. Die Teilnehmer erhalten eine begrenzte Anzahl selbstklebender Punkte, die sie dann auf die für sie wichtigsten Aspekte verteilen können. Häufig zeigt sich dadurch sehr schnell, wo der eigentliche Fokus liegt. Es kann allerdings auch dazu führen, dass jeder aus seiner Sicht andere Schwerpunkte setzt und sich die Punkte gleichmäßig vertei-

len. An dieser Stelle sollte man allerdings nicht aufgeben, insbesondere wenn man sich in der Phase der Strategieentwicklung befindet. Manchmal führt eine anschließende Diskussion zu einer deutlicheren Konzentration. Es kann aber auch helfen, auf eine Metaebene zurückzukommen – z.B. auf die übergreifende Vision, um dann aus dieser Perspektive die Bewertung noch einmal überprüfen zu können. Protokoll Ein Workshop kostet viel Geld, rechnet man einmal die Tagessätze und Reisekosten der Beteiligten zusammen. Umso wichtiger ist es, verwertbare Ergebnisse zu erhalten, die dann als Grundlage für die weiteren Schritte akzeptiert werden. Der Projektmanager verfasst nach dem Workshop ein schriftliches Protokoll mit den wichtigsten Eckdaten, das vom Kunden geprüft und abgenommen werden muss. Detailergebnisse zu Strategie und Konzept werden in der Regel in einem separaten Dokument festgehalten, das ebenfalls durch eine Abnahme gehen muss. Manchmal kann man aus dem Workshop heraus direkt das Strategic Brief verfassen; häufig bedarf es aber noch weiterer Abstimmungstermine und interner Arbeitsschritte.

Wege zur Strategie

47

Lukas Cottrell, Brand Strategist, FutureBrand Am Anfang eines Projekts ist der Tatendrang groß, und es fällt manchmal schwer zu vermitteln, warum vorher noch ein paar grundlegende Dinge zu klären sind. Der entscheidende Punkt liegt für uns darin, die ersten Schritte soweit wie möglich zusammen mit dem Kunden zu gehen. In unserem ersten Kick-off-Termin mit dem Kunden analysieren wir dabei vier zentrale Punkte: 1. Brand Healthcheck Im Rahmen dieses »Gesundheitschecks« evaluieren wir die Stärke und Position der Marke im Wettbewerbsumfeld. Mit Hilfe einer visuellen und strategischen Bestandsaufnahme des Marktes stellen wir fest, ob die bestehende Kommunikationsstrategie des Unternehmens im geplanten Umfeld Bestand hat oder gegebenenfalls erweitert werden muss. Darüber hinaus können wir erste Möglichkeiten der Differenzierung erarbeiten und konkrete Handlungsalternativen aufzeigen. 2. Meet Your Client In einem zweiten Schritt folgt die Anpassung der ersten strategischen Überlegungen an die Bedürfnisse der Zielgruppen. Wir betrachten die Zielgruppe dabei weniger unter statistischen Gesichtspunkten, sondern sehen sie als Menschen mit individuellen Anforderungen. Um die Verbindung zu diesen Menschen aufzubauen, konfrontieren wir die Teilnehmer in den Workshops mit Nutzer- und Kundentypologien, die bildhaft den »typischen« potenziellen Kunden widerspiegeln. Beim ersten Anblick werden diese Typen sofort wiedererkannt und man kann sich in ihre Bedürfniswelt hineindenken. 48

Definition

3. Value Proposition Nach der Analyse der Bedürfniswelt dieser Menschen muss man Wege finden, sie vom eigenen Produkt zu überzeugen. Was kann man diesen Menschen bieten, das für sie von Wert ist? Mit Hilfe der Typologien können die Teilnehmer des Workshops aus der Sicht Ihrer Kunden argumentieren und nehmen teilweise sogar deren Rolle ein. Wir stellen drei einfache Fragen: Wie würde man die Erwartungen dieser Kunden enttäuschen? Wie kann man die Erwartungen erfüllen? Und wie könnte man die Erwartungen übertreffen? 4. Brand Scenarios Auf der Grundlage dieser Ergebnisse entwickeln wir in der Regel zwei Szenarien. Diese zeigen im zuvor definierten Rahmen den Handlungsspielraum der Kommunikationsmöglichkeiten auf und dienen als Unterstützung in der Entscheidungsfindung für die weitere Unternehmens- und Marketingstrategie. Mit den Resultaten aus diesem Vorgehen erhält ein Unternehmen die notwendigen Instrumentarien, um alle weiteren Kommunikationsmaßnahmen zu steuern und zielgerichtet einzusetzen. Nach einem solchen Workshop bekam ich mal ein Kompliment von ungewohnter Seite. Es kam vom IT-Leiter des Unternehmens; eher schwer zu überzeugen und kein großer Fan des Marketings, sagte er: »Doch, das hat Sinn gemacht!«

Die Site 왘 Informationen zur Pflege von Babys 왘 Produktinformationen/Fotos Besonderes 왘 Gewinnspiel: Namensvorschläge für Babys 왘 Service für Schwangere: Checkliste, Übersicht Behörden, Beratungsstellen und Kliniken in deutschen Städten 왘 FAQs zu Inhaltsstoffen, Produkten etc. von NIVEA Beurteilung 왘 Einzige NIVEA-Website mit Produktinformationen 왘 Ansprechende, zielgruppengerechte Gestaltung mit Soundeinsatz 왘 Positiv: sehr umfangreiche Service-Angebote 왘 Negativ: Navigation kann unerfahrenen Internet-User überfordern 왖 Abbildung 1 Beispiel aus einem Website-Benchmark für Pflegeprodukte: die inhaltlich wie gestalterisch gelungene Website NIVEA for Babys (www.nivea-baby.de)

Benchmark Ein Benchmark erforscht wegweisende Vorbilder und dient dem Konkurrenzvergleich. Vorbilder müssen dabei nicht nur direkte Wettbewerber sein. Es kann sich auch um Unternehmen handeln, die eine gleichwertige Marktstellung einnehmen. Der Auftrag eines international tätigen Versicherungskonzerns für ein Benchmark könnte z.B. lauten: Untersuchen Sie die Websites von globalen Konzernen, die marktführend in ihrer Branche sind. Einen Standardfragebogen für Benchmarks gibt es nicht. Die Analyse erfolgt jeweils projektspezifisch und sollte ihre eigenen Kriterien finden. Plant man z.B. eine innovative Kam-

pagne für experimentierfreudige Nutzer, wird man sich bei den »State of the Art«-Sites umsehen, die tendenziell nicht im kommerziellen Umfeld zu finden sind. Ein Benchmark für ein projektiertes Portal sucht nach den Qualitäten artverwandter Portale und den entsprechenden Chancen einer Differenzierung. Bei einer Website für Pflegeprodukte wird man wahrscheinlich direkte Konkurrenten unter die Lupe nehmen wollen. Wie ein Benchmark aufgebaut und wie umfangreich er ist, hängt ebenfalls vom Projektvorhaben ab. Häufig reicht eine zusammenfassende Betrachtung, die auf projektrelevante

Wege zur Strategie

49

Besonderheiten eingeht und die allgemeine Positionierung beschreibt. Welche Kriterien relevant sind, ist allerdings vor der Analyse genau zu definieren und zu begründen. Orientierung gibt dabei die Frage: Was bietet dem Nutzer im geplanten Zusammenhang einen für ihn ausschlaggebenden Mehrwert? Ist eine multifunktionale Site geplant, erfolgt auch die Konkurrenzbetrachtung unter vielen Einzelaspekten. Dabei kann man nahezu wissenschaftlich vorgehen. Zunächst sollten die übergeordneten Ziele und Faktoren definiert werden. Das kann z.B. eine gewünschte Nutzerbindung sein, die unter anderem von der Qualität der Inhalte abhängt. Die Nutzerbindung kann einhergehen mit der Einlösung allgemeiner Erwartungshaltungen, die beispielsweise an die adäquate Übersetzung der Marke gekoppelt ist. Sind die übergeordneten Faktoren definiert, werden sie in Erfüllungskriterien aufgeschlüsselt, die z.B. Qualitätsmerkmale redaktioneller Inhalte wie Aktu-

alität, Exklusivität und mediengerechte Aufbereitung definieren. Man erhält schließlich eine detaillierte Checkliste, die ein entsprechendes Bewertungssystem benötigt. Um zu einem mathematischen Ergebnis kommen zu können, wird eine Punktesystem im PlusMinus-Bereich aufgesetzt. Nach der Analyse der einzelnen Websites werden die Punktergebnisse dann zusammengerechnet und als Durchschnittswerte den übergeordneten Zielen zugeordnet. Das Ergebnis kann zusätzlich in einer Vergleichsmatrix visuell abgebildet werden. Die Methode führt zu einer sehr detaillierten Betrachtung, die trotzdem eine subjektive Sicht nicht ausschließt. Eine persönliche Abschlussbewertung – nach Erfahrung und gesundem Menschenverstand – ist nicht verwerflich, sondern sogar empfehlenswert. Stellen Sie zu jeder untersuchten Website die identifizierten Highlights und Schwächen in einem eigenen Resümee noch einmal heraus.

Beispiel: Übergeordnete Ziele und Faktoren Ziele

Faktoren

Nutzerzufriedenheit Nutzen: und -bindung 왘 Hochwertiger und exklusiver Content 왘 Aktualität 왘 Zielgruppenspezifische und individuelle Angebote 왘 Serviceleistungen Erwartungskonformität

Profil: Unternehmens- und mediengerechtes Design 왘 Nutzergerechte Aufbereitung der Inhalte

Involvement

Dynamik: Inspirierende Inhalte 왘 Vernetzung mit anderen Plattformen 왘 Dialog mit den Nutzern 왘 Offenheit für Veränderungen

왘

왘

Akzeptanz

Komfort: Technische Funktionalität 왘 Gute Performance 왘 Klare und leichte Navigation 왘

50

Definition

Abbildung 2 Positionierungsmatrix zur Darstellung eines BenchmarkErgebnisses 왗

Komfort

Dynamik

+ -

+ +

-

+ Nutzen

Profil

-

-

Beispiel: Auswertungstabelle Nutzen –2

–1

0

1

2

Content Hoher Informationswert aus Nutzersicht Vollständigkeit (Archive, Verweise auf andere relevante Infos) Nutzergerechte Aufbereitung der Inhalte (Texte für das Web geschrieben, möglichst wenig Scrollen, ergänzt durch Tabellen und Schaubilder) Unternehmenskompatible Zusatzinhalte Exklusivinhalte, die nur über die Site erhältlich sind Spezialangebote für Presse (Texte, Bilder, Videos) Personalisierung, Closed User Groups Exklusivangebote für geschlossene Nutzergruppen Möglichkeiten der Personalisierung und Individualisierung Servicequalitäten Download-Angebote (auch Links zu nötigen Plug-ins) Abo-Möglichkeiten, Newsletter Bestellangebote (z.B. Materialanforderung) Tools, Beratungs- und Simulationsinstrumente After Sales Service: Hilfe, Beschwerdemöglichkeit etc. Transaktionen Bestellmöglichkeit von Produkten Sonstige Transaktionsmöglichkeiten

Wege zur Strategie

51

Beispiel: Auswertungstabelle Profil –2 Gestaltung Prägnantes Erscheinungsbild mit Wiedererkennungswert Involvierendes und animierendes Design Durchkomponiertes Design Konsistentes Erscheinungsbild: konform mit Unternehmensimage, CI Zweckorientiertes Design – »Form Follows Function« Konsistente Erscheinung von Dachauftritt und Gesellschaftsauftritten Konsistenz von Oberflächen- und Navigationsdesign Mediengerechte Eigenständigkeit, Innovation des Designs Zielgerichteter, symbiotischer Multimediaeinsatz Zielgruppenspezifische Ansprache und Gestaltung Inhaltliche Struktur Inhaltliche Strukturierung nach Nutzerbedürfnissen bzw. -interessen Angebot von Übersichts- und Vertiefungsmöglichkeiten Inhaltsgerechte Horizontal- und Vertikalstruktur Dramaturgie durch Angebot von Höhepunkten, Hervorhebungen

52

Definition

–1

0

1

2

Beispiel: Auswertungstabelle Dynamik –2

–1

0

1

2

Aktualisierung Erkennbare, regelmäßige Pflege der Inhalte Hervorhebung von Neuem (evtl. Extraseite) Inspiration Einsetzen von Push-Elementen Highlighten von Inhalten Event-Charakter Live-Übertragungen Online-Events Vernetzung Gegenseitige Verlinkung von Dachauftritt und Sites beziehungsweise Inhalten der Gesellschaften Integration in Unternehmensprozesse durch Vernetzung von Internet, Intranet, Extranet Cross-Media-Maßnahmen (Verbindung mit realen Events, klassischen Medien ...) Kommunikation Feedback-Möglichkeiten, die über den zentralen MailKontakt hinausgehen Automatischer Response auf Nutzeranfragen mit Verweis auf Antwortzeiten Schnelle Reaktion auf Anfragen Qualifizierte Reaktion auf Anfragen Einbeziehung der Nutzer in das Angebot z.B. durch Meinungsumfragen Call-Center-Anbindung

Wege zur Strategie

53

Beispiel: Auswertungstabelle Komfort –2

–1

0

1

1

Technik Optimiert für die gängigsten Browser-Versionen Alternative (Text-)Version für niedrige Browser Stabil: keine Bugs, tote Links und Abstürze Sicherheit bei Transaktion sensibler Daten Plug-ins nur für Add-ons, nicht für substanzielle Inhalte Links zu erforderlichen Plug-Ins Performance Kurze Lade- bzw. Wartezeiten Sinnvoller Seitenaufbau: Content vor Navigation Navigation Eindeutige Navigationswege Schnelle Navigationswege Klare Orientierung Mehrdimensionale Zugänge Suchfunktionen Keine reinen Navigationsseiten

Potenzialanalyse Eine Methodik zur Ermittlung des strategischen Potenzials ist die so genannte SWOTAnalyse. Die Abkürzung steht für »Strengths« (Stärken), »Weaknesses« (Schwächen), »Opportunities« (Chancen) und »Threats« (Risiken). Stärken und Schwächen richten den Blick auf das Unternehmen, Chancen und Risiken auf den Markt und Wettbewerb. In einer Matrix werden die beiden Betrachtungsebenen gegenübergestellt. Aufgabe ist nun, nach strategischen Ansätzen zu suchen, die aus der kombinierten Sicht abgeleitet werden können. Besonders interessant ist die Gegenüberstellung von Schwächen und Risiken, die zunächst einmal als Sackgasse erscheint. Gerade hier 54

Definition

verbirgt sich allerdings Potenzial für innovative Ansätze. Hat ein Unternehmen z.B. eine geringe Bekanntheit und der Markt ist von einem hohen Konkurrenzdruck geprägt, könnte man sich für eine provokative Kommunikation entscheiden, die für schnelle Aufmerksamkeit sorgt. Die Stärke sollte dann allerdings in einer hohen Qualität der Produkte liegen. Letztendlich ist SWOT nichts anderes als ein strukturiertes Vorgehen zur Ideenfindung. Die Methode eignet sich nicht nur zur Strategiefindung für ein Unternehmen, sondern kann auch für die Suche nach Verbesserungsmöglichkeiten eines Produktes oder einer Website eingesetzt werden.

Abbildung 3 Vorlage zur SWOT-Analyse: Ermittlung strategischer Potenziale durch Gegenüberstellung von Stärken, Schwächen, Chancen und Risiken. 왗

Markt-/ Wettbewerbssicht

Kundensicht

Chancen (Opportunities)

Risiken (Threats)

- ... - ... - ... - ... - ... - ...

- ... - ... - ... - ... - ... - ...

Stärken (Strengths)

SO Strategien

ST Strategien

- ... - ... - ... - ... - ... - ...

- ... - ... - ... - ... - ... - ...

- ... - ... - ... - ... - ... - ...

Schwächen (Weaknesses)

WO Strategien

WT Strategien

- ... - ... - ... - ... - ... - ...

- ... - ... - ... - ... - ... - ...

- ... - ... - ... - ... - ... - ...

Die Analyse beginnt mit der Faktensammlung zu den vier Kategorien, die in die zugehörigen Felder der Matrix eingetragen werden. Danach startet der kreative Prozess, für den es keine vorgeschriebene Reihenfolge gibt. Man kann zwischen den einzelnen Betrachtungsweisen hin- und herspringen oder sich die Themen nacheinander vornehmen. Es geht nicht darum, alle Felder gleichmäßig auszufüllen oder sich mit einer trennscharfen Zuordnung zu blockieren. Wichtiger ist es, auf neue Ideen zu kommen; die Methode selbst ist dabei nur Hilfsmittel. Man sollte allerdings nicht zu schnell aufgeben, wenn auf Anhieb keine Potenziale in einem Feld erkennbar sind. Ideen fallen nicht vom Himmel und verlangen häufig eine extreme Konzentration und Disziplin im Findungsprozess.

Bedarfsanalyse Die realen Prozesse blenden häufig über das hinweg, was im Optimalfall möglich wäre. Eine Bedarfsanalyse trennt sich so weit wie möglich von den existierenden Bedingungen, ohne sie vollständig ignorieren zu können. Der Bedarf rekrutiert sich in erster Linie aus den Interessen und Motiven der späteren Nutzer, die sich auf einer Metaebene bewegen. Zur Erfassung gibt es keine allgemein bewährte Methodik. Um den wirklichen Bedarf aufseiten eines potenziellen Nutzers herauszufinden, müssen Sie mit ihm in Kontakt treten. Direkte Fragen an die bisherige Praxis helfen dabei nur bedingt weiter, da sie häufig mit Standardwünschen oder -klagen beantwortet werden. Wertvoller ist es, auf Umwegen die wirklichen Motive zu erfassen und dafür neue Lösungswege zu finden. Auf dem Weg zu einer Pro-

Wege zur Strategie

55

zessoptimierung im Betrieb könnten beispielsweise folgende Fragen gestellt werden: 왘 Warum gehe ich morgens gerne oder ungerne zur Arbeit? 왘 Mit wem rede ich am häufigsten, mit wem am wenigsten und warum? Mit wem würde ich gerne häufiger reden? 왘 Welche Hilfsmittel stehen mir zur Verfügung, die ich so gut wie nie benutze? Warum nutze ich sie nicht? 왘 Was würde ich beruflich gerne erreichen? Warum kann ich es nicht? Eine Methode der Bedarfsanalyse ist die Form des Interviews, die schriftlich oder mündlich durchgeführt werden kann. Um die richtigen Fragen stellen zu können, müssen Sie sich allerdings im Vorfeld zumindest oberflächlich mit den Nutzern beschäftigt haben: Was sind ihre Aufgaben im Berufs- oder Lebensalltag? In welchem gesellschaftlichen Umfeld bewegen sie sich? Was sind ihre persönlichen Interessen? Die Auswahl und inhaltliche Ausrichtung der Fragen ist abhängig von der Art des Projekts. Bei einem Intranet werden Sie sich auf die Berufswelt konzentrieren, bei einem Shop auf das Alltagsleben. Bei einem Interview könnten Sie allerdings wichtige Aspekte verpassen, da Sie nur die Antworten erhalten, zu denen Sie eine Frage gestellt haben. Aufschlussreicher kann eine Beobachtung in der realen oder einer nachgestellten Situation sein. Am meisten erfahren Sie, wenn Sie z.B. den anvisierten Nutzer einer Workflow-Plattform in seinem Berufsalltag für einen Tag begleiten und danach in einem Gespräch ermitteln, was aus seiner und Ihrer Sicht optimiert werden könnte. Möglich ist auch, in einem Rollenspiel Aufschluss über typische Konfliktsituationen und Hemmnisse zu gewinnen. 56

Definition

Ein Bedarf ist allerdings kein statisches Interesse, sondern ändert sich situationsspezifisch. Einen Shop kann ich aufsuchen, weil ich ein bestimmtes Produkt kaufen möchte oder aber nach Ablenkung und Inspiration suche. Im realen Leben ist das Einkaufen häufig auch mit dem Wunsch nach Kontakt zur Außenwelt verbunden. Man möchte ein nettes Gespräch mit einer Verkäuferin führen oder sucht nach Gleichgesinnten, die sich für die neueste Game-Konsole interessieren. Auch solche Motive können für die konzeptionelle Positionierung eines Online-Shops aufgegriffen werden und die Einkaufsplattform mit einem Kommunikationsauftrag verbinden. Der ebenfalls bestehende Bedarf an einer schnellen Einkaufsmöglichkeit muss dabei nicht vernachlässigt werden. Aus den einzelnen Nutzeranforderungen werden verschiedene Anwendungsszenarien abgeleitet, die Grundlage der weiteren Konzeptentwicklung sind. Die Szenarien können Sie auch gemeinsam mit dem Kunden erarbeiten und z.B. während eines Workshops in Flow-Diagrammen dokumentieren.

Anforderungsspezifikation Zur Spezifikation der Projektanforderungen sind verschiedene standardisierte Methoden im Umlauf. Man nennt sie z.B. »Software Requirements Specification« (abgekürzt SRS) oder »Extended Software Requirements Specification« (abgekürzt XSRS). Die Definition von Anforderungen ist nicht neu, wird über eine definierte Methodik allerdings systematischer und dogmatischer in ihrer Erstellung und Dokumentation reglementiert. Insbesondere aus dem IT-Bereich ist mit zunehmender Komplexität der Projekte die Forderung nach einer

standardisierten Anforderungsspezifikation lautgeworden. Als Vorbild gilt z.B. eine von Suzanne und James Robertson entwickelte Methodik, die sie in einem Template namens »Volere« abgebildet haben. Das Dokument erfasst alle Aspekte, die Technik, inhaltliches Konzept und Design bei der Projektrealisierung betreffen und den späteren Betrieb beeinflussen. Die Volere-Vorlage unterscheidet fünf Anforderungstypen, die sich in differenzierte Einzelaspekte aufschlüsseln: 왘 Functional Requirements definieren den Umfang des Projekts und erfassen, was die Anwendung können muss, das heißt welche funktionalen Anforderungen an sie gestellt werden. 왘 Non-functional Requirements sind weiche Kriterien, die z.B. Anforderungen an die Benutzerführung, die Performance oder an das Design stellen. 왘 Project Constraints beschreiben die Rahmenbedingungen und übergeordneten Anforderungen an das Projekt. 왘 Project Drivers sind jene Kräfte, die den Erfolg des Projekts definieren und beeinflussen. Darin werden das Projektziel, die Stakeholder und Nutzer sowie deren Anforderungen festgelegt. 왘 Project Issues enthalten die Bedingungen, unter denen das Projekt realisiert werden soll. Jedem Requirement wird ein so genanntes »Fit Criterion« zugeordnet. Es dient als objektive Messgröße zur Überprüfung, ob die aus der Anforderung abgeleitete Lösung diese auch erfüllt. Genereller Anspruch bei einer solchen Methodik ist, alle Projektperspektiven zu berücksichtigen sowie die Anforderungen und Risiken bis ins kleinste Detail aufzunehmen. Die

Dokumentation erfordert ein sehr integriertes Arbeiten von Technik, Konzept und Design, da sie ein gemeinsames Produkt ist. Damit die Bausteine widerspruchsfrei zusammengefügt werden können, muss es einen Verantwortlichen für das Gesamtdokument geben, der die Konsistenz überprüft und bei Differenzen die letzte Entscheidung trifft. Der Einsatz einer solchen Methode kann für komplexe und IT-lastige Projekte sinnvoll sein, birgt aber auch Probleme. Aus Erfahrung werden Anforderungen und Lösungen gerne vermischt, und so greifen die so genannten Requirements schnell zu stark in das inhaltliche Konzept ein. Häufig versteht auch jeder die vorgegebenen Kategorien unterschiedlich, zumal in der Regel die englischen Begriffe verwendet werden und damit Interpretationsspielräume bei der Übersetzung lassen. Problematisch kann auch die Komplexität sein. Die sehr detaillierten Erfassungsmasken blähen das Dokument erheblich auf und können häufig nicht in jedem Punkt vollständig mit sinnvollen Inhalten gefüllt werden. Die größte Gefahr besteht allerdings darin, dass man eifrig alle Anforderungen sammelt und den Fokus verliert. Um so wichtiger ist es, dass der Verantwortliche für das Dokument konzeptionelle Fähigkeiten besitzt, um einer klaren Zielführung treu bleiben zu können.

Lesetipp Detaillierte Informationen zum Thema Requirements Specification finden Sie in dem Buch »Mastering the Requirements Process« von Suzanne und James Robertson, AddisonWesley, London, 1999. Das Volere-Template können Sie auf der Website www.systemsguild. com kostenlos herunterladen.

Wege zur Strategie

57

Making of Stylepark Strategische Schritte zu Stylepark.com Stylepark ist eine Business-to-Business-Plattform für Architekten, Interior Designer und Fachplaner. Eine Vielzahl gedruckter Anbieterkataloge, die den planerischen Alltag der Zielgruppen bestimmen, werden hier unter einem Dachauftritt zusammengefasst. Gleichzeitig vermittelt Stylepark ein Lebensgefühl – geprägt von höchsten Ansprüchen in Design und Architektur. Bis zum Launch im März 2001 war es ein langer Weg. Wir haben die wichtigsten Schritte dokumentiert.

Ein engagiertes Team, überwiegend bestehend aus Architekten, schließt sich zusammen, um die Arbeitsprozesse ihrer Berufskollegen zu erleichtern und ihnen mehr Platz für die Kreation einzuräumen. Das Unternehmen Stylepark wird gegründet. Die Idee: Eine Online-Plattform soll die Suche nach Produktanbietern und die Vorbereitung von Ausschreibungen unterstützen. Sie soll gleichzeitig inspirieren und den Anspruch an ein hochwer-

MetaDesign AG MetaDesign ist Deutschlands führende Agentur für Corporate Identity. Sie entwickelt integrierte Identitäten für Unternehmen und Marken. Das Leistungsspektrum reicht von der strategischen Beratung über die medienübergreifende Konzeption regionaler und globaler Erscheinungsbilder bis zur Implementierung. Ziel der MetaDesign AG ist es, zur klaren, unverwechselbaren und positiven Positionierung 58

Definition

tiges Design widerspiegeln. Die Agentur MetaDesign wird mit der Konzeption und Realisierung beauftragt. Die Marke Stylepark braucht Starthilfe und MetaDesign ist Spezialist für Online-Branding und integrierte Kommunikation. So begann ein Projekt, das aufseiten der Agentur von vielen Spezialisten aus den Bereichen Research, Markenstrategie, Corporate Design und Online-Konzeption realisiert wurde.

und damit zur Wertsteigerung der Auftraggeber beizutragen. Dabei liegt ein Schwerpunkt auf Interfaces für innovative Zukunftstechnologien von Web-Applikationen bis hin zu Mobile Devices und Telematik. Rund 200 Mitarbeiter beschäftigt MetaDesign in seinen Büros in Berlin, Zürich und San Francisco.

Die Herausforderung

Analyse und Verdichtung

Die Ziele waren weit gefasst. Architekten sollten Hilfestellung für ihre täglichen Problemstellungen finden – inspirierend und arbeitserleichternd, insbesondere im Rahmen von Produktrecherchen und der Vorbereitung von Ausschreibungen. Daneben sollten aber auch die Interessen der Hersteller und Händler berücksichtigt werden, ihre Produkte attraktiv darstellen zu können und Kontakt zu den Abnehmern aus dem Kreis der Architekten zu finden. Inhaltlich ging es um Wohn- und Büroausstattungen im Premiumsegment. Zusammengefasst eine B-2-B-Plattform für höchste Ansprüche an Design und Prozessoptimierung. Das Vorhaben erschien umso schwerer, da die Vorstellungen über die Projektausrichtung und die inneren Werte des jungen Unternehmens noch kaum in eindeutige Worte und Bilder zu fassen waren. MetaDesign war vor die Herausforderung gestellt, die Projektziele zu verdichten, ohne die übergeordnete Vision zu verlassen. Gleichzeitig musste eine Marke geschaffen werden, der das Fundament eines traditionellen Unternehmens fehlte. Hinzu kam ein weiterer – bei Start-ups eher unabwägbarer Faktor: der Aspekt der Refinanzierung des Projekts. Zur eigenen Absicherung ließ sich die Agentur den Business-Plan vorlegen. Dieser war dann so überzeugend, dass MetaDesign entschied, sich als Investor an Stylepark zu beteiligen.

MetaDesign verwendet ein eigens entwickeltes Instrument zur Projektdefinition. Dieser so genannte Profiler war nicht nur Arbeitsmethode in der Definitionsphase, sondern trug auch zur Auftragserteilung bei, da er Kompetenz und professionelles Vorgehen versprach. Aufgabe des Profilers ist es, Klarheit über die Projektziele und die Ausgangsposition zu gewinnen. »Wir konnten uns mit Hilfe des Profilers sehr schnell ein klar umrissenes Bild ihres Vorhabens machen und wussten, wo wir ansetzen mussten.« erklärt Susan Buric (Media Strategy and Concepts). Branchen-Scanning Um die Branchenbedürfnisse effizient bedienen zu können, mussten sie zunächst einmal ermittelt werden. Mittels eines Benchmarks wurden die Produktions-, Arbeits- und Kommunikationsprozesse analysiert und dokumentiert. MetaDesign identifizierte die potenziellen Bruch- und Schnittstellen zwischen den Offline- und Online-Prozessen bei der Arbeit von Architekten und erschloss daraus Optimierungspotenziale. Zielgruppenanalyse Die Bedürfnisse und Anforderungen der unterschiedlichen Zielgruppen wurden durch strukturierte Interviews direkt beim potenziellen Nutzer erforscht. MetaDesign befragte repräsentative Vertreter der Zielgruppen nach ihren Arbeitsmethoden und -prozessen, den täglichen Herausforderungen und Wünschen. Verschiedenste Zielgruppentypologien kristallisierten sich heraus. Für MetaDesign zeigte sich, dass die Entwicklung von Informationsar-

Making of Stylepark

59

Abbildung 1 Katalogregale in Büros von Architekten

왖

chitektur und Navigation eine große Herausforderung bedeuten würde. Es musste ein Lösungsansatz gefunden werden, der die Zielgruppen, ihre sehr spezifischen Bedürfnisse und die branchenspezifischen Prozesse gleichermaßen berücksichtigte.

tung erfolgen. Dies kann gerade in der Gründungsphase eines Unternehmens eine Anpassung der Markenausprägungen an veränderte Gegebenheiten nötig machen. Zur Definition der Markenstrategie wurden die vier Grundbausteine analysiert: 왘 Markenkern 왘 Markenwerte 왘 Mission Statement 왘 Markenpositionierung Das Mission Statement sollte deutlich machen: Wofür steht Stylepark und was macht es? Markenkern und Markenwerte waren Ausgangspunkt und ständige Begleiter aller weiteren Überlegungen, die die Marktaktivitäten von Stylepark betrafen. »Sie sind der Impuls, der sich in jedem Kontakt Styleparks mit der Außenwelt ausdrückt und auch nach innen ins Unternehmen zurückstrahlt. Dieser Impuls sollte seinen sichtbaren Ausdruck im Corporate Design von Stylepark finden«, so Jürgen Huber (Design Direktor Branding Identity).

Marken-Essentials Der erste Schritt zur Definition einer neuen Marke ist, das Herz des Unternehmens kennenzulernen. Bei einem solchen Prozess spielen die Struktur und Organisation des Unternehmens eine ebenso tragende Rolle wie seine Geschichte, Unternehmenskultur und der Background der Gründer. Ein traditionsreiches Unternehmen bietet dafür mehr Stoff als ein Start-up. Bei Stylepark musste die Marke von Null aufgebaut werden. Eine Mission mit Vorteilen, da man keine Rücksicht auf Lasten, Probleme und Misserfolge der Vergangenheit nehmen musste. Allerdings birgt diese Chance auch Risiken. Da nicht auf bestehende Erfahrungen und ein festes Fundament zurückgegriffen werden konnte, musste ein ständiger Abgleich zwischen der gewünschten und der im Markt tatsächlich realisierbaren Ausrich60

Abbildung 2 Architekten mit ihren unüberschaubaren Arbeitsmaterialien

왖

Definition

Abbildung 3 Schematische Arbeitsprozesse von Architekten 왗

Workshop In einem Workshop mit den Stylepark-Gründern näherte man sich gemeinsam der künftigen Marke Stylepark und verlieh ihr mit Hilfe verschiedener Methoden Kontur. Aufseiten von MetaDesign waren der Projektleiter, zwei Marken-Consultants und eine Design-Direktorin beteiligt. Der Projektleiter übernahm die Organisation und Moderation des Workshops und unterstützte die Berater und DesignDirektorin in der Vorbereitung. Die gründliche Vorbereitung von Marken-Workshops ist für MetaDesign der wesentliche Schritt zur erfolgreichen Markenentwicklung. Jeder methodische Teilschritt wird im Vorfeld mit einer deutlichen Zielsetzung verbunden und die Form des Ergebnisses klar definiert. Dabei stellte MetaDesign sich selbst Fragen an die passende Methodik: Soll ein Moodboard erstellt werden? Sollen Markenszenarien oder -typologien entstehen? Soll eine Kriterienliste entwickelt und mit Prioritäten versehen werden? Soll eine Sammlung von Ideen entstehen, die später geclustert und sortiert wird? Die Reihenfolge der methodischen Schritte musste

unter dramaturgisch sinnvollen Aspekten aufgebaut werden. Zur Vorbereitung gehörte daher auch eine intensive Recherche und Sammlung von Bildmaterial sowie von anschaulichen Beispielen, die dem Kunden die Methode verdeutlichen sollte. MetaDesign entschied, die Methode des Szenario-Building einzusetzen. Markenszenarien helfen, die Komplexität, Vielfalt und Einzigartigkeit einer Marke als Ganzes auf den Punkt zu bringen. Über Bilder und Bildwelten wurden Visualität, Look & Feel und Stil der Marke herausgearbeitet. Sie halfen, die Marke in einen relevanten Kontext zu stellen und individuelle Sichtweisen auf die Marke zu erschließen.

Making of Stylepark

61

Abbildung 4 Strategie-Workshop mit dem Kunden Stylepark 왖

왖 Abbildung 5 Projektplanung als Ergebnis des Kick-off-Workshops

Das entstandene Marken-Szenario wurde unter dem Leitmotiv »Die Inszenierung des Ich« entworfen. Hieraus wurden zentrale Aussagen über den Kern der Marke abgeleitet: »Stylepark ist ein Ort,… – der mir eine Projektionsfläche liefert, – wo ich Gleichgesinnte treffe, – an dem ich mich immer wieder neu entdecke, – der durch meine Kreativität unverwechselbar wird.« (Auszug aus dem Ergebnisprotokoll)

62

Definition

Die Ergebnisse des Szenario-Buildings ließen sich auf einem höheren Abstraktionsgrad auf die Markenwerte »Orientierung« – »Konsequenz« – »Klasse« reduzieren. Die von Stylepark getroffene Bildauswahl ließ Rückschlüsse auf die Farb- und Erlebniswelten zu, die die Gründer im Kopf hatten und ergaben so erste Ansätze für die Ausprägungen des Corporate Design. Diese Ausprägungen sollten sich später in der Farb- und Formenwelt sowie in der Typografie und Bildsprache wiederfinden.

Conclusion Die Ergebnisse aus den verschiedenen Analyseund Definitionsschritten wurden in einer »Unique Idea Proposition« verdichtet, die dann als Grundlage der Ideenentwicklung diente. »Unsere Zielgruppen begreifen ihre Arbeit eher als kreativen Gesamtprozess, nicht als eine Aneinanderreihung verschiedener »Pflichtund Küraufgaben«. Wenn sie einem speziellen Problem gegenüberstehen, verlassen sie sich auf ihre Erfahrungen und Intuition, um zu originellen Lösungen zu kommen. Dann arbeiten sie häufig auch mit Assoziationen aus anderen Branchen oder suchen mühevoll in verschiedenen Off- und Online-Quellen«, erklärt Tom Hynek (Consultant Strategic Research).

»Für Stylepark erfordert diese Prämisse eine Auflösung der klassischen Trennung von Form, Content, Community, Connectivity und Commerce. Es gilt, all diese Aspekte in eine transparente Informationsarchitektur zu integrieren, die den User mit seinen Bedürfnissen dort abholt, wo er Hilfe braucht. Er wird in seiner Kreativität prozessual unterstützt und gefördert. Bei Stylepark.com wird Commerce zwischen Herstellern, Händlern und Zielgruppen immer nur gestützt, nie durch Kaufprozesse vollzogen. Dieser Prozess soll in einer stark visuell betonten Umgebung stattfinden, die die Nutzer anregt und an ihre Profession appelliert. Der nächste Schritt ist, Stylepark als Matchmaker, Supporter und Kreativitätspool weiter zu festigen, in dem man eine hochspezialisierte Community rund um Stylepark etabliert – die den kreativen Austausch und den Fluss von Ideen mobilisiert«, fasst Susan Buric (Media Strategy and Concepts) die Unique Idea Proposition zusammen. Was auf diese Conclusion folgt, erfahren Sie auf Seite 102.

Making of Stylepark

63

Kreation

66 MainIdea 71 Metaphern als Leitmotiv

84 Thematische Einstimmung

73 Look & Feel

89 Kreativitätstechniken

75 Content-Inszenierung 79 Navigation

64

84 Ideenentwicklung

Kreation

96 Präsentationsformen 97 Inhaltlicher Aufbau 100 Formale Umsetzung

102 Making of Stylepark 103 Kreativer Prozess 103 Zwischenpräsentation 104 MainIdea

Kreation

65

MainIdea Wie eine Website Profil gewinnt Kreative Konzepte sind nicht nur eine Frage der SiteGestaltung, sondern vor allem der Idee, die dem Konzept zu Grunde liegt. Was in klassischen Kommunikationsmedien als Voraussetzung für den Erfolg gilt, wird bei der Konzeption von Websites häufig vernachlässigt. Inwiefern James Bond dabei ein Vorbild sein kann, erfahren Sie hier.

Das Projekt ist beauftragt – die strategischen Ziele sind abgeklopft. Das Team geht bereits mit Ideen schwanger und sitzt in den Startlöchern. In der Kreationsphase geht es vor allem darum, sämtliche Ansätze, Ideen und Stimmungen zu bündeln. Wichtigstes Ergebnis dieses Prozesses sollte eine zentrale Idee sein, die fortan als Leitmotiv der Website eingesetzt werden kann. Bei unserer Arbeit hat sich hierzu der Begriff MainIdea etabliert, da er im Wesentlichen den zentralen Anspruch formuliert, nicht nur eine von beliebig vielen Ideen umzusetzen, sondern eine zentrale Idee, aus der sich alle weiteren Anforderungen an die Site ableiten lassen. Vergleicht man den kreativen Entstehungsprozess von Websites mit dem klassischer Medien, so wird ziemlich schnell deutlich, dass auch Fernsehformaten, Spielfilmen, Werbekampagnen oder Zeitschriften jeweils eine zentrale Idee zu Grunde liegt, aus der sich die Inhalte, die Handlung, das Erscheinungsbild oder auch das redaktionelle Konzept ableiten lassen. Nehmen wir als Beispiel den Filmklassiker »James Bond«, so lässt sich das Filmkonzept auf die MainIdea »Smarter Gentleman 66

Kreation

unterwegs im Dienste Ihrer Majestät« konzentrieren. Unabhängig davon, um welche Episode es sich handelt, werden die Protagonisten, der Handlungsverlauf und das Setting übereinstimmend von dieser zentralen Idee bestimmt. Ein Beispiel aus dem Printbereich ist das amerikanische Magazin »Interview«. Es folgt der Maxime Andy Warhols, derzufolge jeder für 15 Minuten seines Lebens ein Star sein sollte. Dieses Postulat wird zum zentralen Leitmotiv des Redaktionskonzepts: Das große Format, die Konzentration auf Stars, die Textform (Interview) und die Bildsprache unterstreichen diese Idee und ergeben somit ein scharfes Profil. Hierzu ließe sich einwenden, dass WebKonzepter schließlich keine Filmregisseure oder Chefredakteure sind. Schließlich möchte der Kunde doch einfach nur sein Unternehmen im Netz präsentieren; wozu braucht eine Website also eine MainIdea? Vordergründig mag es vielleicht ein bisschen überambitioniert erscheinen, zu Beginn eines Konzepts so viel Zeit und Manpower in die Ausarbeitung einer MainIdea zu investieren. Zumal nicht jede Website auf emotionalisie-

rende Erlebniswelten, sondern auf Service oder Informationsvielfalt abzielt. In der konzeptionellen Ausarbeitung und grafischen Umsetzung zeigt sich jedoch, dass viele Entscheidungen im schlechtesten Falle ziemlich beliebig ausfallen, sofern es kein konzeptionelles Leitmotiv gibt, das Struktur, Design, Inhalte und Navigation zusammenhält. Im ungünstigsten Fall führt das Fehlen einer zentralen Idee – genauso wie ein Konglomerat verschiedener konkurrierender Ideen – dazu, dass eine Website beliebig, inhomogen und dadurch austauschbar wirkt. Hinzu kommt auch, dass die strategischen Ziele, die man zuvor gemeinsam mit dem Kunden erarbeitet hat, ohne MainIdea ins Leere laufen, da eine profillose und damit austauschbare Website nicht die gewünschte Zielgruppe erreicht oder das einzigartige Nutzenversprechen des Anbieters nur unscharf kommuniziert. Die MainIdea begünstigt also sowohl die Innen- als auch die Außenwirkung einer Website: Innerhalb des Projektteams definiert die MainIdea das konzeptionelle Leitmotiv. Das bedeutet, dass alle funktionellen, grafischen und inhaltlichen Fragestellungen, die in der Ausarbeitung des Site-Konzepts auftauchen, daraus abgeleitet oder anhand dessen hinterfragt werden können. Für den Nutzer der Website ist die MainIdea im Idealfall latent bis in die Umsetzung eines Mail-Formulars erkennbar. Für die Website eines Finanzdienstleisters wären zwei beispielhafte MainIdeas denkbar: Die Website präsentiert sich als individueller und sympathischer Berater, der die Nutzer von allen bürokratischen und fachlichen Fragen soweit wie möglich entlastet. Ein alternativer Ansatz wäre eine Website, die als schnittiger Informations-Wizard daherkommt. Das zen-

trale Motiv dieser Site wäre der Anspruch »Ganz egal, welches Anliegen du hast, ich finde schnell und treffsicher den richtigen Fonds, die notwendige Insider-Information ...« Der einfühlsame Berater tritt mit seinen Dialogpartnern sicherlich anders in Kontakt als ein schneidiger Informations-Wizard. Ersterer würde das Formular so eindeutig und komfortabel aufbereiten, dass keine Fragen offen bleiben. Dort, wo Eingaben automatisch generiert werden können, sind die Einträge bereits vorhanden. Wenn es um Bestätigungsoptionen geht, wird hier wohl eher zu oft als zu wenig gefragt. Der Nutzer, der es mit dem Wizard aufnehmen will, braucht schon ein höheres Maß an Entscheidungsfreudigkeit und Aktionismus. Das Formular wird hier eher nach dem Trail-and-Error-Verfahren benutzt werden, dafür geht es dann mit der Bearbeitung oder Generierung von Ergebnissen umso schneller.

MainIdea ist nicht gleich USP! Häufig wird in der Argumentation und Präsentation von Konzepten die MainIdea mit dem USP gleichgesetzt. Der USP definiert das Kommunikationsziel, die MainIdea bestimmt die Kommunikationsform. Heißt es von einem Autohersteller beispielsweise, dass er besonders umweltfreundliche Fahrzeuge produziert, so ist dieses einzigartige Merkmal an sich noch keine »MainIdea«. Vielmehr sollte im Konzept auf Grundlage des USP eine Idee entwickelt werden, die diese Einzigartigkeit auf der Website erlebbar macht, z.B., indem die Website verschiedene Services rund um das Thema Umwelt und Emission anbietet.

MainIdea

67

Abbildung 1 www.turbonium.com inszeniert die Entdeckung eines neuen »chemischen« Elementes. 왖

Abbildung 2 Produktdarstellung auf www.turbonium.com 왖

Das vorangegangene Beispiel soll verdeutlichen, dass die MainIdea als konzeptionelles Leitmotiv die Ausprägung der Site maßgeblich bestimmt. Durch eine stete Rückkoppelung können beliebige Entscheidungen und inkonsistente Umsetzungen frühzeitig erkannt werden. Dies erleichtert nicht nur die Konzeption, sondern wirkt sich auch positiv auf die Nutzerresonanz aus, da die Website in ihrer grafischen, inhaltlichen und funktionalen Ausprägung einheitlich wahrgenommen wird – als charakteristisches Profil, das die Website einzigartig, identitätsfördernd und besuchenswert macht. Schaut man sich prämierte oder auch beliebte Websites an, lässt sich meistens ein konsequentes und charakteristisches Profil erkennen. Sei es durch ein homogenes Zu-

68

Kreation

sammenspiel von Gestaltung und Tonalität, welches eine klare Botschaft transportiert, oder aber durch einzigartige Funktionen und Online-Services, die den Anbieter der Site unverwechselbar machen. Die Produkt-Site des internationalen VWFahrzeuges »Turbonium« inszeniert als MainIdea die Entdeckung eines neuen chemischen Elementes. Der User wird dabei zum exklusiven Erkunder dieser vermeintlich wissenschaftlichen Innovation. Zentrales Navigationselement der Site ist das elementare Periodensystem. Die Produktinformationen zum Wagen entsprechen den spezifischen Eigenschaften des Elements. Design und Tonalität unterstützen den Eindruck eines aufgeräumten, unterkühlten Chemielabors.

왖 Abbildung 3 Aus einer guten MainIdea lassen sich auch Ideen für das begleitende Merchandising ableiten, wie in diesem Falle das produktspezifische »Lehrmaterial« auf www.turbonium.com.

Dass MainIdeas nicht ausschließlich für werbliche Websites anwendbar sind, zeigt sich beim E-Commerce-Anbieter Amazon. Hier wird in konsequenter Form die Idee verfolgt, vom globalen Buchanbieter zum persönlichen Leseberater zu avancieren. Alle Empfehlungs-, Personalisierungs- und Vergleichsoptionen sind darauf ausgerichtet, die Bedürfnisse einzelner Kunden mit jedem Besuch auf der Website zu verdichten, um für ihn das optimale persönliche Angebot zu generieren. Die übliche Hauptnavigation in Form von Produktgruppen tritt bei mehrmaligem Besuch der Site sowohl optisch als auch funktional in den Hintergrund. Amazon-Kunden navigieren bevorzugt über persönliche Empfehlungen vom Anbieter oder von ähnlich Interessierten. Dieses Konzept ist

왖 Abbildung 4 Persönliche Empfehlungen auf www.amazon.de

eine gelungene Adaption menschlicher Handlungsmotive im täglichen Leben: Mehr als die überzeugende Produktpräsentation prägen Empfehlungen und Vergleiche die Kaufentscheidung, insbesondere dann, wenn die Produktkriterien rein subjektiv sind wie bei Büchern, Musik oder Spielen. Die Idee, persönliche Vorlieben anhand von Produktvergleichen zu beschreiben, schien zeitweilig auch die Macher von Printmedien zu überzeugen. Im Zuge des Relaunches des Lifestyle-Magazins »Max« wurden die Rezensionen von Büchern und Kinofilmen stets von Vergleichen zu ähnlichen Produkten begleitet (»Dieser Film könnte Ihnen gefallen, wenn Sie »Scream« gruselig fanden«).

MainIdea

69

Abbildung 5 Bei Amazon prägen Empfehlungen und Vergleiche die Kaufentscheidung. 왖

Abbildung 6 왘 www.barmer.de empfängt die Kernzielgruppen in verschiedenen Lebenswelten.

Wie auch Finanzdienstleister ein unverwechselbares Online-Profil gewinnen, zeigt die Website der Barmer Ersatzkasse. Hier beruht das Konzept im Wesentlichen auf der Idee, die Versicherten in individuellen Lebenswelten zu empfangen. Jugendliche können auf die E-Lok springen, Studenten können sich in einer virtuellen Wohngemeinschaft Anregungen und Ratschläge abholen, und Stressgeplagte finden

70

Kreation

im Magazin »Körper und Seele« Impulse für die Rekreation. Allen gemeinsam steht die Sympathiefigur Miss Barmer mit aktuellen Gesundheitstipps zur Seite. Jede der Welten trägt eine Metapher wie die Wohngemeinschaft der Studenten, die sich in der Site-Struktur, im Design, in der Tonalität und in den Inhalten selbst wiederfindet, ohne dass dabei die platte 1:1Abbildung eines Wohnraums bemüht wird.

Abbildung 7 Die Wohngemeinschaft auf www.barmer.de 왗

Metaphern als Leitmotiv Die Einführung von Metaphern als bildhafte Umschreibungen der MainIdea kann sich – wie die vorangegangenen Beispiele zeigen – sehr förderlich auf die kreative Umsetzung auswirken. Da Metaphern meist sehr anschaulich wirken, kann jeder im Projektteam damit etwas angefangen: vom Designer, dem diese Metapher Ideen für die grafische Umsetzung liefert, bis hin zum Kunden, für den die MainIdea durch die Metapher verständlich wird. Wenn man Metaphern wie »Schmuckschatulle«, »virtuelles Wohnzimmer« oder auch »Zen-Garten« als MainIdea einsetzt, sollte man jedoch beachten, dass eine platte Umsetzung dieser Metaphern in Form von virtuellen Kaufhaustürmen oder Spielplätzen nicht nur sehr plump wirkt, sondern sich für die Konzeption der Site auch nicht als förderlich erweist. Ziel der MainIdea ist es, ein Leitmotiv

für einen kreativen Konzeptansatz zu entwickeln, aus dem sich später die Strukturierung der Inhalte, die Navigationsform und das Erscheinungsbild ableiten lassen. Dieser Anspruch funktioniert meistens nicht, wenn der Ansatz auf einer plumpen Adaption von Szenarios aus dem echten Leben beruht. In der Umsetzung und als gelaunchte Website wird dadurch schlimmstenfalls genau das Gegenteil erzeugt: Die Nutzer fühlen sich davon abgeschreckt, müssen unter Umständen lange Ladezeiten in Kauf nehmen und finden keine Mehrwerte. Glücklicherweise haben das die meisten Anbieter kommerzieller Websites mittlerweile erkannt, so dass beispielsweise Homepages, die den User mit einem ladeintensiven 3-D-Szenario empfangen oder Grundrisse als Navigationselement beinhalten, eher selten anzutreffen sind.

MainIdea

71

Metaphern sollten eher dazu verwendet werden, einen Gesamteindruck zu beschreiben, den die Site vermitteln soll. Wichtiger als die visuelle Abbildung dieser Metapher ist eine mediengerechte Übertragung der Eigenschaften, die mit dieser Metapher verbunden werden. Eine Informationsplattform, die der Metapher eines Nachrichtenstudios nachempfunden wurde, muss also nicht zwangsläufig das Aussehen der »Tagesschau« haben. Wichtiger ist es, sich zu überlegen, welche Attribute man mit Nachrichtenstudio verbindet und diese durch verschiedene Funktionen oder Inhalte zum Ausdruck zu bringen. Für die Website eines internationalen Pharmaunternehmens, dessen Kernkompetenz im Bereich Diagnostik und Molekularbiologie liegt, entwickelten wir als MainIdea eine Labor-Metapher. Auf der fertigen Website ist diese Metapher nicht in Form von Reagenzgläsern oder Mikroskopen sichtbar, dennoch waren die Eigenschaften eines Labors Vorbild für die Ausarbeitung von Konzept und Design:

Ausarbeitung der MainIdea In der Praxis findet während der Ausarbeitung der MainIdea ein reger Austausch innerhalb des Teams statt. Die Designer entwickeln erste Anmutungen, während der Konzepter sich schon mögliche Navigationsformen überlegt. Zwischendurch wird ein Programmierer zu Rate gezogen, der wiederum mit einer inspirierenden Referenz-Site aufwarten kann. Insgesamt wird diese Phase von allen Beteiligten als motivierend und inspirierend empfunden. Projektmanager sollten deshalb für diese Phase ausreichend Zeit und Budget kalkulieren. Die Investition zahlt sich meist später bei der Umsetzung der Site aus. 72

Kreation

Ein Labor kennzeichnet sich durch ein spezifisches Klima wie Kühle, Stille und Strenge aus. Jeder Arbeitsschritt in einem Labor ist einem festen Bereich zugeordnet. Die Arbeit in einem Labor ist zielgerichtet, aber durchläuft dabei verschiedene Phasen, die aus einem unklaren oder unscharfen Zustand ein klares Ergebnis herauskristallisieren. Aus diesen charakteristischen Eigenschaften des realen Labors konnten wir die wesentlichen Komponenten für unser kreatives Konzept erarbeiten: Das Grunderscheinungsbild der Website ist durch einen hellen und kühlen Look geprägt. Die Navigation durch die Inhalte der Site erfolgt nach festen Regeln, die den Nutzer sinnvoll durch die Inhalte führen. Einzelne Funktionsschritte bei verschiedenen Transaktions- oder Kommunikationsvorgängen wie Anmeldungen oder Bestellungen sind kaskadisch aufgebaut und für den User nachvollziehbar dokumentiert. Für die Aufbereitung der Inhalte adaptierten wir den Indikationsvorgang in einem Labor: Durch die mehrmalige Filterung von Substanzen nähert man sich dem Ergebnis Schritt für Schritt. Neben einer gängigen Aufbereitung der Inhalte nach Produktgruppen führten wir als zusätzliche Darstellungsform der Inhalte Themenfilter ein, mit deren Hilfe man sich verschiedene Inhaltsgruppen bis hin zu detaillierten Produktbeschreibungen zu ausgewählten Krankheitsbildern oder Forschungsgebieten erschließen kann. Die Labor-Metapher als MainIdea bildete also in diesem Falle die Grundlage für Erscheinungsbild, Navigationsform und die Inszenierung der Inhalte. Diese drei Komponenten prägen in ihrer wechselseitigen Wirkung den kreativen Ansatz und bilden das Fundament eines Konzepts. Wir nennen sie Look & Feel, Content-Inszenierung und Navigation.

Abbildung 8 왘 Das Look & Feel von www.bolt.com wirkt durch den dichten Einsatz interaktiver Elemente animierend und fordernd.

Look & Feel Mit dem Aufruf einer Website werden erste Impulse zur Grundstimmung der Anwendung gesetzt. Obwohl das Look & Feel meist nur diffus wahrgenommen wird und nicht konkret benannt werden kann, hat es doch entscheidenden Einfluss darauf, ob Nutzer sich gelangweilt oder angeregt fühlen, ob sie sich auf der Site zurechtfinden oder überfordert fühlen. Und letztendlich beeinflusst das Look & Feel den zentralen Entscheidungsmoment zwischen »entnervt abwenden« oder »regelmäßig besuchen«. Je nachdem welche Wirkung mit der Site erzielt werden soll, kann das Look & Feel verschiedene Ausprägungen haben: Es kann so aufgeräumt sein, dass es erholsam anmutet oder so verdichtet, dass es die Neugier weckt. Abhängig davon, wie sich der Anbieter darstellt oder wie die Marke besetzt wird, kann eine Website aggressiv oder eher freundlich wirken.

Wirkungen durch das Look & Feel Die amerikanische Community-Site bolt.com verbreitet auf den ersten Blick ein sehr aggressives Look & Feel, was viele Nutzer zunächst abschrecken mag. Dennoch transportiert das Erscheinungsbild eindeutig die MainIdea der Site, für die der Name Programm ist. Da das Angebot zum großen Teil auf User-generierten Inhalten aufbaut, steht und fällt die Site mit dem Einsatz und der Qualität der User-Beiträge. »bolt« bedeutet so viel wie »Bolzen« und spricht damit eine Zielgruppe von netzaffinen, selbstbewussten Mädchen an, die sich gerne mitteilen und die angebotenen Kommunikationsformen rege nutzen. Die hohe Dichte an Content-Elementen und der vermehrte Einsatz von interaktiven Elementen wie Pull-downs, Texteingabefelder und Personalisierungs-Tools haben einen hohen Animationscharakter und bringen ohne erklärende Worte die Forderung »Bolz los, Mädel« zum Ausdruck.

MainIdea

73

왖

Abbildung 9 Auf der Website des Papierherstellers Gmund (www.gmund.com) prägen Schichten und Überlagerungen das Look & Feel.

왖

Ein Kontrastprogramm hierzu stellt die Website des Büttenpapierherstellers Gmund dar. Die Funktionselemente treten hier zugunsten der Inhalte zurück, das Design ist hier schlichter Rahmen für die eigentlichen »Exponate«, die verschiedenen Papierdesigns. Der SiteAufbau und die Screen-Inhalte veranschaulichen die Idee, die haptischen Aspekte der Papierproduktion in ein virtuelles Medium zu transferieren. Die spezifische Eigenschaft der Papierproduktion, das Schichten in verschiedenen Lagen, wird hier zum zentralen Gestaltungselement.

Obwohl natürlich der erste Eindruck einer Site maßgeblich vom Design geprägt ist, kann die Konzeption durch Angaben zur Tonalität und die Auswahl von Content-Elementen das Look & Feel einer Website mitgestalten. Die Entwicklung entsteht im Idealfall durch einen permanenten Austausch direkt am Screen. Der Designer benötigt einerseits Angaben zur Tonalität, um Farben und Formen darauf abstimmen zu können. Für den Konzepter wiederum ist ein wiederholter Blick auf die Designskizzen sehr anregend, da er im Geiste schon einzelne Designelemente mit Inhalten und Funktionen belegen kann.

Zentrale Fragestellungen zum Look & Feel 1. Was ist die zentrale Idee der Website? 2. Welchen Gesamteindruck möchten wir vermitteln? 3. Wer soll dadurch angesprochen werden? 4. Welche Einzelkomponenten wie Text, Farbe, Form, Sound können diesen Gesamteindruck unterstützen? 74

Kreation

Abbildung 10 Die Firmengeschichte auf www.gmund.com; Das Schichtenprinzip zieht sich durch alle Inhaltsbereiche der Website.

왖 Abbildung 11 Ein Inhalt – drei Inhaltsebenen: kaskadische Inhaltsdarstellung auf www.rtl-world.de

Content-Inszenierung Selbst die attraktivsten Inhalte einer Website geraten mit einem Klick in Vergessenheit, wenn sie nicht angemessen inszeniert werden. Mit Inszenierung ist dabei nicht zwangsläufig eine künstlich aufgeladene Animation der Inhalte gemeint; die Betonung liegt vielmehr auf dem Aspekt der Angemessenheit. Angemessen ist das, was die Inhalte hergeben und was das Online-Medium ermöglicht. Abhängig von Aufgabenstellung, Inhalten und Zielgruppe können Inhalte nonhierarchisch, spielerisch-animiert, kaskadisch oder linear aufgebaut werden. Auf den meisten Websites

findet man eine kaskadische oder lineare Darstellung der Inhalte, basierend auf einer gängigen Themenstruktur, die nach Produktgruppen oder Inhaltsbereichen oder Geschäftsfeldern geordnet ist. Hinzu kommt, dass sich diese Form unter Aspekten der Usability bereits als Standard etabliert hat. Die kaskadische Inhaltsdarstellung verfolgt eine Staffelung der Inhaltstiefe – vom Teaser über einen Informationsüberblick bis ins Detail. Viele Informationsplattformen wie Focus-Online oder RTLWorld, aber auch E-Commerce-Anbieter nutzen diese kaskadische Form (Abbildung 11).

MainIdea

75

Abbildung 12 Website der ersten Phase der »Siemens Knows«-Kampagne (www.siemens-knows.de): Die interaktiven Flash-Movies sind linear auf einander aufgebaut. 왗

Beispielhafte Darstellungsformen Eine lineare Aufbereitung wird zunehmend für Inhalte eingesetzt, die ein didaktisches Ziel verfolgen oder eher Anleitungscharakter haben. Registrierungsvorgänge, Bestellformulare oder auch Arbeitsprozesse im Intranet und Extranet bieten sich für diesen Aufbau an. Neben didaktischen Inhalten macht ein linearer Aufbau auch dann Sinn, wenn man Inhalte tatsächlich spannungsreich aufbauen möchte, z.B. in Form eines Flash-Movies oder bei spielerisch anmutenden Inhalten, wo erst auf eine Aktion des Users hin ein bestimmter Inhalt generiert wird. Für die Online-Kampagne »Siemens Knows« beispielsweise wurden verschiedene interaktive Alltagsszenarien entwickelt, die als FlashMovies in die Site integriert wurden. Jedes dieser Szenarien zeigte eine Situation, die User aus dem täglichen Leben kennen wie z.B. das morgendliche Duschen oder die Autofahrt zur Arbeit. Ziel dieser Szenarien war einerseits, dem User auf spielerische Weise innovative Lösungen von Siemens nahezubringen, ande-

76

Kreation

rerseits wurde der User dazu aufgefordert, seine eigene Vision von einem idealisierten Leben in der Zukunft zu entwickeln. Da diese zentralen Inhalte und Visionen auch dramaturgisch in das Szenario integriert werden mussten, bot sich hier ein linearer Aufbau an. In diesem Fall bedeutete das, dass der User erst einmal bestimmte Aktionen innerhalb eines Szenarios – wie das Einschalten der Dusche oder das Starten des Autos – ausführen musste, bevor ihm die relevanten Inhalte präsentiert wurden. Vergleichbar spielerisch präsentiert Cartier seine Produkte. Auf der Website, die sich als virtuelle Schmuckschatulle präsentiert, wird jedes Schmuckstück in Form eines selbstlaufenden Animationsfilms gezeigt. Dadurch erzählt jedes Produkt seine eigene kleine Geschichte, die über die reine Form von Produktinformation hinausgeht, da sie – dem Markenwert angemessen – eine emotionale Sichtweise auf das Produkt fördert.

왖 Abbildung 13 Präsentation der Schmuckstücke auf www.cartier.com

왖

Auch mit weniger Aufwand lassen sich Inhalte, die mehr als eine sachliche Produktinformation darstellen, interessant aufbereiten. Die Produktinformationen zum Turbonium-Auto werden auf der Website in Form von interaktiven Features umgesetzt. Diese ermöglichen z.B., verschiedene Farbkombinationen von Außenund Innenausstattung miteinander zu vergleichen. Dies ist nur ein kleines Beispiel, welches zeigt, dass Inhalte – angemessen inszeniert – auch mit wenig Aufwand einen Mehrwert für den User darstellen können. Hätte man diese Produktinformation in einer statischen TextBild-Darstellung aufbereitet, wäre die Möglichkeit der Farbkombination weggefallen. Ein Aspekt, der sicherlich bemerkenswert ist und der die Nutzer veranlasst, sich länger mit dem Produkt zu beschäftigen. Eine sehr komplexe – und für den Finanzbereich sehr ungewöhnliche – Content-Inszenierung findet man auf der Website des Finanzdienstleisters »Smartmoney« (Abbildung 15). Mit einer Reihe von selbstentwickelten Tools werden alle relevanten Börseninformationen

so miteinander verknüpft, dass sie einen einzigartigen inhaltlichen Mehrwert für die Marktbeobachtung und Depotverwaltung darstellen. Allein die »MarketMap« vereint in einem Tool Informationen, die man auf vergleichbaren Websites in mindestens fünf Schritten vereinzelt abfragen müsste. Die MarketMap zeigt alle relevanten Entwicklungen des Aktienmarktes auf einen Blick: In ihrer Gesamtheit bildet die Karte einen Index wie z.B. den Dow Jones ab, wobei jedes Feld für einen Aktienwert des Indexes steht. Die Farbe der einzelnen Felder kennzeichnet die Kursentwicklung (von tiefrot bis hellgrün), die Größe stellt das Aktienvolumen relational zum Gesamtmarkt dar. Per Rollover können die wichtigsten Informationen zum ausgewählten Kurswert angezeigt werden. Die Felder gruppieren sich zu Branchengruppen, wodurch ein Vergleich einzelner Werte unter Berücksichtigung der Branche ermöglicht wird. Durch die Farbkennung und die Größenverhältnisse der Felder wird mit einem Blick die Entwicklung des Gesamtmarktes erkenntlich. Gleiches gilt für einzelne Branchen und Werte:

Abbildung 14 Auf www.turbonium.com kann man Innen- und Außenausstattung des Fahrzeuges interaktiv kombinieren.

MainIdea

77

Abbildung 15 Die MarketMap auf www.smartmoney.com zeigt alle relevanten Entwicklungen eines Markt-Indizes im Überblick. 왗

Ein rotes Feld innerhalb eines tendenziell grünen Branchenumfelds verdeutlicht ziemlich schnell, dass dieser Wert beobachtenswert bleibt oder Informationsrecherche erfordert. Trotz möglicher Begeisterung über dieses Feature sollte jedoch erwähnt werden, dass natürlich nicht jedes Projekt-Budget und nicht jeder Zeitraum die Entwicklung solch aufwändiger Tools möglich macht. Wir möchten vielmehr damit zeigen, dass es sich im Hinblick auf inhaltliche Mehrwerte lohnt, sich intensiver mit den umzusetzenden Inhalten auseinander zu setzen und nach Lösungen jenseits der statischen Text-Bild-Darstellungen zu suchen.

Zentrale Fragestellungen zur ContentInszenierung 1. Was ist die zentrale Idee der Website? 2. Welche Inhalte sollen dargestellt werden? 3. Was zeichnet diese Inhalte aus? 4. Wie kann ich den Nutzern eine neue Sichtweise auf diese Inhalte eröffnen? 5. Welche Mehrwerte lassen sich aus den Inhalten ableiten, die nur im Netz möglich sind? 78

Kreation

Ziel sollte dabei sein, den Besuch der Website zu einem einzigartigen und lohnenswerten Nutzererlebnis zu gestalten. Kreativitätsforscher Mihaly Csikszentmihalyi beschreibt dieses Erlebnis als »Flow«, einen Zustand von hoher emotionaler Intensität, in dem sich der Mensch zweckfrei einer bestimmten Tätigkeit oder einem Inhalt hingibt. »A Web site that promotes flow is like a gourmet meal. You start off with the appetizers, move on to the salads and entrés, and build toward dessert. Unfortunately, most sites are built like a cafeteria. You pick whatever you want. That sounds good at first, but soon it doesn’t matter what you choose to do. Everything is bland and the same.« Csikszentmihalyi in einem Interview mit der Wired, 04/1996 Dieser Anspruch ist zwar nach Internet-Zeiträumen schon steinalt, aber immer noch gültig. Nicht allein das inhaltliche Angebot selbst lockt potenzielle User auf die Websites, sondern eine angemessene Inszenierung der Inhalte.

Abbildung 16 Die dynamische Navigation der virtuellen Ausstellung »Revealing Things« ermöglicht wechselnde, kontextuelle Verknüpfungen zwischen den Ausstellungsinhalten (www.si.edu/revealingthings). 왗

Navigation Ebenso wichtig wie eine spannende und angemessene Aufbereitung der Inhalte ist die Form, die den Nutzer durch das inhaltliche Angebot führt. Die Navigation unterstützt den Gesamteindruck einer Website, indem sie deren Inhalte in erlebnis- oder nutzenorientierter Weise verknüpft und zugänglich macht. Die wichtigsten Überlegungen zur Navigationsform betreffen einerseits die Bedürfnisse potenzieller Nutzer, andererseits die angebotenen Inhalte. Um die konzeptionelle Brücke zwischen Nutzer und Inhalt aufzubauen, ist es hilfreich, sich verschiedene Szenarien zu überlegen, warum und wie der Nutzer sich durch das inhaltliche Angebot bewegen könnte. Ein Nutzer, der eine spezielle Information sucht, wird sicherlich eine andere Navigationsform bevorzugen als jemand, der ein eher diffuses Informationsbedürfnis hat und sich thematisch einfach treiben lässt. Dann gibt es Nutzer, die zwar ein spezifisches Problem oder eine kon-

krete Fragestellung haben, aber nicht genau wissen, welche Information ihnen weiterhilft und wo sie dieses Angebot auf der Website finden. Wenn man verschiedene Szenarien in solcher Form durchgespielt hat, stellt sich meist heraus, dass es nicht eine einzige optimale Navigationsform geben kann. Allein die eben skizzierten Szenarien erfordern schon drei unterschiedliche Zugangsweisen. Der Nutzer, der weiß, was er sucht, wird eher über die Suchfunktion oder einen Index navigieren. Für den experimentierfreudigen Nutzer bietet sich eine Navigationsform an, die ihm die Inhalte der Site auf interessante Weise näher bringt und die Lust aufs Weiterklicken weckt. Der bedarfsorientierte Nutzer erwartet möglicherweise Zugangswege, die sein Informationsbedürfnis auffangen und ihn direkt zu den wichtigen Inhalten führen.

MainIdea

79

Abbildung 17 Die Navigation auf www.nasa20.com: Das rote Quadrat folgt der Bewegung des Mauscursors und kann per Klick ausgeklappt werden. 왖

Jenseits der gängigen Frame-Navigationsformen, die meist hierarchisch aufgebaut sind, sollte also – je nach Anforderung – über alternative Navigationsformen nachgedacht werden. Alternative Navigationsformen Für die virtuelle Ausstellung »Revealing Things« des Smithonian Institute wurde als Testapplikation eine dynamische Navigation umgesetzt, die eine eher intuitive Benutzerführung ermöglicht. Die Navigation besteht aus einem flexiblen Gitternetzwerk, das sich je nach ausgewähltem Inhalt ständig neu formiert. Dadurch entstehen immer wieder neue thematische Zusammenhänge und inhaltliche Hierarchien. 80

Kreation

Wählt man beispielsweise ein Exponat aus, gruppieren sich um das Exponat herum kontextuelle Themenbereiche wie z.B. die dazugehörige Epoche, die Produktgruppe oder verwandte Produkte. Wählt man eines der Subthemen aus, formiert sich das Gitternetz neu mit wiederum anderen Subbereichen. Zusätzlich kann man nach konkreten Begriffen suchen oder die Netzstruktur thematisch oder chronologisch ordnen. Diese Navigationsform unterstützt den explorativen Charakter eines Ausstellungsbesuches, bei dem man sich eher von verschiedenen Eindrücken als durch ein thematisch geclustertes Ordnungssystem leiten lässt.

왖 Abbildung 18 Alternativ zur Hauptnavigation bietet Gerling einen »Quickcheck« an, der eine persönliche Link-Liste generiert (www.gerling.de).

Abbildung 19 왖 왘 Die persönliche Sammelbox auf www.net-business.de

Eine Navigation, die dem Nutzer – im wahrsten Sinne des Wortes – überall hin folgt, zeigt die Website der Internet-Agentur »n.a.s.a. 2.0«. Als Mauscursor in Form einer Vier-Pixel-Grafik kann die Navigation flexibel auf dem Screen platziert und per Klick ausgeklappt werden. Die Form der Navigation ist auf den ersten Blick nicht uneingeschränkt benutzerfreundlich, unterstützt aber in diesem Falle das geplante Nutzer-Szenario. Der Nutzer kann sich voll und ganz auf den Gesamteindruck und die Inhalte konzentrieren. Die formale Orientierungshilfe, z.B. in Form einer Navigationsleiste, besetzt dabei eher einen sekundären Aspekt.

Gerade Anbieter immaterieller Serviceleistungen wie Finanzberater oder auch Versicherer müssen potenzielle Interessenten bei ihren persönlichen Bedürfnissen abholen, um sie für ihre Produkte zu sensibilisieren. Denn sofern ein Nutzer nicht genau weiß, was er sucht, wird er möglicherweise die für ihn relevanten Inhalte nicht finden oder ansteuern. Hilfreich sind da alternative Zugangsformen wie z.B. der »Quickcheck« auf der Website der GerlingVersicherungen, der dem Nutzer nach einer kurzen Step-by-Step-Befragung eine Link-Liste zu jenen Inhalten generiert, die für seine Lebenssituation besonders interessant sind.

MainIdea

81

Abbildung 20 Fehlermeldung des Programms Inspiration 6.0 왖

Die Website der E-Business-Zeitschrift »NetBusiness« bietet mit der persönlichen Sammelbox einen alternativen Zugriff auf das Inhaltsangebot. Registrierte Mitglieder haben damit die Möglichkeit, sich eine persönliche LinkListe zusammenzustellen. Jeder Artikel der Site kann durch Klick auf ein begleitendes Icon in der Sammelbox platziert werden, die als Satellitenfenster den Auftritt flankiert. Diese Navigationsform kommt jenem Nutzerverhalten entgegen, die Nachrichten auf einer Website erst einmal oberflächlich durchzusurfen, um sich dann in einzelne Texte zu vertiefen.

Zentrale Fragestellungen zur Navigation 1. Was ist die zentrale Idee der Website? 2. Welche Sichtweise auf die Inhalte möchten wir den Nutzern eröffnen? 3. Für welche Nutzer sind diese Inhalte interessant? 82

Kreation

Allein die Vielzahl möglicher Motive und Interessen zeigt, dass verschiedene Wege zum gleichen Inhalt führen können. Umso wichtiger ist es, die Navigation stets im Einklang mit Content-Inszenierung und Look & Feel zu entwickeln. Denn durch die Synergie dieser drei Komponenten lässt sich die MainIdea der Website klar herausarbeiten, und die sollte man nie aus dem Gedächtnis verlieren.

4. Mit welchem Motiv oder Bedürfnis kommen die Nutzer auf die Website? 5. Auf welche Weise kann man den Bedürfnissen der Nutzer entgegenkommen?

Ideenentwicklung Be inspired ... Egal ob im Team oder als Einzelperson: Unter Zeitdruck fällt es vielen schwer, den kreativen Prozess einzuleiten und brauchbare Ideen zu entwickeln. Unsere Ansätze sollen Sie darin unterstützen, innerhalb eines kurzen Zeitraums Ideen zu generieren.

Wenn es um die kreative Umsetzung eines Web-Projekts geht, sind alle Projekt-beteiligten meist mit frischem Elan bei der Sache. Die Designer haben schon »State of the Art«Websites auf ihrem Browser. Der Entwickler spekuliert vielleicht darauf, endlich mal eine neue Skriptsprache anwenden zu können. Und für den Projektmanager stellt die Phase der Ideenfindung eine willkommene Abwechslung zu den sonst eher organisatorischen und administrativen Vorgängen dar. Obwohl also die Kreation einen der Höhepunkte in der täglichen Projektarbeit darstellt, geht dieser Prozess meist zäh und wenig zielgerichtet voran. Dies kann daran liegen, dass die Teammitglieder die vorhandenen Rahmenbedingungen wie Kundenanforderungen, strategische Ziele, aber auch den Zeit- und Kostenrahmen als einengend empfinden. Gerade enormer Zeitdruck wird oft als Kreativitätsblocker empfunden. Dabei kommt es gerade innerhalb eines straffen Zeitrahmens, wie bei Pitch-Situationen, darauf an, sich schnell auf eine angemessene Idee zu einigen und diese soweit auszuarbeiten, dass der potenzielle Kunde eine konkrete Vorstellung von der Anwendung gewinnt.

84

Kreation

Thematische Einstimmung Vergleichbar allen anderen kreativen Tätigkeiten wie Schreiben oder Komponieren gestaltet sich der Anfang am schwierigsten. Wir haben gute Erfahrungen damit gemacht, diese Phase durch einen eigenständigen Kick-off-Termin einzuleiten, der im Wesentlichen dazu dient, alle Projektbeteiligten thematisch auf die zu lösende Aufgabe einzustimmen. Dieser Termin kann je nach Zeit- und Kostenumfang unterschiedlich gestaltet werden. Man könnte z.B. mit Ankündigung des Termins die Teammitglieder beauftragen, Materialien zum Thema zu sammeln und diese in der Gruppe vorzustellen. Dadurch hätte jeder die Möglichkeit, aus seinem Kompetenzfeld etwas beizutragen: Der IT-Experte stellt eine neue IT-Lösung vor, die dem Projekt auch neue inhaltliche Perspektiven eröffnet, die Designer zeigen beispielhafte Websites, die sie im Hinblick auf das Look & Feel besonders gelungen finden, und der Konzepter stellt die Kundenmaterialien vor und erläutert die Websites der Mitbewerber. Diese Materialien sollten in geeigneter Form zusammengeführt und an zentraler Stelle für alle Teammitglieder zugänglich gemacht werden, so dass man später immer wieder

darauf zurückgreifen kann. Wenn das Team räumlich zusammensitzt, könnte man den Arbeitsplatz mit einem thematischen Moodboard bereichern oder auf einem zentralen Server eine Dokumentensammlung einrichten, in der alle Link-Listen, Kundenmaterialien, technischen Beschreibungen etc. abgelegt werden. Projektumgebung Sofern es die finanzielle Situation erlaubt, könnte man den Kick-off-Termin nach draußen in eine projektaffine Umgebung verlegen. Die Konzeption einer Finanz-Website könnte z.B. mit einem Besuch an der Börse eingeleitet werden, um die Vorgänge und Anforderungen des Aktienhandels kennen zu lernen. Alternativ dazu wäre in diesem Falle auch ein kleines Team-Budget denkbar, das für ein OnlineDepot genutzt werden kann. Das Projektteam wird dadurch Teil der Zielgruppe und kann die Interessen und Bedürfnisse zukünftiger Nutzer durch eigene Erfahrungen nachvollziehen. Für den Start zur Konzeption einer E-CommerceSite bietet sich ein Besuch in einer größeren

Kaufhausabteilung oder in einer Filiale des Kunden an. Man entwickelt dadurch ein konkretes Gespür für die Produkte selbst und kann das Kaufverhalten vor Ort beobachten. Auch im Hinblick auf die Online-Präsentation der Inhalte kann der Besuch eines realen Shops wertvolle Hinweise geben. Verkaufsfördernde Maßnahmen wie etwa die Platzierung von Bestsellern, die Gestaltung von ProduktEvents oder separaten Produktshow-Flächen sollten im virtuellen Shop ihre Entsprechung finden und bieten oftmals Impulse für weiterführende Ideen: Die Autorenlesung in einer Buchhandlung könnte im Netz in Form eines Chats fortgeführt werden. Die Produkteinführung einer neuen Spielkonsole könnte auf der Website des Spieleanbieters zu einer SpielCommunity ausgeweitet werden. Die individuelle Beratung eines Kosmetikanbieters könnte auf der Website durch ein personalisiertes Angebot unterstützt werden. Diese Beispiele zeigen, dass ein kleiner Ausflug in die reale Welt eine Vielfalt an Anregungen bieten kann.

Ideenentwicklung

85

Ideen-Benchmark Die wohl verbreitetste Form der thematischen Einstimmung ist das inspirierte Surfen im Netz. Im Vergleich zum gezielten Benchmark während der Strategieentwicklung, bei dem die Websites der Wettbewerber unter bestimmten Gesichtspunkten miteinander verglichen werden, kann man sich bei einem kreativen Benchmark eher intuitiv treiben lassen. Die Community-Features eines branchenfremden Portals können dabei ebenso anregend sein wie die nichtkommerzielle prämierte Site eines Designstudenten. Besonders bereichernd ist dabei, dass jedes Teammitglied nach unterschiedlichen Kriterien surft. Der Designer lässt sich eher visuell inspirieren, der Konzepter hat die inhaltliche Darstellung im Fokus und der Programmierer sucht eher nach technisch ausgefeilten Features. Damit diese Vielfalt an inspirierenden Eindrücken nicht nur reine Anregung bleibt, sondern auch tatsächlich Impulsgeber für eine zentrale Idee wird, ist es wichtig, diesen Pool an Referenz-Sites nach verschiedenen Kriterien zu ordnen. Sonst kann es leicht passieren, dass die zu planende Website eine beliebige Collage aller LieblingsFeatures wird oder die eigene Idee zu einem

86

Kreation

Plagiat der Lieblings-Website verkommt, weil man sich zu sehr auf eine Referenz konzentriert. Man sollte deshalb noch einmal für sich oder im Team reflektieren, ob die Beispiel-Site einem tatsächlich nur aus persönlichen Gründen gefällt, oder ob ein bestimmter Aspekt der Site, z.B. die Navigation, das Look & Feel oder eine besondere Funktionalität, tatsächlich Teil einer zentralen Idee sein könnten. Unabhängig davon, wie sich das Team auf die Aufgabe einstimmt, bilden sich dabei schon Ansätze zu Ideen heraus. Der nächste Schritt sollte dann sein, diese Ideen zu kanalisieren und daraus eine MainIdea herauszuarbeiten. Manchmal ist dies ein sehr anstrengender und zeitintensiver Prozess, der dann schlimmstenfalls zur Erschöpfung und Vertagung der angestrebten Lösung führen kann. Es ist deshalb hilfreich, dass der Konzepter die Diskussion moderiert und in konstruktive Bahnen lenkt, da er inhaltlich am intensivsten mit dem Projekt vertraut ist. In vielen Teams hat sich dabei der Einsatz von Kreativitätstechniken bewährt, die dem kreativen Prozess einen formalen Rahmen geben und dadurch zu effizienteren Ergebnissen führen.

Abbildung 1 Das Forum auf www.nofuckingclass.com 왗

Daniel Goddemeyer, Designer, Fork Unstable Media Nofuckingclass ist ein schwedisches OnlineMagazin für experimentelles Webdesign. Zum Launch im März 2001 wurde Fork gebeten, die erste Ausgabe von Nofuckingclass zu entwickeln. Zu diesem Zeitpunkt hatte ich mich intensiv mit Flash beschäftigt und verschiedene Ideen für neue Navigationssysteme ausprobiert. Eine davon sah ein dynamisches Interface vor, in dem sich eine Vielzahl von Informationseinheiten zu variablen architektonischen Formationen organisieren. Das Besondere an diesem Interface ist, dass es mit den »Inhaltsparzellen« wächst und sich dadurch immer neue Formationen ergeben. Diese Idee wollte ich gerne im Rahmen des Projekts verwirklichen. Inhaltlich passte ein Forum zu der »InterfaceIdee«, da diese das Forum, im Sinne eines dynamisch wachsenden Systems, visuell ideal abbildet. Das Thema für das Forum war dann schnell gefunden: Ausgelöst durch die Bran-

chenkrise und die sich darum spinnenden Gerüchte entstand die Idee, der Branche die Möglichkeit zu geben, sich öffentlich äußern zu können: eine virtuelle Pink-Slip-Party, natürlich verbunden mit einer guten Portion Galgenhumor. Der Anreiz für die Benutzer liegt darin, zum Zweck der nicht so ernst gemeinten »Self-Promotion« eine eigene Parzelle erwerben und diverse URLs posten zu können. Beim Log-in muss der User den Namen seiner Agentur angeben, unter dem dann ein Gebäude errichtet wird, das fortan von allen Usern mit wohlwollenden oder gemeinen Gerüchten bombardiert werden kann. Die Höhe des Gebäudes wächst mit der Anzahl der Postings, wobei zu viele schlechte Gerüchte eine Agentur Feuer fangen lassen. Um das Feuer zu löschen, muss die Agentur wiederum durch »Lob-Postings« gerettet werden. Die Teilnehmer werden also immer wieder angeregt, auf die Seite zurückzukehren, wodurch die Dynamik innerhalb des Forums erhalten bleibt.

Ideenentwicklung

87

Die wichtigsten Schritte bei der Ideenentwicklung 1. Abgleich der strategischen Ziele Rekapitulieren Sie noch einmal die strategischen Ziele des Projekts: Was soll mit der Site erreicht werden? Wen soll die Site ansprechen? Was ist das zentrale Nutzenversprechen der Site? Was macht den Anbieter wiedererkennbar? Was unterscheidet die Site von den Wettbewerbern? 2. Mentale Einstimmung Lassen Sie sich zur Einstimmung thematisch treiben, in welcher Form auch immer: ob Sie einfach nur inspiriert durchs Netz surfen, oder aber in einer thematisch passenden Umgebung ganz reale Eindrücke aufnehmen.

88

6. Idee überprüfen Falls sie unsicher sind, ob eine Idee tragfähig ist, können sie den Ansatz noch mal anhand der strategischen Werte überprüfen: Ist die Idee der Zielgruppe, dem Markenwert oder dem Anbieter angemessen? Würde die Idee sich positiv von den Wettbewerbern abheben? 7. Rücksprache im Team Sofern Sie als Konzepter alleine gearbeitet haben, sollten Sie die Idee gemeinsam mit dem Projektteam besprechen. Durch die Anregungen von Mitarbeitern mit unterschiedlichem Fokus werden die Ideen häufig gefestigt oder aber auch relativ schnell verworfen.

3. Ideen sammeln Versuchen Sie dann, die verschiedenen Ideen zu sammeln und zu kanalisieren. Dies können Sie in Form eines Projekt-Meetings oder mit Hilfe einer der gängigen Kreativitätstechniken durchführen.

8. Idee auf den Punkt bringen Formulieren Sie die Idee in möglichst einem Satz, wie z.B.: »Die Website als HightechLabor«, »adidas is where you are« oder »Die Website als Inhaltsbaukasten« etc. Dieser Satz braucht keine Werberqualitäten zu haben, sondern dient lediglich dazu, die Idee für alle Teammitglieder greifbar und präsent zu machen.

4. Themen clustern Sortieren Sie die Ideensammlungen zu Themenclustern, die verschiedene Ansätze darstellen können.

9. Idee ausarbeiten Überlegen Sie, wie im Sinne der MainIdea das Look & Feel, die Content-Darstellung und die Navigation aussehen könnten.

5. Ideen kategorisieren Diskutieren Sie die verschiedenen Ansätze im Team. Möglicherweise fallen einige Ideen schon durch die Projektrahmenbedingungen wie Kostenrahmen, Zeitplanung oder technischer Machbarkeit heraus.

10. Rückschluss zu den strategischen Zielen Gleichen Sie Ihre Idee nochmals mit den strategischen Zielen ab und formulieren Sie – gedanklich oder in Textform – einen kausalen Aufbau. Dies macht Sie sicherer in der Präsentation und Argumentation Ihres Ansatzes.

Kreation

Kreativitätstechniken Die wichtigste Anmerkung vorab: Kreativitätstechniken erzeugen nicht automatisch kreative Ideen. Viele Mitarbeiter aus kreativen Berufen haben zunächst unberechtigte Vorbehalte gegenüber standardisierten Techniken, da sie diese als Ausdruck ihres kreativen Unvermögens betrachten. Meist lassen sich solche Missverständnisse durch die Einsicht ausräumen, dass Kreativitätstechniken lediglich ein Hilfsmittel darstellen, den kreativen Prozess in Gang zu bringen und innerhalb eines kurzen Zeitraums viele Ideen zu generieren. Die Ideen selbst entstehen jedoch nach wie vor durch die persönliche gedankliche Leistung der einzelnen Teammitglieder. Welche Kreativitätstechnik für die Projektsituation geeignet ist, hängt von unterschiedlichen Faktoren ab. Neben den individuellen

Vorlieben und Arbeitsweisen des Teams ist auch die Aufgabenstellung maßgeblich für den Erfolgsgrad einer Technik. Es empfiehlt sich, die gängigsten Methoden in unterschiedlicher Besetzung und Ausgangssituation einmal auszuprobieren und die erfolgreichste Technik als Standardritual zu etablieren. Wir haben die Erfahrung gemacht, dass selbst Kollegen, die anfangs Vorbehalte hatten, nach mehrmaliger Anwendung mit Begeisterung bei der Sache waren, da sich ziemlich kurzfristig Erfolge einstellten. Auf dieses Thema wird in zahlreichen Büchern und Workshops viel ausführlicher eingegangen, als wir es in diesem Rahmen leisten können. Wir möchten hier – als initiale Anregung – lediglich die gängigsten Kreativitätstechniken vorstellen.

Literaturtipps zu Kreativitätstechniken 왘 Die sieben Kreativitätswerkzeuge K7. Christian Malorny, Wolfgang Schwarz, Hendrik Backerra; Carl Hauser Verlag, 1997 왘 Innovation, Kreativität und Ideenfindung. Helmut Schlicksupp; Vogel-Verlag 1999 왘 Innovationsmanagement. Kreativitätstechniken für den unternehmerischen Erfolg. James M. Higgins, Gerold G. Wiese; Springer-Verlag, 1996 왘 Kreatives Arbeiten. Methoden und Übungen zur Kreativitätssteigerung. Michael Knieß; Beck-DTV, 1995 왘 Kreativitätstechniken. Matthias Nöllke; STS Verlag, 1998

Links zu Kreativitätstechniken 왘 Creativity-Web members.ozemail.com.au/~caveman/ Creative/index2.html 왘 Creativity Unleashed Limited www.cul.co.uk/ 왘 Infinite Innovations Limited www.brainstorming.co.uk/ www.infinn.com.toolbox.html

Ideenentwicklung

89

Brainstorming Brainstorming ist die wohl beliebteste und unkomplizierteste Kreativitätstechnik. Gerade weil es jedoch nicht vieler Regeln und technischer Hilfsmittel bedarf, können Brainstormings mitunter auch angestrengt und ohne große Erfolge verlaufen. Dies liegt sicher auch am inflationären Einsatz dieser Technik. Sobald drei Agenturmitarbeiter fern von ihrem Schreibtisch an einem Kaffeetisch sitzen, wird dieses Meeting als Brainstorming deklariert. Ebenso zweifelhaft sind Brainstormings in größerer Runde, in denen projektunabhängige Kompetenzrangeleien und Zwistigkeiten ausgetragen werden, so dass am Ende nur magere Ergebnisse hervorgebracht werden. Diesem Misserfolg kann man entgegenwirken, wenn man ein paar wenige, aber dennoch wichtige Grundregeln einhält. Grundsätzlich kann die Brainstorming-Technik gut zu Beginn der Kreationsphase eingesetzt werden, wenn es darum geht, möglichst viele Ideen zu sammeln, um daran weiterarbeiten zu können. Quantität steht hier vor Qualität. Das bedeutet, dass Brainstorming sich eher für allgemeine Fragestellungen wie z.B. »Mit welchen Online-Maßnahmen können wir eine jüngere Zielgruppen erschließen?« oder »Welche Attribute assoziiert ihr mit einem Discount-Broker?« eignet. Komplexere Fragestellungen, bei denen von vornherein vielfältige Aspekte zu berücksichtigen sind, eignen sich weniger für ein Brainstorming. Idealerweise sollte eine Brainstorming-Sitzung in einem vorab definierten Zeitrahmen erfolgen. Erfahrungsgemäß sollte man ca. 30 Minuten für den Brainstorm und ca. 45 Minuten für die anschließende Bewertung einkalkulieren. Voraussetzung für eine erfolgversprechende Durchführung ist ein Moderator, der 90

Kreation

die Wortbeiträge koordiniert und dokumentiert. Ausgehend von einer zentralen Fragestellung ist nun jeder in der Runde dazu aufgefordert, spontan Ideen und Vorschläge zu äußern. Die Spontaneität steht dabei im Vordergrund, Einwände oder Kritik der Teilnehmer sind während des Brainstormings untersagt. Das Aufgreifen und Weiterentwickeln anderer Wortbeiträge ist hingegen gewünscht und fördert den Ideenfluss. Nach der Phase der Ideensammlung sollten die Ideen gemeinsam rekapituliert und bewertet werden. Meist lassen sich einzelne Ideen zu thematischen Gruppen zusammenführen, an denen dann weitergearbeitet werden kann. Andere Ideen wiederum fallen bei genauerer Betrachtung und Überprüfung aufgrund schwieriger Machbarkeiten aus dem Ideenpool heraus. Wie Sie wahrscheinlich aus eigener Erfahrung wissen, ist die Brainstorming-Technik allein kein Garant für erfolgversprechenden kreativen Output. Der Erfolg von Brainstormings hängt maßgeblich von den Motivationsqualitäten des Moderators und der Zusammensetzung der Teammitglieder ab. In eingespielten Teams haben wir damit gute Erfahrungen gemacht, allerdings ist in solchen Fällen auch fragwürdig, ob dabei das Brainstorming als formaler Rahmen unbedingt notwendig ist – oder ob man nicht auch in lockerer Diskussion zu ähnlichen Ergebnissen kommt.

Brainwriting Ähnlich wie beim Brainstorming geht es auch bei dieser Methode zunächst darum, möglichst viele Ideen innerhalb eines kurzen Zeitraums zu produzieren. Brainwriting funktioniert wie Brainstorming – mit dem Unterschied, dass alle Ideen schriftlich festgehalten werden. Das bringt den Vorteil mit sich, dass man keinen Moderator braucht und auch die Zusammensetzung der Gruppe eher eine untergeordnete Rolle spielt. Spontan niedergeschriebene Ideen können nicht durch verbale Einwände bereits im Keim erstickt werden. So kommen hierbei auch eher schüchterne Teilnehmer genauso zum Zuge wie extrovertierte Teammitglieder. Für ein Brainwriting benötigt man Schreibzeug und Papier – sowie ca. 30 Minuten Zeit. Ideal ist eine Teilnehmerzahl von fünf bis sechs Teilnehmern, da die Ideensammlung in diesem Rahmen recht übersichtlich bleibt. Basierend auf einer zentralen Fragestellung ist jeder Teilnehmer aufgefordert, seine Ideen auf einen Zettel zu schreiben. Pro Idee wird jeweils ein Zettel verwendet und an einem zentralen Platz abgelegt. »Spicken« ist dabei ausdrücklich erwünscht. Sobald jemand geistigen Leerlauf hat, kann er die abgelegten Ideen der anderen lesen, ergänzen oder auch aufgreifen. Ziel ist dabei, sich von anderen Ideen inspirieren zu lassen, diese weiterzuentwickeln oder einen ganz gegensätzlichen Ansatz zu formulieren. Nach einiger Zeit hat sich auf dem Tisch eine »Zettelwirtschaft« an Ideen angesammelt. Diese sollte abschließend ausgewertet und sortiert werden und bildet idealerweise die Grundlage für die weitere Ausarbeitung. Zwar kann man mit Brainwriting meist produktivere Resultate als bei der Zurufvariante

erzielen, aber auch hier sollten die Erwartungen nicht so hoch gesteckt werden. Beide Methoden eignen sich eher für einen initialen Start der Kreationsphase, können aber auch bei konkreten Fragestellungen, z.B. für Wording-Aufgaben wie Titel, Headlines etc. immer wieder kurzfristig eingesetzt werden. Methode 635 Auch diese Methode zielt darauf ab, innerhalb eines begrenzten Zeitraums möglichst viele Ideen zu produzieren. Im Vergleich zu den vorangegangenen Techniken erfolgt die Ideenentwicklung unter der Methode 635 jedoch in kanalisierter Form, die den Teilnehmern die Möglichkeit bietet, Ideenansätze zu konkretisieren. »635« steht für (maximal) sechs Teilnehmer, die drei Ideen innerhalb von fünf Minuten produzieren. Für die Anwendung von »635« sollte man vor Beginn der Sitzung ein Formular austeilen, das aus sechs Spalten und drei Zeilen besteht. Als Überschrift der Tabelle ist die zentrale Fragestellung vorformuliert. Mit dem Start der ersten Fünf-Minuten-Etappe listet jeder der Teilnehmer auf seinem Formular in der ersten Spalte drei Lösungsvorschläge auf. Nach fünf Minuten reicht jeder Teilnehmer sein Formular an den Sitznachbarn weiter. Während der nächsten fünf Minuten füllt jeder die zweite Spalte der Tabelle aus. Dabei

Brainwriting online Häufig fehlt im Tagesgeschäft die Zeit, alle wichtigen Teammitglieder zu einem Meeting zusammenzurufen. In diesem Falle kann man Brainwriting auch per Mail oder über das Pinboard im Intranet durchführen. Zwar gestaltet sich dadurch der Ideeninput langwieriger, aber auch zeitlich und räumlich flexibler.

Ideenentwicklung

91

dienen die drei Vorschläge als Anregung zur Weiterentwicklung einer Idee, oder aber es werden drei neue hinzugefügt. Nach weiteren fünf Minuten, wechseln die Formulare erneut den Besitzer – solange, bis jeder der Teilnehmer jedes Blatt gehabt hat. Sofern einem Teilnehmer zwischendurch die Ideen ausgehen oder er mit den vorformulierten Ansätzen nichts anfangen kann, lässt er einen Eintrag in der Spalte aus. Wie ein ausgefülltes Formular zum Thema »Maßnahmen zur User-Bindung« am Ende der Runde aussehen könnte, zeigt Ihnen das unten stehende Beispiel. Am Ende einer »635«-Runde sind bestenfalls 108 (6 x 3 x 6) Ideen entstanden, auf denen man aufbauen kann. Da die Auseinandersetzung mit einer Idee in dieser Form meist in-

tensiver stattfindet, gehen aus den Formularen häufig ganze Ideenketten hervor, die eine abschließende Auswertung und Ausarbeitung enorm erleichtern. So lassen sich aus der oberen Beispieltabelle sowohl horizontal als auch vertikal verschiedene Lösungsansätze ableiten, auf die man in der Konzeption zurückgreifen kann. Der stark limitierte Zeitrahmen, der dieser Methode zu Grunde liegt, wirkt auf viele zunächst abschreckend und kontraproduktiv. Viele Teilnehmer, die die 635-Methode jedoch schon einmal angewandt haben, sind meistens positiv überrascht, wie produktiv sie in kurzer Zeit waren. Skeptiker könnten diese Methode einfach mal in vertrautem Rahmen ausprobieren: Mehr als dreißig bis vierzig Minuten Zeit verliert man dabei nicht.

Beispiel-Formular für die Methode 635 Frage: Wie können wir registrierte Mitglieder für unsere Website gewinnen und halten?

92

Anja

Ulli

Thomas

Katja

Ralf

Julia

durch personalisierte Angebote

z.B. eine pers. Bookmarkliste

Anlage eines persönlichen Archives

Personalisierte Newsletter

Newsletter wird mit dem Archiv synchronisiert

Persönliche Konfiguration der Site

durch Bonuspunkte

Web-Meilen für jeden Visit der Site

User kann Web-Meilen sammeln und einlösen

Besonders aktive User erhalten einen Vip-LoungeBereich

Kooperation mit Marketingpartner für den VIP-Bereich

Veranstaltung von Real-LifeEvents mit Kooperationspartnern

durch geschlossene Nutzerbereiche

... mit attraktiven Angeboten

z.B. exklusive Preisvergleiche

Besondere Preiskonditionen für registrierte Mitglieder

Zugang zu den Expertenforen nur für regist. Mitglieder

Personalisierte Beratung in Form von Fragebogenauswertungen

Kreation

Abbildung 2 왘 Beispiel einer Mindmap zur Fragestellung »Wie können wir registrierte Mitglieder für unsere Website gewinnen und halten?«

Synchronisation der Funktionen

Persönliche Newsletter

BookmarkVerwaltung

Archivierungsfunktion

Abgleich mit pers. Profil Personalisierte Angebote

MitgliederRegistrierung Nutzerprofil

Skalierbare Profile

Bonuspunkte für persönliche Angaben

Nutzermotivation Persönliche Beratung Geschlossener Bereich

Webmiles für regist. Nutzer

Einlösen der Webmiles bei Koop.Partnern

VIP-Lounge

VIP-User Expertenchats

Content von Koop.-Partnern exkl. Angebote

Mindmapping Mindmapping ist neben dem gruppenorientierten Brainstorming die wohl verbreitetste Methode zur Ideenentwicklung. Die Methode erfreut sich – über alle Branchen hinweg – großer Beliebtheit, da sie sehr leicht anwendbar ist und schnell einen Überblick über komplexe Zusammenhänge schafft. Hinzu kommt, dass für das Mindmapping keine aufwändigen Vorbereitungen zu treffen sind, da es alleine und dadurch zeitlich und räumlich unabhängig angewandt werden kann.

Mindmapping-Tools Viele Online-Anbieter bieten eine Demo-Version Ihrer Mindmapping-Software an, z.B.: 왘 Mindmanager 3.5 www.managementsoftware.de 왘 PersonalBRAIN www.thebrain.com 왘 AliahTHINK4.0 www.aliah.com 왘 Inspiration 6.0 www.inspiration.com

Ideenentwicklung

93

Die von Tony Buzan entwickelte Technik verfolgt den Ansatz, den kreativen Denkprozess auf dem Papier in Form einer gedanklichen Landkarte zu spiegeln. Dieser eher bildlichräumliche Ansatz eröffnet neue Sichtweisen und Ansatzpunkte, die bei einer eher rationalen, linear ausgerichteten Denkweise vernachlässigt werden. Mindmaps eignen sich besonders für planerische oder strategische Fragestellungen, aber auch zur Weiterentwicklung von Ideen. Beginnen Sie damit, Ihre Hauptidee als Begriff oder auch als Bild in die Mitte des Blattes zu schreiben. Ausgehend von diesem zentralen Begriff lassen sich verschiedene Linien abzweigen, die für jeweils eine Interpretation oder ein Unterthema dieses Begriffes stehen. Zu den Unterthemen fallen Ihnen dann weitere Begriffe ein, die wiederum Abzweigungen zu weiteren Begriffen darstellen – und so weiter (Abbildung 2). Die Mindmap ist dann fertig, wenn Ihnen nichts mehr einfällt oder Sie das Gefühl haben, das Thema von allen Perspektiven beleuchtet zu haben.

94

Kreation

Meist gelingt es nicht auf Anhieb, eine komplette Mindmap zu erstellen, deswegen arbeiten viele mit frei positionierbaren Kärtchen oder mit einer Mindmapping-Software. So einfach Mindmapping auch ist: Spätestens wenn eine Mindmap in größerer Runde präsentiert wird, stößt man an die Grenzen dieser Technik. Denn meist sind Mindmaps nur für den Verfasser eindeutig verständlich. Da die Mindmap lediglich ein stark reduziertes Abbild der Überlegungen darstellt, bringt jeder seine ganz persönliche Interpretation mit ein. Zudem meint man häufig, mit der Mindmap schon eine Lösung parat zu haben, obwohl diese lediglich verschiedene Szenarios aufzeigt, die noch nicht hinterfragt oder bewertet wurden. Der Erfolg von Mindmapping zur Ideenentwicklung hängt also im Wesentlichen davon ab, was man anschließend daraus macht.

Präsentationsformen Das Kopfkino für den Kunden Selbst die beste Idee wird nicht das Licht des Monitors erblicken, wenn sie nicht angemessen und überzeugend präsentiert wird. Im Folgenden zeigen wir Ihnen verkaufsfördernde Maßnahmen für Ihre Ideen.

Sobald die MainIdea mental gefestigt und ausgearbeitet ist, stellt sich schon die nächste Herausforderung: Wie vermittle ich das, was bislang im intimen Kreis des Projektteams auf gegenseitige Inspiration und Zustimmung stieß, demjenigen, der die Idee letztendlich auch kaufen soll – dem Kunden beziehungsweise Auftraggeber? Die größte Schwierigkeit liegt unserer Erfahrung nach darin, dass Kunde und Agentur auf ganz unterschiedlichen Ebenen kommunizieren und demzufolge auch andere Erwartungen an das Projekt haben. Erfahrene Konzepter, Designer oder Projektmanager haben sich mit zunehmender Projektpraxis einen ganz eigenen agentur- oder auch teamspezifischen Sprachschatz zugelegt, der sich für Unbeteiligte nicht auf Anhieb erschließt. Zudem ist Designern oder Konzeptern eine fachspezifische Herangehensweise an das Projekt zu Eigen, die für den Kunden nur schwer nachzuvollziehen ist. So versteht beispielsweise der Laie in der Regel nicht sofort, warum ein Layer-Design der Site räumliche Tiefe verleiht. Ebenso wenig wird der Kunde auf Anhieb verstehen, warum seine bislang so sorgsam behandelte Marke im Netz eine deutliche Verjüngungskur erfährt. 96

Kreation

Förderlich für einen Brückenschlag zwischen Agentur- und Kundenerwartungen ist deshalb die intensive Auseinandersetzung mit den persönlichen Bedürfnissen und Interessen des Kunden. Mitunter kann dadurch die Entscheidung für Form und Inhalt der Präsentation erheblich erleichtert werden. Einen Anbieter von Computerspielen, der das Internet vornehmlich als E-Commerce-Plattform nutzen will, wird man nicht mit einer Präsentation begeistern können, in der die Metapher von Jump-and-Run-Spielen zwar anschaulich umgesetzt wurde – die aber keine Lösungen zur Integration der Händler aufzeigt. Umgekehrt ist es bei der Konzeption einer Online-Marketingkampagne für ein Versicherungsunternehmen nicht zwangsläufig notwendig, seine Ideen nach einem standardisierten Powerpoint-Aufbau zu präsentieren, weil man glaubt, damit die Sprache des Kunden zu sprechen. Ausschlaggebend ist hier das Motiv des Kunden: Einige Kunden beauftragen eine Agentur, weil sie sich davon kreative und originelle Lösungen erwarten; andere wiederum bevorzugen eine Präsentationsform, die ihrem Kommunikationsverständnis entspricht. Folgende Aspekte sollten Sie deshalb bei Ihren Überlegungen berücksichtigen:

왘

왘

왘

Primäre Projektziele des Kunden Projektziele sind nicht unmittelbar aus den strategischen Zielen des Projekts abgeleitet, sondern eher in einem unternehmenspolitischen Kontext zu betrachten. Ist der Projektverantwortliche im Bereich der Unternehmenskommunikation angesiedelt, wird er möglicherweise gegenüber den Unternehmensbereichen einen erhöhten Argumentationsbedarf haben. Hierbei gilt es, dem Kunden mit der Idee genügend Verkaufsargumente für die unternehmensinterne Kommunikation des Projekts zu liefern. Auch potenzielle Interessenskonflikte gleichwertiger Projektverantwortlicher – z.B. aus Marketing oder Vertrieb – sollten in der Präsentation berücksichtigt werden. Gilt es beispielsweise bei einer E-Commerce-Website die Händler oder Außendienstler zu integrieren, sollte der Lösungsansatz den Nutzen dieser Kundengruppe klar herausarbeiten. Fachlicher Hintergrund auf Kundenseite Die Kommunikationsform und auch die grafische Aufbereitung der Ideenpräsentation sollten auf die fachlichen Interessen der Kunden abgestimmt werden. Werbeleiter und Corporate-Design-Verantwortliche fühlen sich von werblichen oder emotionalisierenden Präsentationen eher angesprochen als Kunden mit analytischem Background. Persönliche Vorlieben Sofern man die persönlichen Vorlieben des Kunden kennt oder einschätzen kann, können diese die Entscheidung über Form und Format erleichtern. So bevorzugen einige eher ein Booklet, das sie in Ruhe studieren können. Andere wiederum freuen sich auf einen intensiven Austausch während eines Präsentationstermins.

Inhaltlicher Aufbau Unabhängig davon, in welcher Form der Konzeptansatz präsentiert wird, sollten folgende Inhalte berücksichtigt werden: Rebriefing Gerade wenn es sich um die erste Präsentation handelt, die der Kunde von Ihnen zu sehen bekommt, sollten Sie vorab noch einmal die wichtigsten Ziele des Projekts zusammenfassen. Dabei sollte kurz auf Definition, Zielsetzung und Anforderungen des Projekts eingegangen werden. Dieser kurze Überblick vergegenwärtigt allen Beteiligten noch einmal die Ausgangssituation. Der Kunde fühlt sich dadurch in seinem Vorhaben verstanden und bestätigt oder kann gegebenenfalls das Verständnis der Aufgabenstellung korrigieren. Einmal formuliert liefert das Rebriefing auch innerhalb des Projektteams die Arbeitsgrundlage für alle Teammitglieder. Falls Sie zur Präsentation neue Gesichter auf Kundenseite erwarten, können Sie dem Rebriefing eine Kurzdarstellung Ihres Unternehmens voranstellen. Diese sollte jedoch so kurz wie möglich gehalten werden.

Präsentationsformen

97

Abbildung 1 왘 Präsentation zur Online-Kampagne »Future Brand Investigators«, die unter www.nestle-fbi.de gelauncht wurde.

Strategie Der strategische Ansatz bildet die Argumentationsbasis der kreativen Umsetzung. Um seine Idee auch in der Diskussion mit dem Kunden fundiert rechtfertigen zu können, sollten die wichtigsten strategischen Ziele noch einmal zusammengefasst und aufgeführt werden. Die »Handlungsanweisung«, die sich für die Kreation daraus ableitet, lässt sich verkürzt mit den »4 Ws« zusammenfassen: 왘 Wer ist der Anbieter der Website? Diese Frage zielt auf den Markenkern und die Wiedererkennbarkeit des Anbieters ab. Erläutern Sie hierzu kurz, wie sich der Anbieter auf der Website positioniert und welche Merkmale die Einzigartigkeit des Anbieters unterstreichen. 왘 Was wird mit der Website kommuniziert? Hierzu sollten die Kommunikationsziele der Site zu einem zentralen Nutzenversprechen zusammengeführt werden. Dieses muss nicht immer deckungsgleich mit dem Claim des Anbieters sein, sollte aber die Einzigartigkeit des Anbieters herausstellen. So ist 98

Kreation

왘

왘

beispielsweise das Kommunikationsziel, innovative Produkte herzustellen, an sich noch kein USP, da das nahezu jeder Mitbewerber für sich beansprucht. Ein Anbieter, der jedoch kommuniziert, innovative und verbraucherfreundliche Produkte anzubieten, hebt sich schon deutlicher vom Wettbewerbsumfeld ab. Wie wird auf der Website kommuniziert? Jedes noch so überzeugende Alleinstellungsmerkmal geht in der Masse der Anbieter unter, wenn es nicht innovativ oder überzeugend im Netz repräsentiert wird. Fassen Sie die Ergebnisse des Benchmarks noch einmal zusammen und erläutern Sie kurz, wie Sie mit der geplanten Website einen Wettbewerbsvorteil schaffen können. Wen spricht die Website damit an? Geben Sie einen kurzen Überblick über die wesentlichen Merkmale der anvisierten Zielgruppe und leiten Sie daraus mögliche Motive ab, die die Zielgruppe dazu veranlassen könnte, die Website regelmäßig zu besuchen.

Abbildung 2 Produktforum der »Future Brand Investigators« 왗

Kreativer Ansatz Die dramaturgische Überleitung zur MainIdea gestaltet sich – egal ob textlich formuliert oder frei vorgetragen – meist am schwierigsten. Zwischen dem Wechsel von einer analytischen Herangehensweise hin zur kreativen Umsetzung entsteht meist ein inhaltlicher Bruch, den es zu überbrücken gilt. Hilfreich ist dabei, zu erläutern, was den Impuls für die Idee gegeben hat. Dies kann ein idealisiertes Zielgruppen-Szenario sein, wie z.B. die junge Karrierefrau, die sich von der Managerplattform einen schnellen Aufstieg in die Führungsebene verspricht. Als wir für einen Lebensmittelkonzern die Website für eine virtuelle Produktentwicklung konzipierten, ging der Impuls für die kreative Umsetzung von der Zielgruppe aus. Ziel war es, mit der Website einen exklusiven Kreis junger Trendsetter zu akquirieren, die im Auftrag des Unternehmens ein neues Lebensmittel kreieren sollten. Wir bauten unsere Argumentation darauf auf, dass gerade die junge Zielgruppe nicht allein durch ein zentrales

Nutzenversprechen, Teil eines exklusiven Entwicklerteams zu sein, für die Aktion zu gewinnen sein würde. Vielmehr müsste man dieses Nutzenversprechen durch ein Szenario kommunizieren, das in ihren Themenwelten angesiedelt ist. Bei der Recherche in diversen Jugendzeitschriften und Websites fiel uns auf, dass Agenten-Milieus jeglicher Ausprägung wie z.B. »X-Files«, »Mission Impossible« oder auch »Twin Peaks« nach wie vor Faszination erzeugen. Wir schlugen dem Kunden vor, die Online-Kampagne unter dem Label »FBI« – Future Brand Investigators – einzuführen. Das Label weckt Assoziationen zu medienwirksamen Agentenklischees und verdeutlicht – ohne weitere Erklärungen – Sinn und Ziel des Projekts: Die Mitglieder der Future Brand Investigators ermitteln im Internet die Marke von morgen. In diesem Falle wurde die dramaturgische Überleitung also dadurch geschaffen, dass wir die Kommunikationsziele aufgegriffen und im Hinblick auf die Interessen der Zielgruppe neu interpretiert haben.

Präsentationsformen

99

MainIdea Idealerweise sollte der kreative Ansatz mit einem Satz beschrieben werden, der die MainIdea aussagekräftig umschreibt. Dieser muss stilistisch nicht unbedingt an einen Claim herankommen, sollte aber so klar sein, dass er dem Kunden in Erinnerung bleibt und fortan als verkürzte Form des kreativen Ansatzes kommuniziert werden kann. Sofern schon erste Screen-Layouts entstanden sind, kann man daran Look & Feel, Navigation und die Darstellung der Inhalte erläutern. Ansonsten sollten zumindest die wesentlichen Anforderungen zur Umsetzung der MainIdea in Form von Moodboards oder Skizzen erläutert werden. Abgleich mit den strategischen Zielen Abschließend sollten Strategie und kreative Umsetzung noch einmal zusammengeführt werden. Dadurch wird einerseits für den Kunden nachvollziehbar, in welcher Form die vorgestellte Idee die Anforderungen der Site erfüllt, gleichzeitig wird der Idee durch den strategischen Abgleich die Beliebigkeit genommen. Bestenfalls gelingt es, den Rückschluss zur Strategie so überzeugend zu führen, dass die vorgeschlagene Idee sich fast schon selbstverständlich als erfolgsversprechender Lösungsansatz darstellt.

100

Kreation

Formale Umsetzung Die Form der Präsentation ergibt sich meist aus den vorangegangenen Überlegungen. Viele Agenturen haben mittlerweile zur Durchführung der Projekte feste Standards etabliert, die bestimmte Konzeptformate für die jeweilige Projektphase vorsehen und entsprechend der Kundenanforderungen variiert werden. Ausschlaggebend sollte jedoch sein, welche Präsentationsform zu welcher Idee und zu welchem Kunden passt. Die üblichste Präsentationsform ist die kommentierte Powerpoint-Präsentation, die bei Pitches oder größeren Projektgruppen fast schon obligatorisch ist. Sofern viele interaktive Elemente in die Präsentation integriert werden, bietet sich alternativ auch ein Director-, Flash- oder Shockwave-Player an. Ein Vorteil dieser Form ist, dass man sich nicht lange mit dem Formulieren längerer Texte aufhalten muss, und sich daher auf die dramaturgische Aufbereitung der Präsentation konzentrieren kann. Meist wird diese in Form eines Booklets zur kundeninternen Verteilung ausgehändigt. In diesem Fall sollte die Präsentation alle wesentlichen Informationen zum Konzeptansatz enthalten. Wenn die Präsentation nicht selbsterklärend ist, sollte zusätzlich ein Ideenpapier zum Nachlesen ausgeteilt werden. Sofern parallel zur Ideenentwicklung schon ein Screen-Layout ausgearbeitet wurde, kann man dem Kunden das Konzept anhand einer funktionalen Demo erläutern. Obwohl diese Form für den Kunden recht anschaulich ausfallen kann, empfiehlt sie sich eher für überschaubare Projekte mit deutlichem Designschwerpunkt oder für die Präsentation von Navigationsstudien oder technisch aufwändigen Inhaltsdarstellungen, die für das Verständ-

nis der MainIdea förderlich sind. Ergänzend zur präsentierten Demo empfiehlt es sich, die wesentlichen Inhalte noch einmal in schriftlicher Form einzureichen, um eine Entscheidungsgrundlage für die nachfolgende Umsetzung zu schaffen. Abschließend noch eine kurze Anmerkung zum Präsentationsrahmen: Eine thematische Einstimmung auf das Projektthema wirkt auf den Kunden ebenso anregend wie auf das Projektteam selbst. Es spricht also nichts dage-

gen, die Präsentation beispielsweise mit einem Videointerview der Zielgruppe, mit thematischen Moodboards oder mit ZielgruppenTestemonials einzuleiten – sofern sich der Einsatz der Medien im Rahmen hält und die Präsentation der Idee nach wie vor im Vordergrund steht. Ein Übermaß an Showeffekten wirkt auf den Kunden eher abschreckend, da leicht der Eindruck erweckt wird, die Idee wäre ohne den Einsatz multimedialer Hilfsmittel nicht tragfähig.

Konzept-Giveaways Originelle Giveaways sind zwar kein Garant für eine Abnahme oder Beauftragung, fördern aber nachhaltig die Wirkung Ihrer Ideen. Die Präsente müssen nicht aufwändig oder kostenintensiv sein. Wichtiger ist der Aspekt, dem Auftraggeber etwas »zum Anfassen« mitzugeben, das an die Konzeptideen erinnert. So können Sie beispielsweise für die Konzeption

einer Pharma-Website ihre Dokumente in einer »Medikamenten-Box« verpacken, oder Sie veranschaulichen Ihre Idee durch gängige Spielformen wie stilisierte Memoriekarten, Dominosteine etc. Auch hier gilt jedoch: Weniger ist mehr. Es sollte nicht der Eindruck entstehen, Sie hätten mehr Zeit in die Verpackung als in den Inhalt investiert.

Präsentationsformen

101

Making of Stylepark Kreative Ansätze für die Website Für die Kreation von stylepark.com galt es, eine MainIdea zu entwickeln, die einerseits die Markenidentität angemessen widerspiegelt und gleichzeitig wegweisend für die Umsetzung der Website ist. Kein leichtes Unterfangen bei einem designorientierten anspruchsvollen Kunden und einer stilbewussten Zielgruppe.

Gleich nach Abnahme der strategischen Ziele und Formulierung der notwendigen Schritte wurden für die Kreationsphase alle notwendigen Kernkompetenzen involviert. Zum Projektleiter, den Marken-Consultants und der Design-Direktorin gesellten sich noch der Vertreter der Konzeption und ein weiterer Designer. Zur Vorbereitung hatten alle Teammitglieder die bisherigen Dokumente gesichtet, im Netz nach Anbietern im gleichen Segment gesurft und sich mit Hilfe von Anzeigenmotiven, Zeitschriften und Möbelkatalogen thematisch eingestimmt. MetaDesign hat gute Erfahrungen damit gemacht, alle entscheidenden Projektbeteiligten zielgerichtet in die kreativen Prozesse einzubinden. Dabei ist der transparente Projektverlauf ebenso entscheidend wie der interne Informationsaustausch zwischen den Fachkompetenzen untereinander. »Wir stellen immer wieder fest, dass es dem Projekt hilft, wenn diese Arbeitsphase sehr klar und präzise festgehalten wird und mit den Teammitgliedern als auch mit dem Kunden abgestimmt ist. Hier muss bei allen Beteiligten ein Einverständnis über die Kernaussage beziehungsweise über die zentrale 102

Kreation

Idee sein. In den folgenden Wochen wird jeder das gleiche Bild im Kopf tragen müssen, damit das Projekt in gleichspurigen Bahnen verläuft. Alle weiteren Projektentwicklungen und Zwischenpräsentationen basieren auf diesem einen Leitgedanken«, bestätigt Thomas Klein (Competence Manager Online Strategy/Design). Die zentrale Aufgabe der Kreation lautete, eine Idee zu entwickeln, welche die zuvor verabschiedete »Unique Idea Proposition« einlöst: Wie erschaffen wir eine Plattform, die nicht den technisch pragmatischen Eindruck einer B-2-B-Plattform verbreitet, aber dennoch eine nützliche Arbeitshilfe für Kreative darstellt? Wie könnte ein anregendes Szenario aussehen, das zudem Professionalität und Exklusivität vermittelt? Und wie bilden wir die Verschmelzung von Arbeit, Wohnen und Fachinteressen auf der Website ab?

Abbildung 1 Ergebnisse des Brainwritings zur Erarbeitung der MainIdea 왗

Kreativer Prozess

Zwischenpräsentation

Mit den übergeordneten Fragestellungen im Hinterkopf wurde ein Kreativ-Workshop mit allen Teammitgliedern initiiert. Eingeleitet wurde der Workshop mit der Fragestellung: »Wenn Stylepark einen Ort darstellt, mit welchem Raum kann man diesen beschreiben?« Hierzu wurden mit Hilfe der Brainwriting-Methode Ideen in Form von Texten und Skizzen gesammelt. Der Raum wurde ganz unterschiedlich interpretiert und thematisiert: Es entstanden eine ganze Reihe von Ideen, wie z.B.: Park, Museum, Luxus-Liner, U-Boot, Flughafen Lounge, Raumstation und andere. Einzelne Ideen wurden in der Auswertung vertiefend diskutiert. Schließlich entschied man sich für die zwei Favoriten »Airport Lounge« und »London Loft«. Diese beiden Raummetaphern sollten für eine Präsentation beim Kunden ausgearbeitet werden.

Für die Präsentation der beiden kreativen Ansätze wurden so genannte »Interactive-UserSzenarios« entwickelt, um die Ideen »Airport Lounge« und »London Loft« zu veranschaulichen. Dabei wurde die Raummetapher in allen denkbaren Facetten beleuchtet: Welche Leute halten sich in dem Raum auf? Welche Aktivitäten findet dort statt? Wie ist der Raum eingerichtet? Wie bewegt man sich durch den Raum? Ziel war es, anhand dieser Szenarien die Idee zu konkretisieren und mögliche Ableitungen für die konkrete Umsetzung zu realisieren. Die flexible Einrichtung des London Loft könnte beispielsweise nach der Online-Übersetzung in einer dynamische Homepage, die sich mit den Tageszeiten verändert, ihre Entsprechung finden. Dieses Vorgehen half nicht nur dem Team, sondern auch dem Kunden, eine Vorstellung über mögliche Umsetzungspotenziale der Metapher zu gewinnen.

Making of Stylepark

103

Thomas Klein (Competence Manager Online Strategy/Design) beschreibt das Vorgehen folgendermaßen: »Wir agieren dabei wie eine Film- oder Theatertruppe, die ihren Stoff dem Intendanten oder Produzenten präsentiert. Die Geschichte muss erzählt werden können, damit die zukünftige Website in ihren Inhalten, Funktionen, Werkzeugen und Abläufen greifbar wird. Das »Interactive User-Szenario« baut eine Dramaturgie auf, die unsere interne Begeisterung von der Idee auf den Kunden überträgt. Den Rahmen der Inszenierung gestaltet die Markenstrategie, aus der schon visuelle Anmutungen abgeleitet werden. Ein weiteres Teammitglied definiert die »Sprache« und die »Dialoge« – das heißt Texttonalität und Kommunikationsformen. Auch müssen erste technische Umsetzungsmöglichkeiten konzipiert werden – eben die »Special Effects«.«

104

Kreation

MainIdea Nach der Präsentation wurden beide Ideen gemeinsam mit dem Kunden erörtert. Für die Airport-Lounge-Metapher sprach die Exklusivität und der kontemplative Aspekt. Zurückgezogen von der eigentlichen Welt der Büroräume und überfüllten Teeküchen, kann man sich in der Lounge in gepflegtem und verwöhnendem Ambiente ganz auf die eigentliche Arbeit konzentrieren und dabei auch seinen weiteren Interessen nachgehen. Dagegen sprach die unvermeidliche Assoziation mit einem Business-Leben, das sich nicht unbedingt mit dem Lebensgefühl der Zielgruppen deckungsgleich zeigt. Hinzu kam auch, dass Menschen in der Airport Lounge eher temporäre Zwangsgemeinschaften bilden, die weniger aus gemeinsamen Interessen zusammenkommen. Die Idee des London Loft erwies sich auch nach längerer Diskussion als tragbar und angemessen. Der Ort London verspricht innovative Impulsive aus Design und Mode, und ein Loft impliziert flexible Wohn- und Arbeitsformen und Raum für die kreative Entfaltung. Die Entscheidung für den kreativen Ansatz war damit gefallen. MetaDesign hat die MainIdea des London Loft in folgendem Szenario umschrieben: Das Szenario des London Loft spiegelt die Welt der Marke Stylepark wider. In dem Loft leben Menschen in einer Lebensgemeinschaft zusammen. Nicht aus wirtschaftlichen Zwängen, sondern weil sie Interessen teilen und sich mögen – mit allen ihren Spleens, Macken und Gewohnheiten. In dieser Welt gibt es gelernte Konventionen mit Brüchen und gelernte Formen der Inszenierung. Privates und Beruf, Wohnen und Arbeiten verschwimmen. Die Nutzungsinten-

Abbildung 2 왖 왘 Visuelle Studien zu Farbklima und Gestaltungselemente des Online-Auftrittes

tion bestimmt den Raum. Schrille Events wie Chill Outs am eigenen Golfabschlagplatz auf der Dachterasse und spontane Aktionen sind fester Bestandteil des Loftlebens. Besucher sind immer willkommen und können sicher sein, hier die neusten Szene-News zu bekommen. Die meisten Gegenstände im Loft haben eine eigene Geschichte und sind Ausdruck der Fetische ihrer Besitzer. (Auszug aus dem Ideenpapier)

Aus der MainIdea entstanden bereits erste Ideen für die Umsetzung: Web-Events zu ausgewählten Anlässen, eine virtuelle Werkstatt mit Planungs-Tools oder ein Matching verschiedener User-Profile. Daneben konnten auch konkrete Empfehlungen für Look & Feel, Navigation und die Inszenierung der Contents abgeleitet werden. Das Look & Feel sollte stylish, aber nicht kurzlebig gestaltet sein. Die Navigation sollte so offen wie die flexible Raumanordung des Lofts sein, und die Darstellung der Inhalte sollte sich den vielfältigen Interessen der Zielgruppe anpassen. Wie MetaDesign diese MainIdea in konkrete Web-Inhalte und -Funktionen umgesetzt hat, erfahren Sie auf Seite 154.

Making of Stylepark

105

Umsetzung

108 Grobkonzept

116 Inhalte und Funktionen

110 Teamanforderungen

117 Inhaltsstruktur

111 Kundenanforderungen

123 Benutzerführung

113 Nutzeranforderungen

127 Site-Aufbau 133 Inhaltsformen 139 Funktionalitäten 145 Bewerbung 146 Asset-Liste

106

Umsetzung

148 Usability-Testing

154 Making of Stylepark

149 Testphasen

155 Benutzerführung

151 Testmethoden

157 Inhaltsstruktur und Site-Aufbau

Umsetzung

107

Grobkonzept Eine Idee wird webfähig Eine gute Idee ist nur dann tragfähig, wenn sie nicht nur auf Papier, sondern auf der Website selbst erfahrbar wird. Das Grobkonzept bildet die Basis für die Umsetzung der Site nach Ihren Vorstellungen. Voraussetzung für ein erfolgreiches Web-Konzept ist die Berücksichtigung aller beteiligten Akteure – vom Projektteam bis hin zum Nutzer.

Vorausgesetzt, die MainIdea hat sich in den Köpfen des Teams und des Kunden verankert, gilt es nun, diese Idee in eine konkrete Website zu übersetzen. Mit der MainIdea wurde der kreative Grundstein für Look & Feel, Navigation und die Inszenierung der Inhalte gelegt. In der Umsetzungsphase werden diese Komponenten in eine überzeugende Site-Struktur übertragen. Das Grobkonzept definiert die wesentlichen Inhaltsmodule und Funktionen einer Website. Ziel sollte sein, dass jeder Projektbeteiligte sich eine genaue Vorstellung von der gesamten Website machen kann. Für den Konzepter stellt diese Aufgabe nicht nur eine strukturell analytische Herausforderung dar, sondern bietet auch kreativen Spielraum für die Entwicklung herausragender Features und einer gelungenen Nutzerdramaturgie. Schließlich geht es weniger darum, die vom Kunden angeforderten Inhalte in einer effizienten SiteStruktur »unterzubringen«, sondern um den Anspruch, die Inhalte im Sinne des Kunden und des zukünftigen Nutzers so umzusetzen, dass die MainIdea auf der Website – wenn auch unbewusst – erlebbar wird. 108

Umsetzung

Dieser Anspruch setzt auch eine intensive Einarbeitung in – möglicherweise fachfremde – Inhalte voraus. Inhalte, die während der Ideenentwicklung nur partiell bearbeitet wurden, müssen zu einem stimmigen Web-Angebot zusammengeführt werden. Angedachte Funktionen, die dem Nutzer einen Mehrwert bieten, müssen im Hinblick auf inhaltliche und technische Machbarkeit überprüft und konkreter ausgearbeitet werden. Dabei hat man nicht immer das Glück, eine Website für einen beliebten Markenartikler zu konzipieren, deren Inhalte man schon aus dem alltäglichen Umfeld kennt. Ebenso häufig steht man vor der Aufgabe, ein Konzept für eine branchenspezifische B-2-B-Plattform, ein Controlling-Tool für ein Intranet oder eine medizinische Datenbank zu entwerfen. Hierbei ist fachspezifisches Know-how gefragt, um Inhalte sinnvoll aufzubereiten und die angemessenen Funktionen zu entwickeln. Es empfiehlt sich deshalb, zur Vorbereitung einen Fragenkatalog für den Kunden zu erstellen oder kleinere Workshops mit fachkundigen Kundenverantwortlichen oder der Zielgruppe zu initiieren. In der Regel führen die Gespräche meist

Kai Grossmann Etat Direktor, BBDO Interactive Grundlage jedes Grobkonzepts sollte die klare Herleitung der »MainIdea« sein. Sie spitzt die gesamte Strategie auf eine Leitidee zu, die vom Kunden und vom gesamten Projektteam getragen und verinnerlicht werden muss. Sie ist die wichtigste Spielregel für die weitere Konzeption. Die im Grobkonzept zu erarbeitende Dramaturgie der Site, jeder Inhalt und jede Funktion wird an der »MainIdea« gemessen. Zu Beginn der Grobkonzeption entstehen meist sehr viele Ideen, um die »MainIdea« ins Netz zu übertragen. Diese Quantität ist wichtig und kann durch geeignete Techniken sogar gefördert werden. Dabei hat sich das Brainwriting, besonders gemeinsam mit dem Kunden, als effektives Mittel bewährt. Das Ergebnis ist eine Sammlung von Themen, Inhalten und Funktionen zur Umsetzung der »MainIdea« im Internet. Die Hauptaufgabe von Konzeptern

Checkliste für das Grobkonzept Formale Aspekte, die Sie berücksichtigen sollten: 1. Welche abgenommenen Dokumente liegen vor? Gibt es weitere Dokumente, z.B. Protokolle, aus denen wichtige Projektinformationen hervorgehen? 2. Liegen die erforderlichen Kundenmaterialien vor? Gibt es auf Kundenseite einen zentralen Ansprechpartner für inhaltliche Fragen? 3. Liegt ausreichendes Fach-Know-how vor? Wo gibt es beispielsweise technischen oder inhaltlichen Informationsbedarf? Sind gegebenenfalls vertiefende Briefing-Termine nötig?

oder Beratern besteht darin, unter vielen guten Vorschlägen die sehr guten Ideen zu finden. Dabei hilft eine Matrix, die die Bewertung der Ideen anhand klarer Kriterien ermöglicht, z.B.: 왘 Unterstützt der Inhalt oder die Funktion die »MainIdea«? 왘 Ist der Inhalt einzigartig und kreativ oder nur ein »Me Too«-Angebot? 왘 Wie hoch ist der Nutzwert für die Besucher des Internet-Auftritts? 왘 Passt die Umsetzungsidee zur Marke und der Zielgruppe? 왘 Ist die Umsetzung der Idee machbar? (Zeit, Budget, Technik) Ideen werden konsequent »gekillt«, wenn sie diese Kriterien nicht erfüllen. Das Ergebnis ist eine qualifizierte Shortlist von Themen, Inhalten und Funktionen. Durch diese Methode wird somit schon in der Planungsphase die hohe Qualität des Projekts gesichert.

4. Welcher Zeitrahmen wird für das Projekt angesetzt? Wie viel Zeit davon kann in die Umsetzungsphase investiert werden? 5. Welche Meilensteine sind für das Projekt geplant? Wann werden welche Dokumente präsentiert? Wie verläuft das Abnahmeprozedere? 6. Wie wurde das Projekt budgetiert? In welchem Kostenrahmen darf sich die Produktion der Website bewegen?

Grobkonzept

109

zu schnelleren Ergebnissen in der Umsetzung als langwierige Recherchen und Überlegungen, die auf auf laienhaftem Halbwissen basieren. Eine obligatorische Maßnahme zur Vorbereitung ist ein zentrales Meeting mit dem Projektteam, um die Anforderungen aller Beteiligten abzugleichen und die weiteren Schritte festzulegen. Zwar ist es meist die Aufgabe des Projektmanagers, diesen Termin anzuberaumen und zu moderieren, aber die Konzeption nimmt dabei eine zentrale Position ein, da mit dem Grobkonzept die Grundlagen für die weitere Projektplanung geschaffen werden. Um so wichtiger ist es deshalb, die Anforderungen der verschiedenen Projektbeteiligten einzubeziehen.

Projektmanagement Für den Projektmanager stellt das Grobkonzept die Grundlage für die weitere Kalkulation und Projektplanung dar. Anhand des Site-Umfangs und der geplanten Inhalte und Funktionalitäten kann er einen konkreten Zeitplan für die erforderlichen Tätigkeiten erstellen, die nötigen Mitarbeiter rechtzeitig reservieren und die einzelnen Aufwände kalkulieren. Mit Abnahme des Grobkonzepts durch den Kunden können so Verbindlichkeiten für die Feinkonzeption und Produktion der Website geschaffen werden. Gerade vor diesem Hintergrund ist es besonders wichtig, sich in den Beschreibungen der Anwendung auf die Breite der gesamten Website zu konzentrieren, statt in inhaltliche Tiefen einzelner Bereiche einzusteigen.

Teamanforderungen

Design Während der Entwicklung des Grobkonzepts arbeiten Konzepter und Designer sehr eng zusammen – wenn es sich nicht sogar um ein und dieselben Person handelt. Während die Konzeption aus den zu verarbeitenden Inhalten eine angemessene Site-Struktur entwirft, entstehen am Rechner schon erste ScreenLayouts. Dabei ist jeder auf gegenseitigen Informationsaustausch angewiesen: Für die Entwicklung des übergeordneten Site-Aufbaus, der die Anordnung der Hauptfunktions- und Inhaltselemente festlegt, benötigt der Designer Informationen zu Umfang und Art der Navigationspunkte, übergreifenden Funktionalitäten und der geplanten Inhaltsformen. Umgekehrt

Als Schnittstelle zwischen abstrakten Anforderungen und konkreter Umsetzung der Website ist der Konzeptverantwortliche in Fragestellungen involviert, die sowohl die übergeordnete Projektplanung als auch operative Entscheidungen über Screen-Aufteilungen betreffen. Gleichzeitig muss er sich meist Kenntnisse im Hinblick auf einzusetzende Technologien und umzusetzende Inhalte erwerben. Damit man dabei nicht den Überblick verliert, ist es hilfreich, sich vorab zu überlegen, wer innerhalb des Teams welche Informationen braucht.

Teamentscheidungen Konzeption ist immer auch Teamarbeit. Ein Konzept kann nur dann erfolgreich umgesetzt werden, wenn alle Beteiligten eine Vision tei110

Umsetzung

len. Deshalb sollten alle Entscheidungen, die den Grundaufbau der Website betreffen, gemeinsam gefällt werden.

ist der Konzepter auf das Know-how des Designers angewiesen, wenn es um die konkrete Umsetzung der angedachten Inhalte und Funktionen geht. So macht z.B. eine aus 15 Unterpunkten bestehende Navigation aus inhaltlicher Sicht vielleicht Sinn, sprengt aber möglicherweise gestalterisch das gesamte Layout. Ebenso wenig ist es sinnvoll, die vorgesehenen Funktionen nachträglich in ein vom Design vorgegebenes Screen-Layout »hineinzupressen«. Um Frustration und potenzielle Missverständnisse auf beiden Seiten zu vermeiden, sind regelmäßige Rücksprachen mit dem Design, gegebenenfalls mit Unterstützung von technischer Seite, unerlässlich. Weitaus zeitsparender und reibungsloser für die Entwicklung des Grobkonzepts ist es, alle Entscheidungen gemeinsam zu treffen. Programmierung Je größer und komplexer das Projekt, desto höher der Abstimmungsbedarf mit technischen Experten. Gerade der Einsatz von Content-Management-Systemen kann mitunter Implikationen mit sich bringen, die bereits im Vorfeld geklärt werden sollten. Dynamische Navigationsformen oder ein komplexer FrameAufbau sind beispielsweise nicht mit jedem Content-Management-System realisierbar oder aber erfordern eine spezifische Modifikation. Für den Programmierer sind deshalb alle Aspekte einer Website, die mit Funktionen belegt sind, von großem Interesse: z.B. wie viele Navigationsebenen angedacht sind, ob Frames eingesetzt werden sollen, welche Hauptfunktionalitäten geplant sind und welche ScriptSprache dafür eingesetzt werden soll. Er kann anhand dieser Informationen den technischen Aufwand einschätzen und gegebenenfalls Alternativen zur Realisierung vorschlagen.

Kundenanforderungen In der Regel hat der Kunde zu Beginn der Umsetzungsphase eher eine vage oder abstrakte Vorstellung davon, wie die Website aussehen wird. Das Grobkonzept markiert daher einen wichtigen Meilenstein im Projektverlauf, da der Kunde damit eine konkrete Vorstellung von der gesamten Website gewinnt. Gleichzeitig dient das Grobkonzept als Abnahmegrundlage. Deshalb wird der Kunde seinen Fokus darauf richten, ob alle seine Anforderungen in der Umsetzung der Website berücksichtigt wurden. Oberste Prämisse aus der Kundenperspektive sollte sein, dass das Konzept verständlich aufgebaut ist. Es empfiehlt sich deshalb, das Grobkonzept in der argumentativen Abfolge so aufzubauen, dass die Projektvoraussetzungen und die daraus abgeleiteten Maßnahmen für den Kunden transparent sind. Geht es beispielsweise darum, mit der Website eine stärkere Kundenbindung zu fördern, dann stellen Sie diesen Aspekt in den Vordergrund und führen Sie hierzu alle geplanten Kundenbindungsinstrumente auf. Gilt es, mit der Website verschiedene Zielgruppeninteressen zu erreichen, listen Sie die einzelnen Zugangswege auf und erläutern Sie dazu, warum welche Navigationsform für die anvisierte Zielgruppe geeignet ist. Diese Ausführungen entsprechen nicht immer der teaminternen Logik, helfen aber dem Kunden, Ihr Konzept zu verstehen und schaffen die Voraussetzung für eine erfolgreiche Abnahme.

Grobkonzept

111

Abbildung 1 왘 Einstieg über Lebenssituationen auf www.insurancecity.de

Üblicherweise erhält der Kunde das Grobkonzept als Textdokument oder Powerpoint-Präsentation zusammen mit den Basis-Screens und der technischen Spezifikation. Darauf folgt dann nach einer kurzen Abstimmungsphase eine überarbeitete Version, in der die Änderungswunsche des Kunden eingearbeitet wurden. Die zweite Version gilt als verbindliche Basis für die weitere Produktion. Mitunter

Fachtermini vs. Verständlichkeit Die Kunden leben in einer anderen Fachwelt. Teamintern mögen Fachbegriffe zu einem schnelleren Verständnis beitragen, für Externe klingen sie häufig verwirrend. Obwohl sich viele Kunden mittlerweile Fachwissen angeeignet haben, sollte man im Gespräch oder in offiziellen Dokumenten so wenig Fachtermini wie möglich verwenden. 112

Umsetzung

wird bei größeren Projekten auf Grundlage des Grobkonzepts ein weiterer Kostenvoranschlag für die Produktion erstellt. In diesen Fällen ist es umso wichtiger, dass das Grobkonzept alle wesentlichen Inhalts- und Funktionsbereiche der Website abdeckt – und diese für den Kunden unmissverständlich textlich oder auch visuell beschrieben werden.

Abbildung 2 Zielgruppenspezifische Zugänge auf www.eulox.de 왗

Nutzeranforderungen Im Zentrum Ihrer Überlegungen sollten immer die Bedürfnisse und Interessen der zukünftigen Nutzer stehen. Selbst das exklusivste Informationsangebot und die komfortabelsten Service-Funktionen werden auf wenig Akzeptanz stoßen, wenn sie auf der Website nicht zu finden sind oder aber an den Interessen der Nutzer vorbeikonzipiert wurden. Die Nutzeranforderungen beeinflussen nicht nur Entscheidungen darüber, welche Inhalte und Funktionen auf der Website angeboten werden, sondern sie bestimmen unter Umständen auch die gesamte Inhaltsstruktur und den Aufbau einer Website. Das zeigt sich etwa darin, dass gerade serviceorientierte Websites Zugänge für unterschiedliche Zielgruppen, Bedarfssituationen oder inhaltsspezifische Fragestellungen anbieten. War es bis vor ein paar Jahren noch Standard, dass die Inhaltsstruktur ein unmittelbares Abbild interner Unternehmenshierarchien darstellte, hat

man heute die Notwendigkeit erkannt, die Navigationsstruktur den Bedürfnissen der Nutzer anzupassen So findet man beispielsweise häufiger Websites von Versicherungsanbietern, die ihre Web-Inhalte nicht nach Produktgruppen, sondern nach Lebenssituationen potenzieller Kunden clustern, wie z.B. die Website von Insurance-City zeigt. Auch die B-2-B-Plattform Eulox, ein Umschlagplatz für Logistikvorgänge, holt die verschiedenen Zielgruppen durch eindeutige Zugänge direkt auf der Homepage ab. Die Finanzplattform Business Channel bietet neben der klassischen Navigation über Finanzbereiche einen alternativen Einstieg über aktuelle Fragestellungen, die über ein Pull-down-Menü ausgewählt werden können. Um sicherzustellen, dass Ihre konzeptionellen Überlegungen auch im Nutzeralltag Bestand haben, sollten Sie bereits im Vorfeld

Grobkonzept

113

Abbildung 3 www.bch.de bietet neben der Hauptnavigation einen alternativen Zugang über aktuelle Fragestellungen. 왗

auch einen »Reality-Check« mit der Zielgruppe in die Grobkonzeption einplanen. Die Bandbreite dieser Reality-Checks bewegt sich von klassischen Marketinginstrumenten wie Fokusgruppen bis hin zu unkonventionellen Testgruppen innerhalb des Kollegenkreises. Bei größeren Projekten ist es heute fast schon Standard, Zielgruppenbefragungen und Usability-Tests in verschiedenen Phasen der Website-Entwicklung anzusetzen. Einen Überblick über Einsatz und Methoden des UsabilityTesting finden Sie im gleichnamigen Kapitel (siehe Seite 148).

114

Umsetzung

Inhalte und Funktionen Die Bausteine für das Grobkonzept Damit Team und Kunde eine konkrete Vorstellung von der Website bekommen, sollten im Grobkonzept alle Aspekte der Website beschrieben werden. Wir zeigen Ihnen die wesentlichen Inhaltskomponenten eines Grobkonzepts.

Für die Umsetzung wurde bereits ein initiales Meeting einberufen, die Rahmenbedingungen sind geklärt, der Zeit- und Kostenplan für die kommende Projektphase steht. Während am Screen konkrete Layouts entstehen und die Datenbankarchitektur Konturen annimmt, stehen am Anfang der Grobkonzeption erst einmal ein Reihe von Fragen: Wie führe ich die unterschiedlichen Nutzer durch das Angebot? Wie hole ich wen auf der Homepage ab? Welche Inhalte und Funktionen biete ich an? Wie werden die Inhalte dargestellt? Und wie organisiere ich die Inhalte sinnvoll? Bei der Entwicklung des Grobkonzepts werden Sie schnell merken, dass sich diese Fragen nicht – wie bei Checklisten üblich – Schritt für Schritt abarbeiten lassen, sondern immer parallel angedacht werden müssen. Die Strukturierung der Inhalte ist eng mit der Navigation verknüpft, die Darstellung der Inhalte wiederum hängt vom generellen Aufbau der Website ab – und so weiter. Die eigentliche Arbeit des Grobkonzepts liegt also weniger im Formulieren eines Dokuments, sondern ist eher durch Phasen konzentrierten Nachdenkens in Kombination mit intensivem Teamaustausch geprägt.

116

Umsetzung

Die Form, in der die Ergebnisse dieses Prozesses zu Papier oder auf den Screen gebracht werden, hat während der Entstehungsphase eine eher untergeordnete Bedeutung. Unabhängig davon, ob am Ende ein Prosatext, eine straffe Powerpoint-Präsentation oder eine funktionale Demo entsteht, geht es zunächst einmal darum, alle wichtigen Komponenten der Website auszuarbeiten. Dabei gerät man mitunter in die Situation, an verschiedenen inhaltlichen Baustellen gleichzeitig zu operieren, und verliert dabei den ursprünglichen Konzeptansatz aus den Augen. Wenn dann alle geplanten Inhalte und Funktionen zusammengeführt werden, treten spätestens bei der Produktion konzeptionelle Ungereimtheiten zutage: z.B. ist die Navigationsform in den Unterbereichen ist uneinheitlich, oder ähnliche Site-Elemente wurden mit unterschiedlichen Funktionen belegt. Hier ist es vorteilhaft, vorab ein inhaltliches Gerüst aufzubauen, das alle wichtigen Aspekte einer Website umreißt. Das hilft Ihnen dabei, einen Überblick über alle Inhaltskomponenten zu gewinnen, die für die Beschreibung der Website notwendig sind. Auf Grundlage dieser Inhaltskomponenten können Sie Ihr Grobkonzept systematisch aufbauen oder im Nachhinein vervollständigen.

Inhaltsstruktur Die Organisation der Inhalte bildet das strukturelle und funktionale Grundgerüst einer Website. Die Inhaltsstruktur ist das Resultat der inhaltlichen Kundenanforderungen einerseits und Ihrer eigenen Anforderungen im Hinblick auf die MainIdea andererseits. Häufig liegt als Bestandteil des Projekt-Briefings bereits ein grobes Clustering der Inhalte vom Kunden vor, sei es in Form eines Flowcharts oder als aktuelle Website, die redesignt werden soll. Irrtümlicherweise geht der Kunde mitunter davon aus, damit schon die Grundlage für die Website-Struktur geschaffen zu haben. In diesem Falle ist die Rückbesinnung auf Ihre ursprünglichen Ideen umso wichtiger. Bestenfalls kann die vorgegebene Struktur tatsächlich zu großen Teilen übernommen werden – schlimmstenfalls müssen Sie die Inhalte einer Struktur unterordnen, die Ihrem kreativen Ansatz konträr entgegensteht. Um Letzteres abzuwenden, sind gute Argumente gefragt.

Kein Kunde wird auf seinem Vorschlag bestehen, wenn man ihm plausibel erklären kann, warum ein alternativer Lösungsansatz eine größere Nutzerakzeptanz und letztendlich auch potenzielle Kundenbindungen begünstigt. Wenn Sie sich also an die Strukturierung der Inhalte machen, sollten Sie Ihre MainIdea im Hinterkopf behalten. Meist hat man im Zuge der Ideenentwicklung schon eine Vorstellung davon, wie die Inhalte dargestellt werden sollen und in welcher Form die Nutzer durch die Site navigieren: Geht es eher um die Gestaltung interaktiver Szenarios, bietet sich eine lineare Darstellungsform an, bei der sich eine »Szene« an die nächste reiht. Entsprechend simpel wird dann auch die Inhaltsstruktur ausfallen. Verfolgen Sie den Ansatz der kaskadierenden Informationsdarstellung, wird die Site-Struktur vermutlich auf eine hierarchische Rubrizierung hinauslaufen, die sich in der Tiefe immer detaillierter verzweigt.

Checkliste für das Grobkonzept Was Sie bedenken sollten, wenn Sie mit dem Grobkonzept beginnen: 1. Wie ist das Projekt positioniert? Welche Markenwerte soll die Website transportieren? Was soll die Website kommunizieren? Was unterscheidet die Website von den Wettbewerbern? Welche Zielgruppen sollen erreicht werden? 2. Was ist die MainIdea? Wie vermittelt sich die MainIdea durch Look & Feel, Navigation und die Inszenierung der Inhalte?

3. Wurde bereits ein Grunddesign für die Website entwickelt? Leiten sich daraus inhaltliche oder funktionale Richtlinien ab? 4. Liegen inhaltliche Anforderungen vom Kunden vor? Beim Relaunch: Inwieweit soll man sich an der aktuellen Website orientieren? 5. Liegen genügend Informationen zur Zielgruppe vor, um sich ein ausreichendes Bild von den Bedürfnissen und Interessen der zukünftigen Nutzer machen zu können?

Inhalte und Funktionen

117

Unternehmen

Produkte

Services

Presse

Geschäftsfelder

Bausparen

Bedarfsermittlung

News

Standorte

Baufinanzierung

Rechner

Archiv

Zahlen & Fakten

Sparanlagen

Förderungsberechnung

Karrieren

Fonds

Steuerplaner

Versicherungen

Ansprechpartner

Beispiele zur Strukturierung Wie unterschiedlich der Gesamteindruck durch verschiedene Strukturierungen gleicher Inhalte sein kann, zeigt ein Beispiel: Für die Website einer Bausparkasse werden vom Kunden vorab die umzusetzenden Inhalte definiert. Neben dem obligatorischen Produktangebot, das vom Bausparvertrag bis zu Investmentfonds alle Bedürfnisse rund ums Bauen abdeckt, sollen auch Unternehmensinformationen, Stellenangebote, Pressemeldungen und redaktionelle Inhalte zum Thema Wohnen integriert werden. Für die Inhaltsstruktur wären folgende Möglichkeiten der Umsetzung denkbar: Die zunächst naheliegende Variante wäre eine unmittelbare Abbildung der Unternehmensstruktur in Form von Rubriken wie »Unternehmen«, »Presse«, »Produkte«, »Jobs« oder ähnliche (Abbildung 1). Der Fokus dieser Struktur liegt ganz klar in der Darstellung des Unternehmens an sich. Das macht allerdings eine Differenzierung oder Abgrenzung zu anderen Anbietern schwierig. Eine solche Struktur wäre ebenso auf die Website eines Spiel-

118

Umsetzung

Abbildung 1 Diese und vergleichbare Inhaltsstrukturen rücken das Unternehmen selbst in den Mittelpunkt, ohne dass Kommunikationsziele oder auch das inhaltliche Angebot des Unternehmens ersichtlich werden. 왗

Homepage Bausparkasse

zeugfabrikanten, einer Werbeagentur oder eines Juwelieranbieters anwendbar. Eine weitere Möglichkeit zur Umsetzung wäre die Strukturierung nach thematischen Gesichtspunkten (Abbildung 2). Man rückt die Produkte des Unternehmens in den Mittelpunkt, indem einzelne Produktgruppen wie z.B. »Baufinanzierung«, »Sparanlagen« oder »Bausparverträge« auf die erste Inhaltsebene gestellt und dadurch in der Hauptnavigation auf einen Blick sichtbar werden. Ergänzend hierzu würde man alle unternehmensspezifischen Inhalte in einer Rubrik zusammenfassen und hierzu eine alternative Navigationsform vorsehen. Diese Inhaltsstruktur hätte den Vorteil, dass die Nutzer mit Aufruf der Website sofort einen Überblick aller angebotenen Produkte erhalten. Gepaart mit einer entsprechenden Navigationsform, die es ermöglicht, schnell und komfortabel auf alle Inhalte zugreifen zu können, wäre dies eine mögliche Umsetzung, sofern die MainIdea darauf abzielt, die Produkte einer breiten Nutzerschaft einfach zugänglich zu machen.

Homepage Bausparkasse Karrieren

Bausparen

Baufinanzierung

Sparanlagen

Standorte

Fonds

Zahlen & Fakten

Versicherungen

Produkte

Produkte

Produkte

Produkte

Produkte

Bedarfsermittlung

Bedarfsermittlung

Bedarfsermittlung

Bedarfsermittlung

Bedarfsermittlung

Berechnung

Berechnung

Berechnung

Berechnung

Berechnung

Förderungen

Förderungen

Förderungen

Förderungen

Förderungen

Ansprechpartner

Ansprechpartner

Ansprechpartner

Ansprechpartner

Ansprechpartner

News

Über uns

Abbildung 2 Anhand dieser Struktur wird das Produktangebot des Unternehmens schnell ersichtlich. Die OnlineService-Leistungen werden hier nicht separat als eigene Rubrik ausgewiesen, sondern ordnen sich den jeweiligen Produktgruppen unter. Die Inhalte zum Unternehmen sind nicht Teil der Hauptnavigation, sondern über eine separate Navigationsform zugänglich. 왗

Homepage Bausparkasse Über uns

Vorbauen

Aufbauen

News

Zahlen & Fakten

Standorte

Karrieren

Umbauen

Bausparen

Bausparen

Bausparen

Baufinanzierung

Baufinanzierung

Baufinanzierung

Sparanlagen

Sparanlagen

Sparanlagen

Fonds

Fonds

Fonds

Versicherungen

Versicherungen

Versicherungen

Abbildung 3 Diese Variante zeigt eine Strukturierung der Inhalte nach Bedarfssituationen. Unter den Rubriken »Vorbauen« – »Aufbauen« – »Umbauen« werden entsprechende Produkte aus den einzelnen Produktgruppen untergebracht. 왗

Für die mögliche MainIdea »Die Bausparkasse als treuer Begleiter in allen Lebenslagen« wäre eine Inhaltsstruktur angemessen, die an potenzielle Bedarfssituationen der Nutzer angepasst wird (Abbildung 3). Im Vordergrund stehen hierbei nicht die Produkte an sich, sondern Inhalte auf alle Fragen rund um die akute Bedarfssituation der Nutzer. Hierzu wäre eine Struktur denkbar, die alle redaktionellen Inhalte und Produkte des Anbieters zu dieser Bedarfssituation zusammenfasst. Ausgehend

von der Frage, aus welchem Anlass zukünftige Nutzer die Website aufsuchen würden, kristallisieren sich die Bedarfssituationen »Vorbauen« – »Aufbauen« – »Umbauen« heraus. Diese könnten als Oberrubriken der Site-Struktur angesetzt werden; darunter findet der Nutzer sowohl passende Produkte, beispielsweise für den Ausbau seines Wintergartens, wie auch Berechnungs-Tools, Artikel zur Bauökologie oder Einrichtungstipps.

Inhalte und Funktionen

119

Abbildung 4 Auf www.freitag.ch bildet sich der Entstehungsprozess der Produkte auch in der Struktur der Website ab. 왗

Abbildung 5 왘 Die Inhaltsstruktur der Website www.magenta.de bildet die Kernkompentenzen der Agentur ab: »Think« – »Create« – »Produce«

Neben den vorab aufgezeigten Beispielen bietet sich auch eine weitere Möglichkeit der Inhaltsstruktur an. Mitunter stellen Unternehmen auf ihrer Website Leistungen oder Produkte dar, die an einen bestimmten Arbeitsablauf oder einen Entstehungsprozess gebunden sind, der für die Nutzer von Interesse ist. Beispielsweise das Beratungsunternehmen, dass seine Kunden von der Gründung bis zur Globalisierung ihrer Firma betreut. Oder die Filmproduktion, die ein breites Leistungsspektrum vom Casting über die Produktion bis hin zur Vermarktung anbietet. Stehen Inhalte, die einem bestimmten Handlungsverlauf folgen, im Mittelpunkt des Interesses, bietet es sich an, diesen Verlauf auch in der Inhaltsstruktur abzubilden. Die Firma Freitag, die Taschen und Accessoires aus LKW-Planen fertigt, verdankt ihren Erfolg nicht nur dem alltagskompatiblen De120

Umsetzung

sign, sondern auch der ungewöhnlichen Fertigung ihrer Produkte. Diesem Differenzierungsmerkmal entsprechend kann der Nutzer auf der Freitag-Website auch den Entstehungsprozess der Produkte – vom Sammeln der Planen bis hin zur Auslieferung an die Shops – anhand der Inhaltsstruktur mitverfolgen. Eine ähnliche Umsetzung findet man auf der Website der Agentur »magenta«. Hier wird das zentrale Leistungsangebot, die Entwicklung kreativer Kommunikationslösungen, durch die Hauptrubriken »Think« – »Create« – »Produce« abgebildet. Potenzielle Kunden gewinnen dadurch sofort einen Überblick über die agenturspezifische Herangehensweise und deren Kompetenzfelder. Unabhängig davon, für welche Inhaltsstruktur Sie sich entscheiden, sollte das Resultat immer eine schlüssige Ableitung aus den fol-

Abbildung 6 Schema einer Sitemap: Die verschiedenen Ausprägungen der Inhaltsbereiche sind hier durch verschiedene Formen gekennzeichnet. 왗

Homepage 0.1 Metafunktion

1. Inhaltsbereich 1.1 Unterbereich 1.2 Unterbereich

2. Inhaltsbereich

2.1 Unterbereich (mit DBAnbindung)

1.3 Unterbereich

2.2 Unterbereich

1.4 Unterbereich

2.3 Unterbereich

3. Inhaltsbereich

0.2 Metafunktion

0.3 Metafunktion

0.4 Metafunktion

4. Inhaltsbereich (Tool)

3.1 Tool 3.2 Tool 3.3 Tool

4.1 Unterbereich (mit DBAnbindung)

genden zentralen Fragestellungen sein: Welche Sichtweise auf die Inhalte soll den Nutzern eröffnet werden? Welche inhaltlichen Schwerpunkte sollen auf der Website herausgestellt werden? 왘

Sitemaps Die verbreitetste Form, die Inhaltsstruktur im Überblick darzustellen, sind Sitemaps. Sie sind schnell angefertigt und, mit der entsprechenden Software wie z.B. Inspiration oder Visio, einfach zu erstellen. Sitemaps sind für alle Projektbeteiligten ein wichtiges Arbeitsdokument, da sie in schematischer Form die komplette Struktur der Website abbilden. Zudem lassen sich Sitemaps relativ leicht erweitern, so dass es damit möglich ist, das Team regelmäßig auf den neuesten Projektstand zu bringen. Sie können den Informationsgehalt und damit auch das Verständnis Ihrer Sitemaps aufwerten, wenn Sie ein paar Richtlinien berücksichtigen: 왘 Zum Zeitpunkt der Grobkonzeption sollte die Sitemap alle Inhaltsbereiche mindestens bis in die zweite Ebene abbilden. Das bedeutet, dass alle Hauptrubriken inklusive

왘

왘

der darunterliegenden Inhalte ersichtlich sein sollten. Zunächst kann jedes Kästchen einen ganzen Bereich darstellen. In der Feinkonzeption wird dann jedem Screen (-Zustand) ein eigenes Kästchen zugewiesen. Die einzelnen Navigationsebenen sollten klar ersichtlich sein. Wenn z.B. »Jobs« eine Unterrubrik von Karriere darstellt, sollte das aus der Baumstruktur erkennbar werden. Idealerweise trägt die Inhaltsstruktur schon ein einheitliches Wording der einzelnen Bereiche. Falls Sie noch mit Arbeitstiteln agieren, haben Sie zumindest schon einen Überblick gewonnen, welche Navigationspunkte zu texten sind. Sobald Sie eine konkrete Vorstellung von der Ausprägung der einzelnen Inhalts- und Funktionsbereiche haben, sollten Sie diese grafisch kenntlich machen. Ein Inhaltsbereich, der vorwiegend aus statischen Inhalten wie Text und Bild besteht, sollte sich grafisch von einem Bereich unterscheiden, hinter dem sich ein aufwändiges RechnerTool verbirgt. Empfehlenswert ist, für verschiedene Inhalts- und Funktionsbereiche wie z.B. Tools, Foren, Spiele etc. vorab defi-

Inhalte und Funktionen

121

IQ Flashintro

IQ Homepage

text

Music

Mode

Fun

Real

review: prewiew

heart: smart

gossip: topic

hifi: lofi

Dein Beitrag

Tools & Tricks

Chefredaktion

talk

Legende Statistischer Inhaltsbereich

test

Music

Mode

Fun

Real

Ranking

shop

User-generierter Inhaltsbereich

FormularInhalte Music

Mode

Fun

Real

Shopping bag

date

ausgewählte Stadt

Dein Event-Tip

mail

Abbildung 7 Sitemap von www.iq-world.com: Die verschiedenen Funktionsbereiche wie z.B. Transaktionsbereiche oder User-generierte Bereiche sind hier durch Icons gekennzeichnet. 왖

nierte Symbole einzuführen und die Sitemap mit einer Legende zu versehen. Dadurch hat man schnell einen Überblick darüber, wie die Bereiche formal ausgeprägt sind, und kann bösen Überraschungen vorbeugen: etwa, dass der Programmierer erst 122

Umsetzung

zum Zeitpunkt der Produktion realisiert, dass sich hinter dem »harmlosen« Kästchen »Chartanalyse« ein hochkomplexes JavaApplet mit Anbindung an externe Datenbanken verbirgt.

Benutzerführung Wie schon an verschiedenen Stellen erwähnt, werden Navigation und Inhaltsstruktur einer Website maßgeblich dadurch bestimmt, wie Sie die verschiedenen Nutzer durch das Angebot führen wollen. Die Interessen einzelner Zielgruppen spielen dabei ebenso eine zentrale Rolle wie das Informationsbedürfnis unterschiedlicher Nutzer (siehe auch Kapitel Navigation auf Seite 79). Bestenfalls wurde schon in der Kreationsphase eine passende Navigationsform entwickelt. Der nächste Schritt zur Umsetzung sollte dann ein Abgleich mit den tatsächlichen Nutzeranforderungen sein. Haben Sie sich beispielsweise für eine klassisch hierarchische Navigationsform entschieden, weil sich die MainIdea dadurch am deutlichsten übertragen lässt, geht es nun darum, ob diese Navigationsform, wenn sie mit Inhalten gefüllt wird, alle Anforderungen der Nutzer bedient. Hierzu ein Beispiel: Für die Website eines Modeanbieters wird eine Navigation konzipiert, die den Einstieg in verschiedene Produktgruppen auf erster Ebene ermöglicht. Sie planen für jede Produktgruppe wie »Hosen«, »Kleider« oder »Mäntel« atmosphärische Unterbereiche mit entsprechender visueller Anmutung. Dies wäre zweifellos eine geeignete Navigationsform für eine Nutzergruppe, die nach konkreten Kleidungsstücken sucht und erst einmal das Angebot durchstöbern möchte. Damit sind jedoch nicht alle denkbaren Nutzungsmotive abgedeckt. Zusätzlich sollten Sie überlegen, wie sie Nutzer, die möglicherweise nach Ihrer Lieblingsfarbe auswählen oder Kleidung für einen bestimmten Anlass suchen, an die geeigneten Inhalte heranführen.

Nutzendimensionen Klarheit über die verschiedenen Aspekte der Benutzerführung schafft die Überlegung, welche Dimensionen die Website für unterschiedlichen Nutzergruppen eröffnet. Hierzu sollten Sie sich fragen, was die einzelnen Zielgruppen veranlassen könnte, die Website regelmäßig zu besuchen. Meist erweisen sich die Motive und damit auch der Nutzen für die jeweiligen Zielgruppen als sehr unterschiedlich. Der eine wird vielleicht durch andere Medien auf die Website aufmerksam und ist von reiner Neugier getrieben, ein anderer Nutzer sucht vielleicht aus beruflichen Gründen exklusive Pressemeldungen. Der daraus resultierende Nutzen könnte also im ersten Fall Unterhaltung, im zweiten die unkomplizierte Informationsbeschaffung sein. Anhand der verschiedenen Nutzendimensionen lassen sich die Anforderungen an Navigation und Inhaltsstruktur definieren und entsprechende Lösungsansätze entwickeln. Sie können beispielsweise anhand der Überlegungen überprüfen, ob die geplante Navigation alle Nutzeranforderungen erfüllt und wie alternative Zugänge auf Inhalte zu gestalten sind.

Inhalte und Funktionen

123

Suche nach der geeigneten Benutzerführung 1. Überblick der Zielgruppen Führen Sie die wichtigsten Zielgruppen der Website auf. Meist wurden diese schon im Rahmen des Kunden-Briefings oder der Strategieentwicklung festgelegt. 2. Zielgruppenmotive Konzentrieren Sie sich auf die Kernzielgruppen und überlegen Sie sich, was die jeweiligen Hauptmotive für den wiederholten Besuch der geplanten Website sein könnten. Für einen Studenten könnte zum Beispiel das Hauptmotiv ein zukünfiger Job sein, für einen Verbraucher verbesserte Serviceleistungen zu seinem Produkt. 3. Zielgruppennutzen Leiten Sie anhand der Zielgruppenmotive den möglichst größten Nutzen ab, den die Website bieten könnte. Für potenzielle Bewerber bestünde ein Nutzen darin, auf detaillierte Jobbeschreibungen und Stellenanzeigen zu stoßen, die ihnen die Bewerbungsentscheidung erleichtern. Für Verbraucher stellt möglicherweise die Zeitersparnis den größten Nutzen dar.

124

Umsetzung

4. Nutzungsanforderungen Formulieren Sie die notwendigen Anforderungen, die sich daraus für die Website ergeben. Der potenzielle Bewerber ist sicherlich bereit, durch das gesamte Angebot zu navigieren. Der Verbraucher, für den Effizienz im Vordergrund steht, möchte ohne große Umwege zum Ziel gelangen. 5. Zugangswege Nachdem Sie die einzelnen Anforderungen herausgearbeitet haben, sollte nun ein Abgleich mit der geplanten Navigationsform stattfinden. Bedient die Navigation alle Nutzungsanforderungen? Oder müssen möglicherweise zusätzliche Zugangswege, z.B. in Form von zusätzlichen Links, Suchoptionen oder Ähnlichem, angeboten werden?

Nutzer-Szenarien Zur Veranschaulichung der verschiedenen Zugangswege und Navigationsformen ist es hilfreich, sich verschiedene Nutzer-Szenarien zu überlegen. Diese bieten nicht nur Anregungen für die Ausgestaltung des Site-Aufbaus, sie erleichtern Ihnen auch die Argumentation gegenüber dem Kunden. Denn Nutzer-Szenarien beschreiben nicht nur die Zugangswege als formale Navigationsform, sondern skizzieren auch beispielhaft eine bestimmte Anwendersituation. Für den Entwurf von Nutzer-Szenarien gibt es verschiedene Herangehensweisen. Je nachdem, welche Denkweise Ihnen eher entspricht, können Sie zur Beschreibung der Benutzerführung personalisierte oder typologisierte Nutzer-Szenarien einsetzen. Personalisierte Nutzer-Szenarien beschreiben eine idealisierte Navigation durch die Website am Beispiel einer repräsentativen Zielgruppenperson. Ein personalisiertes Nutzer-Szenario, das die Benutzerführung durch die Website eines Finanzdienstleisters beschreibt, könnte beispielsweise so aussehen: Hendrik Menz, diplomierter Volkswirt und Berufsanfänger, besucht die Website www.cashflow.de, um sich über passende Anlageformen zu informieren. Da er sich noch nicht für eine der angebotenen Inhaltsrubriken entscheiden kann, wählt er aus einem der Teaser eine Headline aus, die Antworten auf die Frage »Wie finde ich die richtige Anlageform?« verspricht. Der Link führt ihn zu einer Inhaltsseite, die einen Überblick profitabler Anlageformen zeigt. Das Thema »Fondsgebundene Lebensversicherungen« weckt seine Aufmerksamkeit und verlinkt ihn zu einer Unterrubrik des Bereichs Versicherungen. Er findet dort alle notwendigen In-

formationen. Zusätzlich kann er über die Subnavigation des Bereichs begleitende Informationen zum Steuerrecht oder zu weiteren Lebensversicherungsmodellen aufrufen ... Dieses Szenario beschreibt einen Nutzer, der zwar zielorientiert Informationen sucht, aber möglicherweise nicht die Geduld oder Motivation aufbringen wird, sich durch alle Inhaltsbereiche hindurchzuklicken, um an die richtige Information zu gelangen. Für eine solche Ausgangssituation werden als zusätzlicher Einstieg Teaser eingesetzt, die den Nutzer direkt zum Inhalt seines Interesses führen. Die fiktive Person »Hendrik Menz« steht für einen Nutzer, der ein zielgerichtetes Informationsbedürfnis hat. Eine typologische Beschreibung dieses Nutzertypus könnte folgendermaßen aussehen: Der zielorientierte Nutzer sucht Antworten auf eine bestimmte Fragestellung. Dabei können die Fragen auf eine konkrete Information abzielen, wie z.B. die Rentenreform bzw. eine Autoversicherung, oder aber in einem inhaltsübergreifenden Kontext stehen, wie z.B.: »Wie finde ich die richtige Anlageform? Wie sichere ich mir einen angenehmen Lebensabend?« Im ersten Fall findet er den Einstieg in die Site über verschiedene Suchoptionen. Nutzern, die zwar eine konkrete Frage haben, aber nicht genau wissen, wonach sie suchen sollen, wird ein Fragenkatalog in Form eines Pull-down-Menüs angeboten, das sie auf ein vorgefiltertes Inhaltsangebot führt. Von dort gelangen sie in die entsprechenden Unterbereiche und können über die angebotene Subnavigation nach begleitenden Informationen suchen.

Inhalte und Funktionen

125

Abbildung 8 Die Homepage von www.aral.de bietet verschiedene Zugangswege auf die Inhalte: über die Hauptnavigationsleiste, über die TeaserBoxen und über die Pull-downMenüs für Business- und Privatkunden. 왗

In diesem Beispiel steht eine von mehreren typologisierten Navigationsweisen im Vordergrund. Einstimmiges Ziel beider Beschreibungen ist, die vorgesehenen Navigationsformen in einer bestimmten Anwendersituation darzustellen. Dadurch gewinnen Sie einerseits einen

Zugang für alle Was im realen Leben als sozialer Konsens gilt, verliert im Netz nicht seine Gültigkeitet. Nicht jeder Nutzer handelt und denkt gleich. Es versteht sich deshalb fast von selbst, dass eine Website verschiedene Zugänge auf gleiche Inhalte anbieten sollte.

Links zu Website-Navigation Unter dem Usability-Portal www.usableweb.com finden Sie eine umfangreiche Link-Sammlung zu Navigation und anderen Kernthemen der Website-Konzeption und -Gestaltung. 126

Umsetzung

Überblick, welche Zugangswege gebraucht werden, und können darüber hinaus überprüfen, ob Ihr Navigationskonzept schlüssig ist. Navigationsbeschreibung Oftmals ist es nicht ganz leicht, die Navigationsformen einer Website theoretisch zu beschreiben. Dies ist aber häufig notwendig, will man eine konkrete Vorstellung von einer Website vermitteln, die zu diesem Zeitpunkt nur in ersten Ansätzen existiert. Der Kunde braucht jedoch eine Grundlage für die Abnahme oder Beauftragung der weiteren Produktion. Ebenso benötigen Designer oder Programmierer eine Arbeitsgrundlage, um die Website sinnvoll umsetzen und die Arbeitsaufwände realistisch einschätzen zu können. Hierzu bietet sich eine Kombination von schematischen Screen-Layouts mit ergänzenden Kommentaren an. Meist geht die Entwicklung des Navigationskonzepts einher mit der unmittelbaren grafischen Umsetzung. Auf Grundlage der Inhaltsstruktur wird eine Navi-

gation entworfen, die wiederum mit den Anforderungen abgeglichen und umgeformt wird. Wenn dann im Zuge des Basislayouts die Navigationsformen und Zugangswege feststehen, kann ein schematischer Screen-Aufbau in das Grobkonzept integriert und mit Texterläuterungen versehen werden. Die Beschreibung der Navigationsformen auf der Aral-Website (Abbildung 8) könnte im Grobkonzept beispielsweise so aussehen: Die Dach-Site www.aral.de bietet auf der Homepage folgende Zugangswege: Die Hauptnavigation wird als Menüleiste mit ausklappbaren Subnavigationslayern umgesetzt und ermöglicht damit einen direkten Zugriff auf alle Inhalte der zweiten Navigationsebene. Zusätzlich werden für die beiden Kernzielgruppen (Privat- und Geschäftskunden) so genannten »Quick Navigation«-Menüs in Form von Pull-down-Menüs angeboten. Im Teaser-Bereich werden verschiedene Textund Bild-Teaser platziert, die direkten Zugriff auf ausgewählte Inhalte aus den Unterbereichen wie z.B. aktuelle Meldungen, Shop-Produkte oder Events ermöglichen.

Site-Aufbau Der Grundaufbau der Website ergibt sich aus den inhaltlichen, funktionalen, technischen und visuellen Anforderungen. Auf Grundlage eines Look & Feels, zu dem bereits erste Skizzen, grafische Studien oder Moodboards vorliegen, fügen sich die Inhaltsstruktur und das Navigationskonzept zu einem konkreten SiteAufbau zusammen. Damit wird der formale Rahmen einer Site definiert, das heißt übergeordneten Funktionen wie Navigation, Log-in-

Feldern oder Suchoptionen wird ein fester Bereich im Screen-Aufbau zugewiesen. Dies ist vornehmlich Aufgabe der ScreenDesigner, aber auch hier kann die Zusammenarbeit von Design und Konzept effektiv und im Sinne der Website sein. Meist hat der Konzeptverantwortliche die Anwendung zumindest schon mental durchgespielt, da er mit den Inhalten intensiver vertraut ist und funktionale Unwägbarkeiten im Vorfeld einschätzen kann. Durch regelmäßige Absprachen kann z.B. sichergestellt werden, dass der vorgesehene Navigationsbereich auch bei Einführung einer dritten Hierarchieebene funktioniert oder dass im Content-Bereich alle geplanten Darstellungsformen nutzerfreundlich untergebracht werden können. Die Aufgabe der Konzeption besteht beim Site-Aufbau im Wesentlichen darin, feste Screen-Bereiche für übergeordnete Funktionen und Inhalte zu definieren. Funktionale Bereiche Eindeutig definierte Funktionsbereiche erleichtern nicht nur die Orientierung für den Nutzer, sie tragen auch zu einem konsistenten Gesamteindruck der Website bei. Derjenige, der den Site-Aufbau gestaltet, sollte rechtzeitig einen Überblick darüber erhalten, welche Funktionsbereiche benötigt werden. Es ist deshalb hilfreich, sich vorab zu überlegen, auf welche Funktionen der Nutzer von jeder Inhaltsseite aus zugreifen soll, und diese Funktionen dann zu klassifizieren. Zu den wichtigsten Funktionsbereichen zählen: 왘 Hauptnavigation Hierunter werden in der Regel alle Navigationspunkte zusammengefasst, die einen Zugang auf die Inhalte der Website ermöglichen, wie z.B. Menüleisten, Navigations-

Inhalte und Funktionen

127

Abbildung 9 Auf der Website www.gzsz.de wird der Notifikationsbereich dazu genutzt, allgemeine oder persönliche Nachrichten für die Community zu generieren. 왖

왘

왘

128

Frames oder Layer-Navigationen. Wichtig für die Gestaltung dieses Bereichs ist die Entscheidung darüber, wie viele Ebenen in der Hauptnavigation abgebildet werden. Gerade der Einsatz von ausklappbaren Subnavigations-Layern stellt Designer mitunter vor Herausforderungen, da die Layer zwar nur per Klick oder Roll-over sichtbar werden, aber dennoch der Raum für den ausgeklappten Zustand mit einkalkuliert werden muss. Alternative Zugänge Häufig gibt es neben der Hauptnavigation noch alternative Zugänge, z.B. »Quick Navigation«-Pull-downs, scrollbare Bildleisten oder auch Teaser-Bereiche. Hierzu sollten Sie vorab festlegen, welche Zugänge wann und wo auf der Website präsent sein sollen. Die Teaser tauchen möglicherweise nur auf der Homepage auf, das Pull-downMenü ist vielleicht immer zugänglich. Metanavigation Übergeordnete Funktionen wie z.B. die Hilfefunktion, der Kontakt-Link oder der Suche-Button sollten von jedem Zustand der Website erreichbar sein und einen konstanten Bereich innerhalb der Website belegen. Es erleichtert die Orientierung, Metafunktionen optisch von der Hauptnavigation abzukoppeln.

Umsetzung

왘

왘

왘

Formularelemente Mitunter gibt es neben der Metanavigation auch übergreifende Funktionen zu berücksichtigen, die bestimmte Formularelemente wie Eingabefelder oder Pull-down-Menüs erfordern (beispielsweise für Suchoptionen, Registrierungen oder Kursabfragen). Um diese Bereiche formgerecht in den Site-Aufbau integrieren zu können, sollten Sie möglichst frühzeitig die Anzahl und Form der benötigten Elemente klären. Notifikationsbereiche Gelegentlich findet man auf Websites einen ausgewiesenen Bereich, der für die Generierung aktueller oder personalisierter Nachrichten vorgesehen ist (Abbildung 9). Diese so genannten Notifikationsbereiche erfordern einen fest definierten Platz innerhalb des Screen-Aufbaus. Hierzu sollte man sich frühzeitig bezüglich des erforderlichen Umfangs und der technischen Rahmenbedingungen informieren, denn eine nachträgliche Integration oder Änderung von Notifikationsbereichen kann unter Umständen Korrekturen am gesamten Site-Aufbau erforderlich machen. Banner-Bereich Was für die Anbieter von Websites ein gängiges Refinanzierungsmodell darstellt, kann für Designer zum unvereinbaren Gestaltungselement werden. Sofern auf der Web-

왖 Abbildung 10 Auf www.nitro.de bewegen sich die Nutzer durch ein Powderpark-Szenario.

site ein Bereich für die Banner-Platzierung zu berücksichtigen ist, sollte man vorab klären, in welchem Umfang und in welcher Form ein Banner-Bereich einzuplanen ist. Besteht beispielsweise die Kundenanforderung, dass die Banner immer sichtbar sein sollen, kann man frühzeitig den Site-Aufbau dahingehend ausrichten. Inhaltsdramaturgie Neben den obligatorischen Funktionsbereichen hat auch die Inhaltsdramaturgie einen entscheidenden Einfluss auf die Gestaltung des Site-Aufbaus. Damit ist weniger die Content-Inszenierung im Detail gemeint, sondern der dramaturgische Rahmen, aus dem sich bestenfalls die Anordnung und das Zusammenspiel von Site-Bereichen ergibt. Zum Verständnis einige Beispiele: Das Snowboard-Label »Nitro« inszeniert auf seiner Website ein Powderpark-Szenario und bietet damit der Snowboard-Szene ein authentisches Forum. Aus dem Bewusstsein

Abbildung 11 Der Site-Aufbau des Shops von www.nitro.de ermöglicht es, bis zur vier Produkte miteinander zu vergleichen. 왖

heraus, dass in dieser Szene nicht ein einzelnes Produkt, nämlich das Snowboard, sondern das Gesamt-Outfit stimmen muss, wurde hier eine adäquate Inhaltsdramaturgie abgeleitet. Zum einen zeigt sich die Dramaturgie im Gesamtaufbau der Site: Der Nutzer navigiert über eine Schneelandschaft, die im Hauptfenster permanent sichtbar bleibt und damit wie eine Hintergrundkulisse für die ausgewählten Inhaltsbereiche wirkt, die in einem zweiten, kleineren Browser-Fenster dargestellt werden. Darüber hinaus wird der Anspruch, nicht nur Produkte, sondern ebenfalls das dazugehörige Lebensgefühl mit zu verkaufen, auch mit dem Aufbau des Produktkatalogs eingelöst. Das Shop-Fenster besteht aus vier Bereichen, in denen jeweils Produkte aufgerufen werden. Dadurch hat der Nutzer die Möglichkeit, Produkte zu vergleichen oder zu kombinieren. Es steht also nicht so sehr das Produkt im Einzelnen, sondern die Kombination und Vergleichbarkeit im Vordergrund, die durch den SiteAufbau unterstützt werden.

Inhalte und Funktionen

129

Abbildung 12 왘 Der Aufbau der Website www.topdeq.com ermöglicht die parallele Ausführung verschiedener Funktionen.

Einen ähnlichen Ansatz verfolgt auch die Website des Büroausstatters »Topdeq«. Der Aufbau der Website unterstützt das Nutzer-Szenario »Finden – Anschauen – Kaufen – Ergänzen«. Die Website besteht aus vier Frames, die jeweils für eines dieser Motive stehen und die entsprechenden Funktionalitäten anbieten. Im »Find«-Frame wird ein Produkt ausgewählt, im »Look«-Frame wird das ausgewählte Produkt dargestellt, im »Buy«-Frame kann man seinen Warenkorb mitverfolgen, und im »Mix«-Frame

Nutzer-Szenarien als Orientierung Bei der Entwicklung der geeigneten Inhaltsdramaturgie können Nutzer-Szenarien eine Orientierungshilfe bieten. Wenn Sie sich vorab überlegt haben, wie sich verschiedene Nutzertypen durch die Site bewegen, können Sie das Zusammenspiel von Inhalts- und Funktionsbereichen darauf ausrichten. Ihre Überlegungen sollten sich darauf konzentrieren, den optimalen Rahmen für diese Szenarien zu schaffen. 130

Umsetzung

werden passende Produkte angeteasert. Diese Vierteilung ermöglicht es den Nutzern, parallel verschiedene Optionen wahrzunehmen, ohne den Gesamtaufbau der Site zu verlassen. Die Inhalte wurden hier also zu einer Dramaturgie verdichtet, die den Rahmen für das intentionierte Nutzer-Szenario absteckt. Eine recht verbreitete Form, Inhalte kontextuell zu verknüpfen, um dadurch eine mehrdimensionale Inhaltsdramaturgie zu erzielen, sind Teaser-Bereiche. Text-Intros zu verwandten Themen, relationale Links oder auch animierte Banner findet man nicht nur auf klassischen Nachrichten-Websites wie fokus.de, yahoo.com oder cnn.com, sondern zunehmend auch auf Corporate Websites. Auf der Allianz-Website ist der Teaser-Bereich integraler Bestandteil des Site-Aufbaus. Hier findet der User Inhalts-Teaser zu ergänzenden Informationen wie z.B. BerechnungsTools, ähnliche Produkte oder spezifische Serviceangebote.

Abbildung 13 Die Teaser auf www.allianz.de sind integraler Bestandteil des SiteAufbaus und fördern die kontextuelle Verknüpfung von Inhalten – unabhängig von der Hauptnavigation. 왗

Mit der Inhaltsdramaturgie entwickeln Sie übergeordnete Regeln für den Aufbau und die Verknüpfung von Inhalts- oder Funktionsbereichen. Wenn Sie also den Grundaufbau der Site definieren, sollten Sie – bevor Sie konzeptionell in einzelne Inhaltsbereiche einsteigen – über mögliche Verknüpfungen oder Gleichzeitigkeiten in der Inhaltsdarstellung nachdenken. Werden die Regeln einmal definiert, ergibt sich die Darstellung einzelner Inhalte dann fast von selbst. Schematischer Screen-Aufbau Um die wichtigsten Funktionen, Inhaltsbereiche und Navigationsformen der Website im Grobkonzept beschreiben zu können, benötigt man meist erläuternde Skizzen, die dann auch als Briefing-Grundlage für Designer und Programmierer dienen können. Hierzu bieten sich schematische Screen-Aufbauten an. Der Vorteil dieser Skizzen ist, dass Sie zwar alle notwendigen Informationen enthalten, aber dennoch ziemlich viel Interpretationsspielraum für

die Site-Gestaltung eröffnen. Designer, die es gewohnt sind, auf Grundlage von schematischer Skizzen zu gestalten, empfinden das häufig als Arbeitserleichterung, da damit alle relevanten Inhalts- und Funktionsbereiche festgehalten sind und sie sich ganz auf die kreative Umsetzung konzentrieren können. Auch für Präsentationen beim Kunden, eignen sich solche Skizzen, um die wichtigsten Funktionen und Inhalte schematisch darzustellen. Dies ist vor allem dann von Vorteil, wenn ein Projekt sehr komplex ist und der Kunde zuvor noch keine Screen-Layouts gesehen hat. In Diskussionen über konkrete Screen-Layouts verliert man dabei möglicherweise den Blick für das Wesentliche und verstrickt sich in grafischen Details, bevor man überhaupt den Grundaufbau der Site ausreichend erläutern konnte. In diesen Fällen ist es empfehlenswert, das Grobkonzept zunächst anhand von schematischen Skizzen zu erläutern und anschließend die konkrete Umsetzung am Beispiel der Screen-Layouts zeigen (Abb. 14 u. 15).

Inhalte und Funktionen

131

Pixelpark-Logo

WER

WAS

Vision Fakten Management Geschäftsfelder Kunden Partner Standorte Mitarbeiter Presse Investor Relations

(Sprachauswahl)

„Move first.“

Pro Hauptbereich wird ein repräsentatives Flashmovie geladen

WIE

Contentbereich Aufbau und Subnavigation des Contentbereichs variiert entsprechend dem ausgewählten Hauptbereich

Kontakt / News / Jobs

Pixelpark weltweit

Abbildung 14 Der Grundaufbau von www.pixelpark.com, vorher und nachher: Der schematische Screen-Aufbau diente den Designern als funktionale Grundlage für das Basislayout der Website. 왖

Home

Novartis.com

Kontakt

Novartis-Logo Über uns Gesellschafter Jobs Aktionäre Presse-Club Gen-Forum

Informationsteaser zum ausgewählten Inhalt

Direktzugriff - Produkte - Therapiegebiete

Inhaltssensitiver Teaserbereich:

Contentbereich Produktinformationen und Produktlinks zum ausgewählten Inhalt

Subnavigation des ausgewählten Inhaltes

Abbildung 15 Möglicher Aufbau einer schematischen Skizze für die Website www.novartis.de 왖

132

Umsetzung

Abbildung 16 Der Produktkatalog auf www.sony.de basiert auf standardisierten statischen Seitenaufbauten. Für einzelne Produkt-Highlights werden aufwändigere Inhalts-Features angeboten. 왗

Inhaltsformen Wenn die grobe Inhaltsstruktur und der SiteAufbau steht, lautet die nächste Aufgabe, die Kästchen der Sitemap mit konkreten Inhalten und Funktionen zu füllen. Natürlich wäre es zu diesem Zeitpunkt verfrüht, alle Inhaltsseiten der Website zu definieren, zumal oft auch noch nicht das vollständige Material vorliegt. Wichtiger ist es, im Grobkonzept übergeordnete Regeln für verschiedene Inhaltsformen festzulegen. Um dieses Regelwerk zu schaffen, ist ein Abgleich von Inhalten und funktionalen Anforderungen notwendig. Es empfiehlt sich, hierzu die Sitemap nach ähnlich ausgeprägten Inhalten durchzusehen und für diese Inhalte eine einheitliche Inhaltsform zu entwickeln. Inhalte mit ähnlicher Ausprägung können z.B. Produktdarstellungen sein, die sich aus jeweils gleichen Inhaltselementen zusammensetzen; oder aber Inhaltsbereiche, die ähnliche Funktionalitäten erfordern. So könnte beispielsweise der News-Bereich, der im Wesentlichen

aus einer Headline, dem Pressetext und einer Download-Version besteht, ähnlich aufgebaut sein wie die Stellenangebote, die ähnliche Elemente und Funktionen beinhalten. Wenn Sie die Sitemap unter diesen Gesichtspunkten durchdekliniert haben, können Sie für jeden Inhaltsbereich die angemessene Inhaltsform entwickeln. Die geläufigsten Inhaltsformen lassen sich grob zwei verschiedenen Ausprägungen zuordnen: Statische Text-/Bild-Darstellungen Die verbreitetste Form der Inhaltsaufbereitung ist die Darstellung in Text und Bild, gegebenenfalls noch ergänzt um Download-Funktionen. Insbesondere umfangreiche und stark informationslastige Websites beschränken sich meist auf diese Inhaltsform. Dies ist darauf zurückzuführen, dass solche Websites einen hohen Aktualisierungsaufwand haben und deshalb

Inhalte und Funktionen

133

Abbildung 17 Die Website der Süddeutschen Zeitung (www.sueddeutsche.de) erfordert einen hohen Aktualisierungsaufwand. Deshalb beschränkt sich der Großteil des Inhaltsangebotes auf statische Text-/Bild-Darstellungen. 왖

einfach zu pflegen sein sollten. Sonderformen, wie z.B. interaktive Flash-Movies, werden in der Regel nur temporär eingesetzt, da sie einen höheren redaktionellen Aufwand erfordern. Hinzu kommt auch, dass nahezu alle umfangreichen Websites auf Grundlage eines Content-Management-Systems umgesetzt werden, wodurch sich die Inhaltsformen auf standardisierte – und bestenfalls wenige – Templates beschränken. Text-/Bild-Darstellungen bieten sich also bevorzugt an, wenn Sie ein breites Produktoder Informationsangebot auf der Website umsetzen müssen, das weitestgehend standardisiert werden soll. Ein weiteres Argument für diese Inhaltsform liegt manchmal im darzustellenden Inhalt selbst. Die besonderen Features eines Autos ließen sich sicherlich auch spannender als in illustrierter Textform darstellen, die Vorteile eines Bundesschatzbriefes hingegen eher nicht.

134

Umsetzung

Abbildung 18 Die Vorzüge des neuen Siemens-Handys SL45 werden unter www.mobiles.siemens.com.au in Form von Alltagsszenarien gezeigt. 왖

Interaktive Features Marketingorientierte Websites, die eher auf Fokussierung statt auf Masse setzen, bieten meist mehr Spielraum in der Umsetzung der Inhalte. So lassen sich beispielsweise für einzelne Produkt- oder auch Unternehmensdarstellungen interaktive Features gestalten, die den Inhalt anschaulich verdeutlichen und darüber hinaus die Nutzer auch emotional in ein Thema involvieren. Im Zuge des mittlerweile gängigen Einsatzes von Flash findet man viele Websites oder ausgewählte Bereiche, die animiert und interaktiv umgesetzt sind. Zur Einführung des neuen Handy-Modells »SL45« bietet die internationale SiemensWebsite verschiedene Flash-Movies an, in denen die Highlights und Einsatzmöglichkeiten des Produktes spielerisch erklärt werden. Im Kontext verschiedener Alltagssituationen werden die Vorzüge und Leistungen in eine kurze Handlung integriert.

Abbildung 19 Die Firmengeschichte auf www.usm.com in Form eines interaktiven Zeitstrahles 왗

Die Website des Möbelsystemherstellers USM bleibt auch in der Darstellung der Unternehmensinformationen dem exklusiven Markenimage treu. Die Firmengeschichte, Produktentwicklungen und Auszeichnungen werden hier anhand eines dynamischen Zeitstrahls dargestellt. Den Umsetzungsmöglichkeiten sind also – sofern Zeit, Budget und Technik stimmen – keine Grenzen gesetzt. Wichtig ist unter konzeptionellen Gesichtspunkten, dass die geplanten Features den Inhalten angemessen sind und einen tatsächlichen Informationsmehrwert schaffen. Interaktion um des bloßen Klickens willen wird potenzielle Nutzer eher verschrecken als binden. Sofern Sie für die Umsetzung einzelner Inhaltsbereiche interaktive Features einplanen, sollten Sie Ihre Vorschläge rechtzeitig mit den beteiligten Designern und Programmierern diskutieren. Ideen, die sich auf Papier gut lesen, sind mitunter schwierig umzusetzen – und umgekehrt. Ebenso kann es sein, dass der technische Aufwand höher ist als angenommen und eine andere Lösung gefunden werden muss.

Beschreibung der Inhaltsbereiche Für die Erstellung des Grobkonzepts empfiehlt es sich, analog zur Sitemap vorzugehen und die einzelnen Inhaltsbereiche anhand von kommentierten Skizzen zu beschreiben. Für die Beschreibung statischer Bereiche, die vornehmlich aus Texten und Bildern bestehen, reichen kurze Erläuterungen wie dieser Beispieltext: Der Themenbereich »Standorte« bietet einführende Informationen zum weltweiten Wirkungskreis des Unternehmens sowie Informationen zu den einzelnen Geschäftsstellen, z.B. Anschriften, Umsatzzahlen, Arbeitsgebiete etc.

»Featurities« Interaktionen machen Sinn, wenn die dargestellten Inhalte dadurch tatsächlich an Informationsgehalt oder Unterhaltungswert gewinnen. Bloße Spielereien aus Ermangelung eines konsistenten Gesamtkonzepts laufen meist ins Leere und werden von den Nutzern als beliebig empfunden.

Inhalte und Funktionen

135

Abbildung 20 왘 Die Website www.sport1.de setzt sich dynamisch aus verschiedenen Content-Modulen zusammen.

Bei der Beschreibung interaktiver Features geht es darum, dem Kunden eine Vorstellung vom Feature zu vermitteln, ohne zu tief in funktionale oder visuelle Details einzusteigen. Da zu diesem Zeitpunkt bestenfalls grafische oder schematische Skizzen vorliegen, sollte die Beschreibung eher einen atmosphärischen Eindruck unterstützen. Hierzu eine Beispielbeschreibung für eine Guided Tour auf der Website eines fiktiven Technologiekonzerns: Der GlobiTech-Shuttle bietet – als Einstieg für das inhaltliche Angebot der Website – einen unterhaltsamen Schnelldurchlauf durch die Welt von GlobiTech. Neueinsteiger wie auch bestehende Kunden können sich auf diese Weise kurzweilig über die Wirkungs- und Arbeitsbereiche von GlobiTech informieren und erhalten gleichzeitig einen Querschnitt durch das inhaltliche Angebot der Website. Thematische »Stationen« des GlobiTechShuttles sind die Wirkungsfelder, in denen GlobiTech seine Marktführerposition und Innovationskraft behauptet. Diese werden unter folgenden Themenbereichen repräsentativ zusammengefasst:

136

Umsetzung

– Kundenorientierung – Globalität – Unternehmenskultur – Innovationen – Umweltschutz Wesentliches Merkmal eines Shuttles ist der Wechsel von Station zu Station und eine den Wechsel begleitende Vielzahl verschiedener erster Eindrücke. Das Szenario greift dieses Merkmal auf und setzt die Begleitphänomene des Shuttles in eine Benutzerführung um: Der Eingangs-Screen des GlobiTech-Shuttles ist eine Anmutung, die den Eindruck von Mobilität vermittelt. Vor einem statischen Hintergrund blenden in regelmäßigen Abständen »Fenster« auf, durch die der Nutzer Einblicke in die GlobiTech-Wirkungsfelder bekommt. Durch den Positionswechsel der Bilder wird der Eindruck von Räumlichkeit und Bewegung erzeugt. Inhalte der Fenster sind emotionalisierende Bilder, die das jeweilige Wirkungsfeld darstellen. Durch Klick auf eines Bilder erhält der Nutzer vertiefende Informationen zum ausgewählten Bereich.

왗 Abbildung 21 Beispiel für ein Content-Modul auf www.sport1.de

Arbeiten mit Content-Modulen In der Regel orientiert man sich bei der Entwicklung des Grobkonzepts vornehmlich an der Inhaltsstruktur, wobei jeder einzelne Zweig der Sitemap konkret ausformuliert wird. Man arbeitet sich quasi von oben (den Oberrubriken) nach unten in die einzelnen Inhaltsbereiche hinein. Dieses Vorgehen erweist sich bei den meisten Projekten als sinnvoll, zumal die Dokumentation des Grobkonzepts meist entsprechend der Inhaltsstruktur aufgebaut ist und sich dadurch auch für Projektunbeteiligte gut nachvollziehen lässt.

Schwieriger gestaltet sich das Grobkonzept für Websites, die primär eine formale Hülle für redaktionell erstellte Inhalte darstellen. Im Vergleich zu Corporate Websites, OnlineKampagnen oder Produkt-Sites, die unterschiedliche Inhaltsbereiche aufweisen, bestehen Informationsplattformen oder auch Online-Zeitungen häufig aus gleich ausgeprägten Inhaltsbereichen, die sich lediglich durch ihren Textinhalt unterscheiden. Bei solchen Aufgabenstellungen bietet sich eine eher formale Herangehensweise an. Hier steht nicht die Umsetzung konkreter Inhaltsbereiche im Vordergrund, sondern eher die Entwicklung formaler Module, die vom Kunden selbst mit verschiedenen Inhalten gefüllt werden können. Dementsprechend stellt auch das Grobkonzept eher einen Modulkatalog als die Durchdeklination der gesamten Inhaltsstruktur dar.

Inhalte und Funktionen

137

Vorgehensweise zur Entwicklung übergreifender Content-Module 1. Entwicklung der Inhaltsstruktur Erarbeiten Sie zunächst die grobe Inhaltsstruktur mit den Oberrubriken der Website. 2. Evaluation der formalen Anforderungen Auf Grundlage der Inhaltsstruktur können Sie gemeinsam mit dem Kunden diskutieren, welche möglichen Inhaltsformen berücksichtigt werden müssen. Die Inhaltsformen ergeben sich aus den einzusetzenden Elementen. Bei einer Nachrichten-Site, die überwiegend mit Text-/Bild-Elementen arbeitet und dazu gelegentlich Video-Downloads anbietet, werden sich die Inhaltsformen tatsächlich auf wenige beschränken. Anders verhält es sich beispielsweise bei EntertainmentPlattformen, die sowohl statische Text-/BildInhalte als auch Bildergalerien, interaktive Produkttests etc. beinhalten. 3. Entwicklung der Content-Module Entwickeln Sie auf Grundlage der formalen Anforderungen eine Reihe von Content-Modulen, die die formale Ausprägung, unabhängig vom dargestellten Inhalt, definieren. Ein Beispiel für ein Content-Modul wäre eine Video-Galerie, bei der die Modulbeschreibung lediglich die vorgesehenen formalen Elemente definiert – unabhängig davon, wo das Modul in der Inhaltsstruktur lokalisiert ist und mit welchen konkreten Inhalten es gefüllt wird.

138

Umsetzung

4. Aufbau des Grobkonzepts Erläutern Sie zunächst die Inhaltsstruktur der Website, indem Sie die Inhaltsrubriken und die darunter liegenden Bereiche inhaltlich beschreiben. Stellen Sie anschließend die einzusetzenden Content-Module vor. Da zu diesem Zeitpunkt meist keine konkreten Screen-Layouts vorliegen, reicht eine schematische Skizze, aus der die wesentlichen Elemente wie z.B. Texte, Tabellen, Videos etc. ablesbar sind. Führen Sie zum näheren Verständnis auch die entsprechenden Einsatzgebiete an. So könnte das Videogalerie-Modul beispielsweise sowohl unter der Rubrik »Musik« die neuesten Video-Clips beinhalten, aber auch in der Rubrik »Film« für die Ankündigung von Filmpremieren eingesetzt werden.

Funktionalitäten Ergänzend zu den Inhaltsformen sollten im Grobkonzept die wesentlichen Funktionalitäten festgelegt werden. Auch dabei ist zunächst eher konzeptioneller Weitblick als detaillierter Tiefgang gefragt. Damit die zukünftige Website einen homogenen Gesamteindruck aufweist und eingängig zu benutzen ist, gilt auch für die geplanten Funktionalitäten die Prämisse der Konsistenz. Für ähnliche funktionale Anforderungen sollten auch ähnliche Funktionsmodule eingeplant werden. Angenommen, Sie planen für die Website verschiedene Bestellfunktionalitäten, die von der Produktbestellung bis zur Anforderung von Pressemappen reichen, dann sollten die Bestellvorgänge nach einem ähnlichen Schema ablaufen. Wenn der Nutzer es von der Produktdarstellung her gewohnt ist, auf einen »Bestellen«-Button zu klicken, sich aber beim Anfordern einer Pressemappe durch drei Formulare und Übersichtsseiten klicken muss, wird er verwirrt oder unnachsichtig sein. Sie können die Funktionsvorgänge auf Ihrer Website vereinheitlichen, wenn Sie sich im Vorfeld einen Überblick verschaffen, welche Funktionalitäten geplant sind und welche Funktionsmodule dafür benötigt werden. Dazu ist es hilfreich, die einzelnen Kästchen im Strukturbaum durchzugehen und diese verschiedenen Funktionskategorien zuzuordnen. Neben der obligatorischen Verlinkung lassen sich die gängigsten Funktionen nach folgenden Kategorien gruppieren:

Transaktionen Hierunter werden alle Funktionen zusammengefasst, die Online-Geschäftsprozesse abbilden wie z.B. Buchungen, Bestellungen, Kontobewegungen oder Vertragsabschlüsse. Größere E-Commerce-Anwendungen werden meist auf Grundlage eines professionellen Shop- oder Banking-Systems umgesetzt. Das bedeutet für die Konzeption, dass man mitunter auf standardisierten Funktionen aufbauen muss, die – abhängig von der eingesetzten Software – nur in geringem Maße modifiziert werden können. In diesem Fall liegt die Herausforderung darin, die Funktionsstandards optimal zum Einsatz zu bringen, indem man beispielsweise durch geeignete Verknüpfungen von Inhalts- und Funktionsbereichen auf ein idealisiertes Nutzer-Szenario hinarbeitet. Unabhängig davon, ob Sie einen großen Online-Shop oder ein kleines Bestell-Center konzipieren, sollten Sie einige Punkte bedenken: 왘 Einbindung der Transaktionen Bevor Sie sich an die Ausarbeitung einzelner Funktionsmodule machen, sollte eine übergeordnete Entscheidung darüber gefallen sein, wie diese Funktionen auf der Website integriert werden. Gibt es lediglich separate Funktionsbereiche wie z.B. die Rubrik »Shop«, oder wird ein Bestell-Button in die Produktdarstellung integriert? Beide Möglichkeiten erfordern eine unterschiedliche Abfolge der Transaktionsvorgänge. 왘 Ablauf der Transaktion Ohne in die Tiefen einzelner Funktionselemente einzusteigen, sollten im Grobkonzept dennoch die wesentlichen Schritte des Transaktionsvorgangs nachvollzogen werden. Daraus wird beispielsweise ersichtlich,

Inhalte und Funktionen

139

왘

왘

ob eine ganze Abfolge von Formularen notwendig ist oder ein erweitertes Mail-Formular ausreicht. Zudem lassen sich anhand eines schematischen Ablaufs auch die notwendigen Feedback-Schleifen abschätzen. Ergänzende Funktionen Viele Transaktionen benötigen ergänzende Funktionen, die mitunter eine Synchronisation verschiedener Programme und Datenbankabfragen erfordern: z.B. die Reisebuchung, der eine Registrierung vorausgeht, oder eine Aktien-Order, die von einer kontextsensitiven Hilfe begleitet wird. Diese Funktionen sollten bei der Konzeption von Transaktionen gleich mitbedacht werden, damit sich bei der nachfolgenden Feinkonzeption keine funktionalen Tücken offenbaren. Technischer und logistischer Background Bevor Sie die Abläufe der Transaktionen konzipieren, sollten Sie sich vergewissern, dass auf Kundenseite die notwendigen Ressourcen vorliegen. Eine Bestellung per Nachnahme lässt sich nicht realisieren, wenn auf Verkäuferseite nicht genügend Zeit und Mitarbeiter zur Verfügung stehen. Ebenso muss für den geplanten Kauf über Kreditkarte das entsprechende technische Backend vorhanden sein, um die erforderlichen Sicherheitsstandards und Abfragemodalitäten gewährleisten zu können.

Kommunikation Dieser Kategorie werden alle Funktionen zugeordnet, die den Austausch mit dem Site-Anbieter, Partnern (beispielsweise Call-Centern) oder innerhalb einer Nutzergruppe ermöglichen. Das Angebot an Kommunikationsformen reicht je nach Umfang und Ausprägung der Website vom rudimentären E-Mail-For140

Umsetzung

mular bis hin zu Chat-Events mit WebcamÜbertragung. Ebenso vielfältig ist das Angebot schlüsselfertiger Lösungen, die alle Anforderungen an Kommunikationsfunktionen abdecken und insbesondere bei Community-Websites eingesetzt werden. Gerade die zunehmende Verbreitung von Kommunikationsangeboten im Netz setzt viele Anbieter unter vermeintlichen Zugzwang: Sie glauben, allein die Option, auf Ihrer Website posten und chatten zu können, wäre ein Garant für hohe Nutzerzahlen. Das Resultat sind dann schlimmstenfalls verwahrloste Foren und Chats, deren Unterhaltungswert sich auf den Austausch von Begrüßungsfloskeln reduziert. Deshalb sollten Sie aus konzeptioneller Sicht den Einsatz und Nutzen der Kommunikationsformen kritisch beleuchten und möglicherweise alternative Lösungen entwickeln. Folgende Denkanstöße können Ihnen dabei helfen: 왘 Nutzen und Relevanz Bevor Sie damit beginnen, sich mögliche Themen für Foren oder Chats auszudenken, sollten Sie sich die primäre Frage stellen, welche Kommunikationsformen für die Website tatsächlich Sinn machen. Auf Grundlage der Nutzer-Szenarien sollten Sie eigentlich die Akzeptanz und Motivation der Nutzer ziemlich realistisch einschätzen können. Biochemiker, die die Website hauptsächlich für die wissenschaftliche Recherche nutzen werden, sind wohl kaum für belanglose Plauderein im Chat zu begeistern, vielleicht aber für temporäre Expertenbefragungen. 왘 Einsatz der Kommunikationsformen Wenn bereits feststeht, welche Kommunikationsformen Sie auf der Website einsetzen wollen, gilt es, diese entsprechend zu integrieren. Eventuell bieten sich neben

Abbildung 22 Beispiel für ein formularbasiertes Tool: Der Fahrtkostenrechner auf www.focus.de 왗

왘

왘

den zentralen Rubriken »Foren« oder »Chat« auch noch weitere Einsatzmöglichkeiten an: z.B. ein begleitendes Meinungs-Board zu aktuellen Artikeln oder ein Kontakt-Teaser innerhalb eines Serviceangebotes. Implizite Funktionen Die Umsetzung von komplexeren Kommunikationsmodulen wie Foren oder Chats schließt einige Funktionen ein, die in der Grobkonzeption nicht immer offensichtlich sind, aber möglicherweise in der Anwendung Probleme bereiten. Wenn das Forum erst einmal steht, wird es schwierig, im Nachhinein erweiterte Nutzerrechte zu integrieren. Auch die Registrierungsfunktion für ein Chat erfordert, nachträglich bedacht, einen größeren Aufwand. Es ist deshalb empfehlenswert, die funktionalen Voraussetzungen oder Anforderungen in der Grobkonzeptphase zu klären. Redaktionelle Ressourcen Der Aufwand für die Bearbeitung von Mails oder die Betreuung von Foren wird häufig unterschätzt. Die Ideen von 24h-Services oder exklusiven Chat-Events scheitern weniger an der technischen als an der redak-

tionellen Machbarkeit. Grundlage Ihrer konzeptionellen Überlegungen sollten deshalb die geplanten redaktionellen Ressourcen beim Betreiber der Website sein. Tools Zur Tool-Kategorie zählen nach unserem Verständnis Funktionsbereiche, die in sich abgeschlossen sind oder eigenständige Applikationen darstellen. Dies kann z.B. ein Auto-Konfigurator, ein Gehaltsplaner oder eine Chartanalyse sein. Komplexere Tools funktionieren mitunter losgelöst von der Website als separate Anwendungen mit einem spezifischen Site-Aufbau und eigener Navigation. Andere Tools beschränken sich auf ein Formular mit fünf Pulldowns.

Inhalte und Funktionen

141

왗 Abbildung 23 Der Audi-Konfigurator auf www.audi.de läuft als separate Anwendung in einem zweiten BrowserFenster.

Die Umsetzungsmöglichkeiten sind so vielfältig wie die Anforderugen, die jedes Tool mit sich bringt. Grundsätzlich sollten Sie bei der Umsetzung geplanter Tools im Grobkonzept folgende Aspekte berücksichtigen: 왘 Strukturierung Umfangreichere Tools erfordern häufig eine eigene Strukturierung, entweder weil sie als eigenständige Microsite funktionieren oder weil die Funktionen so komplex sind, dass sie nicht mit einem Formular abgedeckt werden können. Dabei sollten Sie sich – trotz vielleicht unterschiedlicher Inhalte – an dem übergreifenden Regelwerk der Website orientieren. Dies betrifft vor allem die Navigation, die Aufbereitung der Inhalte, aber auch die Inhaltsdramaturgie. Wenn sie beispielsweise auf der Website das Prinzip festlegen, redaktionelle Inhalte stets mit inhaltsverwandten Teasern zu verknüpfen, sollte diese Regel auch auf die Tool-Anwendung übertragen werden. 왘 Ablaufszenario Die Überlegungen zur Benutzerführung finden in der Tool-Konzeption eine konkrete Anwendung in Form von Ablaufszenarios. 142

Umsetzung

왘

Für die Entwicklung der Funktionsabläufe ist es hilfreich, sich eine konkrete Nutzungssituation zu überlegen, in der das Tool zum Einsatz kommt. Anhand dieses fiktiven Szenarios können sie dann die notwendigen funktionalen Schritte durchdenken. Verfügbarkeit der Daten Für Einige stellt die Konzeption von Tools eine beflügelnde Herausforderung dar. Je komplexer ein Tool ist, desto spannender gestaltet sich die Aufgabe, eine Vielzahl von Optionen und Attributen miteinander zu verknüpfen, um wirklich innovativen Mehrwert zu schaffen. Dabei vergisst man leicht, dass jede zusätzliche Suchoption, jedes weitere Produktattribut auch in der Datenbank verfügbar sein muss, um es als Funktionskriterium einsetzen zu können. Diese Tatsache kann mitunter die besten Ideen ausbremsen, z.B. die von einem virtuellen Begleitungsberater, der Styling-Typen für ausgewählte Gemütslagen generiert. Denn das würde in der technischen Umsetzung bedeuten, dass jedes Kleidungsstück mit Stimmungsattributen versehen ist.

왘

Technische Integration Einige Tools sind mit einer Reihe von übergeordneten Funktionalitäten verknüpft, die im Vorfeld bedacht werden müssen. Das Aktien-Tool erfordert einen Abgleich mit dem persönlichen Depot, der Steuerrechner übernimmt Daten aus dem persönlichen Profil, oder die Flirtmaschine startet eine Matchabfrage an einen externen Application-Server. Diese Aspekte haben mitunter Auswirkungen auf bestimmte Funktionsabläufe oder auf die Anordnung der Funktionsbereiche und sollten deshalb frühzeitig berücksichtigt werden.

Metafunktionen Übergeordnete Funktionen wie Such- und Archivierungsfunktionen, Personalisierungsoptionen, Hilfe-Anwendungen oder Glossare bezeichnen wir als Metafunktionen. Strukturell betrachtet sind sie der Inhaltsstruktur übergeordnet, da sie meist eine Querschnittsfunktion durch alle Bereiche bilden. Gerade dieses Kriterium erfordert bei der Konzeption ein mehrdimensionales und kontextuelles Vorgehen. Je komplexer die Metafunktion ist, desto weitreichender sind die Auswirkungen auf alle Komponenten der Website. Angenommen, Sie planen für Ihre Website ein personalisiertes Archivsystem für registrierte Nutzer: Dieses Funktionsmodul setzt voraus, dass die Inhalte, die archiviert werden sollen, nach bestimmten Attributen in der Datenbank abgelegt sind, dass jeder Inhalt auf der Website ein entsprechendes Funktionselement zur Ablage in das Archiv aufweist, dass jeder Archivierungsvorgang eine Abfrage zum Log-in-Status auslöst etc. Dieses sind nur einige von möglichen Implikationen auf die Inhalte und Funktionen der Website, aber sie vermitteln einen Eindruck

vom Komplexitätsgrad, den Metafunktionen aufweisen können. Je nach Dimension der Aufgabe können Ihnen die folgenden Arbeitsschritte dabei helfen, die unterschiedlichen konzeptionellen Aspekte von Metafunktionen zu sortieren: 왘 Definition der Funktionalitäten Um das Ausmaß einer Metafunktion auf die übrigen Inhalte abschätzen zu können, sollten Sie zunächst die Funktionalitäten bestimmen. Wenn Sie beispielsweise eine Suchfunktion planen, sollten Sie die notwendigen Suchattribute entwickeln. Sind personalisierte Bereiche vorgesehen, sollten Sie den Personalisierungsgrad festlegen, indem Sie alle Optionen aufführen, die registrierten Nutzern offen stehen. 왘 Inhaltliche und funktionale Konsequenzen Anhand der geplanten Funktionalitäten lassen sich dann systematisch die Konsequenzen für einzelne Inhaltsbereiche und Funktionen ableiten. Beinhaltet der Personalisierungsmodus z.B. die Option, themenpräferierte Newsletter zu abonnieren, müssen Präferenzkategorien gefunden und den Inhalten als Datenattributierung zugeordnet werden. Die Option, die Website selbst nach persönlichen Vorlieben zu konfigurieren, führt zur Konsequenz, dass verschiedene Site-Aufbauten entwickelt werden müssen. 왘 Konzeptioneller Abgleich Gegebenenfalls erfordern die ermittelten Konsequenzen einen Abgleich mit den bislang konzipierten Inhalten und Funktionen. Möglicherweise brauchen Sie für redaktionelle Inhalte weitere Funktionselemente, um ausgewählte Artikel speichern zu können. Oder es ergibt sich aufgrund der Suchoptionen eine andere Rubrizierung von

Inhalte und Funktionen

143

Abbildung 24 Beispiel zur Darstellung von Personalisierungsfunktionen in Form von Screen-Skizzen 왗

Sonic-Box von Emma Profil

Präferenzen

[Notifier-Frame] Morgen bei Sonic-City, Hamburg: Autogrammstunde mit Paula Für Dein persönliches Angebot auf Deiner SonicCity-Website benötigen wir ein paar Angaben.....

Ich interessiere mich für Seitenaufbau ändern Inhalte auswählen Newsletter abonnieren

Musik-Genre Lieblings-Künstler Produkte Hobbies Angaben übernehmen

왘

Inhalten, die eine neue Strukturierung von Teilbereichen erfordert. Technischer Abgleich Alle Ihre Entscheidungen sollten Sie mit technischen Experten im Hinblick auf Machbarkeit diskutieren. Diese können Konsequenzen, die für die Außensicht auf die Website im Verborgenen liegen, meist qualifizierter bewerten und eine realistische Einschätzung zum erforderlichen Aufwand abgeben.

Funktionsbeschreibungen Gerade bei komplexen Funktionen fällt es manchmal schwer, die Darstellung oder Beschreibung auf das Wesentliche zu konzentrieren. Hinzu kommt auch, dass die meisten Funktionalitäten in der Grobkonzeption zwar noch nicht im Detail durchdacht sind, aber schon soweit konkretisiert werden müssen, dass Projektmitarbeiter und Kunden das Ausmaß der Funktion einschätzen können. 144

Umsetzung

Nach unseren Erfahrungen haben sich, abhängig von der Ausprägung der Funktionalitäten, unterschiedliche Beschreibungsformen bewährt: Für die Darstellung einfacher oder in sich abgeschlossener Funktionen reichen oftmals schematische Skizzen mit ergänzenden Erklärungen. Komplexere Funktionen, wie z.B. Funktionsabläufe mit mehreren Feedback-Schleifen und Datenbankabfragen oder auch Personalisierungsoptionen, lassen sich eher in Form von Funktionsdiagrammen oder Flowcharts illustrieren. Sofern Sie und der Rest des Teams mit der Beschreibungssprache UML vertraut sind, können Sie mitunter auch Use-Cases zur Beschreibung funktionaler Anforderungen und Vorgänge einsetzen. (Siehe hierzu Seite 198)

Registrierung

Sonic-City Homepage

Suche

Sonic-Box (Profilverwaltung)

Sounds

Movies

Bits/Bytes

Neu

Neu

Neu

A-Z

A-Z

A-Z

Künstler

Genres

Stars

Impressum

Kontakt

Hilfe

Sonic-Talk re_lease (Forum) re_note (Forum)

Abbildung 25 Ergänzendes Beispiel zur Darstellung der Personalisierungsfunktionen: Allgemeine und personalisierte Inhalte sind farblich gekennzeichnet. 왗

Genres

Genres

re_load (Forum)

Bewerbung Obwohl das Grobkonzept sich vorwiegend auf die inhaltlichen und funktionalen Aspekte der Website konzentriert, sollten Sie das Kommunikationsumfeld nicht unberücksichtigt lassen. Die Zielgruppe eines Extranets muss rechtzeitig über die zukünftige Handelsplattform informiert werden. Die Online-Kampagne zur Produkteinführung erfordert eine Synchronisation mit den übrigen Werbemaßnahmen. Und Werbepartnern der Website müssen entsprechende Präsentationsmöglichkeiten zur Verfügung gestellt werden. Der Aufwand der geplanten Werbe- und Kommunikationsmaßnahmen wird je nach Kundensituation und Projektausrichtung unterschiedlich gewichtet. Ist der Projektverantwortliche im Marketingbereich eines Unternehmens angesiedelt, ist die Bewerbung der Website meist Teil der kundeninternen

Kommunikationsstrategie. Der Auftrag für eine Website, die ausschließlich über Kooperations- und Werbepartnerschaften finanziert wird, beinhaltet meist ein detaillierteres Vermarktungskonzept, das separat zum Grobkonzept erstellt wird. Sofern die Bewerbung der Website nicht Teil Ihres Auftrages ist, sollten Sie – der Vollständigkeit halber – im Grobkonzept einen Überblick der geplanten Maßnahmen skizzieren. Gegebenenfalls sollten Sie diese mit einer Timeline versehen, da mitunter auch eine zeitliche oder auch inhaltliche Abstimmung mit begleitenden Offline-Aktivitäten notwendig ist: beispielsweise wenn es darum geht, die URL rechtzeitig in die Printanzeigen und Werbespots zu integrieren, oder wenn vor dem eigentliche Launch eine mehrphasige OnlineKampagne gestartet wird.

Inhalte und Funktionen

145

Asset-Liste Während Sie die einzelnen Inhaltsbereiche und Funktionen der Website definiert haben, werden Sie sich sicherlich mit dem vorliegenden Kundenmaterial intensiv beschäftigt haben. Dabei werden Sie sich auch eine genauere Vorstellung davon gemacht haben, welche Materialien für die Umsetzung der einzelnen Bereiche und Funktionen bereits vorliegen beziehungsweise benötigt werden. Auch wenn es häufig auf den ersten Blick so erscheint, als stünde Ihnen eine Fülle an Material zur Verfügung, offenbart sich die tatsächliche Ausbeute spätestens dann, wenn sie die Inhaltsstruktur im Detail durchgehen. Häufig stellt sich dabei heraus, dass das vorliegende Material nur bedingt eingesetzt werden kann oder ergänzende Informationen fehlen: etwa weil Sie eine andere Form der Inhaltsdarstellung vorsehen, die eine andere Aufbereitung

der Daten erfordert, oder weil Sie für die Umsetzung komplexer Funktionen oder Tools ergänzende Informationen brauchen. Um Ihnen und dem Kunden einen Überblick aller inhaltlichen Anforderungen zu verschaffen, ist es hilfreich, eine Asset-Liste anzulegen, die während der Feinkonzeption kontinuierlich erweitert wird. Aus der Asset-Liste geht hervor, welche Materialien für die einzelnen Inhaltsbereiche eingesetzt werden, welche bereits vorliegen und welche noch zu liefern sind. Es empfiehlt sich, die Materialanfragen mit Lieferterminen zu versehen oder ein zentrales Abgabedatum festzulegen. Damit schafft man gegenüber dem Kunden Verbindlichkeiten im Vorgehen und hat gleichzeitig eine Argumentationsgrundlage für spätere, daraus resultierende Engpässe.

Beispieltabelle einer Asset-Liste

146

Rubrik Inhalt Unterrubrik

Quelle

Status

Fehlendes Material

Offene Fragen Zu liefern/ klären bis

Eintrag des Inhaltsbereichs

Angabe der Inhaltsquelle, z.B. Ansprechpartner, Bereiche einer bestehenden Site etc.

z.B.: ScreenLayout liegt vor, Inhalte n.n. definiert etc.

Auflistung aller Texte, Bilder, Soundfiles, Formularvorlagen etc., die noch benötigt werden

Auflistung von noch zu klärenden Inhalten, Funktionen etc.

Umsetzung

Kurzbeschreibung der dargestellten Inhalte

Datum

Usability-Testing Nutzbar ist, was dem Nutzer nützt Derzeit als Zauberformel zur Umsatzsteigerung im E-Commerce gefeiert, bezeichnet Usability im ursprünglichen Sinne die Benutzbarkeit einer Website. Was sich jedoch dem Einen als nützlich erweist, kann für den Anderen zur Stolperfalle werden. Usability-Tests können dabei helfen, das vorab herauszufinden.

Spätestens seit Jakob Nielsen im Sommer 2000 in seiner Kolumne provokativ das »Ende des Webdesigns« verkündete und sich für eine weitreichende Standardisierung aussprach, wird der Sinn und Nutzen dieses Modeattributs kontrovers diskutiert. Nicht nur unter den Website-Produzenten, sondern auch innerhalb der Expertenkreise herrscht Uneinigkeit darüber, wie der Usability-Anspruch in der Praxis einzulösen ist. Wo Nielsen eher formale Kriterien für die Bewertung oder Optimierung ansetzt, führt Usability-Expertin Brenda Laurel den Misserfolg mancher Websites auf falsch gesteckte Ziele oder irrelevante Inhalte zurück.

Jakob Nielsens »Alertbox« Die besagte Kolumne »End of Webdesign« (23.07.2000) und weitere News, Reportagen und Interviews zum Thema Usability finden Sie auf Jakob Nielsens Homepage www.useit. com. Die regelmäßigen Kolumnen der letzten fünf Jahre sind unter der Rubrik »Alertbox« zusammengefasst. 148

Umsetzung

Losgelöst von jeglicher dogmatischen Interpretation bezeichnet Usability die Benutzbarkeit einer Website. Die einfache Handhabung stellt jedoch alleine keinen Erfolgsgarant dar, sondern ist immer im Zusammenhang mit dem Nutzwert der Website zu betrachten. Gerade die Korrelation dieser beiden Komponenten macht eine Aufstellung standardisierter Usability-Richtlinien so schwierig. Eine Website, die als oberste Prämisse Unterhaltung bietet, erfordert andere Nutzungskriterien als eine Anwendung, deren Erfolg im Wesentlichen davon abhängt, beim Nutzer Vertrauen aufzubauen. So unterschiedlich wie die Ziele einer Website und die entsprechenden Erwartungshaltungen auf Nutzerseite sind auch die Kriterien zur Bewertung der Usability. Formale Regeln etwa darüber, wo die Navigationsleisten zu positionieren sind, helfen da oft wenig weiter. Eine konventionelle Frame-Navigation mag sich für hierarchisch strukturierte Inhalte als nützlich erweisen; für komplexere Inhalte, die sich erst durch eine kontextuelle Verknüpfung erschließen, lässt sich möglicherweise mit einer dynamischeren Navigationsform ein größerer Nutzen erzielen.

Es empfiehlt sich deshalb, die Vorbereitung und Gestaltung von Usability-Tests dem jeweiligen Website-Konzept individuell anzupassen und die eingesetzten Bewertungskriterien im Einzelfall zu prüfen. In größeren Agenturen oder Unternehmen ist die Konzeption nur beratend in die Testverfahren involviert. Häufig werden auch externe Forschungsunternehmen mit der Planung und Durchführung der Usability-Tests beauftragt. In jedem Falle sollten Sie als Konzeptverantwortlicher darauf achten, dass die Testinhalte und -methoden im Sinne Ihrer konzeptionellen Ziele gestaltet werden. Hierzu ist es hilfreich, sich einen Überblick über die wichtigsten Phasen und Methoden des Usabilty-Testings zu verschaffen, um darüber mitentscheiden zu können, wann, wie oft und in welcher Form getestet werden soll.

Testphasen Es hat sich mittlerweile in der Branche durchgesetzt, die Entwicklung größerer Projekte mit Usability-Tests zu begleiten. Damit soll sichergestellt werden, dass die anvisierte Zielgruppe die Website akzeptiert und bedienen kann. Umfang und Aufwand der Usability-Tests und die letztendlich resultierenden Konsequenzen für die Umsetzung der Site sind vom Projekt selbst abhängig, aber auch von den ausführenden Dienstleistern. Eine kleine Designagentur, die sich durch innovatives Webdesign auszeichnet, wird verständlicherweise eher auf die Experimentierfreudigkeit des Kunden und seiner Zielgruppe setzen und daher eigene Kriterien für die Usability und deren Testmethode definieren. Für die Entwicklung einer OnlineBanking-Anwendung, die hohe Sicherheitsstandards und ein klares Verständnis der Funktionalitäten voraussetzt, werden hingegen umfangreiche Testrunden durch alle Entwicklungsphasen hindurch angesetzt. Ziel ist es in diesem Falle, jede potenzielle Verunsicherung oder Fehldeutung zu vermeiden.

Weitere Usability-Websites 왘 Umfangreiche Link-Sammlung www.usableweb.com 왘 Bruce Tognazzis Kolumnen www.asktog.com 왘 Don Normans Website www.jnd.org 왘 Scott Berkums Website www.uiweb.com 왘 Initiative des NCI’s www.usability.gov

Usability-Testing

149

Üblicherweise werden Usabiltity-Tests in mindestens drei Phasen der Website-Entwicklung eingesetzt: vor der Entwicklung des Grobkonzepts, bevor die Website in die Produktion geht und als abschließende Testrunde an der Beta-Version der Website. Konzepttest Vor oder während der Entstehung des Grobkonzepts werden das Basislayout und die Grundfunktionalitäten der Website getestet. Hierzu wird eine klickbare Demo produziert, die sich meist auf die Homepage und die wichtigsten darunter liegenden Inhaltsseiten beschränkt. Je nachdem wie detailliert die Demo zum Zeitpunkt des Tests ausgearbeitet wurde, kann man anhand der Testanwendung sowohl konzeptionelle als auch formale Testkriterien ansetzen. Zum Einen können weiche Faktoren abgefragt werden, die auf die Wahrnehmung der MainIdea abzielen, zum anderen kann das Verständnis der Grundfunktionalitäten getestet werden. Der Fokus liegt dabei auf der Hauptnavigation, der Verständlichkeit des Wordings und der Akzeptanz des Designs. Ziel ist es, einerseits mögliche Vorlieben im Hinblick auf die Gestaltung der Site auszuloten und andererseits potenzielle Fehldeutungen zentraler Funktionselemente wie z.B. Navigationspunkte oder Metafunktionen auszuschließen.

»Schmalspur«-Testing Nicht immer ist genügend Zeit und Budget vorhanden, um ein aufwändiges Pretestingdurchzuführen. Um das grundsätzliche Verständnis der Navigation und des Wordingszu testen, reicht oftmals auch eine analoge Form. Sie könnten beispielsweise den Testpersonen statt einer klickbaren Demo auch handbe150

Umsetzung

Prototyp-Testing Mit dem Abschluss des Grobkonzepts wird die klickbare Demo-Version zum funktionalen Prototypen ausgebaut. Dieser beinhaltet alle wichtigen Inhalts- und Funktionsbereiche der Website und bildet die Navigation bis in die letzte Ebene ab. Mit Hilfe des Prototypen kann das Navigationsverhalten der Nutzer, aber auch das Verständnis der gesamten SiteStruktur getestet werden. Ebenso aufschlussreich sind die Testergebnisse zum Verständnis der dargestellten Inhalte. Anhand beispielhafter Screens kann evaluiert werden, wie die Testpersonen die einzelnen Inhalte eines Screens gewichten und ob die Darstellungsweise der Inhalte verständlich ist und zum Weiterklicken anregt. Der geeignetste Zeitpunkt für ein PrototypTesting liegt vor Beginn der Produktion, damit mögliche Änderungen in der Subnavigation oder auf einzelnen Inhalts-Screens noch problemlos in die Ausgestaltung der Screens und in die Programmierung miteinfließen können.

schriebene Skizzen vorlegen, auf denen die wichtigsten Funktionselemente aufgezeichnet sind. Manchmal fördert diese »SchmalspurVersion« auch gezieltere Ergebnisse zu Tage, da die Testnutzer nicht durch das Design abgelenkt werden und sich ganz auf die Verständlichkeit der Begriffe konzentrieren können.

Website-Testing Die dritte Testphase wird zum Zeitpunkt der Beta-Version einer Website angesetzt. Die Beta-Version ermöglicht es den Testnutzern, die komplette Website zu durchforsten. Dadurch können alle Aspekte der Website im Detail getestet und gegebenenfalls noch korrigiert werden. Häufige Usability-Fehler, die während der Tests aufgespürt werden, sind z. B. missverständliche Begriffe, unverständliche Fehlermeldungen, fehlende Hilfefunktionen oder auch überladene Inhaltsseiten, bedingt durch ladeintensive Grafiken oder zu lange Texte. Wie aus den Beispielen ersichtlich wird, können die Optimierungen auf Grundlage der Testergebnisse mehr oder weniger aufwändig ausfallen. Sofern ein abschließendes UsabilityTesting geplant ist, sollte also nicht nur für das Testverfahren selbst, sondern auch für die Korrekturen ausreichend Zeit und Geld einkalkuliert werden.

Testmethoden Zur Durchführung von Usability-Tests haben sich in der Praxis Testgruppen mit fünf bis zehn Personen, die dem Profil der Zielgruppe entsprechen, bewährt. Richtet sich die Website an mehrere Kernzielgruppen, sollten Repräsentanten aus jeder Gruppe eingeladen werden. Die Erfahrungen bisheriger Testrunden, das vorhandene Know-how der Tester, aber auch die Ausprägung des Projekts und die aktuelle Testphase sind ausschlaggebend für die einzusetzende Methode. In der Regel empfehlen sich folgende zwei Methoden – in Kombination oder separat eingesetzt: Verhaltensbeobachtung und Befragung.

Verhaltensbeobachtung Die Beobachtung des Surfverhaltens anhand einer Demo-Version, einem Prototypen oder der Beta-Version hat den Vorteil, dass sie eine relativ realistische Nutzungssituation widerspiegelt. Dabei werden die einzelnen Testpersonen vor den Rechner gesetzt und zunächst dabei beobachtet, wie sie durch die Website navigieren. Ziel dabei ist es, herauszufinden, welchen Einstieg in die Site die Nutzer bevorzugt wählen und ob bestimmte zentrale Inhalte der Site gefunden werden. Wichtige Hinweise zur Usability geben auch Testaufgaben, die die Testpersonen innerhalb der Anwendung lösen sollen. Die Aufgaben umfassen je nach Projektstatus ein allgemeineres Gebiet, wie z.B. die Site-Struktur, Haupt- und Metafunktionen, oder sie beziehen sich auf ganz konkrete Funktionsabläufe, wie z.B. die Eröffnung eines Kontos, eine Registrierung oder einen Kaufvorgang. In professionellen Testinstituten oder -abteilungen sind die Testräume meist mit einer Videokamera ausgestattet, die jede Mausbewegung und jeden Klick protokolliert. Anhand der Testaufzeichnungen lässt sich beispielsweise feststellen, wie lange ein Nutzer für einen Funktionsvorgang gebraucht hat, ob er die gesuchte Informationen auf Anhieb gefunden hat oder ob er sich anhand der Navigation eine Vorstellung von der kompletten Inhaltsstruktur machen konnte. Eine ergänzende Form, die neben dem äußeren Verhalten auch die Gedanken, Einstellungen und Motive der Nutzer beleuchtet, ist die Methode des lauten Denkens. Hierbei wird die Testperson dazu angeregt, ihre Gedanken während des Testens laut zu äußern. Diese Methode ist besonders aufschlussreich, da sie Einblicke in das Denkmuster der Nutzer gewährt. Mögliche Zufallstreffer, Verlegen-

Usability-Testing

151

heitsentscheidungen oder auch falsche Erwartungen lassen sich dadurch leichter aufdecken als durch die stille Beobachtung. Zudem gewinnt man dadurch einen authentischen Eindruck von den persönlichen Vorlieben, Navigationsgewohnheiten und Interessen der einzelnen Testpersonen. Befragung Neben der Verhaltensbeobachtung gilt die Befragung als zweite mögliche Testmethode, sowohl im Online-Bereich als auch in der klassischen Marktforschung. Befragungen werden in Form von Fragebögen oder Interviews durchgeführt. In Interviews werden in der Gruppe oder mit Einzelpersonen verschiedene Aspekte der Testanwendung anhand eines vorab definierten Fragekatalogs besprochen. Die Ergebnisse solcher Befragungen hängen maßgeblich vom Informationsgehalt der Fragen und den Moderationsqualitäten des Interviewers ab. Es gilt dabei, einerseits durch die Formulierung der Fragen suggestive Ansätze zu vermeiden und andererseits durch gezieltes Nachfragen konkretere Testergebnisse zu erzielen. Je detaillierter und neutraler die Fragen gestaltet sind, desto brauchbarer werden die Befragungsergebnisse ausfallen. Es ist deshalb dringend zu empfehlen, die Befragungen von einem Marketing- oder Research-Profi durchführen zu lassen, sofern es die Projektsituation erlaubt.

Literatur über Web-Usability Als weiterführende Literatur empfehlen wir Ihnen das ebenfalls bei Galileo Press erschienene Buch »Web Usability« von Martina Manhartsberger und Sabine Musil. 152

Umsetzung

Vorgefertigte Fragebögen, die von Testpersonen selbstständig ausgefüllt werden, gelten nicht nur unter Experten als problematisch. Nahezu jeder kennt die Situation von vergleichbaren Online- oder Telefonbefragungen: Aus Mangel an Eigeninitiative wird eine naheliegende Antwort genannt, man fühlt sich durch die Menge der Antwortoptionen überfordert oder findet sich in den vorgegebenen Formulierungen nicht wieder. Fragebögen können sinnvoll eingesetzt werden, wenn das Ergebnis durch klare Ja/Nein-Entscheidungen oder durch einfache Ankreuzfragen aufschlussreich ausfallen kann. Fragen wie »Sollen die Informationsbroschüren auch als PDF zum Download angeboten werden?« oder »Welche der folgend aufgeführten Online-Angebote nutzen Sie sonst noch, wenn Sie sich zum Thema x informieren möchten?« lassen sich leicht ohne große zusätzliche Erklärungen beantworten. Meist sind jedoch die Fragen, die sich während der Konzeptphase stellen, komplexerer Natur, so dass es sich fast immer lohnt, auch nach den dahinter stehenden Einstellungen, Erwartungen und Motiven zu fragen. Es empfiehlt sich deshalb ein kombiniertes Vorgehen mit einem begleitenden persönlichen Gespräch oder anderen Testmethoden.

Michael Fischer Senior Analyst & Project Manager, frog frog entwickelt seit mehr als 30 Jahren erfolgreich Produktdesign – vom legendären Apple Macintosh bis zum Elektroauto Ford Think!. Wir haben deshalb sehr früh auch im Rahmen des Digitaldesigns Usability in unseren Prozess integriert und spezifisch weiter entwickelt. Eine Methode, die wir vor allem beim Webdesign anwenden, nennt sich SMITTing® (Small ITerative Testing): Statt am Ende des Projekts Design und Interaktionskonzept durch eine quantitativ größere Gruppe testen zu lassen, wird in jeder einzelnen Projektphase ein vom Umfang beschränkter, aber qualitativer User-Test durchgeführt. So wird die Usability in jeder einzelnen Projektphase immer wieder überprüft, Entwicklungen und Ergebnisse können im integrierten Prozess immer wieder verbessert und justiert werden. Für ein Web-Redesign werden in der ersten strategischen Projektphase grundsätzlich Markt, Produkt, Brand, Kommunikation, Design und Usability sowie die Technik des bestehenden Auftritts von den jeweiligen Fachleuten analysiert. Zusätzlich werden Test-User rekrutiert und entsprechende Standardabläufe entwickelt. Alle Ergebnisse der Spezialisten

und Test-User werden dann strukturiert, ausgewertet und in zwei, maximal drei strategischen Lösungsansätzen zusammengefasst und dem Kunden präsentiert. Hat der Kunde sich für eine Lösung entschieden, werden in der zweiten Phase Look & Feels sowie ein Grobkonzept entwickelt. Auch hier arbeiten die Spezialisten von Usability, Konzept, Technik und Design eng zusammen: Erste Ergebnisse wie z.B. Navigationstyp, Brand-Translation und Sitemap werden wieder von Testpersonen überprüft. In der dritten Phase werden die wichtigsten Seiten, die Templates, ausgearbeitet und das Feinkonzept für alle Inhalte als Produktionsvorlage geschrieben. In dieser Phase sind die Details des Designs bereits weit ausgearbeitet und können im SMITTing® getestet werden: klare Klickbarkeit der Buttons, Wording der Navigation oder Kennzeichnung von einzelnen Bereichen für ein schnelles Scanning der Seiten. Durch den Rückfluss aus dem Test können letzte Verbesserungen am Design und Feinkonzept vorgenommen werden, so dass die Site in der vierten Phase produziert werden kann, um danach noch einmal ausführlich und live getestet zu werden.

Usability-Testing

153

Making of Stylepark Definition der Inhalte und Funktionen Die Idee vom London Loft auf der Website erlebbar zu machen, war der zentrale Auftrag der Umsetzungsphase. Im Grobkonzept fügten sich alle Ideen und Anforderungen in einer klaren Inhaltsstruktur und einer schlüssigen Benutzerführung zusammen.

Für die Umsetzung der Raummetapher »London Loft« wurde das eingangs abstrakt entwickelte Szenario auf die konkrete Website übertragen. Ausgehend von der Prämisse, die Website als London Loft zu interpretieren, ergaben sich brauchbare Fragen im Hinblick auf die Informationsarchitektur und Benutzerführung: Wie verhalten sich die Menschen im London Loft? Wie kommunizieren die Menschen dort? Was sind die Motive der Menschen, die sich dort aufhalten? Wie verhalten sich die Objekte im London Loft? Und wie werden die Objekte von ihren Bewohnern oder Besuchern wahrgenommen? Die Ergebnisse dieser Überlegungen brachten eine Reihe maßgeblicher konzeptioneller Anweisungen hervor: 왘 Stylepark bzw. das London Loft ist kein räumlich oder zeitlich fest definierter Ort. Je nach Inszenierung kann er aber unterschiedliche Welten kreieren. Daraus ergibt sich die Anforderung, dass die bei Stylepark dargestellten Objekte (z.B. Möbel) immer in einem räumlichen Kontext dargestellt werden müssen.

154

Umsetzung

왘

왘

Der räumliche Kontext wird für den Nutzer dadurch erfahrbar, dass er die Objekte aus unterschiedlichen thematischen Perspektiven und in verschiedenen Kombinationen betrachten kann. Die Darstellung beschränkt sich nicht auf das Objekt an sich, sondern inszeniert unterschiedliche Welten, die einen thematischen, stilistischen oder auch funktionalen Rahmen haben können. Der Nutzer soll sich diese Objektwelten auf unterschiedliche Weise erschließen können. Er kann sich von den Welten inspirieren lassen oder sich quer durch die Welten bewegen – abhängig von seinen Bedürfnissen oder Interessen. Dadurch sollte es dem Nutzer ermöglicht werden, sowohl rational – z.B. auf der Suche nach einer konkreten Wascharmatur – als auch emotional – z.B. von Zen-Gärten inspiriert – auf die Inhalte zuzugreifen.

Abbildung 1 Der Zugriff auf den Produktkatalog wird durch die verschiedenen Zugänge unterschiedlich verdichtet. 왗

Benutzerführung Auf Grundlage der vorab definierten konzeptionellen Richtlinien entwickelte MetaDesign unterschiedliche Nutzer-Szenarien, um daraus eine angemessene Strukturierung und Navigationsform abzuleiten. Nachdem mehrere mögliche Nutzungsformen der Website gedanklich durchgespielt wurden, kristallisierten sich folgende Nutzertypen heraus: 왘 Der unabhängige Nutzer ist möglicherweise per Zufall auf der Website gelandet und lässt sich thematisch treiben, entweder über ansprechende Lebenswelten oder über Objekte seiner Begierde. 왘 Der diffuse Nutzer ist der Einkaufsbummler innerhalb der Zielgruppen. Er sucht vielleicht etwas Nettes für sein Schlafzimmer, könnte sich aber ebenso für einen Vitra-Schreibtischstuhl begeistern, sofern er darauf stößt.

Der konkrete Nutzer weiß schon, was er haben will, z.B. eine Wandleuchte für das Bad, muss sich aber an sein Zielobjekt herantasten. 왘 Der entschiedene Nutzer weiß genau, was er will, z.B. ein konkretes Produkt. Für ihn muss ein Zugang geschaffen werden, der ihn ohne große Umwege dort hinführt. Aus den Nutzerszenarien ergaben sich vier Hauptzugänge, die gleichzeitig die Inhaltsstruktur der Website darstellen: 왘 Select Innerhalb dieses Bereichs kann der Nutzer nach unzähligen Produktattributen konkrete Inhalte auswählen. Die Produktsuche erfolgt dabei nach dem Prinzip der Verdichtung. Der Nutzer kann über mehrere Auswahlschritte seine Suche eingrenzen und erhält dadurch unterschiedliche Produktvorschläge, die nach individuellen Produktattributen zusammengestellt wurden. 왘

Making of Stylepark

155

Abbildung 2 왘 Sitemap von stylepark.com

왘

왘

156

Inspire Dieser Bereich dient der thematischen Einstimmung und soll eher spontane als zielbewusste Interessenten ansprechen. In Form von Lebenswelten werden hier Produkte in einem bestimmten thematischen Umfeld inszeniert. Bei näherem Interesse können die Nutzer vertiefende Informationen zu den ausgewählten Produkten aufrufen und sich über kontextuelle Verknüpfungen leiten lassen. Inform Hier findet der Nutzer ausgewählte redaktionelle Beiträge zu Trends, Architekturbeispielen, Designerporträts oder Städtereportagen. Die Verknüpfungen mit den Objek-

Umsetzung

왘

ten aus dem Produktkatalog finden hier über eine informative Ebene statt. Der Nutzer kann z.B. innerhalb eines Artikel über die Innenausstattung einer Wiener Galerie weitere Informationen über die eingesetzten Möbel abrufen. Create Dieser Bereich wird eine Reihe von Tools bereitstellen, die es dem Nutzer ermöglichen, sich aus den einzelnen Produkten ein individuelles Szenario zusammenzustellen. Aufgrund der anspruchsvollen Umsetzung dieses interaktiven Bereichs wurde die Realisierung auf eine spätere Projektphase verschoben.

Abbildung 3 Schematische Screen-Skizze für ein Teasing- und Tageszeitenkonzept 왗

Inhaltsstruktur und Site-Aufbau Allgemeine Begeisterung machte sich im Projektteam breit, als die Zugangswege entwickelt waren und die grobe Inhaltsstruktur stand. Normalerweise ist dieser Prozess von fortwährendem Herumgeschiebe von »Content-Kästchen« geprägt. In diesem Fall hatte man jedoch gleich verschiedene Anforderungen mit nur einer Lösung abgedeckt: Die Struktur eröffnete einerseits die verschiedene Wahrnehmungs- und Nutzungsperspektiven und brachte gleichzeitig die wichtigsten Nutzendimensionen von Stylepark auf den Punkt: Inspire – Inform – Select -Create. Der nächste Schritt bestand darin, die Hauptbereiche in eine konkrete Site-Struktur zu überführen, die alle inhaltlichen Anforderungen vom Produktkatalog bis hin zu allgemeinen Informationen zu Stylepark abdeckt. Parallel dazu entstanden erste Screen-Layouts, auf deren Grundlage der übergeordnete SiteAufbau entwickelt wurde.

Resultat dieser Arbeitsphase war ein Grobkonzeptdokument, das die Übersetzung der MainIdea dokumentierte und erste Skizzen der Hauptbereiche vorstellte. Dieses Dokument bildete die Abnahme- und Arbeitsgrundlage für die Feinkonzeption. Die nachfolgenden wichtigsten Arbeitsschritte haben wir auf Seite 216 dokumentiert.

Making of Stylepark

157

Entwicklung

160 Produktionsgrundlage 161 Anspruch

171 Übersicht

163 Teamabstimmung

172 Feste Bestandteile

165 Abstimmung mit dem Kunden

175 Variable Bestandteile

168 Tests

158

170 Bausteine

Entwicklung

184 Website-Typen

212 Konzeptmanagement

187 Statische Website

212 Wiederverwertung

190 Content-basierte dynamische Website

214 Gemeinsam konzipieren

198 Prozessorientierte Website 204 Flash-basierte Website 209 Multi-Channel-Anwendungen

216 Making of Stylepark 217 Feinkonzept bei MetaDesign 217 Methodik Funktionsmodelle

Entwicklung

159

Produktionsgrundlage Vom Konzeptpapier zur Teamvorlage Das Grobkonzept hat die Idee konzeptionell auf die Spur gesetzt. Jetzt wird sie bis ins Detail ausgefeilt. Dabei kann eine Menge Papier entstehen, gerade wenn es um komplexe Anwendungen geht. Jeder möchte wissen, was er zu tun hat, und es sollten keine Fragen offen bleiben.

Das Design sitzt in den Startlöchern, die Technik-Ressourcen sind geblockt und der Projektmanager führt Beschwichtigungsgespräche mit dem Kunden. Wenn es an die Feinkonzeption einer Website geht, müssen Ideen, die bislang auf Papier und in den Köpfen des Teams ausgebrütet wurden, produktions- und netztauglich gemacht werden. Für den Konzepter bedeutet dies mentales Multitasking und verbales Zirkeltraining: Dem Kunden zuhören, das Team briefen und gleichzeitig die Anwendung bis ins letzte Mail-Formular durchdenken. Dabei geht es darum, die Anwendung so detailliert zu definieren, dass einerseits eine produktionsfähige Vorlage entsteht, andererseits der Kunde eine klare Vorstellung vom Ergebnis bekommt.

160

Entwicklung

Die unterschiedlichen Empfänger des Feinkonzepts haben ebenso unterschiedliche Anforderungen. Der Kunde versteht die abstrakten Beschreibungsformen häufig nicht auf Anhieb und benötigt Interpretationshilfe. Das Design möchte möglichst wenig vorgeschrieben bekommen, rennt Ihnen aber bei jeder noch nicht definierten Kleinigkeit hinterher, z.B. wenn das Wording für einen Button noch nicht final ist. Die HTML-Entwickler werden häufig erst jetzt in das Projekt involviert und fühlen sich durch die Menge der Konzeptseiten erschlagen. Sie entdecken fortlaufend ungeahnte Fragezeichen, die einem Nichttechniker banal erscheinen. Es gibt keine Zauberformel für ein optimales Feinkonzept. Die Anforderungen haben sich ständig geändert, und eine statische Vorlage funktioniert nur für eine ebenso statische Website.

Den heterogenen Anforderungen kann nur eine Kompromisslösung entgegengebracht werden, da Budget und Zeit häufig nicht reichen, um jedem die ideale Konzeptform zu bieten. Außerdem müsste der Konzeptentwickler ein Allroundgenie sein, um allen Beteiligten aus ihrer Perspektive und in ihrer Sprache die ideale Vorlage bieten zu können. Bevor Sie eifrig in die Tasten hauen, sollten Sie mit dem Team genau abzustimmen, in welcher Form das Konzept erstellt werden soll. Dabei können Sie auf einen Erfahrungsschatz zurückgreifen – eine Art Baukasten, der verschiedene Beschreibungsmodule für die unterschiedlichen Site-Anforderungen enthält. Sie werden in Zeiten der Feinkonzeption viel Geduld gebrauchen. Manchmal sitzt man mehrere Monate an dem Konzept, bis jede Lücke gefüllt und jeder Korrekturwunsch eingearbeitet ist. Häufig wird in der Grafik und Programmierung schon parallel gearbeitet, und Sie stehen unter dem Druck, ständig nachzuliefern, damit die Räder nicht stillstehen. Es gibt aber auch viele positive Momente, die für Motivationsschübe und persönliche Erfolgserlebnisse sorgen. Die Website nimmt auf theoretischer Ebene zunehmend Gestalt an. Man vertieft sich in eine Welt, mit der man vorher vielleicht nur rudimentär Kontakt hatte – z.B. mit den Freuden und Leiden eines Day-Traders, für den Sie eine Brokerage-Site entwickeln. Auch die Kreation hört an dieser Stelle nicht auf, denn gerade die kleinen Ideen wecken das Lebenslicht der übergeordneten MainIdea.

Anspruch Oberste Zielrichtung des Feinkonzepts ist die maximale Qualität der Anwendung. Das Grobkonzept hat Richtung, Grundstruktur, Funktionen und Inhalte auf globaler Ebene vorgegeben. Jetzt geht es um eine akribische Ausgestaltung, mit der die MainIdea konsequent eingelöst wird. Vergleicht man das Feinkonzept mit dem Drehbuch für einen Film, entstehen an dieser Stelle die sprachliche Treffsicherheit der Dialoge, die dramaturgischen Details und die Schlüssigkeit der Story. Für das Feinkonzept übersetzt heißt das: Usability, Erlebnis-, Informations- und Servicewert für den Nutzer. Abgesehen von der inhaltlichen Qualität hat das Feinkonzept die drei Kernanforderungen Vollständigkeit, Effizienz und Konsistenz zu erfüllen.

Ein Konzept, das viele Namen trägt Für das Feinkonzept gibt es viele Bezeichnungen. Man nennt es auch Pflichtenheft, Anwendungskonzept oder Screenbook. Häufig wird der Begriff Storyboard synonym verwendet, insbesondere wenn es um die Beschreibung von Screen-Abfolgen geht. Wir haben uns hier für den Begriff Feinkonzept entschieden, da er sich formal neutral gibt und damit die Breite der möglichen Ausprägungen nicht einschränkt.

Produktionsgrundlage

161

Vollständigkeit Vollständigkeit heißt, dass jeder Schritt bis ins letzte Detail durchdacht und ausdifferenziert wird. Die Anwendung wird von den Einstiegsebenen bis hin zu allen potenziellen Fehlermeldungen durchgespielt. Damit soll nicht nur garantiert sein, dass Design und Programmierung eine Vorlage erhalten, die möglichst wenig Fragen offen hält. Der Konzepter überprüft gleichzeitig die Schlüssigkeit des Konzepts und optimiert den Ablauf während der Beschreibung. Vollständigkeit bezieht sich dabei auf die inhaltliche Sicht der Anwendung. Ein Feinkonzept kann nicht alle technischen Fragen beantworten und muss entsprechend um ein technisches Konzept ergänzt werden. Effizienz Dem Anspruch auf Vollständigkeit steht die Anforderung der Effizienz gegenüber. Häufig sind Sie bei der Konzeption der zwiespältigen Kritik ausgesetzt, das Konzept sei zu umfangreich und außerdem fehle die Hälfte. Das Idealziel, alle Aspekte einer Anwendung in möglichst effizienter Form zu beschreiben, ist nicht leicht zu erfüllen. Effizienz bezieht sich dabei sowohl auf das Schreiben als auch auf das Lesen. Für beides sollte möglichst wenig Zeit investiert werden, ohne den Qualitätsanspruch aufzugeben. Die oberste Prämisse lautet: so viele Seiten wie nötig, so wenig wie möglich. Dabei geht es in erster Linie darum, Redundanzen zu vermeiden. Übergreifende Prinzipien sollten zentral beschrieben und nicht für jede Seite und Ebene der Anwendung wiederholt werden. Dieses betrifft insbesondere Konzepte für dynamische Websites, die auf Grundrastern und einem übergreifenden Regelwerk basieren. Zusätzlich spart der Einsatz von Fachbegriffen für die interne Verständigung auf162

Entwicklung

wändige Beschreibungen. Hierbei ist allerdings zu bedenken, dass der Kunde das Konzept ebenfalls verstehen muss und in jedem Fall ein Glossar beigefügt werden sollte. Konsistenz Die dritte Kernanforderung an das Feinkonzept heißt Konsistenz. Sie bezieht sich sowohl auf die Form des Konzepts als auch auf die Funktionen und Inhalte, die in dem Konzept beschrieben werden. Die formale Sicht umfasst den Aufbau des Konzepts sowie den Einsatz von Fachbegriffen und schematischen Darstellungen. Der Aufbau des Konzepts kann nur im Einzelfall dem Aufbau der Anwendung folgen. Zunehmend geht es um die Beschreibung eines Regelwerks, das in einer logischen und nachvollziehbaren Beschreibung vermittelt werden muss. Definieren Sie eingesetzte Fachbegriffe, Symbole und Diagramme einleitend unmissverständlich und verwenden Sie diese dann ohne Abweichungen. Durch eine formale Schlüssigkeit vermeiden Sie Irritationen und erleichtern das Lesen und Interpretieren des Konzepts. Konsistenz ist allerdings mit gleichem Stellenwert für das Ergebnis gefordert. Das Navigationsprinzip zu den Inhalten und Funktionen sowie innerhalb von Kommunikationsund Transaktionsprozessen muss einem übergreifenden Prinzip folgen, um dem Nutzer Orientierung bieten zu können. Die finale Ausgestaltung der Benutzerführung ist zwar Aufgabe des Designers, aber um diese optimal lösen zu können, benötigt er eine widerspruchsfreie Vorlage. Gleiches bezieht sich auf die Konsistenz der Seitengestaltung. Beispielsweise darf der Einsatz von Satelliten (Pop-upFenster) nicht willkürlich erfolgen, sondern benötigt ein übergeordnetes Muster. Wird

z.B. ein Formular hin und wieder in einem Satelliten aufgerufen und zeigt es sich meistens innerhalb des bestehenden Browser-Fensters, muss sich der Nutzer ständig auf veränderte Bedingungen einstellen. Erscheinen Formulare allerdings konstant innerhalb eines definierten neuen Fensters, ist das Prinzip nachvollziehbar.

Teamabstimmung Das Feinkonzept nimmt – trotz maximaler Effizienz – häufig ein beeindruckendes Volumen, insbesondere bei komplexen Anwendungen, ein. Bevor es an den Kunden geht, muss von allen Seiten geprüft werden, ob es noch Fehler und Unstimmigkeiten gibt. Das Lesevergnügen ist weit entfernt vom Schmökern eines spannenden Romans; es erfordert Konzentration, Ausdauer und Geduld. Zwischenabstimmungen Es empfiehlt sich, das Feinkonzept in Zwischenergebnissen an das Team zur internen Kontrolle zu übergeben und die Teammitglieder nicht kurz vor Abgabe an den Kunden mit der finalen Gesamtversion zu konfrontie-

Inhaltliche Fragen an das Feinkonzept 1. Was ist die MainIdea? Welche inhaltlichen und funktionalen Bestandteile der Anwendung sind insbesondere für die MainIdea tragend? Wie können diese zur optimalen Einlösung der MainIdea ausgefeilt werden? 2. Was ist die Zielrichtung der Anwendung aus Nutzersicht? Welche inhaltlichen und funktionalen Bestandteile können die Ziele in welcher Form optimal einlösen? 3. Welches Navigationsprinzip wurde im Grobkonzept festgelegt? Wie kann sich das Prinzip im Detail fortsetzen – z.B. auf Content-Ebene oder innerhalb von Prozessen? 4. Wo empfehlen sich Querverweise, z.B. auf kontextsensitive Inhalte? Wie viele Verweise sind sinnvoll, wie viele könnten zu Verwirrung führen?

5. Wie kann die Interaktivität für den Nutzer sinnvoll gesteigert werden? Gibt es beispielsweise schwer verständliche Inhalte, die in interaktiven Sequenzen leichter vermittelt werden können? 6. An welchen Stellen kann über die reine Text-/Bilddarstellung hinausgegangen werden? Welche Inhalte können »multimedial« aufbereitet werden? 7. Wie kann der Nutzer zur Kommunikation mit dem Absender angeregt werden? Welches Feedback erwartet er? 8. Wie werden Transaktionen gesteuert, so dass sie nicht zu Abbrüchen beim Nutzer führen? Was ist der bequemste und verständlichste Weg durch die Prozesse? 9. Welche Unterstützung beziehungsweise Hilfe benötigt der Nutzer an welcher Stelle?

Produktionsgrundlage

163

Abbildung 1 Das Deckblatt des Konzepts sollte eine eindeutige Versionsbezeichnung enthalten. 왗

KUNDE PROJEKT

KUNDE PROJEKT

Feinkonzept Version 1.0 zur Korrektur

Feinkonzept Version 1.1 zur Abnahme

Ort, Datum

Ort, Datum

Adresse Ansprechpartner der Agentur

Adresse Ansprechpartner der Agentur

ren. Abgesehen davon, dass Design und Programmierung das Konzept in verdaulichen Einheiten überprüfen können, haben sie die Möglichkeit, parallel mit ihrer Arbeit zu beginnen. Die Designer entwickeln dabei das visuelle Konzept, das mit dem inhaltlichen Feinkonzept zur Kundenabnahme vorgelegt werden sollte. Die Programmierer erstellen das technische Feinkonzept und können im Idealfall schon mit der Entwicklung von Einzelkomponenten des Systems beginnen und dadurch den eigenen Zeitplan entspannen. In vielen, vor allem umfangreichen Projekten ist es allerdings sinnvoll, das Feinkonzept generell in Einzelmodulen zu erstellen und diese nicht nur intern, sondern auch dem Kunden für Zwischenabnahmen vorzulegen. Versionskontrolle Das Feinkonzept wird in mehreren Versionen erstellt. Für den Kunden sollte es eine Version zur Korrektur und eine Version zur Abnahme geben (Abbildung 1) – jeweils bezogen auf die Gesamtversion oder Teilmodule. Intern entstehen allerdings durch mehrfache Korrekturläufe 164

Entwicklung

weitere Versionen, die eindeutig gekennzeichnet sein müssen. Achten Sie dabei nicht nur auf die Benennung der Konzepte, sondern stellen Sie auch sicher, dass die überarbeiteten beziehungsweise geänderten Stellen schnell erkannt werden. Bei Word-Dokumenten kann z.B. unter »Voreinstellungen«/»Überarbeiten« eine Kennzeichnung der neuen beziehungsweise geänderten Inhalte festgelegt werden. Nicht selten passiert es, dass intern mit alten Versionen gearbeitet wird, weil man zu häufig neue Versionen in Umlauf gebracht hat. Gehen Sie entsprechend sparsam mit Versionsänderungen um und überprüfen Sie regelmäßig, ob die Teambeteiligten mit dem jeweils aktuellsten Dokument arbeiten. Bei umfangreichen Feinkonzepten ist es sinnvoll, eine Änderungshistorie in das Dokument aufzunehmen. In der Einleitung des Konzepts halten Sie dabei in einem tabellarischen Überblick fest, wer was wann überarbeitet hat. Die Änderungshistorie ist nicht nur intern, sondern auch für den Kunden eine wichtige Hilfe.

Beispiel Änderungshistorie Datum

Version Beschreibung

1.7.2001

1.0

Seite 14, Punkt 1.5:

Überarbeitung der Kontaktfunktion

Autor Max Blau

14.7.2001

1.0

Seite 34, Punkt 5.2:

Überarbeitung Modul-Teaser

Heike Grün

22.8.2001

1.1

Seite 2, Punkt 1.2: Seite 11, Punkt 1.4: Seite 37, Punkt 6.1: Seite 41, Punkt 7.0:

Wording-Änderung in der Navigation wurde gelöscht Überarbeitung Registrierungsfunktion Überarbeitung Animationssequenz

Max Blau

Schlusslektorat Vor Abgabe des Konzepts an den Kunden ist unbedingt ein Schlusslektorat zu empfehlen. Für die inhaltliche Qualitätsprüfung sollten Sie einen Kollegen mit Konzepterfahrung bitten, das Ergebnis mit Blick auf logische Brüche und offene Fragen noch einmal vollständig durchzugehen. Zusätzlich sollte ein textsicherer Mitarbeiter Rechtschreibung und Grammatik überprüfen. Vereinzelte Fehler werden gerade in einem umfangreichen Konzept nicht zu vermeiden sein. Den Gesamteindruck des Konzepts prägt allerdings auch eine weitgehende Fehlerfreiheit. Der Kunde wird Flüchtigkeitsfehler schnell entdecken, und wenn er dabei auf eine hohe Quote stößt, ist das nicht nur ärgerlich, sondern auch unnötig. Kalkulieren Sie für den letzten Check einen realistischen Zeitraum ein. Wenn Sie Ihre Kollegen abends mit dem Lektoratswunsch überraschen und am nächsten Tag Abgabe ist, machen Sie sich keine Freunde, und die Überprüfung wird maximal oberflächlich sein.

Abstimmung mit dem Kunden Das Feinkonzept ist nicht nur Produktionsvorlage, sondern auch ein Abnahmedokument für den Kunden. Im Angebot wird festgelegt, wie viele Korrekturversionen vorgesehen sind. Änderungswünsche, die darüber hinausgehen, gelten als Change Request und werden extra berechnet. Das klingt einfacher als es ist. Gerade Nachkorrekturen sind häufig der Grund, warum Zeit- und Budgetrahmen überschritten werden. Andererseits kann gerade bei einer komplexen Website nicht jede potenzielle Unzulänglichkeit mit der ersten Version des Feinkonzepts erkannt und gelöst werden. Manches zeigt sich erst bei der Entwicklung der Anwendung. Insbesondere wenn man den Anspruch hat, etwas möglichst Einzigartiges zu entwickeln, gibt es keine vollständigen Erfahrungswerte. Änderungswünsche kommen allerdings nicht nur vom Kunden, sondern auch von Design, Programmierung; und nicht zuletzt Sie selbst stellen häufig bei der Produktion fest, dass bestimmte Abläufe noch optimiert werden können. Eine restriktive Ablehnung von späteren Kundenkorrekturen ist somit nicht

Produktionsgrundlage

165

sinnvoll, da man sich selbst die Option für Nachbesserungen nimmt. Umgekehrt ist natürlich sehr genau zu kontrollieren, dass der Änderungsaufwand des Kunden nicht eskaliert. Lassen Sie tendenziell nur Detailänderungen ohne Nachberechnung zu. Eine Richtungsänderung ist in jedem Fall eine Erweiterung des Projektaufwands und muss hinsichtlich Zeit und Budget nachkalkuliert werden. Je eindeutiger Sie sich allerdings im Grobkonzept auf Inhalte und Funktionen geeinigt haben, desto unwahrscheinlicher werden problematische Diskussionen über das Feinkonzept.

Formale Fragen an das Feinkonzept 1. Liegt ein abgenommenes Grobkonzept vor? Gibt es vielleicht abgestimmte Korrekturen für das Feinkonzept, die in das finale Grobkonzept nicht aufgenommen wurden und beispielsweise als Protokoll vorliegen? 2. Welche Beschreibungsformen eignen sich für das Konzept? Welche grafischen Elemente, Symbole und Begriffe sollen verwendet werden? 3. Wie viele Tagewerke wurden für das Feinkonzept budgetiert? In welchem Zeitraum soll das Feinkonzept erstellt werden? Werden vielleicht mehrere Konzepter für die Feinkonzeption benötigt, um die Deadline halten zu können? 4. Wie viele Korrekturversionen sind kalkuliert worden? In welcher Form erfolgt der Korrektur- und Abnahmeprozess? 5. Liegen alle vom Kunden geforderten Materialien vor? Welches Material fehlt noch? Mit welcher Priorität muss welches Material nachgefordert werden?

166

Entwicklung

Korrektur- und Abnahmeprozedere In der Regel erhält der Kunde das Konzept nicht nur in ausgedruckter, sondern auch in digitaler Form – als Originaldatei oder als PDFVersion. Bei einer digitalen Vorlage kann er seine Korrekturen direkt in das Konzept einfügen. Wichtig ist, dass diese später leicht zu identifizieren sind, sei es durch eine entsprechende Markierung oder durch die Integration einer Korrekturspalte in das Konzept (Abbildung 2). Wird für die Änderungswünsche ein gesondertes Dokument erstellt, sollten Sie darauf achten, dass die Korrekturen eindeutig

6. Soll ein Texter in die Konzeption eingebunden werden? Liegen die Texte des Kunden bereits vor oder muss die Lieferung im Konzept detailliert gebrieft werden? Welche Texte soll der Kunde in Rohversion oder finaler Form liefern? 7. Wie sieht der Zeitplan für die grafische Produktion und Programmierung aus? Welche Inhalte und Funktionen müssen mit Priorität konzipiert werden, damit Design und Programmierung parallel arbeiten können? 8. Welche Bestandteile der Anwendung erfordern eine interne oder externe Produktion von Video, Sound, Sprache, 3D und Animation? Wie ist der kalkulierte Zeitplan für diese Produktion? Welche Inhalte und Funktionen müssen mit Priorität konzipiert werden, damit die Produktion rechtzeitig starten kann? 9. Mit welchen Teambeteiligten muss das Konzept intern abgestimmt werden? Wann und mit wem erfolgt die finale interne Abnahme, bevor das Konzept an den Kunden geht?

Abbildung 2 왘 Für Kundenkorrekturen empfiehlt sich eine eigene Spalte im Konzept.

Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung

Anmerkungen und Korrekturwünsche

Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung Beschreibung

den betroffenen Bereichen zugeordnet sind. Zur Unterstützung des Kunden können Sie selbst das Korrekturdokument mit entsprechender Nummerierung vorbereiten. Korrekturen und Abnahmen sollten generell immer in schriftlicher Form erfolgen. Fatal sind telefonische Korrekturgespräche, da sie häufig Missverständnisse zurücklassen und weiterhin keine Verbindlichkeit garantieren. Beliebt sind solche Telefonate insbesondere am Freitagnachmittag. Der Kunde hat sich auf das

Wochenende eingerichtet und möchte noch schnell seine Änderungswünsche loswerden. Das Ganze kann dann in eine mehrstündige Diskussion ausarten, die Sie mit rauchendem Kopf und einem Stapel unleserlicher Kritzeleien zurücklässt. Sollte ein entsprechendes Telefongespräch nicht zu verhindern sein, halten Sie das Besprochene unbedingt in einem Protokoll fest und lassen Sie dieses dann vom Kunden schriftlich bestätigen.

Mustertext zur schriftlichen Abnahme der Korrekturversion 1.0: In das vorliegende Feinkonzept Version 1.0 wurden alle gewünschten Korrekturen eingefügt. Es kann als vollständige Grundlage zur Erstellung der Abnahmeversion 1.1 genutzt werden. Ort, Datum ____________________ Unterschrift (Herr / Frau xyz) ____________________ Mustertext zur schriftlichen Abnahme der Abnahmeversion 1.1: Das vorliegende Feinkonzept in der Version 1.1 wird hiermit ohne Einschränkungen abgenommen. Ort, Datum ____________________ Unterschrift (Herr / Frau xyz) ____________________

Produktionsgrundlage

167

Tests Wenn die Arbeit am Feinkonzept beginnt, ist die Grundarchitektur der Anwendung bereits definiert und wurde bei Bedarf in vorausgehenden Usability-Tests überprüft und optimiert. Der Prozess der Feinkonzeption kann durch weitere Tests unterstützt werden, die ausgesuchte Details unter die Lupe nehmen, so z.B.: 왘 Wording der einzelnen Navigationspunkte 왘 Verständlichkeit der Texte und Hilfefunktionen 왘 Benutzerführung durch einzelne Funktionsmodule Die Tests können sehr aufwändig inszeniert werden, indem z.B. erste funktionale Prototypen in einer Laborsituation mit repräsentativen Vertretern der Zielgruppen durchgespielt werden. Sehen Sie bei solchen Tests eine Unterbrechung der Konzeptentwicklung vor,

168

Entwicklung

um nicht später durch aufwändige Nachkorrekturen aus dem kalkulierten Budget zu laufen. Die Tests können aber auch klein und unkompliziert sein. Häufig werden Kollegen aus der Agentur zu Schnelltests angeheuert, um eine allgemeine Verständlichkeit zu überprüfen, die z.B. das Wording betrifft. Die Einbeziehung von Kollegen ist nicht unkritisch, da diese mit einer überdurchschnittlichen Medienerfahrung urteilen, was nicht unbedingt auf die späteren Nutzer übertragen werden kann. Welche Tests in welchem Umfang eingesetzt werden, hängt von dem Projekt ab. Transaktionsplattformen, die sich an eine internetunerfahrene Zielgruppe richten, haben einen deutlich höheren Testbedarf als eine Corporate Website, die nach einem Standardmuster aufgebaut wurde.

Bausteine Flexible Methodik für wechselnde Anforderungen Einen allumfassenden Standard für Konzepte gibt es nicht. Die Dynamik des Internets erfordert auch eine Beweglichkeit beim Konzipieren. Trotzdem müssen Sie nicht für jedes Konzept alles neu erfinden.

Nach einigen Jahren Konzepterfahrung werden Sie diverse Musterkonzepte in der Schublade haben. Häufig hat auch die Agentur Dokumentvorlagen erstellt, die Ihnen ein Grundschema und die Formatierung vorgeben. Methodische Anpassungen und Neukreationen bleiben Ihnen dadurch nicht erspart. Einen moderierten Chat zu beschreiben ist nicht nur eine inhaltliche, sondern auch eine formale Herausforderung. Auch die Feinkonzeption eines harmlosen Flash-Games kann zu unerwartetem Kopfzerbrechen über das »Wie« führen. Gespräche mit Technikern und Designern helfen manchmal, das richtige Format zu finden. Nicht immer bekommen Sie allerdings konstruktive Hinweise, oder Sie sind widersprüchlichen Anforderungen ausgesetzt, die Sie auf einen Nenner bringen müssen. Ein Rezept für jede mögliche Herausforderung können wir auch hier nicht liefern. Trotzdem haben sich einige Erfahrungen angesammelt, die bei der Konzeptionsarbeit Orientierung geben können. Nicht immer sind Sie gezwungen, ein schriftliches Feinkonzept zu entwickeln. Manchmal ist es sogar sinnvoll, das Konzept im engen Dialog mit dem Designer durch Skizzen und Screen-Entwürfe entstehen zu lassen. Das be170

Entwicklung

trifft insbesondere Websites, die auf die Interface-Gestaltung fokussiert sind. Für eine experimentelle Community-Plattform, die unter anderem den Auftrag hatte, neue Formen der Benutzerführung auszutesten, haben wir z.B. nur das Grobkonzept in schriftlicher Form erstellt. Als Feinkonzept diente ein animierter Player, der die Abläufe in einem Textfenster kommentierte. Der Konzepter tüftelte gemeinsam mit dem Designer das Prinzip der Navigation mittels handschriftlicher Zeichnungen und erster grafischer Entwürfe aus. Als Grundlagen dienten neben dem Grobkonzept lediglich Listen mit Funktionsbeschreibungen. Nach Abschluss der Designentwicklung wurde der Player erstellt, der alle Vorgänge simulierte und Produktionsvorlage für die Programmierung war. Ähnlich verlief es in einem Projekt, in dem ein komplexes Interface für einen Shop entwickelt wurde. Die Feinkonzeption fand dabei in enger Abstimmung zwischen Konzepter, Designer und HTML-Entwickler statt. Der Konzepter scribbelte funktionale Screen-Entwürfe, der Designer ein Schwarz-Weiß-Layout, das dann von dem Programmierer in einen funktionalen HTML-Prototypen übersetzt wurde. Dem Kunden wurde kein Papier vorgelegt, sondern gleich der Prototyp präsentiert.

Übersicht Das Feinkonzept beschreibt Strukturen, interaktive und lineare Inhalte, Tools, Kommunikations- und Transaktionsprozesse. Der Prosaanteil reduziert sich im Vergleich zum Grobkonzept auf ein Minimum. Das Feinkonzept beinhaltet in erster Linie visuelle Beschreibungsformen, die durch Textkommentare und kurze Erklärungen unterstützt werden. Bisher gibt es keine Software, die alle Modalitäten der Feinkonzeption bewältigt und im Idealfall noch verschiedene Sichten für Programmierung, Design und den Kunden generieren kann. Häufig verwendet man für das Feinkonzept unterschiedliche Programme und führt die Ergebnisse dann in einem finalen Dokument zusammen. Die Bausteine des finalen Dokuments ergeben sich aus der Art der Anwendung, sind aber auch teilweise für jedes Konzept erforderlich.

Obligatorische Elemente sollten sein: Vorspann: Inhaltsverzeichnis, Änderungshistorie, Glossar und Einleitung 왘 Sitemap: Übersicht der Site-Inhalte in einem Diagramm 왘 Asset-Liste: Auflistung der einzubindenden inhaltlichen Elemente (Bilder, Texte, Sounds etc.) 왘 Meta-Tags: Zuordnung von Suchbegriffen zu Seiten Fast jedes Konzept enthält in der jeweils erforderlichen Kombination: 왘 Kurze Prosabeschreibungen: Erklärungen von Abläufen und Zusammenhängen, die schematische Darstellungen ergänzen und deren Interpretation unterstützen 왘 Funktionsskizzen: visuelle Darstellung von Screen-Elementen für definierte Zustände 왘 Tabellen: Übersichten und Datenverknüpfungen Nicht immer gebraucht werden: 왘 Place-Case: schematische Darstellung des strukturellen Seitenaufbaus 왘 Flow-Diagramm: visuelle Darstellung von Prozessverläufen und verknüpften Animationssequenzen 왘 Motion Script: strukturierte Beschreibung von linearen Bewegtbildabläufen 왘 Datenattribute: Zuordnung von Attributen zu Datenbankinhalten Die einzelnen Bausteine werden im Folgenden zunächst einmal in ihrer grundsätzlichen Eignung und in einem weiteren Absatz dann in ihrer spezifischen Verwendung für die einzelnen Projekttypen beschrieben. 왘

Bausteine

171

Feste Bestandteile Jede Agentur wird ihr eigenes Grundgerüst für ein Konzept entwickeln. Meistens findet man darin allerdings die im Folgenden beschriebenen Bestandteile in variierter Form wieder. 1. Vorspann 왘 Inhaltsverzeichnis Das Inhaltsverzeichnis leitet das Konzept ein, ist allerdings die letzte Amtshandlung in der Konzeptentwicklung. Die Überschriften der Konzeptkapitel sollten möglichst so formatiert sein, dass sie eine automatisierte Erstellung des Inhaltsverzeichnisses ermöglichen. Bei einer statischen Site kann die Struktur des Konzepts analog zur Site angelegt werden. Damit spiegelt das Inhaltsverzeichnis die Referenzierung der Websites wider. Bei dynamischen Websites ist dieses nicht möglich, und die Seiten müssen separat referenziert werden. Wichtig ist, dass Bezeichnungen und Nummerierung konsistent eingehalten werden. Design und Programmierung leiten daraus häufig eine eigene Benennung ab. 왘 Änderungshistorie Eine Änderungshistorie führt auf, welche Autoren wann welche Änderungen an dem Dokument vorgenommen haben. Dieses hilft nicht nur intern bei der Versionskontrolle, sondern erleichtert es auch dem Kunden, Überarbeitungen schnell zu identifizieren.

172

Entwicklung

왘

왘

Legende und Glossar Die Legende führt alle verwendeten visuellen Symbole auf und erklärt diese. Dazu gehören insbesondere Elemente, die in Funktionskizzen eingesetzt werden. Zusätzlich empfiehlt sich ein Glossar mit Definition aller verwendeten Fachbegriffe. Einleitung Die Einleitung geht kurz auf den Status und die Grundlagen des Konzepts ein. Die Abnahmeversion verweist dabei auf die Korrekturen des Kunden vom jeweiligen Erstellungsdatum, die entsprechend in die Korrekturversion eingearbeitet wurden. Die Korrekturversion enthält einen Verweis auf das abgenommene Grobkonzept und bei Bedarf auf weitere Absprachen für inhaltliche Änderungen.

2. Sitemap Als Gesamtübersicht der Anwendung wird die Sitemap aus dem Grobkonzept weitergeführt und bis zur untersten Navigationsebene verfeinert. Bei komplexeren Anwendungen empfiehlt sich eine Auflösung in einzelne Bereichsbäume, um Übersichtlichkeit und Lesbarkeit zu gewährleisten (Abbildung 1). Die Nummerierung der Screens wird aus dem Grobkonzept übernommen und vertieft. Die Sitemap enthält eine Legende, welche die einzelnen Symboltypen und Verbindungen erklärt. Am leichtesten kann die Sitemap über FlowchartProgamme erstellt werden, mit denen schnell und komfortabel unterschiedliche Symbolfelder und Verbindungen angelegt werden können. Vorzugsweise werden Visio, Inspiration, Win-Flow oder Mac-Flow eingesetzt.

0. Home

1.0 Karriere

1.1 Jobprofile

1.2 Entwicklungsmöglichkeiten

1.2.1 Mitarbeiterportraits

1.3.1 Unternehmenspläne

1.1.2 Designer

1.2.2 Karrierepläne

1.3.2 Räume

3.0 Investor Relations

1.6 Stellenangebote

1.3 Arbeitsumfeld

1.1.1 Techniker

2.0 Produkte

1.6.1 Führungskräfte

1.6.2 Young Professionals

1.6.3 Auszubildende

4.0 Presse

1.4 Veranstaltungen

1.6.4 Praktikanten

1.6.5 Aushilfen

1.5 Weiterbildung

1.5.1 ManagementTraining

1.5.2 Sprachen

1.6.1.1 Bewerbungsformular

1.5.3.1 Anmeldeformular

Legende 1.6.1.1.1 Bestätigung 1.1.3 Sachbearbeiter

1.3.3 Kollegen

1.5.3 Seminare

Screen

Satellitenfenster 1.1.4 Chef

왖 Abbildung 1 Im Feinkonzept wird die Sitemap häufig in Bereichs-Maps aufgeteilt, um nicht durch Überfüllung die Übersichtlichkeit zu gefährden.

Bausteine

173

3. Asset-Liste Die Feinkonzeption setzt auf vorhandenen Materialien auf und ermittelt gleichzeitig, welche inhaltlichen Bestandteile vom Kunden nachgeliefert oder neu produziert werden müssen. In erster Linie geht es hierbei um Bilder und Texte. In der so genannten Asset-Liste wird im Anhang zum Feinkonzept detailliert aufgeführt, welche Assets an welcher Stelle eingebunden werden, ob diese schon vorliegen oder noch benötigt werden. Fehlende Inhalte sollten mit einem Lieferdatum gekennzeichnet sein, zu dem sie spätestens vorliegen müssen. Nicht immer ist es möglich oder empfehlenswert, dass der Konzepter alle Assets selbst definiert. Dieses betrifft insbesondere Bilder, die zur Illustration und Screen-Gestaltung benötigt werden. In jedem Fall empfiehlt es sich, den Gestaltungsspielraum des Designers so wenig wie möglich einzuschrän-

ken und bei Bedarf seine Bildwünsche in die Asset-Liste aufzunehmen. Das Thema Material ist eine äußerst sensible Bruchstelle im gesamten Projektprozess. Wenn auch im Anfang deutliche Deadlines für die Lieferung ausgemacht wurden, werden diese nur in den seltensten Fällen eingehalten oder aber nachträglich weiterer Bedarf festgestellt. Von einer reibungslosen Materiallieferung sollten Sie grundsätzlich nicht ausgehen. Um so wichtiger ist es, den Bedarf schriftlich festzulegen, um sowohl selbst als auch für den Kunden eine Checkliste zu haben, die dann systematisch abgearbeitet werden kann. Material, das mit Priorität benötigt wird, sollten Sie entsprechend hervorheben und konsequent nachfragen. Nicht selten schiebt sich der gesamte Produktionsprozess nach hinten, weil Konzeption oder Design wegen fehlender Materialien in der Warteschleife hängen.

Asset-Liste Nr. (Screen/ Bereich)

Format

Inhalt

Quelle

Status

Offene Punkte

Deadline

1.1.1 Presse

Bild (EPS)

Unternehmensgebäude

PR/Frau Stüver

liegt noch nicht vor (vorgesehenes Bild ist schon zwei Jahre alt)

bitte neu erstellen

17.11.

Bild (EPS)

Vorstand

HR/Herr Meier

Kopie liegt vor

17.11.

Text (Word)

Presseinformation PR/Frau Stüver Jubiläum

liegt vor

03.12.

etc.

174

Entwicklung

4. Meta-Tags Um eine Website in Suchmaschinen mit einer hohen Trefferquote und -sicherheit zu platzieren, werden die einzelnen Seiten mit MetaTags versehen, die Keywords für die Suche enthalten. Die Festlegung der Begriffe übernimmt idealerweise der Konzeptentwickler, da er am besten mit den Inhalten vertraut ist. Versuchen Sie dabei, den Inhalt der Seiten in möglichst treffende Begriffe zu fassen, die gängig und verständlich sind beziehungsweise die Sie als spätere Suchbegriffe vermuten.

Variable Bestandteile Skizzen, Prosabeschreibungen, Tabellen und Diagramme werden nicht alleinstehend, sondern kombiniert verwendet. In welcher Form dies geschieht, hängt wiederum davon ab, was beschrieben wird. Prosabeschreibung Die Beschreibung von Funktionen und Abläufen durch Prosatexte sollte zwar kurz gehalten sein, bleibt aber auch hier ein wichtiger Bestandteil des Konzepts. Textbeschreibungen ergänzen schematische Sichten auf die Anwendung. Sie kommentieren in knapper Form den übergeordneten Zusammenhang, erklären die Funktionen und inhaltlichen Bestandteile, ohne ins Detail zu gehen. Die einzelnen Elemente werden dann in Tabellen aufgelistet oder in visualisierter Form durch Skizzen oder Sitemaps dargestellt. Das ist zum einen übersichtlicher als endlose Fließtexte und spart zum anderen erheblich an Volumen des Konzepts.

Funktionsskizze Die Funktionsskizze dient als Inhaltsangabe eines Screens oder eines Moduls für einen definierten Zustand (Abbildungen 2 und 3). Als Erstellungsprogramme eignen sich Word, QuarkXpress, Powerpoint, Visio oder Inspiration. Module sind hier als Bestandteile eines Screens zu verstehen, die einzelne Funktionselemente oder Inhalte zu einer sinnvollen Einheit zusammenfassen. Dieses kann z.B. eine Suchfunktion sein, die als Elemente ein Eingabefeld und eine Bestätigungsfunktion enthält und von dort auf eine Ergebnisliste verlinkt. Die Funktionsskizze sollte in keinem Fall ein Layout vorgeben, sondern kann sich umgekehrt dem Design anpassen, wenn es schon entsprechend entwickelt wurde. Funktionsskizzen sind leicht zu interpretieren und helfen damit insbesondere dem Kunden beim Verständnis des Konzepts. Für den Designer dienen sie als Vorlage für die Ausgestaltung der Screens. Dort sind sie gleichermaßen beliebt wie gefürchtet. Sie können leicht interpretiert werden, ohne dass viel Text gelesen werden muss. Andererseits hinterlassen sie immer den Beigeschmack des Layouts und können den kreativen Prozess vorbelasten, da man sich zunächst wieder von dem gesehenen Bild lösen muss. Korrekturen in Funktionsskizzen können sehr mühselig sein, da die Skizze als Grafik erstellt wird und Textfunktionen wie »Suchen und Ersetzen« dort nicht mehr greifen. Elemente, die sich ständig wiederholen, sollten deshalb an zentraler Stelle beschrieben werden und in der Skizze nur noch als Platzhalter auftauchen. Dieses betrifft in erster Linie die Bezeichnungen der Hauptnavigation. Ändert sich beispielsweise ein Navigationsbegriff,

Bausteine

175

Primärnavigation ...

Metanavigation

Sekundärnavigation ...

Bild

1

3

TEXT Headline

4

TEXT Subheadline

5

TEXT Bodybodybodybodybodybodybody bodybodybodybodybodybodybody bodybodybodybodybodybodybody bodybodybodybodybodybodybody bodybodybodybodybodybodybody bodybodybodybodybodybodybody bodybodybodybodybodybodybody bodybodybodybodybodybodybody bodybodybodybodybodybodybody

VIDEO

2

6

1

TEXT Headline

2

I

3

Auswahl A Auswahl B

4

Auswahl X Auswahl Y Auswahl Z

Textlink

5

Abbildung 2 Beispiel-Funktionsskizze für einen Screen-Zustand

Button

왖

muss damit nicht jede einzelne Skizze wieder angefasst werden, sondern man kann die Korrektur einmalig vornehmen. Die Funktionsskizze wird durch eine Elementtabelle ergänzt, die alle Bestandteile der Skizze noch einmal aufführt und in ihrer Funktion und Ausprägung beschreibt. Es empfiehlt sich, die Elemente in der Skizze und Tabelle analog zu nummerieren, damit diese eindeutig zugeordnet werden können. Place-Case Dynamische Websites basieren auf einer Reihe von definierten Templates und Modulen. Die einzelnen Screen-Zustände stellen dabei eine Kombination und Anordnung der vorgegebenen Module dar. Insbesondere stark inhaltslastige Websites weisen meist ein einheitliches Grundlayout auf, das lediglich mit unterschiedlichen Modulen gefüllt wird. In diesen Fällen 176

Entwicklung

Abbildung 3 왖 Beispiel-Funktionsskizze für ein Formular

eignen sich zur Beschreibung der verschiedenen Screen-Zustände so genannte Place-Cases. Im Gegensatz zur Funktionsskizze werden hierbei nicht einzelne Inhaltselemente, sondern eine schematische Screen-Aufteilung mit den eingesetzten Modulen dargestellt. PlaceCases stellen also mehr ein Nachschlagewerk für den Programmierer dar, das eine Orientierung darüber bietet, welche Module in einem bestimmten Screen-Zustand aufgerufen werden. Place-Cases lassen sich einfach und relativ schnell erstellen, wenn man einmal eine Sammlung aller eingesetzten Module angelegt hat. Die einzelnen Skizzen lassen sich dann durch Kopieren und Einfügen wie ein Baukasten zusammensetzen. Voraussetzung zur Erstellung von PlaceCases ist, dass alle Templates und Module vorab definiert und ausreichend dokumentiert wurden.

Abbildung 4 Beispiel-Place-Case für einen Screen-Zustand: Die einzelnen Kästchen stellen die einzusetzenden Module dar. 왗

nav_main_top

Ct10_chart_pulldown

st01_printlogos

st04_login ct01_topthema

ct03_bullet_headline_pict

ct04_pict_headline

ct02_bullet_headline

ct04_pict_headline

ct02_bullet_headline

ct04_pict_headline

ct02_bullet_headline

ct04_pict_headline

st10_banner

st03_listbullet

st02_pulldown ct02_bullet_headline ct05_logo_text ct02_bullet_headline st05_3list_plus ct02_bullet_headline ct05_logo_text ct02_bullet_headline

ct02_2pict_pulldown

st06_foren

st07_author_text_ pulldown

st08_multimedia

nav_bottom bottom_frame

Tabellen Tabellen werden für Übersichten und für Verhaltensbeschreibungen von Daten und Objekten eingesetzt. Die Erstellung erfolgt vorzugsweise in Word oder Excel. Als Übersichten dienen Elementtabellen, Modul-, Container- und Screen-Verzeichnisse. In Elementtabellen werden – ergänzend zu

den Funktionsskizzen – die einzelnen funktionalen und inhaltlichen Bestandteile eines Screens oder Moduls als Liste aufgeführt und spezifiziert. Hier empfiehlt sich eine Unterscheidung zwischen funktionsfreien Inhalten (z.B. Texte, Bilder) und funktionalen Elementen (z.B. Buttons, Links).

Bausteine

177

Beispiel-Elementtabelle: Inhalte

Beispiel-Modulverzeichnis

Nr.

Element

Spezifikation

Nr.

1

Headline: Aktuelle Themen

Redaktionell pflegbar Begrenzung 20 Zeichen

M13 Tool-Box

Element

Siehe Modulbeschreibung M13

2

Bild: Key Visual

Fest integriert

M17 Artikel Kurzversion

3

Subheadline: Aus den Regionen

Redaktionell pflegbar Begrenzung 30 Zeichen

Siehe Modulbeschreibung M17

M18 Suche

Siehe Modulbeschreibung M8; Farbanpassung Typ 3

etc.

Spezifikation

etc.

Beispiel-Elementtabelle: Funktionen Beispiel-Containerverzeichnis Nr.

Element

Spezifikation

9

Editierfeld: Name

Freie Texteingabe, Begrenzung 20 Zeichen

10

Editierfeld: E-Mail

Freie Texteingabe, Begrenzung 20 Zeichen

11

Button: Senden

Aktiviert Anforderung Newsletter: Link zu Bestätigung 17.3.

etc.

Modul-, Container- und Screen-Verzeichnisse sind die konzeptionelle Grundlage für dynamische Websites. Ein Modul- oder Containerverzeichnis führt alle Module beziehungsweise Container auf, die ein übergeordnetes Template – das heißt eine entsprechend definierte Musterseite – enthält. Container sind als Zusammenfassung mehrerer Module zu verstehen. Ein Screen-Verzeichnis enthält alle in der Sitemap aufgeführten Screens mit Zuordnung der Templates und weiterer Anmerkungen.

178

Entwicklung

Nr.

Bezeichnung

C3

Content-Teaser Aktuell 2–4 kleine ContentTeaser (M12)

C5

Index-Teaser Fachseite

1–n Index-Teaser (M2)

C8

Content-Links kontextspezifisch

1–3 Content-Links (M3)

etc.

Bestandteile (Module)

Beispiel-Screen-Verzeichnis Nr.

1. Nav.

1.0

Magazin

2. Nav.

3. Nav.

Template

Anmerkung

Indexseite Typ 1

Redaktioneller Inhalt Redaktioneller Inhalt

1.1

Highlights

Content-Seite Spezial

1.2

Innovationen

Indexseite Typ 3

Redaktioneller Inhalt

Forum Typ 2

Temporär verfügbar

1.2.1

Expertenforum

etc.

Verhaltenstabellen definieren Verknüpfungen von Datenbankinhalten. Dabei können beispielsweise Attribute für eine Produktsuche zugeordnet werden. Weiterhin beschreiben sie die Reaktionen von Objekten in einer interak-

tiven Sequenz, die z.B. über Flash realisiert wird. Tabellen können auch zur Beschreibung von Prozessen eingesetzt werden und definieren dabei das Verhalten von Nutzer und System in Abhängigkeit zueinander.

Beispiel-Produktattribute Nr.

Produktgruppe

Produkt

Farben

Größen

Preise

1.1

T-Shirts

Sun

Blau, grün, gelb

S, M, L, XL

19,90 (DM)

1.2

T-Shirts

Rain

Grau, schwarz

S, M, L

24,90 (DM)

1.3

T-Shirts

Snow

weiß

S, M, L, XL, XXL

9,90 (DM)

2.1

Shorts

Beach

Pink, light-blue

M, L

15,90 (DM)

etc.

Beispiel-Interaktionstabelle für eine Flash-Sequenz Nr.

Objekt Event

Ablauf

Sound

1.1

Baum

Mouse click

Apfel fällt vom Baum

Effekt: Zischen

Datei Sfx_11_zischen

1.2

Baum

Mouse over

Erklärungstext erscheint

Sprache: Erklärung wird gleichzeitig gesprochen

Voice_12_ erklärung

2

Haus

Mouse over

Lichter gehen an

Effekt: Klingeln

Sfx_2_wecker

3

Hund

Mouse over

Hund springt auf

Effekt: Bellen

Sfx_3_hund

etc.

Bausteine

179

Auswahl Überweisung

Überweisungsformular

Abbildung 5 왘 Beispiel-Flow-Diagramm für einen Transaktionsprozess Banküberweisung

Eingabe Ausführungskonto

Eingabe Betrag

Eingabe Empfänger

Eingabe Empfängerbank

Eingabe EmpfängerBLZ

Eingabe Empfängerkonto

Eingabe Verwendungszweck

Legende: Screen

Auswahl Button "senden"

User-Aktivität

SystemAktivität

SystemMeldung

Flow-Diagramme Flow-Diagramme beschreiben Verläufe in Transaktions- und Kommunikationsprozessen sowie interaktiven Animationssequenzen (Abbildungen 5 und 6). Sie werden durch Flowchart-Programme oder durch UML-Software (siehe Kapitel »Prozessorientierte Website«) erstellt. Durch Kästchen und Verbindungspfeile werden die einzelnen Schritte eines interaktiven Verlaufs demonstriert und die Abhängigkeiten definiert. Die Leserichtung erfolgt von oben nach unten. An oberster Posi180

Entwicklung

Prüfung Plausibilität und Vollständigkeit

Fehler erkannt

Fehlermeldung

Bestätigung

tion steht die Ausgangssituation, von der aus auf die einzelnen möglichen Zustandsänderungen und Aktionen von System und Nutzer als Flussmodell weitergeführt werden. Die Detailgenauigkeit in Flow-Diagrammen ist je nach Bedarf unterschiedlich. Komplexe Abläufe sollten zunächst durch grobe Übersichtsdiagramme abgebildet werden, die sich dann in vertiefende Detaildiagramme oder Tabellen aufschlüsseln. Flow-Diagramme sind ein wichtiges Instrument für die Programmierung, da sie Regel-

1.0 Introszene: Hund vor Haus

Baum

Haus

Hund

Mouse over Baum

Mouse Click Baum

Mouse over Haus

Mouse over Hund

Animation: Apfel fällt vom Baum

Texteinblendung: Erklärung Sound/Sprache: Erklärung

Animation: Lichter gehen an

Animation: Aufstehen Sound: Bellen

Mouse Click Hund

Szene

Abbildung 6 Beispiel-Flow-Diagramm für eine interaktive Animationssequenz 왗

Legende: Objekt

UserAktivität

ObjektResponse

werke und das Verhalten von Objekten beschreiben, aus denen der Programmcode abgeleitet werden kann. Der Designer benötigt zusätzlich die Sicht auf statische Zustände durch Funktionsskizzen, um das Layout situationsspezifisch entwickeln zu können. Motion Script Ein Motion Script beschreibt einen linearen und bei Bedarf soundunterstützten Bewegtbildverlauf, der als Video oder Animation realisiert werden kann. Der Verlauf kann als abgeschlossene Sequenz konzipiert sein – wie z.B. bei einem kurzen Flash-Intro. Möglich ist auch, dass mehrere Sequenzen über Interaktionsprozesse miteinander verlinkt sind – beispielsweise in Quicktime VR-Videos, die über Hotspots miteinander verbunden sind. Die Verknüpfung wird dann über Flow-Diagramme beschrieben.

1.1 Übergangsszene: Hund im Haus

Das Motion Script enthält eine Spalte für die Zeit, für den Verlauf auf Bildebene und für die Einspielung von Sounds, die in der Regel nach Sprache und Musik beziehungsweise Geräuscheffekten getrennt wird (Abbildung 7). Wie detailliert Sie ein solches Script konzipieren, hängt nicht nur von Ihren Autorenqualitäten und Erfahrungen mit Bewegtbild ab. Ein kreativer Flash-Entwickler oder Videobearbeiter fühlt sich in seinem Tatendrang eingeschränkt, wenn ihm der Ablauf bis ins letzte Element vorgeschrieben wird. Häufig reicht es, wenn Sie im Script eine grobe Richtung vorgeben und die Details dann im Dialog entwickeln. Oberste Prämisse ist auch hier die maximale Qualität des Endergebnisses, und die ist häufig eher durch Kooperation als im Alleingang zu erreichen. Letztendlich hängt es allerdings auch vom Projekt ab, wie detailliert die Konzepte mit dem Kunden in schriftlicher

Bausteine

181

sec.

Animation

00.00

vor dem Haus: Die Tür öffnet sich und der Hund geht ins Haus

00.05

im Haus/Eingangsflur: Der Hund rennt schnüffelnd im Flur umher. Vor einem großen Eichenschrank bleibt er bellend stehen und kratzt an der Schranktür.

Sound: Sprache

Sound: Effekte, Musik

Geräusch vom Öffnen und Schließen der quietschenden Haustür

weibliche Stimme aus dem Off: "Bello, bist du es?"

Hundebellen

aus dem Hintergrund: Hundebellen 00.15

im Haus/auf der Treppe: Eine Frau kommt mit einem Messer bewaffnet vorsichtig die Treppe herunter und ruft nach dem Hund.

Frau auf der Treppe: "Bello, komm her!"

Die Frau bleibt versteinert stehen. 00.25

Das Bellen stoppt abrupt, und man hört ein lautes Jaulen.

etc.

Abbildung 7 Ein Motion Script beschreibt chronologisch einen linearen Bewegtbildverlauf, der durch Sprache, Musik und Soundeffekte begleitet sein kann. 왖

Form abzustimmen sind. Ein Flash-Intro ist dabei sicher unkritischer als eine interaktive Lernsequenz, in der die Inhalte zu hundert Prozent vom Kunden überprüft und freigegeben sein müssen. Motion Scripts spielten bisher eine eher untergeordnete Rolle für die Website-Konzeption. Mit Erweiterung der Übertragungsbandbreiten, der zunehmenden Verbreitung von Technologien wie Flash und nicht zuletzt mit dem Übergang zum Web-TV werden sie an Bedeutung gewinnen. Der Multimedia-Begriff aus der CD-ROM-Generation bekommt auch für das Web wieder Relevanz und fordert verstärkt Autorenqualitäten des Konzeptentwicklers.

182

Entwicklung

Datenattribute Datenbankinhalte werden nach einem definierten Regelwerk innerhalb der Website aufgerufen. Die Daten erhalten Eigenschaftsattribute in Form von Metadaten, auf die z.B. eine Suchfunktion reagiert, durch die personalisierte Inhalte generiert werden oder ein CrossSelling unterstützt wird. Attribute für Produkte können beispielsweise Ausstattungskriterien wie Farbe und Größe, Preiskategorien oder Einsatzgebiete sein. Die Zuordnung der Attribute gibt häufig der Kunde vor, kann aber durch die Konzeption unterstützt und erweitert werden. Gerade wenn es um CrossSelling und Personalisierung geht, sind Ihre Ideen gefragt. Ein einfaches Beispiel: Das Attribut für Produkte in einem Buchshop ist das Genre, in dem die entsprechenden Bücher angesiedelt sind. Der Nutzer wird über die Suche oder einen Produktkatalog zu allen Büchern

des ausgewählten Genres geführt. Wählt er besonders häufig Bücher aus der Kategorie »Krimi«, können ihm bei weiteren Besuchen oder über einen persönlichen Newsletter Neuerscheinungen aus diesem Bereich bevorzugt angeboten werden. Weiterhin kann das Attribut Genre für kontextbezogene Verweise verwendet werden. Hat der Nutzer einen Buchkrimi ausgewählt, bietet ihm das Programm z.B. dazu einen Musik-Sampler mit Krimimelodien aus bekannten TV-Serien des entsprechenden Genres an.

Datenattribute stellen Sie durch Tabellen oder in Matrix-Form dar. Das kann ein mühseliges Unterfangen sein, denn Datenbanken bedeuten in der Regel, dass es sehr viele Inhalte gibt. Diesen Teil der Konzeption allerdings zu vernachlässigen, bedeutet erhebliche Qualitätseinbußen. Je genauer die Daten den möglichen Fragen der Nutzers angepasst sind, desto schneller wird dieser das gesuchte Ergebnis später auch finden.

Bausteine

183

Website-Typen Vom Bausatz zum maßgeschneiderten Konzept Der Entwurf für ein Regal sieht anders aus als das Konzept für ein Brettspiel. Der Architekturplan für ein Haus unterscheidet sich von dem Bauplan für einen Bastelbogen, aus dem vielleicht später auch ein Haus entsteht. Eine Website kann alles sein: Regelwerk und starre Struktur, Zeit- und Raumgestaltung.

Die unterschiedlichen Ausprägungen einer Website machen ihre Beschreibung so schwierig. Sie kann interaktive Bühne, Werk- oder Spielzeug, Kommunikationszentrale oder einfach nur die Broschüre im Netz sein. Bei der Auswahl der richtigen Beschreibungsform hilft es Ihnen, wenn Sie vorher die Eigenschaften der Website durchleuchten. Ist sie in erster Linie Informationsvermittler und lebt von ihrer Aktualität? Ist sie vielleicht eher eine Software, mit der ich Dinge schnell erledigen kann? Verändern sich die Inhalte der Site fortlaufend beziehungsweise werden sie vom Nutzer verändert? Betrachten Sie dabei auch den technischen Hintergrund und späteren Betrieb, ohne ihn im Detail verstehen zu müssen: Geht es um eine reine HTML-Site oder eine Java-Anwendung? Steckt ein Redaktionssystem oder ein Customer Relation Management dahinter, das eine dynamische Ausprägung vorsieht? Generell kann man sagen: Je dynamischer oder auch interaktiver eine Website ist, desto abstrakter wird die Konzeptionsmethode sein. Wir haben im Folgenden vier Website-Typen unterschieden, die nur selten in Reinform existieren. Meistens gibt es einen Ausprägungsschwerpunkt, der sich mit Bestandteilen ande184

Entwicklung

rer Website-Typen mischt. Entsprechend werden Sie auch in der Konzeption die Beschreibungsformen nach Bedarf kombinieren, können sich aber an dem folgenden Modell orientieren: 왘 Eine statische Website können Sie durch Zustandsbeschreibungen synchron zum Aufbau konzipieren. 왘 Eine dynamische Websites beschreiben Sie unabhängig von den Inhalten als Raster und Regelwerk für den Screen-Aufbau. 왘 Bei einer Flash-basierten Website, die auf interaktiven Animationssequenzen beruht, definieren Sie Objektverhalten und lineare Abläufe auf einer Zeitschiene. 왘 Bei der Konzeption einer Transaktions-Site wechseln Sie zwischen Zustandsbeschreibungen, Regelwerken und Abbildungen zeitlicher Abläufe.

bewegt

statisch

dynamisch (Datenbankgeneriert)

Kommunikation

Sitemap Skizzen Musterseiten Funktionsskizzen Module

Sitemap Funktionsskizzen Tabellen

z.B. Streaming

z.B. Animation

Transaktion

Tools

Sitemap Diagramme Funktionsskizzen Tabellen

Diagramme Motion Scripts Tabellen

interaktiv

linear

Motion Scripts

왗 Abbildung 1 Die Auswahl der Beschreibungsformen hängt von der Ausprägung der Website ab.

Prozesse

Inhalte

z.B. Quicktime VR

Entwicklungsschritte eines Feinkonzepts 1. Definition übergreifender Prinzipien Legen Sie zusammen mit dem Design den generellen Site-Aufbau und das detaillierte Navigationsprinzip fest. Überprüfen Sie die Navigation bis in die letzte Ebene. Konkretisieren Sie übergreifende Funktionalitäten, wie z.B. eine Personalisierung. Bestimmen Sie die Darstellungsformen (Text, Bild, interaktive Sequenzen, Formulare, Tools etc.). Definieren Sie ein Regelwerk für Cross-Links und Querverweise. 2. Prüfung auf technische Machbarkeiten Klären Sie die technischen Machbarkeiten der geplanten Navigationsformen (z.B. Drag-andDrop-Navigation). Ermitteln Sie die Restriktionen bei der Darstellung von Inhalten (z.B. Animationen, Sound, Videos). Prüfen Sie generelle technische Restriktionen (z.B. bei Einsatz eines Content-Management-Systems: Anzahl der Navigationsebenen, Einsatz von Frames, Einsatz von Java-Script).

3. Materialübersicht Ordnen Sie das Material den inhaltlichen Bereichen zu. Identifizieren Sie fehlendes oder zu produzierendes Material. Erstellen Sie eine AssetListe und erinnern Sie den Kunden an fehlendes Material. 4. Bündeln ähnlicher Inhalts- und Funktionsbereiche Identifizieren Sie ähnliche Darstellungsanforderungen und Funktionen (z.B. Einstiegsseiten mit gleichem Aufbau, einheitliche Formen der Produktdarstellung, übergreifende Archivfunktion). 5. Gezielter Inhalts- und FunktionsBenchmark Recherchieren Sie im Web Vorbilder und Negativbeispiele für die Realisierung konkreter Inhalte und Funktionen (z.B. Suche, Archiv, Chat, Newsletter).

Website-Typen

185

6. Formaler Konzeptaufbau Definieren Sie die inhaltliche Konzeptstruktur und erstellen Sie ein grobes Inhaltsverzeichnis. Richten Sie das Deckblatt und die Headlines für die einzelnen Kapitel ein. Formulieren Sie die Einleitung des Konzepts (Grundlage, Anspruch und Inhalt des Konzepts).

13. Änderungshistorie Erstellen Sie bei Bedarf eine Änderungshistorie.

7. Sitemap Entwickeln Sie die erste Version der Sitemap und bei Bedarf der untergeordneten BereichsMaps als Übersicht der Seiten.

14. Inhaltsverzeichnis Erstellen Sie ein automatisiertes Inhaltsverzeichnis.

8. Konzeptionelle Ausarbeitung Arbeiten Sie die einzelnen Templates, individuellen Seiten, Bereiche und Module konzeptionell aus. Erstellen Sie dabei nach Bedarf Skizzen, Use-Cases, Flow-Diagramme und Motion Scripts. Entwickeln Sie nach Anforderung die Eingabemasken und das Navigationskonzept für die Redaktionssicht.

15. Qualitätscheck Drucken Sie die erste finale Version vollständig aus, lesen und korrigieren Sie diese. Geben Sie die Version dann mindestens einem Kollegen zur inhaltlichen Prüfung, Rechtschreib- und Grammatikkontrolle in die Hand. Schicken Sie die danach überarbeitete Version an alle wichtigen Teambeteiligten zur internen Abnahme.

9. Text-Briefing beziehungsweise Textintegration Definieren Sie Umfang und Inhalt redaktioneller Texte. Fügen Sie vorhandene redaktionelle Texte als Anlage an. Integrieren Sie nach Bedarf nichtredaktionelle Texte.

16. Finalisierung Arbeiten Sie die Korrekturen der Teammitglieder ein. Prüfen Sie noch einmal Inhaltsverzeichnis und Sitemap und überarbeiten Sie diese bei Bedarf. Schicken Sie die finale Version in ausgedruckter oder digitaler Version an den Kunden.

10. Sitemap-Abgleich Gleichen Sie die Sitemap und Bereichs-Maps mit der konzipierten Struktur ab und überarbeiten Sie diese bei Bedarf.

17. Teamabstimmung Tauschen Sie sich während des Konzeptionsprozesses regelmäßig mit Design und Technik aus.

11. Update der Asset-Liste Ergänzen Sie die Asset-Liste um alle während der Konzeption nachträglich definierten medialen Bestandteile.

186

12. Glossar und Legende Erstellen Sie ein Glossar und eine Legende zu allen verwendeten Fachbegriffen und Symbolen. Übernehmen Sie nach Möglichkeit Teile aus dem Glossar des Grobkonzepts.

Entwicklung

Abbildung 2 Aufbau eines Konzepts für eine statische Website 왗

1

Deckblatt

2

Inhaltsverzeichnis

3

Einleitung

6

Texte

Vorspann

4

Sitemap bzw. Bereichsmaps

5

Prosaeinleitung

text text text text text text text text text text text text text text text text text text text text text text text text text Elementtabellen

Übersicht

7

Legende

text text text text text text text text text text text text text text text text text text text text text text text text text

Seitenbeschreibungen (Texte ggf. in der Anlage)

8

Glossar

9

Assetliste

Anlage

Statische Website Vor einigen Jahren waren die meisten Websites nicht mehr als eine Übersetzung von Printbroschüren ins Netz. Sie dienten vorrangig der Darstellung von Texten und Bildern, die in mehr oder weniger individuell gestalteten Seiten aufgerufen werden konnten. Die Programmierung fand fast ausschließlich in HTML statt. Eine Aktualisierung erforderte entsprechende Programmierkenntnisse beziehungsweise Erfahrungen mit einem HTMLEditor und musste in der Regel von der Agentur übernommen werden. Eine in diesem

engen Sinne statische Website ist im professionellen E-Business zwar heute ein seltenes Phänomen, es gibt aber weiterhin eine Vielzahl an Sites, die über keine redaktionelle Schnittstelle zum Kunden verfügen. Diese so genannten statischen Sites empfehlen sich dann, wenn eine individuelle Gestaltung der einzelnen Seiten gewünscht ist oder keine regelmäßigen Änderungen der Inhalte während des Betriebs vorgesehen sind. Insbesondere Microsites mit einem begrenzten Gesamtumfang und einem temporären Auftrag wer-

Website-Typen

187

den als statische Sites realisiert, da sich der Initialaufwand für das Aufsetzen eines ContentManagement-Systems nicht lohnen würde. Eine statische Website können Sie Seite für Seite analog zum Aufbau des späteren Ergebnisses beschreiben. Sie beginnen mit der Abbildung der Gesamtstruktur durch eine Sitemap, die sich in untergeordnete BereichsMaps aufschlüsseln kann. Die einzelnen Seiten beschreiben Sie dann durch kurze einleitende Prosapassagen, Funktionsskizzen und Elementtabellen. Ergänzend dazu können an dieser Stelle die Texte integriert werden, falls sie einen geringen Umfang haben. Längere Texte sollten in eine Anlage übernommen werden. Die Zuordnung von Sitemap und Seitenbeschreibungen erfolgt über eine analoge Nummerierung. Bei einer umfangreichen Website führt die seitensynchrone Beschreibungsform häufig zu einem Konzeptvolumen, das auf wenig Gegenliebe bei den Empfängern stößt. Gerade hier sollten Redundanzen überprüft werden. Die platzraubenden Funktionsskizzen müssen nicht für jede Navigationsebene erstellt werden. Bei marginalen Änderungen der Elemente auf vertiefenden Ebenen reicht häufig eine entsprechende Erwähnung im Text.

188

Entwicklung

Konzeptbeispiel Ein wie oben beschriebenes Konzept bildete die Produktionsgrundlage für eine Microsite, mit der Siemens eine neue Produktlinie namens »Adop Services« teaserte (Abbildung 3). Die Site hatte einen rein kommunikativen und ebenso temporären Auftrag. Sie sollte in kurzen plakativen Texten und insbesondere durch Animationen das Leistungsversprechen der Produkte transparent machen. Das Feinkonzept umfasste inklusive der Texte rund 30 Seiten, was ungefähr dem Volumen der Website entsprach. Der Zeitaufwand für Grob- und Feinkonzept lag bei gut zwei Wochen inklusive Korrekturläufen und Abstimmungen mit dem Kunden. Die Beschreibungsform hatte sich in diesem Fall bewährt. Der Kunde hatte keine Interpretationsschwierigkeiten. Design und Programmierung konnten die Site ohne bedeutende Rückfragen in dem recht engen Zeitrahmen termingerecht realisieren. Funktionsbeschreibung: Die Homepage www.adop-services (Abbildung 3) enthält zwei Navigationswege zu den Inhalten. Der Nutzer gelangt zum einen über »animierte Lichtpunkte« zu den Themen. Ein PreviewFenster zeigt beim Roll-over über die Punkte einen kurzen Text, der auf den Inhalt hinweist. Den zweiten Navigationsweg bietet die Primär- und Metanavigation mit den entsprechenden Bereichspunkten, die auf allen Ebenen mitgeführt werden.

Kontakt Logo 1

1

Home

4 Animierte Navigation: Lichtpunkte

5 Logo 3

3

10 Teaser

Previewzeile Lichtpunkte

11

Visual

12

13

Text

왗 왖 Abbildung 3 Gegenüberstellung: Konzeptausschnitt und Screen-Ansicht der Homepage der Siemens-Microsite www.adop-services.de

14

2 Logo 2

6

7

8

9

Gesamtlösung

Einzelleistungen

Partner

Tooltest

Elementtabelle Funktionen

Elementtabelle Inhalte

Nr.

Element

Spezifikation

Nr.

Element

Spezifikation

1

Logo 1

Siemens-Logo: verlinkt auf www.siemens.com

11

Teaser

2

Logo 2

I & C-Logo: verlinkt auf www.ic.siemens.com

Text 1.2 »Teaser ToolTest«, verlinkt auf Einstiegsseite Tool-Test (5)

12

3

Logo 3

Adop Services-Logo: verlinkt auf Homepage (1)

Preview-Zeile Lichtpunkte

4

Button »Kontakt«/ Meta

verlinkt auf Kontaktseite (6)

5

Button »Home«/ Meta

verlinkt auf Homepage (1)

6

Button »Gesamtlösung«/Primär

verlinkt auf Einstiegsseite Gesamtlösung (2)

Preview-Texte erscheinen beim Roll-over über den zugehörigen Lichtpunkt: Text 0.1 »Gesamtlösung« Text 0.2 »Einzelleistungen« Text 0.3 »Partner« Text 0.4 »Tool-Test« Text 0.5 »Kontakt«

13

Visual

7

Button »Einzelleistungen«/Primär

verlinkt auf Einstiegsseite Einzelleistungen (3)

das Visual wird jeweils per Zufallsgenerator ausgewählt

8

Button »Partner«/ Primär

verlinkt auf Einstiegsseite Partner (4)

14

Text

Text 1.1 »Leistungsversprechen Adop«

9

Button »Tool-Test«/ Primär

verlinkt auf Einstiegsseite Tool-Test (5)

10

animierte Animation Lichtpunkte verlinken entsprechend auf die Seiten 2-6

Website-Typen

189

Content-basierte dynamische Website Dynamische Websites generieren sich nach einem definierten Regelwerk aus Datenbankinhalten. Die Inhalte, Navigations- und Gestaltungselemente werden dabei getrennt abgelegt und können unabhängig voneinander bearbeitet werden. Die Aktualisierung der Site erfordert keine Programmierkenntnisse. Für die Pflege werden Redaktionsmasken erstellt, über die der Bearbeiter die einzelnen Inhalte durch Upload- und Editierfunktionen austauschen kann. Wie viel Freiheit er dabei hat, hängt natürlich vom System ab, wird aber in erster Linie durch das visuelle und inhaltliche Konzept vorgegeben. Ziel ist, dass der Gestaltungsrahmen erhalten bleibt und gleichzeitig genügend Spielraum für inhaltliche Veränderungen besteht. Content-Management-Systeme Technische Grundlage für dynamische Websites bilden so genannte Content-ManagementSysteme, auf deren Basis die Site entwickelt und später gepflegt wird. Die Systeme können komplexe Entwicklungsumgebungen sein, in denen die einzelnen Site-Module programmiert und als Darstellungsraster zusammenge-

190

Entwicklung

führt werden. Auf Live-Ebene werden die Inhalte der Site dann dynamisch generiert. Konkret heißt das: Mit dem Aufruf einer Seite werden die zugehörigen inhaltlichen und gestalterischen Elemente aus den Datenbanken abgerufen und nach dem vorgegebenen Gestaltungsraster angezeigt. Einfachere ContentManagement-Systeme erzeugen die Website häufig nur auf Redaktionsebene dynamisch. Die Site wird dann als statische Version auf den Live-Server überspielt. Vorteil sind die in der Regel geringeren Ladezeiten, da jeweils nur eine zusammengesetzte Seite aufgerufen wird und nicht mehrere Datenbankabfragen stattfinden müssen. Auch komplexe Entwicklungsebenen können die Option bieten, die Site auf dem Live-Server in statischer Version abzulegen. Die Systeme sehen in erster Linie einen inhaltlichen Fokus der Anwendungen vor. Sie können aber auch zur Entwicklung von Prozessmodulen eingesetzt werden. Insbesondere die komplexeren Systeme sind auf Plattformen ausgerichtet, die eine Mischung aus Content, Applikationen und Transaktionsmodulen beinhalten.

Die Vorteile von Content-Management-Systemen sind: 왘 Die Pflege der Website erfordert keine HTML-Kenntnisse. 왘 Inhalt, Navigation und Layout werden getrennt voneinander abgelegt und können entsprechend unabhängig bearbeitet werden. 왘 Bestehende Datenbanken können integriert werden. 왘 Die Implementierungszeit ist kurz und erfordert keine Programmierung. 왘 Die Systeme ermöglichen ein Link-Management, womit z.B. tote Links überprüft werden können. 왘 Die Redaktion kann Erscheinungszeiten für die einzelnen Inhalte festlegen. 왘 Die Pflege ist auf dezentraler Ebene möglich und kann zentral gesteuert werden (Berechtigungen, Freigaben, Qualitätskontrolle). Content-Management-Systeme eignen sich allerdings nicht nur zur Erstellung und Pflege von Websites, sondern werden verstärkt auch für Multi-Channel-Plattformen eingesetzt, die neben der Ausgabe auf einer Website die Darstellung auf mobilen Endgeräten vorsehen. Die Inhalte werden dabei einmalig abgelegt und in den zugeordneten Formaten und im vorgesehenen Raster für die einzelnen Devices ausgegeben.

Vorgehen der Konzeption Für die Konzeption dynamischer Websites ist eine sehr enge Zusammenarbeit zwischen inhaltlichem Konzepter, Technik und Design notwendig. Sie müssen sich zumindest oberflächlich in das technische System hineindenken und aus diesem Blickwinkel die Website beschreiben. Es ist dabei nicht notwendig, jedes Detail der technischen Entwicklung zu verstehen. Wichtiger sind regelmäßige Gespräche mit dem verantwortlichen Techniker, um sich im richtigen formalen Rahmen bewegen und gleichzeitig Machbarkeiten und Grenzen beachten zu können. Aus Designsicht ist hier nicht nur das Konzept Produktionsvorlage, sondern das Design selbst wird Vorlage für das Konzept. Bevor der Konzepter Screen-Beschreibungen in Form von Place-Cases erstellen kann, muss das grobe visuelle Konzept schon entsprechend entwickelt sein. Der Designer benötigt dafür wiederum Input vom Konzepter. Regelmäßige interne Zwischen-Briefings und eine laufende Kommunikation sind für diesen Prozess unerlässlich.

Website-Typen

191

Abbildung 4 왘 Übersicht der Konzepthierarchie für dynamische Websites

Screenverzeichnis

Sitemap

Seitenraster

zeigt als Übersicht zeigt als Übersicht setzt den Rahmen

Element

Template

Template

Template

beinhaltet

beinhaltet

beinhaltet

Container

Container

beinhaltet

beinhaltet

Modul

Modul

Modul

Modul

beinhaltet

beinhaltet

beinhaltet

beinhaltet

Element

Element

Element

Element

In einem Feinkonzept für dynamische Websites beschreiben Sie nicht mehr jede einzelne Seite mit ihren Inhalten und Funktionen, sondern definieren übergeordnete Seitenraster, Templates, Container und Module, in denen die Inhalte und Funktionen später abgebildet werden sollen. Als Übersicht der gesamten Site dient neben der Sitemap ein Screen-Verzeichnis, das alle Seiten den definierten Templates zuordnet. Die Templates basieren auf einem Seitenraster, welches das Grundlayout aller Seiten wiedergibt. Den Templates sind die Module und Container untergeordnet, die sich wiederum in Elemente aufschlüsseln. Die Beschreibung im Konzept erfolgt hierarchisch, 192

Entwicklung

Element

beginnend mit dem Seitenraster und endend mit der Modulbeschreibung (Abbildung 4). Die Reihenfolge der Beschreibung im Konzept entspricht dabei nicht der Reihenfolge bei der Konzeptentwicklung. Hier beginnt man häufig zunächst mit den Details und erarbeitet daraus übergeordnete Prinzipien. Seitenraster Ein Seitenraster definiert das Grundlayout für alle Templates (Abbildung 5). Es legt die grobe Einteilung der Seiten fest und ordnet zu, welche Spalten und Felder für Inhalte, Navigation und sonstige Funktionen vorgesehen sind. Weiterhin legt es die konstanten Elemente der

Abbildung 5 Beispielbeschreibung Seitenraster 왗

Kopfbereich Kopfbereich (fest) Logo Metanavigation

Linke Spalte

Mittlere Spalte

Rechte Spalte

Linke Spalte (variabel) Hauptnavigation Tools

Mittlere Spalte (variabel) Contentbereich

Rechte Spalte (variabel) weiterführende Links Fußbereich (fest) Fußzeile

Fußbereich

Website fest, die auf allen Seiten in gleicher Form erscheinen sollen. Dieses kann z.B. das Logo und die Metanavigation betreffen. Aus dem Seitenraster werden dann die einzelnen Templates abgeleitet. Template Der Produktionsaufwand einer dynamischen Website hängt maßgeblich von der Anzahl der Templates ab. Ein Template versteht sich dabei als Mustervorlage für Seiten, die einen gleichen formalen Aufbau haben. In der Template-Beschreibung wird festgelegt, welche Module und Container auf der Seite vorgesehen sind. Die Module und Container werden im Rahmen der Template-Definition nur zugeordnet, an anderer Stelle dann genauer definiert. Sie gelten ebenfalls als Raster auf untergeordneter Ebene und legen fest, aus welchen Funktionselementen und inhaltlichen Bausteinen sie sich zusammen setzen. Jedes Template muss nur einmal gebaut werden und erscheint dann an verschieden-

sten Stellen auf der Site mit den jeweils vordefinierten oder redaktionell eingepflegten Inhalten und Funktionen. Ziel ist es, in der Produktion eine möglichst hohe Wiederverwertung zu schaffen. Um ein Template definieren zu können, analysieren Sie zunächst einmal die Anforderungen der einzelnen Seiten und gleichen die Parallelen ab. Ein Template kann z.B. als Musterseite für thematische Einstiegsebenen oder für Seiten mit Produktinformationen angelegt werden, da hier der Aufbau einem übergeordneten Prinzip folgen kann. Es enthält eine entsprechende Bezeichnung – z.B. »Thematische Einstiegsseite«- und wird in dem Screen-Verzeichnis den zugehörigen Seiten zugeordnet. Im Konzept beschreiben Sie das Template in Form des Place-Cases, das heißt durch eine schematische Skizze des Screen-Aufbaus (Abbildung 6). Ergänzend dazu sollten Sie eine Liste der integrierten Module und Container mit zugehöriger Bezeichnung und Nummerierung anfügen.

Website-Typen

193

Abbildung 6 왘 Beispielbeschreibung Template

1.1 Logo

1.2 Metanavigation Kopfbereich (fest)

2.1 Hauptnavigation

Fußbereich (fest) 3.1 Titelbild Linke Spalte (variabel) 4.1 News 7.1 Großer Teaser

2.1 Hauptnavigation 2.2 Fachinfos 2.3 Literatursuche 2.4 Forum

2.2 Fachinfos Mittlere Spalte (variabel) 3.1 Titelbild 7.1 Großer Teaser 1.7 Container Kleine Teaser

1.7 Container Kleine Teaser

7.2 Kleiner Teaser

4.2 Termine Rechte Spalte (variabel)

2.3 Literatursuche

4.1 News 4.2 Termine 4.3 Spezial

7.2 Kleiner Teaser

2.4 Forum

7.2 Kleiner Teaser

4.3 Spezial

5.1 Fußzeile

Nicht für alle Seiten ist es möglich, sich einem Template unterzuordnen. Diese werden dann durch Funktionsskizzen in ihrer detaillierten Zusammensetzung als Sonderseiten beschrieben. Container Ein Container setzt sich aus mehreren Modulen zusammen und wird in dieser Form mehrfach verwendet. Dabei kann es sich beispielsweise um ein Paket mehrerer Teaser handeln oder um die Zusammenstellung von Link-Listen unterschiedlicher Kategorien. Die Beschreibung des Containers enthält einen kurzen Prosatext, eine Funktionsskizze und eine Modultabelle (Abbildung 7). Der Prosatext fasst in wenigen Worten die Aufgabe des Containers zusammen. Die Funktionsskizze zeigt die einzelnen Module. Die Tabelle führt diese zusätzlich als Übersicht auf. Ein Container 194

Entwicklung

kann eine fest definierte oder eine unendliche Zahl an Modulen vorsehen. Des Weiteren hat er einen »dynamischen« Einfluss auf das Design, da der Platzbedarf für die Darstellung offen ist. Es empfiehlt sich, hier eine Maximalanzahl an Modulen vorzugeben. Funktionsbeschreibung Abbildung 7: Der Container »Kleine Teaser« dient zur Aufnahme von bis zu drei kleinen Teasern. Er kann auf der Homepage und den Einstiegsseiten der Produktbereiche eingesetzt werden. Module Ein Modul bildet eine sinnvolle Einheit aus funktionalen und inhaltlichen Elementen. Dieses kann z.B. eine Suchfunktion sein, die ein Eingabefeld und eine Funktion zum Absenden des Suchauftrages enthält. Ein Modul kann auch die Ausgabeform eines Artikels in Kurz-

Funktionsskizze

Funktionsskizze 1

Suche

1.7 Container Kleine Teaser

I

2

7.2 Kleiner Teaser

Auf dieser Website

3

4

7.2 Kleiner Teaser

im WWW

Abbildung 8 왖 Beispielbeschreibung eines Moduls – Funktionsskizze

7.2 Kleiner Teaser

Elementtabelle Abbildung 7 Beispielbeschreibung eines Containers – Funktionsskizze

Nr.

Element

Spezifikation

1

Text »Suche« des Moduls

hardcodierter Titel

2

Editierfeld

Länge: 20 Zeichen, Texteingabe unbegrenzt

3

Button »auf dieser Website«

startet die Suche über die Website

4

Button »Im WWW«

startet die Suche über das WWW durch AltaVista

왖

Modultabelle Module

Beschreibung

Modul 7.2

Kleiner Teaser

bis zu drei Module

version sein, die sich aus Headline, Kurztext und einem Link zur Vollversion zusammensetzt. Ein Modul wird ähnlich wie der Container durch einen kurzen Prosatext, eine Funktionsskizze und eine Tabelle beschrieben (Abbildung 8). Die Tabelle enthält alle Elemente des Moduls, die parallel in der Funktionsskizze abgebildet sind. Der Prosatext definiert zusammenfassend die Funktion des Moduls.

Funktionsbeschreibung Abbildung 8: Der Nutzer kann in ein Eingabefeld einen oder mehrere Suchbegriffe eingeben. Danach kann er wahlweise die Suche auf der Site oder im Web aktivieren. Die Web-Suche erfolgt über die Suchmaschine Alta Vista.

Website-Typen

195

Abbildung 9 Beispielbeschreibung eines Inhaltstyps (Eingabemaske für den Redakteur) – Funktionsskizze 왗

Funktionsskizze 1

Titel

I

2

Untertitel

I

3

Kurztext

I

4

Volltext

I

5

Senden

Elementtabelle Nr.

Element

Spezifikation

Pflicht/Option

1

Titel

Freitextfeld, Eingabe begrenzt auf 70 Zeichen

Pflicht

2

Unterzeile

Freitextfeld, Eingabe begrenzt auf 100 Zeichen

Option

3

Kurztext

Freitextfeld, Eingabe begrenzt auf 200 Zeichen

Pflicht Option

4

Volltext

Freitextfeld, Eingabe unbegrenzt

5

Button »Senden«

speichert die eingegebenen Daten; Überprüfung, ob alle Pflichtfelder ausgefüllt sind

Redaktionssicht und Inhaltstypen Zusätzlich zur Ausgabesicht – das heißt der Sicht des späteren Nutzers – wird die Eingabesicht der Inhalte beschrieben, womit die Perspektive des Redakteurs gemeint ist. Das so genannte Content-Entry-Konzept definiert die Redaktionsmasken für die pflegbaren Inhalte einer dynamischen Website. Die Masken können für einzelne Module oder für Inhaltstypen angelegt sein. Inhaltstypen stehen dabei für 196

Entwicklung

mehrere inhaltlich zusammengehörige Module. Dazu ein Beispiel: Für einen Fachartikel kann auf der Website vorgesehen sein, dass er als Kurz- und Vollversion erscheinen kann. Die Ausgabevarianten Kurz- und Vollversion werden dabei jeweils als ein Modul betrachtet. Der Artikel in seiner Gesamtheit gilt als Inhaltstyp, der in diesem Fall in unterschiedlicher Ausprägung erscheinen kann.

Ziel bei der Entwicklung der Redaktionsebene ist maximale Effizienz für den Redakteur. Inhalte, die in einer Anwendung mehrfach oder in variierter Zusammensetzung auftauchen, sollen nur einmalig gepflegt werden müssen. Für den Inhaltstyp Artikel bedeutet dies, dass es nur eine Redaktionsmaske gibt, über die sowohl die Kurz- als auch die Vollversion eingepflegt werden kann. Die Beschreibung der Redaktionsmasken erfolgt entsprechend den Modulen durch einen kurzen Prosatext, eine Funktionsskizze und eine Elementtabelle (Abbildung 9). Neben der Definition der Masken ist dann ein über-

geordnetes Navigationskonzept zu entwickeln, das die Wege zu den einzelnen Masken festlegt. Die Konzeption der Redaktionsebene entspricht formal der einer statischen Website. In einer Sitemap zeigen Sie die einzelnen Redaktionsseiten im Überblick und erklären dann über die Funktionsskizzen die übergeordnete Benutzerführung und Elemente der einzelnen Masken. Funktionsbeschreibung Abbildung 9: Die Artikelmaske nimmt die Inhalte für die Kurzund Vollversion eines textbasierten Artikels auf.

Links zu weiteren Informationen über Content-Management-Systeme 왘 www.contentmanager.de 왘 www.zdnet.de/internet/artikel/wdm/ privates Web-Magazin mit Foren und Pro200007/content01_00-wc.html duktinformationen Internet Professional über Grundlagen von 왘 www.webagency.de/infopool/ Content-Management-Systemen 왘 www.internetmanagement.ch internetwissen/content-management.htm Themenseite mit allgemeinen Informationen Berichte, Studien, Kommentare zu unter왘 www.gi-ev.de/informatik/lexikon/ schiedlichen Managementthemen im Interinf-lex-content-management.shtml net-Bereich 왘 www.groupware-online.de/channels/ Themenseite mit allgemeinen Informationen 왘 www.zdnet.de/internet/artikel/sw/200007/ contentmanagement.asp contentmanager-wc.html Magazin: Expertenwissen für IT-Entscheider 왘 Auflistung der Content-Managementwww.knowledgemarkt.de/denkbar/ Systeme technikeinsatz/content Praktische Tipps für den Einsatz einer Content-Management-Software

Website-Typen

197

Prozessorientierte Website Das Ziel von Websites geht verstärkt in Richtung Prozessunterstützung. Geschäftsvorgänge, Arbeits- und Kommunikationsabläufe finden zunehmend auf webbasierter Plattform statt und werden über Schnittstellen mit internen Systemen und Datenbanken verknüpft. Die Website integriert nicht mehr nur einzelne Applikationen, sondern wird selbst zur komplexen Software. Das Konzept für eine solche prozessorientierte Plattform verlangt nach einer anderen Beschreibungsmethodik als eine inhaltlich dominierte Site. Der Konzepter muss sich hier noch intensiver mit der technischen Architektur beschäftigen. Außerdem ist er gefordert, die Prozesse zu verstehen und aus Nutzersicht optimal zu übersetzen. Oberstes Ziel ist es, auf Nutzer- und Kundenseite eine Einsparung von Zeit und eine messbare Kostenreduktion zu erreichen. Usability spielt hier eine zentrale Rolle. Regelmäßige Tests sollten überprüfen, ob die Benutzerführung verstanden wird und zu einer komfortablen Nutzung der Site beiträgt. Skizzen, Tabellen, Diagramme Ein Prozess ist ein Dialog zwischen System und Nutzer, der über ein Regelwerk gesteuert wird. Bei der Konzeption eines solchen Prozesses beschreiben Sie sowohl statische Sichten wie auch dynamische Abläufe, die in Datenverknüpfungen und Flow-Diagrammen abgebildet werden. Eine statische Sicht kann z.B. ein Formular sein, zu dem alle Eingabefelder und Auswahloptionen definiert werden. Das wirkt zunächst einmal harmlos, aber gerade hier lauern viele Fragen, die man schnell übersehen kann: Gibt es eine Feldbegrenzung oder kann grenzenlos 198

Entwicklung

editiert werden? Was passiert, wenn jemand ein Feld nicht ausgefüllt hat – welche Felder sind optional, welche Pflicht? Können Falscheingaben überprüft werden? Was passiert z.B., wenn jemand eine nicht existierende Postleitzahl eingegeben hat oder der Ort mit der Postleitzahl nicht übereinstimmt? Welche Fehlermeldungen kann es geben? Wo erscheinen sie und wie kommt man von dort zur Eingabe zurück? All diese Fragen müssen mit der Formularbeschreibung beantwortet werden. Neben der Funktionsskizze werden die Elemente in einer Tabelle ausführlich beschrieben und das Reaktionsverhalten dazu definiert. Zusätzlich gibt es meistens eine Liste möglicher Fehlermeldungen. Neben Funktionsskizzen und Tabellen sind Flow-Diagramme sinnvoll für Prozessbeschreibungen. Sie können einen detaillierten Datenfluss abbilden, z.B. für die Überprüfung vorhandener Kundendaten bei einem Log-in-Prozess. Flow-Diagramme helfen aber auch als Übersicht der Verknüpfung von Prozessmodulen – z.B. zwischen einem Bestellprozess, der Verfügbarkeitsabfrage und der Verwaltung von Kundendaten. UML Seit einiger Zeit geistert der Begriff »UML« – übersetzt Unified Modeling Language – durch die Internet-Agenturen. Konzepter wurden in Fortbildungen geschickt, um den Umgang mit UML-Software zu lernen und künftig in der inhaltlichen Konzeption einzusetzen. Der Aktionsdrang erhielt recht bald einen Dämpfer, da man feststellte, dass sich ein inhaltlicher Konzepter nicht auf die Schnelle das nötige technische Verständnis aneignen kann, um

UML fehlerfrei einzusetzen. Fehler sind allerdings hier besonders fatal, da sie unbemerkt in den Programmcode einfließen können. UML ist aus der Konzeption nicht verschwunden, wird allerdings überlegter eingesetzt – abhängig von den Fähigkeiten des Konzeptverantwortlichen und der Ausprägung des Projekts. UML ist in erster Linie eine Sprache zur Software-Beschreibung. Der semantische Baukasten enthält eine strukturierte Sammlung an Diagrammtypen, die verschiedene Blickrichtungen auf ein System öffnen. Die Sichten haben einen unterschiedlich tiefen Abstraktionsgrad, beginnend bei einer groben Anforderungsperspektive des Nutzers bis hin zu detaillierten Systemkomponenten. Die einzelnen Diagramme werden zu einem Gesamtmodell verknüpft, das alle Aspekte des Systems beinhaltet. Grundsätzlich unterscheiden sich Struktur- und Verhaltensdiagramme. Zu den Strukturdiagrammen gehören beispielsweise Klassendiagramme, in denen die wesentlichen Systemelemente definiert und deren Beziehungen und Datenbankschemata spezifiziert werden. Zu den Verhaltensdiagrammen gehören unter anderem Use-Cases und Sequenzdiagramme. Der Verantwortliche für das inhaltliche Konzept kann Use-Case-Diagramme und Sequenzdiagramme erstellen, sollte dieses allerdings nur in enger Abstimmung mit der Technik tun, insbesondere dann, wenn UML-Software eingesetzt wird. Für eine statische Microsite ist eine UML-Beschreibung wenig sinnvoll, für eine prozesslastige Website ist sie allerdings ein wertvolles Hilfsmittel. Stimmen Sie sich vorher mit dem Techniker ab, ob UML eingesetzt werden soll und wie die Aufgabenverteilung zwischen Konzept und IT ist.

Mittlerweile gibt es eine reichliche Auswahl an UML-Software. Gängige Programme sind beispielsweise Together J und Rational Rose. Die UML-Software sorgt z.B. dafür, dass Änderungen von einem auf andere Diagramme automatisch übertragen werden und ist teilweise auch in der Lage, Java-Code für die Programmierung zu generieren. Für die Konzeption ist es allerdings weniger wichtig, UML-Software zu beherrschen und die Semantik von UML vollständig zu verstehen. Wesentlich ist die Denkweise, die hinter UML steht und bei der Konzeption von prozessorientierten Websites hilfreich sein kann. Ausgangspunkt bilden die so genannten UseCases – übersetzt Anwendungsfälle. Aus Nutzersicht wird dabei analysiert, welche Aktivitäten auf der Website stattfinden könnten und wie die Anwendungsfälle miteinander verknüpft sind. Hinter jedem Anwendungsfall steht ein bestimmter Akteur und ein Interesse, das er verfolgt. Ein Akteur ist in erster Linie der spätere Nutzer der Website, der wiederum verschie-

Die Wurzeln von UML UML entstammt der Software-Entwicklung und hat sich dort als internationaler Standard durchgesetzt. Es handelt sich um eine Modellierungssprache zur Beschreibung von Software, die über eine genaue Notation definiert ist. UML entstand Ende 1997 im Bereich der objektorientierten Programmierung und wurde von dem Unternehmen Rational entwickelt. Ziel der Objektorientierung ist es, wiederverwertbare Objekte zu schaffen und der Programmierung den Zugriff auf diese schon entwickelten Objekte über so genannte Klassenbibliotheken zu ermöglichen.

Website-Typen

199

Abbildung 10 Beispiel-Use-Case-Diagramm »Warenkorb«: Übersicht und Beziehungen der Use-Cases 왗

System Anzahl eines Produktes ändern

Produkt aus dem Warenkorb löschen

Produkteigenschaften ändern

Produkteigenschaften zeigen

WarenkorbEingaben sichern

User auschecken

dene Rollen einnehmen kann. Die Anforderung eines Nutzers in der Rolle eines registrierten Kunden kann z.B. sein, seine Adresse zu ändern, da er umgezogen ist. Ein Akteur kann aber auch der Administrator einer Website sein, der z.B. die Zugangsrechte der späteren Nutzer eines Intranets verwaltet. Die Beschreibung der Use-Cases stellt Anforderungen an das System, ohne technisches Vokabular zu verwenden. In der Anforderungsspezifikation beziehungsweise im Grobkonzept werden die einzelnen Use-Cases definiert und im Überblick dargestellt. Ein solches UseCase-Diagramm stellt die Beziehung zwischen Akteuren und Anwendungsfällen her und zeigt das äußerlich erkennbare Systemverhalten aus der Sicht des Anwenders (Abbildung 10). UML definiert für die Darstellung des Diagramms eine feste Symbolik. Viele Use-Case-Programme ermöglichen es, die erstellten Diagramme in ein Word-Dokument zu importieren. Dort können sie dann durch weitere Beschreibungen ergänzt werden. Es ist allerdings nicht zwangsweise notwendig, UML-Software zur 200

Entwicklung

Darstellung eines Use-Case-Diagramms zu nutzen. Sie können auch ganz einfach ein Flowchart-Programm benutzen und die verwendete Symbolik mit dem Techniker abstimmen. Im Feinkonzept werden die Use-Cases in einzelne Szenarien aufgeschlüsselt und durch Sequenzdiagramme abgebildet. Sequenzdiagramme zeigen die Interaktionen zwischen Nutzer und Website in einer zeitlichen Abfolge. Der Use-Case hat in der Regel einen Standardverlauf und abweichende Sequenzen, die als mehr oder weniger häufig auftretende Ausnahmefälle zu betrachten sind. UML gibt auch hier eine feste Symbolik für die Darstellung von Sequenzdiagrammen vor. Sie können für die Beschreibung der Sequenzen aber auch einfach Tabellen verwenden: Die linke Spalte enthält die Handlungen beziehungsweise Intentionen des Akteurs, die rechte die Reaktionen des Systems. Im Tabellenkopf werden die Vorbedingungen definiert, eine kurze Beschreibung der Zielsetzung und die Beziehung zu anderen Use-Cases aufgeführt.

Beispiel einer tabellarischen Use-Case-Beschreibung Name

U: Lieferadresse ändern

Short description

Ein registrierter User ändert seine vorher eingegebene Lieferadresse.

Precondition

Der User ist registriert und hat eine Lieferadresse eingegeben.

Use-Case Includes Use-Case Included in

Bestellung ausführen

Standard Workflow: User

System

1. User klickt auf den Link »Lieferadresse ändern« auf der 2. System lädt Eingabeseite für die Lieferadresse; per DeZusammenfassungsseite im Bestellvorgang fault ist die zuletzt eingegebene Lieferadresse angezeigt 3. User modifiziert die Lieferadresse vollständig und klickt auf den Button »Speichern«

4. System überschreibt die vorher eingegebene Lieferadresse und lädt die Zusammenfassungsseite im Bestellvorgang mit neuer Lieferadresse

Alternative Workflow 1: Neukunde ohne separate Lieferadresse Precondition: Neukunde, der seine Registrierung ohne Eingabe einer separaten Lieferadresse zusätzlich zur Kundenadresse abgeschlossen hat 1. User klickt auf den Link »Lieferadresse ändern« auf der 2. System lädt Eingabeseite für die Lieferadresse; per Zusammenfassungsseite im Bestellvorgang Default ist die Kundenadresse angezeigt 3. User modifiziert die Lieferadresse vollständig und klickt auf den Button »Speichern«

4. System speichert die Lieferadresse ohne Einfluss auf die Kundenadresse und lädt die Zusammenfassungsseite im Bestellvorgang mit der Lieferadresse

Alternative Workflow 2: unvollständige Dateneingabe Precondition: Eingabemaske für Lieferadresse wurde aufgerufen 1. User klickt auf den Link »Lieferadresse ändern« auf der 2. System lädt Eingabeseite für die Lieferadresse; per Zusammenfassungsseite im Bestellvorgang Default ist die Kundenadresse angezeigt 3. User modifiziert die Lieferadresse unvollständig und klickt auf den Button »Speichern«

4. System lädt erneut die Eingabeseite für die Lieferadresse und zeigt eine Fehlermeldung, die auf die fehlenden Eingabedaten hinweist

Alternative Workflow 3: Abbruch Precondition: Eingabemaske für Lieferadresse wurde aufgerufen 1. User modifiziert die Lieferadresse und klickt auf den Button »Abbrechen«

2. System löscht alle neuen Eingaben zur Lieferadresse, behält die vorher eingebenen Daten und lädt die Zusammenfassungsseite im Bestellvorgang mit der alten Lieferadresse

Website-Typen

201

Abbildung 11 왖 왘 Screen-Ausschnitte zum tabellarischen Use-Case-Beispiel »Alternative Workflow 1«: Der Nutzer wählt auf der Zusammenfassungsseite im Bestellvorgang die Option »Lieferadresse ändern«. Auf der Folgeseite wird voreingestellt seine Kundenadresse angeboten, da er bei der Registrierung keine separate Lieferadresse angegeben hatte.

Weitere Informationen zu UML Im Internet: 왘 www.jeckle.de/unified.htm Links und allgemeine Informationen (private Homepage) 왘 www.oose.de/uml Private Homepage von Bernd Oestereich (Unternehmensberater, Trainer, Geschäftsführer oose.de GmbH) 왘 inf2-www.informatik.unibwmuenchen.de/GROOM/index.htm Arbeitskreis »Grundlagen der objektorientierten Modellierung« (GROOM) 왘 www.system-bauhaus.de/uml Netzwerk international bekannter und im deutschsprachigen Raum tätiger, unabhängiger Fachleute für objektorientierte Programmierung

202

Entwicklung

www.sigs.de/html/umlkompt.htm Artikel zum Thema UML (Übersicht, Einführung) 왘 www.umlsig.de Special-Interest-Portal UML mit diversen Links 왘 www.weblehre.de/verfahren/ book/uml.htm Buchtipps zu UML Bücher bei Galileo Press: 왘 UML projektorientiert, Patrick Grässle, Henriette Baum, Philippe Baumann, Galileo Computing, 2000 왘 Rational Rose im Projekteinsatz – SoftwareModellierung mit der UML, Alf Bormann, Manfred Rätzmann, Jörg Sauer, Jan Matèrne, Gunnar Landgrebe, Galileo Computing, ab November 2001 왘

Klaus Voss, Scientific Director, Pixelpark AG Eine besonders kritische Phase bei der Entwicklung von Websites ist die Umsetzung des Konzepts in Software. Das Konzept enthält – wie jedes andere Dokument oder überhaupt jede sprachliche Äußerung – implizite Annahmen, das heißt man geht von etwas als selbstverständlich aus, ohne es direkt zu benennen. Bei der Umsetzung des Konzepts in Software, also der Übersetzung in eine Programmiersprache, müssen diese impliziten Annahmen explizit gemacht werden, da die Software am Ende von einer Maschine ausgeführt wird, die nicht mitdenkt. Je trivialer diese Annahmen sind, um so leichter werden sie übersehen. Zudem können Anforderungen, die auf den ersten Blick sehr praktisch erscheinen, einen immensen Aufwand bei der technischen Realisierung nach sich ziehen. UML stellt im Prinzip einen Zwischenschritt dar, der die Übersetzung des natürlichsprachlichen Konzepts in eine formale Programmiersprache erleichtern kann. Über die Notation können anschauliche Objekte in stringenten formalen Zusammenhängen dargestellt werden. Z.B. wird aus der impliziten Annahme, dass ein Redakteur selbstverständlich redigieren soll, der Anforderungskatalog: 왘 Es gibt User. 왘 Es gibt Dokumente. 왘 Es gibt Rollen. 왘 Der User kann die Rolle »Redakteur« haben. 왘 In der Rolle Redakteur hat der User spezielle Rechte. 왘 Rechte sind: Dokument öffnen, lesen, kopieren, editieren, löschen.

Je nachdem, an welcher Stelle der Applikation der Redakteur etwas redigieren können soll, reicht der daraus resultierende Aufwand für die Umsetzung von einem simplen Skriptprogramm bis hin zu einem komplexen Dokumenten-Management-System für einige 100 TDM. Auch kann die simple Forderung, dass User viele verschiedene Rollen mit verschiedenen Rechten haben können, leicht zu einer Vervielfachung der Aufwände führen. Im UML-Diagramm werden alle beteiligten Objekte (User, Dokumente etc.) sichtbar und in Zusammenhänge gestellt – in einer Form, die sowohl vom Entwickler als auch von Nichtprogrammierern überblickt, auf Konsistenz geprüft und bei Bedarf vervollständigt werden kann. Die Stärke von UML liegt darin, dass die Notation weniger formal und rigide ist als typische Software-Struktogramme, aber dennoch eine striktere Semantik vorgibt als reine Zeichenwerkzeuge wie z.B. Visio. Die Formulierung einer Anforderung in UML-Notation garantiert aber allein noch nicht Vollständigkeit und Konsistenz, sie erleichtert und vereinheitlicht jedoch deren Prüfung. Da UML aus der Software-Entwicklung stammt, ist eine Arbeitsteilung effektiv, in der der Programmierer in UML notiert, was er dem Konzept aus seiner Sicht entnimmt und dies anschließend in Worten erläutert. Dieser Prozess sollte so früh wie möglich einsetzen – mit entsprechend vielen Loops. Auf diese Weise können prinzipiell Unschärfen und versteckte Anforderungen im Konzept zeitig aufgedeckt werden; das Ergebnis-UML eignet sich als exakte Dokumentation im Pflichtenheft.

Website-Typen

203

Flash-basierte Website Bevor Flash seinen Siegeszug durch das Netz machte, gab es Shockwave, ein Programm, das auch weiterhin für Animationen und interaktive Spiele im Internet eingesetzt wird. Beide Programme sind Produkte von Macromedia und eignen sich zur Darstellung von Animationen und interaktiven Sequenzen. Die Wurzeln von Shockwave liegen in Director, dem Autorenprogramm für CD-ROMs. Mittlerweile erreicht Shockwave fast die vollständige Funktionalität von Director. Gegenüber Shockwave liegt der große Vorteil von Flash in dem Vektor-basierten Darstellungsprinzip, das sehr geringe Ladezeiten benötigt. Die Grafiken werden nicht als Bilder sondern als Linien gespeichert und füllen sich bei der Präsentation mit den zugeordneten Oberflächen. Die Objekte können beliebig skaliert werden, ohne dass man einen Verlust der Darstellungsqualität hinnehmen muss. Die neueste Flash-Generation ermöglicht die Kommunikation mit Datenbanken und damit die Verbindung zu Transaktionen und redaktionell pflegbaren Inhalten. Die Technologie kann zur Frontend-Entwicklung von technisch hochkomplexen Anwendungen eingesetzt werden. Sie ist nicht mehr nur der Weg zu animierten Inhalten, sondern zu »dynamischen« Navigationsformen, die beispielsweise das Drag-and-Drop von Auswahlelementen möglich macht. Flash hat eine enorme Verbreitung gefunden. Das erforderliche Plug-in wurde in die neuesten BrowserVersionen von Netscape und Explorer integriert. Zunehmend werden gesamte Websites auf Flash aufgesetzt, ohne auf relevante Zielgruppen verzichten zu müssen. Das Feinkonzept für eine Flash-basierte Website hängt methodisch von der Ausrich204

Entwicklung

tung der Site ab: Handelt es sich um eine prozessorientierte oder dynamisch generierte Anwendung, in der Flash die Navigationsoberfläche liefert, beschreibt das Konzept aus dieser Perspektive die Abläufe und erklärt dabei in den Funktionsskizzen das Prinzip der Benutzerführung. Die Beschreibung einer Flash- oder Shockwave-basierten Inszenierung von Inhalten erfolgt durch Motion Scripts, Interaktionstabellen und Flow-Diagramme. Sie verbindet die traditionelle Form des Filmdrehbuchs mit Verhaltensbeschreibungen von Objekten und szenischen Verknüpfungen. Motion Scripts beschreiben lineare selbstlaufende Sequenzen, Tabellen definieren das Objektverhalten in interaktiven Sequenzen und Flow-Diagramme die Verknüpfung der Sequenzen. Lineare Sequenzen Die lineare Animationssequenz entlehnt ihre Dramaturgie dem Kurzfilm und Videoclip. Sie erzählt eine Story, die sowohl narrativ als auch informativ sein kann. Das dramaturgische Grundprinzip erfordert einen Anfang, einen Mittelteil und ein Ende. Das klingt banaler als es ist. Gerade bei der erforderlichen Kürze ist es nicht leicht, einen Spannungsverlauf zu entwickeln, der auf interessante Weise über eine Problemstellung zu einer schlüssigen Auflösung führt. Der Konzepter wird hier zum Drehbuchautoren, und häufig fehlt ihm die notwendige Erfahrung. Zu den besten Ergebnissen gelangt man durch eine enge Zusammenarbeit von Design und Konzept. Der Konzepter überlegt sich die inhaltliche Dramaturgie ausgehend von der zu kommunizierenden Botschaft und beschreibt

Flowdiagramm

Interaktive Sequenz 0.1

Interaktive Sequenz 1.1

Interaktive Sequenz 1.2

Prosaeinleitung

Prosaeinleitung

Prosaeinleitung

Funktionsskizze

Funktionsskizze

Funktionsskizze

Interaktionstabelle

Interaktionstabelle

Interaktionstabelle

Interaktive Sequenz NN

Abbildung 12 Konzeptaufbau für ein interaktives Szenario mit mehreren Sequenzen 왗

sie in einem groben Motion Script. Der Designer entwickelt im engen Dialog mit dem Konzepter die gestalterische Umsetzung. Ein Konzepter, der Erfahrungen als Film- oder Videoautor mitbringt, kann die Animation auch in einem detaillierten Script beschreiben, das den genauen zeitlichen Verlauf und die szenische Gestaltung vorgibt. Dieses sollte ihn allerdings nicht von Zwischenabstimmungen mit dem Designer abhalten. Lineare Sequenzen werden häufig als Intros eingesetzt. Hier ist es wichtig, einen SkipSchalter vorzusehen, denn nicht jeder möchte die Animation sehen, oder er kennt sie vielleicht schon von vorherigen Besuchen. Es empfiehlt sich, animierte Intros möglichst häufig auszutauschen. Außerdem sollten sie in

sehr knapper Zeit eine relevante Information oder einen hohen Entertainment-Wert transportieren. Beides erhöht die Chance, dass sie nicht von der Mehrheit der Nutzer übersprungen werden. Interaktive Sequenzen Interaktive Sequenzen werden durch die Aktionen des Nutzers gesteuert. Eine Sequenz besteht dabei aus Objektreaktionen, die sich in Animationen und Sound ausdrücken können. Die Reihenfolge der Abläufe ist in vordefinierten Grenzen frei. Im Hintergrund liegt eine Bühne, die mit einem statischen Szenenbild verglichen werden kann. Häufig werden mehrere Sequenzen zu einem interaktiven Szenario verbunden. Die Aktivierung einer

Website-Typen

205

Abbildung 13 Screen-Ausschnitt zum Konzeptbeispiel www.siemens-knows.de (im Konzept: Objekt Schalthebel, Fall a) nach Einlegen des Rückwärtsgangs) 왗

neuen Sequenz erfolgt wiederum als Reaktion auf das Nutzerverhalten gekoppelt an ein vermittelndes Objekt. Die Verknüpfung mehrerer Sequenzen wird in Flow-Diagrammen abgebildet. Die Beschreibung einer einzelnen Sequenz erfolgt durch eine Interaktionstabelle, die eine erweiterte Form des Motion Scripts darstellt. Ergänzend dazu empfiehlt sich eine Funktionsskizze, in der die Startsituation mit allen statischen Elementen der Bühne und den interaktiven Objekten als Übersicht dargestellt ist. Außerdem sollte in einem Prosatext der Ablauf kurz beschrieben werden. Die Beschreibung in einer Interaktionstabelle erfolgt aus der Objektsicht des Programms. Objekte sind alle grafischen Elemente, die über die Aktion des Nutzers eine

206

Entwicklung

eigene Reaktion oder die Reaktion eines anderen Objekts auslösen können. Sie werden in der ersten Spalte der Tabelle nummeriert und erhalten in der zweiten Spalte eine Bezeichnung. Die dritte Tabellenspalte definiert die Events, auf die das Objekt reagiert, das heißt dort werden die Nutzeraktivitäten beschrieben (z.B. Mausklick, Roll-over, Drag-and-Drop). Die nächste Spalte erklärt dann, welche Reaktion auf die Aktion erfolgt: Zum Beispiel bewegt sich das Objekt, oder ein Sound wird abgespielt. Die fünfte und bei Bedarf sechste Spalte beschreibt die akustische Ebene getrennt nach Sprache, Musik und Geräuscheffekten. In der letzten Spalte werden die Dateien aufgeführt, die abgespielt werden sollen (z.B. eine Sounddatei).

Beispiel-Ausschnitt Flash-Konzept www.siemens-knows.de »Auto – zum Forschungszentrum« Nr. Objekt Navigationssystem (im Armaturenbrett)

Auslösende Aktion

Beschreibung

Rollover

Text 4.2rt2 erscheint (»moderne Telematik«).

Sound Datei 4.2rt2

Mausklick

Das Navigations-Display rückt in den Vordergrund und bleibt zunächst dort.

4.2vt2 in 42_reisen_ texte.doc

Text 4.2vt2 erscheint zum Thema Verkehr und Telematik. Klick auf MEHR DAZU innerhalb des Textfeldes öffnet ein neues Browser-Fenster (mit Link zur Telematik http://www. ti.fhg.de). Symbol Stadt (auf dem Display im Vordergrund)

Rollover

Symbol leuchtet auf.

Mausklick

Das Auto fährt los, Häuser ziehen vorbei.

4.2rt3

Variabler Text 4.2vt3 erscheint (mit etwa folgendem Wortlaut: »Für Sightseeing ist leider keine Zeit. Jetzt müssen wir erst mal arbeiten.«) Klick auf MEHR DAZU innerhalb des Textfeldes öffnet ein neues Browser-Fenster (mit Link zu Navigationssystemen http: //www.siemens.de/de/press_service/newsdesk/ fo99371.html)

Symbol Forschungszentrum (auf dem Display im Vordergrund)

Rollover

4.2rt3

Symbol leuchtet auf. Text 4.2rt3 erscheint (»zum Forschungszentrum«).

Mausklick

Das Auto fährt, Häuser ziehen vorbei. Das Display verschwindet wieder. Die Uhrzeit springt auf 6:45.

Schalthebel

Rollover

Text 4.2rt4 erscheint (»Einparken bitte«).

4.2rt4

Rückwärtsgang einlegen: Festhalten des Hebels mit der Maus und Verschieben nach hinten Fall a) Der User hat bereits auf das Forschungszentrum geklickt:

Das Auto fährt rückwärts, die Häuser ziehen andersherum am Auto vorbei. Im Rückspiegel erscheint eine Parkmarkierung, und das Radar-Display im Auto leuchtet (selbstlaufende Animation).

Fahr- 4.2vt4 geräusch

Gegen Ende der Animation erscheint das Textfeld 4.2vt4 mit der Solution Autoradar (Link zu http: //www.siemens.de/ de/press_service/newsdesk/fo99371.html). Fall b) Der User hat noch nicht auf das Forschungszentrum geklickt:

Textfeld 4.2vt5 erscheint (mit ungefähr folgendem Wortlaut: »Wir sind noch nicht angekommen. Fahre zuerst zum Forschungszentrum, bevor du einparkst.«)

Website-Typen

4.2vt5

207

Nr. Objekt Kontrollleuchte

Auslösende Aktion

Beschreibung

Roll-over

Die Leuchte blinkt

Sound Datei 4.2rt6

4.2rt6 erscheint (»Kontrollleuchte«) Mausklick

Variabler Text 4.2vt6 erscheint für die Solution Katalysatorenerfindung und Sinox

4.2vt6

Klick auf MEHR DAZU im Textfeld öffnet ein BrowserFenster mit Sinox-Link http://w1.siemens.de/FuI/de/ zeitschrift/archiv/Heft2_98/artikel8.html Display Hsiang-yü

Roll-over

H-Yü's Bild leuchtet auf.

4.2rt7

Text 4.2rt7 erscheint. Mausklick

Das Bild leuchtet auf.

4.2rt7

Variabler Text 4.2vt7 YOUR SOLUTIONS (führt zur Visionsebene)

Loading Files Die einzelnen selbstlaufenden oder interaktiven Sequenzen werden zu einem Paket zusammengeschnürt, das eine gewisse Ladezeit erfordert, bevor es dann mit angenehmer Perfomance abläuft und bedient werden kann. Die Ladezeiten können konzeptionell durch kleine Überbrückungsanimationen, Texte oder sonstige Einstiegselemente genutzt werden.

Links zu weiteren Informationen über Flash Foren und Tutorials: 왘 www.macromedia.com 왘 www.flashforum.com 왘 www.flashworker.com 왘 www.flashzone.com 왘 www.flashchallenge.com(/revolution.asp) 왘 www.flashfilmfestival.com Interessante Anwendungen: 왘 www.smashingideas.com 208

Entwicklung

Texte Texte, die in gestalteter Form in die Animationen eingebunden werden sollen, müssen unbedingt vorher vom Kunden abgenommen sein, um aufwändige Nachkorrekturen zu verhindern. Generell ist zu beachten, dass der Text in erster Linie Informationscharakter hat. Baut sich z.B. ein inhaltsleerer Satz über eine quälend lange Typo-Animation auf, führt dieses zwangsläufig zum Überspringen oder gefährdet die Verständlichkeit.

왘 왘 왘 왘 왘 왘 왘 왘 왘

www.livingscreen.com www.jotto.com www.yenz.com/menue/garden/intro.html www.madonnamusic.com www.flashgamer.com www.icebox.com/ www.noodlebox.com/ www.vmations.com/ www.nooflat.nu/

Multi-Channel-Anwendungen Das Internet ist aus dem Heimcomputer herausgewachsen. Während sich das interaktive Fernsehen noch in Pilotprojekten übt, sind die Mobilkommunikation, der Mobilfunk und das Internet schon eine sichtbare Allianz eingegangen. Pager und PDAs werden mit Funkmodems ausgestattet, erhalten Schnittstellen für Mobiltelefone oder integrieren die Mobilfunktechnologie. Das Handy wird zum Organizer und über WAP zum mobilen Internet. Die InternetInhalte können über unterschiedlichste Geräte drahtlos und damit ortsunabhängig angeboten werde. Die Verbreitung und Akzeptanz des mobilen Internets wird zwar noch durch eingeschränkte Bandbreiten und reduzierte Bildschirmgrößen in Grenzen gehalten. Für viele Plattformen gilt aber heute schon die MultiChannel-Ausrichtung als Selbstverständlichkeit, beispielsweise wenn es um Finanzportale geht, die ihre Nutzer jederzeit mit aktuellen Börsenkursen versorgen möchten. Daneben entstehen immer mehr Anbieter mobiler Inhalte, die direkt vom Nutzer oder von Drittanbietern abonniert werden können. Mobile Web-Inhalte In der Konzeption werden Sie zunehmend mit der Entwicklung mobiler Web-Inhalte konfrontiert sein, die auf unterschiedlichen Devices mit jeweils individuell eingeschränkten Darstellungsmöglichkeiten ausgegeben werden. Die Empfangsgeräte können aus technischer Sicht über einen Server versorgt werden, der für jedes Gerät die vordefinierten Inhalte im benötigten Format ausgibt. Die technische Entwicklung erfolgt meistens in XML (eXtensible Markup Language), einer Metasprache zur

Beschreibung beliebiger Daten. Die Daten können dann z.B. im WAP-Format (Wireless Application Protocol) für Handys beziehungsweise mobile Devices und im HTML-Format für den Desktop-Computer ausgegeben werden. Der Konzepter entwirft für eine MultiChannel-Plattform ein Maximalset an Inhalten und definiert dann, welcher Content in welcher Form auf welches Gerät ausgegeben werden soll. Dabei muss er die Restriktionen der einzelnen Ausgabegeräte bedenken und sollte gleichzeitig deren Potenziale nutzen. Bestimmte Inhalte werden sowohl aus technischer als auch aus inhaltlicher Sicht nicht beziehungsweise noch nicht für die Ausgabe auf einem Handy oder PDA sinnvoll sein. Datenintensive Animationen, Videos und Sounds sind hier eher Ärgernis als Vergnügen. Schnelle Textinformationen, z.B. eine lokalisierte Wegbeschreibung zum nächsten Restaurant, bieten dem Mobilnutzer dagegen einen echten Mehrwert. Aus Nutzerperspektive ist ein maximales Kosten-Nutzen-Verhältnis anzustreben. Der Nutzer sitzt nicht unbedingt entspannt vor seinem Rechner, sondern befindet sich in einem unruhigen Umfeld, in dem er schnell zum Ergebnis kommen möchte. Die Übertragung ist teuer und von eingeschränkter Geschwindigkeit. Zusätzlich sind veränderte Bedienungsfunktionen zu beachten. Wer auf einem Handy InternetInhalte empfängt, ist an die Tastatur des Telefons gewöhnt und möchte diese auch in weitgehend unveränderter Form für das Internet nutzen. Texteingaben sind hier generell schwierig und umständlich, wenn nicht eine Texttastatur zur Verfügung steht. Folgende Prämissen sind bei der Konzeption zu beachten:

Website-Typen

209

1. Berücksichtigung des situativen Umfelds: Wo und in welcher Stimmung werden die Inhalte wahrscheinlich aufgenommen? 2. Berücksichtigung der technischen Umgebung: Welche Eingabemöglichkeiten besitzt das Gerät, wie groß ist das Display, wie ist die Gestaltungsqualität (Farbigkeit, Einfluss des Lichteinfalls)? 3. Schaffung einer leichten und schnellen Bedienbarkeit 왘 Beachtung der eingeschränkten Eingabemöglichkeiten und der Browser-Begrenzungen 왘 Tendenziell eher Auswahlmenüs oder Checkboxen als Texteditierung vorsehen 왘 Deutliche Sichtbarkeit und Erreichbarkeit der interaktiven Bildschirmelemente schaffen 4. Einschränkung der Übertragungszeiten 왘 Kleine Seiten, die bei Bedarf über Blätterfunktionen verknüpft werden 왘 Bevorzugt textbasiert, sparsamer Umgang mit grafischen Elementen, weitgehender Verzicht auf »Multimedia« (Sound, Animation, Video)

210

Entwicklung

5. Klare Strukturierung und Formulierung 왘 Kurze, präzise formulierte Texte 왘 Einsatz von Tabellen zur Strukturierung von Daten 왘 Positionierung der wichtigsten Inhalte und Elemente am Anfang der Seiten; bei Bedarf Sprungelemente (»Anchor«) setzen Die technische Entwicklung wird die heutigen Einschränkungen im Bereich der mobilen Datenübertragung in absehbarer Zeit deutlich relativieren. Trotzdem behält das Rezeptionsumfeld Einfluss auf den Sinn und Unsinn der angebotenen Inhalte. Wichtigste Prämisse bleibt somit, die Interessenssituation des Nutzers zu beachten und die Potenziale der Ausgabegeräte aus dieser Perspektive nutzen. Einen wichtigen Anteil werden dabei zukünftig lokalisierte Inhalte einnehmen.

Konzeptmanagement Erfahrungswerte nutzen Die Konzeption hat auch ihre ökonomische Seite. Je weniger Zeit gebraucht wird, desto entspannter kann der Projektmanager der Endabrechnung entgegensehen. Wirtschaftlich zu konzipieren heißt allerdings nicht, einen unkontrollierten Sprint auf Kosten der Qualität hinzulegen.

Bei komplexen Projekten ist es häufig nicht zu verhindern, dass an dem Feinkonzept mehrere Mitarbeiter parallel arbeiten. Vielleicht haben Sie schon mal die mühselige Erfahrung gemacht, Konzeptbestandteile unterschiedlicher Autoren formal anzupassen, um sie zu einem konsistenten Ganzen zusammenzubringen. Jeder hat seine individuelle Darstellungsform gewählt, ein eigenes Wording kreiert und ist vielleicht auch noch strukturell vom Gesamtmodell abgewichen. Um alles wieder auf einheitlichen Kurs zu bringen, geht gerne mal eine nervenaufreibende Korrekturwoche ins Land, die dem Kunden natürlich nicht in Rechnung gestellt werden kann. Spätestens dann werden Sie sich vornehmen, beim nächsten Projekt auf formale und inhaltliche Konsistenz zu achten. Aber auch, wenn das Konzept von nur einer Person erstellt wird, zahlt es sich aus, auf Agenturstandards aufzusetzen. Eine genaue Dokumentation hilft insbesondere neuen Mitarbeitern, die Methodik schnell zu erschließen, um sich auf das Inhaltliche konzentrieren zu können.

212

Entwicklung

Wiederverwertung Wiederverwertung muss nicht zu einem Qualitäts- oder Innovationsverlust führen. Im Gegenteil: Die Nutzung von Erfahrungen schafft Raum für die Kreation. Dabei können sowohl formale wie auch inhaltliche Erkenntnisse in Folgeprojekte einfließen. Formal Gerade die Feinkonzeption wird häufig durch formale Diskussionen und Experimente zu einem langwierigen Prozess. Die Projektanforderungen ändern sich stetig, neue Partner steigen in den Projektprozess ein, und jeder hat seine Vorstellung davon, wie ein gutes Konzept auszusehen hat. Flexibilität ist unerlässlich, sollte allerdings nicht dazu führen, Bewährtes über Bord zu werfen. Stellen Sie sich Ihren eigenen Konzeptbaukasten zusammen, aus dem Sie sich nach Bedarf bedienen können. Dabei identifizieren Sie zunächst einmal Musterkonzepte, die in der Kommunikation mit der Technik, dem Design und dem Kunden gut funktioniert haben. Ein Konzept, dass durchgehend vorbildlich ist, werden Sie kaum finden. Manchmal ist es eine Form der Sitemap, die besonders übersichtlich erscheint

oder aber eine bestimmte tabellarische Aufteilung für die Datenattributierung. Ihren Baukasten können Sie bis ins kleinste Detail herunterbrechen, das heißt bis hin zu grafischen Symbolen für Buttons, die durch Kopieren und Einfügen übernommen werden können. Neben den Beschreibungsformen geht es aber auch um einen einheitlichen Sprachgebrauch. Jede Agentur hat ihr eigenes Vokabular entwickelt, das allerdings nicht von allen internen Bereichen synchron eingesetzt und interpretiert wird. Einigen Sie sich auf ein gemeinsames Glossar, um interne und externe Missverständnisse zu vermeiden. Sie werden hoffentlich in diesem Buch viele Anregungen für Ihr eigenes Framework finden; einen Absolutheitsanspruch können und wollen wir hier allerdings nicht erheben. Inhaltlich Für einen Online-Bestellprozess gibt es einen bewährten Verlauf, der nicht immer wieder neu erfunden oder in Frage gestellt werden muss. Auch der Überweisungsvorgang in einer Banking-Applikation wird nur marginale Abweichungen zulassen. Es lohnt sich, Konzepte für solche Standardprozesse und -funktionen zu sammeln und in strukturierter Form anderen Mitarbeitern zugänglich zu machen. Dabei geht es nicht darum, eine Kopiervorlage bereitzustellen, die unreflektiert übernommen werden soll. Die Musterbeispiele dienen vielmehr der Orientierung und sollten nicht davon abhalten, nach Optimierungsmöglichkeiten zu suchen. Manchmal bietet es sich allerdings an, eine Vorlage nahezu unverändert zu übernehmen und seine Energie auf andere Bereiche der Website zu konzentrieren, die einen entsprechend kreativen Spielraum bieten.

Inhaltliche Wiederverwertung bezieht sich allerdings nicht nur auf Einzelmodule einer Website. Haben Sie beispielsweise ein Intranet für einen Chemiekonzern entwickelt, lassen sich daraus zahlreiche Erfahrungen für Intranets anderer Kunden und Branchen ableiten. Auch die Konzeption einer Community-Plattform für Senioren lässt Erkenntnisse gewinnen, die auch für eine jugendliche Community Relevanz haben können. Dokumentieren Sie diese Erfahrungen und leiten Sie daraus ein variables Regelwerk für ähnliche Projekte ab. Das unterstützt nicht nur Sie selbst in Ihrer weiteren Arbeit, sondern hilft insbesondere anderen Mitarbeitern, wenn sie mit entsprechenden Aufgaben konfrontiert werden.

Richten Sie sich Ihre eigene KnowledgeBasis für die Konzeption ein 왘 Vorlagen für Standardprozesse und -funktionen (z.B. Bestellvorgang, Aufbau eines Produktkatalogs, Aufbau eines Newsletters oder Kontaktforums) 왘 Dramaturgische Regelwerke und inhaltliche Checklisten (z.B. für Communities oder Informationsportale) 왘 Usability-Regeln und technische Rahmenbedingungen (z.B. Browser-Abhängigkeiten, Performance-Killer) Legen Sie sich Ihren eigenen Konzeptbaukasten an 왘 Framework der Beschreibungsformen (Skizzen, Diagramme, Tabellen etc.) 왘 Formatvorlage mit Grobstruktur des Konzepts 왘 Bibliothek der verwendeten visuellen Symbole (Buttons, Eingabefelder etc.) 왘 Glossar der verwendeten Begriffe mit Festlegung der Schreibweise und Bedeutung

Konzeptmanagement

213

Gemeinsam konzipieren Trotz notwendiger Teamarbeit bewahrheitet sich bei der Konzeptformulierung häufig der Spruch: Viele Köche verderben den Brei. Dieses betrifft insbesondere das Grobkonzept, welches möglichst aus nur einer Feder stammen sollte. Im Feinkonzept ist es allerdings häufig nicht zu vermeiden, ein Team von Konzeptern parallel arbeiten zu lassen. Kein leichtes Spiel, denn alles muss am Ende zusammenpassen. Damit nichts anbrennt, ist ein Chefkoch erforderlich, der die Zutaten koordiniert und die Gesamtkomposition steuert. Es empfiehlt sich, das Management des gemeinsamen Konzeptionsprozesses in die Hand eines konzepterfahrenen Mitarbeiters zu legen. Er hat die Aufgabe, die Module zu verteilen, die Qualität zu kontrollieren, den Gesamtüberblick zu behalten und bei Bedarf am Ende alle Bestandteile zu einem Dokument zusammenzuführen.

214

Entwicklung

Neben der inhaltlichen Kontrolle geht es aber auch um die formale Führung. Bevor die Konzepter loslegen, sollte genau geklärt sein, wie das Konzept geschrieben wird: 왘 Welche Beschreibungsformen werden genutzt? 왘 Wie sieht der formale Gesamtaufbau aus? 왘 Nach welchem Prinzip werden die einzelnen Seiten referenziert? 왘 Welche Begriffe werden in welchem Kontext genutzt? Gibt es vielleicht ein Glossar, auf das aufgesetzt werden kann? Gerade in einem solchen Projekt werden Sie dankbar sein, wenn es schon ein Framework und eine entsprechend eingespielte Arbeitsweise gibt.

Making of Stylepark Definition der Templates und Content-Module Ausgangspunkt für das Feinkonzept bildete die Idee des London Loft – abstrakt übersetzt ein flexibler Lebensraum, der sich aus Objekten und ihren Beziehungen zueinander ständig neu definiert. Das Grobkonzept formulierte daraus die Zugangswege und die grobe Inhaltsstruktur. Im Feinkonzept musste dieses nun bis in die kleinste Einheit – die Elemente – ausgefeilt werden.

Auch MetaDesign kennt das Dilemma: Ein Feinkonzept ist häufig sehr abstrakt und techniklastig. Der Kunde versteht vieles nicht, und es fällt ihm schwer, auf dieser Grundlage Abnahmeentscheidungen zu treffen. Er möchte fertige Screens sehen, am liebsten einen programmierten Dummy, damit das Navigationsprinzip oder die Nutzer-Szenarien am lebenden Objekt überprüft werden können. Im Projekt Stylepark gab es diese Diskussionen nicht. Nachdem man inzwischen mehrere Monate sehr eng zusammengearbeitet hatte und die ersten Screens vom Kunden abgenommen waren, bestand eine Vertrauensbasis, die von einer übereinstimmenden Denkweise geprägt war. Stylepark fühlte sich sowohl in der Aufgabenstellung als auch in der Produktentwicklung verstanden. Thomas Klein (Competence Manager Online Strategy/Design) bestätigt: »Damit konnten unsere Auftraggeber wieder ruhig schlafen. Schließlich steht und fällt die Business-Idea mit der optimalen Umsetzung der Produktidee.«

216

Entwicklung

Die Abnahme der Screens war dann eher Formsache. Hauptsächliches Arbeitswerkzeug waren so genannte »Funktionsmodelle«, die in abstrahierter Form die Abläufe dokumentierten. Entwickelt wurden sie in gemeinsamen Workshops und intensiven Besprechungen. MetaDesign klärte mit den Verantwortlichen von Stylepark jeden Ablauf bis in die Tiefe. »Nie zuvor habe ich Kunden erlebt, die sich mit ihrem Projekt so identifiziert haben, so leidenschaftlich und engagiert konzeptionell mitdiskutiert haben. Natürlich erschwert es das Projekt-Handling, aber am Ende weiß man, dass durch das spezielle Fachwissen jedes einzelnen Beteiligten optimale Ergebnisse für das Produkt entstehen...«, erzählt Susan Buric (Media Strategy and Concepts).

Feinkonzept bei MetaDesign

Methodik Funktionsmodelle

Das Feinkonzept ist bei MetaDesign die wichtigste Vorlage für die Design- und Technikproduktion. Mit der Freigabe werden auch die ressourcenintensiven Produktionsschritte eingeleitet. Die Beteiligten aller Produktionsschritte werden zwar sehr früh in das Projekt involviert und sind über alle Entwicklungen informiert. Insbesondere das Kernteam – neben dem Projektleiter, meistens bestehend aus einem Technikexperten, einem Designer und einem Konzepter – arbeitet in der Konzeptionsphase sehr eng zusammen. Doch wenn es an die Entwicklung produktionsfähiger Designvorlagen geht, sind sehr präzise technische Beschreibungen und Vorgaben erforderlich. Das Feinkonzept enthält eine genaue Definition aller Screen-Module, Tools und Funktionalitäten, der Verlinkungen, der Navigationszustände und beschreibt den Informationsfluss und die Funktionen innerhalb der geplanten Website.

Das Feinkonzept von Stylepark bestand zum großen Teil aus Funktionsmodellen und -szenarien, auf deren Grundlage die Templates entwickelt wurden. Ein durchlaufendes textliches Storyboard gab es nicht. Der Designer versorgte die Technik mit Templates, die mit Beispielinhalten gefüllt waren. Die Technikpartner beschrieben Einzelaspekte wie z.B. den Suchmechanismus in einem textlich verfassten, technischen Feinkonzept. Das für MetaDesign etwas unkonventionelle Vorgehen war nur aufgrund der sehr intensiven Zusammenarbeit von Agenturteam und Kunde möglich. Besonders wichtig dabei war, dass die Agentur mit den Entscheidern auf Kundenseite an einem Tisch sitzen konnte und somit aufwändige Vorlagen für Vorstände und andere Gremien entfielen. Hinzu kam, dass MetaDesign mit dem Technikpartner schon ähnlich komplexe Projekte umgesetzt hatte und auf eingespielte Arbeitsprozesse und Übergabeformate bauen konnte. Das Vorgehen bewährte sich auch finanziell. Die Feinkonzeption verlief sehr effizient und kostengünstig.

Making of Stylepark

217

Abbildung 1 왘 Funktionsmodell Einstiegsseite Select und Umsetzung als fertiges Template

Beispiel »Select« Die besondere Herausforderung im »Select«Bereich lag darin, die Komplexität von Interior-Designprodukten mit intuitiven Suchoptionen zugänglich zu machen. Aufgabe war es, einen allumfassenden Katalog zu entwickeln, der die Nutzer trotz seiner Multifunktionalität nicht überfordert. Die Produktsuche sollte nicht einfach nur dem bekannten Muster einer 218

Entwicklung

hierarchisch linearen Eingrenzung der Auswahlmenge folgen. Geplant war, alle Produktattribute als frei kombinierbare Suchkriterien anzubieten. MetaDesign entwickelte ein Konzept, dass eine vernetzte und sehr zielgerichtete Suche aus unterschiedlichsten Perspektiven ermöglicht. Beispielsweise kann man sich alle Produkte anzeigen lassen, die eine metallische Oberfläche besitzen, für das Bad geeignet

Abbildung 2 Funktionsmodell Ergebnisübersicht mit Thumbnails und Umsetzung als fertiges Template 왗

sind und ein Gewicht von maximal 30 Kilogramm haben. Auch eine Suche quer durch alle Produktgruppen und Einsatzbereiche – z.B. nach Materialien oder Farben – ist möglich. In der Auswahlmenge oder auch schon vorher kann der Architekt dann nach einem bestimmten Hersteller oder Designer suchen, sich dessen Profil aufrufen und damit sehr gezielt Projektanforderungen des Bauherren er-

füllen. Das, was offline gar nicht möglich ist, nämlich Produktvarianten, -kombinationen und -verknüpfungen darzustellen, wurde durch die Web-Applikation mit aller Konsequenz realisiert.

Making of Stylepark

219

Abbildung 3 왘 Funktionsmodell Product Fact Sheet und Umsetzung als fertiges Template

Das Prinzip freier Attributverknüpfung war für MetaDesign ein wichtiger Schritt zur Umsetzung der MainIdea. Die Elemente, das heißt die einzelnen Kriterien, die ein Produkt ausmachen und beschreiben, fügten sich bei Stylepark zu einem Such- beziehungsweise Ergebnisraum zusammen, der durch die vielfältigen Kombinationsmöglichkeiten individuell erlebbar wird. Der Katalog ist keine geschlossene Abteilung, sondern stellt die Verbindung zu 220

Entwicklung

seinem Umfeld her. Die Kataloginhalte wurden kontextsensitiv mit den Magazin-orientierten (»Inform«) und erlebnisorientierten (»Inspire«) Bereichen verknüpft und sind damit ein wichtiger atmosphärischer Bestandteil des »London Loft«-Szenarios. Wie aus dem Feinkonzept die fertige Website entstand, können Sie ab Seite 242 mitverfolgen.

Produktion

224 Textentwicklung

230 Content-Handling 233 Dateiablage 235 Content-Statuslisten 236 Redaktioneller Leitfaden

222

Produktion

238 Produktionsbegleitung

42 Making of Stylepark

238 Lernprozess

242 Entwicklung des Prototypen

239 Anpassungen

243 Konzeptionelles Feintuning

239 Test

244 Das Ergebnis

Produktion

223

Textentwicklung Inspirierend und lesefreundlich Der Text wird gerne stiefmütterlich behandelt, in Angeboten vergessen, nachträglich noch schnell zusammengeschraubt oder ungeprüft einkopiert. Das Ergebnis ist oft schauerlich und vertreibt die Nutzer.

Eine Website besteht zu großen Teilen aus Text. Umso erstaunlicher erscheint es, dass diese inhaltliche Substanz so nachlässig behandelt wird. Gerade bei dynamisch generierten Websites wird die Initialversion gerne unreflektiert mit dem gefüllt, was der Kunde angeliefert hat. Die Inhalte kommen häufig aus unterschiedlichsten Quellen, was zu einem unglücklichen Stilmix führen kann. Text meint aber nicht nur Content, sondern auch die Bezeichnungen von Navigationspunkten, die eindeutig und konsistent sein sollten.

Links zum Texten im Web 왘 Magazin über das Publizieren im Web www.webwriting.de 왘 Textratgeber für Intranets www.gooddocuments.com 왘 Magazin für Online-Texter www.contentious.com 왘 Kolumne von Kathy Henning http: //www.clickz.com/column/oce.html 224

Produktion

Der Text hat einen großen Anteil an der inhaltlichen Qualität. Seine Bedeutung wird zunehmend erkannt. Agenturen richten eigene Textabteilungen ein und arbeiten mit freien Spezialisten zusammen. Der Trend geht in Richtung Content-Developer, der nicht nur Texte formuliert, sondern auch Inhalte entwickelt.

Was Sie bei der Texterstellung berücksichtigen sollten 1. Die Tonalität ist Teil des Look & Feels einer Website. Sie sollte im Einklang mit den Gestaltungselementen und dem Farbklima der Website stehen. 2. Grundsätzlich ist die Tonalität den Zielgruppen anzupassen, allzu »anbiedernde« Ansprachen werden jedoch schnell entlarvt und bewirken eher gegenteilige Nutzerreaktionen. 3. In der Kürze liegt die Würze. Arbeiten Sie mit einfachen und kurzen Sätzen und gliedern Sie längere Textpassagen in leicht verständliche Abschnitte. 4. Bereichern Sie das Leseerlebnis durch eine gehaltvolle Text-Bild-Dramaturgie. Ein Bild sollte den Text nicht illustrieren, sondern um seinen Informationsgehalt ergänzen.

Abbildung 1 Ankündigung der Gewinnspiele auf www.viva.tv 왗

Tonalität Ein Tonalitätskonzept sollte schon mit dem Grobkonzept erstellt werden. Es legt die Regeln und Stilrichtung des Textes ähnlich einem Style-Guide fest. Dabei wird unter anderem definiert, ob der Stil eher sachlich oder emotional, fachspezifisch oder umgangssprachlich sein soll. Für die Ansprache wird definiert, ob der Nutzer mit »du« oder »Sie« angeredet wird. Ein Tonalitätskonzept kann sehr umfangreich sein und einen Katalog empfohlener beziehungsweise zu vermeidender Begriffe enthalten. Es resultiert in erster Linie aus den Anforderungen, Gewohnheiten und dem Sprachgebrauch der Nutzer. Dabei ist es nicht unbedingt empfehlenswert, die Sprache der Zielgruppe unreflektiert zu übernehmen. Insbesondere die Ansprache einer jugendlichen Zielgruppe ist heikel, wenn man versucht, ihre Sprachwelt zu kopieren. In der Regel endet dieses unglaubwürdig bis peinlich, da man häufig dem Trend hinterher hinkt oder die feinen Nuancen nicht trifft. Ein komplexes Tonalitätskonzept wurde z.B. für den Website-Launch des Musiksenders VIVA erstellt. Die Konzeption begann mit

einer akribischen Analyse der Moderatoren hinsichtlich ihres sprachlichen Stils und des verwendeten Vokabulars. Danach wurde festgelegt, wie die Sprache in die Website übertragen werden sollte. Es sollte keine 1: 1-Übersetzung werden, da das geschriebene Wort anders wahrgenommen wird als der gesprochene Text. Der sehr saloppe Sprachstil im Fernsehen erhielt im Internet mehr Verbindlichkeit, ohne streng oder trocken zu werden. Die VIVA-Website lebt von einer leichten Umgangssprache, die sich dezent und mit einem gewissen Augenzwinkern Trendbegriffen bedient. Das Tonalitätskonzept definierte für die einzelnen Website-Bereiche den Umgang mit der Sprache: Wie sind Überschriften aufgebaut, wie werden Teaser geschrieben, wie ist ein längerer redaktioneller Text zu verfassen? Hier das Beispiel eines Teaser-Textes für die TV-Gewinnspiele (Abbildung 1): »Gewinnspiele auf viva.tv Du kannst abräumen SMP– hier präsentieren wir dir alle Verlosungen auf viva.tv in ihrer gesamten Schönheit. Von Konzertkarten über CDs zu DVDs, von Webcams über Digitalkameras zu Büchern,

Textentwicklung

225

von Postern über Snowboards zu Spielekonsolen... hier ist für jeden etwas dabei. Mit ein bisschen Glück machst du bei uns den ganz großen Reibach. Halte deine Augen offen – viva.tv beschenkt dich reich und üppig. Das ist doch wie jeden Tag Geburtstag haben, oder? Und gleichzeitig wie Weihnachten, Ostern, Namenstag... alles auf einmal. VIVA liebt dich!« Medienkonformität Das Lesen auf dem Bildschirm ist generell nicht komfortabel. Insbesondere lange Texte sind schwer aufzunehmen und werden häufig ausgedruckt, bevor man sich dem Lesen hingibt. Für Internet-Texte leiten sich daraus grundsätzliche Regeln ab. Die Texte sollten portioniert und strukturiert werden. Ein langer Text wird dabei in Kapitel und Unterkapitel zerlegt und durch Subheadlines aufgelockert. Die einzelnen Sätze sollten möglichst kurz und einfach aufgebaut sein. Komplexe Inhalte werden hierarchisch in die Tiefe verlinkt, das heißt man führt den Nutzer vom Allgemeinen schrittweise zum Detail. Text-/Bild-Dramaturgie Das Zusammenspiel von Bild und Text hat in der Werbung eine zentrale Bedeutung. Auf Websites stehen beide Komponenten oft beziehungslos nebeneinander. Sicherlich hat die Website auch einen anderen Zweck zu erfüllen als die klassisches Werbung, was allerdings nicht ausschließt, dass intensiver über das Zusammenspiel von Bild und Text nachgedacht werden darf. Das Ziel sollte sein, die Wahrnehmungs- und Aussagekraft zu stärken. Rein illustrative Bilder bedeuten in erster Linie Ladezeiten. Bilder mit einem Informationswert gewinnen an Stärke, wenn sie durch aussagekräf226

Produktion

tige Bildunterschriften ergänzt werden, die nicht das Gesehene wiederholen, sondern um neue Aspekte ergänzen. Bezeichnung von Navigationselementen Nicht nur das durchdachte Prinzip der Benutzerführung unterstützt die Usability, sondern auch die Bezeichnungen der Navigationselemente tragen zur Orientierung und einfachen Navigierbarkeit bei. Die Begriffe sollten unmissverständlich und möglichst kurz sein. Außerdem ist eine Konsistenz in der Art der Bezeichnung zu empfehlen. Werden z.B. Doppelbegriffe benutzt, sollten diese konsequent durchgehalten werden – zumindest innerhalb einer Navigationsebene. Die Diskussion um das Wording der Navigationsbezeichnungen endet häufig in einem zähen Kampf mit dem Kunden. Wichtig ist gerade hier, dass ein schneller Konsens erreicht wird, da die Bezeichnungen häufig als Grafik eingebunden werden und spätere Änderungen aufwändig sind. Um eine schnelle Einigung zu erzielen, eignet sich ein Usability-Test. Dabei werden mehreren Testpersonen die angedachten Bezeichnungen vorgelegt und gefragt, was sie dahinter vermuten. Stimmen Vermutung und Absicht überein, wird der Kunde schnell von der Richtigkeit der Begriffe überzeugt sein. Kritisch bleibt allerdings, dass sich die Nutzer an bestimmte Ausdrücke gewöhnt haben und diese in unveränderter Form erwarten. Unternehmens-Websites erhalten dadurch häufig die gleichen Navigationsbezeichnungen. Das Differenzierungspotenzial fängt hier mit der Strukturierung der Inhalte an, die vielleicht nicht in einer Einteilung von »Wir über uns«, »Unsere Produkte« und »Service« enden muss.

Abbildung 2 Der Bereich »informer« auf www.viva.tv 왗

Das Wording setzt sich vertiefend in der Bezeichnung von Funktionselementen fort. Auch hier ist Konsistenz zu empfehlen. Die Benennung von Bestätigungsfunktionen sollte beispielsweise nicht eine Mischung aus Begriffen wie »Senden«, »Absenden« und »Abschicken« sein, sondern einen durchgehenden Namen erhalten. Achten Sie darauf, dass die Benennung der Navigationselemente mit der sprachlichen Tonalität der Website korrespondiert. Im Beispiel VIVA wurden kurze Begriffe gewählt, die Alltagsbezeichnungen mit Anglizismen mischen. Konstant wurde eine Kleinschreibung gewählt. Subnavigation www.viva.tv im Bereich »informer« (Abbildung 2): musik: specials, clip-kritiken, neue platten, auf tour, interviews charts: d-singles, d-alben, uk-singles, uk-alben, user-charts, viva-toptitel zeitvertreib: filme, games, liebe und so, netzspannung, style viva: sendungen, community, events, cds, frequenzen, playlisten, fragen?

Nichtredaktionelle Texte Texte, die über die Leistungsdarstellung des Kunden hinausgehen, sollten von einem erfahrenen Texter formuliert werden, der die festgelegte Tonalität beherrscht. Dieses betrifft sowohl statische wie auch dynamische Websites. In statischen Websites sind die Inhalte per se nicht redaktionell pflegbar, können aber – wenn sie die Selbstdarstellung des Kunden betreffen – von den zuständigen Unternehmensbereichen zur Website-Produktion angeliefert werden. In dynamischen Websites gibt es dauerhafte oder temporäre Inhalte, die einen nichtredaktionellen Charakter haben. Beispiele hierfür sind: 왘 Hilfetexte, Guided Tour 왘 Anleitungen in Tools, Transaktions- und Kommunikationsmodulen 왘 Werbliche Inhalte, hervorgehobene Features 왘 Temporäre Sonderinhalte wie Gewinnspiele, Aktionen, Events etc. 왘 »Gestaltete« Texte, z.B. Typoanimationen in einer Flash-Sequenz 왘 Für den Internet-Auftritt der Barmer Ersatzkasse wurde z.B. eine Flash-basierte »Ent-

Textentwicklung

227

Abbildung 3 Entspannungswelt auf www.barmer.de 왗

spannungswelt« als Microsite entwickelt (Abbildung 3). Fotos, Animationen, Sound und Text thematisierten die fünf Elemente Feuer, Wasser, Luft, Erde und Licht. Der Text war integriertes Gestaltungselement. Kurze Sätze sollten die multimedialen Szenarien in ihrer Stimmung unterstützen und die Gedankenwelt der Nutzer anregen: Element Wasser: »Taucherbrille zücken. Holen Sie tief Luft für eine Reise der besonderen Art. Ins Blaue sinken und erfrischt wieder an die Oberfläche kommen. Sind Sie bereit?« Element Feuer: »Glut anfachen. Mit Freunden zusammensitzen und stundenlang Geschichten erzählen. Es funkt und knistert.« Redaktionelle Texte Dynamisch generierte Websites werden von dem Kunden inhaltlich gepflegt. Mit dem ersten Launch übernimmt allerdings häufig die Agentur die Einpflege der Initialinhalte, wobei die Texte vom Kunden angeliefert werden. In beiden Fällen sollte die Textgestaltung durch die Agentur unterstützt werden. Das Tonalitäts228

Produktion

konzept legt dabei die Richtlinien der Formulierung in ihrer stilistischen Ausprägung fest. Zusätzlich sollte ein erfahrener Texter die Initialtexte vollständig oder mindestens in Stichproben prüfen und mit Korrekturempfehlungen zurückgeben. Folgend ein Beispiel für einen redaktionellen Text der VIVA-Website, der von der Redaktion nach Vorgabe des Tonalitätskonzepts erstellt wurde: Wyclef Jean – »Perfect Gentleman« Ein Gentleman im Stripclub und intime Einblicke in US-Schulabschlussfeiern Wyclef Jean präsentiert uns mit seiner neuen Single den richtigen Soundtrack für die nächste Sommerparty. Extrem tanzbare Klänge, zu denen nicht nur die Mädels in seinem Clip sofort mit den Pos und Hüften wackeln möchten. Von besagten Damen gibt es eine Menge zu sehen im Video zu »Perfect Gentleman«. Das beginnt nämlich in einem Stripclub, wo »frau« sich lasziv im Takt wiegt und um die Stangen tanzt. Dazwischen der gute Wyclef, der sich von der geballten weiblichen Schönheit aber nicht so recht beeindrucken lässt

und gewohnt cool seinen Part übernimmt. Überraschender sind da schon die Einblicke in amerikanische Schulabschlussfeiern, die uns auch noch präsentiert werden. Wer weiß schon, was die Mädels unter ihren Talaren tragen? Hier endlich die ganze Wahrheit! Eine Frage bleibt am Ende allerdings offen: Wollte Wyclef eigentlich den Klaus & Klaus-Klassiker »Da steht ein Pferd auf dem Flur« covern? Sieht man ihn doch in der letzten Szene des Videos mit einem Pferd aus dem Studio (!) reiten. Natürlich mit einer hübschen Dame hinter sich sitzend – ritterlich wie ein perfekter britischer Gentleman ... Text-Briefing für Rohtexte Häufige Agenturpraxis ist es, vom Kunden Rohtexte anzufordern, die dann von einem professionellen Texter überarbeitet werden. Dieses betrifft in erster Linie redaktionelle Texte, die initial mit dem Launch erscheinen sollen. Der Kunde benötigt dafür ein Brie-

fing, das genau vorgibt, welche Inhalte in welcher Textlänge und mit welcher Strukturierung angeliefert werden sollen. Integration oder Anlage zum Konzept Navigationsbezeichnungen und nicht-redaktionelle Texte können Sie direkt in das Konzept integrieren. Um zu vermeiden, dass sie fehlerhaft abgetippt werden oder bei Kopieraktionen Konzeptbeschreibungen mit übernommen werden, ist eine eindeutige Hervorhebung zu empfehlen. Für längere Texte sollten Sie eine Anlage zum Konzept erstellen. Redaktionelle Texte gehören generell in eine Anlage, die eine eindeutige Zuordnung zu den übergeordneten Themen und Bereichen enthält. Die Texte können dann einfach durch Kopieren und Einfügen von Design oder Programmierung in die Site übernommen werden. Fehler sind auch dabei nicht auszuschließen. Eine Endkorrektur der Testversion sollte in jedem Fall sowohl durch die Agentur als auch durch den Kunden erfolgen.

Beispiel: Ausschnitt Text-Briefing für die Website von Peek & Cloppenburg (www.peekundcloppenburg.de) Kürzel

Zuordnung

Inhalt

Text 22_01

Auswahl 1 Landes- Allgemeiner Text zum Land Deutschland ebene Bei Bedarf: Hinweise auf Neueröffnungen und Events

Redaktionell pflegbar

Texte 23_01 bis 23_xx

StoreInformationen

Texte zu den einzelnen Stores: Adresse, Telefon

Redaktionell pflegbar

Beschreibung Anfahrt, Verkehrsverbindung, Parkmöglichkeiten

Die Texte sollten unbedingt dem jeweils aktuellen Stand entsprechen.

Öffnungszeiten geführte Marken

Anmerkung Max. 500 Zeichen

Bei Bedarf: regionale Events Text 31_01

Begrüßungstext

Allgemeines zum Sortiment der Saison (stil- und zielgruppenübergreifend)

Redaktionell pflegbar Max. 350 Zeichen

Textentwicklung

229

Content-Handling Was, wo, wie, wann? Die Attraktivität einer Website lebt von der Qualität und Aktualität ihrer Inhalte. Bevor die Website mit »Leben« gefüllt wird, brauchen die Produzenten und Redakteure eine Anleitung, welche Inhalte wie, wann und wo eingesetzt werden. Durch effektives Content-Handling können Sie die Dateneingabe und redaktionelle Pflege der Website sinnvoll unterstützen.

Wenn das technische Gerüst der Website steht und in der Screen-Produktion die letzten Headline-Gifs und Jpgs erstellt werden, besteht die zentrale Anforderung darin, die produzierten Inhalte zusammenzuführen und für die Einpflege in die Website vorzubereiten. Die Organisation und Dokumentation der Site-Inhalte – das Content-Handling – wird in Projekten unterschiedlich praktiziert. Für die Produktion kleinerer statischer Websites reicht oftmals ein zentraler Server, auf dem die jeweiligen Teammitglieder ihre erstellten oder vom Kunden gelieferten Inhalte ablegen. Spätestens jedoch, wenn der Programmierer die einzubindende Flash-Datei auf dem Server sucht und dabei auf fünf »Final Versions« stößt, erfordert auch diese einfache Lösung ein paar standardisierte Maßnahmen.

230

Produktion

Komplizierter gestaltet sich das ContentHandling von CMS-gestützten Websites. Häufig sind zum Zeitpunkt der Produktion mehrere Designer, Programmierer oder Redakteure an der Erstellung der Site beteiligt. Nicht selten kommen dann noch externe Dienstleister wie z.B. technische Entwicklerfirmen oder auch Audio/Video-Produzenten hinzu. Je mehr Beteiligte in die Produktion der Website involviert sind, desto größer sind potenzielle Fehlerquellen und Zeitverzögerungen, was sich dann spätestens bei der Dateneinpflege – egal ob per Hand oder durch einen automatisierten Importer – bemerkbar macht. Sei es, dass beispielsweise das Perl-Script nicht die Headlines einliest, weil sie nicht eindeutig codiert wurden oder dass die studentische Produktionshilfe die falschen Texte einpflegt, weil die zentrale Datenablage nicht aktualisiert wurde.

Je umfangreicher die Website, desto unentbehrlicher ist konsequentes und detailliertes Content-Handling. Diese Aufgabe wird in der Praxis unterschiedlich besetzt. In manchen Projektteams übernimmt diese Funktion ein Producer oder Produktionsleiter. In anderen Teams ist derjenige, der das Feinkonzept erstellt hat, für das Content-Handling zuständig. Diese Rollenverteilung erweist sich vor allem bei größeren Projekten als sinnvoll, da der Konzeptverantwortliche meist an der Entwicklung der Templates oder Content-Module beteiligt war und damit die Anforderungen an einzelne Inhalte sehr genau kennt. Er weiß beispielsweise, welche Text-Headlines in welchen Teaser gehören, wie viele Bilder auf der Homepage platziert werden können, welche Inhalte in welcher Sprachversion vorliegen müssen – und so weiter.

Wie in den anderen Projektphasen auch ist beim Content-Handling rege Teamkommunikation die oberste Maxime. Versorgen Sie die Teammitglieder regelmäßig mit den aktuellsten Dokumentenversionen und stellen Sie sicher, dass jeder die Informationen erhält, die er braucht.

Checkliste für effektives Content-Handling 1. Liegt eine aktuelle Asset-Liste vor, aus der ersichtlich wird, welche Inhalte noch ausstehen beziehungsweise wann sie erstellt oder geliefert werden? 2. Wird ein CMS eingesetzt? Falls ja, in welcher Form werden die Daten eingepflegt? 3. In welchem Dateiformat müssen die Inhalte vorliegen? 4. Wer liefert die einzelnen Inhalte? Gibt es externe Dienstleister, z.B. Texter oder Übersetzer, die Sie berücksichtigen müssen? 5. Wie ist der Produktions-Workflow definiert? Wer braucht wann welche Inhalte beziehungsweise Vorgaben zur Erstellung und Einpflege in die Website?

Content-Handling

231

Nils Köster, Project Manager, Team-Konzept Informationstechnologien Bei der Umsetzung von inhaltlichen Konzepten treten sowohl in der Produktion als auch nach Online-Start immer wieder ähnliche Probleme auf. In Web-Projekten zeigen sich diese Probleme dann in den Aspekten »Mensch«, »Technik« und »Leben«. Der Aspekt Mensch Die Content-Struktur einer Website ist meist auf inhaltliche und Marketing-relevante Parameter abgestimmt. Bereits während der Produktion findet dann der erste Realitätsabgleich statt. Schnell treten hierzu naheliegende Fragen auf: »Was, wir sollen fünfmal am Tag News erstellen? Erstens: Wir haben niemand, der das machen kann; und zweitens: Was soll man fünfmal am Tag über Waschlappen schreiben?« Es ist nicht selbstverständlich, dass ein Kunde mit der Abnahme eines Konzepts alle damit verbundenen redaktionellen Aufwände vorab einschätzen kann. Manchmal reicht ein Denkanstoß in diese Richtung, manchmal muss man dem Kunden Hilfestellung geben. In jedem Fall sollten die Fragen wie: »Wer macht was, und wie oft?« im Vorfeld angesprochen werden. Der Aspekt Technik Ist der Pflegezyklus geklärt und sind die Verantwortlichen benannt, stehen die angehenden Redakteure vor einer weiteren Hürde: »Wie bringe ich das Bild in den Computer, wie in das richtige Dateiformat und wie in die richtige Größe?« Fragen, die bei den reich be-

232

Produktion

bilderten Websites fast zwangsläufig auftreten. Mittlerweile liegen bei vielen Kunden die Daten digital vor, aber eine Änderung des Dateiformats und vor allem der Abmessungen und der damit verbundenen Dateigröße stellt trotzdem häufig noch ein nicht zu unterschätzendes Problem dar. Um einen reibungslosen OnlineStart zu gewährleisten, sollten Fragen, die den redaktionellen Workflow betreffen, vorab von den Konzeptverantwortlichen berücksichtigt und geklärt werden. Der Aspekt Leben Ist die Website online, tritt häufig ein nicht zu vermeidendes Manko des Content-Management-Systems zutage. Die von der Konzeption und Gestaltung definierten Raster schränken die Gestaltungsfreiheit der Artikel auf der Website ein. All die Freiheiten, die das Medium Internet bietet, müssen aus Gründen der Bedienbarkeit und der technischen Machbarkeit kanalisiert und standardisiert werden. Lernt die Website jedoch erst mal Laufen, entstehen schnell neue Anforderungen an das Konzept: Das Angebot soll erweitert werden, neue Bereiche werden nötig. Die Folge ist ein mehr oder weniger starker Wildwuchs. Eine realistische Abschätzung dieser Entwicklungen sollte zumindest in einzelnen Bereichen eines Konzepts vorab bedacht werden. Mittlerweile eine Anekdote aus längst vergangenen Tagen – aber auch heute noch vorstellbar: Bei einem Projekt stellte sich kurz vor Launch heraus, dass die eingerichteten E-MailPostfächer mangels Internet-Verbindung aufseiten des Kunden gar nicht abgerufen werden konnten.

Abbildung 1 Beispiel einer Ordnerstruktur zur Ablage von Text- und Bilddokumenten für die Einpflege in die Website 왗왖

Dateiablage Voraussetzung für eine zeit- und nervensparende Dateneinpflege oder einen automatisierten Datenimport ist die Ablage aller produzierten Inhalte auf einem zentralen Server. Die meisten Web-Entwickler haben für die Produktion standardisierte Ablagesysteme entwickelt, die projektübergreifend eingesetzt werden. In der Regel entsprechen Aufbau und Bezeichnungen der Ordnerstruktur der Inhaltsstruktur der Website. Dies hat den Vorteil, dass auch Mitarbeiter, die erst zur Produktion in das Projekt einsteigen, sich relativ schnell in dem Ablagesystem zurechtfinden, insbesondere wenn sie zusätzlich noch die aktuellste Sitemap als Orientierungshilfe haben.

Es erhöht die Übersichtlichkeit, wenn Sie auch die Unterverzeichnisse der Ordnerstruktur dem inhaltlichem Aufbau der Website anpassen. Bei überschaubaren Projekten empfiehlt es sich, für jeden Screen jeweils einen Ordner anzulegen und dort alle Inhalte, die später auf der Website erscheinen, abzulegen. Bei umfangreichen Projekten werden die Inhalte der einzelnen Screen-Zustände meist über eine Importierfunktion eingelesen und an der richtigen Stelle platziert. In diesem Falle sollten Sie sich mit der Programmierung auf ein kompatibles Dateiformat und eine praktikable Ablagestruktur einigen.

Content-Handling

233

왗 Abbildung 2 Beispiel für eine skalierbare Ordnerstruktur zum Handling verschiedener Textversionen

Ablage verschiedener Textversionen Ein häufig unterschätztes Problem stellt die Ablage und Verwaltung verschiedener Textversionen dar. Insbesondere Texte für Corporate Websites erfordern meist einen erhöhten Abstimmungs- und Verwaltungsaufwand, da sie von verschiedenen Stellen innerhalb des Unternehmens freigegeben, möglicherweise übersetzt und dann erneut gegengelesen werden müssen. Als zentrale Schnittstelle zur Produktion hat man dabei häufig mit unterschiedlichen Text- und Sprachversionen zu kämpfen. Die Gefahr, Dokumente zu vertauschen oder die »endgültig finale« Version zu überschreiben, ist dadurch latent gegeben. Es empfiehlt sich, bei Bedarf eine »skalierte« Ordnerstruktur anzulegen, die nach dem jeweiligen Textstatus »Eingang« oder »Ausgang« benannt wird. Das nebenstehende Beispiel (Abbildung 2) zeigt eine mögliche Ordnerstruktur zur Verwaltung von Texten, die verschiedene Abnahme- und Übersetzungszyklen berücksichtigt – bis die Textdateien schließlich im »finalen« Ordner landen. 234

Produktion

Datei-Codierung Damit alle Projektbeteiligten die zu bearbeitenden Inhalte in der zentralen Ablage finden und zuordnen können, sollte man sich vor der Produktion auf eine einheitliche Codierung der Dateien einigen. Die meisten Web-Produzenten arbeiten mit eigenen Codierungsstandards. Welche Namen, Kürzel oder Ziffern Sie für die Codierung verwenden, hängt von der Arbeitsweise des Teams und den technischen Konventionen des Projekts ab. Wenn Sie jedoch eigene Codierungsformen einführen möchten, sollten Sie darauf achten, dass aus den Bezeichnungen folgende Informationen ersichtlich werden: 왘 wo die entsprechende Datei innerhalb der Website verortet ist, 왘 um welche Art von Inhalt es sich handelt und 왘 in welcher Sprache der Inhalt vorliegt.

Wir haben gute Erfahrungen mit alphanumerischen Bezeichnungen gemacht, wobei die Ziffern jeweils die Hierarchieebene oder die spezifische Inhaltsseite der Website bezeichnen. Wenn Sie beispielsweise die Oberrubriken von 1 bis 6 durchnummerieren, werden die Unterrubriken der Rubrik »1« mit 1.1, 1.2, 1.3 etc. beziffert, die darunter liegenden Rubriken oder Inhaltsseiten erhalten dreistellige Ziffern – und so fort. Ergänzend zu den Ziffern können Sie die Ausprägung des Inhalts mit Kürzeln beschreiben wie z.B. »hd« für Headline oder »txt_e« für eine englischsprachige Textdatei. Wichtig bei der Einführung neuer Nomenklaturen ist ein konsequenter Abgleich mit allen ergänzenden Dokumenten. Achten Sie darauf, dass die Nummerierungen in Ihrer Sitemap oder anderen Produktionsvorlagen immer identisch und aktuell sind und bringen Sie diese gegebenenfalls auf den neuesten Stand.

Content-Statuslisten Bei umfangreichen Websites, deren Inhalte einen erhöhten Abstimmungs- und Produktionsaufwand mit sich bringen, fällt es manchmal schwer, den Überblick zu behalten. Egal, ob die initialen Inhalte der Website von einer Agentur oder vom Anbieter selbst erstellt werden: Bei der Produktion und Einpflege der Inhalte arbeitet meist ein größeres Team an verschiedenen Einzelbaustellen. Um als Hauptverantwortlicher die verschiedenen Aufgaben koordinieren zu können, müssen Sie stets über den aktuellsten Projektstatus informiert sein. Statuslisten können Ihnen dabei helfen, einen schnellen Überblick zu gewinnen und die noch ausstehenden oder neu anfallenden Aufgaben zu ermitteln. Viele Producer arbeiten mit Statuslisten, anhand derer sie täglich den Stand der Inhaltsproduktion überprüfen können. Es empfiehlt sich, für die Erstellung einer Statusliste die Asset-Liste oder – falls vorhanden – das Screen-Verzeichnis (siehe Seite 160) als Grundlage zu nehmen und die Tabelle nach Ihren Kriterien zu modifizieren. Einmal angelegt können Sie die Liste dann ohne großen Aufwand aktualisieren.

Content-Handling

235

Beispieltabelle für eine Statusliste zur Produktion einer (fast) statischen Website Screen

Inhaltselemente

Inhaltsdateien

Status

5. Presse (Intro)

Überschrift

5_hd_de.gif

fertig

x

Bild

5_pic_tastatur.gif

fertig

x

Intro-Text

5_txt_intro_de.doc fertig

x

5.1. News

Headline

5_1_hd_de.gif

x

Überschriften der letzen zehn Headlines

Ordner 5_1_news_de

5.1.1. Pressemeldung Ausgewählte Meldung im Satellitenfenster

Siehe Ordner 5_1_news_de Kennung der Texte: 5_1_news_datum_ de.doc

Eingepflegt

fertig

x

Texte noch nicht vollständig

Anmerkungen

Aufgaben

E-Mail-Adresse für Kontakt fehlt

E-Mail-Adresse des Ansprechpartners anfordern → Fr. Schulze

Headlines werden per Script generiert Headlines werden per Script generiert

Lieferung der aktuellsten Texte → Fr. Schulze

Beispieltabelle für eine Statusliste zur Produktion dynamisch generierter InhalteScreenScreenZustand

Verwendete InhaltsContent-Module elemente

Inhaltsdateien

Status

1.1. News (IntroSeite)

Ct02_topthema

Pressebild

1_1_ct02_top_pic.gif

eingepflegt

Text-Teaser

1_1_topteaser_1. doc

eingepflegt

Text-Teaser

1_1_topteaser_2. doc

n.n.

5 Headlines der aktuellsten Meldungen

Jeweils die Headlines aus den aktuellsten Textdateien aus dem Ordner 1_5_news

eingepflegt

Ct05_bulet_list

Anmerkungen

Duties

Artikel schreiben → Jan Erste Headline aktualisieren, wenn Text vorliegt

Aktuelle Headline ergänzen am 02.04. → Uwe

Redaktioneller Leitfaden Der redaktionelle Aufwand für die initiale und kontinuierliche Pflege einer Website wird häufig unterschätzt. Gerade informationslastige Websites, die darauf abzielen, die zukünftigen Nutzer mit einer Fülle an aktuellen Inhalten zu 236

Produktion

versorgen, erfordern in der Produktion, aber auch in der späteren Aktualisierung häufig »versteckte« Zusatzaufwände, die vorab nicht berücksichtigt wurden. Hinzu kommt, dass gerade beim Aufbau einer neuen Redaktion die

Projektverantwortlichen die erforderlichen Zeit- und Personenressourcen nicht realistisch einschätzen können. Was während der Konzeptionsphase noch als hoher inhaltlicher Anspruch formuliert wurde, muss mitunter in der praktischen Anwendung auf ein überschaubares Aufgabenpaket heruntergeschraubt werden. Dabei kann es passieren, dass Inhaltsbereiche redaktionell »verwaisen«, weil die variabel einzusetzenden Inhaltsmodule nicht genutzt werden. Oder, dass drei von fünf »News-Teasern« auf der Homepage tagelang die gleichen Inhalte aufweisen, weil die Redaktion nicht genügend neue Inhalte produzieren kann. Wie schon an anderen Stellen betont, ist es unbedingt empfehlenswert, die redaktionellen Ressourcen bereits in der Konzeption zu berücksichtigen. Zusätzlich ist es für die verantwortlichen Redakteure meist hilfreich, wenn sie für die initiale Eingabe der Inhalte einen

Leitfaden an die Hand bekommen. Der Leitfaden sollte eine Übersicht darüber bieten, welche Inhalte in welchem Format für die Website zu erstellen sind und wo sie innerhalb der Website platziert werden. Auch der Einsatz verschiedener Inhaltsmodule, die es dem Redakteur erlauben, den Aufbau einer Website bedingt variabel zu gestalten, sollte im Leitfaden dokumentiert werden. Denn je modularer die Site aufgebaut ist, desto größer die Verunsicherung. Im Zweifelsfall führt dies dazu, dass die Redakteure mit ein paar wenigen Standardmodulen arbeiten. Die zeitliche Investition für einen redaktionellen Leitfaden lohnt sich in mehrfacher Hinsicht. Er erleichtert nicht nur den Redakteuren ihre Arbeit, die Website mit passenden Inhalten zu füllen, sondern erweist sich auch als förderlich, wenn es darum geht, die Website auch noch fünf Monate nach Online-Start entsprechend Ihren Vorstellungen auszubauen.

Beispiel für einen redaktionellen Leitfaden in Tabellenform Rubrik/ Inhalt Unterrubrik

Einzusetzendes Content-Modul

Inhaltselemente

Inhaltsformat

Inhaltsumfang

Aktualisierungszeitraum

4. Film (Intro-Seite)

ct02_top.html

Headline

Text

max. 60 Zeichen

1x/Woche

Anleser

Text

max. 500 Zeichen

Film-Screenshot

Jpg (max. 130 x 80 max. 2 Bilder pixel)

Film-Trailer

Real-Video (name.smi)

Top-Film

Nutzerumfrage zum Film der Woche

ct02_poll.html

Fragen + 3 Anworten

Text

max. 110 Zeichen für Frage max. 40 Zeichen pro Antwort

1x/Woche

Hinter den Kulissen

Ct10_5list.html

max. 5 ArtikelHeadlines

Text

max. 70 Zeichen pro Headline

täglich

Content-Handling

237

Produktionsbegleitung Die letzte Etappe bis zum Online-Start Mit Abnahme des Feinkonzepts ist der Konzepter noch nicht aus dem Projekt entlassen. Meistens bleiben Fragen offen, und Details müssen nachgebessert werden. Am Ende stehen dann umfangreiche Testaktivitäten an, zu denen der Konzepter einen wichtigen Beitrag leisten kann.

Das Feinkonzept ist zur Produktion freigegeben, das visuelle Konzept erhält seinen finalen Schliff und die Grafiken werden ausproduziert. Parallel beginnen die HTML-Entwickler und Programmierer mit ihrer Arbeit. Als letztes Glied in der Kette stehen sie unter dem Druck, zum geplanten Online-Start fertig zu sein und Zeitverluste in den Vorphasen wieder aufzuholen. In dieser Etappe hört man häufig Flüche über den Umfang des Konzepts, den man anfänglich vielleicht doch unterschätzt hat. Umso wichtiger ist es, dass Unklarheiten nicht zusätzliche Barrieren bilden, sondern schnell aufgelöst werden. Als Autor des Konzepts werden Sie diese Zeit weniger an ihrem Schreibtisch als an den Rechnern der Teammitglieder aus Design und Technik verbringen. Ihre Aufgabe ist es, zu kontrollieren, dass alles nach Plan umgesetzt wird. Gleichzeitig stehen Sie für Fragen zur Verfügung und müssen bei Bedarf das Konzept überarbeiten, falls unlösbare Probleme auftreten. Der Zeitaufwand für die Produktionsbegleitung hängt von verschiedenen Faktoren ab: 왘 Komplexität des Projekts 왘 Qualität und Vollständigkeit der Konzepte 왘 Intensität der Teamzusammenarbeit in den Vorphasen 238

Produktion

Erfahrungen mit den technischen Systemen, auf denen die Website aufsetzt beziehungsweise entwickelt wird Manchmal werden Sie nahezu fulltime den Produktionsprozess begleiten, in der Regel reichen aber durchschnittlich ein bis zwei Tage in der Woche. Meistens wartet auch schon das nächste Projekt vor der Tür und erwartet von Ihnen frische Energie beim ersten Kundentermin. Die parallele Produktionsbegleitung kann zum nervlichen Belastungstest werden, aber die Mühen lohnen sich, wenn dadurch die Qualität der Ergebnisse verbessert und Ihr Konzept konsequent eingelöst werden kann. 왘

Lernprozess In der Produktion zeigt sich, ob alles wie gewünscht realisierbar ist. Insbesondere wenn eine neue Version eines Content-Managementoder Shop-Systems eingesetzt wird, sind unangenehme Überraschungen vorprogrammiert. Häufig führen Kleinigkeiten zu unerwarteten Problemen. Dabei kann die Länge eines Navigationsbegriffs oder die Positionierung eines Buttons den Erfindungsreichtum des Programmierers überstrapazieren oder kon-

zeptionelle Anpassungen erfordern, was wiederum eine Rücksprache mit dem Kunden erfordert. Als Konzepter sammeln Sie zahlreiche Erfahrungen, die Sie für Ihre weitere Konzepttätigkeit verwerten können. Hier zeigt sich, welcher Aufwand sich hinter einzelnen Features und kleinen Spielereien verbergen kann und wo unter den gegebenen technischen Bedingungen die Grenzen liegen.

Anpassungen Kleine oder auch größere Nachbesserungen im Konzept sind während der Produktionsphase kaum zu verhindern. Häufig erkennen die Programmierer während der Umsetzung Optimierungsmöglichkeiten, oft aber stehen sich Wunsch und Wirklichkeit konträr gegenüber. Im Dialog suchen Sie nach Kompromissen und haben dann die undankbare Aufgabe, beim Kunden Zustimmung für die intern vereinbarte Lösung einzuholen. Dieser nutzt die Gelegenheit gerne, um eigene neue Wünsche einzubringen und den Umfang des Projekts schleichend zu erweitern. Wichtig ist, alle vereinbarten Änderungen schriftlich festzuhalten. Das finale Feinkonzept wird plötzlich wieder zur Arbeitsversion. Damit jedes Teammitglied immer nach dem aktuellen Stand arbeitet, sollten Änderungen ohne Verzögerung kommuniziert werden, womit sehr viele interne Konzeptversionen entstehen können. Übersicht können Ihnen dabei Systeme zur Versionskontrolle bieten. Ein Beispiel ist das Programm CVS (Concurrent Versions System). Es versioniert sämtliche Dokumente, egal über welche Programme sie erstellt wurden. CVS bietet eine hohe Transparenz der Updates, denn Sie können jederzeit

verfolgen, wer wann was aus welchem Grund geändert hat. Die Versionen können von mehreren Teammitgliedern gleichzeitig genutzt und bearbeitet werden. Frühere Versionen werden zwar überschrieben, können aber jederzeit wieder hergestellt werden. Eine Kommunikationsfunktion ermöglicht es Ihnen, nach einer Änderung die betroffenen Teammitglieder zu informieren und auf die Überarbeitung aufmerksam zu machen. Eine Versionskontrolle ist allerdings nicht nur für das Konzept, sondern insbesondere auch für Fehlerreports im Testprozess sinnvoll.

Test Wenn alle Module der Website zusammengefügt wurden, beginnt der Testprozess. Als Konzepter kennen Sie die Anwendung in- und auswendig und sind damit ein idealer Tester. Gleichzeitig besteht allerdings die Gefahr der Betriebsblindheit. Es empfiehlt sich generell, sowohl teaminterne als auch externe Testrunden durchzuführen. Beim Beta-Testing innerhalb des Teams wird die Website im Hinblick auf Vollständigkeit und Funktionalität getestet. Im Rahmen einer Testrunde mit Vertretern der Zielgruppe können gegebenenfalls noch Usability-Fehler aufgedeckt und verbessert werden.

CVS-Website Weitere Informationen zum Einsatz des Concurrent Version Systems finden Sie unter www.cvshome.org/

Produktionsbegleitung

239

Getestet und korrigiert wird solange, bis die Website nahezu fehlerfrei ist. Danach wird sie als so genannte Beta-Version für den Kunden freigeschaltet, und er überprüft das Resultat noch einmal auf Herz und Nieren. Bei komplexen Websites ist es sinnvoll, abgeschlossene Module vorab für Zwischentests und -abnahmen an den Kunden zu geben, damit der Test der Komplettversion in einem zeitlich kalkulierbaren Zeitraum bleibt. Testberichte Der gesamte Testprozess kann mehrere Wochen in Anspruch nehmen. Die größte Schwierigkeit liegt in der Dokumentation und Kommunikation der entdeckten und überarbeiteten Mängel an die relevanten Beteiligten. Wichtig ist es, jeden Fehler genau zu lokalisieren und die Bedingungen zu beschreiben, unter denen er aufgetreten ist. Dazu gehören unter anderem das verwendete Betriebssystem, der Browser und die eingestellte Bildschirmauflösung, denn häufig treten Fehler nur unter bestimmten Systemkonstellationen auf. Um alle späteren Live-Bedingungen überprüfen zu können, müssen sie teilweise simuliert werden: beispielsweise durch einen Stabilitätstest, der Performance und Zuverlässigkeit des Sys-

Versteckte Change Requests In den Fehlerlisten des Kunden verbergen sich häufig Änderungswünsche, die das abgenommene Konzept betreffen. Solche so genannten Change Requests sollten vor der Bearbeitung identifiziert und in Absprache mit dem Kunden nachkalkuliert werden. 240

Produktion

tems bei einem überdurchschnittlich hohen Nutzerzugriff überprüft. Kompliziert wird es, wenn die Website auf Datenbanken und externe Applikationen des Kunden zurückgreift. Beim Test eines Shops müssen reale Bedingungen geschaffen werden, um beispielsweise überprüfen zu können, wie sich der Bestellprozess bei nicht verfügbaren Produkten verhält. Fehler können technischer und inhaltlicher Art sein. Ein technisches Problem ist z.B. eine unzureichende Performance bei einer Datenbankanfrage, ein inhaltlicher Fehler die falsche Positionierung eines Textes. Die Behebung der Fehler erfolgt nach festgelegten Prioritäten. Höchste Priorität haben Fehler, die eine Funktion nicht ausführbar machen, z.B. ein Bestellprozess, der an der Überprüfung der Kundendaten scheitert. Geringste Priorität haben kosmetische Korrekturen wie z.B. ein Gif, das nicht sauber ausgeschnitten wurde. Wichtig für die Fehlerdokumentation ist auch die Beschreibung des Aufwands, der für die Behebung angenommen wird. Gerade in den Fehlerberichten des Kunden befinden sich häufig inhaltliche Korrekturwünsche, die vom abgenommenen Konzept abweichen. Bei einem hohen Aufwand werden sie als Change Request behandelt und entsprechend nachkalkuliert. Für die Dokumentation der Fehler und den jeweils aktuellen Bearbeitungsstatus legen Sie sich am besten eine vorstrukturierte Fehlerliste an, die alle Bedingungen ermittelt und Beschreibungs- und Kommentarfelder enthält. Die Liste sollte von allen Testbeteiligten ohne Abweichung genutzt werden, um den Programmierern eine einheitliche Vorlage bieten zu können. Zusätzlich empfiehlt es sich – insbesondere bei schwer zu beschreibenden Fehlern –, Screenshots der Problemsituationen zu erstellen und die Fehler darin zu markieren.

Beispielaufbau einer internen Fehlerliste Tester: Betriebssystem

Browser

Bildschirmauflösung

P MAC OS

P Netscape 4.75

P 1024 x 768

P PC: (WIN 95/98/NT/2000)

P Internet Explorer 5.5 P Internet Explorer 5

P 800 x 600

P Netscape 6 Nr

Bereich

Problem

Prio

17

2.4.3 Kontaktformular

Es erscheint keine Fehler- 1 meldung, wenn die Pflichtfelder nicht ausgefüllt wurden.

Aufwand

Kommentar Tester

Kommentar Entwickler

Status

2 Stunden

Bitte mit höchster Prio ändern!

Bei uns hat sich das Problem bisher nicht gezeigt.

Wird geprüft

Unterstützung bei der Fehlerbearbeitung bieten so genannte Bug-Tracking-Programme. »TestTrack Pro« ist ein solches Programm, das im Web-Browser oder als Client-Version unter Windows läuft. Es bietet vorbereitete Reporting-Listen, Filterfunktionen für eine schnelle inhaltliche Selektion, eine History der Bearbeitungsvorgänge und E-Mail-Notifications zur Kommunikation der Testbeteiligten. Kunde und Teambeteiligte können darüber nach einem einheitlichen System die Berichte erstellen, Kommentare austauschen und den Status der Korrekturen verfolgen. Systematisches Vorgehen Der Test einer statischen Website ist ein recht unproblematisches Vorgehen. Sie können die Anwendung einfach synchron zur Site-Struktur durchlaufen und die geprüften Bereiche in Ihrer Liste abhaken. Für dynamische Websites und insbesondere Transaktionen gestaltet sich der Prozess erheblich komplizierter. Das zu Grunde liegende Regelwerk erlaubt unterschiedlichste Anwendungssituationen bzw. Ein- und Ausgabebedingungen. Jede mögliche

Konstellation zu erfassen, wird in der Regel nicht möglich sein. Häufig werden für solche Websites typische Testfälle konzipiert, die sich aus den im Feinkonzept formulierten Anwendungsfällen ableiten. Sie sind also auch an dieser Stelle wieder als Konzepter gefordert und erstellen ein Szenario aus Nutzersicht, das alle relevanten Wege durch die Website erfasst. Die Strukturierung der Fehlerreports baut entsprechend auf den Testfällen auf und erfasst dazu die potenziellen Rahmenbedingungen.

Anbieter von Software zum Bug-Tracking www.seapine.com/ttpro.html 왘 www.elementool.com 왘 www.inforce.de 왘 www.red-gate.com 왘

Produktionsbegleitung

241

Making of Stylepark Produktionsvorbereitung und -begleitung Rund vier Monate vor Online-Start läuft die Produktion von Stylepark.com auf Hochtouren. Das CMS muss implementiert, die vollständigen Inhalte erfasst und die Anwendung getestet werden. Zeit für die Konzepter, letzte Inhaltsdetails zu klären und das Feinkonzept zu komplettieren.

Was andere Konzepter während der Produktion Zeit und Nerven kostet, blieb MetaDesign bei diesem Projekt erspart. Die Erstellung, Koordination und Einpflege der initialen Inhalte in die Datenbank wurde vollständig zwischen dem Technikpartner und dem Kunden abgewickelt. Dieses Vorgehen erwies sich aufgrund der technischen Expertise als vorteilhaft. Da der Produktkatalog Inhalte von über 80 Herstellern umfasste, war es nicht ungewöhnlich, dass jeder die Inhalte wie z.B. Produktabbildungen und -informationen in unterschiedlichen Dateiformaten vorliegen hatte. Für die Integration dieser Inhalte in die zentrale Produktdatenbank wurde ein Importer gebaut – ein Script, das Dateien automatisch einliest und in die neue Datenbankstruktur und spezielle Dateiformate überführt. Diese Lösung brachte allen beteiligten Parteien eine enorme Zeitersparnis ein, so dass MetaDesign sich währenddessen um die Produktion der visuellen Basiselemente und die Detaildefinition einzelner Funktionen und Inhaltsbereiche kümmern konnte.

242

Produktion

Parallel wurde von dem Technikpartner ein eigens für Stylepark entwickeltes ContentManagement-System aufgesetzt. Aufgrund der extrem hohen Anforderungen der komplexen Applikation hatten sich alle drei beteiligten Partner dazu entschlossen, ein individuell auf Stylepark zugeschnittenes CMS zu programmieren. Dies schien zwar anfangs aufwändiger, bot dafür jedoch alle Freiheiten, Ergänzungen und Modifikationen, die ein gekauftes Fertigprodukt kaum bieten konnte.

Entwicklung des Prototypen Um in der Umsetzung der komplexen Funktionalitäten auf das spezifische CMS Zeit zu sparen, entschloss man sich, vorab einen Prototypen vom Produktkatalog zu produzieren, der für Testzwecke, aber auch zur Präsentation vor den Investoren eingesetzt werden sollte. Für den Kunden bedeutete dies zunächst zeitliche Einbußen und zusätzliche Kosten: eine Investition, die sich jedoch gelohnt hat, wenn man die Zeit- und Kostenaufwände gegenrechnet, die eine Überarbeitung am Endprodukt mög-

Abbildung 1 Für die Ankündigung des Launches wurde drei Monate vorher eine Microsite eingerichtet. 왗

licherweise erfordert hätte. Im Fall von Stylepark stellte der Prototyp zudem den Fortgang des Projekts überhaupt sicher. Der Prototyp lieferte den Investoren einen belegbaren Beweis, dass Stylepark mit seinen Partnern die Komplexität der Aufgabe bewältigen konnte. Kurz vor Weihnachten 2000 war es dann soweit. Der Prototyp war passwortgeschützt online zugänglich, und alle Beteiligten zeigten sich erfreut, nach Monaten des Planens und Konzipierens endlich etwas Greifbares auf dem Monitor zu sehen. Für die Testrunden wurde ein Gruppe von Architekten ausgewählt, die insbesondere die Suchfunktionalitäten ausprobieren und Optimierungsvorschläge einbringen sollten. Diese konnten im finalen CMS direkt berücksichtigt und umgesetzt werden.

Konzeptionelles Feintuning Nachdem das Herzstück der Website, der Produktkatalog, auf festem Fundament stand, konnte sich MetaDesign an die Fertigstellung des Feinkonzepts für die »Inspire«- und »Inform«-Bereiche machen. Da diese Bereiche kontextuell mit Inhalten aus der Produktdatenbank verknüpft sind, konnte über bestimmte Funktionalitäten erst definitiv entschieden werden, nachdem die Grundfunktionalitäten des Produktkatalogs technisch geklärt waren. Parallel dazu wurden von Styleparks ArtDirectorin Klaudia Kampa die Flash-Movies für den »Inspire«-Bereich produziert und die Templates für den Magazin-Bereich (»Inform«) erstellt. Alle finalen Materialien, Templates und Dokumentationen gingen schließlich an den Technikpartner, der die notwendigen Funktionen ausprogrammierte und alle Templates in das CMS integrierte.

Making of Stylepark

243

Abbildung 2 Die Homepage von www.stylepark.com 왗

Das Ergebnis Stylepark.com ging im März 2001 offiziell ins Netz. Seither ist die Nutzerschaft um etwa 75 Prozent gestiegen. Weitere 56 Hersteller und 50 Händler konnten als Kunden hinzugewonnen werden. Die Resonanz im Architekturumfeld ist groß. Von den 8 000 Stammkunden, die ihre Produkte regelmäßig über Anbieterkataloge beziehen, nutzen über 6 000 das Angebot auf stylepark.com.

Das Team 왘 Stylepark Robert Volhard, Christian Gärtner, Nils Becker, Tobias Lutz, Klaudia Kampa 왘 MetaDesign AG Thomas Klein, Jürgen Huber, Freyja Kok, Susan Buric, Kora Kimpel, Ulla Selmer, Anja Klausch, Julia Peglow, Lukas Cottrell, Bettina Fackelmann, Heike Albig 왘 Das Büro am Draht Andreas Fauth, Markus Freericks, Hanne Asmussen, Mark Müller, Miklas Weber 244

Produktion

Die Website befindet sich in einem laufenden Optimierungs- und Erweiterungsprozess. Im nächsten Stadium soll innerhalb der hochspezialisierten Online-Community der kreative Austausch zwischen den Mitgliedern gefördert werden. Ein weiterer Schritt in Richtung »London Loft«-Feeling und ein optimistischer Ausblick auf die Vision von Stylepark-Vorstand Robert Volhard: »In Zukunft soll Architekten nur noch eine Adresse zum Thema Produktsuche einfallen, und das ist Stylepark«.

Abbildung 3 Darstellung einer Produktfamilie im Bereich »Select« 왗

왖 Abbildung 5 Der Magazin-Bereich »Inform« informiert über neue Produkte und Trends.

왖 Abbildung 4 Im Bereich »About« erhalten Hersteller und Designer einen repräsentativen Rahmen.

Abbildung 6 왘 Im Bereich »Inspire« werden verschiedene Lebenswelten in Form von Flash-Movies vorgestellt.

Making of Stylepark

245

Praxisbeispiele

248 E-Branding 254 Globale Corporate Website 262 Info- und Auktionsplattform 268 E-Commerce-Website 276 Online-Community 282 Intranet/E-Learning

246

Praxisbeispiele

Praxisbeispiele

247

E-Branding www.bifi.de/www.zomtec.com, n.a.s.a.2.0 Wie bringt man eine originelle Markenstrategie ins Web? Ulrich Scheele (Concept Development) erläutert Idee und Umsetzung der digitalen Markenführung von BiFi und lüftet das Geheimnis um ZOMTEC.

Wie war die Ausgangssituation des Projekts und was war Ihre konkrete Aufgabenstellung? Ausgangspunkt der digitalen Markenführung war eine komplett neue Markenstrategie für BiFi. Die wurde von der Londoner Kreativagentur Bartle Bogle Hegarty entwickelt. Im Zentrum dieser Strategie steht ein fiktives, amerikanisches Unternehmen namens ZOMTEC und dessen etwas schräge Mitarbeiter, die ihren Alltag mit Humor, Gelassenheit – und eben einer BiFi bewältigen. Die Spots errangen in Deutschland sehr schnell Kultstatus und machten BiFi gerade bei der jüngeren Zielgruppe wieder »hip«. Die neue Positionierung von BiFi machte auch einen Relaunch der BiFi-Website notwendig. Die Website sollte den vorgezeichneten Weg konsequent weitergehen und BiFi/ ZOMTEC auch im Web als Kult etablieren.

248

Praxisbeispiele

Was waren die strategischen Ziele und welche Lösungsansätze wurden hierzu entwickelt? Die strategischen Ziele für die digitale Markenführung von BiFi waren klar formuliert. Sprich, der Web-Auftritt sollte: 왘 als weiterer Baustein einer integrierten Kommunikationsstrategie für die Marke arbeiten, 왘 dem User dabei echten Mehrwert bieten, 왘 ebenso verblüffen und überraschen wie die Spots und 왘 sich vom Gros der typischen, langweiligen, austauschbaren Marken-Websites stark abheben. Wir entwickelten ein Konzept, das auf zwei Pfeilern basierte: 1. einer viralen Strategie: www.zomtec.com – die Site zum Kult. Sie sollte nicht nur den Kult um ZOMTEC weiter ausbauen und mit neuem Leben füllen, sondern auch virales Potenzial besitzen. 2. einem klassischen E-Branding: www.bifi.de als Site zur Wurst. Hier steht das Produkt im Vordergrund – und nicht die ZOMTECWelt.

왖 Abbildung 1 BiFi-Homepage: die Site zur Wurst

Wie wurde die Idee auf der Website umgesetzt? Der Grundidee von www.zomtec.com: Wir lassen die Firma ZOMTEC Realität werden. Und zwar so authentisch, dass die Site den User verunsichert. Eine Frage soll ihn beim Besuch der Website permanent beschäftigen: Gibt es diese komische Firma aus den BiFi-Spots etwa wirklich? Diese Frage sorgt nicht nur dafür, dass sich die Leute intensiv mit ZOMTEC beschäftigen. Sie sorgt auch dafür, dass sich ZOMTEC wie ein Virus weiterverbreitet. Denn viele User übernehmen gerne die Rolle des Multiplikatoren, der den Link seinen Freunden, Bekannten und Kollegen weitermailt nach dem Motto: »Schau dir mal das an. Ist das echt oder doch nur ein Fake?« Die virale Kraft von www.zomtec.com arbeitet so als ein hervorragender Traffic-Generator – und das mit einer erstklassigen Trennschärfe, das heißt fast ohne Streuverluste. Insgesamt entsteht dadurch eine Kontaktqualität, die mit klassischen Marketing-Tools sicher nicht zu erreichen wäre: extrem hohes Involvement kombiniert mit hoher Kontaktdauer.

Abbildung 2 Die ZOMTEC-Homepage – echt oder nur ein Fake? 왖

Was sind die inhaltlichen oder funktionalen Highlights der Website? Auf www.zomtec.com stößt man also auf die typische Website eines kleinen mittelständischen Unternehmens. Irgendwo in Amerika. Auf eine Website, die ganz offensichtlich schon einige Jahre unverändert im Web steht und an der alle Trends und Entwicklungen im Internet spurlos vorbeigegangen sind. Ein echtes Highlight gibt es bei ZOMTEC bewusst nicht, das Ganze ist vielmehr als »Gesamtkunstwerk«, als eine eigene Welt zu begreifen. Das beginnt beim Design: echtes »Old School«-HTML aus der Netscape-2.0-Ära mit den klassischen Frames, visible Borders, schlecht bearbeiteten Bildern, »kleinen« Programmierfehlern, toten Links und »Broken Images« sowie jeder Menge gängiger Gif-Animationen. Und der Content der Seite ist kaum besser: alte und banale News, eine Webcam im stets menschenleeren Ruheraum und eine grausame German Version via Online-Übersetzung. Der User findet also eine Website, die die ZOMTECWelt aus den Spots ins Netz übersetzt, weiterführt und mit neuem Leben füllt.

E-Branding

249

Abbildung 3 Produktdarstellung auf www.bifi.de: Eine Wurst ist eine Wurst ist eine Wurst ... 왖

www.bifi.de hat eine ganz andere Aufgabe als die ZOMTEC-Site: Hier ist das Produkt der König – und nicht die ZOMTEC-Welt. Das Ganze ist modern und professionell umgesetzt. Aber – entsprechend der neuen Positionierung – inhaltlich bewusst sehr reduziert und nicht künstlich aufgeblasen. Das Produkt präsentiert sich »down to earth«. Eine Wurst ist eine Wurst ist eine Wurst. Nicht weniger, aber auch nicht mehr!

Ulrich Scheeles Empfehlungen für erfolgreiches Online-Marketing 왘 Denke integriert, aber handle mediumspezifisch – konsequent! 왘 Biete echten Mehrwert. Begeistere. Binde. 왘 Sei laut. Benutze die klassischen Medien als Starthilfe. 왘 Bleib laut. Nutze virale Strategien als Motor. 왘 Vergiss den Tausenderkontaktpreis. Internet ist ein Qualitätsmedium. 250

Praxisbeispiele

Abbildung 4 ZOMTEC in Flash 왖

Beide Seiten, also bifi.de und zomtec.com, haben natürlich auch einen (unauffällig platzierten) Link zu der jeweils anderen Welt. Gab es kritische Faktoren bei der Umsetzung des Konzepts? Nein, eigentlich nicht. Anfangs war es nur für unsere ZOMTEC-Screen-Designerin schwer, ihren eigenen Anspruch an Design und Ästhetik komplett zu unterdrücken. Aber nach einer Weile empfand sie es als echte Herausforderung, authentisches Old-School-Design zu produzieren. Ansonsten gab es nur kleinere Probleme wie: Wo kriegt man heute noch einen originales Netscape-2.0-Banner her? Wie verlief der Prozess der Konzeptentwicklung und was waren die wichtigsten Stationen? Insgesamt stand nur extrem wenig Zeit zur Verfügung, zwischen dem ersten Briefing und dem Launch beider Websites lagen gerade mal vier Wochen. Das bedeutet, dass nur ein sehr detailliertes Feinkonzept einen nahtlosen Produktionsfluss gewährleisten konnte. Gleichzei-

tig musste das Feinkonzept ausreichend Spielraum für spontane Ideen lassen, denn gerade bei ZOMTEC wurden zahlreiche Ideen während der Produktion geboren. Das Ganze klappte aber nur, weil der Kunde uns vertraute und extrem viel Freiheiten ließ. Besonders hilfreich ist hier auch die Abstimmung auf einem extra eingerichteten Develop-Server. Hier sind für den Kunden nicht nur alle Konzepte und Ideen abgelegt, sondern er kann den Workflow und den aktuellen Status quo der Site permanent verfolgen. Abnahmen erfolgten dann fast schon »on the fly«, also auf dem ganz kurzen Weg! Welche Teammitglieder haben an dem Konzept mitgewirkt und wie war die Aufgabenverteilung? Das Kernteam für die beiden Websites umfasste in der heißen Phase fünf Leute. Einen Projektleiter (Ulrich Scheele), zwei Konzepter (Wolfgang Schulz, Ulrich Scheele), zwei ScreenDesignerinnen (Sabine Kleedorfer, Denise Unfried), einen Techniker (Achim Gosse) sowie einen Texter (Ulrich Scheele). Welches Konzeptformat hat sich aus Ihrer Sicht für dieses Projekt bewährt? Das Grobkonzept hatte nur eine Aufgabe: die Kernidee möglichst überzeugend zu transportieren. Da gab es keinerlei Scribbles oder Screens. Das Feinkonzept legte dann die Struktur (Diagramm), die Funktionen der einzelnen Menüs und die konkreten Inhalte fest. Erst als das abgesegnet war, ging es an die grafische Umsetzung.

Wie geht es mit der Website weiter? Was sind die nächsten konzeptionellen Schritte? Nach sechs erfolgreichen Monaten erhielt der Kult um ZOMTEC Anfang 2001 neues Futter: Zusätzlich zu der HTML-Version wurde eine »ganz moderne« Flash-Version ins Netz gestellt. Da rappelt und zappelt es nur so. Klar, auch diese Fassung ist halt »typisch ZOMTEC«. Ab Sommer 2001 wurden dann peu à peu immer wieder kleine Upgrades in die Seite integriert, um die Site – parallel zur neuen TVStaffel – immer wieder mit kleinen, überraschenden Tools lebendig zu halten. Wie z.B. mit dem »ZOMTEC Career Test« oder dem »ZOMTEC Banner Exchange Program«. Und. Und. Und. Auch die BiFi-Seite ist natürlich keine statische Geschichte. Sie wird permanent um kleine, neue Features erweitert. Mal ein paar neue Downloads, mal ein neues Gewinnspiel, mal der BiFi-Fanshop mit Devotionalien rund um die Wurst und ZOMTEC. Wie würden Sie das Projekt aktuell bewerten? Was sind aus Ihrer Sicht bislang die größten Erfolge der Website? Bei beiden Seiten stand ausdrücklich nicht der Traffic im Zentrum. Es ging BiFi in erster Linie um die Kontaktqualität, also um die Markenbindung. Insbesondere die BiFi-Fans und ZOMTEC-Fans sollten sich auf den Sites zu Hause fühlen und sich mit der Marke beschäftigen. Dass sich dann der Traffic trotzdem auf einem überraschend hohen Niveau einpendelte, war natürlich schön.

E-Branding

251

Abbildung 5 Beiträge im ZOMTEC-Gästebuch – echt oder nur Fake? 왗

Und dass ZOMTEC dann beim diesjährigen »TV Movie Internet Award« für den Publikumspreis nominiert wurde, hat uns ebenso gefreut. Denn die Nominierung erfolgte nicht durch irgendein so genanntes Expertengremium, sondern durch die wichtigste (und kritischste) Instanz: die User! Schön auch, dass die ZOMTEC-Seite in zahllosen Foren diskutiert wird: Ist die Seite echt oder ist sie ein Fake? Und das sogar in ameri-

n.a.s.a.2.0. n.a.s.a.2.0 GmbH wurde am 1. Oktober 1998 in Hamburg gegründet und eröffnete im Zuge der Internationalisierung im Sommer 2000 Büros in Paris und London. Hinter der Abkürzung n.a.s.a. verbirgt sich »net activities and screen advertising«. Die Kernkompetenz von n.a.s.a.2.0 liegt im Bereich New-Media-Konzeption und -Kreation: n.a.s.a.2.0 bietet interaktive Kom252

Praxisbeispiele

kanischen Foren wie z.B. Planet Acol. Der größte Erfolg aber ist: Die BiFi-Fans lieben beide Seiten heiß und innig. Last But Not Least: Rückblickend konnte BiFi mit der neuen Markenstrategie eine Umsatzsteigerung um 14 Prozent verbuchen. Was beweist, dass der Kult um ZOMTEC auch direkt auf die Wurst, also auf die Marke BiFi, eingezahlt hat. Und darum ging es.

munikationslösungen, um Produkte und Unternehmen in die digitale Zukunft zu führen. n.a.s.a.2.0 GmbH arbeitet für Kunden wie z.B. Coca-Cola, Deutscher Herold, Unilever, Aral, Philips Medizin Systeme, Schauspielhaus Hamburg. Zu den Partnern von n.a.s.a.2.0 zählen agens, level of detail, new entry, weigertpirouzwolf und Scholz & Friends Group.

Globale Corporate Website www.adidas.com, Pixelpark AG Die Herausforderung einer globalen Corporate Website liegt in der Synchronisation der Länder unter einem starken Markendach bei gleichzeitiger Berücksichtigung nationaler Belange. Marco Spies (Senior Concept Developer) und Claudia Stumpf (Creative Director Concept) berichten, wie sie diese Aufgabe für den Sportartikelhersteller adidas gelöst haben.

Wie war die Ausgangssituation des Projekts und was war Ihre konkrete Aufgabenstellung? Als adidas uns im Frühjahr 2000 mit dem Projekt beauftragte, gab es bereits eine Vielzahl von adidas-Web-Auftritten, CD-ROMs und Offline-Anwendungen, z.B. für das »World of adidas«-Kiosk-Terminal. Alle diese Aktivitäten waren bis dahin jedoch nicht aufeinander abgestimmt, weder vom Design, noch von der zu Grunde liegenden Inhalts- und Navigationsstruktur. adidas in den Neuen Medien hatte viele Gesichter, die Länderauftritte unterschieden sich, einige Anwendungen waren veraltet, andere griffen die neuesten Designtrends auf. Verschiedene Agenturen hatten ihre Handschrift hinterlassen, die Marke adidas war hingegen nicht immer leicht zu erkennen. Das sollte geändert werden. Daher gab uns adidas den Auftrag zur Erarbeitung eines internationalen Corporate Designs für die Neuen Medien mit der langfristigen Perspektive, die gesamten adidasWebsites durch ein Content-Management-System pflegen zu können. Das zentrale Projekt

254

Praxisbeispiele

zur Verprobung der Umsetzung war dabei das Redesign von www.adidas.com als globale Corporate Website. Was waren die strategischen Ziele und welche Lösungsansätze wurden hierzu entwickelt? Die zentrale Anforderung an die Konzeption war es, ein neues offenes Strukturkonzept für alle möglichen Inhalte zu erstellen. Optimale Flexibilität in der adidas-Marketingkommunikation sollte durch die Online-Struktur und das zu Grunde liegende System gewährleistet werden, was insbesondere durch die Vielfalt und Unterschiedlichkeit der Inhalte eine große Herausforderung darstellte. Als Beispiel: In Deutschland zählt Fußball zu den Kernsportarten, in den USA statt dessen Basketball. Ein Spieler wie Zinedine Zidane hat weltweit Bedeutung, andere sind aber nur von nationalem Interesse. Trotzdem sollten alle Interessen über die Corporate Site bedient werden, unabhängig von Kultur und Landessprache.

adidas.com global homepage

adidas,xx country homepage legal

company

contact

register

search

legal

company

contact

register

search

sports

sports products

soccer

soccer

events

running

running

athletes

basketball

basketball

adizone

tennis

tennis

workout products

products catalogue

catalogue

tech guide

tech guide

colour guide

colour guide

local content Legend

athletes

country selection

athletes

events

events

campaigns

campaigns

global content

be better

be better

ikissfootball

ikissfootball

sneakerfan

originals

beatrugby meta navigation

originals

categories

Abbildung 1 Die Inhaltsstruktur von adidas.com zeigt die Verknüpfung von globalen und nationalen Inhalten. (Quelle: Pixelpark AG) 왗

sports homepages adizone

sports/categories content pages (examples) e-commerce (us only)

Das Produktsortiment unterscheidet sich von Land zu Land in Farben, Größen und Modellen. Kampagnen laufen nacheinander und mit modifizierten Ausrichtungen. Die Länderseiten sollten deshalb eng mit der Corporate Site verwoben und jederzeit einfach und schnell erreichbar sein. Und letztendlich sollen natürlich alle den Weg zu ihrem adidas-Produkt finden. Hinzu kommt: Ein Läufer muss unter Umständen mit anderen Kommunikationsideen angesprochen werden als jemand, der sich nur einmal über den Old-School-Sneaker »Superstar« informieren will. Ob Kids oder echte

adizone

shop us store us retailer

Athleten: Allen sollten optimale Themenwelten, Features und Tools angeboten werden. Was ist das zentrale Leitmotiv (die MainIdea) Ihres Konzepts? Wichtig war es uns, auch im Web das in den Vordergrund zu stellen, was adidas ausmacht: Qualität, Funktionalität, Design – und die Nähe zum Sportler. adidas sagt dir nicht: »Kauf diesen Schuh!« adidas sagt dir, warum du diesen Schuh kaufen sollst und passt ihn gegebenenfalls sogar deinen Bedürfnissen an. Für die Konzeption der Website leiteten wir aus der adidas-Strategie die MainIdea ab: adidas ist dein fairer Sparringspartner, und

Globale Corporate Website

255

256

Abbildung 3 Globaler Fußballbereich: Das Pull-down-Menü verlinkt zu den nationalen Fußball-Communities.

왖

Abbildung 2 Die Navigation ermöglicht verschiedene Zugangswege auf gleiche Inhalte, wie in diesem Falle über die Rubriken »Athletes« oder »Tennis«.

왖

zwar immer und überall – auf der Aschenbahn wie im Web. Das bedeutet für... 왘 Qualität: adidas bietet dir genau die Informationen, die du brauchst. 왘 Funktionalität: adidas unterstützt dich beim Sport und bei allem, was Spaß macht. 왘 Design: adidas bleibt wiedererkennbar und vertraut. Die MainIdea greift damit die Markenwerte auf: adidas ist erfahren, fair, authentisch, integrativ und: adidas möchte diese Erfahrungen weitergeben, hilft dir Schritt für Schritt, selbst besser zu werden. Wie wurde die Idee auf der Website umgesetzt? Unser erstes Ziel war es, den User dort abzuholen, wo er gerade ist, ganz gleich ob auf der spanischen adidas-Homepage, auf www. kobebryant.com oder im Sportgeschäft um die Ecke. Was wir also benötigten, war eine Navigation für alle Länder unter dem globalen Dach adidas.com. Viele Wege führen zu adidas.com, und überall wo es solche Wege

gibt, sollten sie gekennzeichnet werden. Zur leichteren Verwendung der URLs in integrierten Marketingmaßnahmen haben wir analog zur Inhaltsstruktur eine klare, einfach zu merkende URL-Struktur angelegt. Auf der Site selbst schafften wir einen doppelten Einstieg: einmal über die Sportarten, zum anderen über die Kategorien wie Produkte, Events, Sportler, Fanbereich. Unterhalb der Sportarten wiederholen sich die Kategorien, aber dann mit Bezug auf die gewählte Sportart. Dieser Ansatz berücksichtigt, dass die internationale Top-Athletin Anna Kournikova sowohl über den Einstieg Tennis als auch den Einstieg Athletin zugänglich ist. Nutzer, die von einer Sportart begeistert sind, erhalten alle zugehörigen Informationen in gesammelter Form unter dem Sportarten-Zugang. Nutzer, die eine bestimmte Kategorie (beispielsweise ein Produkt) suchen, finden ebenfalls einen direkten Einstieg – diesmal unter dem Zugang der Kategorien. Diese Struktur findet sich sowohl auf adidas.com, der globalen Dach-Site, als auch bei den einzelnen Ländern

Praxisbeispiele

Abbildung 4 왖 왘 Der Produktkatalog der deutschen adidas-Site: Mit Hilfe der Farbkarte können Produktfarben isoliert betrachtet und verglichen werden.

wieder, wobei sich die Inhalte zum Teil unterscheiden. Über die Ländernavigation kann der fußball-begeisterte deutsche User trotzdem mit wenigen Klicks den britischen FußballContent abrufen – natürlich vorausgesetzt, er spricht Englisch. Ein User, der auf www.adidas.com die Sportart Soccer auswählt, bekommt ein Pull-down-Menü mit all den Ländern, in denen es Fußball-Communities gibt, die er von hier sofort aufrufen kann. Es galt aber nicht nur, dem User raschen Zugriff auf die gewünschte Information zu verschaffen. Wichtig war, mit ihm in Interaktion zu treten und darüber hinaus von ihm für die Zukunft zu lernen. Hierzu wurden und werden auch weiterhin in den einzelnen Ländern Sportarten-Communities aufgebaut mit Features wie Foren, Chats mit Profis, Newsletter, EventKalender oder der Möglichkeit, eine VereinsHomepage anzulegen. Zusätzlich wurden Be-

reiche geschaffen, die dem User beim Training zur Seite stehen: Trainingsplaner, Trainings- und Gesundheitstipps oder Beratung bezüglich des richtigen Equipments. Was sind die inhaltlichen oder funktionalen Highlights der Website? Ein visuelles Highlight sind die Flash-Menüs, die an verschiedenen Stellen den User zu den Inhalten und den Ländern führen. Sie sind wie alle Seitenbereiche Template-basiert und über ein Content-Management-System pflegbar. Sie verleihen der Seite etwas sehr Sportliches, Dynamisches. Auf Content-Ebene ist der Umgang mit Teasern und Querverweisen hervorzuheben. Die Seiten bauen sich nach einem flexiblen Regelwerk auf. Thematische Dachseiten auf adidas. com führen über Teaser zu verschiedenen Anwendungen der unterschiedlichen Länder. Andererseits werden dem User auf allen Einstiegs-

Globale Corporate Website

257

seiten Links zum US-Onlinestore bzw. in die Produktkataloge der einzelnen Länder angeboten, wobei er das jeweils ausgewählte Thema – z.B. Basketball – mitnimmt. Schnelle und einfache Updates, z.B. zu aktuellen SportEvents, sind über diese Teaser auf den Homepages und Einstiegsseiten vorgesehen. Entsprechend der Wichtigkeit einer Nachricht können eine oder mehrere News besonders gehighlightet und von dort auf spezielle Microsites verlinkt werden. Das System ermöglicht auch ein zeitversetztes Freischalten der Kampagnen über die verschiedenen Länder hinweg. Für adidas-Fans wurde die »adizone« eingerichtet. Hier findet der User neben Screensavern und E-Cards auch die neuesten TVKampagnen und News von adidas. Hilfreich sind auch die kleinen Tools, die adidas den Usern an die Hand gibt, z.B. der ColorGuide und der TechGuide, eine kleine Flash-Anwendung, die dem User beim Finden der richtigen Farbe und Technologie der Produkte hilft. Für die USA, die außerdem auch einen Online-Shop betreiben, gibt es bereits einen Retail-Finder, für die europäischen Länder einen neu konzipierten Produktkatalog, der ebenfalls innerhalb der für adidas entwickelten Inhaltsstruktur funktioniert. Gab es kritische Faktoren bei der Umsetzung des Konzepts? Es hat einige Schritte gebraucht, bis wir die Flash-Navigation so hatten, wie sie jetzt ist. Der erste Ansatz war eine so genannte Smart Map, eine Navigation, die es dem User erlauben würde, von überall auf alle Inhalte zuzugreifen und dabei noch zu sehen: Was gibt es in England an Inhalten zum Thema Fußball, was es bei uns in Deutschland nicht gibt? Es wurde relativ schnell klar, dass eine solche Navigation zu komplex werden würde. Wir 258

Praxisbeispiele

haben dann vier verschiedene Flash-Navigationen mit unterschiedlichen Ansätzen gebaut und einem Usability-Test unterzogen. Dabei setzte sich das jetzige Navigationsprinzip eindeutig durch. Wie verlief der Prozess der Konzeptentwicklung und was waren die wichtigsten Stationen? In der ersten Phase entwickelten wir in gemeinsamen Meetings mit dem adidas-eMarketing-Team einen strategischen Ansatz. Es war wichtig, dass die Konzeption hier bereits beteiligt war, da sich aus der Strategie die MainIdea und die folgenden Schritte ableiten. Anschließend analysierten wir sämtliche bis dahin bestehenden Web-Auftritte und KioskAnwendungen hinsichtlich ihres Designs und ihrer Inhaltsstruktur. Wir sammelten alle bestehenden Inhalte auf allen Plattformen (WWW, Kiosk, CD-ROM), erstellten daraus Use-CaseDiagramme in UML und erweiterten diese um mögliche neue Anwendungsfälle und Formate. Wir ordneten diese dann in einer Grobkonzeptionsphase neu und kamen darüber schließlich zu einer sinnvollen Struktur und einem ersten Navigationsprinzip. Dabei hatten wir im Wesentlichen drei Dimensionen zu beachten: die Inhalte nach Kategorien (ein Produktbereich folgt anderen Prinzipien als ein EventBereich), die unterschiedlichen Sportarten und die verschiedenen Länder. Nachdem nun die grundlegende Struktur und die Prinzipien der Navigation feststanden, arbeiteten wir die Regeln aus und erstellten den Online-Style-Guide. Dieser war natürlich noch kein fixiertes Regelwerk, denn die Regeln mussten ja erst erprobt werden. Wir führten flankierend einige kleinere Projekte für adidas durch, bei denen wir die Regeln überprüfen konnten.

Abbildung 5 왖 Struktur und Aufbau der Hauptnavigation werden sowohl auf globaler als auch auf nationaler Ebene eingesetzt.

Der letzte Schritt in der Konzeptentwicklung war dann das Redesign der globalen Corporate Website. Dem Konzept oblag hierbei die Aufgabe, funktionale Grund-Templates zu erarbeiten. Wir haben Seitentypen wie z.B. eine »globale Sportarten-Homepage« definiert und dazu Grundlayouts entwickelt, die festlegten, welche Bereiche in welchem Maße über ein Content-Management-System aktualisierbar sein würden. Hilfreich war in allen Phasen, dass der Kunde stark in den Entwicklungsprozess eingebunden war. Dadurch wurden Abstimmungsprozesse beschleunigt und eine Abstimmung des Corporate Design und der Website mit anderen Marketingmaßnahmen gewährleistet. Welches Konzeptformat hat sich aus Ihrer Sicht für dieses Projekt bewährt? Wie bereits erwähnt, verwendeten wir in der Analysephase UML, um die Anwendungsfälle zu modellieren. Außerdem versuchten wir eine Art Reverse-Engineering: Wir sammelten die bereits bestehenden Anwendungen und bildeten einige Navigationswege in UML-ähnlichen Diagrammen nach, um dann zu sehen, wo es Probleme gab. In der Grobkonzeptionsphase arbeiteten wir natürlich viel mit Strukturbäumen und einer dreidimensionalen Matrix, um die Inhalte zu ordnen.

Die Ergebnisse einer jeden Phase wurden in Powerpoint-Präsentationen dokumentiert und dem Kunden zur Abnahme vorgestellt. Diese Präsentationen enthielten schon vorstrukturiert die Regeln, die am Ende gemeinsam mit Diagrammen und Designbeispielen in den Style-Guide-Maker eingepflegt wurden, ein eigens für Pixelpark erstelltes Tool mit Redaktionsfunktionen, das wir zur Erstellung von Online-Style-Guides nutzen. Zu einzelnen Punkten wie Inhaltsstruktur oder Navigationsprinzip wurden aber auch Dokumentationen in Word erstellt, die als Diskussionsgrundlage dienten und ebenfalls zur Abnahme vorgelegt wurden.

Konzeptionelle Empfehlungen von Marco Spies und Claudia Stumpf 1. Zuerst an den User denken. Der Erfolg beim Nutzer ist der Erfolg des Kunden. 2. Orientierung für jeden. Globale MarketingSites sind der Einstieg für viele verschiedene Nutzer. 3. Eine klare Richtung einschlagen. Aber dennoch bereit sein, nochmal umzudenken. 4. Integrativ arbeiten. Konzeption sollte in enger Abstimmung mit Strategie, Design und IT arbeiten. 5. Be Better!

Globale Corporate Website

259

Welche Teammitglieder haben an dem Konzept mitgewirkt und wie war die Aufgabenverteilung? Das komplette Projekt lief über etwa ein Jahr. Zu Beginn des Projekts war Claudia Stumpf beteiligt, die adidas bereits über einen langen Zeitraum betreut hatte und die Marke sehr gut kannte. Marco Spies konnte von Juni 2000 bis zum Online-Gang im März 2001 als verantwortlicher Konzepter die nötige Kontinuität gewährleisten. Wichtigen Input zur technischen Umsetzung leistete unter anderem Klaus Kuntz, als technischer Projektleiter. Eine intensive Abstimmung bestand auch mit dem Design, das vom Team um Kreativdirektor Jo Wickert entwickelt wurde. Sehr eng und konstruktiv war auch die Zusammenarbeit mit dem Kundenteam. Wichtige Entscheidungen wurde in gemeinsamen Meetings und Workshops erarbeitet.

Pixelpark AG Die Pixelpark AG ist einer der führenden europäischen Internet-Dienstleister und bietet integrierte E-Business-Lösungen insbesondere für die Unternehmensbereiche Marketing, Vertrieb und Kundenbetreuung. Mit ihren Kompetenzen Beratung, Design und Technologie hat sie sich als Full-Service-Anbieter etabliert, der die vier Industriegruppen Media/Telecommunications, Financial Industries, Product Industries und Service Industries fokussiert. 260

Praxisbeispiele

Wie geht es mit der Website weiter? Was sind die nächsten konzeptionellen Schritte? Der Style-Guide wurde inzwischen auch auf andere Projekte, wie den B-2-C-Produktkatalog, das B-2-B-Extranet, einzelne Sportarten-Sites oder das »World of adidas«-Terminal angewandt. Verschiedene Sites wie das B-2-BExtranet können bereits über ein ContentManagement-System redaktionell betreut werden. Grundsätzlich ist das, wie bereits gezeigt, auch mit adidas.com möglich. Es ist für adidas eine Frage des Aufwands, ob man dies tut oder doch eher eine Agentur mit kleineren regelmäßigen Updates beauftragt. Das B-2-B-Extranet ist zudem ein weiterer Schritt zur Vereinheitlichung der Markenwahrnehmung, da es den Händlern eine Reihe von Tools an die Hand gibt, mit denen sie die Qualität der eigenen Website steigern können.

Pixelpark wurde im März 1991 in Berlin gegründet und ist derzeit an verschiedenen Standorten in Deutschland, Schweiz, Österreich, Frankreich, Großbritannien sowie in Spanien vertreten. Kunden sind u.a. adidasSalomon AG, BASF, Credit Suisse, Financial Times Deutschland und Lloyds.

Wie würden Sie das Projekt aktuell bewerten? Was sind aus Ihrer Sicht bislang die größten Erfolge der Website? Bisher wurden bereits neun Länder auf das neue Corporate Design umgestellt und in die Länderauswahl aufgenommen, darunter USA und der Mittlere Osten. www.adidas.com ist damit der umfassendste Corporate Web-Auftritt eines Sportartikelherstellers weltweit. Die meistbesuchten Bereiche – neben den jeweils aktuellen Marketingkampagnen – sind den Tracking-Zahlen zufolge die nationalen Produktkataloge und die Sportarten-Communities. Damit ist es adidas einerseits gelungen, den Anspruch des sportlich-fairen Integrators einzulösen und zum anderen das Fundament der Marke, nämlich hochwertige Sport- und Freizeitprodukte, in den Vordergrund zu rücken.

Globale Corporate Website

261

Info- und Auktionsplattform www.templeflower.com, I-D Media AG Die ArtMust GmbH hat I-D Media mit der Konzeption und Realisierung einer internationalen Kunstplattform beauftragt. Den konzeptionellen Prozess von der Online-Markenentwicklung bis hin zur Umsetzung einzelner Shop- und Kommunikationsmodule beschreiben Ela Kagel und Julia Barth (Concept Development).

Wie war die Ausgangssituation des Projekts und was war Ihre konkrete Aufgabenstellung? Der Kunde trat mit folgender Zielsetzung an uns heran: Es sollte eine internationale Kunstplattform für eine breit gefächerte Zielgruppe, vom Kunstexperten bis hin zum Kunst-Interessierten, entwickelt werden. Im Mittelpunkt unserer Tätigkeit stand die Konzeption für einen exklusiven E-Commerce-Bereich, bestehend aus Shop und Auktion. Darüber hinaus wurden umfangreiche Content-Module entwickelt, bei denen wir unsere Kreativität besonders in einer neuen Form der Informationsvermittlung einbringen konnten. Zu Beginn unserer Arbeit befand sich auch die Marke Templeflower noch in der Frühphase ihrer Entwicklung. Da es zuvor kaum etwas Vergleichbares gegeben hatte, begannen wir das Projekt »auf der grünen Wiese«. Die Herausforderung bestand darin, eine Struktur zu entwerfen, die nicht nur webgerecht ist, sondern die Marke Templeflower auch insgesamt nach vorne bringt. Der Kunde gab uns immer wieder den Impuls, Kunst 262

Praxisbeispiele

ganzheitlich zu betrachten. Das bedeutet: ein Werk nicht nur zu präsentieren oder zu verkaufen, sondern den digitalen Raum als künstlerische Experimentierfläche zu begreifen. Somit waren die konzeptionellen Ideen auch eng mit einem hohen Anspruch an Design und Technologie verwoben. Was waren die strategischen Ziele und welche Lösungsansätze wurden hierzu entwickelt? Diese Frage ist wegen der Besonderheiten dieses Projekts nicht so eindeutig zu beantworten. Die Struktur von Templeflower lässt sich keineswegs mit dem eines Konzerns vergleichen. Templeflower ist in erster Linie ein internationales Netzwerk von Kunstexperten, die aus allen Teilen der Welt ihren Input liefern. Bei Geschäftsführer Gerrit Schulz-Bennewitz und einigen engen Mitarbeitern in Hamburg laufen alle Fäden zusammen. Das sind Menschen, die vom frühen Morgen bis in die Nacht mit Kunst zu tun haben. Dementsprechend hoch waren die Ansprüche an die Realisierung ihres Internet-Auftritts. Die Plattform sollte einem lebendigen Organismus ähneln – eine Struktur, die unterschiedlichste Inhalte in sich

Abbildung 1 Die Homepage von Templeflower empfängt die Besucher mit kontemplativem Vogelgezwitscher. 왗

aufnehmen und so wachsen kann; ein Interface, das direkt mit dem User kommuniziert und ein Ordnungsprinzip, das Freiräume lässt für Spannung und Überraschungen. Die Marke Templeflower soll sich zunächst im Internet etablieren und von dort ins Offline-Marketing übertragen werden. Das ist eine durchaus revolutionäre Strategie, vor allem wenn man die Branche betrachtet, in der Templeflower angesiedelt ist. Allerdings gab es neben dem Anspruch an Kreativität und Innovation sehr genaue Vorgaben im finanzstrategischen Bereich zu beachten: Templeflower-Shop und -Auction dienen dem Verkauf exklusiver Waren aus der breiten Angebotspalette von Templeflower. Eine in diesem Zusammenhang sehr interessante Anwendung ist die Closed Auction, eine Auktion für einen handverlesenen Nutzerkreis, bei der in Echtzeit von überall auf der Welt um hochpreisige Kunstwerke geboten werden kann. Unsere strategische Aufgabe bestand hierbei vor allem darin, eine elegante Verknüpfung zwischen Shop und Auktion einerseits und dem Content andererseits herzustellen.

Wir haben während der gesamten Konzeption darauf geachtet, dass keine voneinander getrennten inhaltlichen Blöcke entstanden, sondern stets Synergien zwischen den Commerceund Non-Commerce-Bestandteilen gebildet wurden. Der Kontakt zum Kunden erwies sich als sehr eng und unkompliziert. Gemeinsam mit dem Kunden wurden in umfangreichen Sitzungen die Strategien entwickelt. Wir begreifen die strategische Entwicklung als Prozess, der auch in der weiteren Entwicklung eine wesentliche Rolle spielt und fortdauert. Was ist das zentrale Leitmotiv (die MainIdea) Ihres Konzepts? Das konzeptionelle Leitmotiv ist die Schaffung und Nutzung von Synergien auf der gesamten Plattform. Alle Module sollen miteinander, inhaltsbezogen und aus Sicht des Anwenders bedürfnisorientiert, verknüpft werden können. Wir betrachteten deshalb die Plattform nicht als hierarchisch angeordnete Struktur, sondern vielmehr als ein Netz paralleler und hierarchisch nebengeordneter Anordnungen. Somit rückte das Navigationskonzept in den Mittelpunkt unseres Gesamtkonzepts. Diese Naviga-

Info- und Auktionsplattform

263

Abbildung 2 Die Kontextnavigation unterstützt den explorativen Charakter der Website. 왖

Abbildung 3 Die einzelnen Inhaltseinheiten werden in frei positionierbaren »Infotafeln« angezeigt. 왖

tion stellt kontextbezogene Verknüpfungen im gesamten Informationsraum von Templeflower. com her und erlaubt somit ein ganz individuelles und nutzerorientiertes Navigieren, eine anregende Mischung aus Stöbern und Suchen. Die Kontextnavigation stellt die logische Umsetzung des Wunsches unseres Kunden dar, bei der Informationsvermittlung im Internet neue Wege zu gehen. Ohne dass die Nutzer sich registrieren oder ein Profil erstellen müssen, wollen wir ihnen zielgenau auf ihre Interessen zugeschnittene Inhalte und Produkte präsentieren. Die Idee entstand beim Konzeptionsteam und nahm in der Zusammenarbeit mit den Designern schließlich immer konkretere Formen an. Anfänglich erschien es uns als schwierig, eine Struktur für die vielen dynamischen Kontextverknüpfungen zu entwickeln. Wir ex264

Praxisbeispiele

perimentierten eine Weile mit den Designern, bis wir schließlich die Navigation in ihrer jetzigen Form entwickelt hatten. Wie wurde die Idee auf der Website umgesetzt? Für die Umsetzung der Kontextnavigation erstellten wir eine Matrix, in der sämtliche inhaltlichen Bestandteile einer von insgesamt sieben Kategorien zugeordnet wurden. Jeder Datensatz bekam so eine genaue Zuordnung in einem spezifizierten inhaltlichen Interessensbereich. Dadurch entstand ein kontextbezogenes informelles Netzwerk, das sich entsprechend der Wünsche des Anwenders durchsuchen lässt. Die Kontextnavigation wird zusätzlich noch von einer hierarchischen Navigation unterstützt, die eine genaue Ortung innerhalb der einzelnen Module sowie die Darstellung des User-Pfades ermöglicht.

Abbildung 5 Der Bereich »LoveLetters« zeigt temporäre WebBeiträge verschiedener Künstler.

왖 Abbildung 4 Im Bereich »Community Whispers« erfahren die Nutzer die neuesten Gerüchte und Infos aus der Kunstszene.

왖

Zusätzlich zur Kontextnavigation sind auf einzelnen Bereichen der Plattform Infotafeln angebracht, die beispielsweise anzeigen, welche Produkte, Interviews, Biografien oder Ausstellungstipps zu den jeweiligen Künstlern es noch auf der Plattform gibt. Was sind die inhaltlichen oder funktionalen Highlights der Website? Ein besonderes Highlight der Site ist die Closed Auction, die in regelmäßigen Abständen für einen hochexklusiven Bieterkreis veranstaltet werden soll. Geboten wird in Echtzeit und ausschließlich online – das gilt nicht nur für die Gäste im Internet, sondern auch für die Bieter, die live an diesem Event teilnehmen. Jeder Bieter wird von seinem eigenen Avatar im virtuellen Bidding Room vertreten und hat auch einen Überblick über die Avatare der Mitbietenden. Ein virtueller Auktionator leitet die Auktion. Die Closed Auction ist eine komplett Flash-basierte Anwendung.

Ein weiteres Highlight ist der »Artfinder«, ein multifunktionales Planungs- und Informations-Tool für Kunstveranstaltungen weltweit. Die Personal Art Database funktioniert als eine Art digitaler Souvenirladen, in dem sich Interviews, Künstlerbiografien oder Bilder abspeichern lassen. Am Ende einer Web-Session kann der Nutzer die gesammelten Schätze in einer speziellen Printversion mit Wasserzeichen und Logo ausdrucken. Der Bereich »Templeflower Tour« spielt mit den unterschiedlichsten Möglichkeiten der Informationsaufbereitung. Hier kommen vor allem Grafik- und Soundelementen eine wichtige Rolle zu. Den neuesten Gossip aus der internationalen Kunstszene stellt der Bereich »Community Whisper« vor. Der User erhascht auf der speziellen Gerüchteseite mit der Maus eines der flüchtigen Wortgebilde, woraufhin das Gerücht im Volltext abgebildet wird. Und »gewispert« wird hier tatsächlich: Geheimnisvolle Flüsterstimmen bilden einen Klangteppich für diese Anwendung.

Info- und Auktionsplattform

265

Gab es kritische Faktoren bei der Umsetzung des Konzepts? Nach dem Produktionsstart haben wir relativ schnell gemerkt, dass unsere üblichen Produktionsvorlagen (Storyboards) sich nur bedingt für die besonderen Anforderungen dieses Projekts eigneten. Als Abnahmedokumente für den Kunden haben sich die Storyboards zwar bewährt, aber zur internen Umsetzung erwiesen sich die Dokumente als zu umfangreich und unübersichtlich. Wir haben daraufhin für einzelne Anwendungen Flussdiagramme mit Use-Cases erstellt. Hierbei war allerdings darauf zu achten, dass für die Darstellung einzelner Prozessfaktoren durchgängig dieselben Symbole verwendet werden. Auch sollte jedes Use-Case-Diagramm mit einer Legende versehen werden. Wir haben in diesem Zusammenhang auch erkannt, dass die Abbildung von Use-Cases mit Hilfe von UML vor allem für die Zusammenarbeit mit den Programmierern sehr hilfreich sein kann. Für einige sehr grafisch orientierte Anwendungen ist das frühzeitige Einbeziehen des Design- und Flash-Teams sinnvoll. Um den produktionstechnischen Anforderungen des Projekts gerecht zu werden, mussten wir auch den üblichen Workflow neu überdenken: Für einige sehr grafisch orientierte Anwendungen sollten Konzepter und Designer von Anfang an eng zusammenarbeiten, das spart eine Menge Zeit.

Wie verlief der Prozess der Konzeptentwicklung und was waren die wichtigsten Stationen? Die wichtigste Phase der Konzeptentwicklung war zweifelsohne die Grobkonzeptionsphase. Hier wurden in wenigen Wochen alle relevanten Inhalte festgelegt und ein übergreifendes inhaltliches und strategisches Konzept für den Web-Auftritt von Templeflower.com entwickelt. Dieses Konzept bildete für alle Mitglieder des Teams (sowie auch für unseren Kunden) die Grundlage der Zusammenarbeit. Das Grobkonzept diente schließlich auch im weiteren Arbeitsprozess als ständiger Leitfaden. Nach Prüfung des Grobkonzepts durch den Kunden begann sogleich die Entwicklung der Storyboards. Nach Einsicht und Prüfung durch den Kunden wurden die Storyboards als interne Produktionsvorlagen freigegeben. Welche Teammitglieder haben an dem Konzept mitgewirkt und wie war die Aufgabenverteilung? Die konzeptionelle Basis wurde im Team entwickelt. Im weiteren Verlauf war Julia Barth hauptsächlich für den Commerce-Bereich verantwortlich. Der Aufgabenschwerpunkt von Ela Kagel lag auf der Entwicklung der ContentBestandteile und der strategischen Zusammenarbeit mit dem Kunden.

Konzeptionelle Empfehlungen von Ela Kagel und Julia Barth 왘 Es ist gut, stets an seinen Ansprüchen festzuInteressensgebiet, oder warum nicht auch nach Stimmungen, Klängen?) halten und diese auch gegenüber möglicher왘 weise skeptischen IT-Kollegen zu vertreten. Gerade für Seiten mit einem hohen künst왘 Für einen so breit gefächerten Content lerischen Anspruch sollte die Konzeption sollte man verschiedene Zugänge zu den von Anfang an eng mit dem Design zuInhalten schaffen (nach Zielgruppe, nach sammenarbeiten. 266

Praxisbeispiele

Welches Konzeptformat hat sich aus Ihrer Sicht für dieses Projekt bewährt? Das Grobkonzept erwies sich als eine gute Ausgangsbasis. Darin ließ sich die konzeptionelle Idee von der Funktion der einzelnen Anwendungen bis hin zum gedanklichen Überbau festhalten. Außerdem wurden im Grobkonzept die kurz-, mittel- und langfristigen strategischen Ziele ausgearbeitet. Zur Abnahme durch den Kunden hat sich das Storyboard durchaus bewährt, weil darin jede Funktion und jeder Screen-Zustand nachvollzogen werden kann. Für die interne Zusammenarbeit waren funktionale Beschreibungen der einzelnen Templates, eine detaillierte Sitemap sowie Use-Case-Diagramme sinnvoll.

I-D Media AG Bereits 1988 als klassische Agentur für Marketing und Kommunikation gegründet, spezialisierte sich I-D Media 1994 auf die Entwicklung digitaler Marketingstrategien. Für die kreative Umsetzung erhielten die Berliner E-BusinessSpezialisten zahlreiche internationale Preise und Auszeichnungen. Früh erkannte man die Vorteile des modularen Aufbaus solcher E-BusinessLösungen: Durch den Einsatz standardisierter

Wie geht es mit der Website weiter? Was sind die nächsten konzeptionellen Schritte? Templeflower.com soll in Zukunft konsequent und in allen Sektionen der Plattform mehrsprachig werden. Geplant ist zudem eine Community für Kunstexperten und Kunstfreunde aus aller Welt. Auch ein Angebot für Kinder ist derzeit in Vorbereitung: »Little Templeflower« möchte den kunstinteressierten Nachwuchs zu einem spannenden Streifzug durch die Welt der Kunst einladen. Aufgrund der hervorragenden Kontakte zur internationalen Kunstszene bietet sich außerdem eine Kooperation mit Kunsthochschulen an. Erste Konzepte für Online-Seminare und virtuelle Lernumgebungen sind bereits in Arbeit. Wie würden Sie das Projekt aktuell bewerten? Was sind aus Ihrer Sicht bislang die größten Erfolge der Website? Dazu können wir im Moment noch nichts sagen, da die Seite noch nicht online ist. (Anm.: Geplanter Online-Start von Templeflower ist im Herbst 2001.)

Module können erfolgreiche Kommunikationsplattformen schneller, effizienter und kostengünstiger für den Kunden produziert werden. Die sichtbare Ebene bleibt davon unberührt. Das Modulsystem setzt auf der darunter liegenden technischen Ebene n, die zu nahezu 50 Prozent standardisierbar ist. Zu den Kunden zählen Swatch, Red Zac, Deutsche Telekom, ERGO, Yello Strom und DaimlerChrysler.

Info- und Auktionsplattform

267

E-Commerce-Website www.libri.de, SinnerSchrader AG Gemeinsam mit SinnerSchrader hat Libri ein komplexes E-Commerce-System aufgebaut, das die Buchhändler als Partner einbindet, statt mit ihnen zu konkurrieren. Detlef Wichmann (IT-Vorstand) erläutert den strategischen Ansatz und die wesentlichen Schritte der Realisierung.

Wie war die Ausgangssituation des Projekts und was war Ihre konkrete Aufgabenstellung? Komplexe Vertriebsprozesse, wie sie in der realen Welt mit ihren vielfältigen Lieferantenund Kundenbeziehungen alltäglich sind, sind schwer auf das Internet zu übertragen. Hersteller und Großhändler nutzen das Internet deswegen bevorzugt, um am Zwischenhandel vorbei verkaufen zu können. Diese Strategie hat den Vorteil höherer Margen, wird aber mit einem tiefen Vertrauensverlust der klassischen Vertriebspartner bezahlt, der oft in keinem Verhältnis zu den online generierten Umsätzen steht. Der Buchgroßhändler Libri wollte bei seinem Gang ins Internet den Einzelhandel nicht für Direktverkäufe hintergehen, sondern sinnvoll in das Geschäftsmodell integrieren. Libri sah es als Herausforderung und Chance, den

268

Praxisbeispiele

schnell wachsenden Online-Markt gemeinsam mit den Buchhändlern zu erschließen, um so zusätzliche Umsätze zu generieren und die Einzelhändler stärker an das Unternehmen zu binden. Die E-Commerce-Strategie sollte deshalb die Verhältnisse aus dem traditionellen Geschäft widerspiegeln und die Kompetenzen aller Beteiligten zur Geltung bringen. Libri unterhält als etablierter Grossist ein Barsortiment von 350 000 Titeln. 90 Prozent aller Bestellungen der Einzelhändler kann Libri so innerhalb von 24 Stunden abdecken. Zusätzlich pflegt Libri seinen eigenen Katalog mit über 1 Million Titel, in den jede Woche die 1 000 Neuerscheinungen aus 4 000 deutschen Verlagen einfließen. Preise, Verfügbarkeitsinformationen und Neuzugänge werden täglich abgeglichen.

Abbildung 1 Die E-Commerce-Website von Libri bietet seinen Partnern flexible Kooperationsmodelle. 왗

왖 Abbildung 2 Das E-Commerce-Konzept von Libri.de: Die Artikel werden in einer zentralen Datenbank eingepflegt und verwaltet. Eingehende Bestellungen von Buchhandlungen werden zentral bei Libri abgewickelt. Der Endkunde erhält die bestellten Artikel per Versand oder bei einer Buchhandlung seiner Wahl (Quelle: SinnerSchrader AG).

E-Commerce-Website

269

Abbildung 3 Buchhandlungen wie z.B. Kiepert können die Shop- und Katalogfunktion in ihre eigene Site integrieren. 왗

SinnerSchrader erhielt den Auftrag, auf dem logistischen Know-how und den Erfahrungen von Libri in der Katalogisierung eine komplexe E-Commerce-Applikation aufzusetzen. Das System sollte es dem Grossisten erlauben, seinen Partnern flexible Kooperationsmodelle anzubieten. Erreicht wurde dies durch ein für die Branche bislang einmaliges Online-Konzept: Buchhandlungen und Verlage können die Shop- und Katalogfunktion in ihre eigene Site integrieren, über Libri selbst einen Auftritt realisieren oder als Partnerbuchhandlung von Libri.de auftreten, die die über das Web bestellten Bücher ausliefert. Mittlerweile nutzen rund 1 000 Buchhändler und Verlage, darunter viele bekannte Filialisten und namhafte Verlage, den Online-Service. Was waren die strategischen Ziele und welche Lösungsansätze wurden hierzu entwickelt? Die Strategie wurde in Zusammenarbeit von SinnerSchrader und Libri gemeinsam erarbeitet. Nach einem zentralen Kick-off-Termin wurden im Rahmen von Workshops die Eck270

Praxisbeispiele

pfeiler für die Ausrichtung des Dienstes entwickelt und dann weiter ausdifferenziert. Internet-User zählen in Deutschland zu den kaufkräftigsten Zielgruppen. Sie lesen mehr und investieren dementsprechend höhere Summen in Literatur als der Durchschnitt. Libri.de will diesem Kundenstamm ein hochwertiger Ansprechpartner für alle Buchthemen sein. Im Zuge des kontinuierlichen Ausbaus der Website entstand ein umfangreiches Literaturportal, das neben dem Shop umfangreiche Link-Listen zu allen Themen des Literaturalltags enthält. Libri bietet zudem Books on Demand, also Bücher, die statt in festen Auflagen nur auf Bestellung gedruckt werden, an. Der Online-Kanal stellt von seiner Konzeption her keine Alternative zum stationären Buchhändler, sondern seine sinnvolle Ergänzung dar. Das sinnliche Erlebnis am Buchregal kann und will Libri.de nicht ersetzen. Der Griff zum Buch, das Herumblättern, Anlesen, das Riechen und Fühlen des Papiers bleibt als Kauferlebnis dem Besuch im stationären Buchladen vorbehalten.

Die Anforderungen von Libri ließen sich durch keine am Markt verfügbare Standard-Software erfüllen. Also kam für die Realisierung nur eine maßgeschneiderte Individuallösung in Frage. Die Strategie von SinnerSchrader war es, eine modulare Plattform aufzubauen, die alle für den Online-Vertrieb benötigten Komponenten zusammenführte. Technisch bestand die Aufgabe darin, den bestehenden Warenkatalog, die Auslieferungslogistik sowie das Rechnungswesen des Grossisten auf eine einheitliche Datenbasis zu heben und internetfähig zu machen. Als Entwicklungs- und Laufzeitumgebung nutzte SinnerSchrader ein robustes, objektorientiertes Framework, das eine moderne, durchgängig dreischichtige Systemarchitektur (three-tier architecture) bot. Die Architektur teilte sich, stark vereinfacht, in eine Daten-, Businesslogik- und Präsentationsebene auf. Das Frontend sollte den Partnerbuchhändlern eigenständige Marketingauftritte ermöglichen, um so auch den Ansprüchen und Ausrichtungen der verschiedenen Sortimentsbuchhandlungen gerecht werden zu können. Für deren Online-Präsenz bietet der Grossist verschiedene Pakete an. In der Einstiegsvariante wird der Einzelhändler lediglich im Bestellprozess oder der Partnerübersicht unter Libri.de gelistet. Jedoch richtet Libri den Händlern auf Wunsch auch eine eigene InternetAdresse ein. Dank vorgefertigter Templates für Homepage und Unterseiten sowie einem täglich aktualisierten Schaufenster besitzt der Händler einen professionellen und täglich wechselnden Auftritt. Die Qualität eines Projekts ergibt sich aus der Art der Zusammenarbeit zwischen Kunde und Agentur. Der Dienstleister muss ein tiefes Verständnis für die Marktmechanismen und strategischen Ziele des Kunden aufbauen. Auf

der anderen Seite muss der Kunde auch bereit sein, die entsprechenden Bereiche zu öffnen. Dies gilt gerade für hochsensible IT-Bereiche wie Logistik und ERP. Obwohl Libri als mittelständisches Unternehmen einer eher traditionellen Branche angehört, hat die Innovationsbereitschaft und Entschlussfreude des Kunden wesentlich zum Erfolg des Projekts beigetragen. Im Ergebnis hat Libri eine Anwendung erhalten, die viel von seinem Marktverständnis transportiert und seit dem Launch vor vier Jahren kontinuierlich weiterentwickelt wird. Was ist das zentrale Leitmotiv (die MainIdea) Ihres Konzepts? Der deutsche Buchmarkt kennt rund 1 800 Online-Anbieter. Die konzeptionelle Phase wurde dementsprechend von dem Anspruch geleitet, die Kompetenzen aus dem klassischen Wettbewerbsumfeld in die digitale Welt zu übertragen und für klare Alleinstellungsmerkmale in dem unübersichtlichen Wettbewerbsumfeld zu sorgen. Dies wird durch die Verbindung zwischen Online- und OfflineHandel erreicht. Da Libri als klassisches B-2-B-Unternehmen nicht den Bekanntheitsgrad einer etablierten Endkundenmarke mitbrachte, wurde eine eigene Marke aus der Taufe gehoben. »Libri.de – Bücher brauchen Wirklichkeit« transportiert den Leitgedanken und signalisiert dem Kunden: Wenn du bei uns kaufst, nutzt du nicht nur die Möglichkeiten des Internets, sondern auch die Kompetenz des Buchhandels. Der Impuls für die Ausrichtung der Marke kam von Libri. SinnerSchrader hat die Marke internetgerecht aufbereitet und die Online-MediaStrategie entwickelt.

E-Commerce-Website

271

Wie wurde die Idee auf der Website umgesetzt? Der Anspruch von Libri.de ist es, Literatur im Internet erlebbar zu machen. Hierfür werden die Titel mediengerecht dargestellt und detailliert beschrieben. Das Libri-Sortiment umfasst Bücher, CD-ROMs und Videos. Warenbestand, Preise, Verfügbarkeitsinformationen sowie Neuzugänge werden täglich aktualisiert. Der Clou sind die umfangreichen Zusatzinformationen zu den Titeln, die nur über das Internet abgerufen werden können. Hierfür wird von einer eigenen Redaktion jedes neue Buch mit vielen Zusatzinformationen in den Katalog aufgenommen. Seit 1997 werden Neuerscheinungen mit Cover-Abbildungen, Klappentexten, Vorworten, Leseproben und Rezensionen erfasst. Diesem Verfahren ist es zu verdanken, dass bis heute Zusatzinformationen zu vielen hunderttausend Büchern verfügbar sind. Die Homepage von Libri.de präsentiert sich so gut sortiert wie die Auslage eines Buchladens. Aktuelle Themen zu kulturellen Höhepunkten, der Autor des Monats, Jahrestage großer Literaten oder die neuesten Trends der Buchmesse sind ebenso zu finden wie das exklusive Spiegel-Magazin mit Buchrezensionen oder der Tagestipp in den »SchlagSeiten«. Im Bereich »Leseproben« stehen über hundert Bücher mit kapitelweisen Auszügen zum Anlesen und Ausdrucken bereit. Die Rubrik »Stöbern« bietet umfangreiche Empfehlungen zu allen Richtungen der Literatur. »Leanders Leseliste« stellt die besten Werke der Kinder- und Jugendliteratur vor.

272

Praxisbeispiele

Was sind die inhaltlichen oder funktionalen Highlights der Website? Libri.de verfügt als Tochter eines Buchgroßhändlers über den aktuellsten und umfangreichsten Titelkatalog für deutsche Literatur, leicht bedienbare Suchfunktionen und detaillierte Zusatzinformationen zu fast jedem Titel. Darüber hinaus war Libri stets bemüht, eigene Wege zu gehen, anstatt andere zu kopieren. Ein wirklich außergewöhnliches Ergebnis ist das Anfang 2001 gestartete Portal für Literaturthemen, das über 7 000 ausführlich kommentierte Links enthält und damit die umfangreichste Link-Sammlung für Literaturinteressierte im deutschsprachigen Internet darstellt. Mit dem für einen Buch-Shop ungewöhnlichen Zusatzangebot will Libri.de Menschen mit einer Begeisterung für Literatur und Sprache langfristig binden. Die Link-Liste enthält Links zu 3 000 deutschen und internationalen Autoren, 1 500 Verlagen, 600 Bibliotheken und allein 700 Quellen zu Netzliteratur. Über Libri.de ist es damit erstmals möglich, umfangreiche Informationen zu allen Bereichen der Literatur zu erhalten. Jeder einzelne Link ist übersichtlich in Kategorien sortiert, ausführlich kommentiert und wird regelmäßig überprüft. Über die Link-Sammlung können Besucher der Website Autorenbiografien einsehen, geeignete Bibliotheken für die Recherche oder ein Online-Diskussionsforum finden. Auch für Autoren und im Literaturmarkt Tätige möchte Libri.de eine zentrale Anlaufstelle werden: Für sie finden sich Förderungen für Nachwuchsautoren genauso wie aktuelle Jobs in der Literatur- und Verlagsbranche. Der Link-Katalog wird kontinuierlich thematisch erweitert und aktualisiert.

Abbildung 4 Das Literaturportal unter Libri.de enthält über 7 000 ausführlich kommentierte Links. 왗

Detlef Wichmanns Empfehlungen für erfolgreiche E-Commerce-Konzepte 3. »Bill it or Kill it« – was kein Geld bringt, taugt 1. »Me too«-Konzepte scheitern gnadenlos. nichts. Kostenlose Erlebniswelten kann sich Wettbewerbsfähig ist nur, was nicht kopiert kein Unternehmen dauerhaft leisten. Zudem werden kann. Etwa ein Unternehmen, das ist der Internet-Nutzer Pragmatiker. Wenn sein Online-Angebot nicht erklären muss, er vom Nutzen überzeugt ist, zahlt er auch weil es dort das anbietet, was ihm offline dafür. zur Größe verholfen hat; oder weil es seine 4. Effizienz ist der größte Gewinn. Wer eComDienstleistungen online billiger und schnelmerce betreibt, sollte nicht nur auf die Umler anbietet. Seien Sie einzigartig, dann sätze schielen. Gerade die Möglichkeiten zur brauchen Sie auch keine Media-Spendings! Kostenersparnis sind durch die Vernetzung 2. Das Internet bietet keine Umsatzchancen interner und externer Prozesse gigantisch. für alle. Kleine und mittelständische Unter5. »Keep it Simple«. Von der SMS lernen wir, nehmen haben es weiter schwer, zusätzliche wie einfach »Killerapplikationen« sein könUmsätze über das Internet zu generieren. nen, die von den Kunden zudem recht Trotzdem: Kundenbindung ist ohne Interteuer und scheinbar gerne bezahlt werden. net-Kanal nicht mehr denkbar. Wer darauf Klare Mehrwerte sind besser als diffuse verzichtet, wird dies durch Einbußen im »Service-Parks«. Stammgeschäft verspüren.

E-Commerce-Website

273

Abbildung 5 왘 Integration der Buchhändlerauswahl im Bestellprozess

Gab es kritische Faktoren bei der Umsetzung des Konzepts? Projekte werden weniger durch das technisch Machbare als durch Budget- und Zeitvorgaben geprägt. Der Zeitraum für die Ausarbeitung sowie die Umsetzung des technischen Konzepts bei Libri.de war sehr kurz. Hohe Anforderungen wie die Übernahme und Aktualisierung von Stammdaten in dem beschriebenen Umfang waren aufgrund der Menge und der bis dahin nicht auf das Medium Internet ausgerichteten Datenstrukturen sehr zeitintensiv. Auch die durchgängige Mandantenfähigkeit stellte seinerzeit eine zusätzliche Herausforderung dar. Sie ermöglicht es dem Buchhändler, optisch und administrativ eigenständige Shops auf Basis der Libri-Anwendung zu betreiben. Hingegen unterscheidet sich der Aufwand der Frontend-Produktion kaum von denen anderer E-Commerce-Projekte. Hier bestand u.a. eine Aufgabe darin, die Buchhändlerwahl im Bestellprozess für Endkunden zu integrieren – eine Funktion, die von anderen Webshops 274

Praxisbeispiele

»nicht gelernt« war. Eine Konvertierungsrate von derzeit 5 Prozent (Besucher in Käufer) zeigt, dass dies gelingen kann. Welche Teammitglieder haben an dem Konzept mitgewirkt und wie war die Aufgabenverteilung? Marketing und Strategie hat der Gründer und jetzige Vorstand von SinnerSchrader, Matthias Schrader, übernommen. Die technische Umsetzung lag in meiner Verantwortung. Mit diesem Projekt wurde seinerzeit der Grundstein für die heutige Kompetenz bei der Realisation transaktionsorientierter E-Commerce-Anwendungen gelegt. Insgesamt ist ein Team von 15 Mitarbeitern, darunter Software-Entwickler, Grafiker, Projektleiter und HTML-Programmierer, beteiligt gewesen. Welches Konzeptformat hat sich aus Ihrer Sicht für dieses Projekt bewährt? Überwiegend wurde mit Screens und Flowcharts gearbeitet. Die präsentierten Screens wurden von SinnerSchrader entwickelt und mit dem Kunden abgestimmt. Am Ende der

Konzeptphase wurde ein schriftliches Pflichtenheft erstellt, das genau die Aufgaben der Produktionsphase festlegte. Wie geht es mit der Website weiter? Was sind die nächsten konzeptionellen Schritte? Die erfolgreiche Zusammenarbeit mit den Buchhändlern erfordert eine ständige Anpassung der Anwendung an die Marktentwicklung und -erfordernisse. Das geht von der erweiterten Produktdarstellung über die Kundenführung im Bestellprozess, erweiterte Zahlungsprozesse bis zur Kundenpflege mittels Newsletter und CRM. Libri.de wird sich weiter darauf spezialisieren, ein Buchfachgeschäft im Internet zu sein und darauf seine Inhalte und Funktionalitäten ausrichten.

SinnerSchrader AG SinnerSchrader ist der führende eCommerceDienstleister in Deutschland. 1996 gegründet, beschäftigen sich derzeit rund 300 Mitarbeiter in den fünf Niederlassungen Hamburg, Frankfurt, Rotterdam, London und Denver mit der Entwicklung hochkomplexer Internet-Anwendungen. Das Spektrum reicht von der Konzeption über die technische Implementation und

Wie würden Sie das Projekt aktuell bewerten? Was sind aus Ihrer Sicht bislang die größten Erfolge der Website? Libri.de besteht heute aus 900 Buchhandlungen und einem gemeinsamen Web-Portal mit täglich 20 000 Nutzern. Damit gehört Libri.de zu den großen fünf Anbietern am Markt. Neben der wirtschaftlichen Situation sehen wir das Heranführen der Buchhändler an den kritisch beargwöhnten Markt Internet als größten Erfolg an. Im Ergebnis hat das Internet-Engagement nicht nur eine neue Einnahmequelle erschlossen, sondern auch das Verhältnis des Buchgroßhändlers zu seinen Kunden nachhaltig intensiviert.

Produktion bis zur Vermarktung laufender Websites. Mehr als die Hälfte der Mitarbeiter sind mit der Entwicklung von Software und ITLösungen beschäftigt. Ihre Lösungen für Kunden wie die Deutsche Bank, Otto Versand, Tchibo oder Viag Interkom basieren auf den Technologien J2EE, WebObjects oder Intershop Enfinity.

E-Commerce-Website

275

Online-Community www.metropolis.de, Metropolis AG Als der Grundstein für Metropolis gelegt wurde, war der Community-Hype in Deutschland noch nicht ausgebrochen. Die Macher leisteten nahezu Pionierarbeit in der Schaffung einer aktiven Online-Gemeinschaft. Marcel Heyne (Vorstand) erklärt, wie das Projekt von der Planung bis zur Realisierung verlief.

Wie war die Ausgangssituation des Projekts und was war Ihre konkrete Aufgabenstellung? Anfang 1996 hatte die New Media Agentur 21TORR AG selbst erste Schritte ins Internet unternommen und für alle, die mit diesem Medium zu tun hatten, unter www.multimedia.de einen Chat etabliert. Zu der Zeit waren in Deutschland Communities noch kein Thema und die Anzahl der Chat-Räume überschaubar. Aus dieser Situation wurde ich – damals als freier Berater – gebeten, Produkte beziehungsweise Plattformen zu gestalten, die sich deutlich differenzieren und innovativ sein sollten. Langfristig sollten diese Projekte zum Agenturumsatz beitragen, kurzfristig als Referenzprojekte für potenzielle Kunden und als Testplattformen für die Agentur selbst dienen. Gleichzeitig sollten sie das Potenzial des Internets und die Leistungen und die Kreativität der Agentur widerspiegeln. Was waren die strategischen Ziele und welche Lösungsansätze wurden hierzu entwickelt? Das Konzept wurde nach einem Briefing sehr selbstständig erarbeitet. Der Ansatz bestand darin, die Chat-Plattform aus multimedia.de 276

Praxisbeispiele

herauszutrennen und auf eine neue Plattform – Metropolis.de – mit weiteren Funktionalitäten und einer anderen Wahrnehmung zu stellen. Multimedia.de sollte eine klar differenzierte Plattform für Multimedia-Profis und Interessierte werden. Auf Metropolis wurden dem Chat neben Foren auch erste redaktionelle Elemente beigefügt. Parallel zu diesen Entwicklungen entstand eine dritte Plattform – www.webchat.de – , die als Chat-Portal der zukünftigen Entwicklung in diesem Markt Rechnung tragen sollte. Was ist das zentrale Leitmotiv (die MainIdea) Ihres Konzepts? Das Internet sollte für jeden zugänglich gemacht werden. Die technischen Voraussetzungen wurden so konzipiert, dass die einzelnen Anwendungen einfach zu handhaben sind und nicht voraussetzen, dass der Nutzer sich ständig den neuesten Rechner zulegen muss, um in Metropolis aktiv zu werden. Kommunikation, Kreativität und Kultur stehen auf Metropolis im Vordergrund. Der Nutzer soll genügend Möglichkeiten haben, sich selbst darzustellen, zu kommunizieren, kreativ zu sein und sich inspirieren zu lassen. Mit

왖 Abbildung 1 Die Metropolis-Homepage 1997: Das Design lehnt sich an den Konstruktivismus der 20er Jahre an.

왖

Metropolis wurde die Infrastruktur zur Verfügung gestellt; die User füllen diese mit Leben und entwickeln eine Eigendynamik. Wie wurde die Idee auf der Website umgesetzt? Damals herrschte so etwas wie Aufbruchstimmung im Internet. Vergleichbar war das mit den 20er Jahren, in denen neue Freiheiten entstanden, die sich in Kunst und Architektur im Konstruktivismus ausdrückten. Das Metropolis-Design in der Entstehung lehnte sich an diese Strömung an, und es wurden die verschiedenen Welten in Metropolis – die verschiedene Chat-Räume verkörperten – kreiert. Mit seinem »Comicbuch-sozialistischen Realismus«, wie der Designer seinen eigenen Stil beschreibt, unterschied sich Metropolis gewaltig vom Design anderer Websites und unterstrich damit die Kreativität und den künstlerischen Anspruch. Die Kunst nahm schon von Anfang an einen eigenen Raum auf Metropolis ein, in dem junge Künstler sich und ihre Werke vorstellen können.

Die Kommunikation ist jedoch das Herzstück von Metropolis. In den verschiedenen Chat-Kanälen »Jetztwelt«, »Innerwelt«, »Ausserwelt« und »Kunstwelt« bildete sich von Beginn an eine eingeschworene Gemeinschaft, von denen jetzt noch etwa 1 000 Stamm-Chatter auf Metropolis aktiv sind. Seit dieser Zeit besteht für die Nutzer auch die Möglichkeit, sich ihre eigene Homepage zu erstellen und hochzuladen. Nach und nach kamen mit neuen Chats, Foren, E-Mails oder elektronischen Postkarten immer mehr interaktive Möglichkeiten hinzu, die auch jetzt noch ständig erweitert werden.

Abbildung 2 Die Chat-Räume 1997: Die meisten Konfigurationsmöglichkeiten gab es bereits zu diesem Zeitpunkt.

Empfehlungen zur Online-Community von Marcel Heyne 1. Der Mensch steht im Mittelpunkt. 2. Gut Ding will Weile haben. 3. Weniger Werbung ist manchmal mehr. 4. Flexibilität ist im Umgang mit einem Projekt angesagt, welches Menschen verbindet. 5. Don’t Follow Leaders.

Online-Community

277

278

왖

Abbildung 3 Der Relaunch der Homepage 2001 gab der Seite mehr Magazin-Charakter.

왖 Abbildung 4 Ein Chat-Raum der Metropolis-Community

Was sind die inhaltlichen oder funktionalen Highlights der Website? Die Metropolis-Chat-Technologie entstand in Eigenentwicklung und gehört in Bezug auf Leistungsfähigkeit und Funktionalität zu den führenden Technologien. Alle Community-Elemente sind miteinander verknüpft, so dass man zwischen den Inhalten der User »surfen« kann. Beispielsweise kann ich bei einem User, der mich interessiert, nachvollziehen, ob er eine Webcam hat, was er ins Tagebuch geschrieben hat, wie die Adresse seiner Homepage oder seine E-Mail-Adresse lautet. Vorausgesetzt, dieser User gibt das öffentlich bekannt, was kein Muss ist. Insgesamt gibt es ein breites Portfolio an Möglichkeiten zur Kommunikation, das hervorragend aufeinander abgestimmt ist.

Inhaltliche Highlights sind der MetropolisKunstbanner-Wettbewerb, der einmal im Jahr ausgeschrieben wird und schon im zweiten Jahr seines Bestehens internationale Aufmerksamkeit erzielte sowie der Metropolis-»Tower of Power«. Dieses Projekt entstand in Zusammenarbeit mit dem Multimedia-Künstler Hermann Josef Hack und stellt ein virtuelles Hochhaus über dem Berliner Reichstag dar, in dem jeder ein Zimmer beziehen, seine Meinung äußern und in Kontakt mit den Politikern treten kann. Gab es kritische Faktoren bei der Umsetzung des Konzepts? Da Metropolis ein »Spin off«-Projekt einer Agentur war, lief es auch nur nebenher. Das heißt es gab wenig personelle Ressourcen, die dafür eingesetzt werden konnten, kein Marketingbudget, um Metropolis bekannt zu machen, und es war eine lange Vorfinanzierung notwendig. Hinzu kam das Risiko durch neue Marktteilnehmer.

Praxisbeispiele

Abbildung 5 Im »Tower of Power« können Mitglieder ein virtuelles Zimmer über dem Reichstag beziehen. 왗

Wie verlief der Prozess der Konzeptentwicklung und was waren die wichtigsten Stationen? Dieser Prozess lief sehr unorthodox und kreativ ab. Resultate aus dem »stillen Kämmerlein« wurden in der Aufbruchstimmung von 1996 mit weniger Kopf- und Bauchschmerzen umgesetzt, als dies heute der Fall wäre. Da die Projektentwicklung langfristig ausgelegt war, ging es zunächst darum, einfach zu beginnen. Strukturen und Ansätze wurden bezüglich des Projekts stets so gefasst, dass spätere Entwicklungen möglichst nahtlos darin aufgehen konnten. Dieses Vorgehen macht natürlich eine intensivere Auseinandersetzung mit zukünftigen Szenarien notwendig – und kann natürlich nicht immer sämtliche Entwicklungen vorwegnehmen. Durch das »offene« Herangehen ließen sich jedoch zahlreiche zukünftige Modifikationen einfacher bewerkstelligen.

Welche Teammitglieder haben an dem Konzept mitgewirkt und wie war die Aufgabenverteilung? Das Konzept wurde extern von mir in Absprache mit Alexander Hafemann, damals Geschäftsführer der 21TORR AG, entwickelt. Für die technische Umsetzung und das Design waren Christoph Lemm, Mike Bretz und Robert Stoklossa – alle zu der Zeit Mitarbeiter der 21TORR AG – verantwortlich. Welches Konzeptformat hat sich aus Ihrer Sicht für dieses Projekt bewährt? Das Ganze geschah anfangs in sehr unstrukturierter Form. Da es sich um ein kleines Team handelte und die ersten Schritte auch nicht sonderlich komplex waren, hat sich der Weg des direkten Gesprächs bewährt. Heute, da das Gesamtprojekt an sich deutlich komplexer geworden ist, existieren Listen mit zu realisierenden Projekten. Diese werden nach Priorität und Aufwand sortiert. Dazu wird für jedes Projekt anhand der Anforderungen in etwa der entsprechende Zeitaufwand zur Realisierung

Online-Community

279

erfasst. Synergie-Effekte innerhalb der Projekte werden bei der Einstufung der Projekte berücksichtigt. Wie geht es mit der Website weiter? Was sind die nächsten konzeptionellen Schritte? Heute ist Metropolis eine profitable General Interest Community, die dieses Know-how und die Technologie als ASP-Lösung zur Verfügung stellt. Metropolis öffnet sich auch externen Kooperationspartnern und Technologien wie SMS-Versand, um das Angebot an Community-Elementen noch vielfältiger werden zu lassen. Mit immer neuen Features, z.B. »Sexy

Metropolis AG Das Projekt Metropolis wurde Mitte 1996 ins Leben gerufen und entwickelte sich zur größten deutschen Online-Community mit über einer Million Mitgliedern. Diese finden ein breites Portfolio an Community-Dienstleistungen wie etwa Chats, Foren, Homepages, E-Mails und E-Shopping vor. Aus dem Projekt ist 1999 die Metropolis AG entstanden; beteiligt sind die 21TORR AG und die United Internet AG. 280

Praxisbeispiele

Bürger«, Kontaktanzeigen oder Clubs, die die User selbst gründen können, wird die Community belebt. Das Design und die Strukturen auf Metropolis haben sich zwischenzeitlich verändert; es bleiben aber konstruktivistische Elemente aus den Anfängen erhalten. Wie würden Sie das Projekt aktuell bewerten? Was sind aus Ihrer Sicht bislang die größten Erfolge der Website? Der größte Erfolg ist, dass Metropolis fast ohne Marketingbudget zur größten General Interest Community im deutschsprachigen Raum geworden ist und die Profitabilität erreicht hat.

Die Metropolis-Technologie kann extern eingesetzt werden. Sie läuft, individuell an jeweilige Bedürfnisse angepasst, als ASP-Lösung auf den Rechnern der Metropolis AG. Daneben bietet Metropolis das Know-how und die Erfahrung aus fünf Jahren Community-Aufbau und -Pflege.

Intranet/E-Learning eCulture, AGI GmbH Ein Intranet hat die Aufgabe, unternehmensinterne Prozesse zu optimieren und den Wissensaustausch zu unterstützen. AGI bekam von der HypoVereinsbank den Auftrag, alle Mitarbeiter zur aktiven Online-Nutzung zu mobilisieren. Von Christian Schwarm (Geschäftsführer und Kreativchef) erfahren wir, wie das ambitionierte Projekt umgesetzt wurde.

Wie war die Ausgangssituation des Projekts und was war Ihre konkrete Aufgabenstellung? Die HypoVereinsbank kam mit einem sehr freien und klaren Briefing auf uns zu: Die Aufgabe hieß: »Wie schaffen wir es in kürzester Zeit, 26 000 Mitarbeiter der HypoVereinsbank AG zu ambitionierten Online-Anwendern zu machen?« Es stand zudem fest, dass das Ganze über das Intranet gelöst werden sollte, nicht über aufwändige und zeitintensive Seminare und Schulungen. Das Intranet war in puncto »Time and Budget« die ideale Plattform. Auch den Titel eCulture hatte die Bank bereits festgelegt. Das waren die Vorgaben. In Gesprächen mit der HypoVereinsbank haben wir schnell festgestellt, dass ein Teil der Mitarbeiter bereits professionell mit dem Medium Internet umging, dass sich aber zahlreiche Mitarbeiter an das Medium nicht recht herantrauten. Die Frage für uns war deshalb: »Wie kommen wir über diese Hemmschwelle?«

282

Praxisbeispiele

Was waren die strategischen Ziele und welche Lösungsansätze wurden hierzu entwickelt? Unter anderem war es ein wichtiges strategisches Ziel für die HypoVereinsbank, die Anzahl der Mitarbeiter, die Online-Banking betreiben, signifikant zu erhöhen. Einmal spart dies natürlich Kosten – die Mitarbeiter haben ihr eigenes Gehaltskonto ja bei der HypoVereinsbank. Aber vor allem sind auch nur Bankmitarbeiter, die selbst mit dem Online-Banking vertraut sind, gute Multiplikatoren, sprich: der Filialangestellte im direkten Kundenkontakt, aber auch der Angestellte aus der Zentrale im Bekannten- und Kollegenkreis. Hier war eine ganz konkrete Maßgabe: Wir sollten es schaffen, über eCulture die Quote der Bankmitarbeiter, die Online-Banking nutzen, innerhalb von zwölf Monaten auf über 80 Prozent zu erhöhen. Diese Zahl haben wir dann bereits nach wenigen Monaten erreicht.

Abbildung 1 Die Homepage von eCulture: Emotion ist gleichwertig mit den eigentlichen Lerninhalten. 왗

Nach dem ersten Briefing gab es bei uns eine Klausurphase. Wir haben uns die kreativen Grundideen überlegt. Gestaltung und Technik folgen im zweiten Schritt, zuerst geht es bei AGI immer um die Strategie und die Ideen, aus denen sich das Konzept zusammensetzt. Nach dieser ersten Strategie- und Konzeptphase haben wir unsere Vorstellungen präsentiert – und damit bei der Bank gleich ins Schwarze getroffen, somit recht schnell das Go bekommen. Hier muss ich der HypoVereinsbank auch ein großes Lob aussprechen für den Mut, den sie bewiesen hat, sich auf die Ideen und auch die vorgeschlagene – bankenunübliche – Tonalität einzulassen. Was ist das zentrale Leitmotiv (die MainIdea) Ihres Konzepts? Das Leitmotiv bei eCulture ist, die Mitarbeiter an die Hand zu nehmen – und dies nicht nur funktional, sondern auch emotional. Den Mitarbeitern sollte ein »freundlicher Begleiter« auf ihrem Weg ins Internet an die Seite gestellt werden, der ihre Bedenken, Ängste und Hoffnungen versteht, der sie Schritt für Schritt

im eigenen Tempo ins Internet begleitet. Emotion war dabei gleichwertig mit den eigentlichen Lerninhalten. Daran kranken übrigens viele Lernprogramme, wie wir auf unseren Recherchen entdeckt haben. Teilweise entwickeln zwar hochkarätige Pädagogen die Lernprogramme, die aber dann doch oft unglaublich öde und staubtrocken sind – ohne jegliche Emotion, ohne die interaktiven Möglichkeiten zu nutzen, die das Medium bietet. Wie wurde die Idee auf der Website umgesetzt? Das gesamte Programm ist dreigeteilt in die Bereiche »Lernen« – »Lächeln« – »Leben«: Im Lernen-Sektor sind die fünf Kurse angesiedelt: eBasics, eBanking, eMailing, eShopping und eSecurity. Per interaktivem Test überprüft der User jeweils seine erworbenen Kenntnisse auf spielerische Weise; und das im eigenen Tempo. Zweitens »Lächeln« als der Bereich, in dem es die Zertifikate – ein zusätzliches Motivationsinstrument für die bestandenen Tests – und ein Gewinnspiel gibt. Drittens der Bereich, in dem man sich – wie mit dem Frei-

Intranet/E-Learning

283

284

왖

Abbildung 2 Im »Lernen«-Sektor werden die Bankmitarbeiter in die Grundlagen des eBanking eingeführt.

왖 Abbildung 3 Im »Lächeln«-Bereich werden Lernerfolge mit Zertifikaten und Gewinnspielen belohnt.

schwimmer ausgestattet – in die Web-Welt hineinbewegt: Eine interaktive Online-Umfrage, stets aktuelle Nachrichten, »Drinnentipps« mit bankinternen News und »Draußentipps« fürs Web sind z.B. einige der Inhalte. Jede Seite im gesamten Programm umfasst dabei eine Meta- und eine Demo-Ebene: Mit den lebensnahen Fotostories der Metaebene kann sich der Anwender identifizieren; so ist der Bezug der virtuellen Welt zum realen Leben immer präsent. Auf der Demo-Ebene befindet sich der eigentliche Trainingsblock. Statt starrer Schulungsseiten bietet das Programm hier interaktive Flash-Movies. Was sind die inhaltlichen oder funktionalen Highlights der Website? Eine echte Gratwanderung bei einem solchen Lernprogramm stellen die Tests dar. Man darf nicht zu schulisch und formal werden, der User soll aber natürlich auch nicht den Eindruck bekommen, es mit einem beliebigen Test zu tun zu haben, wie er in manchen Zeitschriften zu finden ist. Gerade bei den Tests haben wir großen Wert darauf gelegt, das rich-

tige Verhältnis zwischen Unterhaltung und Abprüfen der gelernten Inhalte zu ermitteln. Ein Höhepunkt war auch die Einführung der Kampagne eCulture. Wir haben gemeinsam mit der HypoVereinsbank eine TeaserKampagne gefahren, z.B. über einen von uns produzierten TV-Teaser im Unternehmensfernsehen; oder rein typografisch gearbeitete Teaser wie: »Hat mein Computer schon immer gewusst, was eCulture ist? Ätsch, jetzt weiß ich’s auch.« Damit haben wir zu Beginn erst einmal den Begriff eCulture propagiert. Diese Kampagne hat sicher ganz entscheidend zur Mobilisierung der Mitarbeiter beigetragen, als es dann richtig losging mit eCulture. Wir hatten wahnsinnige Zugriffe schon in den ersten Tagen und Wochen und auch sehr bald die ersten Zertifizierungen. Bereits nach dem ersten Tag hatten 975 Mitarbeiter das komplette Programm erfolgreich absolviert, nach dem zweiten Tag waren es bereits über 2 000. Nach rund fünf Monaten hatten 12 100 Mitarbeiter ihr Online-Zertifikat. Das eigentliche Highlight ist es also, wie erfolgreich das gesteckte Ziel

Praxisbeispiele

Abbildung 5 Die Online-Tests vermitteln ein ausgewogenes Verhältnis von Unterhaltung und Wissensprüfung.

왖 Abbildung 4 Der »Leben«-Bereich bietet unternehmensinterne »Drinnentipps« und »Draußentipps« fürs Web.

왖

erreicht wurde – erreicht durch das Zusammenspiel aller Komponenten, Konzept, Grafik, Technik, Text. Letzteres übrigens ein Element, das häufig vernachlässigt wird, und dem AGI immer große Bedeutung beimisst. Gab es kritische Faktoren bei der Umsetzung des Konzepts? Wir sind es als Multimedia-Agentur natürlich gewohnt, dass es bei Projekten kritische Situationen gibt. Das kann vielerlei Gründe haben, auch unterschiedliche Meinungen in kreativer Hinsicht. Aber im Fall eCulture war die Zusammenarbeit nahezu perfekt. Kunde und Agentur haben hundertprozentig an einem Strang gezogen. Und dazu kommt, dass wir auf Kunden- und Agenturseite mit einem kleinen Entscheiderteam arbeiten konnten. Was ganz besonders wichtig war für die reibungslose Umsetzung des Konzepts.

Wie verlief der Prozess der Konzeptentwicklung und was waren die wichtigsten Stationen? Nach der ersten Briefing-Veranstaltung sind wir zwei Wochen in Klausur gegangen. Während dieser Zeit fanden mehrere KonzeptMeetings statt, in denen wir uns aus ganz verschiedenen Perspektiven dem Thema genähert haben. Wir haben uns mit der Marke HypoVereinsbank und den Werten dahinter sehr ausführlich beschäftigt. Ein anderes Thema war der Bereich »Lernen, Webbased Training«. Dann haben wir uns mit den Emotionen von Menschen beschäftigt, die sich zwar für das Internet interessieren, aber noch keine Nutzer sind – den Einstieg also noch nicht hinter sich haben. Und aus diesen Meetings heraus haben wir die verschiedenen Stränge vereint, die zu der runden Lösung führten. Wichtig ist, dass wir sehr grundsätzlich am Anfang eines solchen Konzepts arbeiten und uns keinerlei Einschränkungen auferlegen.

Intranet/E-Learning

285

Dann kommt die Konzeptpräsentation. Danach steigen wir ein in die Entwicklung des Feinkonzepts. Das Feinkonzept ist auch eine Art Produktionskonzept, in dem die komplette Struktur, die kompletten Inhalte, die gestalterischen Grundlinien, die textliche Tonalität, die technische Struktur und auch der gesamte Umfang des Projekts festgelegt werden. Für die Erarbeitung des Feinkonzepts benötigen wir in einem Fall wie eCulture vier Wochen. In dieser Phase findet auch eine permanente Abstimmung mit dem Kunden statt; in allen Disziplinen präsentieren wir durchschnittlich halbwöchentlich unsere Vorschläge. So können wir hier auch nicht Gefahr laufen, uns in Einzelpunkten vom Kunden wegzubewegen. Nach Abnahme des gesamten Feinkonzepts steht »nur noch« die Produktion an. Dann ist auch der Abstimmungsaufwand mit dem Kunden wieder geringer, wenn man das Feinkonzept wirklich entsprechend ausgefeilt hat. Welche Teammitglieder haben an dem Konzept mitgewirkt und wie war die Aufgabenverteilung? Während der ersten Phase, dem Grobkonzept, dominieren die Strategen und Konzepter. Unsere besten Berater und Kreativen also. Wir arbeiten dabei immer in interdisziplinären

Teams, sowohl im Konzept als auch später in der Produktion. Diese Teams sitzen außerdem räumlich zusammen. Das ist ein Prinzip bei AGI, mit dem wir sehr gute Erfahrungen gemacht haben. Im Feinkonzept wirken dann alle mit, Kreation, Technik, Projektleitung mit allen Subdisziplinen. In dieser zweiten Phase übernehmen die Projektleiter die Regie. Sie stehen auch in der Verantwortung dafür, dass die kreativen und strategischen Ideen aus der ersten Phase »überleben«. Wir haben bei AGI nicht nur die »in Time«- und »in Budget«-Vorgabe. Bei uns gilt auch die Regel »in Strategy« und »in Concept« – ein Garant für außergewöhnliche und wegweisende Lösungen. Welches Konzeptformat hat sich aus Ihrer Sicht für dieses Projekt bewährt? Spricht man von Konzeptformaten, wird oft die erste Stufe der Konzeptentwicklung außer Acht gelassen. Diese erste Stufe läuft immer gleich ab bei AGI: Ganz grundsätzlich über das Unternehmen und die Marke nachdenken, das Internet erst mal beiseite lassen, überlegen, welche Ziele wir erreichen wollen. Uns ist bewusst, dass das Internet das Transportmedium sein wird. Aber in der ersten Phase setzen wir überhaupt kein Konzeptformat ein. Erst wenn wir die strategische und kreative Grundidee

Christian Schwarm empfiehlt für die Konzeption eines Intranets im Intranet vieler Unternehmen nichts zu 1. Sorgen Sie für ein spannendes Intranet! Das spüren. Gefährlich. Motivationspotenzial eines lebendigen Intra4. Unterschätzen Sie das Intranet nicht! Das nets ist enorm. Intranet ist mit Abstand das schnellste, kos2. Bieten Sie mehr als nur ein ödes Nachschlatengünstigste, interaktivste und deshalb gewerk. Seien Sie aktuell und sprechen Sie auch das mobilisierendste Medium in der die Menschen an – nicht ihre Rechner. Mitarbeiterkommunikation. Handeln Sie 3. Ihr Intranet sollte zur Marke passen! Der entsprechend. Schuster hat die schlechtesten Schuhe, heißt es. Ebenso ist vom Geist der Marke 286

Praxisbeispiele

gefunden haben, kommen diese Instrumente zum Einsatz. Also erst in der Feinkonzeptphase. Dann arbeiten wir mit verschiedenen Formaten. In der Gestaltung verwenden wir unter anderem Screen-Layouts. In der Technik werden Flowcharts und Funktionsdiagramme benutzt. Das läuft parallel, und anders lässt es sich auch nicht bewerkstelligen. Aus allen Formaten wird ein Gesamtdokument erstellt, in dem alle Fragen geklärt sind. Wie geht es mit der Website weiter? Was sind die nächsten konzeptionellen Schritte? eCulture wurde seit dem Start laufend betreut und erweitert. Wir planen mit der HypoVereinsbank bereits eine Fortsetzung dieses Forums. Die Bank hat uns bestätigt, dass es bei ihr selten eine solche Mobilisierungswelle wie bei eCulture gegeben hat. Damit konnten wir gemeinsam mit der projektverantwortlichen Abteilung »Kommunikation und Volkswirtschaft« (KVW) unter der Leitung von Anne Gfrerer eine Art Submarke etablieren. Der Erfolg dieses Projekts hat auch dazu geführt, dass im September 2001 eine öffentliche Version des

AGI Think Tank Force Agency AGI verbindet strategische Markenplanung im Internet mit tiefgreifendem technischen Knowhow und außergewöhnlichem kreativen Erfolg. Die Basis für alle Disziplinen – Beratung, Konzeption, Gestaltung, Technik – heißt immer Kreativität, ob es sich um eine Image-Website handelt oder um eine hochkomplexe E-Commerce-Lösung. Den Erfolg belegen zahlreiche Auszeichnungen.

Ganzen online ging. Sie kann unter dem Namen eCampus auf der Website der HypoVereinsbank aufgerufen werden. Wie würden Sie das Projekt aktuell bewerten? Was sind aus Ihrer Sicht bislang die größten Erfolge der Website? Innerhalb von wenigen Monaten haben wir das Projektziel eines Jahres erreicht. Nahezu alle Mitarbeiter sind inzwischen zertifiziert. Im Moment sind wir sehr gespannt auf die Resonanz der öffentlichen Version. Der schönste Erfolg sind aber die vielen hundert FeedbackMails, die bei der Bank eingingen. Das konnte einen teilweise richtig rühren, denn viele Bankmitarbeiter haben von ihren Ängsten geschrieben, die sie zu Beginn noch hatten vor dem Medium Internet. Ängsten, die sie dann mittels eCulture völlig verloren haben – wofür sie sich teils überschwänglich bedankten in ihren Mails. Das hat uns gezeigt, dass wir auch bei den einzelnen Menschen angekommen sind. Wenn auch die vermeintlich »kleinsten«, so sind das doch die bewegendsten Erfolge bei einem solchen Projekt.

120 Mitarbeiter beschäftigt AGI in Stuttgart, Berlin und Hamburg. Auf der Kundenliste stehen neben der HypoVereinsbank Unternehmen wie BauFinanzierung.direkt, Payback, Topdeq, DaimlerChrysler und Manhattan Cosmetics, der Fotograf Dietmar Henneka oder die Wirtschaftsförderung Region Stuttgart.

Intranet/E-Learning

287

Glossar Häufig verwendete Begriffe der Konzeption Gerade in der Konzeption sind – wie auch die Funktionsbezeichnung an sich – viele Begriffe unklar und vieldeutig interpretierbar. Hinzu kommt, dass man sich mit jedem neuen Projekt ein fast schon teamspezifisches Eigenvokabular aneignet. Hier finden Sie häufig verwendete oder zentrale Begriffe dieses Buches zum Nachschlagen.

A Ablaufdiagramm Ein Ablaufdiagramm beschreibt in abstrahierter Form einen Interaktionsprozess zwischen dem Nutzer einer Website und dem System, das im Hintergrund reagiert. Der Begriff steht übergreifend für Bezeichnungen wie FlowDiagramm, Flowchart oder Sequenzdiagramm. Agenda Der Begriff Agenda ist die englische Übersetzung für Tagesordnung. Eine Agenda definiert z.B. den thematischen und zeitlichen Ablauf eines Workshops. Anforderungsspezifikation Eine Anforderungsspezifikation beschreibt alle technischen, inhaltlichen, visuellen und organisatorischen Anforderungen an ein Projekt, die in einer vorherigen Analyse ermittelt wurden. Der Begriff wird übergreifend verwendet und kann in spezifizierende oder analoge Bezeichnungen übersetzt werden, wie z.B. SRS (Software Requirement Specification).

288

Glossar

Asset Als Assets werden die inhaltlichen Bausteine bezeichnet, die aus externer Quelle in eine Website integriert werden sollen, wie z.B. Bilder (Grafiken, Fotos), Texte, Videos und Sounds. Vorbereitend und begleitend zur Konzeption werden die benötigten Assets in einer Asset-Liste dokumentiert. Die Liste gibt an, wann was von wem geliefert oder produziert werden muss.

B Bedarfsanalyse In der Bedarfsanalyse werden die Anforderungen der verschiedensten Nutzer einer Website ermittelt. Als Nutzer sind dabei nicht nur die eigentlichen Zielgruppen zu betrachten, sondern beispielsweise auch die Redakteure auf Kundenseite, die für die regelmäßige Pflege verantwortlich sind.

Benchmark Mit einem Benchmark werden wegweisende Vorbilder oder Konkurrenten analysiert und bewertet. Bei der Website-Konzeption richtet man seinen Blick auf Internet-Auftritte direkter Konkurrenten, im Markt gleichwertig positionierter Unternehmen oder auf Vorbilder, die einen ähnlichen konzeptionellen oder gestalterischen Auftrag haben. Benutzerführung Alternativ zur Navigation wird in der Konzeption gerne der Begriff Benutzerführung verwendet, da er auch die Perspektive der Nutzer mit berücksichtigt. Anhand der Benutzerführung wird beschrieben, wie und mit welcher Navigationsform die Nutzer durch die Website geführt werden. Beta-Version Die Beta-Version ist die erste komplett zusammengestellte Website zum Test für den Kunden, die schon einige interne Test- und Korrekturläufe hinter sich hat. Brainstorming Ein Brainstorming dient der Sammlung von Ideen. Es lässt der Kreation im Kopf freien Lauf und rekrutiert in einer lockeren Diskussionsrunde alle Einfälle, die den Beteiligten in den Sinn kommen. Briefing Ein Briefing beschreibt die Aufgabenstellung für ein Projekt aus Kundensicht. Es ist sozusagen der inhaltliche Auftrag mit allen Rahmenbedingungen und Wünschen.

C Change Request Der Begriff Change Request bedeutet übersetzt Änderungswunsch. Im Projektgeschäft sind damit Anfragen des Kunden gemeint, die eine Änderung schon abgestimmter Vereinbarungen bezüglich Konzeption, Technik, Design oder Projektverlauf vorsehen. Ein Change Request ist in der Regel mit einer Nachkalkulation verbunden. Community Der Begriff Community ist die englische Übersetzung für Gemeinschaft. Ziel einer Community-Site ist, Menschen mit gemeinsamen Interessen zu einer aktiven Kommunikationsgemeinschaft werden zu lassen. Consulting Consulting heißt Beratung. In der Regel wird darunter die klassische Unternehmensberatung verstanden, die sich bei einer Website-Entwicklung auf die Integration der Online-Aktivitäten in die Unternehmensprozesse bezieht. Container Der Begriff Container bezeichnet die Zusammenfassung inhaltlicher und funktionaler Module – wie z.B. Teaser oder Sucheingaben – zu einer auf der Website mehrfach verwendeten Einheit. Er wird bei der Konzeption von dynamisch generierten Websites verwendet. Content Als englisches Synonym für Inhalt hat sich in der New-Media-Branche der Begriff Content etabliert.

Glossar

289

Content-Handling Unter diesem Begriff werden alle Tätigkeiten zusammengefasst, die bei der Produktion von Website-Inhalten anfallen: Das sind in der Regel die Organisation, Dokumentation, Codierung, Verwaltung und Ablage der Inhalte.

Demo-Player Ein Demo-Player demonstriert in linear animierter oder interaktiver Form einen ersten exemplarischen Eindruck von einer Website. Er zeigt den visuellen und konzeptionellen Ansatz sowie das Prinzip der Benutzerführung.

Content-Inszenierung Das inhaltliche Konzept beschreibt unter anderem, in welcher Form Contents, das heißt Inhalte, inszeniert werden. Unter Content-Inszenierung wird die differenzierte Darstellung von Inhalten verstanden, z.B. in welcher Form sie multimedial beziehungsweise interaktiv aufbereitet werden oder wie Texte strukturell aufgebaut sind.

Dynamische Website Eine dynamische Website generiert ihre Inhalte mit jedem Seitenabruf aus einer Datenbank. Inhalte, Navigationselemente und Seitengestaltung werden dabei getrennt voneinander abgelegt. Die Inhalte können über eine redaktionelle Schnittstelle aktualisiert werden, ohne dass der Redakteur Programmierkenntnisse besitzen muss.

Content-Management-System Mit einem Content-Management-System werden dynamische Websites erstellt und gepflegt, deren Bestandteile in einer Datenbank abgelegt sind. Es kann sowohl Entwicklungsumgebung als auch Redaktionssystem sein. Creative Brief Das Creative Brief fasst auf einer Textseite die Ziele, Positionierung und Strategie einer Website zusammen. Es ist die Ausgangsbasis der Ideenentwicklung und sollte entsprechend inspirierend formuliert sein.

E Erfolgskriterien Über Erfolgskriterien oder -faktoren wird definiert, wann die Ziele einer Website erreicht wurden. Liegt das Ziel einer Website z.B. darin, neue Kunden zu gewinnen, kann der Erfolgsfaktor die Anzahl der Neuregistrierungen festlegen, die zu einem bestimmten Zeitpunkt erreicht sein soll.

F D Datenattribute Datenbankinhalten werden über Attribute Eigenschaften zugeordnet, die dem Nutzer als Zugangskriterien in Suchfunktionen oder Verzeichnissen dienen.

290

Glossar

Feinkonzept Das Feinkonzept beschreibt in detaillierter Form alle Bestandteile einer Website und dient damit als Produktionsvorlage für Design und Technik. Es wird auch Anwendungskonzept, Storyboard oder Screenbook genannt.

Flowchart Der Begriff Flowchart wird synonym zur Bezeichnung Flow-Diagramm verwendet. Ein Flowchart visualisiert einen Prozess- oder Animationsverlauf und zeigt die Abhängigkeiten zwischen den einzelnen Ablaufschritten. Flow-Diagramm siehe Flowchart Funktionsskizze Eine Funktionsskizze visualisiert alle Bestandteile eines Screens oder inhaltlichen bzw. funktionalen Moduls für einen definierten Zustand durch eine schematische Skizze, ohne ein Layout vorzugeben. Sie wird ergänzt durch eine Elementliste, in der alle Bestandteile noch einmal aufgeführt und beschrieben werden.

G Grobkonzept Ein Grobkonzept beschreibt den konzeptionellen Ansatz für eine Website – abgeleitet von der Strategie und MainIdea – und definiert den Funktionsumfang, ohne ins Detail zu gehen. Das Grobkonzept wird auch Basiskonzept genannt.

I

K Kick-off-Workshop Ein Kick-off-Termin gibt den Anstoß für ein Projekt. Es ist in der Regel der erste interne Arbeitstermin oder der erste Workshop mit dem Kunden, bei dem Ziele und Anforderungen besprochen und die Basis zur Ideenentwicklung gelegt werden. Kreativitätstechnik Als Kreativitätstechnik werden Methoden zur Ideenfindung bezeichnet. Sie dienen der Freisetzung von Ideen und der systematischen Suche kreativer Ansätze. Zu den Techniken gehören z.B. das Brainstorming, Brainwriting, Mindmapping und die Methode 635.

L Launch Als Launch wird die erste Live-Schaltung einer Website bezeichnet, die unter einer neuen URL eröffnet wurde. Ein Relaunch meint den Online-Start einer überarbeiteten Website. Look & Feel Das Look & Feel beschreibt die visuelle und inhaltliche Anmutung einer Website. Mit unterschiedlichen Ausprägungen des Look & Feel lassen sich unterschiedliche Wirkungen beim Nutzer erzielen.

Inhaltsdramaturgie Die Inhaltsdramaturgie bezeichnet den konzeptionellen Rahmen, der die Anordnung und das Zusammenspiel von Inhalts- oder Funktionsbereichen definiert. Hieraus ergibt sich der Site-Aufbau und die Inszenierung einzelner Inhalte innerhalb dieses Rahmens.

Glossar

291

M MainIdea Als MainIdea wird das zentrale Leitmotiv einer Website bezeichnet, das der Website ein unverwechselbares Profil verleiht. Als kreative Ableitung aus der Strategie bildet die MainIdea die Grundlage für das Look & Feel, die Navigation und die Inszenierung der Inhalte. Mass Customization Der Begriff Mass Customization steht für das Prinzip der kundenindividuellen Massenproduktion. Der Konsument erhält Konfigurationsmöglichkeiten zur Anpassung von Massenprodukten an seine persönlichen Bedürfnisse. Mehrwert Als Mehrwert wird der Zusatznutzen bezeichnet, den eine Website über den allgemeinen Anspruch hinaus liefern soll. Der Mehrwert eines Online-Buch-Shops könnte z.B. eine Bewertungsfunktion sein, über die man seine Meinung zu den einzelnen Produkten öffentlich machen kann. Ein Mehrwert wird nur eingelöst, wenn er die Bedürfnisse der anvisierten Nutzer anspricht. Metafunktionen Metafunktionen sind übergeordnete Funktionen einer Website, die unabhängig von der inhaltlichen Hierarchie positioniert werden. Dazu gehören z.B. die zentrale Such- oder die Kontaktfunktion.

292

Glossar

Meta-Tags Als Meta-Tags werden Schlüsselwörter bezeichnet, die ergänzend zum HTML-Code den einzelnen Seiten einer Website zugeordnet werden und über Suchmaschinen identifiziert werden können. Microsite Als Microsite gilt eine auf einen Kampagnenzweck orientierte Website geringen Umfangs, die zeitlich begrenzt online geschaltet wird. Häufig wird sie über Banner beworben oder als Satellit mit der eigentlichen Website verlinkt und verfügt über keine eigene URL. Modul Als Module werden inhaltliche oder funktionale Einheiten bezeichnet, die z.B. auf einer dynamischen Website mehrfach verwendet werden sollen. Ein Modul kann z.B. der Teaser für einen Artikel sein, der sich aus einer Headline, einem kurzen Anleser und dem Link zur Vollversion zusammensetzt. Motion Script Ein Motion Script beschreibt den Verlauf einer Bewegtbildsequenz auf einer Zeitschiene. Multi-Channel Multi-Channel meint die Verbreitung von Inhalten auf vielen Kanälen. Bei einer MultiChannel-Website werden die Inhalte nicht nur für die Darstellung auf dem Heimcomputer, sondern beispielsweise auch für mobile Endgeräte aufbereitet.

N

O

Navigation Der Begriff Navigation steht synonym für Benutzerführung. Für jede Website wird ein Navigationsprinzip entwickelt, das den Weg zu den und durch die Inhalte und Prozesse festlegt.

Online-Strategie In der Online-Strategie wird der Weg beschrieben, auf dem die vorher definierten Ziele eines Online-Projekts erreicht werden sollen. Die Strategie definiert Zielgruppen, Projektvision und -positionierung, Alleinstellungsmerkmale, Nutzendimensionen und Erfolgskriterien.

Nutzendimensionen Mit der Analyse der Nutzendimensionen werden alle Motive erfasst, die aus Sicht der Nutzer für den Besuch der Website relevant sein können. Das kann z.B. ein gezieltes Informationsbedürfnis oder die Suche nach Ablenkung und Unterhaltung sein. Nutzer Als Nutzer wird der spätere Besucher eine Website bezeichnet, der sich aktiv oder interaktiv durch das Angebot bewegt. Für den Begriff Nutzer wird häufig auch die englische Übersetzung User verwendet. Nutzer-Szenario Ein Nutzer-Szenario beschreibt einen möglichen Nutzungsverlauf einer Website aus Sicht eines potenziellen Nutzers. Es beginnt mit dem Motiv und leitet daraus die optimalen Schritte bis zum gewünschten Ergebnis ab.

P Personalisierung Mit Personalisierung ist die Anpassung der Website an individuelle Bedürfnisse gemeint. Voraussetzung ist, dass sich der Nutzer registriert hat. Aus dem persönlichen Profil und Verhalten werden die individuell relevanten Inhalte erkannt und bevorzugt angeboten. Place-Case Ein Place-Case zeigt in einer schematischen Skizze den Screen-Aufbau mit seinen grundlegenden Elementen. Plattform Für den Begriff Plattform gibt es keine eindeutige Definition. Einerseits wird er als Überbegriff für die Ausgabegeräte verwendet, auf denen internetbasierte Inhalte erscheinen sollen, wie z.B. Heimcomputer, Handy oder öffentliches Terminal. Andererseits werden auch Websites mit einem breiten Informations-, Transaktions- oder Kommunikationsangebot als Plattformen bezeichnet (z.B. Auktionsoder Informationsplattformen).

Glossar

293

Pop-up-Fenster Als Pop-up-Fenster wird ein neu geöffnetes und in seiner Größe definiertes Browser-Fenster bezeichnet, das sich über die aktuell geöffnete Website in den Vordergrund legt. Synonym wird auch der Begriff Satellit verwendet. Positionierung Der Begriff Positionierung wird vielseitig verwendet. Er bezieht sich z.B. auf die Stellung, die ein Unternehmen, Produkt oder eine Website im Konkurrenzumfeld hat oder zukünftig einnehmen soll. Potenzialanalyse Bei einer Potenzialanalyse werden alle Optionen für die strategische Ausrichtung eines Unternehmens oder Online-Projekts nach einer strukturierten Methodik eruiert.

R Rebriefing Ein Rebriefing wird in der Regel von der Agentur erstellt. Es interpretiert und bewertet das Briefing, das heißt die Projektdefinition des Kunden, noch einmal aus Agentursicht und zieht eigene Rückschlüsse. Relaunch Als Relaunch wird der Online-Start einer überarbeiteten Website bezeichnet. Ressource Der Begriff Ressource steht ursprünglich für Rohstoff. Im E-Business werden damit in der Regel personelle Kapazitäten bezeichnet, die für die Entwicklung oder Pflege einer Website zur Verfügung stehen. 294

Glossar

Review Die Bezeichnung Review bedeutet übersetzt Rückblick. In einem Review-Termin wird gemeinsam eine kritische Bewertung des Projektverlaufs und -ergebnisses vorgenommen. Rollenmodell Ein Rollenmodell betrachtet im Unterschied zur Zielgruppensicht die funktionalen Rollen möglicher Nutzer einer Website. Eine Rolle kann z.B. neben dem potenziellen Neukunden eines Online-Shops der Administrator oder der Redakteur einer Website sein.

S Satellit siehe Pop-up-Fenster Seitenraster Das Seitenraster definiert den Seitenaufbau einer Website und damit das Grundlayout für alle untergeordneten Seiten. Sequenzdiagramm Sequenzdiagramme zeigen die Interaktionen zwischen Nutzer und System in einer zeitlichen Abfolge. Der Begriff wird z.B. in UML (Unified Modeling Language) für die Beschreibung potenzieller Abläufe eines definierten Anwendungsfalls (Use-Case) verwendet.

Site-Aufbau Mit der Entwicklung des Site-Aufbaus werden die übergreifenden Inhalts- und Funktionsbereiche einer Website definiert. Es wird z.B. festgelegt, welche übergeordneten Navigationsbereiche es gibt, wo Metafunktionen platziert werden und in welchen Bereichen die Inhalte erscheinen. Der Site-Aufbau ist Teil des BasisLayouts einer Website.

Statische Website Bei einer statischen Website werden die einzelnen Seiten als feste Einheit von Inhalt, Gestaltung und Navigation aufgerufen. Im Gegensatz dazu stehen dynamische Websites, die ihre Inhalte nach Abruf einer Seite aus einer Datenbank ziehen und in der Regel über eine redaktionelle Schnittstelle gepflegt werden können.

Sitemap Eine Sitemap zeigt in Form eines Strukturdiagramms die Screen-Übersicht einer Website mit ihren Verknüpfungen untereinander.

Storyboard Der Begriff Storyboard wird häufig synonym für Feinkonzept verwendet. Ein Storyboard beschreibt durch Skizzen und Erläuterungen den Aufbau der einzelnen Seiten einer Website.

Skalieren Der Begriff Skalieren steht für Erweitern. Eine skalierbare Website sieht vor, auf Basis des definierten Grundgerüsts (technisch, konzeptionell, visuell) um zusätzliche Themen, Inhalte oder Funktionen erweitert werden zu können. SMP Die Abkürzung SMP steht für Single Minded Proposition. Übersetzt bedeutet dieses ein Versprechen, das sich auf einen einzelnen Nutzenaspekt bezieht. Stakeholder Als Stakeholder werden die Anteilseigner einer Website bezeichnet, das heißt alle Personen, die mit dem Betrieb oder als Endnutzer mit der Site zu tun haben werden.

Strategic Brief Ein Strategic Brief erfasst alle Zielvorgaben und Rahmenbedingungen für ein Projekt. Es wird als detailliertes Rebriefing nach Analyse aller Anforderungen und der strategischen Ausrichtung von der Agentur verfasst und dient als Grundlage für die Kreation und inhaltliche Konzeptentwicklung. Strategische Werte Marke, Produkt, Wettbewerb und Zielgruppe werden als die vier strategischen Werte verstanden. Sie dienen bei der Website-Konzeption als Orientierung zur Ableitung einer Online-Strategie aus der bestehenden übergreifenden Marketingstrategie.

Glossar

295

Style Guide Ein Style Guide beschreibt alle Gestaltungsvorgaben für eine Website. Darin wird z.B. festgelegt, welche Schriften und Farben verwendet werden, wie das Navigationsprinzip aufgebaut ist und wie mit Texten und Bildern umgegangen werden soll.

T Teaser Ein Teaser verweist auf einen hervorzuhebenden Inhalt – z.B. durch einen kurzen Text oder eine Animation. Übersetzt könnte man ihn auch als Anreißer bezeichnen. Template Ein Template definiert ein Gestaltungsraster für einen Screen, das mit unterschiedlichen Inhalten gefüllt werden kann. Templates sehen eine Wiederverwertung innerhalb der Website vor und werden für dynamische Sites entwickelt.

U UML UML ist die Abkürzung für »Unified Modeling Language«. Die Sprache wurde als internationaler Standard zur Beschreibung von Software entwickelt. UML definiert die Semantik, mit der Funktionen und Anwendungsfälle (UseCases) einer Website beschrieben werden.

296

Glossar

Usability Der Begriff Usability steht für die Benutzbarkeit einer Website. Eine gute Usability meint, dass eine Website intuitiv bedient werden kann und den Nutzer komfortabel zu den gewünschten Ergebnissen führt. Use-Case Der Begriff Use-Case steht für die deutsche Übersetzung von Anwendungsfall. Ein Anwendungsfall beschreibt die theoretische Benutzung eines Website-Bereichs ausgehend von einem Akteur, einem Ziel und dem potenziellen Weg dorthin. User siehe Nutzer USP Die Abkürzung USP steht für den Begriff »Unique Selling Proposition«. Übersetzt geht es um ein einzigartiges Versprechen, das als Alleinstellungsmerkmal von dem Wettbewerb abgrenzt.

V Vision Die Vision eines Projekts formuliert das maximale Ziel oder die Perspektive einer Website. Sie sollte nicht utopisch sein, denn sie dient als zentrale Orientierung für die strategische Ausrichtung der Site.

W

Z

Web-Tracking Mit einem Web-Tracking wird die Bewegung der Nutzer auf einer Website über Log-Files erfasst. Die Ergebnisse können unter verschiedenen Blickwinkeln ausgewertet werden, z.B. mit der Frage, an welcher Stelle die Website am häufigsten verlassen wird oder an welchen Tagen zu welchen Zeiten am meisten Traffic zu verzeichnen ist.

Ziele Die Ziele einer Website geben den Korridor für die strategische Ausrichtung und das Konzept vor. Als Ziele können Imageverbesserung, Neukundengewinnung, Effizienz- oder Umsatzsteigerung definiert sein. Um die Einlösung der Zielvorgaben später messen zu können, sollten entsprechende Erfolgskriterien definiert werden.

Workshop Ein Workshop ist ein gemeinsamer Arbeitstermin, in dem durch einen moderierten Dialog und strukturiertes Vorgehen die Ziele und Anforderungen für eine Website ermittelt werden sollen.

Zielgruppe Der Begriff der Zielgruppe wurde im klassischen Marketing geprägt. Bei einer Website spricht man verstärkt von Nutzergruppen oder Rollen, die mit der Website erreicht und in ihren Interessen abgeholt werden sollen.

Glossar

297

Index

A Abgrenzung 39 Abnahme 165 Mustertext 167 Abnahmedokument 165 Abnahmegrundlage 111 Adidas 20, 254 AGI GmbH 282 Allianz 130 Amazon 69 Analyseprozess 16 Änderungshistorie 164, 172 Anforderungsspezifikation 56 Animation 181 Animationssequenz 204 Anpassungen konzeptionelle 239 Anwendersituation 126 Anwendungsfall 199 Anwendungskonzept → s. Feinkonzept Archvierungsfunktionen 143 ArtMust GmbH 262 Asset 174 Assetliste 146, 174 Tabelle 146 Auftrag 17 Auftragschancen 17 Checkliste 17 Kunde 17 Auto-Konfigurator 141

B Backoffice 29 Banner 128 Barmer Ersatzkasse 70, 227 BBDO Interactive 109 Bedarfsanalyse 55 Methoden 56

298

Index

Bedarfssituationen 119 Befragung 152 Benchmark 40, 49 Checklisten 51 Faktoren 50 Fragen 49 Ziele 50 Benchmark-Checkliste 52 Dynamik 53 Komfort 54 Nutzen 51 Profil 52 Benefit 31 Benutzbarkeit 148 Benutzerführung 123, 124 Beschreibungsform 184 Bestellfunktionalitäten 139 Beta-Testing 239 Betaversion 240 Bewegtbildverlauf 181 BiFi 248 bolt 73 Brainstorming 90 Brainwriting 91 Branding 48 Praxisbeispiel 48 Briefing 23 Buchhandel 268 Business Channel 113 Business-Plan 28

C Cartier 76 Change Request 19, 165 Chat 140, 276 Community-Website 73 Consulting 28 Container 194 Containerverzeichnis 178 Content Statuslisten 235 Content Entry Konzept 196

Content Management System 190 Informationen 197 Vorteile 191 Content-Handling 230 Content-Inszenierung 75 Fragestellung 78 kaskadische 75 komplexe 77 lineare 76 spielerische 76 Content-Module 137 Entwicklung 138 Corporate Design 254 Creative Brief 41 Cross-Selling 182 Csikszentmihalyi, Mihaly 78

D Dateiablage 233 Systeme 233 Datei-Codierung 234 Daten-Attribut 182 Dateneinpflege 233 Definitionsphase 28 Deutsche Bahn 33, 34 Diagrammtypen 199 Dokumentvorlagen 170 Dramaturgische Überleitung 99 Dynamische Website 190 Feinkonzept 192 Konzeption 191 Produktionsaufwand 193

E E-Brand 35, 248 E-Commerce Website 268 E-Commerce-Anwendungen 139 E-Commerce-Strategie 268 eCulture 282 Einleitung 172 E-Learning 282 Elementtabelle 176, 177 Entscheider 19

Erfolg 26 Erfolgskriterien 25 Eulox 113 Extended Software Requirements Specification 56

F Fehlerdokumentation 240 Fehlerliste 240 Feinkonzept Assetliste 174 Beschreibungsformen 171 Effizienz 162 Elemente 171 Entwicklungsschritte 185 Fragestellungen 163, 166 Funktionsskizze 175 Konsistenz 162 Meta-Tags 175 Placecase 176 Prosabeschreibung 175 Schlusslektorat 165 Sitemap 172 Tests 168 Versionskontrolle 164 Vollständigkeit 162 Vorspann 172 Zielrichtung 161 Zwischenabstimmungen 163 Fertigung 20 Finanzdienstleister 67 Fit Criterion 57 Flash 204 Flipchart 47 Flow 78 Flowchart 180 Flowdiagramm 180 Fokussierung 44 Foren 140, 276 Betreuung 141 Fork Unstable Media 87 Formular 198

Formular-Elemente 128 Fragebögen 152 Frame 80 Freitag 120 frog 153 Full-Service-Dienstleister 28 Functional Requirements 57 Funktionen 139 Kommunikation 140 Tools 141 Transaktionen 139 Funktionsbereiche 127 Funktionselemente 175 Funktionsmodule 139 Funktionsskizze 175 Future Brand Investigators 99 FutureBrand 48

G Gerling 81 Giveaways 101 Globale Corporate Website 254 Glossar 143, 172 Gmund 74 Grobkonzept 108 Anforderungen 110 Bausteine 116 Checkliste 109, 117 Entwicklung 116 Form 116 Funktionalitäten 139 Funktionsbeschreibungen 144 Kunden-Anforderung 111 Zusammenarbeit 111 Grundstimmung 73 Guided Tour 136

H Hauptnavigation 127 Hilfe-Anwendungen 143 HypoVereinsbank 282

I I-D Media AG 262 Ideen 88 Präsentation 96 Ideen-Benchmark 86 Ideenentwicklung 84 Einstimmung 84 Projekt-Umgebung 85 Schritte 88 Ideenfindung 54 Ideenpräsentation 96 Aufbau 97 Formale Umsetzung 100 Strategie 98 Info-Plattform 262 Information Architecture 8 Informations-Wizard 67 Inhalt 75, 117 Lineare Darstellung 76 redaktioneller 137 Strukturierung 117 Inhalts-Darstellung → s. ContentInszenierung Inhalts-Dramaturgie 129 Inhaltsaufbereitung 133 Inhaltsbereiche 135 Beschreibung 135 Inhaltsformen 133 Inhaltsstruktur 117 Sitemap 121 Inhaltstyp 196 Inhaltsverzeichnis 172 Insurance-City 113 Interaktionstabelle 206 Interaktive Animationssequenz 205 Interaktive Features 134 Internationaler Genfer Automobilsalon 34 Internet-Strategie 30 Interview 56, 152 IT-Bereich 22 Checkliste 22

Index

299

K Kernzielgruppe 38 Klickbare Demo 150 Kommunikation 140 Kommunikationsformen 140 Einsatz 140 Nutzen 140 Kommunkationsmaßnahmen 145 Konkurrenz 39 Konkurrenz-Analyse 44 Konkurrenzvergleich 49 Konzeptbaukasten 212 Konzeptbausteine 171 Konzeptionelles Leitmotiv 67 Konzept-Management 212 Konzept-Test 150 Korrektur 166 Korrekturspalte 166 Kreation 84 Kreationsphase 66 Kreatitivitätsblocker 84 Kreativer Ansatz 99 Kreativer Prozess 86 Kreativitätstechniken 89 Brainstorming 90 Brainwriting 91 Methode 635 91 Mindmapping 93 Kunde 18 Abstimmung 165 Änderungswünsche 165 Ansprechpartner 19 Fachlicher Hintergrund 97 Informationen 18 Persönliche Vorlieben 97 Positionierung 18 Präsentation 96 Projektziel 97 Technische Infrastruktur 22 Unternehmensprozesse 19 Workshop 44 Kundenbriefing 23 Kundenerwartungen 96

300

Index

Kundenindividuelle Massenproduktion 20 Kunst 262

L Legende 172 Leitmotiv 67 Lektorat 165 Libri 268 linear 76 Linklisten 194 Loading File 208 Logfile-Eintrag 26 London Loft 103 Look & Feel 73 Fragestellungen 74 Wirkung 73

M magenta 120 Mails bearbeiten 141 MainIdea 66 Ausarbeitung 72 des kreativen Ansatzes 100 Marke 34 Eigenschaften 36 Markenpersönlichkeit 36 Übersetzung 35 Markenpersönlichkeit 36 Markenstrategie 60 MarketMap 77 Marktführer 18 Mass Customization 20 Material 174 Materialanfragen 146 Medienkonformität 226 Mehrwert 32, 39 Mercedes Benz 34 Meta-Tag 175 Metadaten 182 MetaDesign 58 Metafunktionen 143

Metanavigation 128 Metaphern 71 Metawand 47 Methode 635 91 Methode des lauten Denkens 151 Metropolis 276 Microsite 187, 188 Mindmapping 93 Mindmapping-Tools 93 Mobile Webinhalte 209 Mobiles Internet 209 Mobilfunk 209 Mobilkommunikation 209 Modul 194 Modultabelle 194 Modulverzeichnis 178 Moorhuhn 32 Motion Script 181 Multi-Channel Plattform 209

N n.a.s.a. 2.0 81, 248 Navigation 79, 123 Benutzerführung 123 dynamische 80 flexible 81 Fragestellungen 82 Navigationsbeschreibung 126 Navigationselemente 226 Navigationsformen 79, 80, 125 Net-Business 82 Nielsen, Jakob 148 Nitro 129 Nofuckingclass 87 Non-functional Requirements 57 Notifikations-Bereiche 128 Nutzen 38 Nutzendimensionen 123 Nutzenversprechen 31 Nutzer Statistiken 39 Nutzeranforderungen 113, 123 Nutzer-Szenarien 125

Nutzerverhalten 25, 38 weitere Infos 39

O Objektorientierte Programmierung 199 Online-Banking 282 Online-Community 276 Online-Geschäftsprozesse 139 Online-Strategie 30 Online-Ticket 33

P Partnerschaftsmodell 35 Personalisierungsoptionen 143 Pflichtenheft → s. Feinkonzept Pharmaunternehmen 72 Pitch 17 Pixelpark 203, 254 Placecase 176, 193 Pop-Up Fenster 162 Positionierung 18, 41 Potenzialanalyse 54 Präsentationsformen 96, 100 Pretesting 150 Procter & Gamble 18, 35 Produktionsbegleitung 238 Produktionsgrundlage 160 Produktionsprozess 238 Profil 66 Project Constraints 57 Project Drivers 57 Project Issues 57 Projekt 23 Checkliste 23 Erfolgskriterien 25 Motive 24 Ziele 24 Projektanforderungen 56 Projektmanagement Checkliste 27 Grobkonzept 110

Projektphasen Definitionsphase 10 Entwicklungsphase 11 Implementierungsphase 12 Kreationsphase 11 Produktionsphase 12 Umsetzungsphase 11 Projektstart 16 Projektverantwortlicher 27 Projektverlauf 9 Projektvision 41 Projektziele 24 Prosumer 20 Prototyp 150, 170 Prototyp-Test 150 Prozessanalyse 21 Checkliste 21 Prozessbetrachtung 20 analytisch 20 Prozesse 19 Prozessorientierte Website 198

Q Quickcheck 81

R Reality-Check 114 Rebriefing 41, 97 Redaktion 190 Redaktioneller Leitfaden 237 Redaktionsmaske 196 Redaktionssicht 196 Referrer-URL 25 Reiseportal 33 Relaunch 27 Requirement 57 Literatur 57 Ressourcen 28 finanzielle 28 personelle 28 Revealing Things 80 Review 13

Rohtext 229 Rolle 38, 200 Rubrizierung 117

S Sammelbox 82 Satellit 162 Schematischer Screenaufbau 131 Schlusslektorat 165 Scholz und Volkmer 35 Screenbook → s. Feinkonzept Screenentwürfe 170 Screenverzeichnis 178 Screenzustand 176 Seitenraster 192 Sekundärquelle 39 Sequenzdiagramm 199 Shockwave 204 Siemens 18, 76, 134, 188, 207 Single Minded Proposition → s. SMP SinnerSchrader AG 268 Siteaufbau 127 Sitemap 121, 172 Skizzen 131, 170 Smartmoney 77 SMP 34 formulieren 34 Software Requirements Specification 56 Sport 255 SRS 56 Stakeholder 27 Standard 212 Statische Website 187 Storyboard → s. Feinkonzept Strategic Brief 41 Beispielinhalte 42 Checkliste 42 Erstellung 43 Strategie 30, 44 Strategiedefinition 44

Index

301

Strategische Werte 31 Struktur 75 kaskadisch 75 linear 75 non-hierarchisch 75 spielerisch-animiert 75 Strukturdiagramme 199 Strukturierung 117 Beispiele 118 thematisch 118 Stylepark 58, 102, 154, 216, 242 Analyse 59 Benutzerführung 155 Conclusion 63 Inhaltsstruktur 157 Kreativer Prozess 103 MainIdea 104 Siteaufbau 157 Strategie 58 Workshop 61 Ziele 59 Zwischenpräsentation 103 Suchfunktion 143 Surfverhalten 151 SWOT 54

T Tabelle 177 Teamabstimmung 163 Team-Anforderungen 110 Teamarbeit 110 Teamentscheidungen 110 Team-Konzept 232 Teaser 130 Technische Implementierung 22 Technische Infrastruktur 22 Templates 176, 193 Grundlayout 192 Templeflower 262 Test 168 Testberichte 240 Text 224 nicht-redaktionell 227

302

Index

redaktionell 228 Text-/Bild-Darstellungen 133 Text-/Bilddramaturgie 226 Textbriefing 229 Textversionen Ablage 234 Ticketverkauf 33 Tonalität 225 Tools 141 Ablaufszenario 142 Strukturierung 142 Technische Integration 143 Topdeq 130 Transaktionen 139 Ablauf 139 einbinden 139 Vorgang 139 Turbonium 68

U Übergeordnete Funktionen 143 UML 198 Informationen 202 Wurzeln 199 UML-Software 199 Umsetzungsphase 108 Unified Modeling Language → s. UML Unique Selling Proposition → s. USP Unternehmensprozesse 19, 28 Unternehmensstruktur 19 Usability 148 Richtlinien 148 Usability-Test 148, 149, 168 Methoden 151 Phasen 149 Use Case 199 Beschreibung 201 USM 135 USP 34, 67 formulieren 34

V Verhaltensbeobachtung 151 Verhaltensdiagramme 199 Verhaltenstabelle 179 Versionskontrolle 164, 239 Verständlichkeit 168 Video 181 Vision 41 VIVA 225 Volere 57 Template 57 VW 68

W Webcam 40 Website 148 Nutzwert 148 Test 151 Website-Navigation 126 Website-Typen 184 Web-Tracking 25, 26 Werbung 145 Wert 32 Marke 34 Produkt 32 Unternehmen 32 Wettbewerb 39 Zielgruppe 38 Wettbewerb 39 Wiederverwertung 193, 212 Wolf 40 Wording 150, 168, 227 Workshop 44 Agenda 45 Diskussionen 46 Methoden 46 Moderation 46 Protokoll 47 Teilnehmer 45 Themen 45 Ziel 46

X XSRS 56

Z Ziel 24, 30, 78 Prioritäten 31 Realisierbarkeit 25 Zielformulierung 24 Zielgruppe 38, 123, 124 Interessen 38 Motive 123 Nutzen 124 Voraussetzungen 39 Zielhierarchie 24 Zielsetzung 30 ZOMTEC 248 Zugänge 123, 128 Zugangswege 125, 127 Zwischenabstimmungen 163

Index

303