Anpassen des Contents in Imperia: Unterschied zwischen den Versionen

Aus Imperia Support Wiki
(Videos)
(iFrames)
Zeile 50: Zeile 50:
 
== iFrames ==
 
== iFrames ==
 
Das Grundlayout erhält eine neue Seitenbreite, demnach sind auch die Container, in denen iFrames angezeigt werden können, entsprechend breiter. Wurden iFrames auf Seiten mit Sidebar angezeigt, betrug die Breite des iFrames bisher 540 Pixel; ohne Sidebar 780 Pixel. Mit dem neuen Grundlayout werden 980 Pixel angezeigt. Bitte prüfen Sie die im [https://support.berlin.de/wiki/Video/Audio iFrame-Modul] eingestellte Höhe für eine optimale Anzeige der Inhalte.
 
Das Grundlayout erhält eine neue Seitenbreite, demnach sind auch die Container, in denen iFrames angezeigt werden können, entsprechend breiter. Wurden iFrames auf Seiten mit Sidebar angezeigt, betrug die Breite des iFrames bisher 540 Pixel; ohne Sidebar 780 Pixel. Mit dem neuen Grundlayout werden 980 Pixel angezeigt. Bitte prüfen Sie die im [https://support.berlin.de/wiki/Video/Audio iFrame-Modul] eingestellte Höhe für eine optimale Anzeige der Inhalte.
 +
 +
[[Bild:leitfaden-iframe.png]]
  
 
== Imagemaps ==
 
== Imagemaps ==

Version vom 14. Juli 2021, 17:22 Uhr

Dies ist eine Unterseite von: Leitfaden zum Einsatz des neuen Design-Systems für Online-Angebote der Berliner Verwaltung Zur Umstellung von Imperia-Auftritten und anderen Online-Angeboten der Berliner Verwaltung auf das neue Layout beachten Sie bitte den obenstehenden Leitfaden.

Allgemeine Hinweise

Die Berlin.de-Seiten werden mehrheitlich mit mobilen Endgeräten (Smartphone, Tablet) angesehen, PC und Notebooks nehmen mittlerweile eine untergeordnete Rolle ein. Die Seiteneinstiege erfolgen zu einem überwiegenden Teil über Suchmaschinen bzw. mit konkreten Informations- bzw. Interaktionsanforderungen des Users gegenüber der Verwaltung. Damit einher gehen Erwartungen der Nutzer*innen zur Auffindbarkeit und Vermittlung der von ihnen gesuchten Inhalte. Der Content sollte daher vor der Umstellung auf mobile Ansichten optimiert werden. Eine Vielzahl unterschiedlichster Templates und Module in Imperia bieten dafür die Voraussetzungen. Leitend für das Content Management können folgende Fragen sein:

  • Erleichtern Aufbau und Inhalte zentraler Einstiegs- und am häufigsten besuchter Seiten das Erfassen und Verstehen von Informationen sowie das intuitive Navigieren zu anderen relevanten Inhalten im Auftritt? (z.B. kurze und prägnante Texte in einfacher Sprache, barrierefreie Gliederung und Auszeichnung von Text, schnelle Navigation über Teaser im Contentbereich)
  • Folgt die Nutzerführung durch den Auftritt einer Logik, die die Nutzer*innen erwarten und verstehen können (z.B. ohne Wissen über die Verwaltungsstrukturen)?
  • Bekommen Nutzer*innen die für sie relevante Inhalte und Funktionen der Seiten ohne lange Wege angeboten (Scrollen, Suchen, Tappen/Klicken)?

Zu beachten ist bei allen redaktionellen Anpassungen, dass die Änderungen sowohl im alten als auch im neuen Layout angezeigt werden. Es ist nicht möglich, eine Änderung, bspw. Austausch eines Bildes, nur unter stg.berlin.de/angebotsname/ anzuzeigen. Entsprechend geht es zur Umstellung darum, dass Sie einen Stand Ihrer Inhalte erzeugen, der sowohl im alten als auch im neuen Layout gleichzeitig funktioniert. Nach der Umstellung können dann frei alle Möglichkeiten des neuen Layouts verwendet werden, die Kompatibilität mit dem alten Layout wird obsolet.

Leitfaden-live-content.png

Die Imperia-Vorschau (über den Dokumentenbrowser oder die Vorschau in der Bearbeitungsansicht) zeigt in der Umstellungsphase immer die Inhalte im alten Landeslayout. Die tatsächliche Live-Ansicht im neuen Layout unter stg.berlin.de ist erst nach Freischalten der Dokumente sichtbar. Nutzen Sie zudem bei allen redaktionellen Arbeiten mobile Ansichten als Vorschau. Für stg.berlin.de/angebotsname/ sollte die mobile Ansicht am besten über ein mobiles Endgerät getestet werden. Ist das nicht möglich, kann eine mobile Ansicht über das Verkleinern des Browserfensters erzeugt werden. Wichtig: Bitte laden Sie nach dem Verkleinern des Fensters die Seite noch einmal neu.

In den folgenden Abschnitten werden Änderungen durch das neue Design-System erläutert, die sich auf alle Imperia-Auftritte auswirken und möglichst vor der Umstellung auf das neue Layout redaktionell angepasst werden sollten. Die Behörden entscheiden jedoch selbst, welche redaktionellen Anpassungen sie in welchem Umfang vor der Layoutumstellung vornehmen. Es erfolgt durch die Landesredaktion oder BerlinOnline keine Freigabe, Qualitätsprüfung o.ä. vor der Umstellung. Hiervon unberührt bleiben die zentralen Vorgaben der Landesredaktion für Online-Angebote der Berliner Verwaltung.

Bilder

Mit dem neuen Design-System ändern sich im Grundlayout die angezeigten Containergrößen von Bildern, sie werden nun größer angezeigt. Zudem wurden Seitenverhältnisse der Bilder harmonisiert. Dies bedeutet, dass in Seitentypen und Flexmodulen eingesetzte Bildvarianten, die kleiner als die neuen Containergrößen sind, im neuen Layout fehlerhaft angezeigt werden (verpixelt, unscharf etc.). Veränderte Seitenverhältnisse können dazu führen, dass sich die gezeigten Bildausschnitte ändern, auch wenn die bisher genutzte Bildvariante auf die neuen Containergrößen reagieren kann. Aus diesem Grund ist es sinnvoll, alle Seiten zu prüfen, auf denen Bilder zum Einsatz kommen und diese entsprechend zu aktualisieren. Bitte richten Sie sich darauf ein, dass die Anpassung des vorhandenen Bildmaterials wahrscheinlich Ihre umfangreichste Aufgabe im Umstellungsprozess sein wird. Leider ist diese Aufgabe unumgänglich, was an erheblich angehobenen Standards für Bildgrößen im heutigen Internet liegt.

Bildgrößen

Eine Übersicht der alten und neuen Bildgrößen ist im Support-Wiki unter Bildgrößen abrufbar.

Bildbestand im MAM aktualisieren

Bilder müssen eine Mindestgröße von 1000 Pixel haben und sollten in den Bildverhältnissen 4:3 und 2:1 genutzt werden können.

Leitfaden-mam-aktualisieren-1.png

Grundsätzlich sollten alle Bilder, deren Varianten “MaxSize” bzw. “Original” nicht die geforderten Mindestgrößen haben, aus dem Media-Asset-Management (MAM) gelöscht bzw. ersetzt werden.

Ist die Variante „Original“ kleiner als 800*x oder x*800 Pixel ist auch die MaxSize Variante so klein und das Bild muss gelöscht oder ersetzt werden.

Leitfaden-mam-aktualisieren-2.png

Ist die Variante „Original“ 800*x oder x*800 Pixel groß, so besteht eine Möglichkeit, dass die Variante „MaxSize“ noch größer ist. Dann kann ein Reimportieren und erneutes Abspeichern (Button „hochladen) ohne weitere Änderung des Bildes ggf. ausreichen. Danach sollte kontrolliert werden, ob sich die Variante „Original“ zu 1000*x oder x*1000 Pixel oder mehr verändert hat.

Zusätzliche selbst erstellte oder hochgeladene Varianten der Bilder sollten ebenso auf die neuen Mindestgrößen geprüft werden. Veraltete Varianten sollten gelöscht und ggf. neue über die Bildbearbeitung im MAM oder via Upload erzeugt werden.

Leitfaden-mam-aktualisieren-4.png

Upload neuer Bilder

Bilder, die neu hochgeladen werden (auch Bilder, die über “Reimportieren” aktualisiert werden), sollten eine Mindestgröße von 1500 Pixel haben und in den Bildverhältnissen 4:3 und 2:1 genutzt werden können.

Seiten mit Bildinhalten aktualisieren

Eine Übersicht mit allen Seitentypen (Templates) und Flexmodulen, in denen Bilder eingesetzt werden können, kann im Support-Wiki abgerufen werden. Die bisher eingesetzten Varianten der Bilder müssen mit den zuvor im MAM aktualisierten oder neu hochgeladenen/erstellten Bildern bzw. Varianten ausgetauscht werden. Damit die Änderungen live sichtbar werden, muss das Dokument am Ende freigeschalten werden. Werden die Varianten Original bzw. MaxSize verwendet, ist es bei entsprechender Größe der Varianten ggf. ausreichend, das Bild im MAM lediglich über die Reimportieren-Funktion zu aktualisieren und neu freizuschalten.

Videos

Das Grundlayout erhält eine neue Seitenbreite, demnach sind auch die Container, in denen Videos angezeigt werden können, entsprechend breiter. Die alte maximale Container-Größe der Videos war auf 540 Pixel voreingestellt. Die neue maximale Seitenbreite beträgt 980 Pixel. Falls Videos weiterhin über die volle Seitenbreite angezeigt werden sollen, muss im Video/Audio-Modul die Breitenangabe geändert werden. Das Feld für Höhe kann freigelassen werden, da der Container automatisch auf das Seitenverhältnis des Videos skaliert.

Leitfaden-video.png

iFrames

Das Grundlayout erhält eine neue Seitenbreite, demnach sind auch die Container, in denen iFrames angezeigt werden können, entsprechend breiter. Wurden iFrames auf Seiten mit Sidebar angezeigt, betrug die Breite des iFrames bisher 540 Pixel; ohne Sidebar 780 Pixel. Mit dem neuen Grundlayout werden 980 Pixel angezeigt. Bitte prüfen Sie die im iFrame-Modul eingestellte Höhe für eine optimale Anzeige der Inhalte.

Leitfaden-iframe.png

Imagemaps

Das Grundlayout erhält eine neue Seitenbreite, demnach sind auch die Imagemaps entsprechend breiter. Die vorher eingetragenen verlinken Flächen passen damit nicht mehr zum angezeigten Bild. Die Koordinaten müssen komplett erneuert werden. Die Landesredaktion und BerlinOnline können keine Hilfestellung zur Erneuerung der Koordinaten leisten. Bitte beachten Sie auch, dass es sich bei Imagemaps allgemein um eine veraltete Technologie handelt und verzichten sie auf deren Einsatz, wenn möglich.

Header

Teil der neuen Portalnavigation ist der Header, der zusätzlich das Menü, die Suchfunktion für den Auftritt und das Barrierefreiheitsoverlay enthält. Der Header ist bereits seit Ende 2020 auf allen Imperia-Auftritten zu sehen und muss auch von externen Angeboten der Behörden übernommen werden. Der Header-Bereich ist sticky, das heißt, dass er beim Scrollen der Seiten “mitläuft” und so dem User die Navigation über die Seiten erleichtert.

Navigation / Menü

Das alte Landeslayout hatte drei verschiedene Navigationsbereiche: Eine horizontale Topnavigation am Seitenanfang, die Rubriken der ersten und zweiten Verzeichnisebene abbilden konnte, eine Metanavigation oberhalb der Top-Navigation (Desktop) bzw. am Seitenende (mobile), die Links zu Sprachversionen, Social-Media-Accounts der Behörden und weiteren redaktionellen Inhalten bot. Zusätzlich wurde am linken Seitenrand im Desktop-Bereich eine vertikale Navigation abgebildet, hier war ein Navigieren bis zur vierten Verzeichnisebene möglich. Bei diesem Aufbau der Navigation handelte es sich um eine mittlerweile überholte Optimierung auf die Möglichkeiten von Desktop-Rechnern und sie passt nicht mehr zu den Anforderungen einer mobilfähigen Webseite.

Im neuen Layout sind Top- und Metanavigation nun im sogenannten Burgermenü (drei waagerechte Linien) im Header-Bereich abgebildet. Beim Klicken oder Tappen auf den “Burger” öffnet sich das Menü, das die vollständige Verzeichnistiefe eines Auftritts abbildet ähnlich einer Sitemap (Voraussetzung: Rubriken werden redaktionell als “sichtbar in der Navigation” über die Rubrikenformulare definiert). User können also aus dem Menü heraus in jeden Seitenbereich gelangen. Die Inhalte der Meta-Navigation werden im “Burger” unterhalb der Verzeichnisse abgebildet. Zusätzlich können der neue Footer und der Contentbereich (über Teaser) zur Navigation genutzt werden. Bitte achten Sie bei der Einrichtung der Navigation darauf, diese für die Nutzung durch Ihre Endnutzer zu erstellen: Es geht nicht unbedingt darum, den Auftritt so kleinteilig wie möglich darzustellen, sondern vielmehr darum, sinnvolle Navigationswege anzubieten. Denken Sie bitte auch darüber nach, welche Teile der Seite in der Navigation nicht benötigt werden und durch Navigationen aus dem Content (Links) erschlossen werden können.

Barrierefreiheitsoverlay

Die neue Portalnavigation auf den Landesseiten beinhaltet im Header-/Navigationsbereich das sogenannte Barrierefreiheitsoverlay, das durch Klicken/Tappen auf das Accessibility-Icon aktiviert wird. Dieses Overlay wird u.a. automatisiert mit im Auftritt veröffentlichten Inhalten befüllt. Direkte redaktionelle Eingaben in das Overlay sind nicht möglich. Damit die Automatisierung zur Anzeige korrekter Angaben führt, müssen alle Felder im Barrierefreiheitstemplate befüllt werden. Hierbei ist besonders auf die Kontaktdaten der*des behördlichen Beauftragten für digitale Barrierefreiheit zu achten. In der Metanavigation müssen die Verknüpfungen zu Inhalten in Leichter und Deutscher Gebärdensprache hinterlegt werden (falls vorhanden).

Startseite

Die Aufteilung der einzelnen Seitenelemente im Startseiten-Template wurde optimiert. Die neue Bühne ist jetzt aufgeräumter: Der Teasertext befindet sich neben dem Bild, die Überschriften der einzelnen Bühnen-Teaser bekommen mehr Platz. Die Zeichenbegrenzung für den Teasertext wird beibehalten. Eine technische Begrenzung, wie viele Bühnenteaser eingesetzt werden dürfen, gibt es hingegen nicht. Zukünftig wird im Template eine Alternative zur Bühne bereitstehen, die sogenannte “Kachel-Opener” mit insgesamt vier möglichen Teasern für den oberen Seitenbereich. Der Kachel-Opener wird im Abschnitt Neue Module näher erläutert. Bei den einsetzbaren Flexmodulen unterhalb der Bühne bzw. der Kacheln wurde das Teaser-Modul gestalterisch verändert, so dass es jetzt eindeutiger als Teaser erkennbar ist und sich optisch deutlicher vom Text/Bild-Modul abhebt. Für das Content-Management der Startseite (und anderer Templates, in denen das Flexmodul “Teaser” eingesetzt werden kann) wird im Hinblick auf eine optimale Nutzerführung die Verwendung des Flexmoduls “Teaser” statt “Text/Bild” empfohlen, wenn auf andere Seiteninhalte navigiert werden soll.

Topbox

Die sogenannte Topbox, die sich im alten Landeslayout rechts neben der Bühne befindet, rutscht im neuen Grundlayout aus Gründen der SEO- und UX-Optimierung ans Ende des Content-Bereichs. Die Funktion der Topbox als Content-Element für Meta- und Kontaktinformationen der verantwortlichen Behörde/Einheit wird damit im Layout stärker berücksichtigt. Die Felder der Topbox können optional befüllt werden.

Bild allein

Das Modul “Bild allein” wird aus Gründen der Barrierefreiheit und UX von der Startseite entfernt. Einheiten, die dieses Modul auf Ihren Startseiten nutzen, müssen das Modul durch Teaser-Module ersetzen.

Text/Bild mehrspaltig

Das Modul “Text/Bild mehrspaltig” wird aus Gründen der Barrierefreiheit und UX von der Startseite entfernt. Einheiten, die dieses Modul auf Ihren Startseiten nutzen, müssen das Modul durch Teaser- oder Text/Bild-Module ersetzen.

Sprachumschalter / Sprachauftritte

In Imperia lassen sich mehrsprachige Inhalte und Übersetzungen redaktionell pflegen. Zum einen kann im gleichen Verzeichnis ein eigener Sprachauftritt angelegt werden (z.B. berlin.de/corona/en/), der technisch und redaktionell ein eigenständiger Imperia-Auftritt in einer anderen Sprache ist. Zum anderen können in der gleichen Rubrik einzelne Seiten in anderer Sprache angelegt werden (z.B. Verordnung auf Arabisch ), die eine Übersetzung des deutschsprachigen Inhalts darstellen.

Bei der Navigation zu diesen Inhalten bietet das Frontend der Berlin.de-Seiten zwei Wege an, die technisch auf die eben genannten redaktionellen Möglichkeiten im Backend reagieren:

  1. Der Sprachumschalter, der im alten Landeslayout am Anfang der Marginalspalte / Sidebar gezeigt wurde und damit in mobile unter den Content-Bereich verschwand, ist nun dauerhaft in derselben Zeile der “Breadcrumb-Navigation” platziert, also direkt unterhalb des Header-/Navigationsbereichs – unabhängig vom Endgerät. Gestalterisch weist das Element auf eine Aktion hin und unterstützt User beim Finden und Bedienen des Sprachumschalters.
  2. Die Links zu Sprachauftritten, die im alten Landeslayout in der Metanavigation oberhalb der Hauptnavigation gezeigt wurden, werden innerhalb des neuen Menüs (Hamburger) gezeigt. Zusätzlich lassen sich die Links zu den Sprachauftritten auch im Content- oder im neuen Footerbereich platzieren, siehe Abschnitt Footer

Bitte nutzen Sie den Sprachumschalter nicht nur für einzelne Seiten, zu denen eine Übersetzung existiert, sondern auch für die Navigation zu passenden Inhalten anderer Sprachauftritte, falls zutreffend. So führen Sie User leichter zu mehrsprachigen Inhalten.

Footer

Die neue Portalnavigation auf den Landesseiten beinhaltet einen redaktionellen Footer, der in zwei Bereiche aufgeteilt ist. Den hellgrauen Auftrittsfooter und den dunkelgrauen Landesfooter. Der Landesfooter wird durch die Landesredaktion gepflegt, der Auftrittsfooter durch die verantwortliche Redaktion für den jeweiligen Auftritt. Neben den Pflichtangaben (Impressum, Datenschutz- und Barrierefreiheitserklärung, Kontakt), können dort insgesamt sechs Spalten mit bis zu sechs Links untergebracht werden.

Der Footer des Auftritts wird von Usern aufgefunden, die auf der Seite bis zum Ende gescrollt haben, ohne das Gesuchte zu finden oder konkret nach den Pflichtangaben suchen. Im Footer werden den Nutzer*innen zusätzliche Links angeboten, damit sie die Seiten nicht verlassen. Dadurch wird der Service-Charakter der Seiten verbessert. Entsprechend ist es nicht sinnvoll im Footer die Hauptnavigation zu reproduzieren oder Content zu verlinken, der ohnehin auf oberster Ebene und in den Seiten gut auffindbar ist. Auch ist es nicht sinnvoll, den Bereich statisch zu halten und nur selten zu verändern. Vielmehr handelt es sich um einen lebendigen redaktionellen Bereich, der den Nutzer*innen tiefe Verlinkungen in den Auftritt mit für sie relevantem Content bietet. Guter Content für den Footer sind in diesem Sinne tiefe, aktuelle und nutzungsrelevante Links in den Auftritt.

Sidebar / Kontaktspalte

Das neue Grundlayout behält vorerst die Sidebar/Kontaktspalte als Marginalspalte, die im Desktop rechts neben dem Content-Bereich, in mobile unterhalb des Content-Bereichs angezeigt wird. Die Marginalspalte soll jedoch langfristig aus dem Design-System verschwinden und die Inhalte der Sidebar aufgrund verbesserter Nutzerführung und UX im Content-Bereich abgebildet werden. Dazu werden zukünftig die Module, die aktuell exklusiv für die Sidebar verfügbar sind, im Content-Bereich zugänglich gemacht. Über das konkrete Vorgehen wird die Landesredaktion zum gegebenen Zeitpunkt informieren.

Um die Sidebar/Kontaktspalte auf diese Umstellung vorzubereiten und auch den Content nutzer*innengerecht anzubieten, wird empfohlen, zunächst die Inhalte folgender Module aus der Zentralen Sidebar, den Sidebar-Includes bzw. der Kontaktspalte auf jeder Seite grundsätzlich an passender Stelle im Contentbereich unterzubringen:

  • Kalender-Include
  • Text/Bild-Modul
  • Twitter-Feed-Einbindung
  • Spezial VHS Kurssuche
  • Zweispaltige Liste (ehemalige Tabellenliste)

Oder andersherum: Bitte nutzen Sie für die Zentrale Sidebar, die Sidebar-Includes bzw. die Kontaktspalte auf jeder Seite ausschließlich die Module DienstleistungsDB Standortkontakt und Kontakt.

Neue Module

Mit dem Rebrush-Projekt neu geschaffene Imperia-Module können erst nach der Umstellung auf das neue Layout genutzt werden, da sie im alten Layout nicht angezeigt werden. Die Landesredaktion informiert, sobald die Module verfügbar und für das neue Layout nutzbar sind.

“Vierer-Kachel” der Startseite

Der Kachel-Opener ist eine neue Darstellung der Bühnen-Teaser Module. Um diese Darstellung zu aktivieren, wird es auf den Startseiten im Tab “Bühne” eine Option geben. Beim Kachel-Opener werden nur die ersten 4 aktiven Bühnen-Teaser Module angezeigt. Für diese Darstellung müssen mindestens 4 aktive Bühnen-Teaser Module vorhanden sein. Das erste Modul wird über die gesamte Contentbreite mit Bild, Überschrift und Text angezeigt, die folgenden drei Teaser zeigen nur Überschrift und Text. Es kann nur entweder eine Bühne oder einen Kachel-Opener geben. Die Nutzung von beiden Elementen gleichzeitig ist nicht möglich. Wir empfehlen Ihnen den Kachel-Opener privilegiert zu verwenden, weil es sich bei ihm gegenüber der Bühne um das zeitgemäßere Modul handelt. Auch zeugt der Kachel-Opener im Gegensatz zu Bühne von klaren redaktionellen Entscheidungen und einem berechenbaren Verhalten der angebotenen Seite, wie Sie von Nutzern erwartet werden.

Teaser (Multi)

Mit dem Teaser (Multi) Modul können mehrere Teaser nebeneinander in einer Höhe eingesetzt werden. Im Modul können einer, zwei, drei oder vier Teaser nebeneinander angezeigt werden. Die Teaser werden mit Blöcken im Modul eingesetzt, sind also in der Reihenfolge flexibel änderbar. Es sind alle bekannten Funktionen des Teasers pro Block enthalten (Überschrift, Link, Text, Bilder in Hoch- oder Querformat, Zeitsteuerung). Das komplette Modul erhält ebenfalls die Möglichkeit, eine Überschrift festzulegen und das komplette Modul per Zeitsteuerung ein- bzw. auszublenden. Das Flexmodul kann auf den Seitentypen Artikel- und Übersichtsseite genutzt werden.

Testimonial

Das Modul Testimonial kann genutzt werden, um ein Zitat oder eine Aussage einer Person hervorzuheben. Im Modul kann die hervorzuhebende Aussage zusammen mit der Quelle und einem großen Bild hinterlegt werden. Das Flexmodul ist auf den Seitentypen Artikel- und Übersichtsseite verfügbar. Das Modul hat einen illustrierenden und werblichen Charakter und soll zentrale Aussagen unterstützend zu einem Informativen Text hervorheben, um dem Nutzer Lust auf die Lektüre zu machen. Benutzen Sie das Modul bitte mit erhöhter redaktioneller Vorsicht und bedenken Sie immer, wie das Zitat und sein Zusammenhang mit dem Bild dem Nutzer erscheinen wird. Es kann hier sehr leicht zu Dissonanzen zwischen Bild und Zitat kommen – erhöhte redaktionelle Sorgfalt ist geboten.

Teaser Marketing

Beim Teaser Marketing kann eine Überschrift und ein Button-Text gepflegt werden. Das Flexmodul kann auf den Seitentypen Artikel- und Übersichtsseite genutzt werden. Es handelt sich hierbei um ein stark werbliches Modul, dass beim User eine schnelle Interaktion (Klick auf den Button) auslösen soll. Eingesetzt wird es um den Nutzer sicher zum primären Interaktionsziel einer Seite zu lenken. Der Einsatz mehrerer solcher Module ist diesem Ziel stark abträglich: Er lässt die Seite unentschlossen wirken und verwirrt den Nutzer, da er nicht entscheiden kann, welche Aktion von ihm gefordert ist. Denken Sie bitte an Ihnen bekannte Shopseiten: Buttons werden für den Kauf als primäres Interaktionsziel der Seiten Angeboten – nicht für das Öffnen der Produktbeschreibung oder weitere Navigationen, hierzu dienen Links. Die Seiten wirken klar, der Nutzer ist gut orientiert. Auch Sie sollten sich vor dem Einsatz eines entsprechenden Teasers die Frage stellen, was die eine wichtige Interaktion der Seite ist, auf die der Nutzer gelenkt werden soll. Lässt sich diese nicht konstruieren, ist es in den meisten Fällen günstiger den Nutzer nicht zu verwirren und einen einfachen Link anzubieten.

Icon-Liste

Mit dem Modul Icon-Liste kann eine verlinkte Liste mit vorangestelltem Icon erzeugt werden. Bei den Icons steht es ein vordefiniertes Set zur Wahl. Wenn dort nicht das passende Icon angeboten wird, kann auch auf der Webseite von Fontawesome ein anderes gewählt werden. Hierbei ist die Free-Version von Fontawesome 5 einschlägig. Da die Listenpunkte mit Hilfe von Blöcken angelegt werden, sind sie nachträglich in der Reihenfolge verschiebbar. Das Flexmodul kann auf den Seitentypen Artikel und Übersichtsseite genutzt werden. Denken Sie bitte daran, dass es sich bei Icons um Schriften handelt. Sie dienen nicht als optischer Schmuck sondern sind starke ikonische Schriftkommunikationen, die dem Nutzer bei der Orientierung helfen. Sind diese Kommunikationen nicht exakt, führen Sie zur Desorientierung der Nutzenden. Als vergleich können Ihnen Beschilderungen und Leitsysteme an Flughäfen dienen.