Web

Liste des Grauens

Die größten Webdesign-Sünden

08.11.2012
Von 
Stefan von Gagern ist diplomierter Medientechniker (FH) und war als Redakteur und Ressortleiter bei den Fachtiteln "Screen Busines Online" und "Page" tätig. Später lehrte er als Dozent für Medienkonzeption im Master-Studiengang "Multimedia Production" an der Fachhochschule Kiel. Heute schreibt er als freier Fachjournalist und Autor über Themen wie Publishing, Internet, Social Media und Digital Lifestyle. Parallel berät er Unternehmen bei der Konzeption und Umsetzung von Social-Media-Auftritten.
Webdesign-Pannen gibt es tausende, einige sind aber auffällig oft selbst bei vermeintlich professionell gemachten Webauftritten zu finden. Wir zeigen die häufigsten Ausrutscher. Unsere Checkliste hilft, den eigenen Auftritt zu verbessern.

Das perfekte Webdesign gibt es nicht. Eine Website ist immer ein Zusammenspiel von vielen Elementen. Inhalte wie Texte und Bilder, Interaktivität, Design mit Farben und Typographie und viel Technik im Hintergrund müssen optimal zusammen arbeiten, um dem Surfer ein gutes Erlebnis zu ermöglichen.

Der Unterschied zwischen guten und schlechten Angeboten ist gleichwohl auszumachen: Auf guten Websites findet der Besucher alle Infos schnell und mühelos und kann sein Ziel, zum Beispiel etwas zu kaufen, stresslos erledigen. Im besten Fall macht ihm die Bedienung sogar Spaß und das gesamte Design ruft positive Emotionen hervor. Folge für den Anbieter: Seine Marke bleibt als positives Erlebnis im Gedächtnis zurück. Der User kommt garantiert wieder. Ziel erreicht.

Soweit die Theorie. In der Praxis ist jede professionelle Website jedoch ein einziger Kompromiss. Jeder Entscheidungsträger will mitreden - seien es Redaktion, Programmierer, Unternehmensführung oder Marketing. Jeder will seine eigenen Bedürfnisse am besten zu 100 Prozent auf einem Webauftritt umgesetzt sehen. Das Problem: Eine gute Website adressiert die Bedürfnisse der Zielgruppe und nicht die Bedürfnisse des Anbieters. Ein weiteres Problem ist die Technik auf Seiten der potenziellen User: Verschiedene Browser, Betriebssysteme, Bildschirmgrößen und limitierte Bandbreiten erschweren es, alle Besucher gleich gut zu bedienen und erfordern weitere Kompromisse.

Gutes Webdesign ist immer eine große Herausforderung. Wer den eigenen Auftritt aufwerten will, sollte deshalb auch von den Fehlern anderer lernen. Ein guter erster Anlaufpunkt ist (neben diesem Artikel) webpagesthatsuck.com - ein Angebot, das bereits seit 1996 schlechte Auftritte präsentiert und sogar auszeichnet.

Wir haben einige haarsträubende Webdesign-Pannen zusammengestellt. Mit unserer Checkliste schaffen Sie es zudem, bestehende Schwachpunkte in Ihrem Auftritt aufzudecken und künftig zu vermeiden.

1.) Ruf mich nicht an: Hinter dem Kontaktformular verstecken

Wer Ärger mit Conceptronic-Produkten hat, muss sich erst einmal durch ein überlanges, in jedem Fall englischsprachiges Kontaktformular quälen.
Wer Ärger mit Conceptronic-Produkten hat, muss sich erst einmal durch ein überlanges, in jedem Fall englischsprachiges Kontaktformular quälen.
Foto: Stefan von Gagern

Webdesign heißt Vertrauen wecken und Vertrauen kann nur erwecken, wer sich offen und kommunikationsbereit präsentiert. Es ist immer wieder erstaunlich, wie viele Firmen sich hinter unhandlichen Kontaktformularen verstecken oder nicht einmal eindeutig verraten, wo sich der Firmensitz befindet. Typischer "Abtörner" für den Erstkontakt ist das Kontaktformular, das zum Ausfüllen vieler Pflichtfelder zwingt und dann eine Nachricht an das neutrale info@firma.com schickt. Wer weiß, ob die Mail im Postfach irgendeiner Empfangsdame landet oder ob jemand überhaupt fähig ist, die Frage an den richtigen Ansprechpartner weiterzuleiten.

Direkte Durchwahl-Telefonnummern, spezifische Ansprechpartner etc. sind hier nicht zu finden. Unternehmen, die ihre Adresse nur im Impressum zeigen, werden nur Kunden anlocken, die sich unbedingt dort melden müssen. Genauso ungeschickt ist es, wichtigen potenziellen Besuchern wie Geschäftspartnern oder Journalisten keinen Bereich mit spezifischen Firmeninfos, Bildmaterial und Ansprechpartnern anzubieten.

Kontaktmöglichkeiten gibt es genügend: Live-Chats, kostenlose (oder zumindest günstige) Hotlines, Rückrufservice und Social Media bieten Möglichkeiten für jedes Budget. Wer sie nutzt, muss jedoch auch dafür sorgen, dass Anfragen über die angebotenen Kanäle garantiert und zeitnah beantwortet werden.

2.) Infomüll: Leeres Gelaber und Bilder von der Stange

Zum Glück haben viele Websites inzwischen gelernt, dass man seine Besucher nicht mit "Willkommen auf unserer Website..." begrüßen muss - sich sogar blamiert, wenn man es immer noch schreibt. Der Surfer hat es eilig und möchte möglichst sofort in die Inhalte eintauchen.

Jede Art von Verpackung, wie inhaltsleeres Marketing-Gelaber, steht ihm dabei nur im Weg. Oft wird vergessen, dass dazu auch Grafiken gehören, die keiner braucht. Die Dame vom Callcenter im Kontaktbereich oder grinsende Anzugträger nimmt schon keiner mehr wahr. Sie transportieren keine Information, sondern stammen aus dem Business-Bereich vom Stockfoto-Anbieter. Also lieber weglassen und wenn doch Fotos gewünscht sind, besser den echten CEO oder Teammitglieder fotografieren. Das heißt natürlich nicht, dass sonst nur Infografiken und Produktfotos auf die Website dürfen. Auch Branding-Elemente wie Farbflächen, Illustrationen, Symbole oder Logos transportieren Information oder können helfen, Infos schneller zu erfassen. Räumen Sie also die leeren Hülsen aus dem Weg!

3.) Klein und kontrastarm: Die Website als Sehtest

Weblayout ging mal so: Man nehme die am weitesten verbreitete Monitorauflösung und quetsche möglichst alles in ein starres Layout in einem entsprechend großen Browserfenster. Heute heißt die Erfolgsformel "responsive Webdesign" - das heißt, dass sich die Seiten von allein an den verfügbaren Platz anpassen - egal, ob auf dem 20-Zoll-Bildschirm oder dem Smartphone.

Kleiner Text, grau auf weiß: Wer bei BMW Hauptmenü und Texte lesen kann, braucht keine Brille.
Kleiner Text, grau auf weiß: Wer bei BMW Hauptmenü und Texte lesen kann, braucht keine Brille.
Foto: Stefan von Gagern

Einige sind aber immer noch bei der alten starren Formel hängen geblieben. Der Platz ist beschränkt und verlangt dem Besucher mit winzigen Texten und briefmarkengroßen Bildern oft perfekte Sehstärke ab. Der Effekt wird nicht selten von einem zu schwachen Kontrast verschlimmert: Graue Schrift auf weißem Grund sieht vielleicht edel aus, ist aber schlecht lesbar. Bei Web-Typographie geht es in erster Linie aber nicht um Ästhetik, sondern um Benutzbarkeit. Wer einen Text nicht lesen kann, wird die Seite verlassen. Und oh Wunder: Es gibt sogar Standards des World Wide Web Consortium W3C für den Kontrast auf Web-Seiten. Zu bedenken ist auch, dass Nutzer mit Sehschwächen die Bildschirmdarstellung oft vergrößern oder sogar invertieren möchten. Deshalb gilt: Gutes (und barrierefreies) Design muss in allen Darstellungsformen funktionieren.

4.) Nicht zu stoppen: Multimediale Nervenproben

Musik, Videos und Animation sind beliebt, weil sie Emotionen transportieren können. Falsch eingesetzt kehrt sich das jedoch ins Gegenteil um und diese Elemente werden zur Nervenzerreißprobe. Unverlangt startende Videos vor sich hin dudelnde Hintergrundsounds und zappelnde Animationen führen meist nur dazu, dass der Besucher die Seite schnell wieder verlässt - oder aus Verzweiflung den Web-Browser gleich komplett schließt.

Gern vergessen manche Anbieter auch, dass viele Nutzer die Seite im Hintergrund geöffnet lassen und sich ihrem E-Mail-Programm oder anderen Dingen widmen. Irgendwann fragt sich der Nutzer dann schon, wo das Gedudel im Hintergrund eigentlich herkommt. Also: Den Nutzer immer erst fragen und volle Steuerungskontrolle geben, sobald Multimedia serviert wird. Animationen sind sparsam einzusetzen, weil zu viel Bewegung nur Nervosität suggeriert und den Besucher unaufmerksam werden lässt.

5.) Wenn die Balance kippt: Zuviel Drumherum, kaum Inhalt

Besonders redaktionelle Websites bieten oft teuer erstellte Inhalte kostenlos an, müssen aber auch selbst wieder Geld einspielen. Meistens wird Online-Werbung geschaltet, die sich bei entsprechenden Besucherzahlen lohnen kann. Der Besucher akzeptiert dies sicher auch.

„Vorsicht vor zu viel Werbung“ gilt auch für Eigenwerbung wie Hinweise auf Sonderangebote in Online-Shops (hier auf der Startseite von www.pixmania.com).
„Vorsicht vor zu viel Werbung“ gilt auch für Eigenwerbung wie Hinweise auf Sonderangebote in Online-Shops (hier auf der Startseite von www.pixmania.com).
Foto: Stefan von Gagern

Wichtig ist jedoch, darauf zu achten, dass man es damit nicht übertreibt. "Zuviel Fett und zu wenig Fleisch" verjagen die Leser. Wer es mit blinkenden Bannern, Google-Textanzeigen und womöglich auch noch aufdringlichen Formaten wie Pop-Ups zu wild treibt, stößt schnell an die Toleranzgrenze der Besucher. Nicht nur die Werbung von Partnern ist oft lästiges Beiwerk, es betrifft auch Eigenwerbung, die ständig marktschreierisch neben den eigentlichen Inhalten auf Abos, Sonderangebote etc. hinweist. Gleiches gilt für Tag-Clouds, Link-Vorschläge, Hinweise auf Social-Media-Auftritte etc. Also: Immer auf die ausgewogene Balance achten!

6.) Navigation aus der Hölle: Geschicklichkeitsproben mit Klappmenüs

Wenn es eng wird im Layout, weil zu viele Navigationspunkte auf die Seite müssen, ist das Allheilmittel oft das Drop-Down oder Klappmenü. Da lässt sich eine Menge hineinpacken und so Platz sparen - wie praktisch! Aus Sicht der Besucher sind die gescripteten Menüs, die oft nicht in allen Browsern astrein funktionieren, ein Albtraum. Meist klappt eine undurchsichtige Linkflut auf, die sich keiner merken kann. Noch schlimmer wird es bei Nutzung von Tablets und Smartphones, auf denen in diesem Chaos keine sinnvolle Navigation mehr möglich ist. Wer da keine App oder angepasste Mobilversion seines Auftritts anbieten kann, hat verloren.

Wie ein gutes Klappmenü aussehen kann, zeigt Vimeo.com: wenige, aufgeräumte Unterpunkte, die mit kurzen Texten vor dem Klick erklärt werden.
Wie ein gutes Klappmenü aussehen kann, zeigt Vimeo.com: wenige, aufgeräumte Unterpunkte, die mit kurzen Texten vor dem Klick erklärt werden.
Foto: Stefan von Gagern

Faustregel: Wenn Drop-Down-Menüs oder Listen mehr als 15 Optionen anbieten, werden sie schwierig zu navigieren. Ein gutes Beispiel ist auch die fürchterliche Länderauswahl in vielen Formularen, die von Andorra beginnend oft 100 Länder aus aller Welt anbietet. Wer den Trick mit den Tastatur-Sprungmarken ("D" oder "G" für "Deutschland" beziehungsweise "Germany") nicht kennt, bekommt eine lästige Geschicklichkeitsprobe serviert. Besser ist es, Länderversionen und angepasste Menüs anzubieten oder die Länder mit dem größten Kundenstamm nach oben zu verfrachten.

Und die Klappmenüs? Es müssen nicht alle Möglichkeiten in ein Menü gestopft werden. Besser die Optionen sinnvoll auf mehreren Seiten oder Informationsebenen verteilen. Das fordert zwar mehr Klicks vom Besucher, dämmt aber die Linkflut ein.

Auf der folgenden Seite finden Sie die Checkliste für Ihren eigenen Webauftritt…