5

Vorwort / Impressum

Vielen Dank für Ihr Interesse und Ihr Vertrauen. Dieses Buchenthält eine Zusammenstellung der wichtigsten, interes-santesten und besten Texte, die wir in den vergangenenzwei Jahren in unseren Online-Magazin Dr. Web veröffent-licht haben. Der überwiegende Teil davon stammt aus demBereich für Abonnenten, der Webdesignern und Seitenbe-treibern eine Fülle von Fachliteratur bietet. Mehr darüberteilen wir Ihnen gern online mit.

http://drweb.de

Die Autoren sind Dirk Metzmacher, Frank Puscher, ReneSchmidt und Sven Lennartz. Letzterer ist verantwortlich fürIdee, Konzept, Auswahl und Zusammenstellung. Bei derKorrektur halfen Torsten Mohr und Christiane Rosenberger.Gedruckt wurden beide Bücher, in bewährter Weise, bei derDruckerei Steinmeier in Nördlingen, die auch den Umbruchübernahm.

Längere Quelltexte zum Nachbauen gibt es diesmal prak-tisch nicht. Wohl aber eine ausführliche Sammlung mitHyperlinks, die sämtliche im Folgenden erwähnten Dienste,Seiten und Produkte auflistet. Sie finden diese Sammlungunter der Adresse:

http://drweb.de/buchliste

Wir wünschen Ihnen eine spannende und aufschlussreicheLektüre, Erfolg und ein gutes Gelingen Ihrer Arbeit im Netz.

ISBN 3-928484-99-0Lübeck ^^ 2006

3

Inhaltsverzeichnis

Webdesign als Beruf / Verdienst / Abgaben

– Machen Sie Ihr Können sichtbar . . . . . . . . . . . . . . . . 8– Wir über uns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10– Allein ist nicht genug . . . . . . . . . . . . . . . . . . . . . . . . . 12– Was kostet Webdesign? . . . . . . . . . . . . . . . . . . . . . . 14– Top-Design für 30 Euro . . . . . . . . . . . . . . . . . . . . . . . 17– Flash-Templates: Filme von der Stange . . . . . . . . . . 24– Vertrag ist Vertrag . . . . . . . . . . . . . . . . . . . . . . . . . . . 34– Freundlicher Attentäter: Der Kostenvoranschlag . . 38– 10 Tipps für ein erfolgreiches Inkasso . . . . . . . . . . . 40– Steuervielfalt: Was muss ich zahlen? . . . . . . . . . . . . 45– Raubvogel Elster . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51– Die GEMA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54– Die KSK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58– Die SCHUFA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Webdesign / Usability / Navigation

– Die Entwicklung eines Styleguides . . . . . . . . . . . . . 66– Gesetzlich verordnet: Barrierefreies Web . . . . . . . . 69– Das Usability Mini-Lexikon . . . . . . . . . . . . . . . . . . . . 76– Typische Usability-Fehler . . . . . . . . . . . . . . . . . . . . . 82– Erwartungskonforme Gestaltung . . . . . . . . . . . . . . . 93– Die 10 häufigsten Usability-Ärgernisse . . . . . . . . . 101– Usability in 5 Sekunden . . . . . . . . . . . . . . . . . . . . . 104– Der Expertentest . . . . . . . . . . . . . . . . . . . . . . . . . . . 109– Gut gedacht, aber... Irritationen mit Links . . . . . . . 112– Gut gedacht, aber … Wenn Design im

Detail versagt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115– Die Freiheit nehm’ ich mir: Webdesign

ohne Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118– Erste Hilfe: HTML- und CSS-Fehler finden . . . . . . 126

4

– Firefox-Erweiterungen für Webdesigner . . . . . . . . 128– Gegen das Chaos: Versionskontrolle . . . . . . . . . . 132– Optimiert für... . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138– Redundante Navigation . . . . . . . . . . . . . . . . . . . . . 141– Lebendiges A–Z . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143– Wohin soll das führen? . . . . . . . . . . . . . . . . . . . . . . 150– Schicke Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153– Miese Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

Suchmaschinen / Rankung Faktoren

– Ranking Faktoren . . . . . . . . . . . . . . . . . . . . . . . . . . . 166– Ranking Faktoren: Die dunkle Seite . . . . . . . . . . . . 169– Ranking Faktoren: Starke Links . . . . . . . . . . . . . . . 174– Der präzise Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176– Alles rausholen: So werden Suchmaschinen

ausgenutzt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178– Der optimale Seitentitel . . . . . . . . . . . . . . . . . . . . . 183– Google für Profis: Die APIs . . . . . . . . . . . . . . . . . . . 187– Die perfekte Analyse: Google Analytics . . . . . . . . . 192

Google AdSense

– Geld von Google . . . . . . . . . . . . . . . . . . . . . . . . . . . 200– Anzeigenformate und -Farben . . . . . . . . . . . . . . . . 204– Keywords und Co. . . . . . . . . . . . . . . . . . . . . . . . . . . 209– Die Suchbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212– Mehr Anzeigen, mehr Geld? . . . . . . . . . . . . . . . . . . 214– AdSense Tipps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217– Googles AdWords-API und APIlity . . . . . . . . . . . . . 221

Server / Sicherheit / Teamarbeit

– Was kann er? Server im Test . . . . . . . . . . . . . . . . . . 228– Ordnung auf dem Server . . . . . . . . . . . . . . . . . . . . 232

5

– Den Server abdichten . . . . . . . . . . . . . . . . . . . . . . . 237– Gefährlicher Rootserver . . . . . . . . . . . . . . . . . . . . . 240– Sicher ist sicher: Backup-Strategien

für den Server-Content . . . . . . . . . . . . . . . . . . . . . . 244– Mit Honig fängt man Wespen: Der Honeypot . . . . 249– Website-Ausfallsicherheit . . . . . . . . . . . . . . . . . . . 256– Website-Update: Operation am offenen Herzen . . 259– Was ist ein Ping? . . . . . . . . . . . . . . . . . . . . . . . . . . . 263– SSH – Die Arbeit mit der Secure Shell . . . . . . . . . . 267– Optimierte Teamarbeit mit Groupware . . . . . . . . . 273– Kollektives Arbeiten mit PHProjekt . . . . . . . . . . . . 280– Teamwork mit Microsofts SharePoint . . . . . . . . . . 285– XP unter Fremdeinfluss . . . . . . . . . . . . . . . . . . . . . . 292– XP unter Fremdeinfluss mit VNC . . . . . . . . . . . . . . 297– Mit VPN zur abgeschirmten Vernetzung . . . . . . . . 300– VPN für alle mit OpenVPN . . . . . . . . . . . . . . . . . . . 304– OpenVPN und WLAN . . . . . . . . . . . . . . . . . . . . . . . 308– Unterwegs ins Netz . . . . . . . . . . . . . . . . . . . . . . . . . 310– E-Mail kostenlos verschlüsseln in 4 Schritten . . . . 313– E-Mail Verschlüsselung mit Ciphire . . . . . . . . . . . . 317– Verschlüsselung mit GnuPG . . . . . . . . . . . . . . . . . . 320

Die Autoren

Stichwortverzeichnis

6

Webdesign / Beruf / Abgaben

Perfekte Seiten bauen zu können, nutzt gar nichts, wenn esnicht gelingt, sich in Szene zu setzen; wenn die Kunden erstgar nicht kommen oder man nicht weiß, wie man mit ihnenumzugehen hat.

Büroarbeit hingegen ist gerade für Kleinunternehmer undFreiberufler oft nur eine lästige Pflicht. Auch wenn mansich lieber um andere Dinge kümmert oder seine Kreativitätauslebt.

7

Machen Sie Ihr Können sichtbar

Wer über das Internet Kunden gewinnen will, tut das überdie eigene Website. Experimente sind hier nicht gefragt.Setzen Sie auf Souveränität, Kompetenz und Persönlichkeit.

Es versteht sich, dass wir es hier mit einem filigranen Werkallerhöchster Kunst zu tun haben, an dem Sie wochen- odermonatelang gefeilt haben. Diese Website schließlich ist nichtnur der erste Eindruck, sie ist alles, was Sie haben. Sie zeigt,wozu Sie und Ihre Partner oder Mitarbeiter in der Lage sind.

Diese Website braucht keine Nachrichten, nichts Aktuelles,sie sollte Ruhe und Souveränität ausstrahlen. Verlässlich-keit, indem an der Site eben nicht jeden Donnerstag her-umgeschraubt wird. Damit riskieren Sie auch Fehler, dieSie an dieser Stelle nun gar nicht gebrauchen können. Wersein Konzept alle naslang umschmeißt, ist vielleicht nochnicht so weit, um auf Kunden losgelassen zu werden.Stecken Sie Ihre Energie in wichtigere Dinge.

Selbstständige oder Freiberufler müssen mit offenem Visierkämpfen. Zeigen Sie sich im Bild, sogar schon auf der Start-seite. Lassen Sie sich dieses Foto etwas kosten. Nicht nurgutes Webdesign verlangt nach Profis... Werben Sie nichtmit Preisen, sondern mit Ihrer Persönlichkeit. Deshalb ver-stecken Sie sich bitte nicht hinter Ihren Seiten, so perfektdiese auch sein mögen. Die Sache ist doch ganz einfach.Niemand wird einer anonymen Internetseite ein dickes Bud-get anvertrauen, einem kompetenten, sympathischen Men-schen dagegen sehr wohl. Und genau so stechen Sie dieLegionen von Möchtegern-Webdesignern aus, die sich ausgutem Grund nicht trauen, ihr Gesicht zu zeigen.

Wie übermittelte ich nun dem Kunden meine Kompetenz?Gewiss nicht, indem man diese seitenlang niederschreibt.Das wirkt wie Angeberei, sofern es überhaupt gelesen wird.

8

Sie brauchen Referenzen. Dr. Web meint, hier genügt esnicht einen oder zwei Screenshots zu zeigen und diesedann zu verlinken. Wir haben eine bessere Idee. ErzählenSie ein wenig über diese Projekte. Welche Problemstellunggab es? Was erwartete der Kunde und wie wurde es reali-siert? Zusammen mit gut aufbereiteten Screenshots, auchAusschnitte eignen sich prima, ergibt das pro Referenz eineSeite. Was Sie nicht erzählen werden, sind Dinge wie Preis-kalkulation, Dauer des Projekts oder auftauchende Proble-me – selbst wenn Sie diese gelöst haben.

Wer etwas mutiger ist, setzt ein Testimonial dazu. Was dasist? Ein O-Ton Ihres Kunden, indem er sich erfreut odersogar begeistert über Ihre Arbeit zeigt. So etwas verleihtIhren Referenzen eine gewisse Lebendigkeit und erhöht,wenn man es nicht übertreibt, Ihre Glaubwürdigkeit. WennSie ein gutes Verhältnis zu Ihren Kunden pflegen, unddavon gehen wir aus, sollte es keine Schwierigkeitenmachen einen solchen O-Ton zu erhalten. Im Zweifelsfallegeben Sie Ihrem Kunden ein kleines Extra.

Was tun, wenn ich noch gar keine Referenzen habe? Auch weram Anfang steht, muss nicht verzagen. Erfinden Sie! Tun Sieso, als ob Sie einen Auftrag erhalten hätten und führen Sie ihngewissenhaft aus. Eine solche Trockenübung ist ein gutesTraining, und Zeit haben Sie ja genug. Natürlich schreiben Siedazu, dass es sich lediglich um eine Demonstration handelt.

Messen Sie Ihren Referenzen die größte Wichtigkeit bei. Siesind wichtiger als Ihr beruflicher Werdegang, Ihre Arbeits-weise, oder Ihre Soft- oder Hardwareausstattung, die einenpotenziellen Kunden eher peripher interessieren dürfte. Dasheißt natürlich auch, dass man auf diesen Bereich äußersteSorgfalt verwendet. Da muss jedes Komma sitzen, jedes Bildbrillieren. Und wenn es mit den Texten nicht klappt, wendenSie sich an einen Profi. Die gibt es auch im Web. Den Richti-gen finden Sie ganz einfach über dessen Referenzen. (sl)

9

Wir über uns

Den Satz kennen Sie als typische Beschriftung eines Linksund dahinter findet sich... weitgehend nichts. Schade,schade, nur wenige Anbieter nutzen die Chance.

Professionalität, Kompetenz, Seriosität, Zuverlässigkeitsind zweifellos wichtige Attribute. Was also läge näher, alsgenau diese einem potenziellen Kunden anzuzeigen:

„Kompetenz ist unsere Stärke“

„Ein professionelles Team an Ihrer Seite“

„Wir bieten Seriosität“

„Zuverlässigkeit ist selbstverständlich für uns“

Solche und ähnliche Sprechblasen finden sich dann auchtatsächlich auf vielen Seiten. Es ginge einfacher, plumperund direkter:

„Wir sind toll“

Als ob das genügte... Professionalität, Kompetenz, Serio-sität oder Zuverlässigkeit vermitteln sich nicht dadurch,dass man Begriffe nennt. Es braucht Beweise!

Was immer Sie anbieten, ein Kunde wird Sie erst beauf-tragen, wenn er Vertrauen gewonnen hat. Vertrauen aberlässt sich nicht aus dem Hut zaubern oder herstellen,indem man es einfach hinschreibt. Es muss mehr passie-ren. Wo liegt die Kompetenz und woher kommt sie? Wasversteht man hier unter Zuverlässigkeit und wer garantiertsie?

Typische Marketingbegriffe sind unbedingt zu vermeiden.Sie sind zwar nicht direkt falsch, tauchen jedoch auf so vie-len Seiten auf, dass sich ihr Sinn komplett abgenutzt hat.Sie sind austauschbar und weitgehend ohne Aussage.

10

� Effizienz� Kernkompetenzen� Professionalität� Full-Service� Implementierung� Optimierung� Strategien� Agieren� Zukunft� Flexibilität� Corporate Design� Leistungen

Es bietet sich vielmehr die Gelegenheit zur Selbstdarstel-lung. Der Kunde möchte wissen, mit wem er es zu tun hat.Dazu gehört vor allem anderen die Vorstellung der Mitar-beiter und deren Tätigkeit. Ist das Unternehmen größer,genügt eine Auswahl. Woher stammt das Unternehmen,

11

Typisch: Marketinggeschwätz statt echter Information

wer ist sein Gründer, wann geschah das und warum. Dieeine oder andere Anekdote aus der Firmengeschichtekönnte ebenso ins Schwarze treffen.

Ihr Kunde möchte Sie kennen lernen, bereiten Sie ihm dochdas Vergnügen und kauen Sie nicht an seinem Ohr, indemSie ihn mit Floskeln zuschmeißen.

Nutzen Sie Abbildungen und tragen Sie Sorge dafür, dassdiese professionell angefertigt werden. Die Handykameraoder Webcam ist hier fehl am Platz – es sei denn Sie arbei-ten für den Underground.

Riskieren Sie einen persönlichen Stil. Eine etwas schräge,aber ehrliche Selbstdarstellung ist um vieles wirkungsvol-ler als ein austauschbares Nichts, das auf Hunderten vonanderen „Wir über uns“-Seiten fast identisch gefundenwerden kann. Gehen Sie mit Sorgfalt vor.

Ihr Kunde möchte einen Eindruck gewinnen. Erläutern Sieihm an einem Beispiel, was Sie unter Seriosität verstehen;schreiben Sie, wo Ihr Unternehmen früher schon durchZuverlässigkeit glänzen konnte. Ganz egal, ob Sie miteinem oder mit 20 Mitarbeiter tätig sind. Kurzum: Behaup-tungen in Form von Schlagworten wirken nicht, es brauchtFakten, Belege und Geschichten.

Allein ist nicht genug

Als Einzelkämpfer hat man es bekanntlich schwer. KeinWunder, dass mancher der Versuchung nachgibt und sichein wenig größer und bedeutender macht, als er in Wirk-lichkeit ist. Eine nachvollziehbare Taktik, die jedoch ihreTücken hat.

12

Freiberufler und Einzelunternehmer sprechen auf ihrenWebseiten gern in der „Wir-Form“ und vom Team externerSpezialisten, welches bei Bedarf hinzugezogen werdenkann. In einer hoch spezialisierten Welt ist das nicht unge-wöhnlich, so wird nicht selten tatsächlich gearbeitet. DieFormulierung „Netzwerk“ gibt dem Ganzen zusätzlicheinen modernen Anstrich. Doch viele dieser Netzwerkeexistieren nur in der Fantasie.

Einer der Gründe dafür liegt in dem schon erwähnten Ver-such, sich ein bisschen bedeutender und größer zumachen. Schwerer allerdings wiegt das Bedürfnis, mög-lichst jeden Auftrag annehmen zu können. Insbesonderedann, wenn dafür keine eigene Kompetenz, keine Manpo-wer und kein Know-how vorhanden ist. Ein potenziellerKunde soll erst gar nicht auf die Idee kommen, dass es hieretwas gäbe, das man für ihn nicht tun könnte.

Genau da liegt die Crux. „Ich kann alles, weil ich mir im Fal-le des Falle Verstärkung suche“ ist eine so unspezifischeAussage, dass sie weder Vertrauen noch Interesse weckt.Schließlich kann das jeder behaupten, oder?

Bei einem potenziellen Auftraggeber lösen solche Formu-lierungen mitunter das gerade Gegenteil aus. Wer wirdmich hier bedienen? Mit wem bekomme ich es spätereigentlich zu tun? Was kann der Webdesigner eigentlichselbst? Und an wen wende ich mich später mit Wünschenund Problemen?

Wenn es das Team tatsächlich gibt, dann zeigen Sie es.Stellen Sie Ihre Partner und Kollegen, die Sie für bestimm-te Aufgaben vorgesehen haben, in Wort und Bild vor.Besteht das „Team“ hingegen nur aus Bekannten, die manim Bedarfsfall anzusprechen gedenkt, dann erwähnt manes besser nicht. Einen potenziellen Kunden interessiertnicht, wie Sie Ihre Probleme lösen.

13

Stellen Sie sich, Ihre Persönlichkeit, Ihre Erfahrung und IhreKompetenzen in den Mittelpunkt und beschreiben Sienicht, was Sie nicht können.

Wenn Sie wirklich allein arbeiten, dann schreiben Sieschlicht und offen in der „Ich-Form“. Kunden suchen nichtnach anonymen Netzwerken, sondern nach Menschen,denen sie vertrauen können.

Was kostet Webdesign?

Die richtige Preisfindung ist eine komplexe und durchausschwierige Sache. Immerhin sieht sich fast jeder Webdesi-gner einen harten Wettbewerb ausgesetzt. Es ist an derZeit, dies wie schon einmal einem kleinen Test zu unterzie-hen.

Wir haben 30 Anfragen herausgeschickt, jeweils 30 an frei-berufliche Designer und 30 an gewerbliche Anbieter. Nichtjeder hat ein Angebot abgegeben, so blieben jeweils 22übrig, aus denen wir Durchschnittspreise errechnet haben.Dies ist nicht repräsentativ, sondern soll lediglich eine Hil-fe bei der eigenen Preisgestaltung darstellen.

Das von uns vorgegebene Angebot finden Sie weiterunten. Augenscheinlich unrealistische Angaben haben wir– so weit es erkennbar war – unberücksichtigt gelassen. Bit-te nehmen Sie diese Angaben nicht wörtlich, sie bildenlediglich einen Trend ab.

Der durchschnittliche Preis einer kleinen Website schlägtmit 2990 Euro zu Buche. Der durchschnittlich zugrundegelegte Zeitaufwand mit 51,5 Stunden. Dabei gibt es, wie

14

nicht anders zu erwarten, erhebliche Unterschiede zwi-schen den einzelnen Angeboten. Verwunderlich ist dasnicht, da eine Anfrage ganz verschieden interpretiert wer-den kann.

Nicht überraschen dürfte, dass gewerbliche Angebote, die-jenigen von Firmen also, preislich höher liegen, als die derfreiberuflichen Kollegen. Firmen müssen freilich mit höhe-ren Kosten und einer beträchtlichen Steuerbelastung kal-kulieren. Das gilt erstaunlicherweise auch für die angesetz-te Stundenzahl, die zur Abwicklung des Musterauftragsangegeben wurde.

Wer sich weit von den Mittelwerten entfernt, könnte esschwer haben. Für die Kunden der Webdesigner gilt, unbe-dingt mehrere Angebote einholen.

15

Durchschnittspreis

Preisspanne

Stunden im Schnitt

Stundenspanne

Freiberufler

2470

300–8400

44

15–139

Gewerbe

3510

1900–16500

59

20–160

Der fiktive Auftrag

Es ging um die Website eines Kleinunternehmens mit fünfMitarbeitern. Auf einen zu Präsentationszwecken an-spruchsvollen und technisch sauberen Auftritt wurde aus-drücklich Wert gelegt. Folgendes wurde verlangt:

� Beratung und Planung � Aufwändige Startseite mit grafischen Elementen � Benutzerfreundliches Design

16

Einige Anbieter verwenden Preisrechner mit denen man sein Wunsch-angebot selbst kalkulieren kann

� 10 fehlerfreie HTML-Seiten � Ein dynamischer Bereich für ein Weblog oder Nach-

richtensystem � Ein Kontaktformular� Das Scannen und Bearbeiten von einem Dutzend

Fotografien� Eine interne Suchfunktion� Die Anmeldung bei Suchmaschinen und Webkatalogen� Endabnahme

Alle Preise wurden mit Umsatzsteuer berechnet. All dassagt nichts über die Qualität von Websites aus. Auch magmanchem der veranschlagte Arbeitsaufwand recht hocherscheinen. Man sollte dabei nicht vergessen, dass insbe-sondere für Beratung und Wünsche eines Kunden viel Zeitverbraucht werden kann. (sl)

Top-Design für 30 Euro

Ein Trend aus den USA: Template-Anbieter offerieren kom-plette Websites als Photoshop und Flash-Dateien bereitsfür unter 50 Dollar. Die Angebote beeindrucken mit hohergrafischer Qualität.

Was macht ein arbeitsloser Webdesigner? Er gestaltet wei-ter, und zwar „auf Halde“. Und wenn das viele tun und sichauf einer gemeinsamen Plattform treffen, um ihre Designszu verkaufen, entsteht ein Angebot wie das der Firma Tem-plateMonster. Dort sind Tausende von fertig gestaltetenWebsites zu sehen und für einen sehr günstigen Preis zuerwerben. Das Einzige, was der deutsche Webmaster nochtun muss, ist das eigene Logo einzufügen und die Site mitInhalten zu füllen.

17

Das Thema Web-Site Templates erhitzt die Gemüter. Web-designer fürchten um neue Aufträge, angesichts der nichtzu unterbietenden Dumpingpreise der Template-Sites.Unternehmen und Sitebetreiber wittern eine Chance für einpreiswertes Remake der eigenen Site.

Der Kauf fertiger Website-Templates gilt in der Szene nachwie vor als Fauxpas. Kaum ein Projektleiter, Webmasteroder gar eine Agentur, die eine neue Website nicht vonGrund auf selbst gestalten möchte. Dafür gibt es auchhandfeste Gründe, etwa die intensive Beratung des Auf-traggebers im Vorfeld oder die Entwicklung spezifischer,kundengerechter Inhalte.

18

Für nur 874 Dollar gibt es dieses Raumschiff von Templatemonsterexklusiv

Andererseits sind die verfügbaren Budgets deutlich zurück-gegangen, so dass für die angesprochenen Spezial-Fea-tures häufig kein Geld übrig bleibt. „Das können wir späternoch ergänzen“ lautet die ausgegebene Devise, die abernur selten in die Tat umgesetzt wird. Und Hand aufs Herz:Für 80 Prozent der Kunden und 80 Prozent von derenBedürfnissen genügt der Aufbau von adäquaten Stan-dardangeboten.

Templates nutzen

Die Verhältnisse haben sich geändert und somit sollte sichauch das Verhalten der Web-Verantwortlichen ändern. DasGrunddesign einer Site muss nicht nur gestalterischenAnsprüchen genügen, sondern auch die Benutzbarkeit sollstimmen und es muss leicht zu administrieren sein. Son-

19

Die Vorlagen von Templatesweb verfügen über brillante Qualität

derfunktionalität und Gimmicks werden ausgelagert ineigene Sitebereiche und finden nicht mehr auf der Home-page statt.

Es spricht also grundsätzlich nichts dagegen, ein Designaus einem der zahlreichen großen Kataloge zu wählen undmit den eigenen Ressourcen aufzupeppen. Das betriffteinerseits die grafische Gestaltung, denn keiner will eineSite haben, die identisch aussieht, wie die des Konkurren-ten. Und das betrifft andererseits den Einbau von Sonder-funktionen und die Anpassung der Dateien für die Admini-strierung durch Mitarbeiter im Unternehmen.

Für Agenturen und kleinere Designbüros stellen solcheAngebote weit mehr dar, als nur Konkurrenz. Sie könnenIhr Designportfolio virtuell erweitern, ohne zusätzliche Kräf-

20

Um das Flash-File zu bearbeiten bedarf es fundamentaler Flash-Kennt-nisse

te zu beschäftigen. Ein Teil der Dienstleistung besteht dar-in, die richtigen Templates auszuwählen. Als Lohn winkenexzellente Margen im Wiederverkauf und eine enorme Ver-kürzung der Reaktionszeiten schon bei der Erstellung qua-lifizierter Angebote.

Und noch einen Schritt weiter geht der München Spitzen-Designer Marc Klein. Der hat sich das Prinzip der US-Anbie-ter abgeschaut und bietet nun seine eigenen, hochwertigenGestaltungsvorlagen an. „Wir können noch nicht davonleben, aber die Nachfrage steigt stetig“, verriet Klein derRedaktion von Dr. Web.

21

Eine Minute Download, zehn Minuten Anpassung, fertig ist die neueHomepage

Mit Templates arbeiten

TemplateMonster bietet ein kostenloses Beispiel-Templatean, an dem Sie genau sehen können, was Sie tun müssen,um aus einem Template eine fertige Site zu machen.

Installieren Sie zunächst die mitgelieferten Schriften inIhrem System. Achtung XP-User: Schriften, die in einemZIP-File stecken, müssen zuerst extrahiert werden, bevorsie sich in das Verzeichnis Windows\Fonts kopieren lassen.

Öffnen Sie die Datei Template.psd in Photoshop. NehmenSie das Bewegen-Werkzeug und klicken Sie mit der rechtenMaustaste auf den Schriftzug Company links oben. Pho-toshop bietet Ihnen die gleich benannte Ebene zur Auswahlan. Klicken Sie nun doppelt auf das große „T“ neben demEbenennamen in der Ebenenpalette. Nun können Sie denText verändern.

22

Um in Photoshop ein Element zu bearbeiten, müssen Sie zunächstper Rechtsklick die Ebene finden

Um ein grafisches Element zu färben, verwenden Sie denFülleimer. Klicken Sie zunächst mit dem Bewegen-Werk-zeug auf den News-Bar rechts und wählen Sie die entspre-chende Ebene. Nehmen Sie nun den Fülleimer, ändern Siedie Vordergrundfarbe auf Orange und klicken Sie auf denBalken.

Um ein grafisches Element zu ersetzen, öffnen Sie die Dateimit dem neuen Bild. Drücken Sie STRG + A und STRG + Cum das ganze Bild in die Zwischenablage zu nehmen. Keh-ren Sie zurück zum Template und drücken Sie STRG + V.Photoshop platziert das Bild in einer neuen Ebene. Nunkönnen Sie das Objekt beliebig verschieben oder per Bear-beiten/Transformieren in der Größe verändern. Elemente,die Sie nicht mehr sehen wollen, machen Sie unsichtbar, indem Sie neben dem jeweiligen Ebenenamen auf dasAugensymbol klicken.

23

Für die Textbereiche benötigen Sie einen passenden Tabellenhintergrund

Wenn Sie die fertige Datei exportieren wollen, klicken Sieauf das Slice-Werkzeug. Nun erscheinen alle bestehendenSlices. Passen Sie sie mit dem Sliceauswahl-Werkzeug soan, dass die Texte im mittleren Bereich einen zusammen-hängenden Slice ergeben.

Nun wählen Sie Datei/Fürs Web speichern und exportierensowohl die Bilddaten als auch den HTML-Code. Öffnen Siedas Ganze in Dreamweaver oder GoLive und fügen Sie dieTexte und Links ein. (fp)

Flash-Templates: Filme von der Stange

Template-Anbieter schießen wie Pilze aus dem Boden,doch bei der Verwendung fertiger Designs ist Vorsichtangesagt. Dennoch lassen sich Templates erfolgreich ein-setzen.

Der Traum jedes WebDesigners ist ein Kunde, der dieGestaltung eines Internet-Auftritts zur Chefsache bestimmt.Das Web-Frontend wird von Beginn an als Unternehmen-sprojekt vollzogen, bekommt eine tiefgreifende Einbindungin Unternehmensprozesse und wird mit einem Budget aus-gestattet, das Designern kreativen Freiraum ermöglicht.Gutes WebDesign kann schon bei kompetenter Unterneh-mensberatung beginnen und dort erzielen erfahrene Netz-Gestalter entsprechende Margen.

Leider bleibt dieses Idealszenario ein Traum und kommtimmer seltener vor. Unternehmen, die das Web ernst neh-men, sind längst präsent und haben eine mehr oder weni-ger griffige Vorstellung davon entwickelt, was sie dort tunwollen. Die Unternehmen, die heute nach einem Internet-

24

Auftritt nachfragen sind hingegen kleine und mittelständi-sche Firmen, für die das Netz bislang keine Rolle gespielthat. Entsprechend gering sind die Vorbereitungen undnatürlich auch die Budgets. 1000 Euro darf eine kompletteWebSite kosten und das ist schon hoch gegriffen.

TopDesigner nehmen bei diesem Budget den Zeichenstifterst gar nicht in die Hand. Der Mittelklasse-Gestalter hathier die Möglichkeit, Aufträge zu generieren, wenn er miteffizientem Ressourceneinsatz arbeitet.

Eine Methode, mit geringem Budget zu Recht zu kommen,ist die Arbeit mit fertigen WebDesign-Vorlagen. Hundertevon Anbietern verlangen in der Regel 60 bis 80 US-Dollarfür komplette Page-Layouts inklusive Flash-Navigation undIntro. Ausgehend von diesem Grundbetrag bleiben gut 900Euro für die Anpassung an die Firmen-CI. Das sind zweiTagessätze in der gestalterischen Mittelklasse und damitlässt sich eine WebSite realisieren.

25

Das Template ist in einer Viertelstunde personalisiert

Fallstricke

Die Vielfalt des Angebots ist enorm. Die gestalterische Qua-lität der Templates in vielen Fällen sehr hoch. Dennoch istVorsicht geboten. Der Alptraum für den Designer ist näm-lich, dass ein Design in Deutschland mehrfach auftaucht.Gerade beim TopSeller TemplateMonster ist die Wahr-scheinlichkeit recht hoch, denn nicht nur in den USA, son-dern auch in Deutschland verkaufen unzählige Reseller diegleichen Vorlagen. Man sollte in jedem Fall davon Abstandnehmen, die intensiv beworbenen „Flash-Site of the day“oder ähnlich populäre Angebote zu nutzen, sondern ehertief in den Eingeweiden der Anbieter zu wühlen.

Auch bei der Verarbeitung von fertigen Vorlagen lauernFallstricke. Viele Templates von TemplateMonster sindnicht gut auskommentiert. Da kann es zur Sisyphos-Arbeit

26

Monster-Templates werden von zahlreichen Wiederverkäufern ange-boten

werden, im Bildbearbeitungsprogramm die richtigen Ebe-nen zu finden um einzelne Elemente auszuschalten oder zuersetzen. Bei den Flash-Templates sind Objekte oft gut frei-gestellt und diese Vorarbeit muss der deutsche Designerebenso leisten, um ein Element zu ersetzen.

Das Paket

Um den Aufwand und somit die Kostenkalkulation richtigeinzuschätzen, bietet es sich an, eine eigene Testsite mitdem kostenlosen Demo-Template von TemplateMonster zuerstellen. Der Schlüssel zur Bearbeitung des Flash-Filmsliegt in der Bibliothek. Der Demo-Film besteht aus siebenEinzelfilmen, die miteinander verlinkt sind. Kopieren Siezunächst den gesamten Satz FLA-Dateien in einen neuenOrdner, damit die Originale erhalten bleiben.

27

65 Dollar kostet diese schicke Flash-Site bei TemplateMonster

Der Film „sample-main.fla“ dient nur als Container undmuss nicht verändert werden. Die erste geladene Dateiheißt „sample-0.fla“. Öffnen Sie diesen Film und öffnen Siedie Bibliothek. Beginnen Sie mit dem obersten Symbol undarbeiten Sie sich nach unten durch, in dem Sie jedes Ele-ment und jeden Text durch ein neues, passendes Elementersetzen. Die roten Seitenbalken und das Kopflogo sindnicht als Symbol umgesetzt und müssen direkt in derHaupt-Timeline aufgespürt und verändert werden. Ist Ihrneuer Schriftzug länger oder kürzer als das Original, müs-sen Sie die Ebenenmaske im letzten Frame des Tweeningsauf Ebene 67 in der Größe anpassen.

Halten Sie zunächst alle Größen gleich, wie im Original.Erst wenn Sie alle Elemente ersetzt haben, beginnen Siemit der Feinsteuerung und verändern die Gesamtoptik. Beiden Navigations-Buttons zur Linken handelt es sich um

28

Spüren Sie die Designelemente in der Bibliothek auf: Doppelklicken,Anpassen, fertig

MovieClips mit Namen „manu01“ und folgende. Hier liegtder Text unter einem transparenten Button. Sie müssen dieEbene „layer3“ sperren und unsichtbar schalten, um denText bearbeiten zu können.

Die gesamte Bearbeitung dieses ersten Films dürfte eineViertelstunde dauern. Mit etwas Übung schaffen Sie dasganze Set in eineinhalb Stunden. Ihnen bleibt also genugZeit, um die Site zu ergänzen und dem Ganzen einen opti-schen Feinschliff zu verpassen.

Designload

� Angebot: Komplette WebSites mit und ohne Flash,Flash-Intros, Flash-Musik und Flash-Effekte. KeineSpiele.

29

Die Beschriftungen werden von transparenten Buttons auf Layer3verdeckt

� Abrechnungsmodell: Jahresabo für 50 oder 100 Dollar(Premiumangebot mit mehr Kategorien)

� Kostenlose Demo: Derzeit nicht im Angebot� Beurteilung: Große Site mit zahlreichen Gestaltungs-

vorschlägen für viele Einsatzbereiche. Teilweise wirkendie Flash-Filme sehr verspielt und mitunter schwach inder Performance. Die gleichen Templates gibt es auchunter der Domain flash-template-design.com.

Templates247

� Angebot: Komplette WebSites mit und ohne Flash,Flash-Intros und Flash-Effekte. Keine Spiele, keineMusikloops.

� Abrechnungsmodell: Einzelpreise ab 55 Dollar� Kostenlose Demo: Pool mit vier miserablen kostenlo-

sen HTML-Templates� Beurteilung: Die Flash-Interfaces und Flash-WebSites

sind durchaus sehenswert. Beeindruckende Effekteund schöne Übergänge erfordern allerdings deftigeLadezeiten. Ein schlechter Witz sind die völlig stillosenIntros und die kaum verwendbaren eCommerce-Tem-plates. Der Preis für das einzelne Flash-Template istmit 55 Dollar akzeptabel.

Sorbose

� Angebot: Komplette WebSites mit und ohne Flash,Flash-Intros und Flash-Effekte. Außerdem Flash-Games, Business-Sites, Lizenfreie Musik und Bilder.

� Abrechnungsmodell: Einzelpreise ab 35 Dollar fürWebSites oder 15 Dollar für ein Spiel

� Kostenlose Demo: Kein Angebot verfügbar� Beurteilung: Sorbose bietet ein riesiges Angebot mit

rund 1500 verschiedenen Flash-Filmen. Die pure Kata-

30

strophe ist aber die Navigation. Die Templates sindnur in ganz grobe Rubriken unterteilt und dann einfachnummeriert. Eine Vorschau fehlt. Man muss sichmühevoll durcharbeiten. Dafür stößt man eventuellauf unentdeckte Rohdiamanten, zu denen sich andereDesigner nicht durchgewühlt haben. Die Preise sind inOrdnung. Die Spiele sind zumeist recht primitiv.

Templatemonster

� Angebot: Komplette WebSites mit und ohne Flash,Flash-Intros und Flash-Effekte. Außerdem Business-Sites und Logo-Sets.

� Abrechnungsmodell: Einzelpreise ab 60 Dollar fürFlashSites oder 104 Dollar für ein Logo-Set

31

Sorbose verkauft auch vorgefertigte Flash-Spiele

� Kostenlose Demo: Kostenloses Demo-Template.Downloadlink ist sichtbar auf der rechten Seite, wennman eines der Templates in Detailansicht betrachtet.

� Beurteilung: Die erste Adresse unter den Template-Anbietern ist nach wie vor TemplateMonster. Das rie-sige Angebot aus Flash-Sites, HTML-Sites und Kom-binationen bietet praktisch für jeden Geschmacketwas. Sehr gelungen ist auch die Navigation, die eserlaubt, nicht nur nach Technologie (Flash oder nichtFlash) zu suchen, sondern auch nach inhaltlichen The-men oder Design-Stilen. Die Templates werden auchbei vielen anderen Anbietern verkauft, etwa unter derDomain website-planet.de.

32

Die Navigation auf Templatemonster sortiert auch nach Design-Stilen

DynamicFactory

� Angebot: Komplette WebSites mit Flash, Flash-Introsund Flash-Effekte. Außerdem Business-Sites undDynamische XML-Sites.

� Abrechnungsmodell: Einzelpreise ab 55 Dollar fürFlashSites, 10 Templates für 249 Dollar, alle Templates(über 400) zusammen 499 Dollar

� Kostenlose Demo: Keine zu finden.� Beurteilung: Sehr stilvolles Angebot mit vielen schö-

nen Templates. Besonders spannend, aber auch rechtteuer sind die XML-basierten Vorlagen, die aus-schließlich mit externen Dateien editiert werden kön-nen. Die kosten aber auch und 200 Dollar. Die anderenPreise bewegen sich im normalen Bereich. Allerdingssollte der Anbieter ein paar vertrauenbildende Maß-nahmen einstreuen, damit der Kreditkarten-Bezahlerweiß, wem er die 60 Dollar überweist.

BoxedArt

� Angebot: Komplette WebSites mit Flash, Flash-Introsund Flash-Effekte. Außerdem Business-Sites, Soun-deeffekte, PowerPoint-Vorlagen und Cartoons.

� Abrechnungsmodell: AboModell mit Vollzugriff: für 3Monate 50 Dollar, für sechs Monate 80 Dollar und fürein Jahr 100 Dollar.

� Kostenlose Demo: Keine zu finden.� Beurteilung: Umfangreiches Angebot mit einigen

guten Ansätzen, aber auch viel Schrott. Das Abo-Modell kostet so viel, wie bei anderen Anbietern daseinzelne Template. Wenn man bei BoxedArt ein schö-nes Template findet, sollte man zugreifen und danngleich einen Pool herunterladen für zukünftige Pro-jekte. (fp)

33

Vertrag ist Vertrag

Wenn Webdesigner und Kunde sich einig sind, alles gutgeht und die Arbeit termingerecht und perfekt abgeliefertwird, ist alles in Butter. Doch sobald Probleme auftauchen,ist’s mit der heilen Welt vorbei. Um das zu vermeiden,braucht es einen Vertrag. Doch welchen: Werkvertrag,Dienstvertrag oder Urheberrechtsvertrag?

Die Unterschiede sind gravierend. Deshalb ist es wichtig,vorher die richtige Wahl zu treffen. Ein Werkvertrag bein-haltet die Verpflichtung, ein bestimmtes Arbeitsergebnis zuliefern – eine Website, ein „Werk“. Ein Dienstvertrag ist daganz anders gestrickt. Er beinhaltet die Verpflichtung eine

34

Für 50 Dollar erhält man drei Monate vollen Zugriff bei BoxedArt

bestimmte Arbeit zu erledigen, einen „Dienst“ zu tun. Dar-aus ergibt sich ein gewichtiger Unterschied.

Bezahlt wird, wenn der Dienst geleistet wurde, ganz egal obder Auftraggeber damit nun zufrieden ist, ein Problem gelöstwurde oder nicht. Selbst wenn aus welchen Gründen auchimmer die Website nicht fertig gestellt wird oder nicht ansNetz gehen kann, Vertrag ist Vertrag und bezahlt wird, wennder Dienst erbracht wurde. Typisch dafür ist eine Abrech-nung nach Stunden. Wurden die vereinbarten Stunden ge-leistet, ist der Vertrag erfüllt, unabhängig vom Ergebnis.Kann etwa die Leistung nicht erbracht werden, weil der Auf-traggeber notwendige Unterlagen nicht beschaffen konnteoder für das Projekt nötige Vorarbeiten nicht geleistet wur-den, besteht kein Anspruch auf eine Art „Lohnfortzahlung“.

Diese Angaben sollte ein Dienstvertrag enthalten:

� Exakte Beschreibung der Dienstleistung� Anzahl der zu leistenden Arbeitstunden � Verteilung der Arbeitstunden pro Woche, pro Tag etc.� Termin zu dem die Leistung vollständig erbracht sein

muss� Zahlungsmodalitäten� Erstattung eventueller Spesen� Kündigungsfristen des Vertrags

Ein Dienstvertrag wird immer dann vorkommen, wenn einWebdesigner lediglich einen Teil eines größeren Projektsübernimmt, er quasi als Spezialist hinzugezogen wird,jedoch mit der der Leitung des Gesamtprojekts nichts zu tunhat. Das gilt auch für Beratungsleistungen. Zum Beispiel,wenn Sie eine Website in Sachen Zugänglichkeit auf Vor-dermann bringen oder eine Suchmaschinenoptimierungdurchführen. Hier lässt sich der Arbeitsaufwand zuvor gar

35

nicht exakt ermitteln. Es sei denn, durch eine vorhergehen-de Analyse, und die wäre dann wieder eine Dienstleistung.

Ein Werkvertrag ist erst dann erfüllt, wenn das Werk voll-ständig, termingerecht und nach Maßgabe des Vertragesabgeliefert wurde, egal wie groß der Aufwand dafür war.Selbst wenn der Kunde es sich bis dato anders überlegensollte, mit dem Konzept insgesamt nicht mehr zufrieden istund auf eine Veröffentlichung verzichten will: Vertrag istVertrag und der bindet. Zahlen muss er trotzdem, denn das„Werk“ wurde fertig gestellt.

Ein Werkvertrag birgt ein gewisses Risiko für den Webde-signer. Eine Endabnahme der fertigen Website gehört näm-lich dazu. Diese ist Gelegenheit für den Auftraggeber aller-lei Mängel festzustellen – und sei es nur, um den Preis zudrücken. Sollte die Website aber tatsächlich Mängel auf-weisen, muss nachgebessert werden. Wenn Bestellformu-lare nicht funktionieren, gängige Browser nur ein wirresDurcheinander zeigen, Javascript Fehlermeldungen pro-duziert, Links nicht funktionieren oder Bilder schlichtwegvergessen wurden. Passiert das, wird die Endabnahme ver-weigert und der Webdesigner darf sich noch einmal an dieArbeit machen und nachbessern.

Aber Achtung: Der Kunde kann dafür eine Frist festsetzen,die unbedingt einzuhalten ist. Tut man das nicht, erweiternsich seine Rechte. Schlimmstenfalls kann er vom gesamtenVertrag zurücktreten und sogar Schadensersatz verlangen.

Diese Angaben sollte ein Werkvertrag enthalten:

� Eine exakte Beschreibung der zu gestaltenden Website.Hier sind auch Details festzulegen. Etwa die Anzahl derSeiten, Bilder, Formulare. Das geht bin hin zum „Pflich-tenheft“, das sämtliche Einzelheiten genau auflistet.

36

� Leistungen des Auftraggebers, etwa das Beschaffenvon Fotos, Produktdaten, Texten.

� Termin der Fertigstellung und für die Endannahme.� Termin für eine eventuelle Zwischenabnahme.� Zahlungsmodalitäten. Bei größeren Aufträgen sind

Abschlagzahlungen sinnvoll, die man vorher aushan-delt und die selbstverständlich im Vertrag geregeltwerden.

Der Urheberrechtsvertrag regelt, was der Kunde mit seinerWebsite tun darf. Ohne eine solche Regelung ist das nichtviel. Er darf die Website veröffentlichen und damit hat es sichauch schon. Nicht einmal nachträglich verändern darf er sie.

Der Urheberrechtsvertrag regelt Fälle wie:

� Der Kunde möchte seine Website auf CD-ROM pres-sen und an seine eigenen Kunden verteilen.

� Der Kunde möchte die Website für seine Filialen kopie-ren, anpassen und ebenfalls ins Netz stellen.

� Der Kunde möchte Teile der Website, Designelemen-te oder Texte daraus für einen gedruckten Prospektverwenden.

� Der Kunde möchte die Website an einen Dritten ver-kaufen.

� Übersetzung und Publikation der Website in anderenLändern.

All das regelt der Urheberrechtsvertrag. Für den Fall der Fäl-le kann man sich so als Webdesigner ein Zubrot sichern.Wird ein solcher Vertrag nicht abgeschlossen oder diese Fra-gen nicht im Rahmen des Werkvertrages geregelt, gilt keinstillschweigendes Einverständnis, nach dem Motto: „Davonhaben Sie mir aber gar nichts gesagt“. Ohne vertraglicheRegelung gibt es kein erweitertes Nutzungsrecht. (sl)

37

Freundlicher Attentäter:

Der Kostenvoranschlag

Der Kostenvoranschlag soll dem Kunden die voraussichtli-chen Kosten aufzeigen. Ebenso wie bei einem Angebot, istauch hier die Unterschrift auf dem Vertrag das Ziel. DochVorsicht, sogar der Kostenvoranschlag ist per Gesetz regu-liert.

Wer eine Ware kauft, erfährt den Preis meist umgehend.Anders bei der Bestellung von noch zu erbringenden Leis-tungen. Hier informiert der Kostenvoranschlag den Kundenüber die voraussichtliche Summe aller Posten. Es gibt dabeizwei Arten von Kostenvoranschlägen. Einmal der garantier-te oder verbindliche Kostenvoranschlag mit Gewährleistungund der einfache oder unverbindliche Kostenvoranschlagohne Gewähr. Hier ist Vorsicht geboten, denn ein Kosten-voranschlag ist nur dann unverbindlich, wenn explizit daraufhingewiesen wird. Das sollte schon im Titel stehen. Unver-bindliche Kostenvoranschläge sind die Regel.

Unterschied: Angebot und Kostenvoranschlag

Im Vergleich zu reinen Angeboten enthalten Kostenvoran-schläge eine differenzierte Aufstellung des erforderlichenGeldbetrages. Der grundsätzliche Unterschied zum Ange-bot liegt aber in der Bindungswirkung der Inhalte. Ange-bote sind in Umfang und Höhe verbindlich. Wird für eineLeistung ein bestimmter Betrag zugesagt, so kann mandavon nachträglich keinen Millimeter mehr abweichenoder einfach den Leistungsumfang zur Kostendeckung ver-ringern. Dagegen dürfen Kostenvorschläge nach § 650 BGBdie berechneten Kosten überschreiten, wenn die Fertig-stellung nicht ohne eine zwingende Überschreitung reali-sierbar ist.

38

Im Bürgerlichen Gesetzbuch findet sich unter § 650 zumKostenanschlag, dass wenn es sich „ergibt, dass das Werknicht ohne eine wesentliche Überschreitung des Anschlagsausführbar ist, dem Unternehmer bei der Kündigung desVertrags nur der im § 645 bestimmte Anspruch zusteht“.Der Unternehmer darf also für die schon geleistete Arbeiteinen Teil der Vergütung und Ersatz der Auslagen verlan-gen, muss aber den Auftraggeber zuvor darüber informierthaben, dass eine solche Überschreitung des Anschlages zuerwarten ist. Übrigens: Eine Mitteilungspflicht hat dasUnternehmen laut einem Urteil des OLG Köln auch dann,wenn kein Kostenvoranschlag erstellt wurde und er aufStundenlohnbasis seine Leistungen abrechnet.

Die Rechte des Anbieters

Doch wie hoch darf eine unwesentliche Überschreitungsein? Als unwesentlich werden durchweg Überschreitun-gen von weniger als 10 % gesehen, in Einzelfällen sind aberbis zu 25 % möglich. Hier heißt es Überzeugungsarbeit leis-ten, was auf Grund des möglichen Gewinns auch miteinem Augenzwinkern zu verstehen ist. Man sollte es nurnicht auf die Spitze treiben, da der Kunde bei Überschrei-tungen, die höher als 10 % ausfallen, berechtigt ist, denVertrag zu kündigen.

Verschweigt man nun die Überschreitung des Voranschla-ges und führt den Auftrag vollständig aus, ist es das Rechtdes Kunden, einzig die bis zur Überschreitung entstande-nen Kosten zu tragen. In der Folge muss also nur die bisdahin geleistete Arbeit vergütet werden. Möchte er dasErgebnis aber komplett übernehmen, so ist er auch zurZahlung der gesamten Arbeit verpflichtet. Letztendlich ent-scheidet der Kunde, ob die Kostenüberschreitung geneh-migt oder der Vertrag gekündigt wird. Das kann als kalku-liertes Risiko ein Drahtseilakt sein.

39

Nach der Regelung des § 632 BGB ist ein Kostenvoran-schlag im Zweifelsfall nicht zu vergüten. Der Unternehmerkann aber ein Entgelt verlangen, wenn es sich um eineAusarbeitung handelt, die einen besonderen Aufwanderfordert. Insbesondere dann, wenn mit der Herstellungdes geforderten Entwurfs die eigentliche kreative Arbeitgetan ist, selbst wenn der Kunde diese nicht verwertet, wieetwa bei der Gestaltung eines Layouts.

Zu den Hauptmerkmalen eines Kostenvoranschlags ge-hört eine Auflistung zur Beschaffenheit und Umfang derArbeiten, die dafür erforderliche Arbeitszeit und die ent-sprechenden Arbeitskosten, das dafür notwendige Mate-rial samt Materialkosten und der Erfüllungszeitraum, derschriftlich durch eine Gültigkeitsdauer fixiert werdenkann.

Hat der Kunde nach dem Kostenvoranschlag und nach derAuftragserteilung Sonderwünsche, von denen bei derZusammenstellung des Kostenvoranschlags noch keineRede war, ist es ratsam, gleich auf die zusätzlichen Kostenhinzuweisen. Oft ahnen Kunden nicht, welchen Aufwandscheinbar kleine Änderungen notwendig machen. Man gibtdem Kunden also die Option, selbst zu entscheiden, obweitere Ausgaben vom Budget gedeckt sich. (dm)

10 Tipps für ein erfolgreiches Inkasso

Jeder Selbstständige kennt das Problem: säumige Kunden.Von ihnen kann Ihre Existenz abhängen. Was tun mit Kun-den, die nicht zahlen? Einige wichtige Grundsätze habensich im Alltag bewährt:

40

Zahlungsfrist

Überlegen Sie sich, wann Ihre Kunden bezahlen sollen.Normal sind 10 oder 14 Tage. Paragraf 286 (3) BGB erwähnteine Zahlungsfrist von 30 Tagen nach Rechnungsstellung,danach ist der Kunde automatisch in Verzug.

Geben Sie Anreize

Geben Sie Ihren Kunden Anreize, vorzeitig zu zahlen. Bei-spiel: 2% Skonto bei Zahlung innerhalb von 10 Tagen. Einguter Kaufmann weiß: die Dispozinsen seines Girokontoskosten weniger, als das Skonto verfallen zu lassen – er wirdaus Eigeninteresse vorzeitig zahlen. Zahlt der Kunde nachAnlauf der Skontofrist und zieht sich trotzdem Skonto ab,rufen Sie ihn wieder an und verdeutlichen ihm den Sinndes Skontos. Ob Sie die Differenz zurückfordern, müssenSie im Einzelfall abwägen – im Zweifel sollten Sie das ersteMal darauf verzichten.

Bleiben Sie am Ball

Nicht jeder Kunde handelt nach kaufmännischen Prinzipienund nutzt Skonti. Tragen Sie in Ihren Kalender ein, bis wannein Kunde auf jeden Fall bezahlt haben muss und treten Sieumgehend in Aktion, wenn dieser Termin ohne Zahlung ver-strichen ist. Zögern Sie nicht und schieben Sie nichts auf –laxes Inkasso hat laxe Zahlungsmoral zur Folge.

Der richtige Moment Teil 1

Datieren und schicken Sie Ihre Rechnungen (wenn mög-lich) so, dass der 30. oder 31. Tag nach Rechnungsstellungauf einen Montag oder Dienstag fällt. Gegen Wochenendeneigen Menschen dazu, unangenehme Aufgaben, wieRechnungen zu bezahlen, auf „nächste Woche“ zu ver-schieben und dann zu vergessen.

41

Der richtige Moment Teil 2

Rufen Sie zu Wochenbeginn den Kunden an. Sie sparenPorto und gegenüber dem Postweg mindestens einen TagZeit. Vielleicht hat der Kunde die Rechnung übersehen undalles ist in Ordnung – oder der Kunde ist mit der Rechnungnicht einverstanden. Klären Sie dies direkt am Telefon. Fra-gen Sie nach, bis wann Sie mit der Zahlung rechnen kön-nen und fordern Sie freundlich die Zahlung (Beispiel: „bit-te diese Woche noch!“).

Seien Sie direkt

Wichtig: Suchen Sie bei Inkassoanrufen nicht nach Alibi-themen als Anrufgrund, sondern sprechen Sie als erstesdie offene Rechnung an („Ich rufe wegen der noch offenenRechnung Nr. X vom 01.01.2005 an“). Setzen Sie weicheFristen, beispielsweise „bis Ende dieser Woche“. Kundenneigen bei harten Fristen mit fixem Datum zu unbewusstenAbwehrreaktionen und tendieren dazu, die Frist aus Trotzbis zum letzten Moment auszunutzen.

Bleiben Sie freundlich

Vergessen Sie nicht die soziale Komponente Ihrer Geschäfts-beziehung. Vergrätzen Sie den Kunden nicht. Zeigen Sienegative Emotionen nicht direkt, auch wenn Sie innerlichkochen. Sagen Sie dem Kunden, dass Sie fristgerechtbezahlt werden wollen – aber bleiben Sie freundlich. Neu-kundengewinnung ist ein hartes Brot. Daher sollten Sie dasZiel haben, ihn zur Zahlung zu bewegen und als Kunden zuhalten – allerdings nicht um jeden Preis. Notieren Sie sichdas neue Zahlungsziel zur Widervorlage im Kalender.

Die freundliche Erinnerung

Hält der Kunde sich nicht an die telefonisch getroffeneAbmachung, gehen Sie das Inkasso formaler an. SchreibenSie dem Kunden eine Mahnung, nennen Sie diese jedoch

42

Zahlungserinnerung und bleiben Sie freundlich. DrohenSie nicht, fordern Sie höflich die kurzfristige Zahlung.

In jedem Fall gilt: Treten Sie konsequent auf. Vermeiden Sieunterwürfige Floskeln wie „sollte sich die Zahlung mit die-sem Schreiben überschnitten haben, betrachten Sie es alsgegenstandslos“. Der Kunde ist dafür verantwortlich, dieRechnung pünktlich zu zahlen, nicht Sie! Wenn sich etwasüberkreuzt, ist das das Pech des Kunden. Fordern Sie denKunden nicht auf, das Schreiben zu ignorieren!

� Listen Sie in dem Schreiben die offenen Rechnungenauf, inklusive Rechnungsdatum, -nummer und -betragsowie dem Tag der Fälligkeit.

� Notieren Sie sich erneut den ‘Tag der Abrechnung’,damit Sie am Ball bleiben.

Jetzt wird’s ernst: 2. Mahnung!

Hat der Kunde bis jetzt noch immer nicht gezahlt, könnte eslangsam für Sie ungemütlich werden. Die Zahlung stehtnun schon sehr lange aus. Das kann je nach Höhe desRechnungsbetrages existenzbedrohend sein.

Gesetzlich vorgeschrieben ist eine einzige Mahnung. Wä-gen Sie nun ab, was Sie in diesem Fall tun möchten:

� Noch zwei Mal außergerichtlich mahnen und danachdas gerichtliche Mahnverfahren einleiten.

� Sofort das gerichtliche Mahnverfahren einleiten (sie-he letzter Punkt).

Entscheidungskriterien hierfür könnten sein:

� Umsatzvolumen des Kunden � Dauer der Geschäftsbeziehung � Außergewöhnliche Umstände beim Kunden � mögliche Folgeaufträge durch den Kunden

43

Setzen Sie diese Kriterien auch an, um zu entscheiden, obSie ab jetzt dem Kunden die Kosten für die Mahnung inRechnung stellen, beispielsweise Porto und Verzugsschaden.

Außergerichtliche Mahnung

Mehr als zwei weitere außergerichtliche Mahnungen soll-ten Sie dem Kunden nicht schicken. Es ist unwahrschein-lich, dass er danach ohne weiteres zahlt. Nennen Sie in derzweiten und dritten Mahnung eine konkrete und angemes-sene Zahlungsfrist, zum Beispiel „innerhalb von 10 Tagen“.Kündigen Sie in der dritten Mahnung an, dass Sie eingerichtliches Mahnverfahren anstreben werden, sollte erseiner Zahlungspflicht nicht innerhalb der genannten Fristnachkommen.

Ist die letzte Frist abgelaufen, bleiben Ihnen nur zwei

Möglichkeiten:

Die erste Möglichkeit: Ist der Rechnungsbetrag so hoch, dassca. 10–20% der Summe für eine Bank interessant erscheinenkönnten, sollten Sie so genanntes Factoring in Erwägung zie-hen. Vereinfacht erklärt, „verkaufen“ Sie einem Factor dieForderung gegenüber einem Kunden. Vorteil für Sie: 80–90%des Betrags wird Ihnen von der Bank sofort gutgeschrieben.Der Rest dient als Sicherheit. Weiteres zu diesem Themaerfahren Sie bei Ihrer Hausbank.

Zweite Möglichkeit und der wahrscheinlich bessere Weg:bei lohnenswerter Rechnungshöhe sollten Sie ein gericht-liches Mahnverfahren nach §§ 688 ff ZPO beantragen.Bevor Sie das tun, sollten Sie sicherstellen, dass Sie diegesetzlichen Vorgaben bis hierhin erfüllt haben:

� Vergewissern Sie sich (wenn möglich), dass der Kun-de zahlungsfähig,

� die Forderung berechtigt ist und

44

� dass der Kunde in Verzug ist, die Mahnung also erhal-ten hat (am besten per Einschreiben mit Rückschein).

Die Kosten für das Mahnverfahren variieren von Dienstleis-ter zu Dienstleister. Sie betragen ungefähr 100 EUR beieiner Forderung in Höhe von 900 EUR. Sind alle Bedingun-gen erfüllt, trägt der Schuldner die Kosten des Mahnver-fahrens und Sie erhalten nach einigen Monaten Ihr Geld.Ist eine der genannten Bedingungen nicht erfüllt, tragenSie die Kosten für das erfolglose Mahnverfahren.

Ist der Kunde zahlungsunfähig, sollten Sie sich umgehendjuristisch von einem Rechtsanwalt beraten lassen.

Das gerichtliche Mahnverfahren können Sie in Schriftformüber im Schreibwarenhandel erhältliche Vordrucke einlei-ten. Zeitgemäßer ist der Weg über Online-Mahndienste, dievon Rechtsanwälten betrieben werden. (rs)

Steuervielfalt

Wir lieben das Finanzamt wie der Metzger den Vegetarier.Die vielen Steuern machen gerade Einsteigern zuschaffen,die den Schritt in die Selbstständigkeit wagen. Was gezahltwerden muss lesen Sie hier.

Welche Steuern zu entrichten sind, hängt von der Tätigkeit,der Rechtsform des Unternehmens und den Einkünften ab.Mit den folgenden Steuerarten muss man rechnen.

Die Einkommensteuer

„Am schwersten auf der Welt zu verstehen ist die Einkom-mensteuer“, sagte schon Albert Einstein. Ihr Name verrätes schon: Sie richtet sich nach den Einkünften, von denen

45

aber zuvor die Kosten privater Versicherungen sowie diepersönlichen Freibeträge, etwa für Alleinerziehende mitKindern, abgezogen wurden.

Als Einzelunternehmer oder Gesellschafter einer Perso-nengesellschaft hat man entweder Einkünfte aus einemGewerbebetrieb oder aus freiberuflicher Tätigkeit. Einkünf-te meint den Gewinn, den man aus der Einnahme-Über-schussrechnung oder der Bilanzierung ermittelt hat. DerGewinn errechnet sich durch Abzug der Ausgaben von denEinnahmen.

Als Gesellschafter und Geschäftsführer einer GmbH oder alsVorstand einer AG bezieht man Gewinnausschüttungen(Dividenden) aus den Geschäftsanteilen. Diese zählen zu denEinkünften aus Kapitalvermögen, die zu 50 Prozent versteu-ert werden. Die Anrechnung der Körperschaftsteuer entfällt.Außerdem bezieht man als Geschäftsführer oder Vorstandein Gehalt, das wie bisher versteuert wird. Für Gewerbetrei-bende, die im Gegensatz zu den Freiberuflern mit Gewerbe-steuer belastet sind, verringert sich die Einkommensteuerdurch eine pauschale Anrechnung der Gewerbesteuer.

Im ersten Jahr der Selbstständigkeit geht das Finanzamtvon den gemachten Angaben über den erwarteten Gewinnaus, der in der Finanzplanung genannt wurde. Man kannaber beim Finanzamt Widerspruch einlegen, wenn sich dieGewinnerwartungen reduzieren sollten.

Die Umsatzsteuer

Wer als Einzelunternehmer bisher von der Umsatzsteuer-pflicht willentlich oder automatisch befreit war, wird über dieVerpflichtung zur Abgabe der Umsatzsteuer (auch Mehrwert-steuer genannt) und deren Voranmeldung wenig erfreut sein.Dass man eine weitere Steuer zahlen muss, ist hier nicht wei-ter tragisch, doch das Finanzamt verlangt noch mehr.

46

Wer einer selbstständigen Tätigkeit nachgeht, muss seineEinnahmen versteuern. Deshalb ist die Einkommenssteuerauch die einzige Abgabe, die jeder Einzelunternehmer zuzahlen hat. Bleibt man unter dem Grundfreibetrag von 7.426Euro, ist man sogar von dieser Bürde befreit und zahlt vor-erst überhaupt keine Steuern. Darüber zahlt man als Ein-gangssteuersatz 16% und bis zu 47% beim Spitzensteuer-satz. Vielleicht wurde bisher noch die Kirchensteuer gezahlt,doch wenn der Umsatz im vorangegangenen Kalenderjahrüber 17.500 Euro hinausging, ändert sich einiges.

So kommt es zur Umsatzsteuerpflicht. Nun muss der Unter-nehmer auf seinen Rechnungen die Umsatzsteuer von der-zeit 16% oder 7% aufschlagen und auch eine Umsatzsteu-er-Identifikationsnummer angeben. Zuständig für dieErteilung der Identifikationsnummer ist das Bundesamt fürFinanzen. Das benötigt nur den Namen und die Anschriftsowie die Steuernummer und den Namen des zuständigenFinanzamts. Der Antrag kann schriftlich und neuerdingsauch online erfolgen.

Weitere Optionen

Die Mehrwertsteuer, die jetzt mit jeder gezahlten Rechnungzur Verfügung steht, wird an das Finanzamt abgeführt,doch die dem Unternehmer in Rechnung gestellten Mehr-wertsteuerbeträge, auch Vorsteuerbeträge genannt, kön-nen zuvor von der vereinnahmten Mehrwertsteuer abge-zogen werden. Dazu listet man bei der Umsatzsteuer-Vor-anmeldung detailliert die Vorsteuerbeträge auf, um dieSumme dann gegenzurechnen.

Diese sogenannte Vorsteuer wird also von der Umsatz-steuer abgezogen, die man an das Finanzamt überweisenmuss. Einerseits wird so vermieden, dass für ein Produktzweimal die gleiche Steuer erhoben wird, andererseits hatder Unternehmer damit einen zusätzlichen Gewinn. Der

47

Vorsteuerabzug sorgt dafür, dass weder der leistende Un-ternehmer noch der Unternehmer als Leistungsempfängerdurch die Umsatzsteuer belastet wird.

Umsatzsteuer-Voranmeldung

Der Unternehmer, der im Vorjahr eine Umsatzsteuerschuldvon mehr als 6136,00 Euro verbuchte, darf jeden Monat dieUmsatzsteuer anmelden, darunter reicht eine Anmeldungpro Quartal. Wer noch keine Umsatzsteuer zahlen musste,wird nach der letzten oder voraussichtlichen Jahressteuerbemessen. Immer muss man seine Umsatzsteuer für denletzten Voranmeldungszeitraum selbst berechnen und biszum 10. Tag nach Ablauf des Voranmeldungszeitraumsbeim Finanzamt angegeben.

Die Berechnung der Vorauszahlung, also der zu zahlendenUmsatzsteuer, darf man also selber vornehmen. Hat mandas Ergebnis dem Finanzamt mitgeteilt, ist die Vorauszah-lung zeitgleich bis zum 10. Tag nach Ablauf des Voranmel-dungszeitraumes fällig. Wird keine Voranmeldung einge-reicht, setzt das Finanzamt die Vorauszahlung fest. Mit derSteuererklärung erfolgt natürlich auch eine Jahresabrech-nung der Umsatzsteuer. Im Laufe des Jahres zuviel gezahl-te Umsatzsteuer wird dann erstattet.

Die Abgabe

Praktisch alle steuerpflichtigen Unternehmer sind gesetz-lich verpflichtet, ihre Umsatzsteuer-Anmeldungen elektro-nisch über das Elster-System zu übermitteln. Im soge-nannten Härtefall ist man davon befreit. Wenn also einComputer oder aber ein Internetanschluss nicht vorhandenist, darf man weiter Formulare auf Papier einsetzen. An-sonsten steht für die Übertragung das Elster-Formular zurVerfügung. Man bekommt es kostenlos auf CDROM vomFinanzamt oder kann es auch herunterladen.

48

Das Formular leitet den Anwender durch jede Erklärung, wo-bei es bei einigen Feldern unterstützende Assistenten anbie-tet. Auch werden einige der Daten geprüft oder selbstständigergänzt. So erspart man sich zum Beispiel die Berechnungdes Differenzbetrags zwischen der Umsatz- und Vorsteuer.Wer eine kommerzielle Buchhaltungssoftware im Einsatz hat,sollte dann besser die integrierte Elster-Schnittstelle benutzen,um sich den lästigen Datentausch zu erleichtern.

Wie bei allen vertrackten Steuerfragen macht es Sinn auchzum Thema Umsatzsteuer einen Steuerberater zu befragenoder zumindest Rat vom verantwortlichen Sachbearbeiterim Finanzamt einholen.

Die Gewerbesteuer

Gewerbesteuer zahlen gewerblich tätige Einzelunterneh-mer und Personengesellschaften sowie GmbHs und AGsan das Stadt- oder Gemeindesteueramt. Die Höhe der Steu-er ergibt sich aus dem Gewerbeertrag (Gewinn). Dieser

49

Die Website zur Elster-Software

Betrag wird mit der Steuermesszahl und mit dem Hebesatzmultipliziert, der von Gemeinde zu Gemeinde variiert.

Die Gewerbesteuer ist als Betriebsausgabe abzugsfähig,was bedeutet, dass sie den Gewinn und damit die Einkom-men- bzw. Körperschaftsteuer mindert. Eine Besonderheitfür gewerblich tätige Einzelunternehmer und Personenge-sellschaften bildet ein jährlicher Freibetrag bis 24.542,01Euro und eine pauschale Anrechnung der Gewerbesteuerbei der Einkommensteuer.

Die Körperschaftsteuer

GmbHs und AGs zahlen Körperschaftsteuer auf ihrenGewinn. Der Steuersatz beträgt hierfür 25 Prozent. Es wirdkein Unterschied gemacht, ob der Gewinn ausgeschüttetwird oder für Investitionen im Unternehmen verbleibt.

Die Lohnsteuer

Wer Mitarbeiter beschäftigt muss die Lohnsteuer einbehal-ten und an das Finanzamt weiterleiten. Außerdem müssendie Sozialversicherungsbeiträge für die Angestellten ermit-telt und an die Krankenkassen abgeführt werden.

Die Lohnsteuer wird nach dem Arbeitslohn so bemessen,dass sie der Einkommensteuer entspricht, die der Arbeit-nehmer schuldet, wenn er ausschließlich Einkünfte ausnichtselbständiger Arbeit erzielen würde.

Ein Steuerberater kann besonders in der Gründungsphasehelfen. Man selbst wird dann keine Zeit haben, alle Tricksund Kniffe auszunutzen, um Steuern zu sparen – wenn die-se überhaupt bekannt sind. (dm)

50

Raubvogel Elster – Übertragung von

Umsatz- und Lohnsteueranmeldung

Elster ist die Elektronische-Steuererklärung der deutschenSteuerverwaltung. Praktisch alle steuerpflichtigen Unter-nehmer sind ab 2005 gesetzlich verpflichtet, ihre Lohn- undUmsatzsteuer-Anmeldungen elektronisch über das Elster-System zu übermitteln. Das hat sowohl Vor- als auch Nach-teile.

Nutzen und Vorteile

Neben der zwingenden Anmeldung der Umsatz- und Lohn-steuer können mit Elster auch alle Anmeldungen von Son-dervorauszahlungen, Umsatz-, Einkommens- und Gewer-besteuererklärungen sowie Anträge auf Dauerfristverlän-gerung abgegeben werden.

Laut dem Elster Projekt „vermindert sich durch diese elek-tronische Datenübermittlung der Aufwand für die Datener-fassung und damit auch die Kosten. Es entfallen der auf-wändige Formulardruck und die Papierübermittlung. Beietwaigen Engpässen in der Datenerfassung werden ver-längerte Bearbeitungszeiten vermieden. Außerdem kannder Steuerberater anhand der elektronisch übermitteltenSteuerbescheiddaten per Programm feststellen, ob dasFinanzamt von der Steuererklärung abgewichen ist.“

Die Realität zeigt, dass in den meisten Bundesländern dieelektronischen Einkommenssteuererklärungen bevorzugtwerden. Bei zuviel gezahlten Steuern kommt man alsoschneller an sein Geld.

Von der Verpflichtung, die Lohnsteueranmeldung und dieUmsatzsteuer-Voranmeldung über das Elster-System zuübermitteln, wird man nur im Härtefall befreit. So ein Här-tefall ist das nicht Vorhandensein eines Computers oder

51

auch des Internetanschlusses. Lehnt das Finanzamt dieseBefreiung ab, bleibt als letzter Ausweg der Gang zumFinanzgericht, wobei die Schaffung der technischen Vor-aussetzungen vermutlich leichter wäre.

Die Standardsoftware

Für die Übermittlung aller elektronischen Erklärungen stehteinerseits das von den Elster-Entwicklern produzierte „Elster-Formular“ zur Verfügung, das an sich nur ein „interaktives“PDF-Formular ist. Man bekommt es kostenlos auf CD-ROMvom Finanzamt oder kann es von der Elster-Website herun-terladen. Unterstützt werden neben der Einkommensteuerer-klärung auch die Umsatz- und Gewerbesteuererklärung, dieLohnsteueranmeldung und die Umsatzsteuer-Voranmeldung.

Das Formular führt den Anwender nun Schritt für Schrittdurch jede Erklärung, wobei es bei einigen Feldern unter-stützende Assistenten anbietet. Auch werden einige derDaten geprüft oder selbstständig eingetragen. So erspartman sich zum Beispiel bei der Umsatzsteuer-Voranmel-dung die Berechnung des Differenzbetrags zwischen derUmsatz- und Vorsteuer.

52

Elster Formular Online

Zwar bietet die Software eine integrierte Update-Funktion, umdas Programm bei Änderungen ganz automatisch zu aktuali-sieren, doch bleibt sie eine Übergangslösung. Das Formularist wenig komfortabel, besonders wenn man bedenkt, dasshier alle Daten der laufenden Buchhaltung von der Buchhal-tungssoftware in das Formular übertragen werden müssten.

Buchhaltungssoftware mit Elster-Schnittstelle

Diese doppeltgeleistete Arbeit kann eingespart werden, daso gut wie jede kommerzielle Buchhaltungssoftware eineintegrierte Elster-Schnittstelle mit mehr oder weniger großenLeistungen anbietet. Alle Daten liegen in der Software vor.So reicht ein Knopfdruck aus, um die entsprechend umge-wandelten Daten an das Finanzamt zu übermitteln. Softwarewie Datev, Adata, 10it oder Sage, selbst jede Lexware Buch-haltung haben eine Elster-Schnittstelle integriert.

Egal, mit welcher Software gearbeitet wird, ganz ohnePapier geht es noch nicht. Immer wird nach der Übermitt-lung der Steuererklärung (wie etwa der Einkommens-steuererklärung) eine sogenannte komprimierte Steuerer-klärung ausgedruckt, die unterschrieben mit allen nötigtenBelegen an das Finanzamt gesendet werden muss. Etwaseinfacher wird es da schon mit der Umsatzsteuer- und derLohnsteuer-Voranmeldung gehandhabt, wofür man ein-malig eine Teilnahmeerklärung unterschreibt.

Thema Sicherheit

Bisher muss man sich bei der Anmeldung über Elster,außer mit dem Namen und der Steuernummer, nicht iden-tifizieren. So ist es theoretisch möglich, einem Unterneh-men zu schaden, indem falsche Daten gesendet werden.Die oft erteilte Einzugsermächtigung des Finanzamt tut einübriges. Eine wenig befriedigende Lösung wäre, diese Ein-zugsermächtigung zurückzunehmen.

53

Das Elster-Projekt soll nach und nach weiter ausgebautwerden. So wird schon bald die Lohnsteuerkarte dank demElster-Lohn Projekt überflüssig, da alle Lohnsteuerbeschei-nigungsdaten durch den Arbeitgeber an das Finanzamtebenfalls über das Internet gesendet werden.

Nach der Einführung der rechtskräftigen elektronischenSignatur in 2006 wird der Transfer papierloser Steuerdatensicherer werden, aber auch die Voraussetzung für neueTechniken wie die Steuerkontoabfrage geschaffen. Damitwären selbstständige Abfragen etwa des Steuerkontos zurÜberprüfung der Steuerschuld möglich, später auch dieAbfrage von Grunddaten, Fälligkeiten und eingegangeneZahlungen. Der „elektronische Kontakt“ wird demnach inZukunft mehr und mehr das Papier verdrängen. (dm)

Die Gesellschaft für musikalische Auf-

führungs- und mechanische Vervielfälti-

gungsrechte

Wer die Homepage, eine Flash-Präsentation oder einenFilm mit Musik hinterlegen will, muss die GEMA im Hin-terkopf haben. Allein ein Verdacht reicht bereits aus, umGebühren zahlen zu müssen. Der Nutzer ist in der Beweis-pflicht.

Die GEMA, die Gesellschaft für musikalische Aufführungs-und mechanische Vervielfältigungsrechte, ist ein über 100Jahre alter rechtsfähiger Verein, der unter anderem vomDeutschen Patentamt und dem Bundeskartellamt kontrol-liert wird. Fast alle Komponisten, Texter und die Musikver-

54

lage wählen die Mitgliedschaft, um den ausgiebigenGebrauch ihrer Schöpfungen urheberrechtlich überwachenzu lassen. Nur so kann der Rechteinhaber zu Geld kommen.Die Ausnahme ist die gemafreie Musik. Dazu später mehr.Die Generalüberwachung der GEMA kann kein einzelnerRechteinhaber bewältigen. Deshalb übergibt er mit demBerechtigungsvertrag seine Rechte der GEMA zur treuhän-derischen Verwaltung – und die kassiert ab.

Der Grundsatz lautet: Es muss immer dann an die GEMAgezahlt werden, wenn Musik aus dem GEMA-Katalogöffentlich wiedergegeben wird. Öffentlich bedeutet auch,wenn sie – egal wie – über das Internet zu hören ist. MitMusik ist nicht nur eine Einspielung eines Musikstücksdurch einen Musiker, sondern die Komposition an sichgemeint. Es kommt nicht darauf an, wer sie einspielt, son-dern ob die GEMA die Rechte hat. Sie ist das Finanzamt derMusikindustrie.

55

Die GEMA-Website

Musik im Internet

Wer schon gemafreie Musik gehört hat, kann sich vorstel-len, warum oft auf jegliche Rechte verzichtet wird. Sie isteinfach nur schlecht – meistens jedenfalls. Zudem kann einaktueller Hit oder ein bewährter Oldie ein Produkt eher auf-werten als unbekanntes Gedudel. Wer aber diese Musikganz oder nur in Ausschnitten Online anbietet, ist gezwun-gen, eine Lizenz einzuholen. Die GEMA hat für die Online-Nutzung spezielle Tarife entwickelt.

Man findet Lizenzen für Music-on-Demand mit und ohneDownload, zur Nutzung in Websites zu Präsentations-zwecken, zur Nutzung in Websites mit Electronic Com-merce und auch zur Nutzung durch Veranstalter von Inter-netradio. Für jeden Fall muss also der passendeGEMA-Tarif gefunden werden. Immer wird unterschieden,ob die Nutzung privat, gemeinnützig oder gewerblicherfolgt und wie hoch die Zugriffe sind. Als Website-Unter-malung eines Unternehmens etwa beträgt die Vergütungje Werk 25,00 Euro pro Monat, wobei die Anzahl derZugriffe bis zu 25.000 betragen darf. Darüber hinaus kostetes mehr.

Gemafrei oder Gemapflicht

Man sollte in der Regel davon ausgehen, dass ein Stückgemapflichtig ist. Wer es genauer Wissen muss, kann vonder GEMA schriftlich eine Auskunft verlangen, ob das jewei-lige Musikstück zum GEMA-Reportoire gehört. Hierfür ver-langt die GEMA eine geringe Bearbeitungsgebühr. Die Onli-ne-Datenbank der GEMA zeigt nur einen Ausschnitt aus demKatalog und bietet somit nur unzureichende Sicherheit.

Gemafreie Musik

Gemafreie Musik ist nicht immer kostenlos. In diesem Fallist es nicht die GEMA, welche die Rechte verwaltet. DerKomponist ist nicht Mitglied der GEMA, aber er besitzt den-

56

noch Urheberrechte, die er selbst wahrnimmt. Hier mussder Rechteinhaber selbst um Erlaubnis gefragt und viel-leicht eine Vergütung gezahlt werden. Kostenlos ist Musik,die in der „Public Domain“ steht. Das sind etwa Traditio-nals (Volksliedern) oder Musikstücke, deren Urheber bereitsseit mehr als 70 Jahren verstorben ist.

Vorteile der gemafreien Musik

� Die Lizenzgebühr für die Musik wird (meistens) nureinmal fällig. Die Kosten sind so besser einzuschätzen.

� Es gibt keine komplizierte Abrechnung mit der GEMA. � Die Musik ist auf Dauer preiswerter.

Manche Unternehmen haben sich auf gemafreie Musikspezialisiert und bieten diese einzeln oder im Paket aufCDROM an. Die Preise sind genauso unterschiedlich wiedie Qualität. Die Lizenzbedingungen sollte man gründlichlesen. Abhängig von der Anwendung sicher eine Alternati-ve zum Charthit.

Ob GEMA oder nicht, Rechte müssen in jedem Fall geklärtwerden, auch wenn die Website die Musikstücke generellfreigibt. Lieber übervorsichtig sein, als später tief in dieTasche greifen zu müssen.

57

Online-Datenbank der GEMA

Unter Geiern: Die KSK

Wer glaubt, dass ihn die Künstlersozialkasse, kurz KSK,überhaupt nichts anginge, der befindet sich wohlmöglichauf dem Holzweg. Zahlreiche im Internet aktive Unterneh-men, gleich welcher Größe, sind abgabepflichtig – ohne eszu wissen.

Die KSK ist eine Behörde, keine Krankenkasse, die im Rah-men des 1983 in Kraft getretenen Künstlersozialversiche-rungsgesetzes (KSVG) Abgaben vereinnahmt und mit dergesamten Abwicklung betraut ist. Dies dient der sozialenAbsicherung von Künstlern im weitesten Sinne, die nur50% der anfallenden Kosten selbst tragen, weitere 25%übernimmt der Staat und den Rest die so genannten „Ver-werter“. Also diejenigen, die Leistungen von Künstlern inAnspruch nehmen. Eine gute Sache für die Leistungsemp-fänger, weniger schön für alle, die in der Zahlungspflichtstehen.

In Zeiten knapper Kassen ist die KSK bemüht, möglichstviele solcher „Verwerter“ ausfindig zu machen, und hatdabei auch das Internet entdeckt. Abgaben können für biszu 5 Jahre im Nachhinein verlangt werden.

58

Die Website der Künstlersozialkasse

Als Behörde ist es der KSK möglich Bußgelder zu verhän-gen und Betriebsprüfungen zu veranstalten.

Warum Sie davon betroffen sein können? Abgabepflichtigist jede künstlerische Leistung. Dazu gehören nicht nurRedakteure oder Journalisten, die eine Firmenhistorie for-mulieren, ein Weblog füllen oder eine Website mit Textenversorgen, auch Werbung, Grafik, Web- und Multimedia-design gehören dazu. Ein Flashfilm: Abgabepflicht! EinAnzeigentext: Abgabepflicht! Ein neues Logo: Abgabe-pflicht! Eine Titelmelodie für ein Video: Abgabepflicht! Einetechnische Beschreibung für ein Produkt: Abgabepflicht!Auch etwaige Lizenzgebühren fallen darunter. Abgaben-pflichtig ist jeweils der Empfänger dieser Leistungen.

All das hat nichts damit zu tun, ob der von Ihnen beauf-tragte Künstler bei der KSK versichert ist oder nicht.

Es spielt auch keine Rolle ob der Auftragnehmer eine Fir-ma, ein Selbständiger, ein Freiberufler oder jemand ist, derlediglich einer gelegentlichen Nebentätigkeit nachgeht.

„Die Künstlersozialabgabe wird auch für Zahlungen an Per-sonen erhoben, die selbständig künstlerisch / publizistischtätig sind aber nicht nach dem KSVG versichert werdenkönnen. Künstler oder Publizist in diesem Sinne ist auch,wer die künstlerische / publizistische Tätigkeit nur neben-beruflich oder nicht berufsmäßig ausübt (Beamte, Studen-ten, Rentner, die nebenbei publizistisch oder künstlerischtätig sind) oder wer seinen ständigen Aufenthalt im Aus-land hat oder im Ausland tätig ist.“ Zitat aus der Informati-onsschrift Nr. 1 zur Künstlersozialabgabe

Die Abgaben an die KSK werden jährlich neu gefasst undschwanken etwa zwischen 4 und 6%. Für das Jahr 2006 gel-ten 5,5%. Je weniger „Verwerter“ ihren Pflichten nach-kommen, desto höher wird dieser Anteil zwangsläufig aus-fallen. Derzeit zahlen etwa 46.000 Betriebe.

59

Nicht abgabepflichtig sind Aufwandsentschädigungen,Umsatzsteuern und Reisekosten. Abgaben fallen nicht an,wenn Leistungen von juristischen Personen erbracht wer-den, beispielsweise von GmbHs, AGs oder eingetragenenVereinen.

Wer nicht alles selbst macht und die Leistungen Andererbezieht oder bezogen hat, könnte also zum Kreise der „Ver-werter“ gehören. Dies heißt, die gezahlten Entgelte müs-sen einmal pro Jahr der KSK gemeldet werden. Dies isteine gesetzliche Pflicht, die auch dann besteht, wenn manvon der Sache nichts weiß oder bislang nichts wusste. Tutman das nicht und wird von der KSK entdeckt, ist mit einerBetriebsprüfung und möglicherweise umfangreichen Nach-zahlungen zu rechnen. (sl)

Datenkrake Schufa – Das sind Ihre Rechte

Kein Kredit, keine Hypothek, kein Mobiltelefon, kein Ebay-Account und kaum ein Konto ohne Schufa-Auskunft. Soerhalten Sie Informationen und schützen sich vor Fehlern.

Die Schufa im Detail

„Schutzorganisation für allgemeine Kreditsicherung“ nenntsich diese Schuldnerkartei. Schon 1927 gegründet, möch-te die Schufa seitdem vor allem ihre Vertragspartner vorKreditausfällen schützen, auch wenn der Schutz der Ver-braucher vor Überschuldung gerne vorgeschoben wird. Daüberrascht es kaum, dass Banken und Kreditinstitute dieInhaber sind. Sehr praktisch, da diese Informationen geben

60

wie nehmen. Die ausgetauschten 350 Millionen Einzelda-ten von 60 Millionen Menschen werden dann auch gernegenutzt – natürlich nur, um sich abzusichern.

Das Scoring

Und dazu bekommt fast jeder von uns ein individuelles„Schufa-Scoring“ verpasst. Selbst wer sich noch nie etwaszuschulden hat kommen lassen. Das Prognoseverfahrender Schufa errechnet einen Punktestand, der zwischen einsund tausend liegt. Je niedriger der Wert, desto schlechterdie finanzielle Prognose, was sich auf zukünftige Krediteauswirken kann. Noch undurchsichtiger wird dieser Wertdurch die Tatsache, dass die gleiche Person unterschiedlichbewertet wird, je nachdem welche Branche die Anfragestellt. Grundlage sind statistisch-mathematische Analyse-verfahren. Gesammelte Daten der Vergangenheit sollen aufgleichartige Begebenheiten schließen. Die Datenschützerbemängeln, dass es sich nicht um persönliche Informatio-nen, sondern um anonyme Massendaten handelt.

61

Die Website der Schufa

Stehe ich drin? – Die Selbstauskunft

Interessant und oft auch zwingend notwendig ist die Selbst-auskunft. Gesetzlich vorgeschrieben ist allerdings nur diekostenlose mündliche Auskunft. Dazu müsste man aber eineder dreizehn regionalen Geschäftsstellen besuchen, die inStuttgart, Bremen, Bochum, Hannover, Saarbrücken, Mann-heim, München, Düsseldorf, Köln, Frankfurt, Leipzig, Ham-burg und Berlin zu finden sind. Wer sich den Weg sparenmöchte, zahlt 7,60 Euro, die für die Selbstauskunft über einOnline-Formular oder für einen schriftliche Antrag anfallen.Die Antwort kommt per Post und sollte auf Fehler hin über-prüft werden.

Was weiß die Schufa alles?

Außer dem Namen, Geburtsdatum und der Anschrift spei-chert die Schufa positive und negative Merkmale, wobeidie Positivmerkmale nur mit Zustimmung des Kundenübermittelt werden dürfen (Schufa-Klausel). Zu den Positiv-merkmalen gehören Bürgschaften, Leasingverträge, Kre-ditanträge, gestellte Kreditkarten und Daten über Girokon-ten. Zu den Negativmerkmalen zählen die Kündigung desGirokontos, Kündigung von Krediten, die Scheckrückgabemangels Deckung, der Scheckkartenmissbrauch, Verbrau-cherinsolvenzverfahren, gemahnte, aber unbezahlte For-derungen, Vollstreckungmaßnahmen, Abgabe der Eides-stattlichen Versicherung und Mahnbescheide.

Die Schufa speichert keine Daten zum Arbeitgeber, zumFamilienstand, zum Einkommen und Vermögen und zuDepotwerten. Gerade die drei letzten Punkte könnten fürden Verbraucher durchaus positiv sein.

Folgenreiche Fehler

Bei der Löschung von Negativmerkmalen treten des öfte-ren Fehler im Datensatz der Schufa auf. Die Schufa selbst

62

gibt zu, dass es bei der Menge an Informationen schwierigist, die Datenbank aktuell zu halten. Umso wichtiger ist dieSelbstauskunft vor größeren finanziellen Entscheidungen,wie etwa der Antrag eines Ratenkredites. Sollte dieseSelbstauskunft Fehler enthalten, so kann man sich an dienächste Geschäftsstelle wenden und die fehlerhaften Anga-ben prüfen lassen. Das Kopfschütteln in der Bank sollteman sich sparen.

Das sind Ihre Rechte

Die Schufa-Einträge müssen nach einer gewissen Zeit wie-der gelöscht werden. Dazu gehören die Angaben über Kre-dite zum Ende des dritten Kalenderjahres nach dem Jahrder Rückzahlung. Auf Antrag löscht die Schufa diese Datensofort bei erfolgter Tilgung. Daten über nicht vertrags-gemäß abgewickelte Geschäfte werden ebenfalls zumEnde des dritten Kalenderjahres nach dem Jahr der Spei-cherung gelöscht. Giro- und Kreditkartenkonten sofort,wenn das Konto aufgelöst wird. Daten aus den Schuldner-verzeichnissen der Amtsgerichte nach drei Jahren. Auchhier ist ein vorzeitiges „Update“ der Daten möglich, wennder Schufa eine Löschung durch das Amtsgericht nachge-wiesen wird.

Die Selbstauskunft sollte auf diese Daten hin überprüft wer-den. Wie schon geschrieben, sind oft veraltete Daten imBestand. Das diese Daten berichtigt oder gelöscht werden,ist Ihr Recht (§33ff des Bundesdatenschutzgesetzes). Könnendie Daten nicht geprüft werden, müssen sie bis zur Klärungder Angelegenheit gesperrt werden. Im Härtefall, etwa wenndurch falsche Schufa-Daten ein Schaden entstanden ist oderdroht, bleibt nur noch der Gang zum Anwalt.

Das Interesse der Schufa-Mitglieder ist verständlich. Dochauch Betroffene haben ihre Rechte, die sie nutzen sollten.(dm)

63

64

Webdesign, Usability und Navigation

Wie sich der Surfer auf einer Website bewegt, ist nicht rest-los geklärt, doch inzwischen weiß man eine Menge darü-ber – auch wenn sich so manches Rätsel erst nach undnach enthüllt.

65

Die Entwicklung eines Styleguides

Der Styleguide ist ein mehr oder weniger umfassendesRegelwerk, das die Erscheinung sämtlicher Online-Publi-kationen einer Firma oder Institution in klaren Grundsätzenfestlegt und regelt. Was für weltweit tätige Konzerne zwin-gend ist, macht auch im Kleinen Sinn.

Online-Aktivitäten beschränken sich nicht unbedingt nurauf eine Website, deren Gestaltung einmal festgelegt wur-de und die nun fortlaufend gepflegt und erweitert wird. Ver-schiedene Projekt- und Aktionsseiten, Kampagnen,Weblog, Email, Newsletter mögen dazukommen. Der Sty-leguide stellt sicher, dass all das dem Erscheinungsbild desUnternehmens entspricht, die jeweiligen Seiten vom Besu-cher wieder erkannt werden und in gleicher Art und Weisebenutzt werden können.

Was gehört in den Styleguide?

Fast alles kann festgelegt werden. Wie weit das sinnvoll ist,bleibt den Erfordernissen des jeweiligen Projekts überlassen.Struktur, Layout, Navigation, Farben, Dateiformate (etwaFlash, PDF, ZIP), Schrift und Typographie, Logoposition, Text-komponenten wie Überschriften und Anreißer, Platzierungund Abmessung von Bildern und Illustrationen, verwendeteIcons, das Aussehen von Tabellen und Listen, die Gestaltungvon Suchboxen und Formularen, einheitliche Textgestaltung(etwa Sonderzeichen, Zitate, Abkürzungen), verwendeteTechniken. Eine bestimmte Reihenfolge ist nicht erforderlich.

Dass sich die Bundesregierung bei einer Vielzahl von Sei-ten und Projekten über ein einheitliches ErscheinungsbildGedanken macht, überrascht nicht. Der dazugehörige Sty-leguide bringt es auf satte 68 Seiten und regelt so ziemlichalles bis ins Detail.

66

67

Augen geradeaus! Welches Icon wann zum Einsatz zukommen hat regelt der Styleguideder Bundeswehr

Exakte Vorschriften für diePositionierung von

Abbildungen innerhalb desContents

Der Styleguide ist kein Pflichtenheft. Er wird nicht nur fürein Einzelprojekt verwendet. Er richtet sich stattdessen anverschiedene Designer, Agenturen und Mitarbeiter undsollte also mögliche Fragen bereits im Vorfeld beantwortenkönnen.

Grundlagen für die Entwicklung eines Styleguides sindeventuell vorhandene Vorgaben für das Corporate Design(CD). Diese gilt es ins Web zu übertragen, beziehungswei-se zu ergänzen. Es ist klar, dass eine Hausschrift oder eineSchriftenvorgabe nicht ins WWW übernommen werdenkann. Ebenso wenig macht es Sinn mit definierten Pixel-werten zu arbeiten, das Web verlangt relative Werte.

Es macht Sinn einen Styleguide in Form von HTML zupublizieren. Er muss nicht öffentlich zugänglich sein, kannso aber Live-Beispiele zeigen, außerdem Templates oder

68

ABB Styleguide

Photoshop-Vorlagen bereithalten. Zudem ist zu bedenken,dass wir es mit einem höchst dynamischen Medium zu tunhaben. Ergänzungen und Anpassungen in der Zukunft sindwahrscheinlich.

Ein einfacher Styleguide macht auch Sinn, wenn es um daseigene Projekt geht. Mitarbeiter oder Dienstleister müssennicht jedes Mal von neuem instruiert werden, die Stringenzbleibt ohne Aufwand gewahrt. Das spart Zeit, Kosten undÄrger. Auch für Texte lässt sich ein entsprechendes Regel-werk aufstellen. (sl)

Gesetzlich verordnet: Barrierefreies Web

Für Behörden des Bundes ist es Gesetz – die BITV – die Bar-rierefreie Informationstechnik Verordnung; für Länder undKommunen ist sowas im Gespräch und für alle anderen istes zumindest erwägenswert: Eine barrierefreie – oder besserformuliert barrierearme – Website. Worauf kommt es an?

Wer sauberen HTML-Code schreibt, wird kaum Problememit der Umstellung bekommen. Für wen Usability keinFremdwort ist, sogar noch weniger. Einige Punkte müssenbeachtet werden.

Blinde haben Probleme mit Nicht-Text-Elementen

Eigentlich ein ganz logisches Problem. Grafisch dargestell-ter Text, Bilder, ImageMaps, animierte GIFs, grafischeMenüführungen oder Buttons und sogar ASCII-Zeichnun-gen benötigen eine Alternative, einen beschreibenden Text.Laut Vorgabe sollen sämtliche Formate, die nicht im Textbeschrieben werden, einen alternativen Text bekommen.

69

Das kann leicht getestet werden, indem einfach in den Ein-stellungen des Browsers das Laden von Bildern verboten wird.An Stelle des Bildes zeigt der Browser nun den alternativenText an, sofern dieser auch hinterlegt ist. Selbst schmückendeElemente oder Spacer, die selbst keine Inhalte transportieren,sollten mit einem leeren alt=“” versteckt werden.

Wenn sich jetzt beim Lesen ohne Bilder noch der gesamteInhalt und jegliche Funktionen der Seite erschließen lassen,kann dieser Punkt getrost abgehakt werden. Denn einScreenreader liest genau das vor, was jetzt noch auf demBildschirm zu lesen ist. Es ist klar, dass auch so der Inhaltweiterhin Sinn macht. Bei Imagemaps bekommt jede akti-ve Region ein eigenes „alt“-Attribut. Unmittelbar an derGrafik sollten aber die gleichen Ziele als zusätzliche Linksangeboten werden.

Farbenblinde sehen anders

Etwa jeder zehnte männliche Besucher einer Website istfarbenblind. Wobei es ganz unterschiedliche Arten der Far-benblindheit gibt. Deshalb sollte generell auf hohen Kon-trast geachtet und auf Hinweise wie „Bitte klicken Sie aufden grünen Button“ verzichtet werden. Ein hoher Kontrastnützt auch bei besserer Darstellung auf Schwarz-Weiß-Bild-schirmen. Ein Graustufentest im Grafikprogramm alsScreenshot simuliert diesen Effekt. Wer sich selbst einmaltesten möchte besucht die Internetseite von UMDS oderder GFO. Praktisch: Das kostenlose Online-Tool Vischeckoder der Colorblind Filter zeigt Websites mit den Farben an,wie sie Besucher mit den gängigsten Farbfehlsichtigkeitensehen würden.

Problem Sprache

Sprachliche Besonderheiten wie der Wechsel der Spracheoder Abkürzungen sind zu kennzeichnen. Leider verstehen

70

die meisten Browser die in HTML vorgesehenen Elementefür die Anzeige des Sprachwechsels überhaupt nicht. Dochwo liegt das Problem für den Behinderten. Screenreadersprechen zumeist sämtliche Worte in der voreingestelltenSprache aus. Deshalb werden Fremdsprachen etwaskomisch klingen. Wer trotzdem die HTML-Seiten passendausrüsten möchte, beachte das folgende Beispiel:

<span lang=“en“ xml:lang=“en“>Highlight</span>

Ein weiteres Problem der Sprache sind Abkürzungen undAkronyme wie AIDS und PISA. Diese sind „an der Stelleihres ersten Auftretens im Inhalt zu erläutern und durch diehierfür vorgesehenen Elemente der verwendeten Markup-Sprache kenntlich zu machen“, so die Verordnung.

Die Uneinigkeit macht das zum großen Problem. SCSI zumBeispiel kann sowohl „Skasi“ als auch „ES Zeh Es Ih“ aus-gesprochen werden. Hinzu kommt, dass das <acronym>–Tagvon vielen Browser nicht verstanden wird, auch vom Scre-enreader und Sprachbrowser nicht. Verweise auf ein Glossarsind hier wohl die beste Lösung. Mit <html lang=“de“>bekommt der Browser noch die Information mit, welcheSprache die vorherrschend verwendete natürliche Spracheist.

Was ist mit Tabellen?

Layout-Tabellen aus HTML sind aus guten Gründen out,weshalb auch die BITV CSS empfiehlt. Werden Tabellenwirklich zur Darstellung tabellarischer Daten verwendet,sollen Zeilen– und Spaltenköpfe mit den Überschriften dereinzelnen Zellen mit Tags wie <caption>, <thead> und <tbo-dy> sowie <th> und <td> mit den Attributen id und headersbeschrieben werden. Verschachtelte Layout-Tabellen sindgenerell tabu.

71

Die Verordnung sagt: „Tabellen sind nicht für die Text- undBildgestaltung zu verwenden, soweit sie nicht auch inlinearisierter Form dargestellt werden können“. Für denWebdesigner vermutlich die schwerste Hürde. Notwendigwird es dadurch, dass der Screenreader nicht mehrerkennt, in welcher Reihenfolge er weiterlesen muss.

Problemfall Animationen

Das Internet ist schon sehr lange nicht nur eine einfacheSammlung von Textdokumenten, sondern auch Bewegungmit Flash oder per DHTML. Nun sagt die BITV: „Bild-schirmflackern ist zu vermeiden“ und „Blinkender Inhalt istzu vermeiden“. Die Begründung ist, dass bei Epilepsie-kranken bestimmte Frequenzen flackernder Inhalte einenAnfall auslösen können. Daher sollten schnelle Bewegun-gen und ein zu schneller Wechsel von hell zu dunkel ver-mieden werden. Das gilt für animierte GIFs als auch für allesonstigen Formate wie Flash oder Java. Nicht nur der Epi-leptiker wird dafür dankbar sein.

Für Animationen mit viel Inhalt muss es die Möglichkeitgeben, den Film anzuhalten und vor- und zurückzuspulen.Flash bietet seit jeher diese Möglichkeit. Für alle anderenAnimationen soll eine gleichwertige Funktion bereitgestelltwerden.

Die BITV – die Barrierefreie Informationstechnick Verord-nung – für das barrierefreie Internet gibt Richtlinien, diegrößtenteils vom „guten Webdesigner“ seit eh und jebeachtet werden. Auf Feinheiten gilt es trotzdem zu achten.

Frames – Ein altes Übel

Leider haben die Sprachausgabeprogramme große Pro-bleme mit der Wiedergabe von Webseiten mit Frames. Jenach System werden die Inhalte gar nicht oder nur teilwei-

72

se wiedergegeben. Das <noframes>–Element steht jedemzur Verfügung, aber dort nochmals die gesamte Websiteohne Frames zu hinterlegen ist sehr aufwändig. Kein Kun-de wird das bezahlen wollen. Man muss aber bedenken,dass die für den sehenden Besucher problemlose Orientie-rung beim Blinden nicht gegeben ist.

Frames werden oft ohne Sinn benannt. Häufig nur mit „fra-me_links“ und „frame_rechts“ betitelt geben sie keine Aus-kunft über den wahren Inhalt. Die Benennung der Framessollte also den Sinn und Zweck der einzelnen Frames wie-dergeben. Wer nicht auf Frames verzichten will oder kann,sollte das beherzigen und einen Frame zum Beispiel „Navi-gation“, den anderen „Inhalt“ nennen. Besser ist der kom-plette Verzicht auf diese Technik.

Usability oder die Gebrauchstauglichkeit

Zum Thema Usability sagt die Verordnung: „Navigations-mechanismen sind übersichtlich und schlüssig zu gestal-ten“ und „Das Ziel jedes Hyperlinks muss auf eindeutigeWeise identifizierbar sein“. Das bedeutet, dass jeder Linkauch ohne Zusammenhang eine eindeutige Aussage zumZiel haben muss. Manche Browser fassen auf Wunsch dieLinks einer Seite zusammen. Diese Orientierungshilfe istdahin, wenn ein Link nicht eindeutig benannt wurde. Mitdem title–Attribut können weitere Informationen zum Zielübermittelt werden.

Weiterhin sagt die Verordnung, dass, wenn inhaltlich zusam-menhängende Dokumente getrennt angeboten werden,Zusammenstellungen dieser Dokumente bereitzustellensind. Wenn eine HTML-Seite also eine Folge aus einer Serieist (etwa Seite 2 von 4), sollte die Hierarchie dieser Serie mitLink Relations abgebildet werden. Die Tags dazu sind <linkrel=“start“>, <link rel=“previous“>, <link rel=“next“> und

73

<link rel=“last“>. Diese Daten können aber auch Verweiseauf ein Glossar, ein Inhaltsverzeichnis, eine Suchfunktionoder auch eine Hilfe–Seite sein.

Die Bestimmung aus der Verordnung „Es sind Informatio-nen zur allgemeinen Anordnung und Konzeption einesInternetangebots, zum Beispiel mittels eines Inhaltsver-zeichnisses oder einer Sitemap, bereitzustellen“ ist klar. EinInhaltsverzeichnis oder eine Sitemap sollte bei größerenProjekten eh zum Standard gehören. Genauso eine Such-funktion mit simpler Volltextsuche und zusätzlich einerKomfortsuche sowie „schlüssig und nachvollziehbare Navi-gationselemente“.

Kompatibilität zum Screenreader

In der BITV steht dazu: „Das Erscheinenlassen von Pop-Upsoder anderen Fenstern ist zu vermeiden. Die Nutzerin, derNutzer ist über Wechsel der aktuellen Ansicht zu informie-ren“. Das unerwünschte Öffnen von Pop–Up–Fenstern istbeim Internetsurfer nicht sonderlich beliebt. Auch Links, dieInhalte im neuen Browserfenster öffnen, sollten vermiedenwerden. Bei sich automatisch öffnenden Fenstern kommtes zu dem Problem, dass die Ansicht sich unaufgefordertändert. So wird der Clickstream unterbrochen. Die Historydes Browsers ist wertlos und es gibt kein „zurück“.

Die folgende Regel ist leicht zu verstehen. Man soll „beiallen Formular-Kontrollelementen mit zugeordnetenBeschriftungen Sorge tragen, dass die Beschriftungen kor-rekt positioniert sind und „genau ihren Kontrollelementenzugeordnet werden können“.

„Nebeneinanderliegende Hyperlinks sind durch von Leer-zeichen umgebene, druckbare Zeichen zu trennen“.Screenreader haben die unangenehme Eigenschaft, beilangen Wortfolgen ohne Punkt und Komma in der Satzme-

74

lodie abzufallen, was nicht gerade zum Hörgenuss führt.Druckbar heißt, dass Zeichen aus dem verwendeten Zei-chensatz genutzt werden müssen, also keine Leerzeichenwie „nbsp;“ oder gar Spacer-GIFs. Hier hat sich das Pipe-Zeichen ( | ), umgeben von jeweils einem Leerzeichendurchgesetzt.

Orientierung

Dass Frames eindeutig zu benennen sind, wurde weiteroben schon erwähnt. Weiterhin verlangt die Verordnung,dass inhaltlich verwandte oder zusammenhängendeHyperlinks zu gruppieren sind. Die Gruppen sind eindeutigzu benennen und müssen einen Mechanismus enthalten,der das Umgehen der Gruppe ermöglicht. So sollen alter-native Ausgabemedien die Möglichkeit bekommen, denSurfer bei der Navigation in nichtgrafischen Umgebungenzu unterstützen.

Bei der Sprachausgabe fehlt der visuelle Kontext, wasbedeutet, dass eben nicht so einfach von Textblock zu Text-block gesprungen werden kann. Nicht jeder will alles lesenmüssen, deshalb ist es sinnvoll, Blöcke mit einem Verweisinnerhalb der Seite überspringbar zu machen. Diesgeschieht über lokale Anker wie <a href=“#inhalt>, die aufeine Stelle der gleichen Seite mit einer ID (etwa <divid=“zweitespalte“>) verweist. Dies sind genau die ID’s, dieman auch zum Wiedererkennen von Blöcken einsetzt, umper CSS Stile zuweisen zu können. Zwei Fliegen mit einerKlappe, sozusagen.

Auch wenn die Verordnung die Gleichstellung von Behin-derten zum Ziel hat: Sie bringt Vorteile – für jeden Men-schen. (dm)

75

Das Usability Mini-Lexikon

Jeder Fachbereich kennt seine Begriffe, auch die Usability.Dieses kleine Lexikon soll mit kurzen und prägnantenErklärungen helfen, den Dschungel zu durchdringen. Vonder 3-Klick-Regel bis Z wie Zeigarnik-Effekt.

3-Klick-Regel

Die 3 Klick Regel besagt, dass ein Besucher wahrscheinlichaufgibt, wenn er nach 3 Mausklicks nicht zum Gesuchtenvorgedrungen ist. Wichtiger ist immer noch, dem Besucherdeutlich zu machen, am richtigen Ort zu sein – dann nimmter auch 10 Klicks in Kauf. Ihr Gutes hat die Regel aber den-noch, sie hilft dem Designer sich auf Leser- und Kunden-bedürfnisse zu konzentrieren.

80/20 Regel

Die 80/20 Regel, auch nach ihrem Entdecker VilfredoPareto „Pareto Prinzip“ genannt. Vilfredo Pareto unter-suchte wie sich das Volksvermögen in Italien verteilte undfand heraus, dass 80% des Vermögens bei 20% der Fami-lien konzentriert waren. Dieses Prinzip lässt sich auf ver-schiedene Lebensbereiche übertragen, zum Beispiel dar-auf, dass mit 20% der Kunden 80% des Umsatzes erzieltwerden oder auch, dass sich 80% der Arbeit mit 20% Auf-wand erledigen lässt.

Accessibility

Unter Accessibility (zu Deutsch soviel wie Zugänglichkeit)versteht man einen barrierearmen oder auch barrierefrei-en Zugang zu Webseiten. Das bedeutet, dass Webseitenvon Menschen mit einer oder mehreren Behinderungenohne Probleme genutzt werden können.

76

Access-Keys

Es handelt sich um Tastaturkürzel. Damit lässt sich perTastatur navigieren. Dieses kommt besonders Menschenentgegen, die aufgrund einer Behinderung nicht oder nurschlecht in der Lage sind, mit der Maus zu navigieren. Mitdem Attribut „accesskey“ im einleitenden Verweis-Tag kön-nen Sie ein Zeichen auf der Tastatur bestimmen, das derAnwender drücken kann, um den Verweis direkt anzu-springen (Accesskey = Zugriffstaste).

Assessment-Test

Ein Einschätzungs- oder Beurteilungstest.

Benchmarking

Ein Leistungsvergleich. Auch üblich in der Betriebswirt-schaft oder beim Vergleich der Leistungen mehrerer Com-puter.

Deep Link

Ein Deep Link, zu Deutsch „tiefe Verknüpfung“, verweistnicht auf die Startseite einer Website, sondern direkt aufeine Unterseite. Dadurch kommt der User gezielt an spezi-elle Informationen, ohne erst über das Menü suchen zumüssen.

Evaluierung

Mit Evaluierung ist allgemein die Bewertung von Prozes-sen nach verschiedenen Kriterien gemeint. Es können derProzess selber und/oder auch das Ergebnis gemeint sein.Die heuristische Evaluierung ist eine von Jakob Nielsenentwickelte Methode, in der Usability Experten mittelseiner Heuristikliste versuchen, möglichst viele Problemeaufzudecken. Die heuristische Evaluierung kann zu jedemZeitpunkt angewendet werden.

77

Eyetracking

Bei dem Verfahren des Eyetracking werden mit Hilfe einerspeziellen Kamera Augen- und Kopfbewegungen derBenutzer aufgezeichnet. Die Auswertung zeigt welcheBereiche einer Seite stärker oder überhaupt wahrgenom-men werden. Die Ergebnisse der Tests fließen dann in De-signänderungen ein.

Expertentest

Bei diesem Verfahren wird die Website von einem Fach-mann begutachtet und auf Fehler überprüft. Einige Dienst-leister bieten sogar den Soforttest via Telefon an. Ein ernst-hafter Tester befasst sich nicht sehr intensiv mit einemAngebot, bevor er es testet, um möglichst wenig Vor-kenntnisse in die Analyse einzubringen und dem realenUser näher zu sein. Ein solcher Test dauert zwischen einerhalben und einer Stunde. Der Expertentest ist erheblichpreiswerter und schneller als ein echter User-Test.

Heatmap

Die Auswertung eines Eyetrackings wird grafisch aufberei-tet und über die Seite gelegt. Unterschiedliche Hitzefleckenmachen deutlich, woran sich das Interesse der Probandenfestmacht. In der Regel werden besonders auffällige Berei-che dabei in Rot und Gelb hervorgehoben, während dieunbeachteten Bereiche eher dunkel (Blau / Schwarz) blei-ben.

Heuristik

Von Experten und/oder erfahrenen Benutzern durchge-führte Heuristikanalyse. In der Analyse wird versucht Usa-bilityprobleme einer Website auf der Basis von grundle-genden Prinzipien aufzudecken. Die Basis solcherUntersuchungen sind Checklisten, welche zum Beispiel fol-gende Punkte beinhalten: Design, Orientierung und Navi-

78

gation, Sprache, Dialog, Inhalte, Textgestaltung, Fehlerbe-handlung. Anschließend wird eine Liste erstellt, auf wel-cher die Probleme, je nach Schwere, eingestuft werden.

Hotkey

Eine Kombination von Tastaturbefehlen. In der Windows-welt beispielsweise bewirkt das gleichzeitige Drücken vonSTRG und P das Erscheinen des Druckmenüs. Öftersgelang man durch das gleichzeitige Betätigen von ALT undS in die Suchmaske einer Website. Das ist allerdings jenach Browser und Betriebssystem nicht immer möglich.Jedes Softwareprogramm kennt eine Vielzahl eigener Hot-keys. Einige davon sind durch das jeweilige Betriebsystemvorgegeben.

Hotspot

Ein anklickbarer Bereich bei dessen Berührung mit demMauszeiger dieser seine Form verändert. Dies kann einTextlink oder eine Grafik sein. Aber auch Flächen wie Tabel-len(zellen) oder Container kommen dafür in Frage. EineImage-Map enthält in der Regel gleich mehrere Hotspots.

Fokusgruppe

Zu einer Gruppe zusammengefasste Testpersonen. Sie ver-sucht das Zielpublikum des zu testenden Webprojekts imKleinen abzubilden.

KISS

Eine grundlegende Regel für Design jeder Art. Mach es ein-fach! Im Original: „Keep it Simple, Stupid“.

Legibility

Mit Legibility ist die (visuelle) Lesbarkeit eines Textesgemeint.

79

Paginierung

Paginieren heißt Seiten durchzunummerieren. Im OnlinePublishing werden Paginierungen benutzt um einen aufmehrere Seiten umbrochenen Artikel oder Bericht zu ver-binden. Auch bei den für Suchmaschinen typischen Zah-lenfolgen am Ende der Suchergebnisse (1 2 3 4 5 6 Weiter)handelt es sich um Paginierungen.

Scheinlink

Scheinlinks gehören zu den Anfängerfehlern. Ein solcherLink entsteht immer dann, wenn Textpassagen oder Über-schriften mit dem <u>-Element eine Unterstreichung erhal-ten, aber keinen Link enthalten. Der Surfer kann das kaumunterscheiden und ärgert sich über den vermeintlichenLink, der nicht funktioniert. Das <u>-Element (oder seinCSS Pendant) sollte deshalb nur in seltenen Ausnahmefäl-len eingesetzt werden.

Besonders leicht fällt man darauf herein, wenn der Schein-link innerhalb eines Fließtextes auftaucht.

Sitemap

Die Sitemap kann eine verzeichnisartige oder auch einegrafische Darstellung sein. Besonders gute Sitemaps bie-ten nicht nur den Zugriff auf alle Seiten, sondern gebenEinblick in die Struktur der Website. Und das bringt demBesucher einen Überblick, der kaum anders zu realisierenist. Ein alphabetisches Inhaltsverzeichnis kann die Sitemapnoch unterstützen und die Themen des Projekts auflisten.

Splash-Page

Eine Vorschaltseite, auch Splash Screen genannt. Sie wirdim Gegensatz zur Brückenseite meist aus gestalterischenGründen eingesetzt. Da solche Seiten oft nicht viel mehr alseine Grafik enthalten, sind sie für Suchmaschinen ebensowie für den Besucher relativ wertlos.

80

Stickiness

Der Begriff lässt sich mit „Klebrigkeit“ nur unzureichendübersetzen. Gemeint ist die Fähigkeit einer Website, Besu-cher immer wieder von neuem anzulocken und zu einemweiteren Besuch zu motivieren.

Top-Link

Der Top-Link bietet dem Besucher einen Sprung vom Sei-tenende an den Seitenanfang an.

Trail

Eine aufeinanderfolgende Sequenz von thematisch verwand-ten Seiten. Entspricht den Blättern in einer Zeitschrift undkann innerhalb eines größeren Hypertextes vorkommen.

Styleswitcher

Ein Styleswitcher ermöglicht dem Benutzer aus einer Aus-wahl von Stylesheets, die Darstellung einer Website nachFarbe, Schriftgröße, Layout selber auszuwählen.

User-Interface (UI)

Mit User Interface ist die Benutzerschnittstelle gemeint, derTeil eines Systems oder einer Software, welche den Daten-austausch mit dem Benutzer ermöglicht. Gemeint ist dieProgrammoberfläche.

User-Testing

Usability Tests werden nicht mit Programmen, sondern mitechten Menschen durchgeführt. Etwa 4–10 Testpersonenerhalten dieselbe Aufgabe. Beispielsweise ein bestimmtesProdukt in einem Shop zu finden oder einen Artikel ineinem Magazin. Währenddessen wird den Testpersonenüber die Schulter geschaut. Auch die Kommentare der Test-personen während des Besuchs einer Website werden ineine Analyse mit einbezogen.

81

Zeigarnik-Effekt

Im Fachjargon wird der Zeigarnik-Effekt auch „Cliffhanger“genannt. Eine unbeantwortete Frage im Kopf zu haben, istwie an einer 10 Meter hohen Felswand zu hängen. Es ist füruns Menschen fast unerträglich loszulassen. Wir müsseneinfach die Antwort wissen. Mit Hilfe dieses Effekts werdenLeser dazu gebracht, eine Werbung anzusehen, einen Arti-kel zu lesen, einer Fortsetzung zu folgen und so weiter. Die-ses psychologische Phänomen hat die Psychologin BlumaW. Zeigarnik im Jahre 1927 entdeckt. Sie lies Testpersonenunterschiedliche Aufgaben durchführen, wovon nicht allevollständig erledigt werden durften. In Interviews fand diePsychologin heraus, dass die unerledigten Handlungennicht nur besser erinnert werden konnten, sondern zudemin einem überaus starken Detaillierungsgrad gespeichertwaren. (sl)

Typische Usability-Fehler

Selbst die größten Sites produzieren laufend Fehler in derBenutzerführung und Usability. Und das schlimme ist: Vie-le scheinen es gar nicht zu merken.

Fehler sind erlaubt. Ein schnelllebiges Medium wie dasInternet macht es gelegentlich nötig, auf den einen oderanderen Kontrolldurchlauf zu verzichten. Der große Vorteildieses Mediums ist ja, dass sich Fehler in Sekunden-schnelle wieder ausmerzen lassen, wenn man sie bemerkt.Wenn man sie bemerkt. Erstaunlich häufig wiederholenWebsites selbst nach dem Redesign die gleichen Nachläs-sigkeiten.

82

Ein Beispiel. Der Reisekonzern TUI bietet ein umfassendesBuchungsportal für Reisen, Hotels, Flüge und so weiter an.Man verspricht sich einiges davon, denn schließlich ist derBereich Reisebuchung, der am schnellsten wachsendeMarkt im eCommerce. Wie bei jedem Reiseanbieter hatjedes Objekt einen Buchungscode. Dieser ist im Katalogsichtbar abgedruckt und schafft die Verbindung zum sepa-raten Preisteil. TUI verzichtet schon seit Jahren konsequentdarauf, den Buchungscode im Internet zu wiederholen. DieIdee, ein Reisewilliger könnte sich zunächst einen Katalogzur Ansicht beschaffen, um dann online zu buchen, schienden TUI-Machern nicht plausibel.

Oder doch? Im letzten Redesign wurde die Site dahinge-hend geändert, dass zwar nicht der Buchungscode, aberdie Typen-Nummerierung der unterschiedlichen Zimmerund Appartements angezeigt wird. Diese Nummern wie-derum sind nur im Katalog erklärt. Dem Online-Bucher prä-sentieren sich so eine Handvoll Zimmer zum gleichenDatum für die gleiche Personenzahl aber mit einer Preis-

83

TUIschafftkeine Verbin-dung zwischenNetzan-gebot undKatalog

spanne zwischen 80 und 180 Euro pro Nacht. Welcher Qua-litätsunterschied diese Preisdifferenzen begründet, bleibtim Verborgenen.

1. Domain-Usability

Es ist schon tragisch, dass es immer noch Unternehmengibt, die nicht alle wichtigen Domains registrieren und aufihre Website umleiten. Bei den heutigen Domainpreisendarf das nicht sein. Noch schlimmer aber wiegt, wenn maneine Domain besitzt, die aber nicht einsetzt. Heute bezich-tigen wir das Kicker Sportmagazin dieser Sünde. Die Do-mains kicker.de und kickersportmagazin.de funktionieren,die Domain kicker-sportmagazin.de geht aber nicht. Undder Besitzer ist laut DENIC eindeutig der Olympia-Verlag inNürnberg, also der Herausgeber des Magazins Kicker.

2. SearchEngine-Usability

Eines der Felder, auf denen am meisten Optimierungsbe-darf besteht, sind die Suchmaschinen der Websites. Teil-weise sind sie schlecht zu bedienen, wie etwa bei T-Online,

84

Der Kickerbesitzt zwardie Domain,nutzt sie abernicht

wo ein winziger Pfeil die Suche startet, teilweise liefern sieabsolut nichts sagende oder ungenügende Treffer und teil-weise funktionieren sie gar nicht.

Besonders drastisch wirkt sich das zum Beispiel bei Kar-stadtsport aus. Dort wird die Suche nach einem gewünsch-ten Artikel zur olympischen Disziplin. Wer nicht den exak-ten Suchbegriff eingibt, wird mit mangelnden Ergebnissenbestraft. So rühmt sich Karstadtsport Deutschlands größ-ter Golfhändler zu sein, verfügt Online aber definitiv nichtüber „Golfbälle“. Bei „Golfschläger“ findet die Suche im-merhin einen Artikel. Der heißt „EUR 879,00“ und wird vor-sorglich – vermutlich um Betriebsspionage zu unterbinden– erst gar nicht mit Bild dargestellt.

Vermutlich liegt es an den Umlauten, die die SearchEnginenicht akzeptiert. Das wäre sogar zu verschmerzen, wenn dieSite an irgendeiner Stelle den entsprechenden Hinweis lie-fern würde. Ob das der Grund der aktuellen Karstadt-Pro-bleme ist?

85

Wer suchet, der findet wohl nicht

3. SearchResult-Usability

So gut der Algorhythmus einer Suche auch sein mag, er istnichts wert, wenn die Darstellung der Ergebnisse nichtstimmt und dem User dadurch nicht geholfen werdenkann. Die ComputerWoche beispielsweise will alte Artikelzweit verwerten und online verkaufen. Den Zugang dazubilden entweder Dossiers oder Suchergebnisse. DieseErgebnisse bestehen aus einer einzigen Headline, die nochdazu häufig abgekürzt ist. Wer da nicht die Katze im Sackkauft, hat wirklich Glück gehabt.

4. Bookmark Usability

Was ist das höchste Gut einer Website? Seine Stammkunden.Wie finden Stammkunden zurück zu den Inhalten? Richtig, siesetzen Bookmarks. Dumm nur, wenn die Bookmarks gar nichtdorthin führen, wo sie sollen. Wie zum Beispiel bei Bild.de.

86

Die Ergebnisse der Suche sind der einzige Hinweis auf den Inhaltdes Kauf-Artikels

Für User, die eigentlich an der Berechnung von Rente undArbeitslosengeld interessiert sind, aber eben mal so kurzeinen Abstecher in den Erotikbereich machen, wird jedesneue Bookmark zum Beispiel mit „KFZ Versicherung Rund-umschutz“ überschrieben, auch wenn dahinter eine Seite mitdem merkwürdigen Titel „Rot rot rot sind alle meineHöschen“ steht.

5. Link-Usability

Das beliebteste Spielfeld deutscher Webdesigner ist dieinnovative Gestaltung von Hyperlinks. Je kleiner und unauf-fälliger, desto besser. Auch versuchen sich viele in der Kunstder Vielfalt und geben jedem zweiten Link eine neue Forma-tierung. Und die schlimmste Form dieser Kunst formatiertHyperlinks genauso wie den angrenzenden Fließtext.

87

Für den Fall, dass auch mal die Ehefrau mit dem gleichen Rechneronline geht

Beim Onlineangebot der Süddeutschen Zeitung, bei demansonsten wenig Fehler zu finden sind, fehlt die Unter-streichung der Hyperlinks im Filmportal, dafür wird derMauszeiger aber zur Hyperlink-Hand. Auch das ginge noch,würden sich nicht hinter den sinnlosen Textgrafiken gleichdrei verschiedene Links verbergen, die optisch nicht sau-ber voneinander getrennt und somit kaum richtig zu treffensind.

6. Usability durch Konsistenz

Große Websites wie die Süddeutsche oder MSN habenzweifellos die Möglichkeit, eigene Standards für Links zuschaffen, sofern sie schnell erfassbar sind. Wichtig ist beisolchen Sites aber, dass Ideen konsequent durchgezogenwerden. Reiseveranstalter Ltur macht dagegen alles zumHyperlink, was irgendwie zum Buchen einer Reise führen

88

Die Links zeigen sich erst bei Mausberührung

könnte. Ausgerechnet bei der Auflistung von Spezialange-boten, angehängt an ein redaktionelles Thema, fehlen sol-che Links aber. Der User muss sich mühevoll durch dasAngebot hangeln, um eben jenes Special-Offer wieder zufinden.

7. Content Usability

Nicht nur die Navigationselemente sondern auch inhaltli-che Bestandteile einer Site können für den User eine Hür-de in Sachen Benutzbarkeit darstellen. Was nützt zum Bei-spiel der schönste Werbetext, wenn er in einer Schriftaufbereitet ist, die auf dem System des Users fehlt. Daspikante an diesem Beispiel ist die Tatsache, dass derThompson-Designer in Flash die Schriftintegration explizitausgeschaltet haben muss.

89

Tolle Reise, aber buchen geht nicht

8. Formular Usability

Systemkritisch werden Usability-Probleme, wenn sie inKernapplikationen auftreten. Bei vielen Sites werden dieseKernapplikationen durch Formulare ausgelöst. Wenn derUser aber nicht versteht, was das Formular will, dann hater es schwer.

Einen klassischen Fehler beging hier die Bahn-TochterMetropolitan. Beim Buchungsformular wählte man ausgestalterischen Gründen ein rechtsbündiges Layout. Waszur Folge hatte, das Elemente, die eigentlich in der linkender zwei Spalten stehen sollten, nach rechts rutschten,wenn das entsprechende Feld dort nicht belegt war. Sodurften mit dem Metropolitan also nur Kinder mit Bahncard

90

Eigentlich integriert Flash die Schrift-Outline automatisch, wennman nicht …

fahren. Laut Auskunft der deutschen Bahn gibt es aber fürKinder gar keine Bahncard. Kein Wunder also, dass dasUnternehmen gerade aufgelöst wurde.

9. Shop Usability

Gerade in Shopping-Applikationen können solche Fehlertödlich sein. Das gilt nicht nur für das initiale Formular son-dern auch für das Feedback, das Formulare geben, sobaldsie geändert oder abgeschickt wurden. Keinen Spaß ver-steht der User beim Warenkorb. Fehler dort führen zumsofortigen Kaufabbruch. Will man etwa beim Stern CDsbestellen, sollte man tunlichst keinen Fehler bei der Men-genangabe machen, denn eine spätere Änderung führtzum Usability-Frust. Der große graue Button „Neu Berech-nen“ macht nämlich nichts, sooft man ihn auch drückt.Stattdessen soll man ein winziges Stift-Symbol aktivieren,neben dem einfach nur „Ändern“ steht.

91

Erwachsene wollen doch auch gerne mit Bahncard fahren, oder?

10. Backend Usability

Wohl dem Unternehmen, dass über CallCenter und einfunktionierendes Filialsystem verfügt, mit dem es eventu-ell auftretende Probleme bei der Online-Transaktion abfan-gen kann. Eine groß angezeigte Telefonnummer wie beiExpedia oder der Lufthansa ist da Gold wert.

Hier kommt das oben bereits zitierte Beispiel von TUI insSpiel. Die Verbindung zwischen Online-Angebot und Kata-log kommt höchstens durch Raten zustande. (fp)

92

Der Button „Neu Berechnen“ berechnet gar nichts neu

Erwartungskonforme Gestaltung

Studien beweisen: Es gibt inzwischen feste Regeln für dieGestaltung von Webseiten. Wer dagegen verstößt, musswissen, warum.

Intuitiv wussten es Webdesigner schon immer: Die großenSites wie Amazon, eBay, Google und Konsorten haben fürden User so viel Bedeutung, dass sie in der Lage sind,Standards für die Gestaltung von WebSeiten zu definieren.So erwarten heutzutage acht von zehn Benutzern, dass dieSuchmaske für die Eingabe von Suchbefehlen, zentral imKopf einer Seite untergebracht wird. Google sei dank.

Inzwischen liegen drei wichtige Studien vor, die deutlichmachen, dass es tatsächlich Webdesign-Standards gibt.Sites, die sich daran halten, sind für den User leichter ver-ständlich und daher benutzbarer als andere. Wer sich fürandere Gestaltungskriterien entscheidet, muss wissen,warum er das tut, und er sollte tunlichst durch Tests über-prüfen, wie es um die Benutzbarkeit seiner Seite bestellt ist.

93

Bei Bild.de sitzt die Suchmaske fast zentral

Eine Studie von Michael Bernard (Wichita State University)aus dem Jahr 2002 hatte eben diese Erwartungen zumGegenstand. 302 Probanden wurden befragt, an welcher Stel-le im Browserfenster sie welches Element vermuten würden.Zu diesem Zweck erhielten die Teilnehmer kleine Kärtchen mitden Bezeichnungen der Elemente wie etwa „Suchmaschine“oder „Warenkorb“ und mussten diese auf einem 8 x 7 Rasterin einem leeren Browserfenster platzieren.

Gegenstand der Befragung war eine fiktive eCommerce-Site und alle Probanden mussten mindestens einmal eineOnline-Bestellung aufgegeben haben. 57 Prozent der Teil-nehmer waren weiblich.

Die Ergebnisse waren in der Interpretation von Bernardüberraschend eindeutig. Bei allen Elementen tauchten sig-nifikante Häufungen auf. So erwarten die User beispiels-weise den Homepage-Link stets links oben, wogegen dieSuchmaske oben in der Mitte zu finden sein sollte. Infor-mationen zum eigenen Account und der Warenkorb hinge-gen sollten rechts zu finden sein. Das LogIn zum Accountdagegen links.

94

Unver-ständlich:Worinbesteht derUnterschiedzwischen„Mein Konto“ und„Meine Quelle“?

Gerade angesichts der andauernden Diskussion um Bar-rierefreiheit wird der Ruf nach verlässlichen Regeln für dieGestaltung von Websites laut. Usability-Guru Jakob Niel-sen formulierte in einer Kolumne vom September 2004:„Viele Seiten sind schwer zu bedienen, weil sie von denerwarteten Normen abweichen.“

Der User, das Gewohnheitstier

WebUser achten immer wieder auf die gleichen Dinge aufWebSeiten. Auch wenn sie eine Seite mehrfach besuchen,bilden sich Blickverläufe heraus, die immer wieder einge-setzt werden. Eine Auswertung verschiedener Eyetracking-Studien durch Thorsten Wilhelm von eResult aus Göttin-gen ergab, dass User sowohl innerhalb einer Seite, alsauch Seiten-übergreifend Blickverläufe lernen und wieder-holen. Die Tests zeigen, dass Benutzer exakt die gleichenBlickverläufe zeigen, wenn Sie eine Site zum ersten undzum zweiten Mal besuchen. Dieses Verhalten funktioniertungeachtet der Effizienz.

95

Element Platzierung

Oben rechts

Oben links

Oben rechts

Oben rechts

Oben mitte

Oben rechts

Einkaufswagen

LogIn

Hilfe

Acount

Suche

Homepage-Link

Quelle: Bernard eCommerce Studie 2002

„Dieses Verhalten legt die These nahe, das die User Site-übergreifend ähnliche Blickverläufe zeigen, vor allem dann,wenn die Sites ähnliche Grundlayouts haben. Bei Spiegelund Focus Online beispielsweise ist eine Übereinstimmungwahrscheinlich,“ erklärt Wilhelm.

Die Regeln

Ausgehend von Nielsens Thesen untersuchte die Univer-sität Washington Websites nach drei wichtigen Navigati-onselementen, nämlich der globalen Navigation zwischenden Hauptrubriken, die Tiefennavigation innerhalb derRubriken und die Verfolgung von Navigationspfaden (Brot-krümel). Sowie einzelne Spezialelemente wie die Verlin-kung zurück zur Homepage, den Link in den Warenkorbund den Zugang zur Online-Hilfe.

96

Klassisch: Amazon war einer der Begründer der Register-Navigation

Haupt-Navigation

User nutzen die globale Navigation in zwei Zusammen-hängen. Zum einen machen Sie sich daraus ein Bild überden Umfang der Gesamtsite, zum anderen nutzen Sie dieNavigationselemente, um schnell zwischen den großenBereichen einer Site zu wechseln.

Heidi Adkisson, die Leiterin der Studie, untersuchte die Plat-zierung der globalen Navigation sowie deren Ausgestaltung.Dabei stand vor allem die Frage im Mittelpunkt, ob es sichum grafische Hyperlinks oder um HTML-Text handelt.

97 Prozent aller Sites bieten eine globale Navigation aufjeder einzelnen Seite an und in 87 Prozent aller Fälle ran-giert diese Navigation oben in der Mitte. Nur 11 Prozent derSites platzieren die Hauptlinks auf der linken Seite undüberraschenderweise arbeiten nur 12 Prozent der Sites miteinem DropDown-Menü für die wichtigsten Rubrikbegriffe.

Innerhalb der horizontalen Navigationsleisten für die ersteEbene nutzen drei Viertel aller Designer Textgrafiken undverzichten dabei fast vollkommen auf RollOver-Effekte.

97

Ebay verwendetin derersten StufeeinenNavigati-onsansatz

Die Links in die zweite und dritte Ebene, die so genanntelokale Navigation innerhalb einer Rubrik, finden bei denmeisten Sites im zentralen Content-Bereich in der Mittestatt. Nur knapp 30 Prozent der Sites bietet diese Links inder linken Navigationsleiste an.

Bei der Art der Platzierung im Content-Bereich gibt es zweiMethoden, die mit der Inhaltstiefe einer Site korrelieren. Gibtes zahlreiche Unterrubriken, dann wird eine navigationszen-trierte Methode gewählt, in der die Links ohne Bilder ange-zeigt werden. Häufig befinden sich dabei auch noch Links zuInhaltsbereichen, die noch eine Ebene tiefer liegen. DieseLinks zeigen dem User die Spannbreite der jeweiligen Rubrikan und bieten natürlich Hilfe bei der Schnellnavigation.Ungefähr ein Viertel aller Sites nutzt diese Möglichkeit.

Ist die Site nicht so inhaltstief, dann wird bereits an dieserStelle ein promotionszentrierter Ansatz gewählt, der dieLinks zur nächsten Ebene mit Vorschaubildern und häufigauch mit Teaser-Text darstellt.

98

Buch.de wählt einen Promotion-Ansatz im mittleren Bereich

Für die lokale Navigation nutzen 88 Prozent reinen HTML-Text und keine Grafiken oder Buttons. Rund ein Viertel derLinks verändert sich bei Mausberührung. Die meistenändern die Farbe oder ergänzen eine vorher nicht vorhan-dene Unterstreichung.

Brotkrümel und mehr

Der Begriff Brotkrümel ist frei nach „Hänsel und Gretel“entstanden. Hänsel nutzt Brotkrümel, um den Weg zurückzu finden. Analog platzieren Websites eine meist horizon-tale Liste oberhalb des Inhaltsbereichs, die den Navigati-onspfad des Users nachempfindet. Vom Allgemeinen hinzum Speziellen, also von der Homepage über die Rubrikenund Unterrubriken bis zur Produktseite.

99

T-Online erklärt die „Brotkrümel“ mit dem Satz: Sie sind hier

Fast die Hälfte aller Inhaltsseiten in Adkissons Studie zeigenein solches Feature. Wenn wir davon ausgehen, dass einViertel der Seiten Homepages sind, auf denen das Featurekeinen Sinn macht, erreichen die Brotkrümel eine Verbrei-tung von 66 Prozent bei den Inhaltsseiten und kann daherals Standard gelten. Übrigens benutzen davon 65 Prozenteinen Pfeil als Trennsymbol zwischen den Begriffen.

Definitiv ein Standard ist die Navigation zur Homepage,die bei allen Seiten über das Logo links oben funktioniert.60 Prozent der Seiten besitzen zusätzlich einen Home-But-ton.

Ebenso auf jeder Seite ist ein Button, der dem User erlaubt,in seinen Warenkorb zu schauen. Fast drei Viertel aller Sitesverwenden den Begriff „View Cart“ („Einkaufswagenbetrachten“) und ebenso viele nutzen auch das Icon einesEinkaufswagens.

100

Einfach: Auch Tchibo nutzt das Symbol eines Einkaufswagens

76 Prozent aller Sites besitzen eine Funktion, die es erlaubt,die eigenen Kontodaten zu ändern. Bei den meisten Sites sitztder dazugehörige Button rechts oben. Hinsichtlich der Begriff-lichkeit ist man sich aber nicht einig. Die wichtigste Bezeich-nung „My Account“ gilt nur für 42 Prozent aller Fälle.

Ebenfalls auf der rechten Seite wird üblicherweise der Hil-fe-Button platziert. 88 Prozent der untersuchten Site besit-zen diesen. 12 Prozent bieten dem User eine Alternative,wie etwa telefonischen Support. Fast alle Sites nutzen dasFragezeichen als Icon für die Hilfe und hinsichtlich derBezeichnung teilen sich die Lager in „Hilfe“ und „Kunden-dienst“.

Ergänzend stellt eResult fest, dass animierte Elemente inder Frühphase des Siteaufrufs definitiv mehr Aufmerk-samkeit erhalten, ebenso wie Bilder. In der zweiten, derOrientierungsphase kommt es eher auf die Texte an. (fp)

Die 10 häufigsten Usability-Ärgernisse

Wir werden das immer wieder gefragt: Was ärgert denBesucher am meisten? Was soll man bei der Gestaltungunbedingt vermeiden? Nun gut, hier sind sie, die 10 häu-figsten Ärgernisse. Aber nicht vergessen, jeder pflegt sei-ne eigenen, individuellen Abneigungen.

Wiederholte PopUps

Jedes zweite PopUp wird inzwischen geblockt. Doch miteinem kann man leben. Wenn sich aber ein PopUp-Fenstermit ein- und derselben Botschaft immer wieder beharrlichins Bild drückt, kann einem schon mal die Hutschnur hoch-gehen. Cookies können hier Abhilfe schaffen.

101

Mehr als eine Animation

Wenn es an mehreren Stellen gleichzeitig blinkt, fällt esschwer Konzentration und Contenance zu bewahren. DemBesucher hilft die Escape-Taste, um das Spektakel zur Ruhezu zwingen.

Automatische Änderung der Fenstergröße

Das vielleicht schärfste „Designverbrechen“ von allen. Dieveränderten Browsereinstellungen bleiben nämlich nichtselten noch eine ganze Weile erhalten. Der Internet Explo-rer, als das noch immer mit Abstand am häufigsten ver-wendetes Produkt, merkt sich die veränderten Einstellun-gen gar noch beim Beenden und erfreut mitunter tagelang.Die Ausgangsgröße manuell herzustellen, gelingt erst nachvielen Versuchen.

Zu kleiner Text

Minischrift gilt als schick, schreckt aber ab. Längere Textewerden unlesbar, kürzere brauchen mehr Zeit, um gelesenzu werden. Ein Vergnügen ist das nie. Einen wirklichenGrund zur fortschreitenden Miniaturisierung, abgesehenvom Hang zum Trend, gibt es auch nicht. Das gilt auch fürHyperlinks, Buttons, Formulare, Suchfelder und andere Ele-mente.

Links, deren Beschreibung etwas anderes erwarten lässt

Man fühlt sich belogen, wenn ein Link nicht das offenbart,was er ankündigt. Verantwortlich sein kann eine schlechteBetextung (Wording), aber auch schnöde Absicht. DerDesigner denkt, wenn ich die Wahrheit sage, klickt nie-mand mehr. Den Besucher auszutricksen, hilft da aber garnicht und verärgert ihn. In dieselbe Kategorie gehörengetarnte Links, die auf Werbeseiten oder Partnerprogram-me führen, deren Ziel man aber mittels Javascript zu ver-

102

bergen sucht, indem sie nicht mehr in der Statuszeileangezeigt werden. Wer darauf hereinfällt, ist längste ZeitBesucher gewesen.

Werbung, die sich über den Inhalt legt

Hier trifft die Schuld nicht den Webdesigner, sondern dieAnzeigenabteilung. Gerade weil es der übliche Websurferstets eilig hat und die ihm gebotenen Informationen ersteinmal scannt, stört ihn Werbung, die sich direkt über denInhalt platziert am meisten. 20 Sekunden zu warten odernach einer Möglichkeit zum Wegklicken zu suchen, ist mehrals nur eine Hürde.

Keine Kontaktmöglichkeiten

Verzweiflung und Wut machen sich breit, wenn weder einFormular noch eine Emailadresse gefunden werden kön-nen, obwohl man doch Wichtiges zu sagen hätte. Für denE-Commerce ist das tödlich, für den Rest eine vergebeneChance.

103

DieGroß-flächen-anzeigever-decktalles

Der Klassiker: Zu lange Ladezeiten

Die entstehen nicht nur durch voll gestopfte Seiten undübermäßigen Gebrauch von Grafiken. Auch billige oderüberlastete Server nerven. Mitunter liegst an den einge-setzten Techniken selbst. Seiten, die aus Datenbankengeneriert werden und solche die Banner über externe Ad-Server einblenden, sind besonders davon betroffen.

Tote Links

Sie kommen häufiger vor, als nötig wäre. Angesehen fal-scher Verlinkung und von inzwischen nicht mehr vorhande-nen Zielen, tragen Javascript und serverseitige Program-mierungen ihren Teil bei. Javascript, weil es nicht immerzuverlässig mit jedem Browser funktioniert und serverseiti-ge Scripte, weil sie manchmal einfach zu langsam sind.

Interne Links im neuen Fenster

Nur eine Kleinigkeit, aber eben doch ein unangenehmerNadelstich. Sollte es Gründe dafür geben, macht es Sinneine Kennzeichnung zu verwenden. Wenn der Besucherweiß, was ihn erwartet, nimmt er die Dinge gelassen. (sl)

Usability in 5 Sekunden

Surfer verweilen oft nur sehr kurz auf einzelnen Webseiten.Für den Gestalter kommt es darauf an, die wesentlichenInhalte blitzschnell zu übermitteln.

Verschiedene Studien haben bewiesen, dass die durch-schnittliche Verweildauer des Users auf einer einzelnenWebSeite zwischen acht und zwölf Sekunden liegt. Das ist

104

sehr wenig Zeit, um Informationen profund zu vermitteln,aber immer noch mehr, als bei klassischen Zeitschriften-anzeigen, wo die Leser nur 1,3 Sekunden verweilen.

Ziel des Seiten-Designers muss es also sein, dass er in die-sen ersten zehn Sekunden die wichtigste Informationtransportiert. Der User soll das Gefühl bekommen, auf die-ser Seite „richtig“ zu sein. Erst wenn das gelingt, durch-forstet der Benutzer die Seite nach Nützlichem und gibtIhnen so die Chance, mit Ihrem Content zu überzeugen.

Jede Seite ist anders

Jede Inhaltsseite Ihres Angebots hat simultan zwei Aufga-ben zu lösen. Zum einen muss sie beweisen, dass sie diegewünschten Inhalte trägt. Zum anderen muss sie demBenutzer direkte Hilfsmittel anbieten, den nächsten Schrittzu tun. Das können so unterschiedliche Dinge sein wie:Bestellung aufgeben, für einen Newsletter registrieren, dennächsten Hyperlink klicken oder ein Formular ausfüllen.

105

Das Ziel der Site des amerikanischen Roten Kreuzes heißt eindeutig „Spende!“

Jede Seite hat also neben einem universellen Zweck aucheinen eigenen, individuellen Zweck und verdient daherindividueller Bearbeitung.

Der universelle Zweck einer Website oder eines Unteran-gebots setzt sich zusammen aus der Marke des Angebotsund aus dem konkreten Inhalt. Je weniger bekannt eineMarke ist, umso mehr Bedeutung hat die Beschreibung desDienstes. Hier bietet sich das so genannte Mission State-ment an: „Flix – Ihr Partner beim Innenausbau“. Eine sol-che Erklärung hilft dem User bei der ersten Orientierung.

Weniger geeignet sind hingegen zumeist die klassischenClaims, etwa „Wir haben verstanden“ oder „Aus Freude amFahren“. Die werden in der Regel von starken Marken ein-gesetzt, bei denen der Grobumriss der Inhalte auf einer Web-site einigermaßen offensichtlich ist, wie etwa bei BMW.de.

106

Ist die „Unterstützung von Win98“ eine wertvolle Information fürden User?

Der 5-Sekunden-Test

Zur Überprüfung der unmittelbaren Wirkung von einzelnenSeiten eignet sich der 5-Sekunden-Test. Diese Methode istpreiswert und bringt sehr schnell wichtige Erkenntnisseüber die Qualität Ihrer Seiten.

Und so gehen Sie vor: Wählen Sie die betreffende Seiteaus und definieren Sie klar deren Ziel. Das muss nicht diefinale Aktion sein, die der User zu unternehmen hat, etwaden Bestell-Button zu drücken. Sondern eventuell geht esauch um die Information, die zu dieser Handlung führt.Zum Beispiel die Betonung der entscheidenden Qualitäts-merkmale eines Produkts.

Das Procedere ähnelt dem klassischen Usability-Test. DerBenutzer ist allein, er bekommt eine Aufgabe und muss die-se anhand einer Inhaltsseite zu lösen versuchen. Der wesent-liche Unterschied besteht darin, dass der Benutzer die Seiteeben nur fünf Sekunden sieht und dass er nicht klicken darf.

107

Das Tchibo-PostIt erklärt sofort, was „Last Chance“ bedeutet

Der Proband wird entsprechend instruiert. Seine Aufgabelautet also zum Beispiel: Welches sind die wichtigsten Vor-züge des gezeigten Produkts. Weisen Sie den Probandendarauf hin, dass er die Seite nur kurz zu sehen bekommtund legen Sie sie dem User vor.

Nach Ablauf der fünf Sekunden fordern Sie den Benutzer imersten Schritt dazu auf, alle Informationen, die er sich gemerkthat, zu notieren. Erst im zweiten Schritt stellen Sie die kon-krete Frage nach den wichtigsten Vorzügen des Produkts. Die-ses indirekte Vorgehen soll vor allem sichern, dass das wich-tigste Element der Seite vom Probanden genannt wird, wennes eben nicht zu den gefragten Seitenzielen gehört.

Der Testbericht

Zu einem 5-Sekunden-Test gehört natürlich kein ausge-wachsener Testbericht. Da es nur um den ersten Eindruckvon einer Seite geht, fallen wichtige Disziplinen bei derBerichterstellung weg, etwa die Zeit, die ein User zur Erfül-lung einer Aufgabe benötigt.

Usability-Guru Jakob Nielsen empfiehlt daher die so genann-ten „Quick-Findings“ als Berichtsmethode. Das ist eine infor-melle Zusammenfassung der wichtigsten Ergebnisse ausdem Test. Auch bei dieser Kurzfassung sollte nicht versäumtwerden, den User abschließend nach seiner Meinung zubefragen. Die so gewonnenen Zitate füllen den Kurzberichtmit Leben und machen das Ergebnis plastischer und erfass-barer für den Auftraggeber oder das DesignTeam. (fp)

108

Der Expertentest

Preiswerter und schneller als der Usertest funktioniert eineAnalyse durch einen Experten. Aber das Briefing mussstimmen.

Hand aufs Herz: Wer hat schon Zeit für einen echten Usa-bility-Test mit ausgewählten Mitgliedern der potentiellenZielgruppe. Häufig hat schon die Herstellung der Site zuvielZeit in Anspruch genommen, da will man nicht mehr war-ten, bis er online gestellt wird. Und nicht wenige scheuenauch die Kosten eines Tests mit Benutzern.

Die preisgünstige Alternative heißt Expertentest. Bei die-sem Verfahren wird die Site von einem Fachmann begut-achtet und auf Fehler überprüft. Das kann in aller Regel adhoc geschehen – einige Dienstleister bieten sogar denSoforttest via Telefon an. Und das muss kein unseriösesAngebot sein: Ein ernsthafter Tester befasst sich nicht sehrintensiv mit einem Angebot, bevor er es testet, um mög-lichst wenig Vorkenntnisse in die Analyse einzubringen unddem realen User näher zu sein.

Ein solcher Test dauert zwischen einer halben und einerStunde. Sichert der Dienstleister seinem Kunden einenBericht zu, dann kommt dieser in aller Regel binnen zweierWerktage per eMail, kombiniert mit einigen Designemp-fehlungen. Die Kosten liegen zwischen 200 und 1200 Euro,ja nach Qualität und Umfang des Berichts. Damit ist dasVerfahren allemal billiger als der Usertest.

Die Grenzen des Expertentests

Es gibt zwei Testverfahren, nach denen der Experte vor-geht. Im Walkthrough vollzieht er einen direkten Benut-zungspfad nach, etwa durch einen Bestellprozess. Er ana-lysiert dabei, ob der User die wichtigsten Navigationsmittel

109

findet und versteht und ob das Feedback des Systems denUser in seinem Zielstreben unterstützt.

Die zweite Variante ist die heuristische Analyse. Hierbeifolgt der Experte einem als gesichert geltenden Regelwerkund analysiert die Einzelseiten eher zufällig.

Beide Varianten kranken an zwei großen methodischenProblemfeldern. Die erste Frage muss lauten: Wer isteigentlich Experte? Ein Webdesigner kann sich in gestalte-rischen Fragen sicher führen, aber ist er in der Lage einenBestellprozess zu analysieren? Ein Marketingfachmannerkennt Missqualitäten in der Markenbildung, aber erkennter solche auch bei der Benutzerführung? Selbst ein ausge-wiesener Usability-Experte kann Probleme bekommen, woihm spezielle Vorkenntnisse der Zielgruppe fehlen, die vonden Designern aber berücksichtigt wurden.

110

Spezialisierte Anbieter offerieren telefonische Expertentests mit gut-en Zielgruppenkenntnissen

Der Idealtypus des Testexperten verfügt also über beideWissenskategorien, Usability-Fachkenntnisse und Ziel-gruppenwissen. Dieser Doppelexperte ist selten zu findenund dann teuer.

Zweitens stellt sich die Frage nach dem heuristischenAnsatz. Auch unter ausgewiesenen Experten gibt es einegroße Bandbreite des Erlaubten. Der eine Experte tolerierteine Flash-Navigation, der andere testet mit einem Brow-ser, für den es gar kein passendes PlugIn gibt.

Expertentest als Oberflächenanalyse

Daraus folgt, dass im Expertentest mehr Aufgaben zumAuftraggeber wechseln. Er muss nicht nur den oder imOptimalfall die Experten auswählen und bewerten. Er mussaußerdem eine Bedienungsanleitung liefern, die es demExperten ermöglicht, sich in die Rolle des Benutzers zu fin-den. Dazu gehört auch ein technisches Regelwerk mit Min-deststandards, die webdesignerisch vorausgesetzt werdenkönnen. Eine gute Grundlage für die Erstellung eines sol-chen Leitfadens bieten die heuristischen Prinzipien vonJakob Nielsen.

Ist die Vorarbeit sorgfältig und der Experte ein guter, dannist diese Testvariante extrem flexibel und schnell einsetz-bar. Sie liefert für vergleichsweise geringes Budget diewichtigsten Informationen über potenzielle Usability-Fal-len. Der Einsatzbereich dieser Testmethode liegt aber ander Oberfläche. Die wichtigsten Grundfunktionen, dasDesign und Layout sowie geschäftskritische Prozesse wer-den damit analysiert. Deep Content hingegen kann nur imUser-Test bewertet werden, weil dazu die entsprechendenZielgruppenkenntnisse nötig sind. (fp)

111

Gut gedacht, aber... Irritationen mit Links

Wenn der Besucher stutzig wird, für einen Momentinnehalten muss, die grauen Zellen angestrengt in Bewe-gung geraten, dann liegt nicht selten eine designbedingteStörung vor. Kleinigkeiten nur, die den Ablauf stören undfast immer vermeidbar wären.

Die Abbildung Nummer 1 zeigt einen Ausschnitt der Start-seite des Entwicklers des Programms „Feedreader“(www.feedreader.com). Wer hierher steuert, um das RSS-Leseprogramm herunterzuladen, muss zwangsläufig füreinen Moment innehalten.

Gibt es einen Download-Link? Diesenwürde man in der Menüleiste erwar-ten, die übrigens auf der rechten Seiteplatziert wurde. Was im Ausschnitt nurerahnt werden kann, der an sich deut-lich herausgestellte Download-Linkoben wird mitunter erst auf den zwei-ten oder dritten Blick wahrgenommen,einfach weil er sich nicht dort befindet,wo er erwartet wird.

Die Commerzbank führt Besucher mitDoppelpfeilen in die Irre. Deren Be-deutung ist an sich klar; ein Pfeil sagt,dass es sich hier um einen Link han-delt, dass es weitergeht und sogarmehr als nur eine einzige Seite imWeiteren zu erwarten ist – weshalbman einen doppelten Pfeil verwen-det.

112

Das Problem: Im Falle der „Suche“ handelt es sich garnicht um einen Link, sondern um eine Schaltfläche. Somancher Besucher wird deshalb klicken ohne zuvor einenSuchbegriff eingegeben zu haben, der vermeintliche Linkbrachte ihn dazu.

Pfeile anstelle von Schaltflächen finden sich häufiger. Hierein Beispiel der Merkur-Versicherung. Der Pfeil ist derartklein, dass es so manchem schwer fallen dürfte, ihn imersten Anlauf zu treffen.

Ein „Klickproblem“ präsentiert auch die eigenwillige Start-seite der Elektro ING (www.elektro-ing.de). Man sieht sicheiner Art Sitemap gegenüber, bei der bemerkenswerter-weise nur die untere Hälfte der in Aussicht gestellten The-men auch tatsächlich anklickbar ist.

113

Konsequenter umgesetzt wird etwas Seltsames auf derStartseite dieses Mittelständlers (www.kaiser-elektro.de).Man gibt sich international und die ImageMap zeigt auchgleich wo.

Nun ist zwar jeder Standort auch anklickbar, doch leidernicht mit Informationen verknüpft. Das heißt, es darf gerngeklickt werden, zu erwarten ist jedoch nichts. Es wirdlediglich die Startseite neu geladen. Es ist möglich, dassdem Gestalter die Funktion von ImageMaps nicht bekanntwar. Einen simplen Hyperlink zu setzen, ist unter Umstän-den nicht so einfach. (sl)

114

Gut gedacht, aber...

Wenn Design im Detail versagt

Nicht jede Idee funktioniert, und nicht alles was funktio-niert, tut es wie gedacht. Ungewollt entstehen kleine Ärger-nisse, die auf den gesamten Auftritt abfärben und beque-mes Surfen verhindern.

Hyperlinks sind oft unfreiwillig eine Quelle des Widerwillens.Nicht selten wird man in die Irre geführt. Hier zum Beispiel:

„Webdesign“ist deutlich als Link zu erkennen. Die Wahr-scheinlichkeit, dass der Besucher auf „Wir konzipieren...“klicken möchte, ist jedoch ungleich größer, schließlich liegtder Satz exakt in der Leserichtung und ist farblich hervor-gehoben – ein Pfeil tut ein Übriges.

Es klappt aber nicht, zwar „hovert“ der vermeintliche Link,doch klicken müsste man auf „Webdesign“ – die beidenPfeile erweisen sich als klickresistent.

Die Wirtschaftswoche bietet ähnliches, hier verwirrt der Text.„Zum kompletten Weblog“ führt eben nicht zum komplettenWeblog, sondern zum angeteaserten Eintrag. Das macht

115

auch Sinn, doch der Text sagt es anders. Man müsste aufdas Foto oder den Schriftzug WIRTSCHAFTSPRÜFERklicken, um zum kompletten Weblog zu gelangen. Ein lehr-reiches Beispiel, auch wenn das Handelsblatt diese Praxis in-zwischen geändert hat.

Der Undeutlichkeit in Sachen Startseite bleibt man auch ananderer Stelle treu.

Hier führen Logo und „Startseite“ auf verschiedene Seiten.Nämlich auf die Seite „Weblogs“, die als Übersicht derBlogs zu verstehen ist, und auf die Startseite des geradegesehenen Blogs. Ein in der Tat schwieriger Fall. Verhin-dern lassen sich Probleme durch das Einziehen einer„Übernavigation“ – oft direkt am Seitenbeginn schmal undmaximal weit oben. So können auch mehrere Websites

116

miteinander verbunden werden. Ein Beispiel dafür liefertdas MSN Netzwerk (Focus, Tomorrow)

Ein Kontaktformular wie man ihm häufig begegnet... Es isthübsch gestaltet, doch es schreckt ab. Ganze 12 Angabenwerden zusätzlich zum Kommentar verlangt. Ein Horrorselbst für mitteilungsfreudige Zeitgenossen. Es gibt keinenHinweis darauf, auf welche Angaben man verzichten darf –wenn überhaupt.

Email und Nachname zusammen mit dem Kommentarwürden genügen, doch man erfährt davon nichts. Ein For-mular dieser Art wird die Menge der Kontaktversuche zumSeitenbetreiber unbeabsichtigt dramatisch reduzieren.

Wissen Sie, was Favoriten sind? Wahrscheinlich schon,doch was nützen einem Bookmarks für den Internet Explo-rer, so man einen solchen nicht verwendet?

117

Besucher ohne den „richtigen“ Browser klicken vergebens.Der Eindruck, der sich unweigerlich aufdrängt: diese Web-site funktioniert ja gar nicht. Schade. Aber das muss nichtsein. Der Menüpunkt liesse sich perfekt über so genannten„Conditional Comments“ vor Firefox, Opera und Co. ver-stecken. (sl)

Die Freiheit nehm’ ich mir:

Webdesign ohne Tabellen

Eigentlich wollten wir nie mehr etwas dazu schreiben, esist ja schon alles gesagt. Doch die Nachfrage ist ungebro-chen. Für alle, die den Einstieg verpasst haben: Lernen SieWebdesign ohne Tabellen in wenigen Minuten. Leichterwar der Umstieg noch nie.

118

Am besten, Sie vergessen alles, was Sie über Frames undTabellen schon wissen. Vergessen Sie auch BlindGIFs undandere Tricks. Ihr neuer Freund ist der DIV-Container. Eineleere Hülle, die beliebigen Inhalt aufnehmen kann.

<div></div>

Dieser Container nimmt die komplette Seite auf, oder Teiledavon. Das könnte so aussehen:

<div><h2>Überschrift</h2><p>Inhalt</p></div>

Das ist nicht sonderlich berauschend, es ginge auch ohneden Container. Doch wir brauchen ihn noch. Im tabellenlo-sen Webdesign bilden Container die Struktur einer Seiteab, das Gerüst sozusagen. Über das genaue Layout und dieOptik der Seite entscheiden andere, die Cascading Styles-heets nämlich.

Die werden in eine separate Datei ausgelagert und mit demContainer verbunden. Er bekommt eine ID – so können wirihn direkt ansteuern. Eine ID soll und darf im Vergleich zueiner Klasse nur einmal auf einer Seite vorkommen. Genaudas haben wir vor:

<div id=“inhalt“></div>

Die separate Datei heisst style.css – oder was immer Siewollen. Es ist eine simple Textdatei. Die ID unseres Contai-ners belegen wir mit Anweisungen, dazu dient die Raute.

#inhalt {color : black;}

Jetzt zeigt sich das Prinzip. DIV-Container stellen das Gerip-pe, CSS sorgt für den Rest. Damit sind nicht nur Farbenoder Textauszeichnungen gemeint, es geht ums Ganze. Das

119

Stylesheet ist auch für Position und Größe unseres Contai-ners zuständig. Auch Rahmen und Abstände regeln wir so.In der eigentlichen HTML-Seite findet sich davon nichts.

Beleben wir unseren Container ein wenig:

#inhalt {width : 60%; height : 100%; border : 1px solid black; padding : 8px;}

Nun wird er sichtbar. Ein Rechteck, das 60% der Breite derSeite einnimmt. Ein dürrer Rahmen hilft uns, das auch zuerkennen.

Die Anweisung „Padding“ benötigen wir, damit der Inhaltdes Containers nicht direkt gegen den Rand stößt. GuteCSS-Kenntnisse sind von jetzt ab hilfreich, damit man über-haupt weiß, was man alles anstellen kann.

Ein ordentliches Layout freilich besteht aus mehreren Con-tainern. Nur so kann ein brauchbares Layout heranwach-sen. Erfinden für also für unsere erste Container-Seite eineMenüleiste:

<div id=“menue“><p>Link Nummer 1</p><p>Link Nummer 2</p><p>Link Nummer 3</p><p>Link Nummer 4</p></div>

Mit CSS verpassen wir ihr ein adäquates Äußeres. Schmal,aber genauso hoch wie der schon vorhandene Container:

#menue {width : 20%;

120

height : 100%; border : 1px solid black; padding: 8px;}

Und dies kommt dabei heraus:

Das Ergebnis ist eine ziemliche Enttäuschung. Die beidenContainer liegen schlapp übereinander. Was tun? Es ist ander Zeit, das größte Geheimnis des tabellenlosen Layoutszu lüften. Es hört auf den Namen „float“ und sorgt dafür,dass Container aufeinander Rücksicht nehmen.

Wir fügen beiden DIVs über die CSS-Datei einen neuenBefehl hinzu:

float : left

Beide richten sich nun nach links aus und liegen perfektnebeneinander!

Um das Prinzip besser zu verstehen, lassen Sie einmal hierund einmal da „float : left“ weg, oder versuchen Sie „float: right“, denn auch das ist eine Option.

121

Ein gutes Layout ist das noch nicht, dazu benötigen wirzumindest noch eine Kopfzeile. Aber das ist schnell erle-digt. Wir brauchen – hätten Sie’s gedacht? – einen drittenContainer:

<div id=“kopfzeile“>Platz für Logo und Über-schrift</div>

Wir formatieren ihn mit CSS über die gesamte Breite derSeite und legen eine passende Höhe fest, diesmal in Pixel.

#kopfzeile {width : 100%; height : 80px; border : 1px solid black; padding : 8px;}

Float benötigen wir hier nicht, wir setzten die Kopfzeile anden Anfang des HTML-Gerippes, das inzwischen so aus-sieht:

<div id=“kopfzeile“>Platz für Logo und Über-schrift</div>

<div id=“menue“><p>Link Nummer 1</p><p>Link Nummer 2</p><p>Link Nummer 3</p><p>Link Nummer 4</p></div>

<div id=“inhalt“><h2>Überschrift</h2><p>Inhalt</p></div>

122

Es fehlten noch Elemente wie <body>, <head> und einigesmehr. Doch im Prinzip ist das schon alles. Die neue Seite istnicht nur schlank und übersichtlich, sie passt sich auch andie Größe des Browserfensters an. Man nennt das „Liquid-Design“.

Nun gäbe es noch reichlich Arbeit bei der Verschönerungder Seite. All das geschieht direkt in der CSS-Datei, und nurdort. DIV-Container nehmen nicht nur jede gewünschteGröße an, sie gelten auch als außerordentlich Gehorsam,wenn es um Rahmen, Abstände jeder Art und Hinter-grundfarben geht.

DIV-Container dürfen auch verschachtelt werden, was dieSache dann etwas diffiziler macht. Doch auch komplexeLayouts kommen in der Regel mit wenigen Elementen aus.

Der Verzicht auf Tabellen zum Zweck der Gestaltung gehtmit vielfältigen Konsequenzen einher.

123

Browser

Nur moderne Browser stellen eine Website auf Basis vonCSS-Containern korrekt dar. Die Grenze lässt sich ungefährbei den Fünfer-Versionen ziehen. Man sollte bedenken,dass selbst ein Browser wie der Internet Explorer 6 schonüber dreieinhalb Jahre auf dem Buckel hat und kaum nochmodern zu nennen ist.

Alte Browser verstehen keinerlei CSS, sie zeigen Web-seiten wie ein einfacher Textbrowser an – ohne irgend-eine Form des Layout. Dies muss in Kauf genommenwerden.

Probleme bereitet der Navigator 4, der gelegentlich nochanzutreffen ist. Dieser Browser beherrscht ein bisschenCSS, oder besser gesagt, das, was man bei Netscapedamals dafür hielt. Oft wird daher von der MöglichkeitGebrauch gemacht, den Browser von der CSS-Formatie-rung auszuschließen. Im Ergebnis funktioniert er dann wieein Textbrowser.

Diese Variante versteckt das externe CSS vor Netscape 4.xBrowsern, die nur media=“screen“ verstehen:

<link href=“styles/style.css“type=“text/css“ rel=“stylesheet“ media=“all“/>

Durch Verwendung des @import Befehls lässt sich zusätz-lich auch der Internet Explorer 3 eliminieren. Der wird zwarkaum noch eingesetzt, ist in Sachen CSS aber ein ganzbesonders unsicherer Kantonist.

<style type=“text/css“ media=“screen“><!— @import „styles/style.css“; —></style>

124

Standards

Webstandard haben mit tabellenlosem Design eigentlichgar nichts zu tun. Dennoch werden sie oft in einem Atem-zug genannt. Eine Seite auf Basis von Containern kannselbstverständlich ebenso fehlerhaft sein wie ein Tabellen-layout standardkonform codiert werden kann. Einen wichti-gen Unterschied gibt es aber. CSS-Design ist erheblich über-sichtlicher und schlanker. Es ist also wesentlich einfachersich nach Standards zu richten, einfach weil man wenigerfalsch machen kann und das validieren leichter fällt.

Suchmaschinen

DIV-Container kommen bei Suchmaschinen gut an. Spiderinteressieren sich schließlich nicht für HTML-Code, sondernfür den Seiteninhalt in Form von Texten. Während einTabellenlayout mit reichlich Gedöns um sich wirft undwichtige Inhalte, wegen der oft zahlreichen Verschachte-lungen, mitunter irgendwo am Ende einer Datei platziert,beschränkt sich das tabellenlose Design auf das Wesentli-che und zeigt Inhalte wesentlich früher.

Barrierefreiheit

Der Umstieg auf CSS-Container verleiht einer Websiteeinen kräftigen Schub in Richtung Accessibility. Die halbeMiete ist damit bereits eingefahren und für eine solideGrundlage gesorgt.

HTML-Editoren

Dem Texteditor ist es egal, welche Techniken Sie anwen-den. Für einen WYSIWYG-Editor gilt das allerdings nicht.Wer WYSIWYG arbeiten will, braucht die neuesten Versio-nen der Programme, beispielsweise Dreamweaver MX2004. Mit Frontpage ist die Arbeit nicht zu machen. Einunlösbares Problem muss das allerdings nicht sein.Während es wirklich aufwändig ist, ein komplexes Tabel-

125

lenlayout von Hand zu codieren, fällt das mit DIV-Contai-nern doch wesentlich leichter. Man kommt ja mit einemBruchteil an Codezeilen aus. Und die später einzufügendenInhalte können wie bisher WYSIWYG gestaltet und danneinkopiert werden. (sl)

Erste Hilfe: HTML- und CSS-Fehler finden

Was tun, wenn das Layout der neuen Seiten partout nichtso will, wie gedacht. Je komplexer der Aufbau, desto höherdie Zahl möglicher Fehlerquellen. So kommen Sie den Pro-blemzonen auf die Spur.

Wenn nach getaner Arbeit das Ergebnis nicht den Vorher-sagen entspricht, oder – was meist der Fall ist – Problemenur in bestimmten Browsern auftauchen, gilt es dem Feh-ler systematisch zu Leibe zu Rücken. Dabei ist anfangs nichtklar, ob es sich um eine Kleinigkeit oder um mehrere Feh-ler handelt.

Bevor es ans Eingemachte geht, fertigen Sie eine Kopie derProblemseite an. Entfernen Sie alle Scripts und fügen Sieetwaige Includes ein, sofern Sie diese nicht lokal sehenkönnen.

Prüfen Sie Ihre Seite zuerst mit einem Validator. Der Onli-ne Service des W3C reicht dazu vollkommen aus. So langehier noch Fehler angezeigt werden, ist die Arbeit noch nichtreif für weitere Tests. Eliminieren Sie die angezeigten Feh-ler und Problemstellen. Beanstandungen wie fehlende ALT-Attribute spielen in dieser Phase natürlich keine Rolle. Aber,wo Sie schon einmal dabei sind...

126

Typische Probleme in diesem Stadium sind fehlender Doc-type oder proprietärer Code. Dazu gehört das beliebteheight=“100%; ein Attribut, das der Internet Explorer zwarkennt, andere Browser aber nicht. In einem solchen Fallmuss mit CSS gearbeitet werden, also style=“height: 100%

Tritt das Problem weiterhin auf, verschaffen Sie sich einenÜberblick. Umgeben Sie die Layoutelemente – Tabellenund Container – mit einem Rahmen. Das geht fix und ein-fach mit dem CSS Befehl

style=“border : 1px solid red“

Nun lässt sich das Layout in einem Browser besserbetrachten. Sie erkennen, wo sich Elemente berühren,gegenseitig den Platz wegnehmen oder die Proportionenschlicht nicht stimmen.

127

Layout mit Hilfslinien

Wenn auch das nicht auf die richtige Fährte führt, ist esZeit, mit Hilfe der Substraktionsmethode quasi scheib-chenweise vorzugehen. Dazu nehmen Sie bestimmte Teiledes Quellcodes heraus. Auch hier hilft uns CSS. Mit

style=“display : none“

kann jeder Bestandteil einer Seite entfernt werden, ohnediesen aus dem Quellcode direkt herausnehmen zu müs-sen. Wenden Sie diese Technik nacheinander auf verschie-dene Seitenbereiche an. Fußzeile, Navigation, Inhalt und soweiter, um Problemzonen weiter einzugrenzen. Ist etwanach dem Eliminieren der Navigation das Problem weiter-hin existent, muss der Fehler aller Wahrscheinlichkeit ananderer Stelle, aber nicht in der Navigation gesucht werden.

Je komplexer, verschachtelter und aufwändiger ein Layoutist, desto komplizierter kann dieser Prozess ausfallen.Grundsätzlich geht es darum, ein Problem einzukreisen,wenn man es nicht auf Anhieb finden kann. Das brauchtseine Zeit, führt aber sicher ans Ziel.

Wer mag, kann die Substraktionsmethode auch so anwen-den: Entfernen Sie einen Teil des Quellcodes durch Aus-schneiden. Prüfen Sie. Ist keine Besserung in Sicht, kopie-ren die den entfernten Teil wieder hinein und fahren Sie mitdem nächsten Abschnitt fort. Die Methode eignet sichauch, wenn das Problem im Stylesheet verborgen ist. (sl)

Firefox-Erweiterungen für Webdesigner

Firefox-Erweiterungen können bei der Fehlersuche helfen.Die Anzahl möglicher Erweiterungen wächst ständig. Hilf-reiche Kleinigkeiten, die es zum Beispiel möglich machen,

128

jeden Link garantiert im gleichen Fenster zu öffnen, einNotizblock, ein Kalender oder zahlreiche Erweiterungen fürdie Menüleisten. Mittlerweile kann man so ziemlich allesbekommen. Von RSS Reader bis hin zur Google-Leiste.

Da Firefox von sich aus recht wenige Funktionen mitbringt,sorgen so genannte Extensions dafür, dass man sich sei-nen Browser quasi selbst in einer Art Baukastensystemzusammenstellt. Lediglich auf die richtige Browserversionist zu achten. Downloads sind in der Regel auch nicht nötig,ein Klick genügt zur Installation. Ein System mit Zukunft.

Die nützliche Browserleiste für Entwickler

Chris Pedericks Web Developer Toolbar hat sich längst zueinem Schmuckstück gemausert. Das Werkzeug kanninzwischen so viel, dass man hier nicht alles aufzählenkann. Die Screenshots zeigen mehr.

Zu haben ist die Leiste kostenlos für Mozilla und Firefox.Ideal nicht nur für neugierige Webworker, sondern auchhilfreich bei der eigenen Arbeit. Die verschiedenen Outline-Modi sorgen für Durchblick. Ein zurückhaltender Buttonrechts außen zeigt sogar, ob die gerade betrachtete Seite

129

den W3C Standards entspricht. Sogar an “Themes” hat derEntwickler gedacht. Die Leiste lässt sich dem eigenenGeschmack anpassen. Selbst Entwürfe aus eigener Handsind machbar.

Maßnehmen im Browser

MeasureIt nennt sich diese Erweiterung für Firefox. Damitlassen sich beliebige Bereiche einer Seite direkt am Moni-tor vermessen. Eine Funktion über die auf die obenerwähnte Erweiterung inzwischen verfügt.

Das Neugierwerkzeug für Webentwickler

Aardvark heißt die Extension für Firefox. In Erscheinungtritt sie, sobald sie über das Kontextmenü aktiviert wurde.Welches Element sich dann auch immer unter dem Maus-zeiger befindet, es wird rot gerahmt und Informationen dar-über erscheinen als Tooltipp.

130

Soweit noch nicht bemerkenswert, doch Aardvark kennt eineReihe von Tastaturbefehlen, mit denen sich ein gewähltesElement löschen oder freistellen lässt; sein Inhalt kann eli-miniert oder der Quellcode angezeigt werden, sogar einenSchwarzweiß-Modus gibt es. Das alles ist durchaus praktischfür schnelle Analysen am lebenden Objekt.

Schnabeltier

Platypus, zu Deutsch Schnabeltier, ist eine neue und dievielleicht schärfste Erweiterung, die man für seinen Firefoxbekommen kann. Sie ermöglich, zumindest im Prinzipetwas, was man sich schon seit Urzeiten wünscht. Nämlichdie Veränderung beliebiger Websites nach eigenemWunsch – und zwar dauerhaft. Was nicht von Interesse istoder stört, kann auf einfache Weise beseitigt oder an eineandere Stelle verschoben werden. CSS-Formatierungenkönnen angepasst und Links verändert werden. Zudem isteigener HTML-Code möglich. Platypus ist verwandt mitAardvark, einer Extension, die wir bereits im Weblog vor-gestellt haben. Die schlechte Nachricht folgt sogleich: Pla-typus ist neu und mitunter fehlerhaft und funktioniert nichtmit allen Webseiten. Außerdem wird eine vorhergehendeInstallation der Erweiterung Greasemonkey verlangt. (sl)

131

Gegen das Chaos: Versionskontrolle

Versionskontrolle ist ein mögliches Heilmittel gegen Chaosin komplexen Projekten, an denen mehrere Entwicklergleichzeitig beteiligt sind. Obwohl meist nur in der Soft-wareentwicklung eingesetzt, sind solche Systeme auch fürWebdesigner interessant.

Profis – und vor allem Profis in Web-Agenturen – arbeitenoft mit mehreren Personen an Projekten, seien es Websei-ten, Skripte oder Anwendungssoftware. Die Aufgabenbe-reiche von Projektmitgliedern können fließend ineinanderübergehen, vor allem, wenn jemand aufgrund von Urlauboder Krankheit ausfällt. In der Regel hat niemand zu jedemZeitpunkt einen umfassenden Überblick über den techni-schen Stand, weil alle gleichzeitig am Projekt arbeiten. Tre-ten Fehler auf, ist deren Behebung nicht mehr einfach. Esist nicht bekannt, was direkt vor Einbau des Fehlersgemacht wurde und wer damit zu tun haben könnte – jegrößer und komplexer ein Projekt ist desto schwierigerwird die Organisation.

Wozu Versionskontrolle?

Projektmanager würden Versionskontrollsysteme lieben,wenn sie nur bekannter wären und häufiger eingesetzt wür-den. Je nach System ist es möglich, den Stand eines Pro-jektes zu einem beliebigen Zeitpunkt aus dem System zuziehen und anzusehen – in gewisser Weise kommt daseiner Art Zeitmaschine gleich. Die Evolutionsschritte desProjekts sind so exakt nachvollziehbar.

Versionskontrollsysteme (VCS) dienen dazu, jeden Zustandeines Projektes zu protokollieren und wiederherstellen zukönnen. Die Anzahl der beteiligten Entwickler spielt dabeikeine maßgebende Rolle. Aber vor allem bei mehreren Ent-

132

wicklern spielen VCSe ihre Vorzüge aus. Besonders hilfreichsind solche Systeme, wenn es um Änderungskonflikte geht.Beispielsweise kann es sein, dass zwei Entwickler unab-hängig voneinander an Arbeitskopien einer Datei arbeitenund diese Änderungen dann in den Entwicklungsbaum(Repository) einspielen, so wie im folgenden Beispiel:

10 Uhr – Entwickler A legt eine lokale Arbeitskopie des Ent-wicklungsbaums aus dem zentralen VCS an („repositorycheck out“) und beginnt, mehrere Dateien in seiner Arbeits-kopie zu ändern.

11 Uhr – Entwickler B gleicht seine lokale Arbeitskopie mitdem aktuellen Stand aus dem VCS ab („repository upda-te“) und beginnt mit seinen eigenen Änderungen an dengleichen Dateien.

133

Versionskonflikt in TortoiseSVN

11.30 Uhr – Entwickler A ist fertig und aktualisiert den Ent-wicklungsbaum im VCS mit seinen Änderungen aus derArbeitskopie („commit changes“).

12.00 Uhr – Entwickler B ist nun ebenfalls fertig und möchteden Entwicklungsbaum aktualisieren („commit changes“).

An dieser Stelle wird klar, welche Probleme auftauchenwürden, wenn Entwickler B nun ohne Versionskontrollsys-tem (VCS) seine Änderungen in den zentralen Entwick-lungsbaum einspielen würde – ein mittleres Chaos wäredie Folge. Ein VCS würde diesen Konflikt bemerken undMöglichkeiten anbieten, ihn aufzulösen.

Zielgruppe

Versionskontrollsysteme werden hauptsächlich von Soft-wareentwicklern eingesetzt. Programm-Quellcodes beste-hen aus einigen hundert oder sogar vielen tausend Datei-en, die ohne Software-Hilfe kaum zu überblicken sind.

134

Generell sind solche Systeme für alle Inhalte geeignet, diein Textform vorliegen. Das können neben Programm-Quell-codes auch Bücher in Textform, XML-, CSS- oder HTML-Dateien sein. Nicht nach jeder Änderung in einer HTML-Datei lohnt eine umfassende Überprüfung in mehrerenBrowsern. Daher ist Versionskontrolle auch für Webdesig-ner interessant, weil es so einfach ist herauszufinden, wannund wie eine Browser-Unverträglichkeit in eine HTML-Sei-te gelangt ist. Dazu probiert man einfach nach und nachalle gespeicherten Zustände einer Datei aus.

Eine einfache Art der Versionskontrolle ist in Wikis zu fin-den. Auf der Wikipedia beispielsweise besitzt jeder Artikeleine Seite namens „Versionen/Autoren“, auf der die kom-plette Historie eines Artikels vermerkt ist.

Subversion

Subversion (SVN) gehört zu den beliebtesten Versionskon-trollsystemen unter Softwareentwicklern, nicht zuletzt weilder Subversion-Server bis auf Windows so gut wie aufallen aktuellen Betriebsystemen läuft. Die liberale, BSD-ähnliche Lizenz der Software hat zu einer breiten Unter-stützung in anderen Projekten geführt. Viele bekannte inte-grierte Entwicklungsumgebungen wie Visual Studio,CodeWarrior und Eclipse unterstützen Subversion als Cli-ent oder sind entsprechend erweiterbar. Somit bietet SVNsich als Versionskontrollsystem an, weil die damit verwal-teten Projekte auch bei einem Wechsel der Entwicklungs-umgebung unverändert weiter genutzt werden können.

Eigenständige Clients

Wer integrierte Entwicklungsumgebungen (IDE) nicht nutzt,kann auf IDE-unabhängige Programme setzen. Drei davonsollen hier in aller Kürze vorgestellt werden, damit der Ein-stieg leichter fällt.

135

Die freie Software TortoiseSVN hängt sich als Erweiterungan den Windows-Explorer, besitzt also kein eigenes Fenster.Die Bedienung ist dementsprechend gewohnt und geht ein-fach von der Hand. Deutsche Programmtexte sind optionalverfügbar. TortoiseSVN läuft unter Windows 2000 und XPund setzt mindestens den Internet Explorer 5.5 voraus.

KDESvn für KDE und Unix/Linux hängt sich ähnlich wie Tor-toiseSVN in das Explorer-Pendant Konqueror ein. DieBedienung findet wie im Windows-Explorer zum großenTeil über Kontext-Menüs statt. Allerdings kann das freieProgramm auch eigenständig genutzt werden und ist dahernicht direkt auf einen KDE-Desktop angewiesen. Das Pro-gramm verwendet automatisch deutsche Texte, wenn KDEauf Deutsch eingestellt wurde.

Ebenfalls freie Software ist SubCommander. Das Programmfühlt sich erfreulicherweise sowohl auf Windows als auch aufMacOS X und Linux heimisch. Das Programm befindet sich

136

TortoiseSVN

aber noch in einer frühen Entwicklungsphase. Dokumentati-on und Installation sind noch nicht optimal. Plattform-Unab-hängigkeit und einheitliche Bedienung machen das Pro-gramm aber interessant für gemischte Betriebssystemumge-bungen, wie sie in Web-Agenturen häufig anzutreffen sind.

Einarbeitung notwendig

Versionskontrollsysteme wie Subversion sind nicht unbe-dingt intuitiv zu bedienen. In wenigen Stunden ist eine Ein-arbeitung allerdings möglich, die oben genannten grafi-schen Programme helfen dabei. Das Wichtigste dabei ist,das grundlegende Konzept eines VCS zu verstehen. DieWebsite Wikibooks bietet ein deutsches „Online-Buch“ zuSubversion an – es ist allerdings noch nicht fertig. Komplet-ter und aktueller – dafür nicht auf Deutsch – ist „Version Con-trol with Subversion“. Es ist gedruckt im Buchhandel erhält-lich oder kostenlos als PDF- oder HTML-Download.

Die wichtigsten Begriffe

Repository – Wenn man die Definition dieses abstraktenBegriffs (engl. „Behälter“, „Aufbewahrungsort“) etwasdehnt könnte es eine Art spezialisiertes Dateisystem dar-stellen, welches Versionskontrollfunktionen für Datei- undVerzeichnisstrukturen bereitstellt.

Checkout – Ein Repository wird ausgecheckt. Zu deutsch:eine Kopie eines bestimmten Entwicklungsbaumes wirdvom Server heruntergeladen und dient lokal als Arbeitsko-pie, die mit beliebigen Programmen bearbeitet werden kann.

Commit – Die veränderte lokale Arbeitskopie wird mit demEntwicklungsbaum auf dem Server abgeglichen.

Import – Ein neues Projekt wird in ein Repository impor-tiert. Das ist eigentlich immer die erste Aktion, die ausge-führt wird, wenn ein neues Projekt gestartet wurde. (rs)

137

Optimiert für...

Ein eigentlich altes Thema. Doch immer noch gibt es mehrals genug Seitengestalter, die der Meinung sind, man müs-se seinen Besuchern oder Kunden genaue Vorgabenmachen. Wer sich nicht danach richtet, ist dann eben selbstSchuld, und bekommt miese Seiten serviert.

Für den Gestalter erfüllen solche Hinweise einen wichtigenZweck. Man handelt nach dem Motto: „Ich hab’s euch jagesagt...“. Wenn etwas nicht klappt, ist die Technik desBesuchers Schuld, nicht die mangelnde Kompetenz desSchöpfers.

138

Ein dramatischerHinweis, prominentplatziert in derMenüleiste

Ein Besucher wird nicht aufgrund eines Hinweises seinenBrowser wechseln, sofern er überhaupt eine Alternative zurVerfügung hat. Er wird seine Farbeinstellungen nicht mani-pulieren und wahrscheinlich auch das Browserfenster erstverkleinern oder vergrößern, wenn er es unbedingt muss.Aber Angst machen kann man ihm.

„Optimiert für...“ findet sich keineswegs nur plakativ auf denStartseiten. Mancher fühlt sich berufen, seine Vorgaben überdie Titelleiste herauszuschreien. Dort allerdings sind Hin-weise jeglicher Art vollkommen fehl am Platze. Solche Sei-ten ergeben einen untauglichen Bookmark und verschenkendie besten Chancen in Bezug auf Suchmaschinen.

Garantien für eine perfekte Darstellung in jedem Browserkann man als Webdesigner nicht geben. Zu vielfältig sinddie Produkte, Versionen, Systeme und Einstellungen. Esnützt gar nichts, dem Kunden Wunschvorstellungen entge-genzuhalten oder ihn gar zu detaillierten Handlungen auf-zufordern.

Das hält manchen nicht davon ab, mit ausführlichenSystemvoraussetzungen zu glänzen. So etwas findet sichdann auf „Hilfe-Seiten“ oder im Impressum. Nett gemeint,aber wen interessiert das?

Ein Webdesigner tut gut daran, seine Projekte von einerfesten Bildschirmauflösung unabhängig zu gestalten. DerUmgang mit verschiedenen Browser ist eine Selbstver-ständlichkeit.

139

Missbrauchte Titelzeile

Hinweis in der Fußzeile

Der Hinweis auf Javascript ist ebenfalls unnötig. WerJavascript oder Cookies deaktiviert, tut dies aus gutemGrund. Wichtige Funktionen sollten davon nicht abhängigsein, wiewohl man an Komfort einbüssen kann. Doch werbewusst auf Javascript oder Cookies verzichtet, weiß dies.

140

Systemvoraussetzungen für eine Website

Auch Microsoft ist sich nicht zu schade, dem Gast einenSchrecken einzujagen. Wenn es um Updates geht, gilt Fire-fox dort als nicht unterstützter Browser. (sl)

Redundante Navigation

Genügt eine Navigationsleiste oder braucht es mehr?Optionen im Überfluss können helfen, aber auch Verwir-rung stiften.

Redundant meint „üppig“. Der Link zu einer Rubrik tauchtdann nicht nur einmal auf einer Seite, sondern zwei- odermehrfach auf. Was sich in der Menüleiste findet, sieht manbeispielsweise auch am Ende einer Seite.

Grundsätzlich lässt sich sagen: Je mehr Optionen demBesucher zur Verfügung stehen, desto schwieriger wird esfür ihn, eine Entscheidung zu treffen. Andererseits kannihm die Redundanz helfen, Wichtiges nicht zu übersehen,einfach indem es häufiger auftaucht. Wenn Sie möchten,das eine Seite unbedingt angeschaut wird, dann stellen Sieden Link nicht nur heraus (machen Sie ihn groß), wieder-holen Sie ihn an geeigneten Stellen mehrfach.

141

Kopfzeile mit Navigation beim Elektronik Versender Conrad

So spricht nichts dagegen, wichtige Links noch einmal inder Fußzeile auftauchen zu lassen. Platz ist dort meistgenug, da sich viele Designer darauf beschränken, dort ver-meintlich Unwichtiges wie Links zu Impressum, Kontaktoder AGB unterzubringen.

Das Beispiel „Otto Versand“ zeigt, wie man es auchmachen kann. Die Navigationsleiste in Reiterform enthältdank DHTML zahlreiche Unterrubriken.

142

Wichtige Links werden in der Fußzeile wiederholt

Redundante Navigation bei Otto: Rubriken finden sichsowohl oben in der Navigation, mit DHTML Feinauswahl,als auch auf im Menü auf der linken Seite.

Ebenso kann man aber auch Links direkt zur Wunschrubrikgelangen. Redundanz macht vor allen dort Sinn, wo derEinsatz bestimmter Techniken, die Benutzbarkeit verhin-dern kann. DHTML-Menüs – wie im Beispiel – sind nicht mitjedem Browser benutzbar. Gut, wenn es eine Alternativefür diese Fälle gibt. Dazu zählen auch Javascript-Links oderImagemaps.

„Mehr“ ist nicht gleich „besser“, doch können sich unter-schiedliche Wege, um ans Ziel zu gelangen, als hilfreichund bequem erweisen. Das gilt im Wesentlichen für dieStartseiten, wer Unterseiten überfrachtet ist nicht gut bera-ten. (sl)

Lebendiges A – Z

Die klassische Sitemap ist bei weitem nicht die einzigeLösung, umfangreiche Inhalte zugänglich zu machen. Auchder A–Z Index weiß in verschiedenen Formen zu gefallen.

So mancher Besucher mag eher den klassischen A bis ZIndex, den man aus Büchern kennt. Wie die Sitemap auch,bietet er eine schnelle Navigation neben dem Hauptmenü,ist dabei aber mehr am Benutzer orientiert. Sitemaps stel-len im Grunde die Struktur der Website dar, der A bis ZIndex dagegen zeigt alle Themen auf, die der Besucher aufder Website finden kann – und zwar alphabetisch.

Erstklässler

Nun gibt es verschiedene Wege, einen solchen Index aufder Website umzusetzen. Die einfachste Technik nutzt aus-schließlich HTML. So ein Index kann aber schnell sehr lang

143

werden. Eine Lösung wäre, ihn auf 26 Seiten aufzuteilen.Doch auch die Darstellung auf einer Seite bietet Vorteile.Denn hier kann ohne Seitenhüpfen auf einen Blick erfasstwerden, was die Website bietet. Das freut auch den ScreenReader oder den Keyboard-Navigator. Sofern man diesüberhaupt für nötig hält, der Dr. Web A–Z Index kommtohne all das aus.

Eine einfache Liste mit einigen Anker-Punkten reicht alsoaus. Der Besucher klickt einen der Buchstaben an undspringt so die Seite zu den gewünschten Informationenherunter. In dem „a“-Element für den Anker werden hierbeide Attribute „id“ und „name“ genutzt. Ein Browser, derden Verweis nach der XHTML-Syntax behandelt, benötigtdas „id“-Attribut, während ein Browser, der den Verweisnach HTML-Syntax ausführt, das „name“-Attribut zurErmittlung des Ankers verwendet. Sicher ist sicher.

Ohne CSS hat HTML keinen Stil. Schon wenig Code ineiner externen CSS-Datei genügt, um eine horizontaleNavigation samt Hover-Effekt hervorzuzaubern. Und wo wirgerade dabei sind, dürfen auch Schriftart und Linkfarbeverschönert werden. Die erste Änderung ist allerdings inder HTML-Datei nötig, um diese auf CSS vorzubereiten.Selbstverständlich gehört der Link auf die externen CSS-Daten dazu:

<link rel=“stylesheet“ media=“screen“href=“az.css“>

Das der Inhalt der CSS-Datei auch Wirkung auf die einzel-nen Komponenten unseres A–Z Index hat, benötigt manIDs. Vorerst nur für die Navigation:

<ul id=“abisz“>

In der CSS-Datei wird jetzt definiert, was mit der Navigati-on geschehen soll:

144

#abisz{list-style-type:none;background:#FF0;padding:0;margin:0;z-index:10;}#abisz li{display:inline;list-style-type:none;margin:0;padding-right:5px;}#abisz li a{z-index:100;text-decoration:none;padding:0 5px;color:#000;}#abisz li a:hover{background:#fff;color:#000;}#abisz li a:active,#abisz li a:focus{background:#000;color:#fff;

Das sieht dann wie folgt aus:

145

Redmonds Rache

Es könnte alles so schön sein, doch Microsofts InternetExplorer macht uns einen Strich durch die Rechnung. Gut,es ist nur eine Kleinigkeit, doch unser Index soll nach Mög-lichkeit perfekt sein. Nutzt man das Keyboard statt derMaus zur Navigation, dann kann man beim Firefox mit demDrücken der Tab-Taste durch die einzelnen Buchstaben vonA bis Z hüpfen und mit „Enter“ bestätigen. Ein weiterer„Tab“ bringt uns zum nächstgelegenen Link, hier im Bei-spiel wäre das „Zurück zur Übersicht“. Beim Internet Explo-rer landet man ebenfalls mit „Enter“ an der gewünschtenStelle, doch ein weiterer „Tab“ bringt uns nicht zum nächs-ten Link, sondern zurück zur Navigation. Ein Teufelskreis.Das lässt sich umgehen:

146

A–Z mit „Style“

<div><h3><a name=“a“ id=“a“>A</a></h3><ul><li>Platzhalter</li><li>Platzhalter</li><li>Platzhalter<li>Platzhalter<li>Platzhalter</ul><p class=“zuruck“><ahref=“#zurnavigation“>Zurück zurÜbersicht</a></p></div>

Wie man sieht, wird jeder Buchstabenbereich zwischen<div> und </div> eingeklemmt. Die kompletten Inhalte vonA bis Z werden zusätzlich mit <div id=“inhalt“> ... </div>umschlossen und dazu in der CSS-Datei „width“ definiert.

#inhalt div{width:100%;}

Explorer-Bug behoben: A bis Z Index CSS-Version IE.

Diese Kombination aus definierter Größe und umschließender Liste und deren Links, sorgt für eine funktionierendeKeyboard-Navigation – auch mit dem Internet Explorer.Doch noch immer ist es eine lange Seite mit vielen Ele-menten. Auch das lässt sich ändern. Allerdings benötigtman Javascript.

Dynamisches A – Z

Unser Ziel ist es, nur jeweils den Part des Index anzuzeigen,für den sich der Besucher interessiert. So verhindert mandie ellenlange Liste, spart Platz und schafft mehr Übersicht.

147

Das Script fragt, ob Javascript im Browser aktiviert ist undzeigt dann als erstes die Sektion für den Buchstaben A an.Wird ein anderer Buchstabe angeklickt, wechselt das Scriptautomatisch die Sektion.

Auch in der CSS-Datei gibt es eine Änderung, die dafürsorgt, dass ungewünschte Sektionen so lange unsichtbarbleiben, bis man sie aufruft:

.verstecken{position:absolute;left:-999em;}.zeigen{position:relative;left:0;}

Da sich auch der Link ändert, kann theoretisch jede Sekti-on für sich in den Favoriten landen. Das „Zurück zur Über-sicht“ erscheint jetzt nutzlos, doch man sollte an die Surferdenken, die Javascript deaktiviert haben.

Lebendiges A – Z

Wem das noch nicht reicht, der kann die Anzeige weiter„tunen“, so dass schon die Berührung des Mauszeigers zurÄnderung der Sektion führt. Das Javascript ist schon vor-bereitet, es muss nur noch in der HTML-Datei für das Menüfolgender Code eingefügt werden:

<ul id=“abisz“ class=“hover“>

Viele Inhalte sorgen wieder für lange Listen. Schon dieNavigation wurde horizontal geordnet, darum sollte manauch die Inhalte mehrspaltig gliedern. In die CSS-Dateikommt dafür dieser kleine Zusatz:

148

#inhalt.spalten li{float:left;width:10em;}#inhalt.spalten p.zuruck{clear:both;}

So werden die Inhalte geordnet, aber damit der Link„Zurück zur Übersicht“ auch stehen bleibt, muss er in derHTML-Datei für CSS ansprechbar gemacht werden: (dm)

<p class=“zuruck“><ahref=“#zurnavigation“>Zurück zurÜbersicht</a></p>

149

A bis Z Index, „auf der Stelle“

Wohin soll das führen?

Zum Rätselraten hat im Web niemand Zeit. Der Surfermöchte rasch zur Sache kommen und wissen worauf ersich einlässt. Die Unterscheidung interner und externenHyperlinks ist deshalb eine sinnvolle Sache.

Was passiert, wenn ich klicke und wo lande ich dann? EineFrage, die oft erst im Nachhinein beantwortet werden kann.Aber das muss nicht sein. Dem Gestalter stehen probateMittel zur Verfügung.

Das Title-Attribut

Berührt die Maus den Hyperlink, öffnet sich ein kleines Hin-weisfenster. Vorteil: flexibel, verschiedene Texte je nachBedarf sind möglich. Nachteil: Besucher mit schnellen Fin-gern sind sofort weg und bekommen nichts zu sehen.

Quellcode

<a href=“link.html“ title=“Hier verlassen Sieunsere Website“>Link</a>

Beispiel

Grafiken

Hier vermittelt ein Icon die Botschaft. Die Attribute „alt“oder „title“ können zusätzlich verwendet werden.

150

Mit Icons lassen sich weitere Botschaften vermitteln:

Geschützte Seite:

Video:

Anders formatieren

Nahe liegend aber problematisch. Werden externe Hyper-links anders als interne Links dargestellt, ist das zwar gutzu unterscheiden, doch der Besucher weiß erst einmalnichts davon. Er muss das Prinzip erst für sich entdeckenund auch es bis zum nächsten Besuch behalten.

Auslagern

Hyperlinks tauchen nicht direkt im Text auf, sondern wer-den zusammengefasst am Ende der Seite präsentiert.

151

„Q-Bullets“ sind eine geniale Sammlung nützlicher Minia-turbilder für Webdesigner. Ideal um zum Beispiel umHyperlinks, Flash oder PDF-Dateien kenntlich zu machen.Es gibt Grafiken für das Hoch- oder Herunterscrollen, fürNews, Suchen, Info, Email, Log-in und viele mehr. Das alleslässt sich bequem und komplett als ZIP-Datei herunterla-den und darf kostenlos verwendet werden.

Gute Ratschläge sind eine prima Sache, doch nicht für allesist Zeit. Dieser Hinweis geht an alle, die wissen, dass Dr.Web keine der oben beschriebenen Techniken verwendet.Noch nicht. (sl)

152

Verwechslung ausgeschlossen: externe Links beim Spiegel

Schicke Menüs

Miese Menüs gibt’s genug, doch wo bleiben die schönstenExemplare? Bitte sehr! Auf Flash und allzu grafiklastigeGestaltungen haben wir in dieser Auswahl verzichtet.

Auch wenn sich die Ge-schmäcker unterscheiden,ein prima Menü erkenntman sofort. Denn einegelungene Gestaltung reichtnicht, das Ganze muss auchfunktionieren und für denBenutzer einen Sinnmachen. Ideen gibt es reich-lich, es muss ja nicht immeralles gleich aussehen.

Liebevoll schön illustriert,mit sanftem MouseOver-Effekt ausgestattet, präsen-tiert sich das Menü derDatenlotsen. Es erinnertnicht zufällig an bekannteAnwendersoftware (daten-lotsen.de).

153

Dem gleichen Prinzip folgt dieses Exemplar – auch wenn esganz andere wirkt. Ohne die originellen Icons bliebe aller-dings nicht viel davon übrig (scallywagproductions.com).

154

Komodo Media verwendet gleich mehrfach Reiter – eineArt Aufblätter-Technik. So läst sich mehr auf knappemRaum unterbringen (komodomedia.com).

Eher Gewagtes kommt ausgerechnet von der als biedergeltenden IHK. Das Farbleitsystem, das hier nicht zur Gel-tung kommt, findet sich hier waagerecht unter dem Schrift-zug „IHK Geschäftsfelder“. Das ist zwar nicht sofort zudurchschauen, macht aber durchaus etwas her. Zudemkommt die Konstruktion mit vergleichsweise wenig Platzaus (muenchen.ihk.de).

155

Auf ebenso gelungene wie unübliche Weise bringt manhier die Suchbox unter. Ein perfektes Menü in ausgespro-chen moderner Anmutung (seitenbau.com).

156

Minz Meyer ist CSS-Künstler, das spiegelt auch seineMenüleiste mitsamt einiger MausOver-Effekte wieder (rese-archkitchen.de/blog).

Der Kaffeeröster Starbucks lagert seine Ikonen ein wenigzur Seite aus (starbucks.com).

157

Sieht gut aus und stellt auf geschickte Weise eine Verbin-dung zur Farbe des jeweiligen Themas her. Ein Kardinal-fehler allerdings bleibt, die Schrift selbst funktioniert nichtals Hyperlink (stimuleyefonts.com).

Kunstvolle Zusammenarbeit der Menüpunkte mit einemFoto. (davyvandenbremt.be/blog).

Übliche Verdächtige bei der Netbank. Hier allerdings wur-de eine Zusatznavigation links vom Hauptmenü platziert.Eine gestalterisch frische Idee, die der Benutzbarkeit ent-gegenkommt (netbank.de). (sl)

158

Miese Menüs

Je umfangreicher sich eine Website entwickelt, desto schwie-riger wird die Organisation der zahlreichen Daten. Das schlägtauch aufs Menü durch. Einerseits soll es alle wichtigen Berei-che stets verfügbar machen, andererseits muss es eindeutigund übersichtlich genug sein, um den Besucher rasch undpräzise an das gewünschte Ziel zu bringen.

Ein schlechtes Menü schafft vor allem eines, es irritiert, esnimmt die Lust am Weitersurfen und provoziert das schnel-

159

le Verlassen der Website. Mißverständliche Betextung,kompliziertes Handling und der Versuch Usability nach ei-genen Ideen auszulegen, tun ihr Übriges.

Die Startseite der „Vereinigung der Web-Designer“ wirktauf den ersten Blick unproblematisch. (vdwd.de)

Klickt man nun auf den Link „ziele“, wandelt sich das Menüund schaut auf der nun aufgerufenen Seite plötzlich so aus:

160

Auch ein Verein fürWebdesignerdarf kritisiertwerden

Unterseite als Einbahnstraße

So schön ein Aufklapp-Menü ist, weil man mehr darinunterbringen kann, so unangenehm ist die Erfahrung, dieman macht, wenn man versucht einen dieser Linksanzuklicken.

Das funktioniert nämlich nicht, weil die einzelnen Textenicht verlinkt wurden. Stattdessen hat der geneigte Surferauf die fliederfarbenen Kugeln zu klicken und fühlt sichleicht auf den Arm genommen.

Auch das letzte Beispiel gehört zur Familie der Auf- undZuklapper. Diesmal in der Waagerechten und mit DHTMLrealisiert. Hier wird die Auswahl zu einem motorischenGeduldsspiel.

161

Lang und Länger

Das Menü erstreckt sich nicht nur über die ganze Breite derSeite, es wird auch immer schwieriger den letzten nochauftauchenden Link mit der Maus zu erreichen. Wer zittert,verliert. Und darf noch einmal von vorn beginnen.

Ein schlechtes Menü schafft vor allem eines, es irritiert, esnimmt die Lust am Weitersurfen und provoziert das schnel-le Verlassen der Website. Mißverständliche Betextung,kompliziertes Handling und der Versuch Usability nacheigenen Ideen auszulegen, tun ihr Übriges.

Hier geht es nicht darum, einen Designer oder Betreiber anden Pranger zu stellen, sondern um nachdenkenswerte Bei-spiele aus der Praxis. Das Problem: Vieles kann komplett an-ders verstanden werden, als es gedacht und vorgesehen war.

162

Beispiel Nummer 1 sieht zwar gut aus, erfüllt aber nichteinmal die Mindestanforderung, die man an ein Menüstellt. Es fehlt jeglicher Hinweis darauf, wohin ein Klickführt. Auch Anhand der Symbolik ist dies nicht abzuleiten(dikon.be).

Diese, nach allgemeinen Maßstä-ben professionell gemachte Web-site, trennt Inhalt in Navigationsoweit voneinander, dass einBruch entsteht. Wer liest und mitdem Mauszeiger in Textnähe ruht,weiß nicht wo er weiterklickenkann. Eine seitliche Navigation gibtes nicht. Der Ausschnitt hier machtden Riß nur unzureichend deutlich.Da hilft nur: zurücklehnen und neuorientieren (www.amball.de).

163

Ein klassischer Fall einer „Scheinnavigation“. Sieht aus wieeine Menüleiste, ist aber keine Menüleiste. Es handelt sichum eine Vorschau auf das, was uns nach dem Login erwar-tet. Klickbare Links gibt es nicht. Ausführliche Erläuterun-gen finden sich jeweils hinter dem Informations-Symbol(benchpark.de)

164