Principles of Web Design (Buchbesprechung)

Buchbesprechung: Principles of Web Design von David K. Farkas, Jean B. Farkas

Kurze Beschreibung

Das Buch vermittelt Designfertigkeiten für Internetseiten Bezug nehmend auf Informationsarchitektur, Sprache und Hypertext. Es soll eine Begleitung durch den Designprozess und Anleitung bezüglich Designrichtlinien und Praktiken bieten. Es soll helfen ein korrektes und nutzerfreundliches Design zu erstellen, und wichtiges - do‘s und dont’s – erklären. Hierzu verwenden die Autoren eine kurze Einleitung und erörtern in einem Überblick was das Internet überhaupt ist, wie es entstanden ist, und wie es von Nutzen sein kann. Auch berücksichtigt werden die sozialen Auswirkungen des www auf den Menschen. Neben Text gibt es auch Beispiele und Graphiken, Diskussionsthemen, anleitendes Lernen und Aufgaben um das Erlernte zu vertiefen. Das Buch enthält auch einen „Fahrplan“ wie eine Internetseite zu „bauen ist“, so dass man direkt beginnen kann.

Das Vorwort der Autoren

Die Autoren des Buches Principles of Web Design sind David K. Farkas und Jean B. Farkas.

Gleich zu Anfang des Buches sagen sie, dass ihr Buch im Besonderen an Studenten gerichtet sei. Ihren eigenen Zielen und Ansprüchen nach soll vermittelt werden, was gutes Webdesign ausmacht und welche Schritte zu überdenken und einzuhalten sind. Das Buch sei jedoch nur Anleitung, und nicht das alleinige Heilmittel. Es soll eine Darstellung dessen sein, was in der Regel der Mainstream, also die Mehrheit der Internet-Nutzer, verlangt und sehen möchte.

Konzepte sollen ebenso explizit und detailliert erklärt werden, wie auch die Art und Weise wie diese Konzepte aufeinander aufbauen. Denn wer die Zusammenhänge begreift, sollte ein gutes Endprodukt im Webdesign abliefern können. Daher soll das Buch verbessern und anleiten, und die Freude wecken, sich jeder neuen Design-Aufgabe zu stellen.

Versorgt mit einer Anleitung, wie die Wünsche der Nutzer befriedigt werden können, und wie einfach einzelne, selbst gesteckte Ziele erreicht werden können, soll es kein Problem mehr sein, ein sinnvolles, gutes Werk abzuliefern. Denn das Ziel ist es, durch Nachdenken über das, was der Nutzer haben möchte, zu einem benutzerfreundlichen Design zu kommen. Notwendig sei dazu das Verstehen aller Zusammenhänge, technisch wie visuell oder ethisch.

Technik spielt allerdings in dem Buch eine weniger große Rolle. Es ist keine Anleitung enthalten, wie zu programmieren ist, sondern nur das Gerüst vorgegeben, das der Techniker anwenden soll, um seine Seite „menschenfreundlich“ zu gestalten.

Gestalterische Elemente, die Grundlage und Pflicht eines jeden Webdesign, werden aber ausführlich erläutert und dargestellt. Daher rührt auch der Vorschlag der Autoren, dass der Umfang des Buches, Thema eines ganzen Semesters sein sollte. Man könne es nicht "in einem Rutsch" lesen.

Support-Webseite und eine Kritik zum Buch

Näheres zum Buch, seinem Inhalt, Umfang und den in ihm verwendeten Graphiken und Beispielen kann unter einer eigenen Webseite nachgelesen werden.

Auf dieser Webseite kommen auch einige Kritiker des Buches zu Wort. Bemerkenswert ist, dass diese sich durchweg positiv über das Buch äußern. Ein Beispiel ist die Kritik von Sean Williams aus Journal of Business and Technical Communication, January 2003, Vol 17, Number 1, pp. 117-20. Diese Kritik lautet in freier Übersetzung:

„Wenn man in Betracht zieht, wie schnelllebig und vergänglich Technologien und Diskussionen über das Thema Webdesign sind, und wie oft man in Handbüchern zum Thema Webdesign vorgeschrieben bekommt, welche Richtung man einzuschlagen hat, so muss gesagt werden, dass gerade dieses Buch Konzepte für das Webdesign präsentiert, die in jeglicher Designsituation Anwendung finden.

Darüber hinaus hilft dieses Buch den Designern sich auf die Komplexität des Austausches, die rhetorische Situation,“ - also Übermittlung und Vermittlung von Information – „zu beziehen und in ihrem Designprozess darauf zu achten, wenn sie designen.

In aller Kürze ist Principles of Web Design das vermisste Glied in der Kette der Webdesign-Handbücher, weil es erklärt, was Designer tun sollen und warum.“

Buchaufbau und Inhalt

Das Buch besteht aus 13 Kapiteln und vier Appendices, verteilt auf 380 Seiten.

Am Ende eines jeden Kapitels gibt es eine Zusammenfassung, Kritiken, Quellen, Diskussion, Anwendung und Aufgaben, um das Gelesene zu vertiefen und in der Praxis auch anwenden zu können.

Die Kapitel im Einzelnen:

Understanding the Web: A Designer's View

• frei übersetzt: Das Web verstehen aus der Sicht eines Designers

Vor dem Designprozess gilt es zu verstehen, was das Web "bietet". Die globale Reichweite und Interaktion, das Ansprechen aller Sinne, die Kommunikation und Transaktion, also das Interagieren und Miteinader der Menschen gestaltet sich hier frei und einfach. Die Verfügbarkeit innerhalb des Internets, seine Schnelligkeit und Aktualität, stärken und fördern den sozialen Kontakt, nicht nur im Fall simpler Frage- und Antwortfindung.

Zwar liefern CD und DVD als Speichermedien auch Information und bieten Interaktion, sind aber abgesteckt und limitiert. Sie bieten aber nicht die Fülle und das Volumen des Internet. Daher gilt es, die Gründe zu erkennen, warum das Netz genutzt wird. Auf der Basis von Informationsübermittlung können Bildung, Unterhaltung und Informationsgewinn Gründe sein, aber auch kommerzieller Handel, Informations-Portale, gar Beeinflussung durch Information, oder nur das Gefühl von Gemeinschaft und Selbstverwirklichung. Auf diese Art ist es somit auch möglich, ein großes Publikum erreichen.

Verbindung und Verknüpfung verschiedener Quellen, also interaktiven Inhalts, durch beispielsweise Verlinkung, führen den Nutzer auf eine Reise, deren Tiefen es für den Designer zu ergründen und zu erkennen gilt. So ermöglicht das Web Zugang zu speziellen Informationen und spezifischen Themen.

Diesen Bedarf zu ermitteln ist Aufgabe des Designers. Ebenso müssen ihm Grundlagen der Informationsarchitektur wie Anordnung und Einsatz von Navigations-Werkzeugen und Hierarchien bekannt sein.

Planning the Project

• frei übersetzt: Projektplanung

In diesem Kapitel widmen sich die Autoren der Planung, Schaffen/Kreation und Aufbau von Webseiten und somit der Frage: Was will ich?

Das Buch rät dazu, das Publikum zu analysieren, eventuell durch Umfragen und Forschungsarbeiten, die ermitteln, was der Nutzer habe möchte. Allerdings darf man sich nicht nur auf eine Bevölkerungsgruppe ausrichten. Vielfältigkeit, verschiedene Sprachen und weltweite Nutzer müssen erkannt sein, sofern weltweiter Nutzen anvisiert und gewünscht ist. Vergessen werden darf auch nicht die Barrierefreiheit. Webseiten müssen behindertengerecht, beispielsweise für Blinde, Stumme und Taube ebenso zugänglich sein, wie für den Nicht-Behinderten.

Dabei ist es den Autoren nach durchaus legitim, Ideen von anderen Webseiten zu nehmen, solange diese nicht kopiert werden. Flexibilität ist wichtig und der Entwicklung sollte man sich nicht verschließen. Bei kommerziellem Hintergrund ist das Geschäftsmodell zu beachten. Arbeitet der Designer für einen Kunden und nicht für sich selbst, muss er berücksichtigen was sein Auftraggeber möchte. Hier können Machbarkeitstudien hilfreich sein.

Generell raten die Autoren dazu, sich eine Deadline zu setzen, zu der man bestimmte Ziele erreicht haben will oder gar muss. Früh und rechtzeitig soll man das Thema ergründen und erkennen, sich Konzeptskizzen erstellen und Inhalte festlegen. Ein Zeitplan welcher festlegt, wie ich Inhalte und Programm erreichen will, ein Handbuch, sollte immer wieder evaluiert werden um sicher zu sein, dass das Ziel noch verfolgt wird. Überdenken, ob ich etwas anderes erreichen kann, etwas besser machen kann oder weglassen sollte sind punkte die den Designer ständig auf dem Weg begleiten sollen. Einfacher wird es, wenn Schritte und Vorgehensweise ausführlich dokumentiert werden.

Designing and Building the Project

• frei übersetzt: Designphase

Obwohl Designphase benannt, geht es an dieser Stelle noch lange nicht los mit dem gestalten. Es verfestigen sich hier die Grundzüge der Planung, die zu Umsetzung und Aufbau führen. Durch Aufzeichnen und Zusammenfassen der Planungsphase, durch überdenken, vergrößern und verfeinern der Ziele wird im nächsten Schritt eine Outline erstellt. Hierbei verleiht das Verwenden von Diagrammen dem Aufbau eine hilfreiche Strukturiertheit. Als Tipp führen die Autoren Notizkarten zur Visualisierung des Aufbaus an. Aber dennoch sollte auch die dann erstellte Outline wieder überdacht, verfeinert, erweitert werden. Der Designer muss sich klar werden ob er mit der Information auf seiner Seite vom unwichtigen zum wichtigen oder aber vom speziellen zum allgemeinen möchte, sprich ob top-down oder bottom-up.

Wenn die Struktur klar ist, folgt das eigentliche Design, das heißt der kreative Prozess setzt ein. Die Zukunft der Webseite spielt eine gewichtige Rolle. Die Seite soll nicht statisch sein, sondern flexibel, informativ, vielschichtig. Wird das Ziel erreicht, kann ein Prototyp erstellt werden. Mittels Evaluation auf verschiedenen Ebenen, durch Experten, User, Laien, wobei die Zielgruppe aber im Auge behalten werden muss, fließen alle Ergebnisse in den Designbericht ein. Dann gilt es sicherzustellen dass die richtigen Programmierwerkzeuge vorhanden sind.

Angesichts dieses Umfangs, schließen die Schritte zur Verwirklichung des Konzepts den Autoren zufolge bei einem einzelnen Designer, wie auch bei einem kompletten Design-Team die Tätigkeiten des Produzenten, Marktforschers, Informationsdesigners, Schaffenden der Kerninhalte, graphischen Designers, Herausgebers, Interface-Designers, Nutzen- und Bedarfsermittlers, des Gebrauchfähigkeit-Prüfenden, des Anweisungsdesigners (instructional designer), des Qualitätsprüfers und des Programmierers mit ein.

Using Content Types Effectively

• frei übersetzt: Darstellung der Inhalte und Inhaltstypen effektiv nutzen

Die Autoren bringen es auf den Punkt. Text, Graphiken, Animation, Video, Audio - welche nehmen und wie nutzen? Wie will der Designer oder sein Auftraggeber interagieren und was will man vermitteln? Ist der Designer noch bei seinem Publikum und was möchte es eigentlich?

Die einzelnen Möglichkeiten und Vor- und Nachteile der Inhaltstypen werden von den Autoren herausgestellt. Text ist statisch, leicht verarbeitbar, Links können einfach platziert werden, der Verwaltungsaufwand ist einfach. Der Vorteil von Audiomitteln: Emotionen durch Klang der Stimme und Betonung. Geraten wird dazu, lange Textpassagen zu vermeiden, und vor allem auf der Homepage den Text zu limitieren, zur Übersichtlichkeit Abschnitte zu setzen, freien Raum zur Pause im Lesefluss zu lassen.

Oberbegriffe, Zwischenüberschriften, attraktives Format, Zeilenumbrüche, Platzierung des Textes, Schriftart, Größe, Format sind wichtige Punkte im Designprozess. Werden Graphiken eingesetzt, lässt sich viel mehr erklären. Denn Bilder, Zeichnungen oder Photographien sind gerade in der Verbindung mit Text sinnvolle Elemente einer Webseite.

Wichtig sind auch einheitliche Hintergründe und Farben in der Gestaltung, nicht nur zur Wahrung der Corporate Identity (CI). Animationen und Videos sind „Appetitmacher" für das Auge. Hintergrundmusik ist als mögliches Mittel der Beeinflussung der Stimmung des Nutzers auch in Betracht zu ziehen, da Zufriedenheit als Kaufanreiz zu werten ist. Einsetzbar ist auch die on-screen oder voice-over Erzählung. Nicht nur eine begleitende Stimme im „off“, oder eine sichtbare, "erzählende" Person in einem Video können den Nutzer zum verweilen auf der Seite einladen.

Das Erkennen der „Kontrolle" die man somit über den Nutzer hat, ist ausschlaggebend.

Societal Implications and Ethical Choices

• frei übersetzt: Soziale Hintergründe und Ethik kennen

Etwas ungünstig, weil an dieser Stelle im Buch vielleicht unvorteilhaft, da der Leser nun „Lust" aufs „bauen“ und „designen“ hat, steigen die Autoren in diesem fünften Kapitel in ein weiteres Thema ein, wenn von ihnen selbst auch nur als Einschub gedacht.

Es geht um die Analyse der sozialen Hintergründe und Ethik. Fragen wie: Was will ich machen? Wen will ich erreichen? Wer ist mein Ansprechpartner? Wie will ich ihn/sie erreichen? Wann will ich ihn erreichen? Diese Fragen helfen Nutzer zu erkennen, zu verstehen und zu bewerten.

Auch bei Werbung oder Spam stellt sich die Frage: Was darf ich nutzen und sind Werbung und Spam sinnvoll, gewollt, gar gewünscht? Handelt der Designer im Fremdauftrag, so muss er sich fragen: Was will der Kunde? Wie verliert er ihn eventuell?

Zu diesem Zweck sind Markt- und Kundenforschung den Autoren nach essentielle Punkte im Prozess des Webdesign.

Hypertext Theory and Node-Link Diagrams

• frei übersetzt: Hypertexttheorie, Knoten und Baumdiagramme

Kapitel sechs ist ein schwieriges Kapitel, welches mehrmaliges Lesen verlangt, sich aber am besten zusammenfassen lässt unter dem Begriff Navigation. Dem Designer stellt sich die Frage: Wo will ich hin und wie will ich hin? Hier unterscheiden die Autoren zwischen verschiedenen Möglichkeiten.

Linear zum Ziel zu führen, verschiedene Punkte anbieten und so das Spektrum erschließen, werden ebenso aufgeführt, wie das Vorgeben einer statische Reihenfolge, oder die Möglichkeit den Nutzer die Seite selbst ergründen und sich seinen Weg selbst suchen zu lassen.

Der Designer muss sich fragen, welche Verknüpfungen und Wege auf der Seite sinnvoll sind.

Neben dem Ziel, dass die Seite einen ansprechenden Aufbau aufweisen soll gilt es auch zu ermitteln, wie der Nutzer vorgeht, wenn er sich auf der Seite befindet. Wie geht der Nutzer vor, wie könnte er vorgehen, was sucht er und was bietet die Seite? Was könnte man ihm anbieten und wie will man ihn auf einer Seite halten? Verwendet der Designer interne Links, oder leitet er mittels externer Links auf andere Seiten.

Für alle möglichen Eventualitäten raten die Autoren Ereignisknoten in einem Diagramm zu erstellen. So wird ersichtlich, wo es lang geht, was folgt und letztendlich was die Wünsche des Nutzers sind.

Hierarchies and Organizing Content

• frei übersetzt: Hierarchien und Inhaltsorganisation (oder besser: Links)

Kapitel sieben ist voll von Diagrammen zur Organisationsstruktur von Webseiten mittels Knoten und Verzweigungen. Die Autoren erklären dem Leser, wie Webseiten untereinander verbunden sein können und dass es in einem systematischen Muster einzuhaltende Verbindungshierarchien zwischen Vaterknoten, Mutterknoten und Kinderknoten gibt. Diese Verbindungshierarchien können sich gegebenenfalls immer weiter fortpflanzen, werden aber in drei Arten unterschieden.

• Die strikte Hierarchie beinhaltet einen Ausgangspunkt, welcher zu verschieden zweiten Links leitet, dann auf ein Ende zuläuft, oder aber strikt von dem zweiten zu einem dritten Punkt führt.
• Bei Hierarchien mit Links "zweiter Ordnung" gibt es eine Ebene eins, die zu verschiedenen Ebenen zwei leitet, die wieder untereinander verlinkt sein können. Möglich ist auch, dass Ebene zwei zu Ebene drei leitet, wobei die Links der dritten Ebene wieder untereinander verlinkt sein können.
• Die letzte Form, die Hierarchien zusammenführender Links ersten und zweiten Grades hat auch eine Ebene eins, die zu verschiedenen Ebenen zwei leitet. Ebene zwei kann wiederum auch untereinander verlinkt sein und verlinkt zusätzlich auf eine dritte Ebene, die ihrerseits auf eine vierte Ebene verlinkt. Das Besondere ist, das diese vierte Ebene von verschiedenen Links der dritten ebene aus erreicht werden kann.

Ausführliche Beispiele im Buch und auf der Webseite zum Buch veranschaulichen dieses recht schwierige Thema genauestens.

The Navigational Interface

• frei übersetzt: Navigationsinterface, der Aufbau einer Seite

Kapitel acht widmet sich dem Aufbau des Navigationsinterface der Webseite.

Identifikationscharakter, das Erkennen, wo man ist, beispielsweise durch Farben und Logos sind ebenso wichtig, wie zur Orientierung eine Navigationsleiste wichtig ist. Anspruch ist, dass schnell gefunden werden kann, was der Nutzer sucht. Anwendung finden sollen Kolonnen und linke Navigationsleiste, die Inhalte auf einen Blick präsentieren.

Dieser Identifikationscharakter sollte auf den "inneren", verlinkten Seiten fortgeführt werden. Hilfreich seien hierbei drop-down Boxen mit aufklappendem Menü.

Umgangen werden sollte langes Scrollen, und die Informationen auf der Seite sollte besser aufgeteilt oder auf Folgeseiten zu finden sein. Gerne vergessen wird den Autoren zufolge der „back-button“, bei dessen Einsatz vermieden wird, den Nutzer durch „wilde Klickerei“ konfus zu machen.

Ein weiterer Tipp der Autoren ist es, Links in einem neuem Fenster aufklappen zu lassen, da diese den Nutzer auf der „Hauptseite" halten. Als hilfreiche Orientierungshilfe kann eine Sitemap angeraten sein.

Designing Effective Links

• frei übersetzt: Das Aussehen effektiver Links

Die Frage in Kapitel neun ist, wie effektive Links aussehen.

Nach Ansicht der Autoren ist „bitte hier klicken“ weniger gut. Besser sei es Text zu unterstreichen und zu verlinken, wobei auch auf die Wortwahl geachtet werden sollte. Weiterhin aufgeführt wird das Gruppieren relevanter Information, beispielsweise mit einem Link „Bundesländer“, der zu einer Seite mit allen 16 führt, anstatt gleich alle 16 untereinander zu listen. Es gilt Information zu verknappen.

Mit Icons als Orientierungshilfe können und sollen Links als solche auch erkannt werden und ihr „Ziel" klar verdeutlichen.

Writing for the Web

• frei übersetzt: Für das Web schreiben

Kapitel 10 ist zu vergleichen mit Kapitel 4, der Darstellung der Inhalte.

Beim Schreiben gilt es eine präzise und klar formulierte Sprachwahl zu treffen. Der Inhalt muss ersichtlich und klar formuliert sein. Freiräume sollten gelassen und auf lange Texte sollte verzichtet werden. Für das Auge des Lesers sind Zwischenüberschriften und Abschnitte, sowie Paragraphen wünschenswert. Strukturiertheit sorgt für Übersichtlichkeit.

Graphic Design

• frei übersetzt: Grafisches Design

Kapitel 11 ist zu vergleichen mit Kapitel 4, der Darstellung der Inhalte.

Verwendete Graphiken sollten ästhetisch ansprechen und den Inhalt verdeutlichen. Logische Zusammenhänge durch sie klar ersichtlich werden. Für die Autoren ist es wichtig Farbwahl, Hintergrund, Schriftart, Corporate Identity (CI) und ein einheitliches Layout zu beachten und einzuhalten. Damit kann der Blick des Users beeinflusst und auch kontrolliert werden. Sei es durch Hervorhebung, Gruppierung, Unterordnung von Elementen, Vereinfachung durch knappen Text oder eben mit Graphiken. Die Stimmigkeit in den Proportionen, Ausgewogenheit an dem Gezeigten und Einheitlichkeit des Gezeigten sorgt für ein ansprechendes Gesamtbild.

Site Maps, Search, and Indexes

• frei übersetzt: Sitemaps, Suchfunktion und Indices

Sitemaps sollen helfen die Struktur der Seite zu erkennen, den Aufbau zu erschließen, das Gesuchte zu finden, und somit es dem User angenehmer zu gestalten, auf dass er länger auf der Seite verweilt, gerne verweilt und wieder kommt. Allerdings verwirren Sitemaps laut Aussage der Autoren auch oft wegen ihrer Darstellung. Die Frage bleibt: wo finde ich nun was?

Suchfunktionen sind daher noch beliebter als Sitemaps, und auch Datenbanken und Indices werden vom Nutzer lieber gewählt. Daher ist den Autoren zufolge eine effektive Datenbank und Suchfunktion anzulegen ein Erfolgsgarant einer guten Webseite.

Non-Hierarchical Information Structures

• frei übersetzt: Nicht-hierarchische Informationsstrukturen

In Kapitel 13 geht es um nicht-hierarchische Informationsstrukturen, die in vier Arten unterschieden werden können.

Die Lineare Struktur erklärt sich darin, dass der User eine Kette von Knoten entlang navigiert, immer auf dem Weg zu einem Endknoten. Diese Struktur ist sehr geordnet aber endlich.

Die zweite, die Multipath-Struktur ist ähnlich der linearen Struktur. Allerdings gibt es verschiedene Wege zum Endknoten, dem Ziel.

Bei der dritten, der Matrix Struktur gibt es verschiedene Navigationswerkzeuge überall auf der Seite, die in getrennte Richtungen laufen und alle aber zum selben Ziel führen.

Die Web-Like Struktur als viertes, erklärt sich dadurch, dass der Nutzer sich von Seite zu Seite klickt, bis er das findet was er sucht.

Appendices

A. Twenty-Five Guidelines for Getting Started frei übersetzt: 25 Schritten "vor" der Webseite

B. An Introduction to Copyright Law frei übersetzt: Einführung Urheberrecht

C. Project Reports frei übersetzt: Projektberichte aus Beispielen im Buch

D. Implementation Resources frei übersetzt: Programmierquellen

Fazit

• Das Buch hat einen klar erkennbaren Bezug zur Informationswissenschaft, nicht nur wegen des Aspektes der Informationsübermittlung, und wie der Nutzer auf entsprechende Inhalte reagiert.

• Das Buch ist umfangreich und einfach verständlich geschrieben, bietet sehr viel Information, die allerdings erst einmal verarbeitet werden muss. Wie die Autoren schon selbst sagen, sollte dieses Buch aufgrund seines Umfangs Thema eines ganzen Semesters sein.

• Um mich dem Vorwort der Autoren anzuschliessen:

Der Leser wird rasch zum kleinen Web-Designer und „Spezialisten“, darum ein rundum gutes Buch.