Wer ein technisch komplexes Produkt verkauft, kennt die Schwierigkeit, es einfach zu erklären. Oft landen die Informationen in langen Fließtexten, Inhalte werden übereinandergestapelt, und der Besucher ist überfordert, bevor er etwas verstanden hat. Er liest gar nicht erst und ist schneller wieder weg, als er gekommen ist.
1. Der Kopfbereich
Wofür: Die erste Sektion sieht jeder Besucher. Sie hat ein Ziel: Er soll bleiben, weiterscrollen und sich mit Ihrem Produkt beschäftigen.
In den ersten fünf Sekunden muss sie drei Fragen beantworten:
Was bringt mir dieses Produkt?
Kann ich diesem Unternehmen vertrauen?
Was muss ich tun, um das Angebot zu nutzen?
Aufbau: Links eine große Überschrift mit dem zentralen Versprechen, ein kurzer Text und zwei Handlungsaufrufe. Rechts ein Bild, das den Text greifbar macht. Kundenlogos darunter beantworten die Vertrauensfrage gleich mit.
Achten Sie darauf: Die große Überschrift sorgt für Hierarchie. Das Auge muss sofort wissen, wo es anfangen soll.
2. Reiter
Wofür: Mehrere Funktionen, Sachverhalte oder Anwendungsfälle zeigen, ohne die Seite zu verlängern.
Aufbau: Oben eine Überschrift, darunter Schaltflächen. Je nach Auswahl wechselt der Inhalt: ein Ausschnitt der Oberfläche, eine Animation oder ein kurzes Video, das die Funktion erklärt.
Wirkung: Wer auf eine bestimmte Funktion Wert legt, klickt sie selbst an und macht sich ein Bild. Komplexe Funktionen werden gezeigt und gruppiert, statt in Fließtext erklärt zu werden. Bei einer Maschine können die Reiter Anwendungen oder Baugrößen sein, bei einer Software die Bereiche der Oberfläche.
3. Text-Fokus
Wofür: Eine einzelne Botschaft, die ohne Bild auskommt. Man kennt das Layout von Apple.
Aufbau: Eine große Überschrift und ein Absatz. Einzelne Schlagwörter sind hervorgehoben, der übrige Text ist zurückgenommen.
Wirkung: Wer überfliegt, liest nur die Schlagwörter: den Namen der Funktion, die Technologie, das messbare Ergebnis. Das genügt, um zu verstehen, worum es geht. Wer mehr wissen will, liest den ganzen Absatz. Dasselbe Stück Text dient beiden Lesern.
4. Kennzahlen
Wofür: Den Mehrwert greifbar machen. Zahlen schaffen das oft besser als jeder Satz.
Aufbau: Eine Überschrift, darunter drei große Zahlen mit je einem kurzen Satz.
Wirkung: Das Auge springt sofort auf die Zahl. Dreißig Prozent schneller, fünfzig Prozent weniger Energie, zehnmal so viel Durchsatz: An solchen Werten bleibt der Besucher hängen. Stark wird es durch den Vergleich mit etwas, das er bereits kennt, etwa das Vorgängermodell oder das übliche Verfahren.
5. Das Bento-Raster
Wofür: Eine Übersicht über alles, was das Produkt kann, ohne dass jede Funktion eine eigene Sektion braucht.
Aufbau: Karten in unterschiedlichen Größen. Wichtige Funktionen bekommen große Karten, weniger wichtige kleine. So entsteht Gewichtung auf einen Blick.
Wirkung: Besonders stark ist das Raster, wenn jede Karte ein aussagekräftiges Bild oder eine Animation trägt. Das bleibt im Kopf, anders als zeilenlanger Text. Auf unserer Startseite zeigt ein solches Raster die sechs Bausteine des Vertriebssystems.
6. Vorher-Nachher
Wofür: Zeigen, was Ihr Produkt anders macht als die bisherige Methode. Wichtig für Besucher, die bereits mit einem anderen System arbeiten oder mitten in der Entscheidung stecken.
Aufbau: Zwei Spalten, in beiden Stichpunkte statt Sätze. Die neue Methode ist hervorgehoben, farblich oder durch einen Rahmen. Darüber eine Überschrift und höchstens ein bis zwei Sätze Kontext, dazu ein Handlungsaufruf.
Variante: Wer drei Wege vergleichen will, baut daraus eine Tabelle.
7. Der Prozess
Wofür: Die Frage beantworten, die fast jeder Besucher hat: Wie läuft das ab, und wie setze ich das bei mir ein? Für uns eine der wichtigsten Sektionen bei technischen Produkten.
Aufbau: Links Überschrift, kurzer Text und Handlungsaufruf. Rechts Karten untereinander, jede mit Symbol, Überschrift und etwas Kontext. Im Beispiel: Analyse, Simulation, Integration, laufende Überwachung und Support.
Wirkung: Beim Scrollen sieht der Besucher einen Schritt nach dem anderen. Nichts überfordert ihn, und am Ende weiß er, was als Nächstes passiert. Dasselbe Layout trägt auch andere Inhalte, etwa die Vorteile Ihres Service: links die Aussage, rechts ein Vorteil je Karte.
Layouts folgen der Botschaft
Gute Layouts machen einen großen Unterschied, nicht nur optisch, sondern auch psychologisch und funktional: Informationen lassen sich überfliegen, der Nutzen wird leichter aufgenommen. Trotzdem bleibt die Wahl eine individuelle Entscheidung. Sie folgt der Geschichte, die Ihre Seite erzählt. Erst die Botschaft, dann die Form.
Welche Sektionen in welcher Reihenfolge auf eine Seite gehören, steht im Beitrag über die acht Sektionen einer Webseite, die verkauft. Wenn wir uns Ihre Seite gemeinsam ansehen sollen, beschreiben Sie uns Ihr Vorhaben.
Häufige Fragen zu Layouts für komplexe Produkte
Wie erkläre ich ein komplexes Produkt auf einer Webseite?
Indem Sie die Informationen so gliedern, dass man sie überfliegen kann: Stichpunkte, Bilder, Zahlen und klare Hierarchie statt langer Fließtexte. Wer tiefer einsteigen will, findet die Tiefe im selben Layout.
Was ist ein Bento-Raster?
Ein Raster aus Karten in unterschiedlichen Größen. Wichtige Funktionen bekommen große Karten, weniger wichtige kleine. So sieht der Besucher auf einen Blick, was das Produkt kann.
Wie viel Text verträgt eine Sektion?
Wenig. Über einer Vergleichs-Sektion stehen zum Beispiel eine Überschrift und höchstens ein bis zwei Sätze, in den Spalten Stichpunkte statt Sätze.
Welches Layout ist für technische Produkte am wichtigsten?
Aus unserer Sicht die Kopfsektion, weil diese die Frage beantwortet, die fast jeder Besucher hat: Was nutzt es mir, warum sollte ich diesem Unternehmen vertrauen und wie kann ich es in Anspruch nehmen? Wenn hier ein übersichtliches Layout gewählt wird, verbleiben Besucher auf der Webseite.
