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.
- 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.
- 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.
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.
Foto: Stefan von Gagern