Webkonzeptionen

von Aleksandar Čupić

1         Vorwort

Dieser Artikel bietet keine Einführungen in Webtechnologien. Er ist eher für die interessant die sich der Konzeption widmen oder ihre Projekte professioneller angehen wollen. Es ist kein Artikel der sich der Vollständigkeit verschrieben hat, sondern nur einen Einblick, Tipps und Anregungen geben soll. Die Einteilung der Phasen in einem Projekt sind an das Buch von Jens Jacobsens [1] angelehnt, was mir in meiner Karriere als Leiter von Web Projekten hilfreich zur Seite stand.

Konzept heißt laut Duden Fremdwörterbuch [2], ein stichwortartiger Entwurf einer Rede oder Plan, Programm. Dies klingt erstmal sehr formal. Es gibt auch einige Regeln die eingehalten werden müssen, aber es bleibt zu einem nicht unwesentlichen Teil, trotz allem immer noch ein Prozess, wo persönlicher Geschmack und Kreativität gefragt sind. Aus diesem Grund ist es mehr als ein Vorteil die Regeln zu kennen, man sollte sie aber dennoch nicht als einen Glaubenssatz betrachten. Denn die Lösungsfindung ist sowohl von Kunden als auch von der Situation abhängig. Außerdem will man ja auch mit seinem Produkt aus der Masse herausragen.

2         An wen richtet sich dieser Artikel

An Leute die in Projekten arbeiten die zum Ziel haben eine Webside zu erstellen. Ebenso an Leute die immer wieder merken das ihnen die Zeit durch die Finger rinnt oder auch der Kunde mit dem Ergebnis nicht zufrieden ist. Ebenso an alle die Interesse an Arbeit mit Konzepten im Webside Bereich haben.

Einer der wichtigsten Punkte die für Konzepte sprechen ist das man Projekte besser planen und deren Zeitaufwand besser bestimmen kann. Die Schriftlichkeit, und das sind Konzepte, sind laut dem Zeitmanagement Experten Lothar Seiwert [3], das wichtigste Planungsprinzip. Jeder der nicht sicher in der Zeiteinteilung ist, kann ich seine Bücher nur nahe legen.

Mit den heutigen Tools ist die Erstellung einer Webside sehr einfach geworden. Man benötigt dafür kein Studium und auch keine Programmierkenntnisse. Zumindest gilt das für private oder statische Homepages. Wenn es zu professionellen Seiten und damit meist zu dynamischen Seiten kommt, sieht die Sachlage ganz anders aus. Da kommen ganz schnell ein paar dutzend sides auf einen zu. Mehrere Sprachversionen, plug ins, Blogs, Newsletter und vieles mehr. Der Schritt zu einem Content Management System (CMS) ist nicht weit, und da, trennt sich die Spreu vom Weizen. Selbst mit den bekannten Tools ist eine annehmbare Seite nicht ohne Kenntnisse der benutzten Sprache und der verwendeten Plattform kaum bis gar nicht erstellbar.

Was hat das alles mit dem Thema zu tun?

Es soll doch hier um Konzeptionen von Websites gehen?

Nun was wir in Kürze darstellen wollten, ist das mit der Aufgabe auch die Komplexität der Aufgabe steigt. Ohne Planung wird das Projekt schwer bis unausführbar sein, zumindest nicht in angemessener Qualität. Was hilft ist die Unterteilung des Projektes in klare Schritte. Soll es eine Seite für einen zahlenden Kunden sein, muss dieser in die Entscheidungsfindung mit einbezogen werden.

Daraus folgt, um den Kunden glücklich zu machen muss ich jeden einzelnen Schritt klar darstellen, und ihn in die Entwicklung mit einbeziehen. Am Anfang sieht es aus als würde man viel länger für das Projekt benötigen, aber wenn man alle Phasen zusammennimmt sieht man, dass man sich täuscht.

Egal um was für ein Projekt es sich handelt, überarbeiten einer schon existierenden Webside oder die Entwicklung einer komplett neuen, können in dieselben Phasen eingeteilt werden.

Die Namen für die Phasen, die zum Einsatz kommen, können sich unterscheiden. Hier übernehmen wir die Bezeichnungen aus Jens Jacobsens Buch [1], da sie mir bekannt und bei eigenen Projekten verwendet wurden und werden. Sie haben sich mehr als hilfreich gezeigt. Diese Phasen als auch die Vorgehensweise ist nicht in Stein gemeißelt, dem entsprechend können Schritte wegfallen aber auch hinzukommen.

3         Informationsgespräch

Bei diesem ersten Schritt ist der Kunde meistens an sie herangetreten. Um ein ordentliches Angebot abgeben zu können sollte man in dieser Phase schon sehr sorgfältig vorgehen. Es liegt an ihnen herauszufinden was der Kunde möchte und was er sich vorstellt. Dies geschieht am besten wenn sie einen persönlichen Termin mit ihm absprechen. Durch diesen Termin, wenn er denn zustande kommen sollte, bekommt man einen guten Einblick über den zukünftigen Auftragsgeber. Jede Information ist hilfreich: Wo befindet sich das Unternehmen? In welcher Branche ist es tätig? Wie ist die Einrichtung? Wie gehen die Personen miteinander um? Wie verhält sich der Auftraggeber zu ihnen? Das sind nur einige Informationen die man bei einem solchen Besuch bekommen kann. Seien sie wachsam und nehmen sie alles auf.

Beim Gespräch, nachdem man seine Fragen gestellt hat, sollte man als Auftragnehmer den Kunden immer reden lassen. Man sollte sich aber auch immer Rückversichern das beide dasselbe meinen, denn oft werden Worte in unterschiedlichen Branchen unterschiedlich verstanden.

Ein Beispiel das Wort Transparent:

Laut Duden [2] bedeutet es deutlich oder durchsichtig.

In Teilen der Informatik, zum Beispiel bei Verteilten Systemen bedeutet es das Gegenteil, und zwar verbergen, maskieren oder verdecken. [4]

Nun, welche Art von Fragen soll man stellen? Einen kompletten Fragekatalog hier aufzulisten würde den Rahmen des Artikels sprengen, also werden nur Schlagworte für die Anregung aufgelistet. Man sollte nach Zielen, Zielgruppe, Art der Inhalte, Gestaltungsrichtlinien, Vorbildern fragen. Ebenso ob Inhalte (Texte, Grafiken, Bilder u.s.w.) vorhanden sind und wenn, wer sie erstellt hat und ob man sie nutzen kann. Wichtig wären hier auch die Fragen zu technischen Rahmenbedingungen (Domain, frühere Side, Datenbanken u.s.w.).

Nachdem man eigene Beobachtungen gemacht hat. Antworten auf seinen Fragekatalog bekommen hat. Sollte man einen Schritt weiter gehen und selbst noch ein paar weitere Recherchen betreiben. So hilft zum Beispiel eine Konkurrenzanalyse, Marktanalyse oder auch die Frage wie wichtig das Web für den Kunden ist oder sein kann. Dieser Schritt kann durchaus auch erst mit dem Auftragszuschlag erfolgen. Und dass kann man dann im Grobkonzept einfließen lassen.

4         Angebot

Mit den gesammelten Informationen sollte man eine Basis haben, anhand der man ein Angebot stellen kann. Bevor man aber an dieses geht, sollte man sich gut überlegen ob das Projekt für einen selbst realisierbar ist. Die Überlegungen sollten Personalbedarf, Kenntnisse, Firmenausstattung, technische Machbarkeit und einiges mehr einschließen. Nachdem man aus diesem Prozess mit einer positiven Antwort herausgekommen ist, macht man sich an das Angebot.

Man sollte hier, den Arbeitsaufwand einschätzen und sie in einzelne Schritte des Projektes mit Zeit- und Kostenaufwand auflisten. Es sollte so präzise wie möglich sein damit man einen Überblick für sich und den Kunden erzeugt. Es sollte neben der reinen Kalkulation eine Projektbeschreibung, Zeitplan und Referenzen enthalten.

Sollten die Kenntnisse zur ausführlichen Angebotsstellung nicht vorhanden sein, muss ich hier auf entsprechende Fachliteratur verweisen.

4.1         Schritte nach dem Angebot

Wenn das Angebot erfolgreich verlaufen ist und man den Auftrag bekommen hat, versucht man den Kunden noch etwas genauer kennen zu lernen. Dabei hilft, mit dem Kunden zusammen eine Runde im Internet surfen zu gehen. Hier sollte man ihm ein paar Beispiel Sides zeigen. Vielleicht kennt der Kunde selbst ein paar Sides die er ihnen zeigen möchte, positive wie negative. Die Begründung warum und wieso ist dabei sehr wichtig. Jeweils drei bis fünf Beispiele reichen meist aus.

Dies gibt einem die Gelegenheit seinen Kunden mit seinen Wünschen und Ideen besser zu verstehen. Gleichzeitig ist es möglich dem Kunden auch den technischen Aufwand von bestimmten Anwendungen innerhalb der Sides näher zu bringen. Kriterien sollten der Inhalt, Zielgruppen, Technik, Informationsaufbereitung, Design, Text und Benutzerführung sein.

Jeder der folgenden Konzepte muss an den Kunden geschickt werden und von diesen abgenommen werden. Dafür gibt es mehrere Gründe:

• Der Kunde wird in engen Kontakt mit dem gesamten Prozess gehalten.
• Eventuelle spätere Änderungen können dem Kunden in Rechnung gestellt werden.
• Der Auftragnehmer weiß genau was er umsetzen muss und welche Arbeit auf ihn zukommt.

5         Grobkonzept

Dieses Konzept soll sicherstellen das Ersteller sowie der Kunde dasselbe Ziel haben. Aus diesem Grund müssen Zielgruppen, Funktionen, Umfang, verwendete Medien und das Ziel der Site in dieser Phase aufgeführt werden.

Um die Zielgruppe, die die Site besuchen sollen besser zu verstehen wäre es ratsam Benutzerprofile zu erstellen. Darin sollten Alter, Geschlecht, Ausbildung, Beruf, Ansprüche und mehr gehören. Die technische Ausstattung sollte dabei nicht vernachlässigt werden. Browser, Anbindung ans Internet, Bildschirmauflösung u.s.w sind genauso wichtig. Alles das hilft um sich eine bessere Übersicht zu verschaffen.

Sind die Profile erstellt, sollte man ein typisches Szenario durchspielen und mit einer üblichen Fragestellung an die Side herangehen. Der Ablauf sollte schriftlich niedergelegt und intern benutzt werden. Es ist auch möglich diese als Anhang an das Grobkonzept an den Kunden weiterzugeben.

Nun stellt man alle Informationen aus den vorhergehenden Abläufen zusammen und erstellt daraus das Grobkonzept. Eine mögliche Struktur des Grobkonzepts könnte folgendermaßen aussehen:

• In der Einleitung beschreiben Sie die Voraussetzungen und das Umfeld der Site. Wobei der Auftraggeber als auch der Auftragnehmer vorgestellt werden.
• Der Mehrwert für den Auftragnehmer sollte dargestellt sein.
• Beim Auftraggeber sollte man die besonderen Qualifikationen herausstellen.
• Das Projekt mit seinen Zielen sowie mit den zu erwartenden Umfang sollten ebenfalls erscheinen.

Als nächstes kann man auf die Zielgruppe eingehen. Hier stehen die Erkennung der Zielgruppe und ihre Bedürfnisse im Vordergrund. Das vermutete Wissen um Computer und World Wide Web sollte einfließen als auch die Beantwortung der Frage welches Interesse sie an der Site haben könnten. Die erwartete technische Ausrüstung der Zielgruppe (Zielplattform) sollte auf alle Fälle mit einfließen, da diese die technischen Anforderungen mit beeinflusst. Dem entsprechend werden die Funktionen ausgesucht und verwirklicht. Welche, sollten auch aufgeführt werden. Zwar nur als Stichworte aber auch die Inhalte die geplant sind sollten mit einfließen. So auch deren Vermittlung und die Größe des Umfangs der Site. Weitere Inhalte könnten die Wartung und mögliche Visionen sein.

6         Produktionskonzept

In dieser Phase wird tiefer in die Materie eingegangen. Das heißt Grafiken, Medien und Texte müssen hier aufgelistet werden.

In diesem Teil fließt die meiste Arbeit ein.  Jede einzelne HTML-Seite wird beschrieben. Mit einem Vermerk auf alle Inhalte: Text, Bilder, Grafiken u.s.w.. Jedes Template, ohne Inhalte muss hier erscheinen und beschrieben werden.

Um das Produktionskonzept erstellen zu können muss man die Navigations-Architektur  erstellen. Weiter müssen die Informations-Architektur erstellt werden, das Layout angelegt werden. Am besten man erstellt einen Prototyp und führt Tests durch. Anhand dieser Tests kann man die Architektur überarbeiten. Zum Ende erstellt man das eigentliche Dokument.

Im folgenden ein Vorschlag der Aufteilung des Produktionskonzepts mit möglichen Inhalten. Wie bei allen Konzepten, wie schon erwähnt, ist nichts in Stein gemeißelt und jeder ist frei sowohl den Ablauf als auch die Inhalte zu vertauschen.

6.1         Einleitung

Hier könnte eine kurze Inhaltsangabe stehen was im Produktionskonzept enthalten ist. Ein kurzer Rückblick was man im Grobkonzept erarbeitet hat und hier nicht mehr aufführt. Ebenso wird auf die zukünftigen Schritte verwiesen. Diese sind aber hier nicht enthalten, sondern nur wo sie im weiteren Dokument zu finden sind.

6.2         Informations-Architektur

In diesem Teil wird die Gliederung der Inhalte aufgeführt. Die Sitestruktur wird festgelegt.

Die Gliederungsebene, ob sie tief oder flach sein soll. Was sind die Hauptbereiche. Was erscheint in der Navigationsleiste und übergeordneten Bereichen. Welche Kategorien werden benötigt und wie werden sie benannt. Welche Medien werden eingesetzt und wo.

Um die Gliederungsebenen besser darstellen zu können benutzt man am besten ein Organigramm. Somit wird die Organisation der Site übersichtlicher. Man sollte nicht vergessen zu beschreiben warum man diese Einteilung gewählt hat.

6.3         Navigations-Architektur

Nachdem die Informations-Architektur klar ist, wird es Zeit an die Navigation zu denken. Hier sollte man immer daran denken dass die Frage beantwortet wird, „Wie bewegt sich der Benutzer auf der Site?“. Der Benutzer muss immer wissen wo er sich befindet und wie er die erwünschte Information am schnellsten erreicht. Um dies graphisch darzustellen kann man ebenfalls eine Sitemap nutzen und die Verlinkung einzeichnen.

6.4         Die Seiten im Einzelnen

Alle HTML-Seiten (sowohl Startseite als auch Inhaltsseiten) werden hier genau beschrieben. Zu einer HTML-Seite gehören Titel, Kurzbeschreibung und Stichworte, die so eingetragen werden sollten wie sie auf der fertigen Webside erscheinen. Die Bilder sollten beschrieben werden, günstig wäre es wenn man den Dateinamen schon wüsste. Auch der Text, wie er auf der fertigen Seite erscheinen sollte fließt hier ein. Danach folgt wieder die Abnahme des Konzeptes durch den Kunden, und weiter geht es zum nächsten Schritt.

7         Gestaltungskonzept

In dieser Phase bestimmen wird das Aussehen der Site. Man erstellt am besten ein so genanntes Gestaltungsraster, indem gezeigt wird wo welche Elemente platziert werden. Die Größe und die Position werden ebenfalls festgelegt. Das Farbklima soll zeigen welche Farben benutzt werden sollen innerhalb der ganzen Seite. In den Fontvorgaben stehen die Schriftart, Stil, Größe und Farbe. Genauso sollte man bestimmen für welchen Zweck sie gedacht sind.

Ist das alles geschehen, beginnt man mit der Erstellung von Prototypen. Einen für die Startseite, einen oder mehrere für die Inhaltsseiten, das entscheidet sich nach der Gesamtgröße des Webauftrittes. Dann folgt am besten eine Präsentation die dem Kunden das Erarbeitete zeigen soll. Ist dieser zufrieden lässt man es von ihm schriftlich abnehmen.

Hier endet die Arbeit mit Konzepten wie wir sie verstehen. Die folgenden Schritte sind die  Umsetzung, in der Grafiker und Programmierer sich anhand der Konzepte sehr gut und schnell zurechtfinden können. Vor dem Launch sollte man auf alle Fälle einen Usability-Test machen. Diese Punkte sollen hier aber nicht behandelt werden da das zu weit führen würde und nicht das Thema des Artikels ist.

8         Grundsätzliches

Das Layout und die verwendeten Web-Techniken sollten immer zum Zweck der Site passen. Sachliche Inhalte wird man eher nüchtern präsentieren, um dem Informationssuchenden nicht den Weg zu verstellen. Unterhaltende Inhalte werden entsprechend dargestellt - bei allzu verspielt gestalteten Seiten kommt es allerdings gelegentlich vor, dass der Besucher die Unterhaltung vor lauter Plugin-Aufrufen nicht mehr findet.

Grundsätzlicher Konsens sollte darüber bestehen, dass der Quellcode der Webseiten keine formalen Fehler enthalten darf. Allerdings erzeugen die wenigsten Web-Editoren von sich aus standardkonformen Code - hier muss man eventuell selbst Hand an den HTML Code legen.

Wer den direkten Kontakt mit dem Quellcode scheut, kann seine Seiten zumindest mit dem HTML Validator des World Wide Web Consortiums (W3C) überprüfen - diese Organisation verabschiedet alle Web-Standards (http://validator.w3.org/). Dave Raggett vom W3C hat sogar ein Werkzeug entwickelt, das gern gemachte HTML-Fehler automatisch ausbügelt: HTML Tidy (www.w3.org/People/Raggett/tidy/). Das Kommandozeilen-Werkzeug ist für zahlreiche Plattformen verfügbar; Windows-Anwender und Mac-User können es auch über eine grafische Oberfläche steuern. Es gibt aber auch andere komfortable HTML-Checker [1].

9         Quellen:

[1] Jens Jacobsen: Website-Konzeptionen, Addison Wesley, 2002

[2] Duden – Das Fremdwörterbuch, Bibliographisches Institut & F.A. Brockhaus, 2005

[3] Lothar Seiwert: Zeitmanagement, GU, 2002

[4] Rechenberg und Pomberger (HG): Informatik Handbuch, Carl Hanser Verlag, 2002

http://validator.w3.org/

http://www.w3.org/People/Raggett/tidy/