Post on 22-Sep-2020
transcript
Bearbeiter Stand
Stefan Schabenberger, Tallence GmbH 31. August 2015
1
Inhalt
Inhalt
1.Eine kurze Einführung
2.Content planen
Kriterien zur Veröffentlichung eines Inhaltes
Wie man Texte aufbaut
Dachzeilen
Überschriften
Vorlauftexte
Mengentexte
Teasertexte
Wie man passend für die Zielgruppen schreibt
3. Content überarbeiten
Wie der existierende Inhalt sinnvoll überarbeitet und strukturiert wird
Wann lösche ich bestehende Inhalte?
Wie fasse ich sinnvoll zusammen?
Contentüberarbeitung anhand von Beispielen URL-
Vorgaben
Suchmaschinenoptimierung, intern und extern
Suche über Google & Co.
Suche auf der IHK Website
4. Seitenaufbau
Die Hauptspalte
Die Marginalspalte
Bilder
5. Navigationskonzept
Zielgruppeneinstiege
Suche
Hauptnavigation
Servicenavigation
Footer
6. Templates
Mögliche Verlinkungen der Templates
Startseite
Startseite für eingeloggte Mitglieder (Extranetz)
Mash-Up Seite
Themenübersichtsseite
Die Artikelübersichtsseite
Die Artikelseite
Die Veranstaltungsdetailseite
Veranstaltungsanmeldung
Veranstaltungssuche
2
Suchergebnisseite Volltextsuche
A-Z Liste
Dokumentenliste
Login-Seite
Umfrageseite
Newsletter
Formularseite
Die Werbung
7.Module
Teaser Karussell mit Bild
Teaser Veranstaltungsliste
Teaser Headline-Text
Teaser Bild-Headline-Text
Teaser Headline-Link
Teaser Bild-Headline-Link
Bild- / Videomodul
Bildergalerie
Kontaktmodul
Veranstaltungsmodul
Ankerlinks (Sprungmarken)
Ausklappliste
Linkliste
Linkliste mit Beschreibung Download-
Liste
Content-Tab Modul
Highchart-Grafik
Tabelle
iFrame
8.Impressum
3
1. Eine kurze Einführung
Im Zuge des Relaunches der IHK24-Auftritte macht die Überarbeitung der bestehenden Inhalte und
Seitenstrukturen einen wichtigen Teil des neuen Konzeptes aus. Der hier verfasste Content-Styleguide
dient dabei als Leitfaden für eine effiziente und benutzerfreundliche Überarbeitung der Inhalte sowie für die
Verwendung der neuen Seitentemplates und Module.
Zusammen mit dem neuen Design und dem unter Usability-Gesichtspunkten entwickelten Konzept führt
ein aufgeräumter und strukturierter Content zu einem service- und kundenfreundlichen Informationsportal,
auf das der User gerne wiederkommt.
Dabei ist dieser Content-Styleguide wie auch der zukünftige Internetauftritt der IHK24 kein
festgeschriebenes, sondern ein lebendiges Medium. Überarbeitungen, Anpassungen und Erweiterungen
sind ebenso wichtig wie erforderlich, um mit der strukturellen und technologischen Entwicklung im Netz
Schritt zu halten.
4
2. Content planen
Kriterien zur Veröffentlichung eines Inhaltes
Wann ist eine Veröffentlichung auf IHK24 sinnvoll und wie lange muss die Information zur
Verfügung stehen.
Eine Veröffentlichung auf der Internetseite der Industrie- und Handelskammer ist dann sinnvoll, wenn der
Inhalt für die Zielgruppen relevant ist, aktuell oder aufgrund des gesetzlichen Auftrages der IHKs
veröffentlicht werden muss. Dabei muss für die Zielgruppenrelevanz und die Aktualität gewährleistet sein,
dass die Informationen einzig für die Kunden und Mitglieder der Industrie- und Handelskammern bestimmt
sind. Informationen aus eigenem Interesse, dem Interesse von bspw. Kollegen, Vorgesetzten oder
Hauptgeschäftsführern sowie allgemeine Informationen aus den Medien sind nicht zu veröffentlichen,
wenn sie keine eindeutige Relevanz für die Zielgruppen der IHKs haben.
Insgesamt gilt dabei für alle Veröffentlichungen auf den IHK24-Seiten: Weniger ist mehr.
Beispiel für die Zielgruppenrelevanz:
Zu der Einführung des Mindestlohnes in Deutschland am 01. Januar 2015 gab es sehr viele Informationen
und Veröffentlichungen von unterschiedlichen Quellen (Bundesregierung, private Institutionen, Presse).
Die Aufgabe für die IHK24-Auftritte ist es nicht, alle diese Informationen zu sammeln und im eigenen
Auftritt zu veröffentlichen. Dies beinhaltet keinen Service für den User und wird von Seiten wie Google
oder Spiegel Online weitaus besser und effizienter erledigt.
Der Service besteht in der Auswertung der Informationen für die Zielgruppen der IHKs. Dazu gehört die
Zusammenfassung der wichtigsten Fakten zum Thema „Mindestlohn“, die Aufbereitung der Informationen,
die für die Kunden von besonderer Bedeutung sind (bspw. die Ausnahmeregelungen für bestimmte
Branchen oder bei bestimmten Arbeitnehmern) und ggf. die Entwicklung und Bereitstellung von
Handlungsempfehlungen.
Zusätzlich können weitere, detaillierte Informationen zu dem Thema in Form von Gesetzestexten oder
Broschüren über Verlinkungen in der Seitenspalte angeboten werden.
Kriterien für die Aktualität:
● Neuigkeiten sind nach einem Monat nicht mehr aktuell und sollten gelöscht werden.
● Veranstaltungen sind nur solange aktuell, wie sie stattfinden.
● Informationen sind solange relevant, wie sie aufgerufen werden: Bei weniger als 20 Aufrufen in
den letzten 12 Monaten sollten diese gelöscht werden.
● Eine Ankündigung zu einer Gesetzesänderung ist nur solange aktuell, solange die Änderung nicht
in Kraft tritt. Danach sollte sie gelöscht werden.
● Ein Gesetz ist solange aktuell wie es gültig ist. Es ist darauf zu achten, keine zeitlichen
Definitionen wie „neu“, „jetzt“, „am …“, etc.. zu verwenden.
5
Wie man Texte aufbaut
Dachzeilen
Dachzeilen können helfen, Inhalte zu strukturieren. Sie können aber auch schnell redundant werden und
die Seite inhaltlich und optisch überfrachten, deshalb ist ihr Einsatz auf IHK24 optional. Die optionale
Aktivierung betrifft das ganze Angebot der jeweiligen IHK und kann zum Beispiel nicht für einen Bereich
verwendet werden und für einen anderen Bereich nicht.
Regeln:
● Die Dachzeile hilft, einen Artikel thematisch einzuordnen, wenn dies aus dem
Gesamtzusammenhang nicht ersichtlich wird.
● Wenn eine IHK sich für den Einsatz von Dachzeilen entscheidet, muss jede Dachzeile redaktionell
und inhaltlich sinnvoll befüllt werden.
● Die Dachzeile darf nie länger als die Überschrift sein.
Überschriften
Überschriften geben das Thema einer Strukturseite, den Inhalt eines Artikels oder einer Veranstaltung
wider und tauchen als Navigationspunkte in der Seitennavigation und als Ergebnisse der
Suchergebnisseiten auf. Die Überschrift ist einer der wichtigsten Textbausteine und entscheidet darüber,
ob der User weiterliest oder nicht.
Regeln:
● Überschriften sollen nicht länger als 2 Zeilen sein (ca. 45 Zeichen). Wenn eine Überschrift länger
ist, muss sie gekürzt werden. Auf Artikelseiten oder Veranstaltungsseiten kann die
Zwischenüberschrift (h2) als Subline für weitere Informationen genutzt werden. Dies ist besonders
wichtig, wenn es um die Überschrift einer Veranstaltung geht, da diese ebenfalls im
Veranstaltungsmodul und in der Veranstaltungssuche mit ausgespielt werden.
● Überschriften müssen präzise, einfach und schnell den Inhalt von Artikeln, Dokumenten,
Strukturseiten oder Veranstaltungen widergeben.
● Überschriften, die in der Navigation verwendet werden, sollten einzeilig sein und aus ca. 25
Zeichen bestehen.
● In der Überschrift sind keine Abkürzungen, Paragrafen oder Klammern erlaubt.
Vorlauftexte
Vorlauftexte (h3) können auf Mash-Up-, Themenübersichts-, Artikelübersichtsseiten, Dokumentenlisten
und Artikelseiten eingesetzt werden und geben kurze Beschreibung des Inhaltes wieder oder dienen der
Einleitung. Der Vorlauftext ist in der Regel auch der Text, der in einem Teaser angezeigt wird.
Regeln:
● Der Vorlauftext sollte nicht mehr als 4 Zeilen haben. Das sind ca. 260 Zeichen.
6
Mengentexte
Mengentexte kommen auf den meisten Contentseiten wie bspw. Artikeln und Veranstaltungsseiten vor.
Daher ist es umso wichtiger, dass diese Seiten übersichtlich, klar und logisch aufgebaut sind und der User
selbst bei langen Texten nicht die Lust am Weiterlesen verliert. Hierzu gibt es mehrere unterschiedliche
Module, die dabei helfen, Inhalte übersichtlich aufzubereiten. (Mehr zu den einzelnen Modulen findet sich
im Kapitel „Module“).
Regeln:
● Textwüsten sind zu vermeiden. Stattdessen sollten auflockernde Elemente wie Absätze, Bilder im
Text und Einschübe verwendet werden.
● Ab einer Länge von 30 Zeilen sollten Texte mindestens eine Zwischenüberschrift haben.
● Lange Texte sollten mit einem Inhaltsverzeichnis beginnen, welches mit Sprungmarken unterlegt
ist. So kann der Nutzer direkt an die gewünschte Textstelle springen.
● Verlinkte Begriffe im Text sollten eindeutig den verlinkten Inhalt beschreiben und dürfen nur auf
interne Seite verlinken.
● Keine Mini-Texte anlegen, die auf ein PDF hinweisen. Stattdessen das PDF in einen Artikel
umschreiben.
● Highchart-Grafiken sind Tabellen vorzuziehen.
● Listen mit Detailinformationen sind am Ende zu platzieren.
Teasertexte
Der Teaser soll das Interesse des Lesers wecken und das entsprechende Thema kurz anreißen
(„anteasern“). Dabei ist es üblich, die Dachzeile (optional), Überschrift und den Vorlauftext des Artikels für
den Teaser zu verwenden.
Regeln:
● Lange Überschriften sind für den Leser auf den ersten Blick deutlich schwerer zu erfassen als
kurze Überschriften. Überschriften sollten deshalb maximal nur zwei Zeilen haben. Das sind ca. 45
Zeichen.
● Ist eine Überschrift länger, muss sie für den Teaser gekürzt werden. Das gilt auch für
Veranstaltungsteaser.
● Kontext-Links sind weiterführende Links zu ähnlichen Themen. Es ist max. ein Kontext-Link pro
Teaser möglich. Kontext-Links Überschriften sollten ebenfalls max. zwei Zeilen lang sein.
● Die Länge der Teaser-Copy sollte bei 6- und 8-spaltigen Teasern nicht mehr als 6 Zeilen und bei
4-spaltigen Teasern nicht mehr als 8 Zeilen haben. Das sind ca. 345 Zeichen.
7
Wie man passend für die Zielgruppen schreibt
● IHK-interne Begriffe durch Begriffe ersetzen, die die Leser verstehen oder entsprechend erweitern.
Das betrifft auch Begriffe des DIHK-Marketingkonzepts. Der Begriff „Standortpolitik“ beispielsweise
ist nicht selbsterklärend und wird von der Mehrzahl der Zielgruppen nicht verstanden.
● Oft ist aus Überschrift, Indextext und Textanfang nicht ersichtlich, wer die angesprochene
Zielgruppe ist. Es ist hilfreich, wenn im Teasertext kurz erwähnt wird, für welche Personengruppe
der Text relevant ist. Dabei sollte die Zielgruppe so detailliert wie möglich beschrieben werden (z.
B. GmbH-Geschäftsführer).
● Alle Texte auf den IHK-Webseiten müssen eine einheitliche und einfache Sprache haben. Dabei
muss jeder Fachbereich beim Erstellen der Texte davon ausgehen, dass der Leser keine
Vorkenntnisse hat. Notwendige Fachbegriffe und Abkürzungen müssen im Text erläutert werden.
● Die Überschrift eines Teasers muß direkt und schnell das Thema kommunizieren. Dabei darf
gerne abgekürzt werden, um auf der eigentlichen Artikelseite die ausführlichere Version der
Überschrift zu verwenden. Abkürzungen und Paragrafennennungen dürfen im Teaser-Titel nicht
auftauchen.
8
3. Content überarbeiten
Wie der existierende Inhalt sinnvoll überarbeitet und strukturiert wird
Für die neue Contentstruktur haben wir eine Einteilung in 6 frei definierbare Hauptbereiche
(Hauptnavigation). Diese müssen in der Priorisierung, im Wording und in der Einteilung der Unterthemen
nach Userinteressen ausgerichtet sein. Dabei ist zu beachten, dass wir gegenüber dem User immer von
Themen sprechen und nicht von Geschäftsbereichen.
Regeln:
● Es gibt maximal 3 vorgegebene Metanavigationspunkte (Sprache, Kontakt, Login), maximal 5 frei
definierbare Servicenavigationspunkte und maximal 6 frei definierbare Hauptnavigationspunkte
● Die Tiefe der neuen Struktur beinhaltet max. 6 Ebenen (inklusive der Startseite) und besteht aus
einer stringenten und für den User nachvollziehbaren Gliederung der Unterthemen
● Eine konsistente Seitenstruktur hilft dem User, intuitiv zu erlernen, wie die Seite aufgebaut ist: Der
Mix aus Struktur- und Contentseiten auf einer Navigationsebene ist zu vermeiden
● Inhalte müssen sinnvoll zusammengefasst werden
● Inhalte müssen eine aktuelle und inhaltliche Relevanz haben
● Die Benennung der Inhalte sollte einfach und verständlich sein
● Vermeidung von Downloadobjekten oder externen Links als Navigationspunkte
Downloadobjekte in der Navigation sind 6 Monate nach Relaunch nicht mehr möglich!
● Bilder haben einen inhaltlichen Bezug
● Keine inhaltlichen Doppelungen in einem Pfad
● Teaser sind immer mit Artikeln verlinkt
● Ständige Überwachung des Contents
Für die Überarbeitung des existierenden Contents hat sich folgendes Vorgehen bewährt:
1. Aufsetzen der bestehen Seitenstruktur eines Bereiches in Form einer Sitemap (bspw. mithilfe von
slickplan.com oder MS Visio).
2. Den einzelnen Seiten den Seitentyp (Strukturseiten, Contentseiten, Formularseiten) zuordnen.
3. Erste Notizen über etwaige Auffälligkeiten, Doppellungen, Wordings und Zusammenlegungen
machen.
4. Eine zweite Version der festgehaltenen Seitenstruktur als Überarbeitungsgrundlage speichern.
5. Mit der Neustrukturierung beginnen: Löschen, Zusammenlegen und sinnvolles Ordnen der Inhalte.
Dabei nach Userinteressen vorgehen.
6. Überarbeitete Seitenstruktur als Blaupause für die neue Gliederung zum Relaunch verwenden.
7. Überarbeitung der bestehenden Inhalte auf den einzelnen Seiten mithilfe der neuen Module.
Wann lösche ich bestehende Inhalte?
In vielen Fällen macht die Löschung bestehender Inhalte Sinn, da die bestehenden IHK24-Auftritte
inhaltlich und strukturell überfrachtet sind und den User überfordern.
Regeln:
● Informationen, die für die Zielgruppen keine inhaltliche Relevanz haben, können gelöscht werden.
● Informationen, die keine aktuelle Relevanz haben und veraltet sind, können gelöscht werden.
● Informationen mit weniger als 20 Aufrufen in den letzten 12 Monaten, können gelöscht werden.
● Informationen, die mehrfach in einem Bereich verortet sind, können gelöscht werden.
9
● Archive sind zu vermeiden. Wenn nicht anders möglich, dann deutlich als Archiv zu benennen.
Wie fasse ich sinnvoll zusammen?
Viele Informationen können übersichtlicher aufbereitet werden, indem sie inhaltlich mithilfe der neuen
Module wie z.B. Content-Tab, Ausklapplisten oder Downloadlisten sinnvoll in einem Artikel
zusammengefasst werden können. Zur Zeit sind zu viele Teilinformationen ein- und desselben Themas auf
unterschiedlichen Artikelseiten verortet. Das führt zu einer hohen Seitenanzahl und zu einer schlechten
Bedienbarkeit, da der User die Informationen zusammensuchen muss.
Regeln:
● Unterschiedliche Inhalte zu einem Thema wie z. B. PDF-Dokumente, Formulare und Videos auf
der Artikelseite des Themas in der Hauptspalte verorten
● Reine PDF-Dokumente zu einer passenden Artikelseite verorten oder in einen Artikel umwandeln
● Unterrubriken mit weniger als 3 Artikeln auflösen und anderen Rubriken zuordnen
● Kleine Themenbereiche zusammenfassen
10
Contentüberarbeitung anhand von Beispielen Beispiel 1: Der Bereich „Taxen- und Mietwagenverkehr“ der HK Hamburg
11
12
Beispiel 2: Gesetzestext Urlaubsregelungen der IHK Stuttgart
Alter Seitenaufbau
Das Inhaltsverzeichnis des Gesetzartikels „Rund um den Urlaub“ beinhaltet 27 (!) Sprungmarken und
nimmt den gesamten sichtbaren Browserbereich ein. Der Artikel selbst ist 14 (!) DINA 4 Seiten lang. Das
sind für jeden User zu viele Informationen auf einmal.
ansehen
13
Neuer Seitenaufbau
Im Inhaltsverzeichnis werden nur noch die Hauptpunkte ausgespielt. Dadurch reduziert sich das
Inhaltsverzeichnis um mehr als die Hälfte auf 11 Sprungmarken.
14
Die Texte wiederum werden jetzt mithilfe von Content-Tab Modulen aufbereitet. Ein Content-Tab Modul für
jeden Hauptpunkt. Die Unterpunkte eines jeden Hauptpunktes sind in dem jeweiligen Content-Tab Modul
verlinkt. Die Seite wird dadurch insgesamt viel übersichtlicher und in der Länge um ⅔ (!) kürzer.
15
Beispiel 3: Wahl der Vollversammlung IHK Rhein-Neckar
Alter Seitenaufbau
Momentan werden direkt auf der ersten Seite alle amtierenden Mitglieder in einer Tabelle mit Namen und
zugehörigem Wahlkreis sowie der Wahlgruppe ausgespielt. Der User wird somit für ihn irrelevanten
Informationen (alle Wahlkreise, alle amtierenden Mitgliedern) konfrontiert und dadurch schnell überfordert.
Gleichzeitig ist die Seite unübersichtlich.
GrLink wurde wegen Ungültigkeit nachträglich entfernt.
16
Auf Klick einer Branche werden alle amtierenden Mitglieder mit Foto und Firmenkontaktdaten dieser
Wahlgruppe in einer Tabelle angezeigt. Dies führt zu einer endlos langen Seite und der User muß sich zu
seinem Wahlkreis scrollen. Gleichzeitig wird die Trennung zwischen den Wahlkreisen sehr klein
aufgezeigt.
Grafik und Link wurde wegen Ungültigkeit nachträglich entfernt.
17
Neuer Seitenaufbau
Auf der ersten Seite gliedern wir die amtierenden Mitglieder mithilfe von einer Linkliste nur nach den
Wahlgruppen. Der User kann somit die für ihn relevante Gruppe auswählen und findet sich sofort zurecht.
18
Mithilfe des Moduls Ausklappliste sortieren wir dann die amtieren Mitglieder einer Wahlgruppe nach
Wahlkreis und Namen. Alle amtierenden Mitglieder einer Wahlgruppe sind übersichtlich nach den
Wahlkreisen aufgelistet. Möchte der User nun weitere Informationen zu einem Mitglied haben, klickt er auf
den jeweiligen Namen und das Portrait sowie die Firmenkontaktdaten werden angezeigt.
Name Funktion Firma Straße PLZ Ort
19
URL-Vorgaben
Wie URLs auf IHK24 verwendet und formatiert werden.
URLs müssen User- und SEO-freundlich aufbereitet werden. Das heißt:
● URLs müssen klar, eindeutig, einfach zu lesen, einfach zu tippen und einfach zu teilen sein.
● URLs müssen kleingeschrieben werden.
● URLs sollten aus ganzen Wörter und keinen Abkürzungen bestehen.
● Trennstriche werden dazu verwendet Wörter zu trennen und damit eine einfache Lesbarkeit zu
gewährleisten (z.B. anmeldung-meisterprüfung-2016).
● Artikel sollten vermieden werden (ja: anleitung-selbstständigkeit / nein: eine-anleitung-zur-
selbstständigkeit).
Suchmaschinenoptimierung, intern und extern Suche über Google & Co.
Zwei Drittel der Nutzer kommen über eine Suchmaschine auf die Website. Damit sie möglichst direkt bei
dem gesuchten Dokument/Inhalt landen gilt Folgendes zu beachten:
● Schon beim Schreiben des Artikels überlegen, welche Suchbegriffe später verwendet werden um
den Artikel zu finden.
● Diese Begriffe mehrmals im Text einbauen, am besten schon im Artikelnamen, der Überschrift,
dem Indextext und den ersten Textzeilen.
● Was Bei den Suchmaschinen in der Trefferliste angezeigt wird, kann beeinflusst werden: Auf dem
Reiter SEO-Optionen können eine Überschrift und eine Kurzbeschreibung vergeben werden.
● Suchmaschinen bewerten Verlinkungen im Text zu thematisch verwandten Inhalten positiv. Weil
diese Links aber den Lesefluss erschweren, sollten nicht zu viele Links hintereinander gesetzt
werden.
Suche auf der IHK Website
Aufgrund der Komplexität und Fülle der Inhalte wird oft die Suchfunktion zum Auffinden von Inhalten
verwendet. Deshalb ist für die interne Suche das Pflegen von Schlagworten besonders wichtig. Durch das
Eingeben von Schlagworten können wichtige Suchwörter, die nicht in den Überschriften oder dem Text
vorkommen, ergänzt werden. Auch eine Wiederholung von Worten aus den Überschriften und dem Text
kann in den Schlagworten vorgenommen werden um die Gewichtung zu erhöhen.
20
4. Seitenaufbau
Die Hauptspalte
Informationen, die direkt mit einem bestimmten Inhalt zu tun haben, sind immer in der Hauptspalte
darzustellen. Nur Kontext bezogene und weiterführende Inhalte (wie Ansprechpartner, verwandte Themen)
finden sich in der Seitenspalte. Diese beiden Ebenen dürfen nicht vermischt werden.
Die Marginalspalte
In der Marginalspalte (Seitenspalte) können kontextbezogene/weiterführende Themen angeteasert
werden. Im Contentbereich selbst sollten Linklisten und andere weiter verlinkende Module nicht dafür
verwendet werden kontextbezogene/weiterführende Inhalte zu verlinken.
Regeln
● Eine Marginalspalte darf nicht leer sein.
● Eine Marginalspalte sollte nicht länger als der Contentbereich sein.
● Maximal 5 Verlinkungen (interne Links, externe Links, Download-Links) sind in der Linkliste
erlaubt.
Bilder
In welcher Größe und welchem Format Bilder verwendet werden sollen
Die Bildformate auf IHK24 sind im 3:2-Format angelegt, weil dies das digitale Standardformat ist. Bilder
sollten eine Mindestgröße von 1240 x 826 px haben um auch auf retina-fähigen Geräten scharf dargestellt
werden zu können. Mit diesem Format kann ein Bild optimal als Contentspalte-füllendes Artikelbild
(Maximalformat) und in allen anderen Formaten, wie Teaser, eingebaut werden. Diese Auflösung reicht
auch für die Darstellung in der Bildergalerie sowie als Bild in der Bildergalerie für Retinaauflösungen.
Welche Bilder die richtigen für IHK24 sind
Das Design ist so ausgelegt, dass es auch mit wenigen Bildern gut aussieht. Daher ist bei der Auswahl der
Bilder auf Qualität vor Quantität zu achten. Auf IHK24-Webseiten publizierte Bilder sollten authentisch
wirken und einen inhaltlichen Bezug zum Text haben. Der Aufbau der Bilder soll plakativ und klar sein.
Bildmotive dienen zur Hervorhebung des Themas, nicht der Dekoration. Wenn möglich, werden Menschen
gezeigt.
Regeln
● Die Bilder sind authentisch (Schärfe / Unschärfe) und haben eine realistische Lichtstimmung.
● Der inhaltliche Bezug zum Textinhalt ist eindeutig gegeben.
● Der Bildaufbau ist plakativ und klar.
● Die Bildmotive dienen der Hervorhebung eines Themas und sind keine Dekoration.
● Wenn möglich, zeigen wir Menschen.
21
Bildbeispiele für Ausbildung
Bildbeispiele für Industrie
22
Bildbeispiele für Tourismus
Bildbeispiele für Wirtschaft
23
5. Navigationskonzept
Zielgruppeneinstiege
Der Zielgruppeneinstieg bildet den Ersteinstieg für die wichtigsten Zielgruppen der IHK und sollen deshalb
prominent platziert werden. Sie führen jeweils auf eine sog. Mash-up-Seite, auf welcher Inhalte aus
verschiedenen Ebenen bzw. Navigationspfaden für die Zielgruppe zusammengestellt werden. Auf den
Zielgruppen-Mash-Up-Seiten gibt es einen redaktionell bespielten Bereich sowie einen Bereich, in
welchem die meist geklickten relevanten Inhalte für die Zielgruppe ausgespielt werden.
● Die optimale Belegung der Zielgruppeneinstiege sind 3.
● Alternativ besteht die Möglichkeit, 4 Zielgruppeneinstiege zu wählen. Auch vor dem Hintergrund
der mobilen Darstellung wird die Nutzung von drei Zielgruppeneinstiegen empfohlen.
● In den Zielgruppeneinstiegen sollen die Zielgruppen der Prioritäten 1 und 2 (Ausbilder,
Auszubildende, Unternehmer und Existenzgründer) angesprochen werden.
● Die Zielgruppen können von jeder IHK selbst bestimmt werden.
● Die Ausspielung der automatisch generierten Inhalte auf den Mash-Up-Seiten erfolgt ohne Bild.
24
Suche
Die Suche auf der Startseite ist direkt unter den Zielgruppeneinstiegen platziert. Im Suchfeld können
kombiniert Suchbegriffe, Seitenummern oder Veranstaltungsnummern eingegeben werden. Neben dem
Suchfenster ist ein Link, der dem User die Option bietet, die IHK direkt zu fragen. Der Link öffnet eine Seite
mit Kontaktinformationen und einem Formular, über das man seine Frage stellen kann.
Auf den Unterseiten befindet sich die Suche im Bereich der Metanavigation, die beim Runterscrollen fest
am oberen Browserrand verankert ist.
25
Hauptnavigation
Die Navigation ist aufgrund der Vielzahl an Themen linear aufgebaut und in der Benutzerführung stark
reduziert. Vorherrschendes Prinzip dabei ist „Mobile First“: Die Bedienung ähnelt von der Einfachheit der
einer App und stellt die unterschiedlichsten Inhaltsverschachtelungen übersichtlich dar. Folgende Regeln
gelten für die Navigation:
● Inhalte und Navigationspunkte können sortiert auf derselben Ebene stehen
● Übersichtseiten dürfen nicht mit Übersichtseiten des selben Seitentyps verlinkt werden
(Bsp.: Eine Themenübersichtsseite darf nicht auf eine andere Themenübersichtsseite verlinken)
● Downloadobjekte werden in einem Übergangszeitraum von 6 Monaten weiterhin in der Navigation
angezeigt
● Technische Begrenzung der Ebenentiefe auf 6 Ebenen
● Die Anzahl der Hauptnavigationspunkte ist auf 6 begrenzt
● Auf der letzten Ebene eines Navigationspfades dürfen nur noch Contentseiten ausgespielt werden.
26
Funktionsprinzip der Navigation:
Ebene 1
Mit Klick auf den Navigationspunkt „Recht & Steuern“ landet der User auf der Themenübersichtsseite.
Die Unternavigation ist in der linken Seitenspalte ausgeklappt.
27
Ebene 2
Klickt der User auf einen Unternavigationspunkt, fahren die dazugehörenden Themen rechts in einer
weiteren Spalte über den bestehenden Content aus.
28
Ebene 3
Bei weiteren Unterthemen ziehen sich die Navigationsspalten links zusammen. Es kann dabei jederzeit
direkt zwischen den unterschiedlichen Navigationsebenen mit einem Klick gewechselt werden. Seiten des
gleichen typs werden immer untereinander ausgespielt und sind durch Trennstriche von anderen
Seitentypen getrennt. Unterschiedliche Icons an den Navigationspunkten zeigen dem User auf, um welche
Seitentypen es sich handelt. Navigationspunkte ohne Icon sind immer Artikelübersichtsseiten oder
Contentseiten (Artikel, Dokumentenliste, A-Z Liste).
29
Ebene 4
Erst auf der Seite, auf der sich Content befindet, ändern sich die Inhalte im Contentbereich. Jetzt wird der
Artikel über die ganze Breite angezeigt und die Navigationsspalten verschwinden.
Die Reihenfolge der Navigationsinhalte ist dabei folgende:
1. Navigationspunkte
2. Seiten mit Inhalten (Artikelübersichtseiten, Artikel, Dokumentenlisten, etc.)
3. Dokumente (pdf, xls, doc, etc.) – begrenzt auf 6 Monate
4. Externe links
Navigationspunkte in der Seitennavigation sollten nicht länger als 1 Zeile (ca. 25 Zeichen) sein.
30
Servicenavigation
● Es gibt maximal 5 Servicenavigationspunkte
● Die Servicenavigationspunkte sind frei definierbar
● Stärkere Überarbeitung und Reduktion ist erforderlich
● Die Themenübersichtsseite mit eigener Navigation darf eingesetzt werden
● Max. Tiefe von 4 Ebenen
31
Footer
● Der Footer besteht aus 2 Teilen: Der Content-bezogene Footer und der globale Footer.
● Im Content-bezogenen Footer werden dem User Interaktionsmöglichkeiten angeboten, die sich
direkt auf die darüber liegenden Inhalte beziehen („Diese Seite drucken“ und „Als PDF speichern“)
● Im globalen Footer, der auf jeder Seite zu finden ist, wird die Hauptnavigation, 8 frei definierbare
Imnhalte und Kontakdaten verlinkt. Im unteren Beriech können verlinkte Logos von anderen IHK-
Verbänden und weitere Kanäle (z.B. Twitter) eingebaut werden. Den Abschluss bildet der
Copyright, Datenschutz und Haftungshinweis.
32
6. Templates Es gibt insgesamt 18 Templates, die sich in folgende drei Seitentypen gliedern:
Strukturseiten
● Startseite
● Mash-Up Seite
● Themenübersichtsseite
● Artikelübersichtsseite
● A-Z Liste
● Dokumentenliste
Contentseiten
● Artikelseite
● Bildergalerie
● Veranstaltungsseite
● Newsletter
● Umfrageergebnisseite
Funktionsseiten
● Veranstaltungsanmeldung
● Veranstaltungssuche
● Suchergebnisseite
● Login
● Umfrage
● Formular
● Newsletteranmeldung
Übersicht: http://dev-www.tallence.com/ihk
33
Mögliche Verlinkungen der Templates
34
Startseite
ansehen
Beschreibung
Die Startseite ist die Seite, auf die der Besucher landet, wenn er die Home-URL der jeweiligen IHK eingibt.
Die Startseite wird nur 1x eingesetzt. Sie dient dazu dem User einen schnellen Überblick und Einstieg in
die Themen der jeweiligen IHK zu geben.
Aufbau und Inhalt
Die Startseite ist so angelegt, dass sie unterschiedlichste Themen flexibel aufnehmen kann. Der
Headerbereich besteht aus der Metanavigation, Servicenavigation, den Zielgruppeneinstiegen, der Suche
und der Hauptnavigation.
Im Contentbereich können unterschiedliche Teaser angeordnet werden, je nach Bedürfnis der IHK und der
zu kommunizierenden Themen.
Regeln
● Teaser dürfen nur in einer Reihe mit vordefinierten Teasertypen stehen, damit ein ein
gleichmäßiges Erscheinungsbild gewährleistet ist.
● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer
Teaser neben einem zu kurzem Teaser steht.
● Es können 3 x 4-spaltige Teaser in einer Reihe angeordnet werden
35
● Es können 2 x 6-spaltige Teaser in einer Reihe werden
● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.
● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.
● Eine Veranstaltungsliste kann nur neben einem 6-spaltigen Teaser stehen, dieser kann ein Teaser
mit Bild sein, aber auch ein Teaser ohne Bild (auf ausgewogene Inhaltslänge achten).
Startseite für eingeloggte Mitglieder (Extranetz)
ansehen
Beschreibung
Die Startseite für eingeloggte Mitglieder entspricht dem Template „Startseite“ mit dem zusätzlichem
Infofenster über dem Contentbereich.
Aufbau und Inhalt
Im Infofenster sind die persönlichen Mitgliedsdaten und Links zu exklusiven Mitgliederinformationen.
Regeln
Wie Startseite.
36
Mash-Up Seite
ansehen
Beschreibung
Eine Mashup-Seite dient dazu, Themen für eine jeweilige Zielgruppe zu präsentieren. Sie besteht aus
einem manuell befüllten und einem automatisch befüllten Bereich. Die Mashup-Seite dient ausschließlich
als Landingpage für die jeweiligen Zielgruppeneinstiege.
Aufbau und Inhalt
Die Themenseite besteht aus einem Header mit Metanavigation, Servicenavigation und Hauptnavigation.
Der 12-spaltige Contentbereich besteht aus einer optionalen Dachzeile, Headline, Vorlauftext und einem
Teaserbereich. Der Teaserbereich besteht aus einem redaktionell und automatisch befüllten Bereich, hier
sind 4- und 6-spaltige Teaser möglich. Der automatisch befüllte Bereich wird nach bestimmten Regeln
(Zielgruppe, Aktualität) bestückt, diese Teaser bleiben ohne Bild. Am Ende der Seite kann optional ein
Ansprechpartner-Modul gesetzt werden.
Regeln
● Teaser dürfen nur in einer Reihe mit vordefinierten Teasertypen stehen, damit ein gleichmäßiges
Erscheinungsbild gewährleistet ist.
● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer
Teaser neben einem zu kurzem Teaser steht.
● Es können 3 x 4-spaltige Teaser in einer Reihe angeordnet werden.
● Es können 2 x 6-spaltige Teaser in einer Reihe werden.
● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.
● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.
● Eine Veranstaltungsliste kann nur neben einem 6-spaltigen Teaser stehen, dieser kann ein Teaser
mit Bild sein, aber auch ein Teaser ohne Bild.
37
Themenübersichtsseite
ansehen
Beschreibung
Die Hauptthemen der IHK finden sich in der Hauptnavigation, hinter diesen Hauptnavigationspunkten steht
eine Themenseite, die einen Einstieg und Überblick in das jeweilige Themengebiet gibt.
Aufbau und Inhalt
Die Themenübersichtsseite besteht aus einem Header mit Metanavigation, Servicenavigation und
Hauptnavigation.
In der linken Seitenspalte befindet sich die 4-spaltige Subnavigation mit den Inhalten zu dem jeweiligen
Thema.
Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einen
Vorlauftext. Darunter stehen Teaser, Veranstaltungsmodul (optional), Ansprechpartner (optional) und
Linklisten (optional).
Regeln
● Themenübersichtseiten dürfen nur jeweils für einen Hauptnavigationspunkt oder
Servicenavigationspunkt stehen.
● Sie dürfen nicht in tieferen Ebene stehen.
● Von Themenseite kann auf alle anderen Seitentypen verlinkt werden.
● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer
Teaser neben einem zu kurzem Teaser steht.
38
● Es können 1 x 8-spaltige Teaser in einer Reihe angeordnet werden
● Es können 2 x 6-spaltige Teaser in einer Reihe werden
● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.
● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.
Die Artikelübersichtsseite
ansehen
Beschreibung
Die Artikelübersichtsseite ist die letzte Strukturseite. Nach der Artikelübersichtsseite kommen direkt Inhalte
in Form von Artikeln, Dokumenten etc.
Aufbau und Inhalt
Die Artikelübersichtsseite besteht aus einem Header mit Metanavigation, Servicenavigation und
Hauptnavigation.
Der 12-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einen
Vorlauftext. Darunter stehen Teaser und ein Ansprechpartner-Modul (optional).
Regeln
● Insgesamt sollten nie mehr als 15 Artikel auf einer Artikelübersichtsseite ausgespielt werden.
● Ein Teaser der Artikelübersichtseite darf niemals auf eine andere Artikelübersichtseite verlinken.
● Die Teaser können nur auf Artikelseiten verlinken.
● Bei allen Teasern ist auf eine gleichmäßige Befüllung zu achten, so dass z.B. nie ein sehr langer
Teaser neben einem zu kurzem Teaser steht.
● Es können ausschließlich 3 x 4-spaltige Teaser in einer Reihe angeordnet werden
● Teaser mit Bild müssen neben Teasern mit Bild oder Linkteasern mit Bild stehen.
● Teaser ohne Bild müssen neben Teasern ohne Bild oder Link-Teasern ohne Bild stehen.
39
Die Artikelseite
ansehen
Beschreibung
Auf einer Artikelseite können Informationen in unterschiedlichster Weise aufbereitet werden. Eine
Artikelseite ist das „Ziel“ für den Nutzer, wo er die von ihm gesuchte Information übersichtlich aufbereitet
vorfindet.
Aufbau und Inhalt
Die Artikelseite besteht aus einem Header mit Metanavigation, Servicenavigation und Hauptnavigation.
Die Seite besteht aus einem 8-spaltigen Contenbereich und einer 4-spaltigen Marginalspalte (rechts).
Der einführende Bereich des 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer
Headline und einem Inhaltsverzeichnis (optional), der auf darunter liegende Inhalte verlinkt. Die darunter
liegenden Inhalte können vielfältig aufgebaut sein und aus Headline, Vorlauftext, Mengentext,
eingebetteten Bild- und Videomaterial, Zitateinschüben, Highcharts, Aufzählungen, Content-Tabs,
Tabellen, Veranstaltungsmodulen und Listen bestehen.
Regeln
● Im Contentbereich dürfen keine Teaser eingebaut werden.
● Im Contentbereich darf kein Kontaktmodul eingebaut werden, dafür ist auf Artikelseiten die
Marginalspalte vorgesehen.
40
Die Veranstaltungsdetailseite
ansehen
Beschreibung
Die Veranstaltungsdetailseite informiert über eine Veranstaltung oder Veranstaltungsreihe und bietet die
Möglichkeit, eine Veranstaltung zu buchen.
Aufbau und Inhalte
Die Veranstaltungsseite besteht aus einem Header mit Metanavigation, Servicenavigation und
Hauptnavigation.
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).
Der einführende Bereich des 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer
einzeiligen Headline und einem Index (optional), der auf darunter liegende Inhalte verlinkt. Bei einer
zweizeiligen Headline bitte H2 verwenden. Darunter kann die Veranstaltung mit Überschrift, Mengentext
und Bildern beschrieben werden. Unter dem Beschreibungstext finden sich das Terminmodul, ein Content-
Tab Modul (optional) mit weiteren Informationen, Listen mit weiterführenden Informationen (optional) und
das Veranstaltermodul (optional).
Regeln
Damit die Anzahl der alternativen Veranstaltungstermine nicht zu lang wird, darf die max. Anzahl der
alternativen Termine 10 Veranstaltungen nicht überschreiten.
● Bei einer größeren Anzahl von Terminen zu einer Veranstaltung wird die Aufteilung durch eine
Splittung der Veranstaltungsreihen erreicht (bspw. nach Quartalen): Für die Veranstaltungsreihe
„Existenzgründung“ gibt es jede Woche einen Termin. Für die Aufteilung empfiehlt sich die
41
Veranstaltung in „Existenzgründungsseminare Frühjahr“, „Existenzgründungsseminare Sommer“,
etc.. aufzuteilen.
● Ansprechpartner müssen in der Marginalspalte verortet werden.
● Das Veranstaltermodul muss im Contentbereich verortet werden und ist immer automatisch
eingeklappt.
Veranstaltungsanmeldung
ansehen ansehen ansehen
Beschreibung
Die Veranstaltungsanmeldung ermöglicht dem User sich online für eine Veranstaltung zu registrieren.
Aufbau und Inhalt
Die Veranstaltungsanmeldung besteht aus einem Header mit Metanavigation, Servicenavigation und
Hauptnavigation.
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts). Die
Marginalspalte beinhaltet Die rechtlich vorgeschriebenen Links „Kundeninformation“.
Der einführende Bereich des 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer
Headline und einem Link zur jeweiligen Veranstaltungsdetailseite. Ein darunter liegendes Formular ist in
die 3 Schritte 1. Dateneingabe, 2. Anmeldung, 3. Bestätigung aufgeteilt.
Dateneingabe: Dieser Schritt dient zur Erfassung der Kundendaten, die Bestückung kann je nach Bedarf
festgelegt werden. Ein weiterführender Button leitet zum nächsten Schritt.
Anmeldung: Hier werden die vorher angegebenen Daten noch mal zur Überprüfung für den Kunden
übersichtlich dargestellt. Nach Beantworten der Sicherheitsfrage und Zustimmung zu den AGBs und
Widerrufsbelehrung wird die Veranstaltung durch Klick auf einen Button zahlungspflichtig gebucht und der
User wird zum dritten Schritt weiter geleitet.
42
Bestätigung: Bei erfolgreicher Anmeldung erscheint ein Bestätigungstext. Darunter kann optional ein
Veranstaltungsmodul mit weiteren Veranstaltungen angezeigt werden.
Regeln
● Die Marginalspalte ist ausschließlich für die Kundeninformationen vorbehalten
Veranstaltungssuche
ansehen
Beschreibung
Die Veranstaltungssuche sucht ausschließlich im Bereich Veranstaltungen. Durch Eingabe eines
Suchbegriffes/Veranstaltungsnummer werden passende Veranstaltungen ausgespielt. Bei Aufruf der Seite
wird standardmäßig eine Liste mit allen Veranstaltungen als „Trefferliste“ angezeigt.
Aufbau und Inhalt
Die Veranstaltungssuche besteht aus einem Header mit Metanavigation, Servicenavigation und
Hauptnavigation.
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).
An oberster Stelle des Contentbereiches steht ein prominentes Suchfeld mit dem zuvor eingegebenen
Suchbegriff. Ein darunter liegender Link ermöglicht den Wechsel zu einer Detailsuche mit der Möglichkeit
Veranstaltungen nach den Kriterien Zeitraum, Ort und Rubriken zu suchen. Darunter folgt die Anzahl der Suchergebnisse als Überschrift mit einer Auflistung der Suchergebnisse.
43
Die Suchergebnisliste ist zur besseren Übersichtlichkeit auf verschiedene Seiten aufgeteilt. Am Ende der
Liste findet sich die Paginierung.
Regeln
● Die Anzahl der ausgespielten Trefferergebnisse bevor die Paginierung startet, wird in der
Backend-Entwicklung festgelegt.
Suchergebnisseite Volltextsuche
ansehen
Beschreibung
Die Suchergebnisseite dient zur übersichtlichen Darstellung der Suchergebnisse zu einem vom User
eingegebenen Suchbegriff. Man gelangt zu dieser Seite in dem man auf einer anderen Seite eine Suche
ausführt.
Aufbau und Inhalt
Die Suchergebnisseite besteht aus einem Header mit Metanavigation, Servicenavigation und
Hauptnavigation.
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).
An oberster Stelle des Contentbereiches steht ein prominentes Suchfeld mit dem zuvor eingegebenen
Suchbegriff. Ein darunter liegender ausklappbarer Filter ermöglicht die Eingrenzung der Suchergebnisse. Darunter folgt die Anzahl der Suchergebnisse als Überschrift mit einer Auflistung der Suchergebnisse.
44
Die Suchergebnisse sind in Einzeltreffer und Treffer in Kategorien aufgeteilt. Nach 6 Einzeltreffern folgen
die Kategorien (diese können Veranstaltungen, Shop und Listen sein, sofern dazu Datenbanken
vorhanden sind).
Die Suchergebnisliste ist zur besseren Übersichtlichkeit auf verschiedene Seiten aufgeteilt. Am Ende der
Liste findet sich die Paginierung.
Regeln
● Es werden maximal 2 Treffer in den Kategorie-Einschüben ausgespielt
● Die Anzahl der ausgespielten Trefferergebnisse bevor die Paginierung startet, wird in der
Backend-Entwicklung festgelegt.
A-Z Liste
standard mit Beschreibung
ansehen ansehen
45
Links Links + Beschreibung
ansehen ansehen
Beschreibung
Mit den unterschiedlichen A-Z-Listentemplates können Informationen alphabetisch sortiert und für den
User übersichtlich aufbereitet werden. Über ein darüber liegenden Index kann direkt der gewünschte
Anfangsbuchstaben aufgerufen werden.
Aufbau und Inhalt
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).
Die Liste „Standard“ beinhaltet Schlagworte/Themen mit Ausklappfunktion. Bei Klick öffnet sich der
darunter liegende Inhalt.
Die Liste „Beschreibung“ beinhaltet Schlagworte/Themen mit direkt darunter liegender Beschreibung. Die
Inhalte sind nicht verlinkt.
Die Liste „Links“ enthält Links (ohne Aufklappfunktion) zu internen, externen und Download-Objekten.
Die Liste „Links mit Beschreibung“ enthält direkte Links (wie oben) mit einem darunter stehendem, kurzen
Beschreibungstext.
Regeln
● Die Ausklappinhalte der Liste „Standard“ dürfen nicht zu lang sein um die Übersichtlichkeit für den
User nicht zu beeinträchtigen.
● Der Charakter einer Liste muss gewahrt werden, d.h. hier dürfen nur Inhalte dargestellt werden für
die eine alphabetische Sortierung Sinn macht (z.B. Ansprechpartner, Glossar usw.).
● Es sollten mindestens 30 unterschiedliche Inhalte vorhanden sein, damit eine A-Z Liste Sinn
macht.
46
Dokumentenliste
ansehen
Beschreibung
Die Dokumentenliste dient dazu dem User eine Inhaltssammlung (Links, Downloads) zu einem bestimmten
Thema anzubieten.
Aufbau und Inhalt
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).
Eine Dokumentenliste beinhaltet eine optionale Dachzeile, Headline und Vorlauftext, die das Thema der
Liste beschreibt. Darunter sind Verlinkungen aufgelistet, die frei zusammengestellt werden können. Diese
Verlinkungen können sein:
● Schlagwort/Thema + Beschreibungstext
● Schlagwort/Thema + Beschreibungstext + Bild
● Schlagwort/Thema + Download
Regeln
● Die Inhalte einer Dokumentenliste müssen in einem inhaltlichen Bezug stehen.
● Die Beschreibungstexte der einzelnen Dokumente muss kurz und prägnant sein.
47
● Bildmaterial zur Illustration von Dokumenten darf nicht generisch sein.
Login-Seite
ansehen
Beschreibung
Auf der Login-Seite können sich Mitlieder von IHK24 in den geschützten Mitliederbereich einloggen.
Aufbau und Inhalt
Die Seite besteht aus einem 8-spaltigen Contenbereich und einer 4-spaltigen Marginalspalte (rechts).
Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einem
optionalen Beschreibungstext. Darunter befindet sich das Einlog-Formular. Im unteren Bereich der Seite
können noch zusätzliche Informationen aufgelistet werden.
In der Marginalspalte ist der/die passende(n) Ansprechpartner aufgelistet.
Regel
48
● Die Marginalspalte der Login-Seite ist ausschließlich für Ansprechpartner vorgesehen.
● Der optionale Beschreibungstext sollte so kurz wie möglich gehalten sein, um das wichtigste
Element, das Login-Formular, nicht aus dem sichtbaren Bereich zu verdrängen.
● Der unter dem Login-Formular liegende optionale Text soll so knapp und informativ wie möglich
sein.
Umfrageseite
Umfrage Umfrageergebnis
ansehen ansehen
Beschreibung
Auf der Umfrageseite können einfache Umfragen mit einer Frage durchgeführt werden. Nach der
Beantwortung der Frage wird dem User das Ergebnis/der Zwischenstand direkt angezeigt. Es gibt auch die
Möglichkeit eine erweiterte Umfrage auszuführen, bei der 2 Fragen beantwortet werden müssen und das
Ergebnis dann gewichtet dargestellt wird (z.B. Sind die Unternehmer ja/nein, das Umfrageergebnis wird
dann in die Gruppen Unternehmer/Kein Unternehmer aufgeteilt).
Aufbau und Inhalt
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).
Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline, einem optionalen
Beschreibungstext und der Frage, die dem User gestellt wird. In einem Formularfeld hat er die Möglichkeit
aus verschiedene Antwortmöglichkeiten auszuwählen. Bei Klick auf den „Abstimmen-Button“ wird er
automatisch zur Umfrageergebnis-Seite weitergleitet. Der Aufbau der Umfrageergebnisseite ist gleich dem
49
der Umfrageseite, mit dem Unterschied, dass anstatt des Frageformulars das Ergebnis grafisch aufbereitet
dargestellt wird.
Regeln
● Es kann nur eine Frage pro Umfrage gestellt werden bzw. 2 Fragen bei der erweiterten Umfrage
● Es sollten nicht mehr als 5 Antwortmöglichkeiten gegeben werden.
● Es gibt für den Usern nur die Möglichkeit, eine Antwort pro Frage zu geben (Radiobuttons).
● Die Umfrageseite dient nicht zur Ausführung komplexer Umfragen, sondern nur um die schnelle
Erstellung eines Meinungsbildes.
Newsletter
ansehen
Beschreibung
Das Newsletter-Template bietet die Möglichkeit eine Themenauswahl anzuteasern und dann zur
weiterführenden Seite auf der IHK-Website zu verlinken. Der Newsletter gibt einen kurzen
Themenüberblick, ist aber nicht dafür gedacht, tief in die Inhalte einzusteigen, das geschieht dann auf der
Webseite.
Aufbau und Inhalt
Der Newsletter hat ein 8-spaltiges Raster. Der Header besteht aus der Bild-Wortmarke der jeweiligen IHK
und der Newsletter-Ausgabe mit Datum. Im Bereich darunter erfolgt die persönliche Ansprache. Eine
optionale Dachzeile und Headline geben das Überthema des Newsletters vor. Die Indexierung, die sich
aus h2 ergibt, ist auch optional. Die darunter liegenden Teaser können folgende Formate haben:
● 8-spaltig Bild-Headline-Text
50
● 8-spaltig Headline-Text
● 4-spaltig Bild-Headline-Text
● 4-spaltig Headline-Text
Den Abschluss bilden die Links zur Newsletterverwaltung und das Impressum.
Regeln
● 4-spaltige Bild-Headline-Text-Teaser können nur neben einem anderen 4-spaltigen Bild-Headline-
Text-Teaser stehen.
● 4-spaltige Headline-Text-Teaser können nur neben einem anderen 4-spaltigen Headline-Headline-
Teaser stehen.
Formularseite
ansehen
Beschreibung
Auf der Formularseite können alle gängigen Formularelemente dargestellt werden. Beispielanwendungen
sind Umfragen, Registrierungsseiten u.ä.
Aufbau und Inhalt
Die Seite besteht aus einem 8-spaltigen Contentbereich und einer 4-spaltigen Marginalspalte (rechts).
Der 8-spaltige Contentbereich besteht aus einer optionalen Dachzeile, einer Headline und einem
optionalen Beschreibungstext. Im Bereich darunter können beliebige Formularelemente angeordnet
werden.
51
Die Werbung
Wallpaper
ansehen
Scyscraper
52
Medium Rectangle
ansehen
ansehen
Beschreibung
Es gibt die Möglichkeit 3 Werbeformate einzubinden: Wallpaper, Skyscraper und Medium Rectangle.
Skysraper und Wallpaper werden nur angezeigt, wenn das Browserfenter eine Mindestbreite von 1200px
beträgt. Das Medium Rectangle wird immer ausgespielt.
Regeln
● Werbebanner sollten nur dann eingesetzt werden, wenn ihr Nutzen als größer angesehen wird als
der Grad der Störung, den sie bei den Nutzern verursachen.
53
7. Module
Teaser Karussell mit Bild
Beschreibung
Der Teaser wird an oberster Stelle im Content der Startseite eingesetzt, um prominent Themen zu
kommunizieren. Den Teaser gibt es ausschließlich auf der Startseite bzw. der Startseite für eingeloggte
Mitglieder. Er besteht aus einer optionalen Dachzeile, Headline, Beschreibungstext und Bild.
Der Teaser ist immer 12-spaltig.
Regeln
● Der Teaser kann mit 1-3 Inhalten bestückt werden.
● Es können nur interne Verlinkungen gesetzt werden (keine externen Links, keine Downloadlinks)
● Textlängenvorgaben siehe Kapitel „Teaser“
54
Teaser Veranstaltungsliste
Beschreibung
Der Teaser zeigt eine Auswahl an Veranstaltungen, die Auswahl wird manuell festgelegt (z.B. nächste
Veranstaltungen/neuste Veranstaltungen, Veranstaltungen die gezielt beworben werden sollen etc.). Er
besteht aus einer Headline, den einzelnen Veranstaltungen mit Datumsicon, einem Button, der zur
Veranstaltungssuchergebnisseite mit den aktuell anstehenden Veranstaltungen führt.
Den Teaser gibt es 4- und 8-spaltig.
Regeln
● Die Länge des 4-spaltigen Teaser sollte an die Länge des nebenstehenden Elements angepasst
werden.
● Die Anzahl der Veranstaltungen darf 5 nicht überschreiten.
● Textlängenvorgaben siehe Kapitel „Überschriften“
55
Teaser Headline-Text
Beschreibung
Der Teaser besteht aus einer optionalen Dachzeile, Headline und Beschreibungstext.
Der Teaser kann einen untenstehenden Kontextlink beinhalten. Dieser verweist auf einen anderen
thematisch verwandten Inhalt und besteht lediglich aus optionaler Dachzeile und Headline.
Den Teaser gibt es 4- und 6-spaltig.
Regeln
● Textlängenvorgaben siehe Kapitel „Teaser“
56
Teaser Bild-Headline-Text
Beschreibung
Der Teaser besteht aus einer optionalen Dachzeile, Headline, Beschreibungstext und Bild.
Der Teaser kann einen untenstehenden Kontextlink beinhalten. Dieser verweist auf einen anderen
thematisch verwandten Inhalt und besteht lediglich aus optionaler Dachzeile und Headline.
Den Teaser gibt es 4- und 6-spaltig.
Regeln
● Das Bild zur Illustration der Inhalte darf nicht generisch sein.
● Textlängenvorgaben siehe Kapitel „Teaser“
57
Teaser Headline-Link
Beschreibung
Der Teaser kann mit internen Links, externen Links und Downloadlinks bestückt werden. Er besteht aus
einer optionalen Dachzeile, Headline und Links. Die Listeneinträge bestehen aus einem Icon, dass die Art
des Links darstellt (intern, extern, Mitgliederbereich, Download) und der Headline (ohne Dachzeile).
Regeln
● Empfohlen wird die durchgehende Bestückung nur eines Linktyps (z.B. nur Downloadlinks) um ein
einheitliches und ruhiges Erscheinungsbild zu gewährleisten.
● Die Anzahl der Links sollte abhängig vom nebenstehenden Element gemacht werden, um ein
einheitliches Layout zu gewährleisten.
● Textlängenvorgaben siehe Kapitel „Teaser“.
● Bevor ein externer Link und Downloadlinks im Teaser gesetzt wird sollte geprüft werden, ob dieser
Inhalt auch irgendwo anders kommuniziert werden kann.
58
Teaser Bild-Headline-Link
Beschreibung
Der Teaser kann mit internen Links, externen Links und Downloadlinks bestückt werden. Er besteht aus
einer optionalen Dachzeile, Headline, Links und Bild.
Den Teaser gibt es 4- 6-spaltig.
Regeln
● Das Bild zur Illustration der Inhalte darf nicht generisch sein.
● Empfohlen wird die durchgehende Bestückung nur eines Linktyps (z.B. nur Downloadlinks) um ein
einheitliches und ruhiges Erscheinungsbild zu gewährleisten.
● Die Anzahl der Links sollte abhängig vom nebenstehenden Element gemacht werden, um ein
einheitliches Layout zu gewährleisten.
● Textlängenvorgaben siehe Kapitel „Teaser“.
● Bevor ein externer Link und Downloadlinks im Teaser gesetzt wird sollte geprüft werden, ob dieser
Inhalt auch irgendwo anders kommuniziert werden kann.
59
Bild- / Videomodul
Beschreibung
Mit dem Bild- /Videomodul können Bilder und Videos auf Artikelseiten eingebettet werden. Beide können
mit einem optionalen Beschreibungstext versehen werden. Durch Klick auf das Bildmodul wird in einem
Layer eine vergrößerte Version des Bildes dargestellt, bei Klick auf das Videomodul wird das Video in
einem Layer abgespielt. Beide Module besitzen eine Quellenangabe.
Regeln
● Es muss immer eine Quellenangabe angegeben werden.
● Die Bilder sollten mindestens eine Größe von 1240 x 826 px haben, um eine optimale Ausspielung
zu gewährleisten.
60
Bildergalerie
Beschreibung
Der Aufbau der Bildergalerie ist der gleiche wie beim Bild-Modul, zusätzlich zeigt ein Icon in der rechten
oberen Ecke die Anzahl der Bilder in der Galerie an. Bei Klick auf das Bild öffnet sich ein Layer mit dem
Aufmacherbild im Großformat (sofern vorhanden). Der User kann nacheinander durch die Bilder vor- und
zurückblättern.
Regeln
● Es muss immer eine Quellenangabe angegeben werden.
● Die Bilder sollten mindestens eine Größe von 1240 x 826 px (Querformat) oder eine Höhe von
mindestens 826 Px (Hochformat) haben, um eine optimale Ausspielung zu gewährleisten.
61
Kontaktmodul
Beschreibung
Das Kontaktmodul gibt es als 4-spaltige Version (für die Marginalspalte) und 8-spaltige Version (für den
Contentbereich. Das Kontaktmodul gibt es in folgenden Bestückungen:
● 1 Ansprechpartner mit Bild
● 1 Ansprechpartner ohne Bild
● Mehrere Ansprechpartner
Das Kontaktmodul kann, wenn mehr als 1 Ansprechpartner existiert, default mit erstem Ansprechpartner
ausgeklappt, oder mit allen Ansprechpartnern eingeklappt, dargestellt werden.
Das Bild kann ein beliebiges Format haben, es wird aber ein Querformat empfohlen um eine optimale
Platzausnutzung in der Marginalspalte zu gewährleisten.
Regeln
● Es können maximal 6 Ansprechpartner im Kontaktmodul gelistet werden.
● Es darf nur 1 Kontaktmodul pro Seite verwendet werden (sowohl im Content als auch in der
Marginalspalte).
● Neben den Kontaktdaten können maximal 3 weitere Zusatzinformationen ausgespielt werden (z.B.
Standort, Abteilung, Funktion).
62
Veranstaltungsmodul
Beschreibung
Das Veranstalter-Modul gibt es in einer 8-spaltigen Version, es wird ausschließlich auf der
Veranstaltungsdetailseite verwendet um Kontaktdetails über den Veranstalter anzubieten. Der Aufbau ist
derselbe wie beim 8-spaltigen Kontaktmodul. Es gelten die gleichen Regeln. Der einzige Unterschied
besteht darin, dass das Veranstaltermodul automatisch immer im eingeklappten Zustand ausgespielt wird.
Als Bildmotiv empfiehlt sich das Logo des Veranstalters.
63
Ankerlinks (Sprungmarken)
Beschreibung
Ankerlinks dienen dazu Content innerhalb der Seite strukturiert darzustellen (Inhaltsangabe) und direkt
aufrufbar zu machen.
Regeln
● Ankerlinks können nur zu Beginn einer Artikelseite und einer Veranstaltungsdetailseite stehen.
● Die Beschriftung generiert sich automatisch aus den Überschriften im darunter liegenden Content.
64
Ausklappliste
Beschreibung
Mit Hilfe einer Ausklappliste kann Content übersichtlich zusammengefasst werden. Beim Klick auf den
Beschreibungstext/das Stichwort öffnet sich der darunter liegende Inhalt.
Regeln
● Die Ausklappinhalte der Liste dürfen nicht zu lang sein um die Übersichtlichkeit für den User nicht
zu beeinträchtigen.
● Der Beschreibungstext/das Stichwort muss kurz und prägnant sein.
65
Linkliste
Beschreibung
In einer Linkliste werden Links untereinander dargestellt. Diese Links können auf interne, externe und
Download-Quellen verweisen und sind mit einem dementsprechenden Icon versehen.
Regeln
● Die Linktexte sollten kurz und prägnant sein.
66
Linkliste mit Beschreibung
Beschreibung
In einer Linkliste mit Beschreibung werden Links untereinander dargestellt sind zusätzlich mit einem
Beschreibungstext versehen. Diese Links können auf interne, externe und Download-Quellen verweisen
und sind mit einem dementsprechenden Icon versehen.
Regeln
● Die Linktexte sollten kurz und prägnant sein.
Die Beschreibungstexte sollten kurz und prägnant sein und untereinander eine ähnliche Länge haben.
67
●
Download-Liste
Beschreibung
In einer Downloadliste können Download-Objekte untereinander dargestellt werden. Ein Listeneintrag
besteht aus dem Icon, das die Art des Objektes anzeigt, einer optionale Dachzeile mit Headline, einem
optionalen Beschreibungstext und der Dateigröße.
Regeln
● Die Dateigrößen der Download-Objekte sollten so klein wie möglich sein.
68
Content-Tab Modul
Beschreibung
Das Content-Tab Modul dient dazu, komplexe Inhalte in Schritte aufzuteilen und platzsparend in den
Content einzubinden. Es besteht aus einer Headline, dem Inhalt, einem Index (der aus den einzelnen
Schritten besteht) und einen „Weiter“-Button.
Regeln
● Die einzelnen Inhaltsblöcke sollten in der Länge nicht zu unterschiedlich sein, um beim
Durchblättern die Seitenlänge nicht zu sehr zu variieren und die Übersichtlichkeit für den User zu
gewährleisten.
● Nur Inhalte, für die eine Schritt- für-Schritt-Aufteilung Sinn macht, dürfen in das Content-Tab Modul
aufgenommen werden.
69
Highchart-Grafik
Beschreibung
Das Highchart-Modul dient zur Darstellung von Diagrammen, es kann optional mit einem
Beschreibungstext versehen werden. Welche Arten von Diagrammen verwendet werden können, ist auf
highcharts.com ersichtlich.
70
A A1
B B1
C C1
A A2
B B2
C C2
A B C
A1 B1 B1
A2 B2 B2
Tabelle
Beschreibung
Eine Tabelle dient zur strukturierten Darstellung von Inhalten.
Regeln
● Tabellen dürfen nur dazu verwendet werden Daten darzustellen.
● Bevor eine Tabelle verwendet wird, sollte geprüft werden, ob zum Beispiel eine Liste oder
Highchart-Grafik den gleichen Zweck erfüllt.
● Zellen dürfen nicht verbunden werden.
● Tabellen müssen eine Kopfzeile enthalten um die Darstellung im kleineren Größen zu
gewährleisten.
➔
71
iFrame
Beschreibung
Ein iFrame dient dazu andere Webinhalte als selbstständige Dokumente innerhalb einer Artikelseite
darzustellen, z.B. die Suchmaske eine ÖPNV-Anbieters. Regeln
● Die im iFrame eingebetteten Inhalte müssen responsive sein.
72
8. Impressum
Verfasser:
Stefan Schabenberger und Johannes Widmer
Tallence GmbH
Neue Gröningerstraße 13
20457 Hamburg
Deutschland
Tel.: +49 40 360935-100
Fax: +49 40 360935-200 E-Mail: info@tallence.com
Internet: www.tallence.com
Dieses Dokument ist ausschließlich für den persönlichen Gebrauch der Mitarbeiter der IHK24 e.V.-
Mitgliedskammern bestimmt. Die Inhalte und Ausführungen sind nach bestem Gewissen erarbeitet worden.
Dennoch übernimmt die Tallence GmbH keine Haftung für inhaltliche Fehler in diesem Dokument.
Sämtliche im Rahmen dieses Leitfaden verwandten Firmennamen, Logos, Marken, Markenzeichen,
eingetragenen Markenzeichen sowie Produkte und Warenzeichen sind alleiniges Eigentum der
entsprechenden Firmen und dienen rein zu illustrativen Zwecken.
© Tallence GmbH, Hamburg 2015
Alle Rechte vorbehalten. Alle Angaben ohne Gewähr.