Konstanz richtig verstehen – Layouts müssen nicht langweilig sein

  • von Lennart Prange

thumb Eine der wichtigsten Regeln für Webdesigner ist die Konstanz. Der Besucher soll sich überall schnell zurechtfinden und immer daran erinnert werden, wo er ist. Diese Regel kann aber leider auch leicht missverstanden werden und zu etwas langweiligen Webseiten führen, die auf jeder Seite mit dem gleichen Layout arbeiten. Das Problem ist weit verbreitet, muss aber nicht auftreten.

Dieser Beitrag zeigt gelungene Webseiten, deren Gestalter die Regel der Konstanz richtig verstanden haben und das Layout der Webseiten etwas variiert haben. Außerdem gebe ich euch Tipps zum Thema Konstanz.

Kommentare und Social Bookmarks würden mich sehr freuen.

Warum ist Konstanz langweilig?

Damit ihr versteht wovon ich spreche, hier zwei Beispiele, warum Konstanz meiner Meinung nach zu eher langweiligen Internetseiten führen kann.

IdealistConsulting

Erst mal eine Seite, die mir eigentlich ganz gut gefällt.

1

1_1_2

1_1_3

1_1_4

Die Seite ist meiner Meinung nach zwar ästhetisch ansprechend, hat aber auf fast jeder Unterseite den gleichen Aufbau.

Maquina studio

Auch eine recht schöne Seite.

1_2

1_2_2

1_2_3

1_2_4 

Ebenfalls optisch ansprechend. Trotzdem findet man auf fast jeder Unterseite die gleiche Struktur.

Fazit

Beide Seiten sehen ganz gut aus, machen aber den selber Fehler: Gleicher Aufbau der Unterseiten. Es sieht ganz klar danach aus, als wäre die Startseite und ein Template für die Unterseiten gestaltet worden. Das macht die gesamte Website zwar übersichtlich und der Nutzer findet sich sofort zurecht, aber die Gesamtkomposition wird dadurch auch etwas langweilig.

Beim Webdesign geht es doch darum, für den Content zu gestalten. Der Content soll optimal präsentiert werden. Dabei macht es teilweise Sinn, das Layout etwas zu variieren.

Positive Beispiele

Jetzt zu zwei Beispielen, die genau meinen Geschmack treffen.

BKWLD

bkwld

bkwld_2

bkwld_3

bkwld_4

bkwld_5

Wie ihr seht, unterscheidet sich fast jede Seite von den anderen. Das sieht nach guter Planung aus.

Signalfeuer

signalfeuer

signalfeuer_2 

signalfeuer_3

signalfeuer_4

signalfeuer_5

Diese Seite sieht ebenfalls gut aus und auch hier haben die Gestalter für einen interessanten Aufbau gesorgt, der von Unterseite zu Unterseite variiert.

Meine Tipps

Weniger Faulheit

Man kann es sich leicht machen und die Startseite gestalten und dann nur ein Template für alle Unterseiten erstellen. Das funktioniert auch, aber es ist nicht optimal. Auf dem Weg zum Optimum (das man wohl nie erreichen wird) muss man auch ein wenig fleißig werden. Der Wireframing Prozess und Gestaltungs- sowie Codingprozess wird aufwändiger werden.

Ich halte es aber für angebracht, den Content möglichst gut in Szene zu setzen und dafür braucht es häufig verschiedene Unterseiten.  

Content vor dem Gestaltungsprozess besorgen

Wenn man mit Dummy Texten gestaltet und nur eine oberflächliche Ahnung davon hat, was später auf der Website stehen wird, kann man kaum für den Content gestalten. Deswegen halte ich es für angebracht, alle Texte möglichst in ihrer Endfassung vorliegen zu haben, bevor man mit der Gestaltung anfängt.

Ihr solltet wissen, wo Listen eingesetzt werden, wo Bilder verwendet werden sollen und  wo Formulare sein sollen. Ihr müsst wissen, wie lang die einzelnen Texte sind und wie sie unterteilt sind. Ihr müsst wissen, wie viele verschiedene Dinge auf eine Unterseite müssen usw.

Bevor ein Magazin gesetzt wird, muss auch der Inhalt bekannt sein.

Gefühl für Konstanz bekommen

Fängt man an, etwas unkonstanter zu werden, kann man schnell verlieren. Ich will mit diesem Beitrag auf keinen Fall bestreiten, dass ein gutes Webdesign konstant gestaltet worden sein sollte.

Es ist essentiell zu wissen, welche Teil des Designs man umbauen darf und welchen nicht. Die beiden guten Beispiele zeigen sehr genau was ich meine. Obwohl der Aufbau variiert, bleiben Elemente gleich. Die Navigation sitzt zum Beispiel immer an der gleichen stelle. Der Header sieht überall gleich aus. Überschriften sollte man ebenfalls immer gleich lassen. Die Font Wahl auch. Links müssen auch auf jeder Unterseite gleich aussehen.

Fazit

Gegen Langeweile und für interessantere Webseiten. Dieser Beitrag sollte euch zeigen, warum es sich lohnt, ein wenig mehr Mühe in eine Website zu stecken und wie es aussieht, wenn das Design den Content unterstützt.

Bei Webdesign geht es immer noch um Kommunikation und man kommuniziert nun mal hauptsächlich mit Text. Es gilt diesen Text zu gestalten und ein Layout zu schaffen, dass den Text möglichst gut unterstützt. Das kann man mit einem Standardtemplate für alle Unterseiten fast nie erreichen.

Das ist auch der Punkt, warum ich nicht viel von vorgefertigten Templates halte. 

Eure Meinung?

Ich freue mich auf viele Kommentare mit eurer Meinung zu dem Thema.

18 Kommentare

  1. Anne-Kathrin
    12. Juni 2009 um 08:44 Uhr

    Wir sind uns glaube ich alle einig. Sowas macht einfach mehr her, als Einheitsdreispalter. Nun allerdings kommt das große ABER:

    Content vor dem Gestaltungsprozess besorgen. Das klingt gut, denn es würde zu einem verbesseren Gesaltungsprozess führen, auch was Informationsarchitekturen betrifft.
    Vor allem könnte man dann auch viel mit Eyecatchern arbeiten. – auch eine Form der Auflockerung eines Designs.
    Die Realität sieht anders aus. Ein idealistisches Ziel also in meinen Augen…
    Noch problematischer finde ich aber die Frage der Wartbarkeit. Einem variablen Layout und (als Stärke des Ganzen eine kontextsenstive Einblendung von Inhalten etc.) liegt meist auch ein Regelwerk zugrunde, was dem Redakteur recht viel abverlangt.
    Das Ergebnis ist, dass vieles einfach nicht genutzt wird.

    Schau dir deine hübschen Beispiele mal an. Das sind alles Agenturen. Die wissen, wo sie hinfassen müssen. Nun nimm in der Praxis mal Firma XY, der man auch etwas Dynamisches hinstellt und ihr damit alle Wege offen hält. Wird die Pflege und Wartung nicht durch die Agentur oder den Freelancer übernommen, wird das meiste langfristig nicht genutzt werden.
    Ausbruch aus der klassischen Darstellung erfordert eine Menge Disziplin und Idealismus.

    • Lennart Prange
      12. Juni 2009 um 14:43 Uhr

      Natürlich ist es schwer, den Content vor dem Gestaltungsprozess zu besorgen. Ich halte es aber für angebracht, dass wenigstens zu probieren und Kunden etwas auf die Lieferung des Contents zu drängen. Die Gestaltung läuft einfach viel besser, wenn man den Inhalt vorliegen hat.

      Sobald eine Internetseite von einem Amateur gepflegt werden soll, wird es schon schwieriger. Man kennt den Inhalt selbstverständlich nicht, bevor er geschrieben wird. Natürlich kann man einiges über Stylesheets vorgeben, aber da kann viel versaut werden. Fast jede Seite hat aber auch einen statischen Teil. Wenigstens dieser kann gestaltet werden. Außerdem arbeiten einige Webseiten zwar mit einem CMS, belassen ihren Inhalt aber eigentlich in seiner ursprünglichen Form.

  2. Peer Wandiger
    12. Juni 2009 um 09:00 Uhr

    Sehr gute Beispiele. Die Gradwanderung zwischen Wiedererkennung und Abwechslung ist wirklich nicht einfach und zeigt das Können eines Designers.

    Gerade die erste Site hat ein an sich schönes Design. Aber mit etwas Arbeit könnte man die Seiten interessanter machen.

    Aber wie du schon schreibst. Man muss den Content der einzelnen Seiten kennen und man muss mehr Zeit und Aufwand investieren, als einfach nur ein CMS aufzusetzen und von jemandem füllen zu lassen. Da muss jede Seite designed werden.

    • Lennart Prange
      12. Juni 2009 um 14:46 Uhr

      Danke. Richtig, aber wer eine wirklich gute Seite gestalten will, sollte auch etwas investieren wollen. Natürlich muss das irgendwie bezahlt werden. Da liegt ein Problem.

  3. instantflorian
    12. Juni 2009 um 09:46 Uhr

    Du schreibst:
    “Auf dem Weg zum Optimum (das man wohl nie erreichen wird) muss man auch ein wenig fleißig werden. Der Wireframing Prozess und Gestaltungs- sowie Codingprozess wird aufwändiger werden.”
    Wenn der Kunde das bezahlt – gern.
    “Deswegen halte ich es für angebracht, alle Texte möglichst in ihrer Endfassung vorliegen zu haben, bevor man mit der Gestaltung anfängt.”
    Ja, das wäre schön. Tatsächlich läuft es aber doch meistens so, dass die konkreten Inhalte noch gar nicht feststehen und man ins Blaue hineindesignen muss. Wenn man auf die Zulieferungen wartet und erst dann anfängt, zu layouten, lassen sich Terminvorgaben kaum einhalten.

    “Das kann man mit einem Standardtemplate für alle Unterseiten fast nie erreichen.”
    Was dabei etwas außer acht gerät: Die Seite muss ja noch irgendwie pflegbar bleiben. Bei Designern und Agenturen kann man mit etwas Optimismus davon ausgehen, dass das notwendige Fachwissen vorhanden ist, aus verschiedenen Templates/Seitenmodulen etc. die richtigen auszuwählen. Bei dem Durchschnittskunden, der seine Seite später selbst pflegen soll, ist das erfahrungsgemäß nicht zwangsläufig der Fall.

    Im übrigen finde ich es angenehm, wenn der Text immer an derselben Stelle steht und mir auf der nächsten Seite nicht da, wo ich Informationen vermute, nur ein riesengroßes Bild entgegenspringt. (Es ist erstaunlich, dass immer mehr Websites für Bildschirmauflösungen von mindestens 1900×1200 optimiert zu sein scheinen. Man schaue sich die Beispielseiten doch mal auf einem Netbook mit 1024×600 an…)

    • Lennart Prange
      12. Juni 2009 um 14:49 Uhr

      Die Bezahlung ist, wie bei vielen Teilen einer Website, ein Problem. Da hast du recht.

      Richtig ist auch, dass man den Inhalt fast nie vor der Gestaltungsphase kennt. Da muss man vielleicht mal etwas Druck beim Kunden machen und ihn davon überzeugen, dass der Inhalt sehr wichtig ist und früh geliefert werden muss, wenn ein gutes Ergebnis erzielt werden soll.

      Wie schon vorher geschrieben, wird das Ganze zu einem Problem, wenn die Seite dynamisch ist und von einem Amateur gepflegt werden soll.

  4. Stephan
    12. Juni 2009 um 09:58 Uhr

    Mmmmhhmmm grundsätzlich kann ich Deinem Gedankenansatz folgen. Aber ich denke, dass dies auch sehr stark davon abhängig ist, was ich mit der Seite an Informationen transportieren will.

    Ich finde es nicht immer gut, gerade wenn ich auf der Suche nach entsprechenden Infos bin, wenn ich mich auf jeder Seite einer Site neu orientieren muss, um die Struktur der Seite zu erkennen. Das kann beim User auch schnell zu Frust und im Endeffekt zum verlassen der Seite führen.

    Gestalten kann ich auch mit Elementen der Seite, ohne die Struktur jedesmal umzuwerfen – siehe Dein erstes Beispiel.

    • Lennart Prange
      12. Juni 2009 um 14:51 Uhr

      Das kann man, aber ich bin der Meinung, wie du, dass man es dem Nutzer möglichst leicht machen sollte, Infos zu finden und zu überblicken. Dafür muss man nicht immer das gleiche Template benutzen, sondern kann auch mal mehr oder weniger Spalten verwenden usw. So, wie es aber besten passt und übersichtlich ist.

  5. Markus Schlegel
    12. Juni 2009 um 10:34 Uhr

    Konstanz ist immer schlecht, denn das bedeutet unveränderlichkeit. Das Wort, mit dem man eine gute Website beschreibt, ist Konsistenz.

    Ein weiteres gutes Beispiel wäre die Apple-Website. Keinesfalls konstant, dafür aber sehr konsistent.

  6. Alex B.
    12. Juni 2009 um 10:55 Uhr

    Schöner Artikel und das zweite Beispiel gefällt mir total. Problematisch ist leider, dass man selten den gesamten Text bekommt. Ist zwar vorteilhaft, aber leider selten möglich.

  7. André Nitz
    12. Juni 2009 um 12:39 Uhr

    Hey, wieder einmal top! ABER: Ich denke das diese Sache wirklich Projektabhängig ist. Wenn ich mir eine “normale” Firmenwebsite ansehe, so kann ich diese logischerweise ganz stark variieren und meiner kreativität freien lauf lassen.

    Bei meiner Arbeit an preisvergleich.de sieht das ganz anders aus. Hier muss ich strickt den selben Verlauf nehmen, um eine möglichst hohe Klickrate zu erzeugen und um den User, nicht lange nach seinem Produkt suchen lassen zu müssen.

  8. Kristof
    12. Juni 2009 um 14:11 Uhr

    Ich geb dir auf jeden Fall absolut recht, möchte aber noch etwas einbringen – ich denke es geht meist darum einen Mittelweg, bzw die Konstanz durch feinfühligere Änderungen aufrecht zu erhalten.
    Denn Seiten, die alle gleich aussehen, machen es auf jeden Fall schwerer sich auf der Website zurechtzufinden, und es nimmt den Wiedererkennungswert des “hier befinde ich mich” komplett weg.

    Konstanz zu erhalten bedeutet Farben, Abstände, Gruppierungen zwar weitestgehend aufrecht zu erhalten, aber möglichst selten gleich zu verwenden. Denn der Effekt den dein Blogpost sehr schön beweist ist nicht primär die Langeweile die bei zu ähnlichen Seiten auftaucht, sondern der negative Wiedererkennungseffekt bei zuviel Ähnlichkeit

  9. nastorseriessix
    12. Juni 2009 um 14:37 Uhr

    Der Spagat zwischen Konstanz und Abwechslung ist meiner Meinung nach, grade bei einem Blog schwer auszumachen. Denn in den meisten Blogs geht es eben nicht um statische Inhalte, sondern dort kommen meistens Tägliche neue Artikel hinzu.

    Dort könnte man zwar, für jeden Artikel ein anderes Sub-Design verwenden, aber das dürfte dann auch wiederum nicht zu stark vom eigentlichen Design des Blog abweichen.

    Ich finde es schwerer das für Blogs umzusetzen als für statische Webseiten.

  10. Tobias
    12. Juni 2009 um 23:44 Uhr

    Ich glaube du meinst Konsistenz, jedenfalls wäre das der Fachbegriff im Bereich Gestaltung. Vielleicht ist Konstanz neben der Stadt am Bodensee auch das richtige Wort für Blogbetreiber beim regelmäßig konstanten “Posten”.

    • Lennart Prange
      13. Juni 2009 um 10:40 Uhr

      Naja, ich war da auch unschlüssig, aber das Wort Konsistenz passt in diesem Fall nicht wirklich. Das verbinde ich eher mit Dichte und Beschaffenheit, als mit Gestaltung. Das Adjektiv konsistent wäre richtig gewesen (beständig). Konstanz passt aber auch 🙂

  11. Tobias
    13. Juni 2009 um 13:19 Uhr

    http://de.wikipedia.org/wiki/Konsistenz

    Schau mal dort unter Software Ergonomie.

Trackbacks/Pingbacks