B2B- und B2C-Sites

Goldene Regeln für modernes Webdesign

09.01.2015 von Stefan von Gagern
Wer heute Erfolg mit seiner Website haben möchte, sollte ein paar grundlegende Prinzipien nicht vergessen. Wir zeigen, worauf es ankommt - von der mobilen Strategie über Spaßfaktor und lebhafter Community bis hin zum termingerechten Launch.

Es wurde schon viel darüber geschrieben, was im Webdesign funktioniert und was nicht. Dabei geht es heute oft um Techniken wie HTML5 oder CSS, um Aspekte wie Usability oder um Details wie das Aussehen von klickbaren Buttons in Online-Shops. Viele Websites scheitern aber an viel grundlegenderen Prinzipien, die den Betreibern eigentlich selbstverständlich und klar erscheinen, vielleicht gerade deshalb aber nur halbherzig verfolgt oder schlicht vergessen werden.

Die größten Webdesign-Sünden -
Ruf mich...
Wer bei der Elektronik-Hersteller-Website conceptronic.net Kontakt sucht, bekommt immerhin eine Kontakt-Mailadresse – leider aber nur nach dem Muster „info@“...
... NICHT an!
... und wer hier gar Ärger mit den Produkten hat, soll ein überlanges Formular ausfüllen, das dazu auf der deutschsprachigen Seite ausschließlich in englischer Sprache präsentiert wird.
Mich schon!
Offen und kommunikationsfreudig: Der Soundsystem-Hersteller Sonos verspricht neben einer hervorragenden Support-Hotline, alle E-Mail innerhalb eines Arbeitstages zu beantworten. Sogar die E-Mail-Adresse des CEOs ist angegeben.
Infomüll
Diese Bilder stammen bestimmt nicht von Mitarbeitern oder Kunden des Security-Anbieters Symantec. Fotos vom Stock-Bilderdienst sind im Web meist überflüssige Dekoration.
Sehtest ohne Augenarztbesuch
Kleiner Text, grau auf weiß: Wer bei BMW Hauptmenü und Texte lesen kann, braucht keine Brille.
Nervenzerreißprobe
Nervenprobe statt Beruhigung: Websites aus dem Bereich Wellness (im Bild: www.meridianspa.de) oder Design-Hotels wollen mit Hintergrundmusik häufig eine gewisse Stimmung erzeugen – erreichen damit aber oft das Gegenteil.
Wenn die Balance kippt
Man sollte sehr vorsichtig dabei sein, Inhalts und Werbebereiche zu stark zu vermischen. Eine optische Trennung belästigt den Besucher weniger – und wenn er nicht mehr kommt, ist die Werbung sowieso wirkungslos.
Achtung, Werbung
„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).
Navigation aus der Hölle
Wer beim Otto-Versand den Baumarkt aufklappt, wird mit einer Flut von Unterpunkten (Noch mehr gibt es unter „mehr“) überfordert.
So geht's auch
Wie ein gutes Klappmenü aussehen kann, zeigt Vimeo.com: Wenige, aufgeräumte Unterpunkte, die mit kurzen Texten vor dem Klick erklärt werden.

Wir haben einige dieser goldenen Regeln fürs Webdesign zusammengetragen. Diese können Sie nicht nur für die nächste neue oder relaunchte Website anwenden, sondern auch für einen konstruktiven Zwischencheck aktueller Online-Präsenzen.

Der Kunde ist König

Fragt man einen beliebigen Website-Betreiber nach dem Motiv, das seinen Auftritt leitet, wird ehr wahrscheinlich antworten, dass der User immer im Mittelpunkt stehen muss - selbstredend. Dieses Prinzip, zum Start einer Site oft auch eingehalten, wird von so mancher Marketing-Abteilung oder Agentur aber gerne nach und nach verwässert. Hier noch eine Promotion, noch ein Link, noch ein Sonderangebot - alles, um noch mehr verkaufen zu können. Dort noch ein Banner vom Werbepartner, hier eine Klickstrecke, die Zugriffe bringt - schon ist die ehemals aufgeräumte Seite bis zur Unkenntlichkeit zugemüllt. So geht mit der Zeit der Blickwinkel des Besuchers verloren und die Website wird mehr und mehr Abbild des eigenen Unternehmens.

Das berühmte "User Centered Design" ist der goldene, weil richtige Weg. Niemand will Ihr Unternehmen lange kennen lernen - das überlassen Sie bitte Ihrer Imagebroschüre. Denken Sie an sich selbst, wenn Sie surfen. Es gibt fast immer eine konkrete Aufgabe beim Besuch einer Website: Etwas bestellen, buchen, bestimmte Inhalte oder Infos wie die Telefonnummer für den Kontakt finden, Software oder Infomaterial herunterladen. Die Geduld dafür ist kurz. Wird sie überstrapaziert und der User kann die Aufgabe nicht zügig erledigen, landet er schnell bei der Konkurrenz - und gibt es keine, ärgert er sich noch mehr.

Den Blick für die Zielgruppe zurückzugewinnen, ist kein Hexenwerk - es braucht keine teuren und langwierigen Fokusgruppen-Tests unter Laborbedingungen. Beschreiben Sie die Eigenschaften wie Interessen, Alter, Geschlecht Ihrer Besucher. Denken Sie sich ein paar der typischen Aufgaben aus, die beim Besuch Ihrer Seite zu erledigen sein könnten. Versuchen Sie diese selbst zu erledigen, zum Beispiel die Telefonnummer des Supports herauszufinden oder etwas zu bestellen. Wie lange dauert es? Wie leicht oder schwer gelingt es? Was steht dabei im Weg, ist umständlich? Wenn ihnen etwas negativ auffällt: Aufschreiben und so bald wie möglich nachbessern!

Auf allen Geräten zuhause

Zahllose Studien belegen, dass mittlerweile mehr Websites von Smartphone oder Tablet aus aufgerufen werden als vom Desktop-PC - Tendenz weiterhin steigend. Viele Website-Betreiber vergessen jedoch immer noch, was das bedeutet: Dass die Website auch auf dem Smartphone vernünftig läuft - vor wenigen Jahren noch "nice to have" - ist heute absolute Pflicht. Im vergangenen Jahr wurde daher viel über "Responsive Webdesign" gesprochen. Über den HTML-Standard Media Queries wird die Breite des Browserfensters abgefragt und dann der Inhalt des Weblayouts auf die Displaygröße neu arrangiert.

Forefathers: Responsive Webdesign -
Eine Website - drei Ausgabekanäle: Desktop
Beispiel für ein "responsive" Webdesign: Die Website forefathers.com sieht auf PC-Desktop,...
Smartphone
... dem Smartphone und...
Tablet
... dem Tablet gut aus. Das Layout passt sich flüssig der Bildschirmgröße an. Bei weniger Platz (wie auf dem Smartphone) konzentriert es sich auf die wichtigsten Elemente.

Responsive Webdesign ist ein Schritt in die richtige Richtung, wird häufig aber nur zur Hälfte umgesetzt. Vom reinen Umschalten auf drei Darstellungsgrößen (Desktop, Tablet, Smartphone) ist noch keine Website mobil geworden. Der Inhalt wirkt gequetscht, ungünstig angeordnet, Bedienelemente zu klein, Texte schlecht lesbar, die Ladezeiten sind zu lange und selten wird Gestensteuerung unterstützt. Es geht darum, nicht das gesamte Layout einfach nur auf einen kleineren Bildschirm zu quetschen. Die Inhalte sollten für die Unterwegs-Nutzung angepasst werden - indem beispielsweise andere, kleinere Bilder ausgeliefert werden. In manchen Fällen kann auch eine App die bessere mobile Webanwendung sein, gerade wenn viel Applikationslogik und Multimedia im Spiel ist.

Das Business-Portal LinkedIn bietet eine gut gemachte mobile Website, weist aber beim Start ausdrücklich auf die App hin. Wer alle Funktionen nutzen möchte ist damit besser bedient.
Foto: LinkedIn / Screenshot: Stefan von Gagern

Wichtig ist, sich über die mobile Nutzung seiner Website ausführliche Gedanken zu machen, den besten Weg für die technische Umsetzung zu finden und die Website/App auch zu testen. Richtig umgesetzt, kann auch Responsive Webdesign eine einheitliche gute Bedienung über Bildschirmgrößen hinweg bieten - zum Beispiel mit flüssigen Layouts, die sich flexibel anpassen, skalierenden Grafiken und Bildern. Tipp: Das E-Book "Responsive Webdesign" von Ethan Marcotte (für 9 Dollar zu haben) zeigt, wie Sie diesen einen Schritt weiter gehen.

Das Buch "Responsive Web Design" zeigt wie man mehr als das oft praktizierte Umschalten zwischen drei Seitengrößen erreichen kann.
Foto: Stefan von Gagern

Inhalt, Inhalt, Inhalt

Heute wird viel über "Mobile first" diskutiert. Bei dieser Webdesign-Philosophie geht es darum, dass die mobile Website das Wichtigste und damit der Ausgangspunkt des Webauftritts sein sollte. Kein schlechter Ansatz in diesen Zeiten - dennoch etwas kurz gegriffen, weil es wieder fast ausschließlich um die technische Umsetzung geht. Gerne wird vergessen, was der Nutzer möchte: Inhalte! Der Ansatz sollte also eher "Content first" lauten. Der User will und sucht Inhalte auf Ihrer Website. Heißt: Der Inhalt sollte bei allen Überlegungen an erster Stelle stehen und entsprechend im Layout die oberste Priorität haben. Beispiel: Statt sich zu fragen, wo noch eine weitere Seitenleiste hin soll, ist es besser zu fragen, ob man überhaupt eine Seitenleiste braucht, die vom Inhalt ablenkt.

So wird es in der Praxis oft (falsch) gemacht: Bevor Kunde und Webdesigner wissen, welcher Inhalt auf der Seite landet, werden schon Navigation, Menüs und vieles mehr gestaltet.
Foto: www.elezea.com

"Wenn wir das Layout gestalten, bevor wir Inhalte haben, gestalten wir die Verpackung, bevor wir wissen was drin sein wird. Wenn die Inhalte dann nicht in die Verpackung passen, gibt es nur zwei Möglichkeiten: Neu anfangen, oder den Inhalt in die Verpackung quetschen. Beides wollen wir nicht", schreibt Webdesigner Rian van der Merwe in einem Blogeintrag zu "Content First Webdesign" und betont dabei, dass es oft auch wichtig ist, den Kunden zu erklären, dass sie erst über Inhalte, dann über Grafiken nachdenken müssen.

Der Inhalt passt oft gar nicht in die Wireframes, die für die Seite entworfen wurden.
Foto: www.elezea.com

Aufgeräumt bleiben

Viele Websites sehen immer noch aus wie vor zehn Jahren: Eine einzige Seite wird zugepflastert bis unters Dach. Schon auf der Homepage findet der Besucher eine mehrstufige Navigation, viele Links, ein Suchfeld, Promotionplätze, Bilder, Texte und, und, und… Konsequenz: Vor lauter Kleinteilen findet er oft den Einstieg nicht. Vergleich gefällig? Stellen Sie sich vor, Sie kommen in ein Geschäft, in dem neben der eigentlichen Ware auch noch Kartons, Paletten und anderes herum liegen. Das macht einen Eindruck wie beim Discounter. Stellen Sie sich dagegen einen Apple Store vor: Aufgeräumt wie eine Designer-Wohnung, die Produkte klar im Mittelpunkt, freundlich und hell.

Moderne Websites sehen möglichst aufgeräumt aus. Ein extremes, aber gutes Beispiel ist der Webauftritt von "Ifthisthenthat", einem Dienst, der soziale Medien miteinander vernetzt. Nur ein Satz und ein riesiger Button - das was der Erstbesucher braucht - stehen auf der Startseite. Erst nach dem Einloggen oder Anmelden bekommt er in seinem "Dashboard" das serviert, was er braucht.

Die Website If this then that zeigt gut wie ein minimalistisches, modernes Design aussehen kann: Auf der Homepage...
Foto: ifttt.com / Screenshot: Stefan von Gagern
... und nach dem User-Login.
Foto: ifttt.com / Screenshot: Stefan von Gagern

So radikal funktioniert das natürlich nicht auf jeder Website - aber aussortiert oder etwas entschlackt werden kann immer. Auch beim Planen von Funktionen gilt: Weniger ist mehr! Fragen Sie also: Was brauchen wir wirklich? Was wird tatsächlich von den Kunden genutzt?

Der Spaßfaktor

Heute denken Teams ausführlich über Usability, Performance, Mobile, Zugänglichkeit und andere wichtige Themen nach und das ist auch gut und richtig so. Oft werden dafür große Budgets "verbraten". Was jedoch vor lauter Tests und Optimierungen am Ende untergeht, ist der Unterhaltungsfaktor.

Mit nur ein paar kleinen Details können Sie Ihre Website von denen der Konkurrenz abheben. Dröge Seiten gibt es genug da draußen. Denken Sie an solch simple, nette Dinge wie die persönliche Begrüßung in verschiedenen Sprachen, die es bei Flickr gibt. Oder an die beliebten "Google Doodles" zu besonderen Tagen. Oder den Wal, der zeigt, dass wegen Server-Überlastung bei Twitter einmal mehr nichts geht. Es kann auch eine Illustration oder ein Logo sein, eine schöne Schrift oder eine humorvolle 404-Seite.

Die lustigsten 404-Fehlerseiten -
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten
Lustige 404-Fehlerseiten

Auf diese Weise lassen sich peinliche Fehler wie kaputte Links sympathisch verpacken - so dass sie sogar positiv im Gedächtnis hängen bleiben. Manches, wie der Twitter-Wal, wird zum Kult, den jeder kennt und liebt. Humor passt aber natürlich nicht immer: Wer medizinische Geräte verkauft, sollte so etwas bleiben lassen. In vielen Fällen lohnt es sich aber, über den Unterhaltungswert der Seite nachzudenken.

Ein simples Detail wie originelle 404-Seiten können den Unterschied zur Konkurrenz ausmachen: Hier das Beispiel 9gag.com...
Foto: 9gag.com / Screenshot: Stefan von Gagern
... und hier lousypennies.com
Foto: lousypennies.com / Screenshot: Stefan von Gagern

Die Community aktivieren

Vieles, was den Erfolg von Websites ausmacht, kommt nicht von den Machern selbst, sondern von den Besuchern. Ein Online-Shop ohne Kundenrezensionen? Ein Blog ohne Bewertungen und Kommentare? Beides nur die Hälfte wert. Auch wenn manche Kommentare oder Nutzer-Rezensionen von zweifelhafter Qualität sind: Der Besucher des Shops sieht, dass hier etwas los ist und fleißig mitgemacht wird.

Es geht nicht mehr so stark darum, die beste Suchmaschinenoptimierung der Welt zu betreiben oder das beste Webdesign hinzulegen. Die Mechanik "Suchbegriff in Google und dann zur Website" gibt es zwar noch, doch immer mehr Traffic kommt inzwischen durch Social Media und Empfehlungen von anderen Usern.

Viel wichtiger ist es, die Community zu aktivieren und ständig zu befeuern. Dazu muss man ihr Möglichkeiten geben: Kommentare aktivieren, Share und Like-Buttons, Auftritte auf allen Social-Media-Plattformen einrichten und überhaupt dialogbereit sein. Jeder muss sich klar machen, dass dies einen bestimmten Kontrollverlust und das ein oder andere öffentliche Gemecker in negativen Kommentaren bedeutet, doch der ist es wert.

Das Webportal Mashable.com lebt "Community Engagement" vor, wie kaum eine andere Site (und schreibt auch primär über Social Media-Themen). Hier können Website-Betreiber viel lernen.
Foto: mashable.com / Screenshot: Stefan von Gagern

Der Launch zur Deadline

Auch im Webdesign gibt es immer etwas zu verbessern. Perfektionismus und der Ehrgeiz, etwas besser zu machen als alle anderen, sind gute Ziele - der Plan kann aber auch nach hinten losgehen. Einmal kurz nicht aufgepasst, und schon läuft man im Web hinterher. Für Relaunch oder Start einer Website sollte es daher nicht nur eine Deadline geben - man sollte sie auch einhalten. Sonst besteht die Gefahr, sich in zu vielen Features, noch mehr Feinschliff und weiteren Tests zu verzetteln. Vor lauter Perfektionismus geht das Projekt dann gar nicht mehr oder viel zu spät an den Start. Wie bei jeder Art von Projekten gilt: Die Deadline im Auge zu behalten hilft auch, das Budget nicht zu überziehen (fragen Sie mal in Berlin nach). Websites sind sowieso nie fertig. Nach dem Launch gibt es immer noch genug Gelegenheit, Features nachzuliefern oder hier und da etwas zu verbessern. (sh)

Alles verstanden? Dann gibt es abschließend noch einmal die vorgestellten Positiv- und Negativbeispiele als "Executive Summary" zum Durchklicken (Stichwort Bilderstrecke ;-)):

Goldene Regeln fürs Webdesign -
Goldene Regeln fürs Webdesign
Das Webportal Mashable.com lebt "Community Engagement" vor, wie kaum eine andere Site (und schreibt auch primär über Social Media-Themen). Hier können Website-Betreiber viel lernen.
LinkedIn App
Das Business-Portal LinkedIn bietet eine gut gemachte mobile Website, weist aber beim Start ausdrücklich auf die App hin. Wer alle Funktionen nutzen möchte ist damit besser bedient.
404 in originell
Ein simples Detail wie originelle 404-Seiten können den Unterschied zur Konkurrenz ausmachen: Hier die Beispiele 9gag.com...
404 in originell - Teil 2
... und lousypennies.com
"ContentOut"
So wird es in der Praxis oft (falsch) gemacht: Bevor Kunde und Webdesigner wissen, welcher Inhalt auf der Seite landet, werden schon Navigation, Menüs und vieles mehr gestaltet.
"ContentOut" - Teil 2
Der Inhalt passt oft gar nicht in die Wireframes, die für die Seite entworfen wurden.
Google Doodle
Google unterhält seine vielen täglichen Besucher mit immer neuen Doodle-Überraschungen.
Ifttt
Die Website "If this then that" zeigt gut, wie ein minimalistisches, modernes Design aussehen kann...
Ifttt - Teil 2
... auch noch nach dem User-Login.
Lektüre
Das Buch "Responsive Web Design" zeigt wie man mehr als das oft praktizierte Umschalten zwischen drei Seitengrößen erreichen kann.