procedo-personalservice.de 
Formate-test Besondere Inhaltselemente
BESONDERE INHALTSELEMENTE
AKKORDEON [alles zugeklappt]
Für was sollte ich so ein Accordeon benutzen?
Ein Accordeon sollte nur für Inhalte verwendet werden, bei denen User nur eines oder einige der Elemente überhaupt aufklappen möchten. Das klassische Beispiel sind FAQs: Man liest nur die Antworten auf die Fragen, die man selber hat und sieht sich die anderen Antworten gar nicht erst an.
Ein Accordeon sollte niemals für wichtige Informationen verwendet werden, die User unbedingt bekommen sollen. Die Klickbarriere verhindert sehr oft, dass User das Accordeon überhaupt aufklappen und dann haben sie ggf. eine wichtige Info gar nicht wahrgenommen.
Kann ich in Accordeons auch andere Elemente einbauen?
Ein Accordeonelement kann grundsätzlich nur die Dinge darstellen die mit dem CK-Editor eingebaut werden können. Adressendatensätze oder andere Inhaltselemente können im Accordeon nicht verbaut werden.
Was man aber tun kann, ist z. B. kleine Bilder oder Icons in einem Accordeon einzubauen.
Ich möchte, dass die Seite nicht so lang ist und ...
daher würde ich gerne ganz viel Inhalt in ein Akkordeon packen!
Das ist keine gute Idee. Inhalte in Akkordeons sind nur durch bewusstes Klicken auf das Element erreichbar. Diese Klickbarriere hält viele User davon ab, den Inhalt überhaupt zu sehen. Daher sollten Akkordeons nicht für wichtige Informationen verwendet werden.
In der heutigen Zeit sind es User gewohnt, dass Webseiten gescrollt werden (vgl. gerade soziale Netzwerke wie Facebook/Meta, Instagram) und sie sind gewohnt, dass alle relevanten Informationen zu einem Thema auf einer Seite zu finden sind. Es ist schlicht wahrscheinlicher, dass User weiterscrollen und den Text und die Bilder auf einer Seite betrachten. Es ist weniger wahrscheinlich, dass User sich wichtige Informationen „erklicken“, weil sich die Informationen in einem Akkordeon verbergen.
Alle Auftritte der neuen Designsystematik berücksichtigen dieses Userverhalten, das unter anderem durch die sogenannten „infinity scrollpools" der Social-Media-Auftritte befördert wurde.
AKKORDEON [alles aufgeklappt]
Für was sollte ich so ein Accordeon benutzen?
Ein Accordeon sollte nur für Inhalte verwendet werden, bei denen User nur eines oder einige der Elemente überhaupt aufklappen möchten. Das klassische Beispiel sind FAQs: Man liest nur die Antworten auf die Fragen, die man selber hat und sieht sich die anderen Antworten gar nicht erst an.
Ein Accordeon sollte niemals für wichtige Informationen verwendet werden, die User unbedingt bekommen sollen. Die Klickbarriere verhindert sehr oft, dass User das Accordeon überhaupt aufklappen und dann haben sie ggf. eine wichtige Info gar nicht wahrgenommen.
Kann ich in Accordeons auch andere Elemente einbauen?
Ein Accordeonelement kann grundsätzlich nur die Dinge darstellen die mit dem CK-Editor eingebaut werden können. Adressendatensätze oder andere Inhaltselemente können im Accordeon nicht verbaut werden.
Was man aber tun kann, ist z. B. kleine Bilder oder Icons in einem Accordeon einzubauen.
Ich möchte, dass die Seite nicht so lang ist und ...
daher würde ich gerne ganz viel Inhalt in ein Akkordeon packen!
Das ist keine gute Idee. Inhalte in Akkordeons sind nur durch bewusstes Klicken auf das Element erreichbar. Diese Klickbarriere hält viele User davon ab, den Inhalt überhaupt zu sehen. Daher sollten Akkordeons nicht für wichtige Informationen verwendet werden.
In der heutigen Zeit sind es User gewohnt, dass Webseiten gescrollt werden (vgl. gerade soziale Netzwerke wie Facebook/Meta, Instagram) und sie sind gewohnt, dass alle relevanten Informationen zu einem Thema auf einer Seite zu finden sind. Es ist schlicht wahrscheinlicher, dass User weiterscrollen und den Text und die Bilder auf einer Seite betrachten. Es ist weniger wahrscheinlich, dass User sich wichtige Informationen „erklicken“, weil sich die Informationen in einem Akkordeon verbergen.
Alle Auftritte der neuen Designsystematik berücksichtigen dieses Userverhalten, das unter anderem durch die sogenannten „infinity scrollpools" der Social-Media-Auftritte befördert wurde.
TEXT MIT FORMBILD (GROß)
Dies ist ein besonders aufmerksamkeitsstarkes Element. Es ist hervorragend geeignet, um auf einen sehr wichtigen Inhalt hinzuweisen, der an anderer Stelle Ihres Auftritts erscheint und sonst vielleicht übersehen würde. Bitte verwenden Sie dieses Element ausschließlich mit einem entsprechend zugeschnittenem Formbild (RIDU). Wenn sie ein rechteckig zugeschnittenes Bild haben, verwenden Sie stattdessen ein „Fließtext mit Bild“-Element. Versuchen Sie darauf zu achten, dass der Text + Linkbutton nicht länger wird, als das Formbild hoch ist.
Das Element „Text mit Formbild (groß)“ ist kein Fließtextelement, sondern ein Hinweiselement und sollte daher einen Anreißertext enthalten, der auf weiterführende Informationen an anderer Stelle hinweist. Diese Informationen können dann mit einem Linkbutton erreicht werden.
Der obige Linkbutton ist zwar optional, wenn es aber nichts zu verlinken gibt, sollten Sie überprüfen, ob Sie nicht ein anderes Element verwenden sollten (z. B. Fließtext mit Bild oder einfach normalen Text).
TEXT MIT FORMBILD (KLEIN)
Diese Variante nimmt ein kleineres Formbild an als die obenstehende Bildinfobox. Es ist immer noch ein sehr auffälliges Element und sollte mit Bedacht eingesetzt werden. Auch dieses Element ist nicht für Fließtext und sehr lange Texte geeignet.
In allen Fällen ist das Formbild bei einer Bildinfobox immer auf der rechten Seite neben dem Text. Das hat gestalterische Gründe, da die Form der Formbilder immer links unregelmäßig und rechts regelmäßig ist. Abweichungen davon sind nicht vorgesehen.
Es ist in allen Bildinfoboxen immer möglich, mehrere Textabsätze zu erzeugen. Bitte vermeiden Sie aber unbedingt sehr kurze Textabsätze (ggf. besser eine Aufzählung/Liste verwenden). Gestalten Sie den Text + Linkbutton unbedingt so, dass der Text + Linkbutton nicht länger wird als das Formbild hoch ist.
Vermeiden Sie es bitte auch, dass der Text anfängt, unterhalb des Formbildes weiterzulaufen.
FLEXIBLE BILDER / ERKLÄRBOXEN
Flexible Bilder mit Icons
Bitte keine Fotos oder Grafiken verwenden. Durch das kleine Format sind Symbole das Mittel der Wahl.
Mehr erfahren
Verlinkte Seiten
Zusammen mit den Icons kann der User schnell zu bestimmten wichtigen Inhalten geführt werden.
Mehr erfahrenLogoleiste
Das Logoleisten-Element ist zur Darstellung zusammengehöriger Logos gedacht – bspw. im Zusammenhang mit Förderungen. Das Logoleisten-Element ist dabei für bis zu vier (4) Logos ausgerichtet (bitte NICHT mit 5 oder 6 Logos nutzen, das kann schiefgehen)!
Die Logos müssen alle auf dieselbe Höhe (bspw. 100px) zugeschnitten sein und sollten so zugeschnitten sein, dass links und rechts vom eigentlichen Logo noch Weißraum (etwa 17px) übrig bleibt.
Jedes Logo einer Logoleiste braucht eine Verlinkung.
Jedes Logo braucht in der Dateiliste natürlich auch Metadaten. Im Feld „Alternativer Text“ sollte in Folgendes stehen: „Logo: Bayerisches Amt für Seelsorge“ im Feld “Titel” sollte “Bayerisches Amt für Seelsorge” stehen.
LOGOLEISTE / FÖRDERER
Hier wird der Förderspruch eingetragen, der bei manchen geförderten Projekten vorgeschrieben ist.
ZAHLEN UND FAKTEN
Elemente
sind das Maximum für dieses Element
Zahlen maximal
In der Überschrift eintragen
Zeichen
Maximal in die Zusatzzeile schreiben
Buchstaben
höchstens im Textkörper – ohne Leerzeichen gezählt.
Störer
In der Textbox kann ein Text eingepflegt werden, der weitere Informationen liefert. Die Verlinkung kann mit einem sogenannten Trackingpixel versehen werden, um herauszufinden, wie viele User das angeklickt haben.
Hier der Call to action!Störer (grau)
Wie schon im internen Störer ist der Text hier im externen Störer zur näheren Erläuterung gedacht.
Schauen Sie mal die bfz.de anVorname Nachname
„Hier steht das Zitat in Anführungszeichen. Bitte keinen Roman hier zitieren, sondern maximal einen oder zwei Sätze. Wenn längere Redebeiträge abgebildet werden sollen, bitte Voices verwenden.“
Position/Aufgabenbereich
Voices
Das Voices Element gibt es in drei verschiedenen Ausprägungen. Es ist dazu geeignet längere Zitate und Ausführungen, die jeweils einer bestimmte Person zugeordnet werden, mit Bild anzuzeigen. Wählen Sie zwischen den Darstellungsoptionen „Sprechblasen“, „linksbündig“ und „alternierend“ – je nachdem, was für Ihren Zweck am besten geeignet ist.
Das Element ist für Zitate/Redebeiträge vorgesehen und nicht für Ankündigungen von irgendwelchen Terminen oder Veranstaltungen.
VOICES SPRECHBLASEN
Ich bin ja der Meinung, dass so ein Voices-Element ziemlich viel Aufmerksamkeit auf deiner Webseite erzeugt. Man muss wirklich blind sein, um es zu übersehen.
Da hast du völlig recht Marina. Weil das so groß und nicht zu übersehen ist, ist es prima geeignet, um zum Beispiel Teilnehmerstimmen darzustellen.
VOICES LINKSBÜNDIG
Das linksbündige Voices-Element ist zum Beispiel für Teilnehmerstimmen gut geeignet. Man kann auch einen längeren Text bequem unterbringen. Durch die klare Gliederung und die Abstände zwischen den einzelnen Stimmen bleibt alles trotzdem gut lesbar. Außerdem ist es schön, mal ein paar Gesichter zu sehen. Das Element kann nicht ohne Bild verwendet werden. Für Zitate, die von Personen kommen, die kein Foto auf die Webseite stellen lassen wollen, kann man ein Dummy-Zitatbild verwenden.
Das Foto des Zitatgebers muss als PNG mit transparentem Hintergrund abgespeichert werden (in RIDU also als PNG) und dem vorgegebenen Voices-Bildformat entsprechen. Denken Sie daran, für jedes Bild die Bildmetadaten einzupflegen, bevor Sie das Bild verwenden. Denken Sie generell bei allen Bildern daran, deren Metadaten im Modul „Dateiliste“ zu pflegen. Am besten gleich nach dem Hochladen des Bildes.
VOICES ALTERNIEREND
Mit dem alternierenden Voices-Element kann man sehr gut „kontrastierende“ Meinungen darstellen oder eine Darstellung erzeugen, die an ein Interview erinnert. Auch hier gelten alle Regeln, die auch für die anderen Voices-Darstellungen gelten.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Features
Das Features-Containerelement besteht aus einem Container und darin einzelnen Elementen, die nach Bedarf zusammengestellt werden können. Jedes dieser Elemente kann entweder ein Link auf eine Seite, ein Bildungsprodukt oder eine Veranstaltung sein.
Mit dem Features-Container können Sie besonders hervorzuhebende Inhalte, Bildungsprodukte oder Veranstaltungen prominent darstellen; allerdings höchstens drei (3).
Der Einsatz von Teaserbildern ist zwar optional. Wenn Sie sich jedoch für eine Darstellung mit Bildern entscheiden, dürfen Sie nicht Elemente mit und ohne Bildern mischen. Die Bilder werden im Element festgelegt und müssen in der richtigen Größe ((News-)Teaser-Größe) hochgeladen werden.
Verwenden Sie den Container „features“ und befüllen Sie diesen mit höchstens drei (3) Elementen vom Typ „feature“ oder „bookable feature“.
Gleichwohl die Elemente gemischt werden können – bspw. Elemente die auf Inhaltsseiten verlinken mit Elementen die auf Bildungsprodukte verlinken –, beachten Sie bitte die Sinnhaftigkeit mancher Kombinationen!
- Es dürfen keine anderen Layouts als das Standardlayout „TXT normal“ eingestellt werden.
- Verwenden Sie keine Bilder von Personen, die keine Zustimmung zur Verwendung ihres Bildes gegeben haben.
- Verwenden Sie keine Bilder, deren Copyright Sie nicht besitzen.
- Verwenden Sie keine Grafiken.
- Verwenden Sie Logos nur im Ausnahmefall und nur in korrekt aufbereiteter Form (achten Sie u. a. auf die korrekte Farbigkeit der Logos und den Abstand der Logofigur zum Rand des Kastens; auf Weißraum achten).
FEATURES ÜBERSCHRIFT
Feature Event A
Das ist eine Verlinkung zu einem Angebot.
Featured Event B
Das ist eine Verlinkung zu einer Internen Seite
Featured Event C
Das ist eine Verlinkung zu einer externen Seite. Das kann man zwar machen, es ist aber nicht besonders günstig, da der User es oft nicht gut verstehen kann. Wenn die Zielgruppe dafür ausgelegt ist, go ahead.
Flip Cards
Das Container-Element Flipcards ist für die Darstellung vieler Logos oder Icons gedacht (z. B. zur Darstellung von Referenzen oder Kooperationspartnern).
Die Darstellung ist nicht veränderbar. Jede Flipcard braucht immer Inhalt für die Vorderseite (speziell zugeschnittenes Logo/Icon) und für die Rückseite.
Die eingesetzten Logos müssen auf weißem oder transparenten Hintergrund stehen. Die Größe eines Flipcard-Bildes ist 215x215px. Die Logos selbst müssen darauf (wegen des nötigen Weißraums) mittig und mit einer Größe von etwa 145x145px gesetzt sein.
Auf der Rückseite kann jede Flipcard eine Überschrift (muss-Feld), eine Zusatzzeile (kann-Feld) und einen Link (kann-Feld) enthalten.
- Verwenden Sie das Element, um viele Logos darzustellen, die keiner Gewichtung bedürfen und die thematisch zusammengehörig sind.
- Verwenden Sie das Element nicht, um weniger als fünf (5) Elemente darzustellen.
- Verwenden Sie das Element nicht, wenn sie keine Informationen für die Rückseite der Flipcards haben.
FLIP CARDS ÜBERSCHRIFT
Jobangebote
Hinspringen
Ihre Vorteile
Hinspringen
Weiterbildung
Hinspringen
Personalanfragen
Unsere Leistungen
Socialtree
Das Socialtree-Element ist ein Container-Element mit dem laufende Kampagnen auf sozialen Netzwerken auf Ihrem Webauftritt gespiegelt werden können. Wenn Sie bspw. eine Kampagne auf Instagram haben, können Sie diese Kampagne mit einem Eintrag im Socialtree-Element per Bild (440*440px exakt) und Verlinkung auf das entsprechende Instagram-Posting abbilden.
Der Socialtree-Container ist letztlich ein Flipcards-Container mit einem speziellen Layout (Reiter „Erscheinungsbild“, Drop-Down-Menü „Layout“ und darin die Option „Socialtree“) braucht dann ein Überschrift-Element und anschließend einzelne Socialtree-Elemente für die Darstellung einzelner Kampagnen.
Die einzelnen Socialtree-Elemente bilden dann jeweils eine Kampagne ab. Ein einzelnes Socialtree-Element im Container besteht dann aus einer kurzen Überschrift, ggf. einer Zusatzzeile und einem 440*440px großen Bild. Im besten Fall ist das dann auch das Bild, das auch für die Kampagne auf dem sozialen Netzwerk verwendet wird.
SOCIALTREE ÜBERSCHRIFT
Presse
Der Presse-Container nimmt neben einer Überschrift einzelne Presse-Elemente auf. Der Presse-Container, daher sein Name, wurde anfangs speziell für die Darstellung von Pressemitteilungen entwickelt.
Neben Pressemitteilungen können damit aber auch Veranstaltungshinweise dargestellt werden.
PRESSE ÜBERSCHRIFT
Pressemitteilung test
Presse-Elemente können insbesondere verwendet werden, um Pressemittelungen auf der Seite anzuzeigen. Dazu wird im Textfeld ein kurzer Anreißertext eingetragen und das Datum der Pressemittelung im Feld „Datum“ eingepflegt. Die folgenden Verlinkungen können entweder auf eine Seite gesetzt werden, die die vollständige Pressemitteilung enthält, auf einen Download für ein barrierefreies PDF oder ein Pressefoto.
Wichtige Veranstaltung
Das Element kann trotz seines Namens natürlich auch für andere Zwecke eingesetzt werden. Solange für den Inhalt ein bestimmtes Datum wichtig ist, ist das Presse-Element das Mittel der Wahl.
Hier z. B. zur Ankündigung einer Veranstaltung.
Zeitstrahl
Das Zeitstrahl-Containerelement kann zur Darstellung von zeitlichen Abläufen verwendet werden. Beispielsweise die Historie eines Projekts oder einer Gesellschaft.
ZEITSTRAHL ÜBERSCHRIFT
Zeitstrahlelement 1
Ein Zeitstrahl wird verwendet, um zeitlich aufeinander folgende Ereignisse bzw. Abläufe darzustellen. Jedes Zeitstrahl-Element im Zeitstrahl-Container stellt einen Zeitpunkt auf dem Strahl dar und kann eine Überschrift, einen Fließtext und ein kleines Bild (vorzugsweise ein Icon – maximal 100px breit) beinhalten. Links sollten in einem Zeitstrahl nicht gesetzt werden. Daher kann auch der Editor hier nicht verwendet werden, um Verlinkungen einzubauen.
Zeitstrahlelement 2
Es können auch Textteile mit Betonung (<strong>) oder mit starker Betonung (<em>) eingestellt werden. Ein Bild/Icon muss nicht verwendet werden. Wenn jedoch ein Icon verwendet wird, dann müssen zwingend dessen Metadaten gepflegt werden (Metadaten für Seiten, News-Artikel, Bilder und PDF-Dateien müssen generell immer gepflegt werden, wenn Ihr Auftritt barrierefrei sein soll, in Suchergebnissen weit oben platziert sein soll und generell gut gefunden werden soll).
Zeitstrahlelement 3
Es ist wichtig, die Überschriftenhierarchie in diesem Zeitstrahl-Container strikt einzuhalten. Wenn die Überschrift des Zeitstrahl-Containers eine h2 ist, müssen die einzelnen Zeitstrahl-Punkt-Elemente jeweils eine h3 bekommen. Wenn es keine Überschrift über dem Container gibt, dann verwenden Sie eine h2 für diese Elemente. Für SEO und die Barrierefreiheit ist es wichtig, dass die semantische Logik des Seiteninhalts bzw. des daraus resultierenden HTML-Dokuments stets eingehalten ist.
Zeitstrahlelement 4
Bilder werden je nach Position des Containers gesetzt und die Positionierung ist nicht beeinflussbar. Auch sollten unbedingt Bildunterschriften vermieden werden. Bildunterschriften sind zu lang und zu groß für die sehr kleinen Bildchen (wie bereits erwähnt, sind es im besten Fall Icons, die nicht breiter als 100px sind) .
Achten Sie außerdem darauf, dass neben einem Bild genug Text steht – eine einzelne Zeile Text mit Bild sieht unvorteilhaft aus.