Ist Ihre Site noch zeitgemäß?

Haben Sie auch das Gefühl, dass Ihre Site dringend mal wieder überarbeitet werden sollte? Dann sind Sie nicht allein. Mit wem ich auch spreche: Dieses Gefühl hat fast jeder Site-Betreiber. Aber warum ist das so? Ob die Site ein paar Wochen alt ist oder mehrere Jahre – jeder meint, ein Update seiner Site wäre wichtig.

Wird die Site neu aufgesetzt oder grundlegend überarbeitet, sind die nächsten Wochen praktisch immer noch Dinge offen. Der zu große Abstand bei Überschriften der 2. Ordnung auf den Seiten in den Suchergebnissen. Die Bilder, die bei manchen Seiten in der Smartphone-Ansicht in die Seitenleiste ragen. Oder den einen Bereich mit Tabellen, die immer noch nicht perfekt formatiert sind.

Ist die Site ein paar Monate alt, stellt man fest: Manche Dinge sieht man auf anderen, guten Sites nicht mehr. Oder es gibt Design-Trends, Techniken oder Inhaltstypen, die man auch gern auf seiner Site hätte.

Und ist die Site einmal mehrere Jahre alt, dann hat man das Gefühl, sie wirkt einfach alt. Das liegt aber vor allem daran, dass man selbst sie so oft gesehen hat. Den Nutzern geht es vielleicht überhaupt nicht so. Vielleicht schätzen sie die Site, genau so wie sie ist. Sie finden sich gut zurecht, wissen, wo was ist, wie was funktioniert.

Muss ein Relaunch/Redesign wirklich sein?

Diese Worte zur Vorsicht zunächst vorab. Hinterfragen Sie immer kritisch, ob ein Relaunch/Redesign wirklich nötig ist. Generell ist eine sanfte Überarbeitung im laufenden Betrieb auch immer die bessere Wahl – führen Sie lieber schrittweise kleine Änderungen durch als auf einen Schlag alles auf einmal umzusetzen. Das lässt sich nicht nur leichter handhaben, es ist insbesondere auch für die Nutzer besser.

Im Folgenden einige Trends bei professionellen Sites, die mir in letzter Zeit aufgefallen sind. Sehen Sie sich an, welche Ihnen gefallen. Überlegen Sie dann, welche zu ihrer Site passen könnten und ob diese Ihre Nutzer bei Ihnen als positiv bewerten würden.

Generell gilt: Es ist wichtiger, die eigene Identität zu wahren, als Trends hinterherzulaufen. Wenn man das berücksichtigt, kann man von den vorgestellten Trends lernen.

Zusammengefasst sind mir in den letzten Jahren folgende noch heute aktuellen Entwicklungen aufgefallen:

Flat Design/Material Design

Quelle: Jens Jacobsen

Die Gestaltung ist weg von den verspielten Ansätzen, die sich eng an realen Gegenständen orientiert hat. Kalender-Anwendungen, die im Hintergrund Leder-Applikationen wie in einem Filofax, Spiralen wie bei einem Ringbuch oder Reste von abgerissenem Papier wie bei einem Block zeigen, sieht man nirgendwo mehr.
Und auch auf den Websites hat sich mit dem Flat Design die neue Einfachheit durchgesetzt.

Es gibt nur noch wenige Farben, viel Weiß und große Flächen. Verläufe und Schatten sind fast völlig verschwunden.

Nachdem die Benutzerfreundlichkeit darunter teilweise gelitten hat, sind inzwischen aber z.B. Schatten für Buttons wiedergekehrt. Google hat mit seinen Gestaltungsvorgaben namens Material Design gut zusammengefasst, wie man trotz Flat Design nutzerfreundliche Oberflächen gestaltet. Einfach alles zu reduzieren, ist keine Lösung. Man muss die richtige Mitte zwischen reduziert und verspielt treffen.

Quelle: Jens Jacobsen

Quelle: Jens Jacobsen

Große Bilder/Hero Images

Vor allem die höheren Übertragungsgeschwindigkeiten erlauben es heute, auch bei mobilen Anwendungen große Bilder einzusetzen. Ausgehend von der Erkenntnis, dass Nutzer sich visuell gut ansprechen lassen und das Lesen längerer Texte möglichst vermeiden, haben auch auf B2B-Sites Bilder deutlich mehr Gewicht bekommen.

Quelle: Jens Jacobsen

Das gilt besonders für die Startseite und die Kategorieseiten. Auf den Unterseiten finden sich dagegen generell etwas kleinere Bilder und mehr Text – schließlich brauchen die Besucher die notwendigen Informationen.

Mehr Einsatz von Video

Wie große Bilder ist auch Video inzwischen für viele Internet-Anbindungen heute kein Problem mehr. Daher wird Video auch verwendet, um lediglich Aufmerksamkeit zu generieren, etwa als Hintergrundelement.

Allerdings sollte das nur mit Vorsicht getan werden. Zum einen sollten Nutzern, die über mobile Anbindungen auf die Seiten zugreifen, keine Videos gezeigt werden, um deren Datenbudget nicht zu belasten und ihnen unnötige Wartezeiten zu ersparen. Zum anderen sollte auf Seiten, die häufiger besucht werden oder auf denen Text gelesen werden soll, kein Video im Hintergrund laufen. Dies lenkt zu sehr ab und selbst der anfängliche beeindruckende Effekt nutzt sich schnell ab und die Nutzer reagieren eher verärgert als begeistert.

Quelle: Jens Jacobsen

Spotify, Skype, Airbnb, Paypal – alle diese Sites hatten bis vor kurzem Video-Hintergründe auf ihren jeweiligen Startseiten. Und alle haben sie das wieder entfernt. Man kann also sagen, als Startseiten-Trend hat sich dieser Trend schon wieder überholt. Aber für spezielle Unterseiten und besondere Fälle kann man dennoch darüber nachdenken, auf ihn zu setzen.

Quelle: Jens Jacobsen

Lange Seiten; Parallax Scrolling

Quelle: Jens Jacobsen

Lange Zeit galt: Zeige so viele Informationen so weit oben auf der Seite wie möglich. Der Bereich above the fold ist der wichtigste jeder Seite. Das Wort fold bezeichnet eigentlich den Seitenknick einer Zeitung – also die Stelle, an der sie gefaltet ist. Der Bereich der Zeitung, den man sieht, wenn sie so auf dem Tisch liegt, ist der wichtigste. Und analog dazu ist das, was man auf dem Bildschirm sieht, ohne zu scrollen, das Wichtigste. Jahrelang galt: Die Besucher scrollen nur ungern. Links die im Bereich above the fold liegen, bekommen extrem viel mehr Klicks als Links weiter unten.
Doch seit einiger Zeit beobachtet man, dass die Nutzer mehr scrollen. Vor allem auf mobilen Geräten mit Touch-Steuerung. Vermutlich liegt das daran, dass das Wischen mit dem Finger recht bequem ist. Und daran, dass man bei einer langsameren Datenanbindung wie man sie unterwegs meist hat, lieber die schon geladene Seite genauer ansieht, bevor man zu einer neuen springt und warten muss, bis die geladen ist.

Und, letzter Punkt: Es war schon immer sehr schwer zu sagen, was above the fold ist – denn das hängt natürlich davon ab, wie hoch der Bildschirm ist, mit dem der Besucher auf die Site kommt. Mit der Vielfalt der Bildschirmgrößen, die wir mit Laptops, Tablets, Smartphones etc. heute haben, wird es zunehmend unmöglich zu wissen, was der typische Nutzer sieht, ohne zu scrollen.

Damit haben Designer die Freiheit, auch längere Seiten anzulegen. Einige Zeit haben sie davon stark Gebrauch gemacht. Teilweise wurden ganze Sites mit nur einer einzigen Seite umgesetzt („one-page-sites“).

Inzwischen hat sich das wieder gelegt und wir sehen eine gute Entwicklung: Seiten sind so lang, wie sie vom Inhalt her sein müssen. Dieser content-first-Ansatz bedeutet, dass man sich frei machen kann von Vorgaben und alle Seiten so gestalten kann, wie es die jeweiligen Inhalte erfordern. Man sollte lediglich darauf achten, dass die Seiten innerhalb eines Bereiches der Site ungefähr ähnlich lang sind, um die Nutzer nicht zu verwirren.

Kachel-Optik

Kacheln oder Karten nennen sich die Gestaltungselemente, auf die viele Sites heute setzen. Elemente werden so zusammengefasst, dass sie als eigenständige Kacheln oder Karten neu angeordnet werden können – ein großer Vorteil beim Responsive Design.

Quelle: Jens Jacobsen

Quelle: Jens Jacobsen

Mega Menus

So genannte Mega Menus oder Mega-Dropdown-Menüs zeigen den Inhalt eines Bereichs der Website auf einen Blick. Anders als die früher üblichen verschachtelten Menüs ist damit gleich alles zu sehen, was der jeweilige Unterbereich zu bieten hat.

Quelle: Jens Jacobsen

 

Quelle: Jens Jacobsen

Mega-Menüs bieten die Möglichkeit, direkt eine weitere Ebene in der Navigation darzustellen und können so zu einer besseren Orientierung beitragen und schneller ans Ziel führen.

Ohne Probleme sind sie aber nicht, wie Jakob Nielsen zeigt: Mega-Menüs Gone Wrong

Fat Footer

Früher sah man am Ende einer Seite oft nur eine Zeile mit Link zum Impressum. Heute steht auf vielen Sites hier eine lange Liste mit Links – im Englischen fat footer (dicker Fußteil) genannt. Warum macht man das?

Dieser Bereich am Seitenende bekommt viel Aufmerksamkeit und anders als den Seitenkopf sehen ihn nur die Nutzer an, die ein erhöhtes Interesse an den Inhalten der Site haben. Denn wer bis zum Seitenende scrollt, der fand die Seite so interessant, dass er bis ganz zum Ende gelangt ist.

Es kann natürlich sein, dass er noch nicht gefunden hat, was er sucht. Aber immerhin ist er noch hoffnungsvoll, sonst hätte er die Site schon verlassen.

Daher kann man am Fußende der der Seite hoch motivierte Nutzer mit Links versorgen. Das Fußende bietet sich also an für:

Weiterführende Links
Hilfe zur Orientierung/Navigation
Weitere Hilfestellung/Kontakt
Nachdem der Footer ein wichtiger Teil der Seite ist, sollte man die Elemente hier nicht zu klein oder zu unauffällig formatieren. 11 Punkt Schriftgröße oder Hellgrau auf Weiß sind eher ungünstig und verschenken die Chancen.

Quelle: Jens Jacobsen

Bessere Typografie/mehr Weißraum

Früher war man auf wenige Schriftarten angewiesen, und daher nutzen bis heute sehr viele Sites Verdana, Arial oder Times – Browser konnten nur die Schriften darstellen, die auf dem Rechner installiert waren.

Doch seit einigen Jahren lassen sich beliebige Schriften in den üblichen Browsern darstellen. Und technisch korrekt umgesetzt ist die Ladezeit der Seiten dadurch auch nur unwesentlich geringer.

So können Freunde der Typografie aus einem großen Fundus von kostenlosen wie kostenpflichtigen Schriften schöpfen.

Aber auch, wer z.B. Helvetica als Hausschrift hat, kann heute schöner gestalten im Web. Vor allem weil das Dogma nicht mehr gilt, dass Nutzer nicht scrollen (s. oben, bei Lange Seiten unter dem Begriff above the fold). So steht mehr Platz zur Verfügung und man kann eines der wichtigsten Gestaltungsmittel der Typografie ausgiebig nutzen: Weißraum.

Elemente können wirken, wenn um sie herum ausreichend Platz ist. Das gilt vor allem auch für Überschriften.

Aber auch für Fließtext. Fließtext kann heute im Browser so gestaltet werden, dass er gut aussieht und leicht lesbar ist.

Experten empfehlen einen Basisschriftgröße von 16 CSS-Pixeln für den Fließtext. Das entspricht ungefähr 12 Pixeln für gedruckten Text.

Zeilen sollten maximal 75 Zeichen breit sein (siehe Size Matters: Balancing Line Length And Font Size In Responsive Web Design|Smashing Magazine).

Google empfiehlt auch, ausreichend große Schrift zu verwenden. Bei den PageSpeed Insights werden Seiten mit zu kleiner Schrift schlechter bewertet: Lesbare Schriftgrößen verwenden | PageSpeed Insights

Die meisten Entwickler sind der gleichen Meinung: Is there an optimal font size? | User Experience Stack Exchange

Klarer Fokus

Quelle: Jens Jacobsen

Was für Schriften gilt, gilt auch für die Seiten allgemein: Der Eindruck von modernen Sites heute ist klar und aufgeräumt.
Die großen Bilder (hero images, siehe oben) und Überschriften sind großzügig angelegt, haben viel Weißraum um sich und können so wirken. Auch Illustrationen werden sparsam eingesetzt, sind aber immer groß und eher technisch-reduziert als verspielt.

Generell verzichten gute moderne Sites auf kleinteilige Elemente und arbeiten mit wenigen, klaren Farben (s. auch Flat Design oben).

Sie nutzen ein einfaches Gestaltungsraster, um die Elemente systematisch auf den Seiten zu platzieren.

Einzelne Elemente, die diese Ordnung durchbrechen, sorgen für Aufmerksamkeit.

Startseite wird weniger wichtig

Die Nutzerzahlen für die Starseite brechen ein. Und zwar dramatisch. Die Startseite der New York Times beispielsweise hat schon 2013 über 80 Millionen Besucher pro Monat verloren verglichen mit zwei Jahren zuvor – das ist die Hälfte der Besucher.

Interessanterweise ist die Gesamtzahl der Besucher auf nytimes.com in dieser Zeit aber gestiegen. Nur die Homepage ließen die Nutzer dabei immer öfter links liegen.

Gefallen ist auch der Zugriff auf die ersten Seiten der Kategorien („World“, „Politics“, „Sports“ etc.) und die Zugriffe über die eigene App.

Die US-Traditions-Zeitung ist dabei keine Ausnahme. Der Trend ist auf Mediensites besonders stark, aber fast alle Sites beobachten das Phänomen: Mehr und mehr kommen Nutzer direkt auf Unterseiten. Nur noch 5 bis 15 Prozent der Besucher beginnen mit der Homepage.

Der wichtigste Grund für diesen Trend ist: Praktisch jeder geht direkt zu Google bzw. nutzt die Google-Eingabe des Browsers. Das ist praktisch immer die einfachste Möglichkeit, auf eine Site zu kommen.

Das heißt, selbst wer direkt auf eine bestimmte Website will, nutzt dafür eine Suchmaschine. Und in der Trefferliste sieht er nicht nur Links zur Startseite, sondern auch zu Unterseiten. Und natürlich auch zur Konkurrenz.

Das bedeutet: Nehmen Sie Ihre Startseite nicht mehr so wichtig. Hier können Sie sich ganz darauf konzentrieren, zu zeigen, was die Site insgesamt bietet und für wen sie steht.

Und die Unterseiten müssen im Gegenzug ebenfalls Orientierung bieten. Wer hier landet, muss ein Gefühl dafür bekommen, was das für ein Unternehmen ist. Und er muss durch die Navigation sofort wissen, wie er sich auf der Site bewegt und welche Inhalte sie bereithält.

Persönlichkeit, Geschichten erzählen (Storytelling)

Quelle: Jens Jacobsen

Das Schlagwort Storytelling geistert schon seit Jahren durch die Online-Marketing-Welt. Es ist überstrapaziert, sagt für sich wenig und wird meist falsch verwendet. Tatsache ist aber, dass gerade professionelle Sites in den letzten Jahren viel persönlicher geworden sind. Der Mensch steht im Mittelpunkt. Es hat sich die Erkenntnis durchgesetzt: Auch bei Sites, die sich an Geschäftskunden richten (B2B), entscheiden Menschen, welches Produkt gekauft wird, welcher Dienstleister beauftragt wird. Und Menschen bauen Vertrauen zu Menschen auf, zu Traditionen, sie schätzen etablierte Werte. Daher sieht man auf Sites inzwischen sehr viel mehr Fotos von Menschen, die bei den Unternehmen arbeiten.
Bilder von Agenturen (stock photos) werden immer seltener, weil sich herumgesprochen hat, dass diese austauschbaren Bilder nicht funktionieren. Sie können kein Vertrauen schaffen, sondern wirken austauschbar.

Gerade im B2B-Umfeld ist der persönliche Bezug oft sogar wichtiger als beim Geschäft mit Endkunden. Ob man bei Amazon oder bei eBay kauft, ist letztlich für den Kunden egal. Aber welche Unternehmensberater man sich ins Haus holt, mit welchem IT-Dienstleister man zusammenarbeitet oder von wem man sich Grundstoffe für die Produktion liefern lässt, das will man ganz genau wissen.

Was denken Sie? Welche Trends sind Ihnen aufgefallen?