Was kommt zuerst? Layout oder Inhalt?

by Susan Farell (deutsche Übersetzung) – 11.10.2015

Es kommt darauf an…

Wenn Sie über bestehende Inhalte verfügen und ein Redesign ansteht, ist eine Strategie sinnvoll, die dem Inhalt höchste Priorität verleiht. Wenn Websites neu gestaltet werden, um ein tolles mobiles Erlebnis zu ermöglichen, sollten progressive Verbesserung und ein Responsive Design verwendet werden, das auf den Inhalten basiert, die den Nutzerbedürfnissen entsprechen. In grösseren Unternehmen könnte die interne Organisation allerdings zur Folge haben, dass das Layout-Design beginnt, bevor der Inhalt bekannt ist – wahrscheinlich, da der Text noch nicht verfasst wurde oder parallel Inhaltsprüfungen stattfinden.

Wenn Container und Inhalte kombiniert werden, können unbeabsichtigte Resultate leider zu mühsamen Notlösungen, teuren Überarbeitungen oder zur Kürzung von Inhalten führen. Um diese Probleme zu vermeiden, sollten Sie das Design des Layouts und der Inhalte aufeinander abstimmen.

CNN verwendet ein starres Raster. Obwohl er schön aussieht, kann es für die meisten Webseiten zu kompliziert sein,  alle Inhalte zu kürzen, damit diese in die Kästchen des Rasters zu passen.

Probleme, die entstehen, wenn zuerst der Container gestaltet wird

Leere Platzhalter

Eine Vorlage oder ein CMS kann Platzhalter für Dinge enthalten, die nicht auf jeder Seite vorhanden sind oder die für das Unternehmen keinen Sinn machen. Diese Platzhalter während des Design-Prozesses mit künstlichen Inhalten zu füllen, kann später zu leeren, überflüssigen Bereichen führen. „Lorem ipsum“ muss ein Ende haben.

Konsistenz um ihrer selbst willen

Lockstep-Konsistenz kann schlecht nutzbare Websites mit überflüssigen oder irrelevanten Inhalten zur Folge haben. Falls eine Vorlage über 3 Stufen von Überschriften verfügt und der Inhalt nur 2 benötigt, sollten Sie nicht eine der Überschriften wiederholen, nur weil Platz dafür vorhanden ist. Zudem sieht es wahrscheinlich seltsam aus, die Stelle leer zu lassen. Auch Tog sagt: die wichtigste Konsistenz ist die Konsistenz mit den Nutzererwartungen.

Wenn Platzhalter- oder Redundanz-Probleme auftreten, versuchen Sie, falls möglich, die Vorlage zu variieren. Vielleicht könnte die Überschrift minimiert werden, wenn sie leer bleibt. Falls die Änderung von Vorlagen keinen Sinn macht, überlegen Sie, eine Vorlage mit 2 Stufen von Überschriften zu wählen und Benutzern die Möglichkeit zu geben, im Inhalt eine weitere Überschrift hinzuzufügen.

Vermeiden Sie die Tyrannei von Platzhaltern, vor allem wenn Sie mit gebrauchsfertigen Plattformen arbeiten. Personalisieren Sie diese nach Bedarf.

Skalierungsprobleme

Skalierungsprobleme treten auf, wenn die Grösse der Inhalte nicht mit dem Platz übereinstimmt, der für sie vorgesehen ist. Häufige Probleme beinhalten:

• Layout-Elemente werden nicht erweitert, wenn die Navigation vergrössert oder übersetzt wird. Die Anzahl der Navigationselemente zerstört irgendwann das Seitenlayout und neue Elemente werden in Quicklinks oder einem Ressourcen-Menü untergebracht.
• Inhalte sind zu gross oder zu klein für ihren vorgesehenen Platz, was visuelle Störungen zur Folge hat.
• Bilder gehen über Rahmenelemente hinaus oder müssen zu klein angezeigt werden, wodurch sie nicht mehr gut lesbar sind und den Benutzern keinen Wert liefern.

Viele der grossen Web-Redesigns, an denen wir bisher gearbeitet haben, wurden aufgrund von Skalierungsproblemen notwendig. Notlösungen für Skalierungsprobleme sind meistens wenig hilfreich und potenzieren die Probleme – genau wie die Kramschublade in Ihrer Küche

Der NZ Herald verfügt über ein flexibles, vertikales Layout, dessen Spalten voneinander unabhängig sind. Dieses Layout aus dem Zeitungszeitalter bietet Platz für verschieden lange Artikelzusammenfassungen und Bildunterschriften.

Unbeabsichtigte Beschränkungen

Manchmal werden Platzhaltertexte so verfasst, dass sie in die vorgeschlagenen Layout-Vorlagen passen. Diese frühzeitigen Annahmen betreffend das Aussehen von Dingen werden somit zu willkürlichen Beschränkungen.

Beispiele für integrierte Layout-Beschränkungen:

• Alle Bildunterschriften müssen 2 Zeilen lang sein.
• Alle Zusammenfassungen müssen einen Absatz lang sein und aus 5 Zeilen bestehen.
• Einen Satz hinzuzufügen, zwingt Sie manchmal, eine weitere Seite zu erstellen.
• Fehlende Inhaltstypen haben leere Seiten zur Folge, durch die Benutzer klicken müssen.
• Menüpunkte oder Überschriften dürfen ein oder zwei Wörter – aber nicht drei Wörter – lang sein.
• Die Spaltenbreiten können nicht geändert werden, ohne andere Seitenelemente zu beeinflussen.
• Eine Änderung der Schriftgrösse des Browsers hat zur Folge, dass die ganze Seite kaputt aussieht.

Probleme mit Werbeanzeigen

Werbeanzeigen bewegen sich auf der Seite herum und verändern ihre Grösse. Früher waren alle Werbeanzeigen horizontale, rechteckige Banner mit einer bestimmten Grösse. Später wiesen sie andere Grössen auf, danach wurden sie fast quadratisch. Irgendwann bewegten sie sich dann auf der Seite herum. Später wurden sie auf Zwischenseiten platziert. Designer, die möchten, dass ihre Designs über Jahre hinweg verwendet werden können, sollten Designlayouts nicht um die Grösse von Werbung herum designen.

Werbeanzeigen geben vor, Inhalte zu sein. Manchmal befinden sie sich in der Nähe von Rollbalken, damit Nutzer versehentlich darauf klicken oder tippen. (Tricksen Sie Benutzer nicht aus, um mehr Klicks auf Werbeanzeigen zu erhalten. Das ist eine sichere Methode, um die Nutzerzahlen sinken zu lassen.)

Werbeanzeigen sind nicht die wichtigsten Inhalte. Manche Vorlagen sehen lächerlich aus, wenn die Werbeanzeigen unsichtbar sind. Das ist ein guter Hinweis darauf, dass sie mit Werbung noch schlimmer aussehen werden. Falls Sie Layouts primär für Werbung designen, konzentrieren Sie sich wahrscheinlich nicht mehr auf die Dinge, die die Besucher Ihrer Webseite sehen möchten: die Inhalte.

Werbeanzeigen haben Nutzer so konditioniert, dass sie sie unbewusst ignorieren. Banner-Blindheit kann dazu führen, dass alle Dinge in der Nähe von Werbeanzeigen (oder Dinge, die aussehen, als ob sie Werbung sein könnten) für Ihr Publikum praktisch unsichtbar werden.

Sie können derartige Probleme mit Werbung aber nicht testen, bevor sich in Ihren Layouts echte Inhalte befinden.

Das sollten Sie tun

• Erstellen Sie flexible Layouts. Das sollte heutzutage selbstverständlich sein, wir sehen aber immer noch viel zu viele starre Designs. Die verschiedenen Bildschirmgrössen, die heute verwendet werden, setzen ein Responsive Webdesign voraus. Adaptive und responsive Designs integrieren Inhalte meist nahtloser, sie retten Sie aber nicht im Falle von unzureichenden Tests mit tatsächlichen Inhalten.
• Um erfolgreich zu sein, müssen Ihre Layouts, Ihre Navigation und Ihre Textcontainer sowohl während des Designvorgangs als auch lange nach ihrer Veröffentlichung flexibel sein.
• Befolgen Sie progressive Verbesserungsprinzipien , um für Barrierefreiheit und Kompatibilität über Plattformen hinweg zu designen.
• Gestalten Sie mit bestehenden Inhalten. Falls Sie ein Redesign durchführen und bereits Inhalte vorhanden sind (auch wenn es sich um veraltete Inhalte handelt), können Sie diese als Anhaltspunkt verwenden. Falls Sie ein relativ grosses System designen, müssen Sie nicht nur das Design an den Inhalt anpassen, sondern auch den Inhalt an das Design, da das Design und der Inhalt der Webseite zusammen wachsen müssen.
• Falls Sie noch keine Inhalte haben, leihen Sie sich ähnliche Medien von anderen Quellen aus und platzieren Sie sie in Drahtgittermodellen, Prototypen und anderen Modellen. Sie können Objekte auch ausdrucken, zerschneiden und auf einem Tisch neu ordnen, um sich vorstellen zu können, wie sie ins Seitenlayout passen. Diese Übung hilft Ihnen auch dabei, jene Arten von Inhalten zu ermitteln, die Sie erstellen sollten, um die Webseite in Ihrer Branche konkurrenzfähig und vergleichbar zu machen.
• Verwenden Sie Platzhalter nur dann, wenn Sie absolut notwendig sind – und nur in den ersten Stufen der Low-Fi Drahtgittermodell-Designkommunikation.
• Planen Sie, alle vorhersehbaren zukünftigen Entwicklungen ein. Ihre Designs könnten einige Jahrzehnte länger verwendet werden, als Sie es sich heute vorstellen können. Fragen Sie sich, was das Unternehmen veröffentlichen würde, wenn die Bandbreite wesentlich besser wird. Wenn sowohl riesige Bildschirme in Grösse eines Whiteboards als auch winzige Smart Watches häufiger verwendet werden. Wenn digitale Assistenten Menschen vorlesen. Was wird Ihre für mobile Geräte optimierte Webseite benötigen? Was benötigen Sie für Ihre B2B-Webseite auf Chinesisch? Vielleicht benötigen Sie heute weitere Vorlagen, um später ein teures Redesign zu vermeiden.
• Berücksichtigen Sie zukünftige Inhaltstypen und Display-Grössen, sowie nützliche Methoden, um Inhalte umzufunktionieren. Alle altmodischen Tabellenlayouts mit fixer Breite müssen ersetzt und umgangen werden. Orbital Content, ein Artikel aus A List Apart, weist darauf hin, dass Inhalte einer Webseite häufig in verschiedene Container verschoben werden. Benutzer und Apps verwenden zum Beispiel oft Browser Plugins, um Seiten neu zu formatieren, schlechte Layouts und Textobjekte zu umgehen und Artikel besser lesbar zu machen. Auf ähnliche Weise könnten Webseiten Teile anderer Dokumente enthalten, da Inhalte auf verschiedene Weise eingebettet werden. Planen Sie die Einbettbarkeit und das Teilen von Inhalten ein.
• Planen Sie Vergrösserungen ein. Versuchen Sie, die Länge von Texten oder die Anzahl von Objekten so wenig wie möglich zu beschränken. Ermöglichen Sie grössere Schriftgrössen als Ihre bevorzugte Schrift. Planen Sie für alles mehr ein – vor allem für die Navigation.
• Dokumentieren Sie Ihre Designentscheidungen. Kommunizieren Sie Design-Annahmen und Kompromisse klar, damit alle Beteiligungen entscheiden können, ob sie Inhalte beschränken oder Zeit investieren und die Layouts flexibler machen möchten. Überlegen Sie, ob diese Beschränkungen und ihre Design-Resultate im Styleguide oder in der Musterbibliothek Ihrer Vorlagen erwähnt werden müssen.
• Testen Sie frühzeitig und häufig. Beginnen Sie mit einem vorgeschlagenen Layout und testen Sie es mit echten Inhalten. Überarbeiten Sie Designs nach Bedarf.
• Suchen Sie nach wahrscheinlichen Problemen mit der Grösse und Platzierung von Inhalten:
  • Objekte mit fixer Breite
  • Elemente, die Texte mit Zeilenumbrüchen versehen
  • Die verschiedenen Seitenverhältnisse von Bildern und Videos in Ihrem Inhaltsbereich
  • Die Illusion der Vollständigkeit (doppelte Böden), die von horizontalen Elementen hervorgerufen wird
  • Inhalte, die überladen oder unterbrochen aussehen
  • Interaktive Touch-Ziele ohne ausreichend umgebenden Raum
• Stellen Sie sicher, dass Sie wissen, was mit Ihren Layouts passiert, wenn:
  • Sich die Anzahl oder Länge von Navigationselementen erhöht
  • Seiten von einer Screenreader-Software laut vorgelesen werden
  • Webseiten über verschiedenen Plattformen, inklusive mobile Geräte, verwendet werden
  • Sich die Grösse oder Form von Inhaltstypen (Werbeanzeigen, Videos, Text) ändern
  • JavaScript, Flash und Webfonts deaktiviert werden 
  • Formulare, Rechnungen und andere wichtige Objekte ausgedruckt werden
• Testen Sie Extremfälle. Erstellen Sie Layouts, die auch in Sonderfällen gut aussehen: kleinste, grösste, längste, überladenste, die meisten Bilder, nur Text, Diagramme und Grafiken, Infografiken, lange Überschriften mit Zeilenumbruch, eingerückte Listen, Absatzlisten, Textzitate, Hilfe, Abläufe, alle Arten von Werbung, Formulare und so weiter.

• Testen Sie Ihre Layouts auf so vielen Plattformen und mit so vielen Anzeigegrössen wie möglich. Einheitsdesigns funktionieren nicht immer, dennoch können Sie es vermeiden, drei Versionen der Webseite zu erstellen, indem Sie von Anfang an die schwierigsten Inhalte berücksichtigen.

Wie diese Erinnerung an die Vielzahl von Android-Bildschirmgrössen in einem Bericht von Open Signal zeigt, ist Flexibilität beim Inhaltsdesign die einzige Option.

• Übersetzen Sie Layout-Vorlagen, um zu sehen, was nicht mehr funktioniert. Verwenden Sie realistische Texte und übersetzen Sie sie auf Deutsch und in Sprachen mit anderen Schriftzeichen, um herauszufinden, was passiert. Diese Übung hilft Ihnen dabei, die Eignung des Designs für Extreme zu testen. Ausserdem kann sie Ihnen dabei helfen, herauszufinden, wie gut Ihr Layout die Aufgaben der Benutzer kommuniziert und wie die Seiten visuell fliessen.

Viele Menschen verwenden Übersetzungsmaschinen, um Webseiten zu lesen. Verwenden Sie Google Translate oder ähnliche Dinge, um festzustellen, wie gut die vorgeschlagenen Layouts für Ihr weltweites Publikum funktionieren.

Fazit

Es ist natürlich nicht möglich, jeden Inhaltstyp und jede mögliche Grösse in jedem Layout unterzubringen. Indem Sie mögliche zukünftige Verwendungszwecke, sowie die Art, auf die Benutzer Ihre Inhalte geniessen und umfunktionieren, berücksichtigen, sollten Sie allerdings benutzerfreundliche und nützliche Layouts erstellen können, die jahrelang funktionieren werden. Die Fehler des Layouts bereits während des Designs zu beheben, spart Ihnen sowohl Zeit für Copyfitting als auch Geld für Redesigns.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.