Styleguide - d-NRW

IT-Umsetzung der
EG-Dienstleistungsrichtlinie
in Nordrhein-Westfalen
Pflichtenheft
Layout und Bedienerführung
für die EA-Portale in NRW
Version: 2.0
Stand: 05.05.2011

Inhaltsverzeichnis
0 Layout und Bedienerführung für die EA-Portale in NRW......................................................... 4
0.1 Übersicht der Änderungen Version 2.0 des Pflichtenheftes .................................................. 4
0.1.1 Metanavigation................................................................................................................... 4
0.1.2 Logobereiche ..................................................................................................................... 4
0.1.3 Navigationsbereich ............................................................................................................ 5
0.1.4 Breadcrumb-Navigation ..................................................................................................... 5
0.1.5 Farben................................................................................................................................ 5
0.1.6 Schriftgrößen ..................................................................................................................... 5
0.1.7 Sonstiges ........................................................................................................................... 5
0.2 Zusammenfassung für den eiligen Leser............................................................................... 7
0.3 Zum Verständnis des Kapitels, Abgrenzungen, Vorbetrachtungen, fachliche Erläuterungen,
Einführung in das Pflichtenheft ........................................................................................................... 9
0.3.1 Abgrenzungen.................................................................................................................... 9
0.3.2 Vorbetrachtungen .............................................................................................................. 9
0.3.3 Einführung in das Pflichtenheft........................................................................................ 13
0.4 Basiselemente...................................................................................................................... 16
0.4.1 Bild-Wort-Marke „Einheitlicher Ansprechpartner“ und „Point of Single Contact“............. 16
0.4.2 Bild-Wort-Marke EUGO ................................................................................................... 17
0.4.3 Favicon ............................................................................................................................ 17
0.4.4 Schriften........................................................................................................................... 18
0.4.5 Farben.............................................................................................................................. 18
0.4.6 Gestaltungsfläche ............................................................................................................ 19
0.4.7 Screenaufteilung und Frames.......................................................................................... 20
0.4.8 Bild- und Formensprache ................................................................................................ 21
0.5 Screenaufteilung .................................................................................................................. 22
0.5.1 Metanavigation................................................................................................................. 22
0.5.2 BMWI-Logobereich .......................................................................................................... 28
0.5.3 Identitätsbereich (EA-Logo-Gestaltungszone)................................................................. 28
0.5.4 Navigationsbereich .......................................................................................................... 29
0.5.5 Contentbereich................................................................................................................. 33
0.6 Darstellungsbeispiele und Notationen ................................................................................. 39
0.6.1 Startseite.......................................................................................................................... 40
0.6.2 Kontaktformular................................................................................................................ 41
0.6.3 Anmelden-Bildschirm....................................................................................................... 42
0.6.4 Passwort vergessen-Bildschirm....................................................................................... 43
0.6.5 Registrieren-Bildschirm.................................................................................................... 44
0.6.6 Suchergebnis / Suche, erweiterte.................................................................................... 46
0.6.7 Technische Standards ..................................................................................................... 47
Seite 2 von 47

Seite 3 von 47

0 Layout und Bedienerführung für die EA-Portale in NRW
Grundsätzlich sind alle Vorgaben in diesem Abschnitt (Pflichtenheft) verpflichtend umzusetzen
(V). Gestalterische Freiräume sind implizit den als Empfehlungen gekennzeichneten Vorgaben
zu entnehmen sowie explizit den beschreibenden Angaben in den einzelnen Unterkapiteln.
0.1 Übersicht der Änderungen Version 2.0 des Pflichtenheftes
0.1.1 Metanavigation
In der Metanavigation entfällt der Item Hilfe.
Die Metanavigation wird für die Items Kontakt, Impressum, Inhalt und Suchfeld in der genannten
Reihenfolge rechtsbündig ausgerichtet.
Die Position und die Handhabung für die Sprachauswahl bleiben unverändert.
Optional kann der Google-Übersetzer eingebunden werden. Wird davon Gebrauch gemacht, kann die
Metanavigation um die benötigte Höhe erweitert werden. Die Positionierung erfolgt dann verbindlich in
Höhe des Identitätsbereiches.
Die mit Version 2.0 des Pflichtenheftes gültigen Detailangaben zur Metanavigation sind dem Kapitel
0.5.1 zu entnehmen.
0.1.2 Logobereiche
Im Header (Kopf) des EA-Portals, bestehend aus Logobereich und Identitätsbereich (EA-Logo-
Gestaltungszone), wird statt der Bild-Wort-Marke EUGO die Bild-Wort-Marke Einheitlicher
Ansprechpartner / Single Point of Contact hinterlegt. Die Hintergrundfarbe der Bild-Wort-Marke
Einheitlicher Ansprechpartner / Single Point of Contact entspricht verbindlich der Hintergrundfarbe des
Logobereiches im Header. Von der Bild-Wort-Marke Einheitlicher Ansprechpartner / Single Point of
Contact ist auf die Startseite des EA-Portals zu verlinken.
An Stelle der Bild-Wort-Marke Einheitlicher Ansprechpartner / Single Point of Contact in der
Navigationsspalte ist die Bild-Wort-Marke EUGO in der „Part of the EUGO-Network-Version“ in der
Navigationsspalte aufzunehmen. Von der Bild-Wort-Marke EUGO ist auf das zentrale EUGO Portal zu
verlinken.
Die mit Version 2.0 des Pflichtenheftes gültigen Detailangaben zur Verwendung der Bild-Wort-Marken
sind den Kapiteln 0.4.1, 0.4.2, 0.5.2, 0.5.4.7 und 0.5.4.8 zu entnehmen.
Die Angaben zum Identitätsbereich (EA-Logo-Gestaltungszone) wurden modifiziert.
Die mit Version 2.0 des Pflichtenheftes gültigen Detailangaben zur Verwendung des
Identitätsbereiches sind dem Kapitel 0.5.3 zu entnehmen.
Seite 4 von 47

Der Header (Kopf) des EA-Portals, bestehend aus Logobereich und Identitätsbereich (EA-Logo-
Gestaltungszone), wurde um eine horizontale Linie mit dem Farbwert #000070 bzw. R:0, G:0, B:112
von genau 10 Pixeln in der Höhe erweitert.
Die mit Version 2.0 des Pflichtenheftes gültigen Detailangaben zur Verwendung dieser Linie sind den
Kapiteln 0.5.2.1 und 0.5.3.1 zu entnehmen.
0.1.3 Navigationsbereich
Die Navigationsschaltfläche Startseite entfällt.
Die Sprachregelungen wurden modifiziert. Das Infocenter Gewerbeanmeldung kann vollständig
integriert oder verlinkt werden.
Die mit Version 2.0 des Pflichtenheftes gültigen Detailangaben zu den Sprachregelungen sind den
Kapiteln 0.5.4.2 und 0.5.4.3 zu entnehmen.
Die Flächenfarbe der Navigationsschaltfläche Anmelden wurde modifiziert. Die mit Version 2.0 des
Pflichtenheftes gültigen Detailangaben zur Verwendung von Farben sind dem Kapitel 0.4.5 zu
entnehmen.
0.1.4 Breadcrumb-Navigation
Die Angabe einer Druckenfunktion ist mit Version 2.0 des Pflichtenheftes optional. Weitere
Detailangaben zur Verwendung der Breadcrumb-Navigation sind dem Kapitel 0.5.5.2 zu entnehmen.
0.1.5 Farben
Die zu verwendenden Farben wurden neu festgelegt. Die mit Version 2.0 des Pflichtenheftes gültigen
Detailangaben zur Verwendung von Farben sind dem Kapitel 0.4.5 zu entnehmen.
0.1.6 Schriftgrößen
Den Schriftgrößen wurde zur Eindeutigkeit die Browserdefaultschriftgröße von 16 px als Bezugsgröße
zugewiesen. Die mit Version 2.0 des Pflichtenheftes gültigen Detailangaben zur Verwendung von
Schriften sind den Kapiteln 0.5.1.8, 0.5.4.5 und 0.5.5.5 zu entnehmen.
0.1.7 Sonstiges
0.1.7.1 VSM
Die VSM 2.0 ist produktiv. Insoweit wurde das Kapitel 0.5.1.5 redaktionell überarbeitet.
0.1.7.2 Sprachauswahl
Der Ursprungstext in Kapitel 0.5.1.2, Sprachauswahl,
Seite 5 von 47

„Es ist sicher zu stellen, dass Übersetzungen, insbesondere das Navigationsdesign betreffend, auf
allen EA-Portalen einheitlich sind. Ein sukzessiver Übersetzungsprozess muss daher begleitet und
qualitativ gesichert sein.“
wurde aufgrund der sich gebildeten Arbeitgruppen der EAs modfiziert. Die „Begleitung“ wurde
überführt in „Koordination“:
Es ist sicher zu stellen, dass Übersetzungen, insbesondere das Navigationsdesign betreffend, auf
allen EA-Portalen einheitlich sind. Ein sukzessiver Übersetzungsprozess muss daher kooridniert und
qualitativ gesichert sein.
0.1.7.3 Tätigkeitsorientierter Zugang
Der Empfehlungen zur Aufnahme eines Tätigkeitsorientierten Zugangs in Kapitel 0.5.4.3 wurden
aufgrund der von den Arbeitsgruppen der EAs getroffenen Vereinbarungen modifiziert. Die
Detailangaben der Empfehlungen sind dem Kapitel 0.5.4.3 zu entnehmen.
Seite 6 von 47

0.2 Zusammenfassung für den eiligen Leser
Für die Internetportale der EA in NRW wurde ein einheitliches Screenlayout in Look and Feel
einschließlich Bedienerführung (so genanntes Navigationsdesign zu weiterführenden EG-DLRL-
Informationen und Ansprechpartner wie bspw. Kammern, Wirtschaftförderungsgesellschaften etc.)
und Integration des EA-Finders 1 und der VSM 2 (so genannte Funktionalitäten) unter Berücksichtigung
der BITV 3 entworfen.
Grundgedanke des einheitlichen Screenlayouts ist es, eine einheitliche Corporate Identity (CI) und
damit ein Corporate Design (CD) des Landes NRW und aller EA in NRW sowie eine einheitliche
Benutzeroberfläche hinsichtlich Navigationsdesign und Funktionalitäten sicher zu stellen. Durch die
vorgegebene Strukturierung der Inhalte wird ein einheitliches Informationsbild aller EA-Portale
geschaffen und Parallelarbeit vermieden. Dies ist sowohl im Interesse der DL als auch im Interesse
der EA. Den DL wird damit ein größtmöglicher Komfort und eine maximierte Bedienerfreundlichkeit
geboten. Bereits die Farbwahl des entworfenen EA-Portals induziert einen Wiedererkennungswert: sie
orientiert sich in ihrer Anmutung nicht nur an der Thematik und ihren Inhalten, sondern auch an bisher
in Deutschland zur Dienstleistungsrichtlinie publizierten Internetpräsenzen (z.B.
http://www.dienstleistungsrichtlinie.de/) sowie dem Internetauftritt der Bundesregierung. Für die EA
werden insbesondere evtl. notwendig werdende Modifizierungen technisch standardisierbar. Die
einheitliche Benutzeroberfläche bedeutet dabei keinesfalls den Verzicht auf eine eigene CI/CD der EA
und der ihnen zugeordneten Kommunen. Gestalterisch lassen sich durch designtechnische Vorgaben
(Cascading Style Sheets) individuelle CIs/CDs in einem (quasi) übergeordneten CI/CD einbetten.
Insgesamt wurde das Screendesign in seiner Gesamtstruktur modularisiert und ermöglicht eine
sowohl flexible als auch konsistente Fortschreibung des Navigationsdesigns und der Funktionalitäten.
Die Integration stufenbezogener vereinbarter Standards (DOL DLR) wird gewährleistet. Eine
Zielgruppenanalyse der Zielgruppen DL und EA gibt die zu berücksichtigenden Kriterien vor:
• Zielplattformen – Dienstleistungserbringer
Die technischen Anforderungen hinsichtlich Hard- und Softwareausstattung auf den Zielrechnern
der DL sind so gering wie möglich zu halten.
• Zielplattformen – Einheitliche Ansprechpartner
Die Anforderungen der Funktionalitäten an ein EA-Portal sowie die technische Umsetzbarkeit des
Screendesigns müssen sich an der heterogenen technischen Infrastruktur der EA orientieren.
• Mediale Aufbereitung eines EA-Portals
o Das Ziel der Website muss für den Seitenbesucher eindeutig erkennbar sein.
o Die Zielgruppe muss gestalterisch mit Hilfe von Themenbildern angesprochen werden.
o Die Bildschirmelemente müssen ihrer Bedeutung nach sinnvoll positioniert sein.
o Die Aufteilung der Screens muss nach Maßgabe des Goldenen Schnitts erfolgen.
o Das Navigationsdesign muss übersichtlich, transparent und konsistent sein.
1
EA-Finder suchmaschinenindizierte Datenbank, in der alle EAs sowie weiterführende Informationen
gespeichert sind
2
VSM Verwaltungssuchmaschine des Landes Nordrhein-Westfalen
3
BITV Barrierefreie Informationstechnik-Verordnung vom 24.07.2002
Seite 7 von 47

o Die Menüsprache muss eindeutig, prägnant und verständlich sein.
Unter Berücksichtigung der Nationalitätenvielfalt sind ggf. (zusätzlich)
Symbolschaltflächen zu verwenden.
o Um zu einem gewünschten Inhalt zu gelangen, sollten maximal drei Klicks notwendig
sein.
o Farben zur Gestaltung der Screens sollen dem Thema des EA-Portals entsprechen und
harmonisch aufeinander abgestimmt sein.
o Die Qualität verwendeter Abbildungen muss hochwertig sein. Das Copyright verwendeter
Abbildungen muss zweifelsfrei geklärt und abgesichert sein.
• Grundfunktionalitäten eines EA-Portals
In das Screendesign zu integrierende Grundfunktionalitäten sind:
o Suchfunktion, die den Webseiteninhalt des EA-Portals einschließlich den Inhalt
hinterlegter Dokumente im EA-Portal durchsucht
In das Screendesign zu integrierende EA-Portal - spezifische Funktionalitäten sind:
o EA-Finder und VSM 2.0
o Registrierungsoption zur Teilnahme am Workflow-Repository und Login-Funktion zum
Betreten des Workflow-Repository sowie Passwort vergessen – Funktion
• Optionale Funktionalität/en eines EA-Portals
o Google-Übersetzer
o Druckfunktion, die mit einem eigenen Stylesheet verknüpft sein sollte, das den zu
druckenden Seiteninhalt um etwaige Hintergrundbilder, Eyecatcher etc. bereinigt und
printgerecht 4 aufbereitet
o Seite empfehlen-Button, Verknüpfungssymbole zu Sozialen Netzwerkdiensten (z.B.
Twitter)
Aufgrund dieser Kriterien wurde die Gestaltungsfläche in fünf, konsistent platzierte und in ihren
Funktionen einheitliche Bereiche aufgeteilt und mit einem adäquaten Design versehen:
4 Zur printgerechten Aufbereitung gehört u.a. auch ein auf einem Din A4-Seiten-Ausdruck abgestimmter Seitenvorschub.
Seite 8 von 47

0.3 Zum Verständnis des Kapitels, Abgrenzungen, Vorbetrachtungen,
fachliche Erläuterungen, Einführung in das Pflichtenheft
0.3.1 Abgrenzungen
Zum Screenlayout gehört explizit und eindeutig weder die Vorgabe von (ausformuliertem) Content
noch die technische Umsetzung. Ausgenommen vom Screendesign ist außerdem das Workflow-
Repository (das Fall- und Dokumentenmanagement) „hinter“ dem Portal. Die Ausgestaltung des
Workflow-Repository obliegt der Hoheit der einzelnen zuständigen Behörden und Stellen, um
behördeninterne Änderungen an Fachverfahren ohne nach außen sichtbare Interferenzen zu
gewährleisten.
0.3.2 Vorbetrachtungen
Grundgedanke des einheitlichen Screenlayouts ist es
• eine einheitliche Corporate Identity (CI) und damit ein Corporate Design (CD) des Landes
NRW und aller EA in NRW sowie
• eine einheitliche Benutzeroberfläche hinsichtlich Navigationsdesign und Funktionalitäten
sicher zu stellen.
Seite 9 von 47

Durch eine vorgegebene Strukturierung der Inhalte wird ein einheitliches Informationsbild aller EA-
Portale geschaffen und Parallelarbeit vermieden. Dies ist auch im Interesse der
Dienstleistungserbringer. Ihnen wird damit ein größtmöglicher Komfort und eine maximierte
Bedienerfreundlichkeit geboten. Nach einem beliebigen Portal-Erstkontakt findet sich ein
Seitenbesucher unmittelbar auf allen Internetportalen der EA in NRW zurecht. Auch den EA selbst
wird dabei ein größtmöglicher Komfort und eine maximierte Bedienerfreundlichkeit zu Teil. Bei einem
fachlichen Austausch untereinander sind Referenzierungen und damit das Nachvollziehen von
Sachverhalten problemlos möglich. Darüber hinaus werden insbesondere evtl. notwendig werdende
Modifizierungen technisch standardisierbar.
Eine einheitliche Benutzeroberfläche bedeutet dabei keinesfalls der Verzicht auf eine eigene CI/CD
der EA und der ihnen zugeordneten Kommunen. Gestalterisch lassen sich durch designtechnische
Vorgaben (Cascading Style Sheets) individuelle CIs/CDs in einem (quasi) übergeordneten CI/CD
einbetten.
Insgesamt muss das Screendesign in seiner Gesamtstruktur modularisiert sein und eine sowohl
flexible als auch konsistente Fortschreibung des Navigationsdesigns und der Funktionalitäten
ermöglichen. Die Integration stufenbezogener vereinbarter Standards (DOL DLR) muss gewährleistet
sein.
0.3.2.1 Zielgruppe
Die Zielgruppe der EG-DLRL umfasst ganz allgemein Dienstleistungserbringer innerhalb der
Europäischen Union, die sich für eine Niederlassung in einem anderen EU-Land interessieren oder
Informationen zu grenzüberschreitenden Dienstleistungen benötigen.
Üblicherweise werden in einer Zielgruppenanalyse Basisdaten zu Alter, Geschlecht, Bildungsniveau
sowie soziokulturellem Hintergrund untersucht. Die Zielgruppe der EG-DLRL ist diesbezüglich in jeder
Hinsicht heterogen. Ausgegangen werden kann zumindest davon, dass Angehörige der Zielgruppe ein
geschätztes Mindestalter von ca. 24 Jahren 5 sowie einen Bildungsabschluss haben. Die Art des
Bildungsabschlusses ist dabei ebenso offen wie das im Focus des interessierten
Dienstleistungserbringers stehende Gewerbe.
Da ein Dienstleistungserbringer in einem beliebigen EU-Land beheimatet sein kann, darüber hinaus
möglicherweise aus einem nicht EU-Land immigriert ist und eine EU-Staatsbürgerschaft erworben hat,
ist auch keine Bestimmung der Sprache möglich.
Die Heterogenität der Zielgruppe verhindert des Weiteren eine Aussage über die IT-Affinität im Sinne
von Versiertheit im Umgang mit Internettechnologien.
Weitere implizite Zielgruppen werden Dienstleister aus Staaten außerhalb der Europäischen Union,
inländische Dienstleister und Dienstleistungsempfänger sein.
Zusammengefasst können folgende Klassifikationen festgehalten werden, die die
Zielgruppenheterogenität verdeutlichen:
5 Der Aussage zum Mindestalter wurde die durchschnittliche Mindestalteranforderung für Meisterprüfungen in Deutschland,
Stand Dezember 2009, zugrunde gelegt.
Seite 10 von 47

Aus den genannten Merkmalen der Zielgruppe(n) ergeben sich für ein EA-Portal folgende zu
berücksichtigende Aspekte:
• Die Dienstleistungserbringer sprechen eine beliebige Sprache.
Notation:
Eine effektiven Sprachpolitik ist für die Nachhaltigkeit der EA-Portale von hoher Bedeutung.
Die Eurydice-Studie ‚Schlüsselzahlen zum Sprachenlernen an den Schulen in Europa’, Stand
21. November 2008, legt den aktuellen Status von Sprachunterricht an den europäischen
Schulen dar. Die Studie zeigte, dass in 13 EU-Ländern Englisch als erste Fremdsprache
Pflicht ist. Außerdem lernen etwa 90% der Schüler im Sekundarunterricht Englisch. Ist das
Erlernen einer zweiten Fremdsprache verpflichtend, wird meist Französisch oder Deutsch
gelehrt. Zusammengenommen machen Englisch, Französisch, Deutsch, Spanisch und
Russisch 95% aller Sprachen, die von Schülern in der EU gelernt werden, aus.
• Die IT-Affinität im Sinne von Versiertheit im Umgang mit Internettechnologien ist
unterschiedlich und reicht von mangelhaften Grundkenntnissen im Umgang mit einem
Rechner und Internettechnologien bis hin zu umfassenden Kenntnissen im Umgang mit einem
Rechner und Internettechnologien.
• Die Dienstleistungserbringer haben unterschiedliche Einstellungen gegenüber der digitalen
Kommunikation und digitalen Abwicklung ihrer Interessen (Skepsis, Misstrauen, Neugier,
Interesse).
Seite 11 von 47

• Die Dienstleistungserbringer erwarten, dass sie mit Hilfe des EA-Portals ihre Interessen
zielorientiert und schnellstmöglich befriedigen können.
0.3.2.2 Zielplattform/en Zielgruppe
So heterogen wie die Zielgruppe selbst ist, so heterogen wird die technische Ausstattung der
Zielgruppe sein. Die technischen Anforderungen sind daher hinsichtlich Hard- und
Softwareausstattung auf den Zielrechnern so gering wie möglich zu halten.
E: Dazu gehört auch der weitestgehende Verzicht auf Browser-Plugins 6 .
0.3.2.3 Zielplattform/en EA-Portal-Betreiber
Die technische Ausstattung ist ebenfalls hinsichtlich der Betreiber eines EA-Portals von hoher
Relevanz. Es ist davon auszugehen, dass die Umsetzung und Bereitstellung eines EA-Portals mit
Hilfe von Content Management Systemen (CMS) 7 erfolgen wird. Die Leistungsfähigkeiten der
verwendeten CMS werden untereinander differieren. Insoweit müssen sich die Anforderungen der
Funktionalitäten an ein EA-Portal sowie die technische Umsetzbarkeit des Screendesigns auch an
den Optionen von CMS orientieren.
0.3.2.4 Funktionalitäten EA-Portal
In das Screendesign zu integrierende Grundfunktionalität ist:
• Suchfunktion,
die den Webseiteninhalt des EA-Portals einschließlich den Inhalt hinterlegter Dokumente im
EA-Portal durchsucht
In das Screendesign zu integrierende EA-Portal - spezifische Funktionalitäten sind:
• EA-Finder
• VSM 2.0
• Registrierungsoption zur Teilnahme am Workflow-Repository
• Login-Funktion zum Betreten des Workflow-Repository
• Passwort vergessen - Funktion
Idealerweise bedient der Seitenbesucher genau ein Sucheingabefeld. Der ausgelöste Suchvorgang
findet dann im Hintergrund in unterschiedlichen Datenbanken statt. Die Suchergebnisaufbereitung
muss für den Seitenbesucher eindeutig kenntlich machen, auf welche Quelle sich das Suchergebnis
gründet und eine direkte Verlinkung zur Fundstelle beinhalten. Außerdem ist eine erweiterte Suche
anzubieten die es dem Seitenbesucher ermöglicht, verfeinerte Suchkriterien gezielt für den EA-Finder
und die VSM eingeben zu können.
6 Zusatzsoftware für einen Browser mit der bestimmte Formate wie bspw. Flash ausgeführt werden.
7 Ein CMS ist ein Anwendungsprogramm, das die gemeinschaftliche Erstellung und Bearbeitung des Inhaltes von Text- und
Multimedia-Dokumenten ermöglicht und organisiert.
Seite 12 von 47

0.3.2.5 Inhalte EA-Portal
Die Inhalte der EA-Portale müssen BITV-konform darstellbar sein.
0.3.2.6 Gestaltung EA-Portals
Die Gestaltung des EA-Portals ist im Kapitel 0.4 und im Kapitel 0.5 festgehalten.
0.3.2.7 Mediale Aufbereitung – BITV
• Die mediale Aufbereitung muss BITV-konform erfolgen.
• Das Ziel der Website muss für den Seitenbesucher eindeutig erkennbar sein.
• Die Zielgruppe muss gestalterisch mit Hilfe von Themenbildern angesprochen werden.
• Die Bildschirmelemente müssen ihrer Bedeutung nach sinnvoll positioniert sein.
• Die Aufteilung der Screens muss nach Maßgabe des goldenen Schnitts erfolgen.
• Das Navigationsdesign muss übersichtlich, transparent und konsistent sein.
• Die Menüsprache muss eindeutig, prägnant und verständlich sein.
Unter Berücksichtigung der Nationalitätenvielfalt sind ggf. (zusätzlich) Symbolschaltflächen zu
verwenden.
• Um zu einem gewünschten Inhalt zu gelangen, sollten maximal drei Klicks notwendig sein.
• Farben zur Gestaltung der Screens sollen dem Thema des EA-Portals entsprechen und
harmonisch aufeinander abgestimmt sein.
• Die Qualität verwendeter Abbildungen muss hochwertig sein. Das Copyright verwendeter
Abbildungen muss zweifelsfrei geklärt und abgesichert sein.
0.3.3 Einführung in das Pflichtenheft
0.3.3.1 Inhalte und Struktur
Das Pflichtenheft beschreibt die Elemente des Screendesignentwurfs. Das Ziel ist eine einheitliche
und benutzerfreundliche Gestaltung der Internetportale der EA in NRW mit der Option für individuelle
Gestaltungsmöglichkeiten der EA. Die Inhalte werden in Darstellungsbeispielen veranschaulicht.
0.3.3.2 Corporate Design
Das Corporate Design der Internetportale der EA in NRW hat feststehende Basiselemente. Daneben
gibt es einen Spielraum, der den Anforderungen der unterschiedlichen EA in NRW in ihrer Nutzung
und Handhabung Rechnung trägt sowie Freiraum für individuelle Corporate Designs.
Die folgenden Basiselemente werden einheitlich auf den Internetportalen der EA in NRW eingesetzt
und tragen so zu einem gemeinsamen „Look and Feel“ bei. Die EA in NRW und das Land NRW
werden in ihrer Gesamtheit als wirtschaftlicher Standort wahrgenommen. Die Basiselemente:
Seite 13 von 47

• BMWI-Logobereich und EUGO-Logo
Im BMWI-Logobereich ist die Bild-Wort-Marke Einheitlicher Ansprechpartner / Point of Single
Contact zu hinterlegen. Die Bild-Wort-Marke wird den EA in NRW vom Ministerium für Wirtschaft,
Energie, Bauen, Wohnen und Verkehr des Landes Nordrhein-Westfalen verfügbar gemacht.
V: Der Hintergrund der Bild-Wort-Marke Einheitlicher Ansprechpartner / Point of Single Contact
entspricht der Hintergrundfarbe des Identitätsbereiches. Die Bild-Wort-Marke ist mit der Startseite
des EA-Portals zu verlinken.
Die Bild-Wort-Marke EUGO wird den EA in NRW vom Ministerium für Wirtschaft, Energie, Bauen,
Wohnen und Verkehr des Landes Nordrhein-Westfalen verfügbar gemacht. Sie ist
länderübergreifender Identifikationsträger und repräsentiert die Zugehörigkeit der einzelnen EU-
Länder zum europaweiten Netzwerk.
V: Die korrekte Wiedergabe der Bild-Wort-Marke EUGO in der blauen „Part of the EUGO
network-Version“ ist gemäß den EUGO brand guidelines vorzunehmen und verbindlich. Sie ist mit
ihrem unteren Rand bündig abschließend zum unteren Rand des Content-Bottoms zentriert
ausgerichtet zu den Navigationsschaltflächen in der Navigationsspalte zu hinterlegen.
• Die Screenaufteilung
V: Die Aufteilung in die fünf Bereiche Metanavigation, BMWI-Logobereich, Identitätsbereich,
Navigation mit der sie abschließenden Bild-Wort-Marke EUGO und Contentbereich (bestehend
Seite 14 von 47

aus Content-Header, Content-Body, Content-Bottom) ist die Basis für eine einheitliche
Erscheinung.
• Die Farben
V: Die Farben für Eingabefelder, Buttons, Navigation und Links sowie die Farben für
Eingabefelder, Buttons, Navigation und Links hinsichtlich ihres interaktiven Verhaltens (a:link,
a:visited, a:hover, a:focus, a:active) sind als Ausprägung einheitlicher Bedienelemente verbindlich.
• Die Schriften
V: Einheitliche Schriften und deren wiederkehrende Anordnung erleichtern den Betrachtern auch
auf unterschiedlichen Internetpräsenzen der EA in NRW die Orientierung und
Informationsaufnahme.
0.3.3.3 Gestaltungsgrundsätze
Die im Corporate Design verwendeten und mit ihren Positionen definierten Gestaltungselemente
erleichtern die Handhabung und Orientierung auf den einzelnen Internetseiten.
Die Platzierung der Bild-Wort-Marke Einheitlicher Ansprechpartner / Point of Single Contact oben links
am Kopf der Gestaltungsfläche repräsentiert die Zugehörigkeit zum EA-Netzwerk und ist verbindlich.
Die Farbfortsetzung der BMWI-Logo-Schutzzonenfarbe nach rechts ergibt eine einheitliche visuelle
Klammer für die Navigations- und Informationsebene.
Die Aufteilung der Gestaltungsfläche in einen Metanavigations-, einen BMWI-Logo-, einen Identitäts-
und Navigationsbereich mit der diesen abschließenden Bild-Wort-Marke EUGO sowie einen
Contentbereich wird durch eine Farbkodierung dargestellt.
Der Gesamthintergrund der Bildschirmfläche ist mit dem Farbwert #ffffff bzw. R:255, G:255, B:255
belegt. Die Aufteilung der Gestaltungsfläche wird mit Hilfe von genau 1 Pixel in der Höhe – Linien in
der Farbcodierung #ffffff bzw. R:255, G:255, B:255, dargestellt.
Der BMWI-Logo- und der Identitätsbereich schließen mit einer Linie mit dem Farbwert #000070 bzw.
R:0, G:0, B:112 von genau 10 Pixeln in der Höhe ab. Die Linie wird von der Gestaltungsflächenline
unterbrochen.
Die Farbwahl der Internetpräsenz orientiert sich in ihrer Anmutung an der Thematik und ihren Inhalten
sowie an bisher in Deutschland zur Dienstleistungsrichtlinie publizierten Internetpräsenzen (z.B.
http://www.dienstleistungsrichtlinie.de/) und dem Internetauftritt der Bundesregierung. Insoweit wird
bereits mit dieser Anlehnung ein Wiedererkennungswert induziert. Die Farben sind einerseits dem
Corporate Design unterworfen, bieten andererseits jedoch zusammen mit der Bildwahl, z.B. im
Identitätsbereich (EA-Logo-Gestaltungszone), genügend Spielraum für die individuelle Darstellung der
EA in NRW.
Die Schrift und ihre einheitliche Verwendung tragen zur Homogenität der Internetpräsenzen bei. Für
die Internetpräsenz werden Standardschriften der Betriebssysteme berücksichtigt.
Seite 15 von 47

0.3.3.4 Maßeinheiten
V: Als Maßeinheiten für die Positionierung und die Größenangaben von Layoutelementen
werden die relativen Einheiten Pixel (px), M-höhe (em) und Prozent (%) verwendet. Für die Angabe
von Schriftgrößen findet Prozent (%) und M-höhe (em) Verwendung. Formatierungen in absoluten
Einheiten wie Punkt (pt) oder Zentimeter (cm) sind für die Bildschirmdarstellung unzulässig. Bei CSS-
Anweisungen für Ausdrucke können diese unter Umständen sinnvoll sein.
0.4 Basiselemente
Die gestalterischen Grundlagen, auf denen das Screendesign der Internetportale der EA in NRW
beruht, setzen sich aus den für das Medium Internet relevanten Informationen und den im Corporate
Design festgelegten Basiselementen zusammen.
0.4.1 Bild-Wort-Marke „Einheitlicher Ansprechpartner“ und „Point of Single
Contact“
Die Bild-Wort-Marke „Einheitlicher Ansprechpartner“ / „Point of Single Contact“ des BMWI ist als
Kampagnen-Logo in die EA-Portale aufzunehmen. Die Bild-Wort-Marke „Einheitlicher
Ansprechpartner“ / „Point of Single Contact“ wird den EA in NRW vom Ministerium für Wirtschaft,
Energie, Bauen, Wohnen und Verkehr des Landes Nordrhein-Westfalen verfügbar gemacht.
V: Die korrekte Wiedergabe der Bild-Wort-Marke „Einheitlicher Ansprechpartner“ / „Point of
Single Contact“ des BMWI in Verbindung mit den Vereinbarungen der EA in NRW vom 25.02.2011 ist
verbindlich. Die Bild-Wort-Marke ist mit der Startseite des EA-Portals zu verlinken.
Auf der deutschsprachigen Version der EA-Portale ist die ausschließliche Verwendung der Bild-Wort-
Marke „Einheitlicher Ansprechpartner“ zulässig. Auf fremdsprachigen Versionen der EA-Portale ist die
ausschließliche Verwendung der Bild-Wort-Marke „Point of Single Contact“ zulässig.
0.4.1.1 Maße
Die Bild-Wort-Marke braucht, um repräsentativ wirken zu können, einen Freiraum: die Schutzzone.
V: Die Schutzzone entspricht 5 Pixel und umgibt diese zu allen Seiten. Eine Skalierung darf
ausschließlich proportional zu den Grundmaßen unter Wahrung der Schutzzone erfolgen. Die Bild-
Wort-Marke ist einschließlich ihrer Schutzzone zentriert auszurichten.
0.4.1.2 Farben
V: Die Bild-Wort-Marke steht auf einer Fläche mit dem Farbwert #cedbe4 bzw. R:206, G:219,
B:228. Andere Platzierungen auf Schwarz- oder Farbflächen sowie auf Bildern sind in den EA-
Portalen unzulässig.
0.4.1.3 Positionierung
V: Die Bild-Wort-Marke ist im BMWI-Logobereich zu platzieren.
Seite 16 von 47

0.4.2 Bild-Wort-Marke EUGO
Die Bild-Wort-Marke EUGO wird den EA in NRW vom Ministerium für Wirtschaft, Energie, Bauen,
Wohnen und Verkehr des Landes Nordrhein-Westfalen verfügbar gemacht.
V: Die korrekte Wiedergabe der Bild-Wort-Marke EUGO ist gemäß den EUGO brand guidelines
vorzunehmen und verbindlich.
0.4.2.1 Maße
Die Bild-Wort-Marke EUGO braucht, um repräsentativ wirken zu können, einen Freiraum: die
Schutzzone. Die Größe der Schutzzone richtet sich nach EUGO brand guidelines.
V: Die Höhe der Bild-Wort-Marke ist inklusive ihrer Schutzzone auf 80 px festzulegen. Die
Skalierung darf ausschließlich proportional zu den Grundmaßen erfolgen. Die sich daraus ergebende
Breite der Bild-Wort-Marke beträgt 164 px.
0.4.2.2 Farben
V: Die Bild-Wort-Marke EUGO steht auf einer Fläche mit dem Farbwert #ffffff bzw. R:255, G255,
B:255. Andere Platzierungen auf Schwarz- oder Farbflächen sowie auf Bildern sind in den EA-
Portalen unzulässig.
0.4.2.3 Positionierung
V: Die Bild-Wort-Marke EUGO ist, unabhängig von der Anzahl der Spalten der
Bildschirmdarstellung (Mindestspaltenanzahl 2: Navigationsbereich plus Contentbereich,
Maximalspaltenanzahl 3: Navigationsbereich plus Contentbereich plus rechte Randspalte als Infobox,
Gestaltungsfläche, 0.4.6, Infoboxen, 0.5.5.8), mit ihrem unteren Rand bündig abschließend zum
unteren Rand des Content-Bottoms zu hinterlegen.
Bei einer zweispaltigen Bildschirmdarstellung ist die Bild-Wort-Marke zentriert ausgerichtet zu den
Navigationsschaltflächen in der Navigationsspalte zu hinterlegen.
Bei einer dreispaltigen Bildschirmdarstellung kann die Bild-Wort-Marke in der dritten Spalte, die sich
rechts neben dem Contentbereich befindet, hinterlegt werden. Sie ist dann zentriert ausgerichtet zur
Breite der dritten Spalte zu positionieren.
Da die Screenhöhe in Abhängigkeit des Inhaltes des Content-Bodys variabel ist, muss die
Positionierung der Bild-Wort-Marke flexibel fließend sein.
0.4.3 Favicon
Das Favicon ist ein Icon, das die repräsentativen wieder erkennbaren Elemente des Corporate
Designs auf kleinstem Raum abbildet.
Die meisten aktuellen Browser unterstützen die Anzeige von Favicon. Je nach Version und Hersteller
des Browsers wird das Favicon in der Adresszeile, in der Anzeige der Lesezeichen und in einer
reiterbasierten Navigation anstelle des Standard-Icons für Websites angezeigt. Die Darstellung eines
Seite 17 von 47

Favicons ist auf 16 x 16 px, die Darstellungsgröße durch den Browser, optimiert. Als Dateiformat wird
standardmäßig .ICO verwendet.
E: Aufgrund der Bildmarkenelementdichte und der Dimension des Identitätsbereiches (EA-Logo-
Gestaltungszone) eignen sich weder Bildmarke noch Identitätsbereich für ein Favicon. Auf die
Verwendung eines Favicons sollte daher verzichtet werden.
0.4.4 Schriften
Als Systemschrift wird Verdana festgelegt. Da nicht zwingend davon ausgegangen werden kann, dass
die Systemschrift Verdana auf allen verwendeten Betriebssystemen der Nutzer installiert ist, wird eine
Folge von Alternativschriften angegeben: Helvetica, Arial, Tahoma, Sans Serif.
E: Die Angabe der Schriftgrößen sollte für einen barrierefreien Zugang in relativen
Prozentangaben bzw. em-Werten erfolgen, damit die Vergrößerung der Schriften durch den Benutzer
möglich ist.
Der Einsatz von Systemschriften erfordert keinen Erwerb von Nutzungsrechten und ist somit
kostenfrei.
0.4.5 Farben
Ein wesentliches Basiselement des Corporate Designs ist die Farbgestaltung.
V: Die folgenden Farbwerte sind verbindlich:
Farbwerte
Seiten-Hintergrundfarbe #ffffff bzw. R:255, G:255, B:255
EUGO-Logobereich-Hintergrundfarbe #ffffff bzw. R:255, G:255, B:255
Identitätsbereich-Hintergrundfarbe #cedbe4 bzw. R:206, G:219, B:228
Konturfarbe von Eingabefeldern #cedbe4 bzw. R:206, G:219, B:228
Flächenfarbe von Eingabefeldern #ffffff bzw. R:255, G:255, B:255
Konturfarbe von Buttons #cedbe4 bzw. R:206, G:219, B:228
Flächenfarbe von Buttons #ecf1f5 bzw. R:236, G:241, B:245
Farbkombinationen von Symbolschaltflächen und
Piktogrammen
#ffffff bzw. R:255, G:255, B:255 und
#000000 bzw. R:0, G:0, B:0
Farbe der Textlinks in der Metanavigation a:link, a:visited :
#002596 bzw. R:0, G:37, B:150
a:hover, a:focus, a:active:
#000000 bzw. R:0, G:0, B:0
mit background: #cedbe4 bzw. R:206,
G:219, B:228 und text-decoration: none
Seite 18 von 47

Konturfarbe von Navigationsschaltflächen der Navigation #ffffff bzw. R:255, G:255, B:255
Flächenfarbe der Navigationsschaltflächen der Navigation
a:link, a:visited
Flächenfarbe der Navigationsschaltflächen der Navigation
a:hover, a:focus, a:active
Ausnahme Navigationsschaltfläche Anmelden:
Die Flächenfarben der Navigationsschaltfläche Anmelden
sind identisch zu den Fächenfarben der sonstigen
Navigationsschaltflächen.
Zur Hervorhebung ist jedoch die Beschriftung in allen
Zuständen (a:link, a:visited, a:hover, a:focus, a;active) im
Schriftschnitt fett zu hinterlegen.
Bild-Wort-Marke „Einheitlicher Ansprechpartner“ / „Point of
Single Contact“ – Hintergrundfarbe
# ecf1f5 bzw. R:236, G:241, B:245
#cedbe4 bzw. R:206, G:219, B:228
#cedbe4 bzw. R:206, G:219, B:228
Hintergrundfarbe Contentbereich #f6f7f7 bzw. R:246, G:247, B:247
Textfarbe im Contentbereich #000000 bzw. R:0, G:0, B:0
Farbe von Textlinks im Contentbereich
die Textlinks sind mit einem führenden raquo; , gefolgt von
einem blank ( ) zu kennzeichnen
Farbe Textlink im Content-Bottom-Bereich
der Textlink nach oben ist mit einer nach oben gerichtete
Pfeilspitze in der Farbe #000000 bzw.: R:0, G:0; B:0 zu
kennzeichnen
a:link:
#002596 bzw. R:0, G:37, B:150
a:visited:
#002596 bzw. R:0, G:37, B:150
mit background: #cedbe4 bzw. R:206,
G:219, B:228 und text-decoration: none
a:hover, a:focus, a:active:
#000000 bzw. R:0, G:0, B:0
mit background: #cedbe4 bzw. R:206,
G:219, B:228 und text-decoration: none
a:link, a:visited, a:hover, a:focus,
a:active:
#000000 bzw. R:0, G:0, B:0
mit background: #cedbe4 bzw. R:206,
G:219, B:228 und text-decoration: none
Hintergrundfarbe Content-Bottom-Bereich #cedbe4 bzw. R:206, G:219, B:228
0.4.6 Gestaltungsfläche
Die Gestaltungsvorgaben wurden entwickelt, um ein optimales Erscheinungsbild der Websites bei
einer Bildschirmauflösung von 1024 px * 768 px zu gewährleisten. Gestalterisch wird auf Basis der
empfohlenen Bildschirmauflösung (1024 px * 768 px) von einer Gestaltungsfläche von 952 px
ausgegangen.
Seite 19 von 47

Die Breite der Gestaltungsfläche soll sich an die Browserfenstergröße des Nutzers anpassen. Diese
ist zu unterscheiden von der tatsächlichen Bildschirmauflösung, die unabhängig von der Größe des
Browserfensters bestimmt werden kann. In Hinblick auf die maximale Begrenzung der
Gestaltungsfläche über 952 px hinaus ist zu beachten, dass dabei die Lesbarkeit des Textes
gewährleistet ist. Damit sich das Layout beim Textzoom in der Größe anpassen kann, kann für die
maximale Breite die Einheit EM Verwendung finden.
E: Um eine adäquat lesbare Zeilenlänge zu erreichen sollte der Contentbereich aufgeteilt werden
in eine Absatzbreite von 480 px zzgl. einer Randspalte ( Infoboxen, 0.5.5.8) von 190 px. Sofern
eine Randspalte aufgenommen wird ist darauf hinzuweisen, dass eine höhere Auflösung als 800 px *
600 px zur Anzeige erforderlich ist.
Tabellen, Formulare, Grafiken und ähnlicher Content dürfen die volle Breite der Gestaltungsfläche
einnehmen.
Beim Verkleinern des Browserfensters unter 952 px sollten die Vorgaben der BITV (Barrierefreie
Informationstechnik-Verordnung vom 24.07.2002) eingehalten werden. Diese sehen vor, dass
horizontale Bildlaufleisten (Scrollbars) erst dann erscheinen, wenn die äußere Browserfensterbreite
kleiner als 800 px wird (minimale Begrenzung). Aus gestalterischer Sicht muss bei der flexiblen
Anpassung der Gestaltungsfläche an die Browserfenstergröße jeder Einzelfall abgewogen werden, da
breitere oder schmalere Browserfenster zu Kompromissen in Hinsicht auf die Gestaltung führen.
Gerade Websites mit repräsentativem Charakter sind darauf angewiesen, dass die Gestaltung bei
unterschiedlicher Browserfenstergröße ohne Einbußen erhalten bleibt. Auch die Darstellung von
Sonderfällen wie breite Datentabellen, komplexe Flash-Darstellungen, Flash-Videos oder die direkte
Zuordnung von Text und Bild im Contentbereich spricht gegen eine verkleinernde Anpassung an die
Browserfenstergröße.
Unabhängig von der flexiblen Anpassung im Browserfenster muss eine Vergrößerung der Schriftgröße
über die Einstellungen des Browsers oder die Tastatur möglich sein. Die reine Vergrößerung der
Website bei Schriftgradvergrößerung ist wie auch die entsprechende Möglichkeit in der neuen
Generation Browser (Internet Explorer 7.x und 8.x, Firefox 3.x, Opera 9.x) kein Ersatz hierfür, da bei
Nutzern mit kleinen Bildschirmauflösungen horizontale Bildlaufleisten erscheinen.
Eine vertikale Begrenzung ist nicht definiert, da die Anordnung und Länge der Seiten von der Struktur
und Darstellungsweise ihrer Inhalte abhängt.
V: Geht die Gestaltung in der Vertikalen jedoch stark über den sichtbaren Bereich hinaus, sollen
die Inhalte durch Sprungmarken angemessen gegliedert werden.
0.4.7 Screenaufteilung und Frames
V: Der Verzicht auf Frames ist verbindlich.
V: Die Gestaltungsfläche wird in fünf, konsistent platzierte und in ihren Funktionen einheitliche
Bereiche aufgeteilt. Dies erleichtert die Orientierung in den unterschiedlichen Präsenzen der EAs und
trägt in erheblichem Maße zu ihrer Wiedererkennung bei.
Seite 20 von 47

Die fünf Bereiche sind:
• die Metanavigation für die Sprachauswahl, die Items Kontakt, Impressum, Inhalt und das
Suchenfeld
• der BMWI-Logobereich für die Bild-Wort-Marke Einheitlicher Ansprechpartner / Single Point of
Contact
• der Identitätsbereich als EA-Logo-Gestaltungszone
• der Navigationsbereich mit den Navigationsebenen, ggf. auch mit hierarchisch tieferen
Ebenen und die ihn abschließende Bild-Wort-Marke EUGO-Logo
• der Contentbereich für die Breadcrumbnavigation mit optionalen Seitenfunktionalitäten
(Drucken, Seite empfehlen, Verlinkung zu Sozialen Netzwerken u.ä.), die Texte und
Bildinhalte sowie die Bottombelegung für die „nach-oben-Funktion“
0.4.8 Bild- und Formensprache
Die klare und eindeutige Bildsprache bedient sich der journalistischen und dokumentarischen Farb-
oder Schwarz-Weiß-Fotografie. Sie vermeidet grafische Nachbearbeitungen wie zum Beispiel
Verläufe, Filter oder andere Verfremdungen.
Seite 21 von 47

Die grafischen Elemente für die EA-Portale basieren auf den Formen Quadrat, Rechteck und Linie.
Sie werden zur Gliederung der Navigationsebenen oder zur strukturierten Darstellung der Inhalte
verwendet.
V: Eine Kombination unterschiedlicher Elemente ist ebenso zu vermeiden wie die Verwendung
von Kreisen, Ovalen, abgerundeten Ecken sowie grafischen 3D-Effekten. Die einzelnen Elemente
werden wie folgt definiert:
• Für Linienstärken gilt: 1px, 2px, 4px, 8px, 16px oder 20px.
• Für Quadrate und Rechtecke gilt: Ihre Seitenlängen müssen durch 4 teilbar.
• Für Dreiecke gilt: Es sind nur rechtwinklige Dreiecke oder im Schriftsatz vorhandene Winkel
zugelassen.
• Für Pfeile gilt: Die Pfeilspitze soll einen rechten Winkel bilden.
• Für Pfeilspitzen gilt: Die Pfeilspitze soll einen rechten Winkel bilden.
0.5 Screenaufteilung
Jeder EA in NRW tritt mit einem Internetportal an die Öffentlichkeit. Aufgrund der in bestimmten
Bereichen zu erwartenden unterschiedlichen Inhalte ist die visuelle Homogenität von großer
Bedeutung für die Identifikation und Wiedererkennung. Eine einheitliche Screenaufteilung in Bereiche
erleichtert den Benutzern die Navigation auf den verschiedenen Internetportalen.
0.5.1 Metanavigation
Die Metanavigation dient der Aufnahme ständig sichtbarer Servicefunktionen der gesamten
Internetpräsenz.
V: Die Metanavigation ist – wie alle anderen Navigationen – als Liste anzulegen.
Inhalte der Metanavigation sind:
• E: die Sprachauswahl
• V: die Items Kontakt, Impressum, Inhalt in genau dieser Reihenfolge
• V: das Suchenfeld sowie die den Suchvorgang auslösende Schaltfläche
0.5.1.1 Größe, Positionierung, Umfang (inhaltlich)
V: Die Metanavigation beginnt mindestens 5px, höchstens jedoch 10px unterhalb der
Gestaltungsfläche des Browserfensters.
V: Die Breite der Metanavigation ist an den Größenangaben zur Gestaltungsfläche auszurichten.
Dabei sind mindestens 10px, höchstens jedoch 15px sowohl zum linken als auch rechten
Bildschirmrand freibleibend.
Seite 22 von 47

V: Die Unterkante der Metanavigation bildet eine 1px starke weiße Linie, deren Breite der
Gesamtbreite der Metanavigation abzüglich des frei zu bleibenden Raumes zum linken und rechten
Bildschirmrandes entspricht.
E: Zur besseren Übersicht sollten innerhalb der Metanavigation nicht mehr als 8 Begriffe
verwendet werden.
0.5.1.2 Sprachauswahl
V: Die Sprachauswahl beginnt in Höhe des Identitätsbereiches.
E: Es bleiben mindestens 5 px, höchstens jedoch 10 px nach links frei.
Einheitliche Sprachregelungen und Benennungen erleichtern den Besuchern das schnelle Finden von
Inhalten einerseits, andererseits wird ein hoher Wiedererkennungswert auf allen EA-Portalen erzielt.
Des Weiteren ist eine effektive Sprachpolitik für die Nachhaltigkeit der EA-Portale von hoher
Bedeutung. Die Eurydice-Studie ‚Schlüsselzahlen zum Sprachenlernen an den Schulen in Europa’,
Stand 21. November 2008, legt den aktuellen Status von Sprachunterricht an den europäischen
Schulen dar. Die Studie zeigte, dass in 13 EU-Ländern Englisch als erste Fremdsprache Pflicht ist.
Außerdem lernen etwa 90% der Schüler im Sekundarunterricht Englisch. Ist das Erlernen einer
zweiten Fremdsprache verpflichtend, wird meist Französisch oder Deutsch gelehrt.
Zusammengenommen machen Englisch, Französisch, Deutsch, Spanisch und Russisch 95% aller
Sprachen, die von Schülern in der EU gelernt werden, aus.
E: sukzessive Aufnahme der Sprachauswahloptionen: English Français Español
V: Wird eine Sprachauswahl angeboten, ist die Darstellung von Flaggen für die Sprachauswahl
unzulässig, da unkorrekte Aussagen möglich sind: So wird Englisch auch außerhalb Großbritanniens
und Spanisch auch außerhalb Spaniens gesprochen. Eine Flaggendarstellung stände zudem in
Konkurrenz mit der Gestaltung des Identitätsbereiches.
V: Die Sprachauswahlen sind in der genannten Reihenfolge zu benennen. Werden weitere
Sprachauswahlen als die genannten angeboten, sind diese anzuhängen oder alternativ zur Wahrung
der Übersichtlichkeit der Auswahloptionen in der Metanavigation in einer Auswahlbox zu hinterlegen.
Sofern eine Auswahlbox genutzt wird, sind die auswählbaren Sprachen in alphabetisch aufsteigender
Reihenfolge zu hinterlegen.
V: Bei Auswahl eines Sprachangebotes ist nach dem Wechsel der Contentsprache die zuvor
gewählte Sprachauswahlschaltfläche durch die Sprachauswahl Deutsch zu ersetzen.
Bei Nutzung einer Auswahlbox ist die Sprache Deutsch permanent zu integrieren.
V: Sprachauswahlangebote beziehen sich ausschließlich auf allgemeinen Content eines EA-
Portals. Formulare und Dokumente sind aus Gründen der Rechtssicherheit ausschließlich in der
Amtssprache Deutsch bereit zu stellen.
Es ist sicher zu stellen, dass Übersetzungen, insbesondere das Navigationsdesign betreffend, auf
allen EA-Portalen einheitlich sind. Ein sukzessiver Übersetzungsprozess muss daher begleitet und
qualitativ gesichert sein.
Seite 23 von 47

E: Bestellung einer Person („Kümmerers“), die die EA-Portale über das Umsetzungsprojekt EG-
DLRL in NRW hinaus begleitet.
0.5.1.3 Alternative: Google-Übersetzer
Optional kann der Google-Übersetzer eingebunden werden. Wird hiervon Gebrauch gemacht, kann
die Metanavigation um die benötigte Höhe erweitert werden.
V: Bei Einbindung des Google-Übersetzers ist er in Höhe des Identitätsbereiches zu
positionieren.
E: Es bleiben mindestens 5 px, höchstens jedoch 10 px nach links frei.
0.5.1.4 Kontakt, Impressum, Inhalt
V: Die Items Kontakt, Impressum, Inhalt sind in der angegebenen Reihenfolge aufzuführen und
rechtsbündig auszurichten.
0.5.1.4.1 Kontakt
V: Der Item Kontakt und seine Bezeichnung ist verbindlich. Er kennzeichnet die Verlinkung auf
das E-Mail-Kontaktformular, das Antworten und Reaktionen auf eine spezifische, jedoch
unverbindliche Frage an den EA übermittelt. Die Nutzung des Kontaktformulars gewährleistet eine
strukturierte Datenübermittlung.
Weitere Angaben zum Kontaktformular Kontaktformular, 0.6.2 .
0.5.1.4.2 Impressum
V: Der Item Impressum und seine Bezeichnung ist verbindlich. Er bezeichnet die Nennung der
presserechtlichen Verantwortlichen der Internetpräsenz, der Gestalter und Umsetzer der Website
sowie eventuelle rechtliche Hinweise. Die Pflichtangaben gem. § 5 Telemediengesetz (TMG) in
Verbindung mit § 55 Staatsvertrag für Rundfunk und Telemedien (RStV) müssen enthalten sein.
Die Angabe einer Standard-Mail-Adresse des EAs ist nicht empfehlenswert. Eine strukturierte
Kommunikation wird nur über die Nutzung des Kontaktformulars sichergestellt. Die E-Mail-Adresse
des EAs kann dem DL in der nachgelagerten Fallbearbeitung mitgeteilt werden.
V: Der öffentliche Schlüssel des Zertifikates der Verwaltung ist zum Download anzubieten
E: Angabe einer Mailadresse zur Meldung von Problemen bei Technik und Bedienung der Seite
0.5.1.4.3 Inhalt
V: Der Item Inhalt und seine Bezeichnung ist verbindlich. Er bezeichnet eine verlinkte
Strukturübersicht (Sitemap) der Internetpräsenz, die gem. BITV für alle Webseiten vorzusehen ist, die
aus einer Vielzahl an Seiten besteht.
Seite 24 von 47

0.5.1.5 Suche
V: Das Suchenfeld sowie die den Suchvorgang auslösende Schaltfläche sind als letzter Item
rechts außen zu hinterlegen.
Damit sich die Suche beim Textzoom in der Größe anpassen kann, sollte für die Breite die Einheit EM
Verwendung finden. Es ist möglich, einen Suchbegriff direkt in ein Feld einzugeben.
E: Das Eingabefeld sollte mit dem Wort „Suchbegriff“ vorbelegt sein.
E: Bei einer erfolglosen Suche sollte auf der Suchergebnisseite auf das Infocenter
Gewerbeanmeldung NRW ( http://www.gewerbeanmeldung.nrw.de ) verlinkt werden.
V: Als Suchenoptionen vorgesehen sein müssen:
• eine contentindizierte Suche auf der Seite des EA-Portals, die auch auf dem
EA-Portal hinterlegte Dokumente einschließlich Formulare durchsucht
• ein generelles Recherchemodul (Datencrawler), das in Echtzeit auf Informationen in
unterschiedlichen Datenquellen zugreifen kann und das Suchergebnis kontextabhängig in
einer Ergebnismaske zusammengestellt zur Anzeige bringt
• der EA-Finder des Landes NRW
• die Verwaltungssuchmaschine (VSM) in der Version 2.0:
In der Funktion „Zuständigkeitsfinder“ der VSM 2.0 sind die sächlichen und räumlichen
Zuständigkeiten für Verwaltungsleistungen gezielt festgelegt. Nutzer erhalten bei der Anfrage nach
einer Zuständigkeit für eine Verwaltungsleistung eine eindeutige Auskunft, wer für ihr Anliegen
zuständig ist. Diese Zuständigkeit wird auf dem zentralen Frontend als „Top-Treffer“ ausgegeben -
zusätzlich zu den herkömmlichen Treffern aus dem Index der Suchmaschine. Kommunen und EAs,
welche die VSM als Infrastrukturelement nutzen, können wählen, ob sie nur die Treffer der
Suchmaschine, nur die Treffer des Zuständigkeitsfinders oder beides integrieren und auf der eigenen
Seite anzeigen.
Funktionen:
1. Eindeutige Zuständigkeiten
Als örtlicher Bezugspunkt gelten die Städte und Gemeinden in Nordrhein-Westfalen. In einem
relationalen Datenbanksystem werden – neben dem Suchindex der bisherigen VSM 1.0 – die
Verwaltungsleistungen erfasst und mit Ortsbezug strukturiert gespeichert und verfügbar gemacht.
Auf diese Weise wird eindeutig erfasst, an welche Stelle sich Bürger und Unternehmen für eine
bestimmte Verwaltungsleistung in ihrer Stadt wenden müssen.
2. Informationen auf einen Blick
Die für eine Leistung zuständige Stelle wird mit Adresse, Telefonnummer, E-Mail-Adresse, URL
eingetragen. Nutzer erhalten diese Basisinformationen damit unmittelbar nach Eingabe von
Suchbegriff und Ortsbezug, ohne sich durch eine Liste von Treffer-Seiten klicken zu müssen.
Seite 25 von 47

3. Verweise auf Zuständigkeiten außerhalb der klassischen Verwaltung
In die VSM 2.0 können auch Behörden, Körperschaften, Verbände und Kammern zweckdienlich
integriert werden, die außerhalb dieses Schemas organisiert sind. Dies gilt z.B. für die
berufsständischen Kammern, die sich quer zu kommunalen Grenzen organisieren, jeweils
unterschiedlich gegliedert sind, nicht Teil der klassischen Verwaltung sind, jedoch
Verwaltungsleistungen nach LeiKa übernehmen (z.B. Gewerbeanmeldung). In der VSM 2.0
werden räumliche Zuständigkeiten auf die unterste Ebene (Städte und Gemeinden)
heruntergebrochen. Auf diese Weise können auch Zuständigkeiten einer IHK, einer
Handwerkskammer oder etwa eines Dachverbands aufgenommen werden.
4. Basis-Infrastruktur für kommunale Portale oder Portale von EAs
Über eine Webservice-Schnittstelle werden die Zuständigkeiten für die Integration in kommunale
Portale oder EA-Portale bereitgestellt.
5. Zuständigkeiten können auch zentral abgerufen werden
Mit der Webseite der Verwaltungssuchmaschine (www.verwaltungssuchmaschine.de) haben
Bürger und Unternehmen weiterhin eine zentrale Anlaufstelle, wenn sie Informationen zu
Verwaltungsleistungen benötigen.
6. Das Beste aus beiden Welten
Mit der VSM 2.0 werden die Vorteile einer Suchmaschine und eines Zuständigkeitsfinders optimal
miteinander kombiniert. Die Suchmaschine steuert die dezentralen Webseiten der Verwaltungen
in Nordrhein-Westfalen an, sammelt die Dokumente in einem Index und stellt sie so als zentrale
Infrastrukturkomponente zur Verfügung. Der Zuständigkeitsfinder wird von den Verwaltungen
selbst mit Informationen bestückt, die in einer zentralen Datenbank vorgehalten werden. Wird
nach einer Verwaltungsleistung gesucht, für die eine eindeutige Zuständigkeit besteht, wird diese
als Top-Treffer am Anfang der Seite angezeigt. Wird nach Informationen der Verwaltung gesucht,
die nicht einer konkreten Leistung entsprechen, findet die Suchmaschine die passenden
Verwaltungsseiten und bietet sie als Treffer an. Der Suchende wird somit nicht enttäuscht, wenn
keine konkrete Zuständigkeit angezeigt werden kann, weil er trotzdem hilfreiche Links zu weiteren
Informationen erhält. Kommunen und EAs können per XML-Schnittstelle sowohl die Ergebnisse
der klassischen VSM auf ihren Seiten einbinden als auch über eine Webservice-Schnittstelle die
Ergebnisse des Zuständigkeitsfinders.
7. Dezentrale Pflege und automatisierte Pflege
Über einen webbasierten Pflegeclient werden Zuständigkeiten durch die Behörden dezentral
gepflegt. Möglich ist auch ein Import von Zuständigkeiten in die VSM 2.0.
Die Ergebnisausgabe für die Suche nach einer Verwaltungsleistung könnte wie auf der Abbildung
gegliedert sein: Top-Treffer für die Zuständigkeit mit genauen Kontaktinformationen, gefolgt von
Suchergebnissen der VSM mit gewähltem örtlichem Bezug: Quelle Erläuterungen VSM: d-NRW 8
V: Die Anbindung weiterer Suchmaschinen ist unzulässig.
8 Weitere Informationen zur technischen Anbindung der VSM sind unter http://vsm.d-nrw.de/index/information zu finden
Seite 26 von 47

0.5.1.6 Sprachregelungen
V: Neben den verbindlichen Benennungen innerhalb der Metanavigation werden folgende
Begriffe auf den Internetpräsenzen der EAs eingesetzt:
Download
Bezeichnung für den Download-Bereich, aus dem Dateien auf den Computer des Anwenders geladen
werden können.
E-Mail
Bezeichnung für eine formlose E-Mail-Funktion direkt an den EA
Glossar
Bezeichnung für ein alphabetisch geordnetes, erläuterndes Stichwortverzeichnis
Linkliste oder Links
Bezeichnung für eine Liste verlinkter, weiterer Websites
Los!
Aufruf der Suchfunktion innerhalb der Internetpräsenz
Newsletter
Benennung für ein An- bzw. Abmeldeformular für den Bezug eines Newsletters des Betreibers der
Internetpräsenz.
RSS
Bezeichnung für den Bezug eines RSS-Feeds
Textversion
Link, der eine Nur-Text-Version der Internetpräsenz aufruft
(Soweit auch nach bestem Bemühen die Erstellung eines barrierefreien Internetangebots nicht
möglich ist, ist ein alternatives, barrierefreies Angebot zur Verfügung zu stellen, dass äquivalente
Funktionalitäten und Informationen gleicher Aktualität enthält, soweit es die technischen Möglichkeiten
zulassen. Bei Verwendung nicht barrierefreier Technologien sind diese zu ersetzen, sobald aufgrund
der technologischen Entwicklung äquivalente, zugängliche Lösungen verfügbar und einsetzbar sind.)
Empfehlung: Die Platzierung des Links sollte in der Zeile der Breadcrumbnavigation erfolgen.
Upload
Bezeichnung für den Upload-Bereich, aus dem Dateien vom Computer des Anwenders auf das Portal
geladen werden können
0.5.1.7 Buttons und Piktogramme
V: Als einziger Button ist, ausgenommen von der optionalen Nutzung des Google-Übersetzers, in
der Metanavigation der Button zum Auslösen des Suchvorganges zulässig. Piktogramme sind in der
Metanavigation unzulässig.
Seite 27 von 47

0.5.1.8 Schriften
V: Die Navigation wird in der Systemschrift Verdana regulär gesetzt, die Schriftgröße beträgt
0.85em. Bezugsgröße für die Schriftgröße ist der Browserdefault 16 Pixel. Die Reihenfolge der
Alternativschriften ist Helvetica, Arial, Tahoma, Sans Serif.
E: Textlinks in der Metanavigation werden durch mindestens zwei Leerzeichen voneinander
getrennt.
0.5.1.9 Interaktives Verhalten
Es ist zwischen Hover, Focus-/Active, Visited und Unvisited Links zu differenzieren.
V: Das Linkverhalten der Textlinks ist wie folgt zu definieren:
a:link, a:visited : #002596 bzw. R:0, G:37, B:150
a:hover, a:focus, a:active : #000000 bzw. R:0, G:0, B:
0.5.2 BMWI-Logobereich
mit background: #cedbe4 bzw. R:206, G:219, B:228 und
text-decoration: none
V: Im BMWI-Logobereich wird ausschließlich die Bild-Wort-Marke Einheitlicher Ansprechpartner /
Single Point of Contact gemäß den Vorgaben zur Bild-Wort-Marke BMWI in Verbindung mit den
Vereinbarungen der EA in NRW vom 25.02.2011 verwendet.
0.5.2.1 Maße
V: Die Höhe des BMWI-Logobereiches beträgt 100 px. Dem BMWI-Logobereich schließt sich
eine horizontale Linie mit dem Farbwert #000070 bzw. R:0, G:0, B:112 von genau 10 Pixeln in der
Höhe an.
Die Breite des BMWI-Logobereiches entspricht der Breite des Navigationsbereiches.
0.5.2.2 Positionierung
V: Die Bild-Wort-Marke ist, inklusive einer Schutzzone von mindestens 5 Pixel zu allen Seiten
des BMWI-Logobereiches, horizontal und vertikal zentriert im BMWI-Logobereich zu hinterlegen.
V: Die BMWI-Logobereich-Hintergrundfarbe #cedbe4 bzw. R:206, G:219, B:278 ist verpflichtend.
0.5.2.3 Interaktives Verhalten
V: Die Bild-Wort-Marke Einheitlicher Ansprechpartner / Single Point of Contact ist mit der
Startseite des EA-Portals zu verlinken.
0.5.3 Identitätsbereich (EA-Logo-Gestaltungszone)
Durch eine aussagekräftige Gestaltung des Identitätsbereiches wird der jeweilige EA in NRW deutlich
gekennzeichnet.
Seite 28 von 47

V: Der Identitätsbereich dient der Wiedererkennung und als Orientierungshilfe für die Besucher
der Internetportale und muss auf allen Seiten eingesetzt werden.
V: Die Platzierung von Navigationselementen im Identitätsbereich ist nicht gestattet.
Die Hintergrundfarbe des Identitätsbereiches ist die gestalterische Verbindung zur Bild-Wort-Marke
Einheitlicher Ansprechpartner / Single Point of Contact.
V: Die Farbcodierung #cedbe4 bzw. R:206, G:219, B:228 ist daher verpflichtend.
V: Um die Zugänglichkeit sicherzustellen, sind Bildelemente nur als Hintergrundbilder
zugelassen. Text ist ausschließlich als HTML innerhalb eines DIV-Bereiches darzustellen.
E: Über die Ausgestaltung des Identitätsbereiches, ausgenommen der Hintergrundfarbe,
entscheidet der jeweilige EA in Kooperation mit den ihm zugeordneten Kommunen. Es ist darauf zu
achten, dass der Logobereich optisch nicht beeinträchtigt wird. Der Identitätsbereich darf vollständig
durch eine Fotostrecke und Grafiken abgedeckt werden.
0.5.3.1 Größe, Positionierung
V: Der Identitätsbereich schließt mit seiner Oberkante bündig mit der Metanavigation ab. Links
wird er durch den BMWI-Logobereich mit einer in der Horizontalen 1 px breiten und in der Vertikalen
110 px hohen Linie in der Farbkodierung #ffffff nzw. R:255,G:255,B:255 begrenzt. Die Breite des
Identitätsbereiches und der Linie sind an der Breitenangabe zur Metanavigation auszurichten.
Um den EA ausreichend Raum für eine aussagekräftige Gestaltung des Identitätsbereiches zugeben,
beträgt die Höhe 100 px. Bei Schriftvergrößerung durch den Nutzer belegt er gegebenenfalls mehr
Raum in der Höhe. Dem Identitätsbereich schließt sich eine horizontale Linie mit dem Farbwert
#000070 bzw. R:0, G:0, B:112 von genau 10 Pixeln in der Höhe an.
0.5.4 Navigationsbereich
Der Navigationsbereich nimmt alle Navigationsebenen auf:
E: Die Navigationstiefe sollte nicht mehr als 3 Ebenen einschließlich der ersten Hierarchieebene
umfassen.
Seite 29 von 47

V: Die weiteren Ebenen klappen - wie bei einer Ordnerstruktur - unterhalb des gewählten
Navigationspunktes aus. Die Navigation ist als Liste anzulegen.
0.5.4.1 Größe, Positionierung
Die Breite des Navigationsbereiches ist variabel. Zulässig sind bis zu zweizeilige Navigationseinträge.
Wird die Schriftgrößeneinstellung vom Nutzer erhöht, wächst auch die Breite.
V: Die Fixierung einer Mindestbreite ist unzulässig, da Anwender mit Tunnelblick-Syndrom bei
starker Verkleinerung der Webseite störende Weißfelder präsentiert bekämen.
V: Der Navigationsbereich beginnt am linken Rand der Gestaltungsfläche mit einem
Mindestabstand von 5 px zum Rand selbst. Er schließt sich mit einer horizontalen 1 px hohen Linie in
der Farbkodierung #f0000 bzw. R:255,G:255,B:255 an der Oberkante unmittelbar an der unteren
blauen Linie, die den BMWI-Logobereich abschließt, an.
0.5.4.2 Sprachregelungen und Verlinkungen
Einheitliche Sprachregelungen und Benennungen in den unterschiedlichen Internetpräsenzen und
Onlinemedien erleichtern den Besuchern die Orientierung und Navigation.
Aus diesem Grund wird die Benennung und Reihenfolge für die oberste Navigationsebene, für einen
Teilbereich der nächstfolgenden Navigationsebene sowie die Verlinkungen vorgegeben:
Hauptmenüeintrag Untermenü Link/s zu
Anmelden . / . Login einschl. Registrierung
Unser Angebot freibleibend zur Aufnahme
von:
• individuelle
Informationen des EAs
• regionale
Informationen
• Gebietskarten
• kommunale Beratung
• Beratung der
Kammern
• Beratung anderer
Stellen
Unternehmensgründung • Einstellung und
Beschäftigung
• Gründung
• Handelsregister
• Öffentliche Förderung
Partnern (Kommunen, Kammern etc.)
Weiterführenden Infos
Verknüpfung mit
Verfahrensbeschreibungen/Formularpool
ggfs. Beschreibungen, Formulare,
Infocenter Gewerbemeldung
Seite 30 von 47

Unternehmensführung • Berichtspflichten
• Fusion
• Hilfen in Notlagen und
Krisen
• Öffentliche
Ausschreibungen
• Steuern und Abgaben
Unternehmensbeendigung Geschäftsaufgabe
Verfahrensinformationen A-
Z
Geschäftsübertragung
Zugang zu
Verfahrensinformationen über
A-Z-Suche, Liste der
Verfahren und/oder
Suchfunktion, wünschenswert
wäre ein Tätigkeitsorientierter
Zugang (siehe 0.5.4.3);
enthalten sind jeweils die
Punkte:
• Name des Verfahrens
• Grundinformation
• Zuständige Stelle
• Voraussetzungen
- - - - - - - - - - - - - - - - - - - - - -
• Erforderliche
Unterlagen
• Gebühren
• Bearbeitungsdauer
• Sonstige Hinweise
• Weiterführende
Informationen
Formulare freibleibend zur Aufnahme
eines Formularpools
Verbraucherfragen freibleibend zur Aufnahme
9 Frequently Asked Questions - Liste
bspw. einer FAQ 9 für
Verbraucher
Formulare
Formulare/Merkblätter
Formulare, zuständige Stellen
optional
optional
Seite 31 von 47

„Platzhalter“ freibleibend optional
V: Die Hauptmenüeinträge sind einschließlich ihrer Bezeichnungen verbindlich.
E: Für ein einfaches Auffinden der Untermenüeinträge des Hauptmenüeintrags
Verfahrensinformationen A-Z sollte eine Suchfunktion, ein Register A-Z oder eine ähnliche
Hilfestellung angeboten werden.
Die als freibleibend bezeichneten Untermenüeinträge sind hinsichtlich Verwendung und
Bezeichnungen wahlfrei.
V: Den Navigationseinträgen (Hauptmenüeinträge und Untermenüeinträge) voranzustellen ist
eine Pfeilspitze mit der Farbcodierung #000000 bzw. R:0, G:0, B:0.
V: Nicht ausgewählten Menüeinträgen ist eine nach rechts gerichtete Pfeilspitze voranzustellen.
Ausgewählten Menüeinträgen, die ein Untermenü beinhalten und Menüeinträgen, deren Untermenü
ausklappt ist, ist eine nach unten gerichtete Pfeilspitze voranzustellen.
Bei Auswahl eines Menüeintrages mit Untermenüs muss nicht zwingend Text zum angeklickten
Menüeintrag angezeigt werden. Stattdessen kann im Contentbereich weiterhin der Inhalt des
Bildschirmes angezeigt werden, der vor der Auswahl des Menüeintrages in der Ansicht war.
0.5.4.3 Tätigkeitsorientierter Zugang
Wünschenswert aus Sicht des DL wäre ein tätigkeitsorientierter Zugang wie er bspw. vom
Gründungsnetzwerk NRW
( http://www.gewerbeanmeldung.nrw.de ) angeboten wird. Ohne diese Option muss ein DL sich durch
ein EA-Portal-Informationsangebot ‚hindurchhangeln’, ohne zwingend die für ihn und sein konkretes
Berufsbild relevanten Informationen auffinden zu können.
E: Folgende Herangehensweise wird durch die AG Portal empfohlen:
• das Infocenter Gewerbeanmeldung NRW ( http://www.gewerbeanmeldung.nrw.de )
vollständig integrieren oder
• auf das Infocenter Gewerbeanmeldung NRW ( http://www.gewerbeanmeldung.nrw.de )
verlinken
• eine Verlinkung auf das Infocenter Gewerbeanmeldung NRW
(http://www.gewerbeanmeldung.nrw.de) sollte mindestens auf der zweiten Navigationsebene,
z.B. unter dem Hauptmenüpunkt Unternehmensgründung erfolgen sowie unterhalb eines
Suchergebnisses aufgenommen werden.
WE: ein von den EA selbst erstellter tätigkeitsorientierter Index
0.5.4.4 Formulare
Das Hauptmenü Formulare dient zur Aufnahme eines Formularpools.
Seite 32 von 47

E: Für eine komfortable Bereitstellung und Verwaltung von Formularen kann ein Formularserver
eingebunden werden.
0.5.4.5 Schriften
V: Im Sinne eines einheitlichen Erscheinungsbildes ist für die Navigation ein einheitlicher
Schrifttyp zu verwenden. Die Navigation wird in der Systemschrift Verdana regulär gesetzt, die
Schriftgröße beträgt 0.85em. für die Schriftgröße ist der Browserdefault 16 Pixel. Die Reihenfolge der
Alternativschriften ist Verdana, Helvetica, Arial, Tahoma, Sans Serif.
0.5.4.6 Interaktives Verhalten
V: Es ist zwischen link/visited und hover/focus/active Links zu differenzieren. Die Textfarbe der
Menüeinträge in der Navigation bleibt bei allen Linkzuständen unverändert. Die Konturfarbe der
Navigationsschaltflächen bleibt bei allen Linkzuständen unverändert.
V: Das Linkverhalten für die Navigationsschaltflächen ist wie folgt zu definieren:
a:link, a:visited : #ecf1f5 bzw. R:236, G:241, B:245
a:hover:, a:focus, a:active : #cedbe4 bzw. R:206, G:219, B:228
Ausnahme Navigationsschaltfläche Anmelden:
a:link, a:visited : #cedbe4 bzw. R:206, G:219, B:228
a:hover:, a:focus, a:active : #ecf1f5 bzw. R:236, G:241, B:245
0.5.4.7 Bild-Wort-Marke EUGO
V: Der Navigationsbereich schließt mit der Bild-Wort-Marke EUGO, 0.4.2, ab.
0.5.4.8 Interaktives Verhalten EUGO-Logo
V: Die Bild-Wort-Marke EUGO ist mit dem zentralen EUGO Portal zu verlinken. Die Hinterlegung
des Links ist verbindlich:
0.5.5 Contentbereich
Der Contentbereich beinhaltet die redaktionellen Inhalte der Internetpräsenz. Diese können, der
Komplexität der Thematik der Internetportale der EA entsprechend, unterschiedlich sein: Text- und
Bildinformationen, Listen, Links, Datenbankanbindungen, Downloadbereiche etc.
0.5.5.1 Größe, Positionierung
V: Der Contentbereich beginnt mit seiner linken Seite direkt am Navigationsbereich. Oben
schließt der Contentbereich an der Unterkante des Identitätsbereiches an. Die Breite des
Contentbereiches ist an den Größenangaben zum Identitätsbereich (EA-Logo-Gestaltungszone)
Seite 33 von 47

auszurichten. Auf der rechten Seite bleibt ein Streifen von mindestens 10 px als Abstand zum inneren
Browserrand geschützt. Nach unten ist der Contentbereich unbegrenzt.
E: Der Inhalt des Contentbereiches sollte einen Mindestabstand zum Navigationsbereich von 5px
einhalten. Der Inhalt des Contentbereiches sollte einen Mindestabstand zur Unterkante der
Breadcrumbnavigation von 5 px einhalten.
0.5.5.2 Breadcrumbnavigation
V: Im Header des Contentbereiches ist eine Breadcrumbnavigation (Darstellung der Navigation
in Form eines linearen Pfades, der die aktuelle Position in der Internetpräsenz wiedergibt) zu
hinterlegen.
V: Die Unterkante der Breadcrumbnavigation ist in Höhe der Unterkante der ersten Schaltfläche
der Navigation, Anmelden. Die Unterkante bildet eine 1 px starke weiße Linie, deren Breite der
Gesamtbreite des Identitätsbereiches entspricht. Die Breite der Linie ist somit an der Breitenangabe
zum Identitätsbereich auszurichten.
Optional können auf der Höhe der Breadcrumbnavigation rechtsbündig Service-Funktionen,
abgebildet als Piktogramme, aufgenommen werden.
Service-Funktionen können sein: Drucken, Seite empfehlen oder Verlinkungen zu Sozialen
Netzwerkdiensten wie z.B. Twitter.
0.5.5.3 Sprungmarke zum Seitenanfang
V: Am Ende des Contentbereiches, dem Content-Bottom, ist eine Sprungmarke zum
Seitenanfang rechtsbündig zu hinterlegen.
E: die Sprungmarke sollte sowohl mit einem Piktogramm als auch einem Textlink hinterlegt
werden.
V: Die Sprungmarke ist mit einer 1 px starken weißen Linie, deren Breite der Gesamtbreite der
Breite der Unterkante der Breadcrumbnavigation entspricht, vom ihr vorangehenden Inhalt des
Contentbereiches abzugrenzen. Zur Signalisierung des Seitenendes ist der Content-Bottom optisch
mit dem Farbwert #cedbe4 bzw. R:206, G:219, B:228 hervorzuheben. Der zu hinterlegende
Innenabstand (padding) beträgt 5 px.
0.5.5.4 Buttons, Piktogramme
Im Contentbereich können sowohl Textlinks als auch Text in Form von Grafikelementen als Buttons
verwendet werden. Werden im Contentbereich Piktogramme eingesetzt, müssen diese mit der
Gesamterscheinung korrespondieren. Der Piktogrammstil muss dem Erscheinungsbild der
Internetpräsenz entsprechen und sich an den Vorgaben für die Formensprache orientieren.
Seite 34 von 47

V: Piktogramme dürfen nicht als Hintergrundbilder realisiert werden und müssen mit sinnvollen
Alttexten versehen sein. Kommen Programmicons, zum Beispiel im Downloadbereich, zum Einsatz,
werden sie der verfügbaren Datei vorangestellt.
Innerhalb des Contentbereiches gibt es unterschiedliche Möglichkeiten Links anzulegen:
• Funktionen, zum Beispiel für Bestellungen oder Download von Dateien.
• Textlinks als Inhaltsverzeichnis, die direkt zu den entsprechenden Positionen im gleichen
Contentbereich führen.
• Sprungmarken, die zur inhaltlichen Gliederung innerhalb des Contentbereiches verwendet
werden.
• Textlinks, die zu anderen Seiten innerhalb der eigenen Internetpräsenz führen, zum
Beispiel zur Fortsetzung eines Textanrisses.
• Links zu externen Internetadressen.
Links, welche die eigene Internetpräsenz verlassen, sollen immer in einem weiteren,
separaten Browserfenster geöffnet werden.
V: Das Verlassen der Website ist durch ein Icon mit einem entsprechenden Alttext
anzukündigen. Das die ‚Website verlassen’ symbolisierende Icon ist verpflichtend.
E: Die Wortwahl der Links kann jeder Betreiber frei wählen. Es werden im Sinne der
Einheitlichkeit folgende Vorschläge gemacht:
o Die Benennung soll eindeutig und kurz sein.
o Die Bezeichnungen sollen dem allgemeinen deutschen Sprachgebrauch entsprechen.
Abkürzungen sowie so genanntes "Amts- bzw. Behördendeutsch" sind zu vermeiden.
o Interne Dateinamen dürfen nicht verwendet werden.
• Funktionen werden in einer einfachen Form benannt:
o "Drucken", anstelle von "Print-Version" und Ähnlichem (Die Anzeige einer
Druckversion auf dem Bildschirm ist bei Einsatz eines entsprechenden CSS nicht
notwendig.)
o "Bestellen", anstelle von "Broschüre bestellen" etc.
o "Download" oder "PDF-Download", anstelle von "Herunterladen" und Ähnlichem.
• Verweise, die der Fortsetzung von Textanrissen dienen, tragen eine Bezeichnung, aus denen
eindeutig der Inhalt der Zielseite hervorgeht.
E: Die gleichlautende mehrfache Verwendung von "mehr" oder "weiter" auf einer Seite ist zu
vermeiden.
0.5.5.5 Schriften
V: Im Contentbereich wird die Systemschrift Verdana verwendet.
E: Wenn Überschriften, Thementitel oder ähnliches als Grafiken gesetzt werden, ist darauf zu
achten, dass die Zugänglichkeit des Textes und die semantische Auszeichnung mit entsprechenden
HTML-Tags (h1, h2, b, legend, u.ä.) gewährleisten ist. Dies ist zur Gewährleistung der Barrierefreiheit
wie zur Suchmaschinenoptimierung einer Seite unerlässlich.
Seite 35 von 47

V: Die verbindlichen Schriftgrößen sind ausgehend von BezugsgrößeBrowserdefault 16 Pixel:
Überschriften, Auszeichnung H1 Verdana, 1.2em
Überschriften, Auszeichnung H2 Verdana, 1.0em
Thementitel, Untertitel, Tabellenüberschriften,
Artikelzusammenfassungen
Verdana, 0.8em, regular
Mengentexte Verdana, 0.8em, regular
Hervorhebungen im Mengentext Verdana, 0.8em, bold
Bildunterschriften Verdana, 0.8em, regular
Copyright am Textende Verdana, 0.8em, regular
V: Die Reihenfolge der Alternativschriften ist "Helvetica, Arial, Tahoma, Sans Serif". Ein
Zeilenabstand von 1.5em ist zwingend.
0.5.5.6 Interaktives Verhalten
V: Es ist zwischen link, visited und hover/focus/active Links zu differenzieren. Das Linkverhalten
der Textlinks im Contentbereich ist wie folgt zu definieren:
a:link: #002596 bzw. R:0, G:37, B:150
a:visited: #002596 bzw. R:0, G:37, B:150
mit background #cedbe4 bzw.: R:206, G:219, B:228
a:hover, a:focus, a:active: #000 bzw. R:0, G:0, B:0 mit
background: #cedbe4 bzw. R:206, G:219, B:228 und
text-decoration: none
0.5.5.7 Abbildungen
E: Werden Abbildungen von einem Text umflossen, wird zwischen dem Text und dem Bild einen
Mindestabstand von 16px eingehalten.
0.5.5.8 Infoboxen
Die Aufnahme von (Quick) Info-Boxen zur exponierten Darstellung von Informationen mit
Teasercharakter im rechten Bereich der Contentfläche ist den Betreibern eines EA-Portals freigestellt.
V: Für die Informationen vorgesehen ist die rechte Randspalte ( Gestaltungsfläche, 0.4.6). Bei
Nutzung der Randspalte ist als Schriftart Verdana, 0.75em, regulär bei einem Zeilenabstand von
1.3em zu wählen.
Seite 36 von 47

0.5.5.9 Startseite eines EA-Portals
E: Auf der Startseite sollte ein ausschließlicher umfangreicher Mengentext vermieden werden.
Zur Einstimmung sowie zur Auflockerung des Erscheinungsbildes beim Erstkontakt mit einem EA-
Portal sollte eine dem Thema des EA-Portals entsprechende Eyecatcher-Abbildung aufgenommen
werden.
0.5.5.10 Kontaktformular
V: Aufbau und Inhalt des Kontaktformulars sind verbindlich Darstellungsbeispiel
Kontaktformular
Die Nutzung des Kontaktformulars gewährleistet eine wohlstrukturierte Datenübermittlung.
Im Kontaktformular soll so viel wie nötig und so wenig wie möglich abgefragt werden. Hier hinterlegte
Daten führen nicht zwingend zu einem antragsrelevanten Kontakt zwischen DL und EA. Es handelt
sich vielmehr um eine unverbindliche Kontaktaufnahme. Die Daten im Kontaktformular sind daher
noch nicht von Interesse für eine Metaformularverwendung.
Die Portale der EAs stellen zentrale Anlaufpunkte für Dienstleister aus ganz Europa dar. Die
Internetportale der EAs sollten gegen Phishing-Versuche abgesichert sein und gleichzeitig die
Eingabe von vertraulichen Informationen/personenbezogenen Daten auf den Formularseiten gegen
ein Mitlesen schützen. Für die Betreiber der EA-Portale ist zudem eine Entschärfung der
Spamproblematik von Interesse.
E: Absicherung der Webseite durch Installation eines geeigneten Zertifikates,
verschlüsseltes Kommunikationsangebot (https)
Sofern eine Kommunikation ohne Angabe der E-Mail-Adresse des EAs erfolgt , kann die Abwicklung
über einen automatisch generierten Link auf das Kontaktformular in der Mailantwort des EAs an den
DL erfolgen. Beispiel Mailtext:
. . .
Hinweis:
Diese E-Mail wurde automatisch erstellt. Auf die Absenderadresse kann nicht geantwortet
werden. Bitte verwenden Sie für jede schriftliche Anfrage das Kontaktformular:
http://www.eap-xy.de/kontaktformular/
0.5.5.11 Anmelden-Bildschirm
V: Aufbau und Inhalt des Anmelden-Bildschirms sind verbindlich Darstellungsbeispiel
Anmelden-Bildschirm
Der Anmelden-Bildschirm vereint die notwendigen Optionen für das Betreten eines geschützten
Bereiches.
0.5.5.11.1 Login
Seite 37 von 47

Bei Verwaltungsprozessen, die eine Unterschrift des Antragstellers erfordern, ist bei gewünschter
vollständiger elektronischer Abwicklung für Geschäftsfälle, die die Schriftlichkeit nach dem
Verwaltungsverfahrensgesetz NRW (VwVfG NRW) erfordern, die Einbindung der qualifizierten
Signatur erforderlich. Da der DL einen Anspruch auf vollständige elektronische Abwicklung hat, muss
der EA ein System bereit stellen, dass qualifizierte Signaturen aufnehmen, erkennen, prüfen und
speichern kann. Für Dienstleister, denen die Beschaffung einer Signaturkarte mit aufgebrachter
qualifizierter Signatur nicht zumutbar oder möglich ist, ist übergangsweise eine pragmatische Lösung
vorzusehen. Diese Lösung ist insbesondere für ausländische Dienstleister in Ländern unerlässlich, mit
denen auf Basis von EU-Initiativen noch keine gegenseitige Anerkennung von qualifizierten
Signaturen möglich ist.
E: Mit Hilfe des Logins wird zu einem Uploadbereich verzweigt. In diesem Uploadbereich kann
ein gescanntes Personaldokument als Signaturersatz hochgeladen werden, mit dem eine möglichst
hohe Sicherheit bei der Kommunikation zwischen DL und EA gewährleistbar wird. Die Authentizität
und Integrität von Dokumenten kann bis zu einer EU-weiten Harmonisierung ggf. ähnlich wie beim
ELSTER-Mantelbogenverfahren (ergänzender und/oder nachträglicher Papierversand unterzeichneter
Antragsunterlagen vor Bescheiderteilung) anerkannt werden.
WE: Zukunftsorientiert mündet das Login in einem Workflow-Repository zur Abwicklung eines
personalisierten Fallmanagements.
0.5.5.11.2 Passwort vergessen
V: Für den Fall, dass das Passwort für den Login vergessen wurde, muss es möglich sein,
automatisiert Zugangsdaten anfordern zu können.
0.5.5.11.3 Registrieren
Die Registrierung unterscheidet zwischen der Registrierung als Natürliche Person und als Juristische
Person, da sich daraus unterschiedliche zwingend notwendig anzugebende Pflichtdaten ergeben.
Nicht jedem Portalnutzer werden die Unterschiede der Begrifflichkeiten bekannt sein. Dies ist
insbesondere nicht von ausländischen DL zu erwarten. Die Begriffe sind daher mit einem Link zu
verknüpfen, der einen jeweils entsprechenden Erläuterungstext als PopUp-Fenster einblendet. Der
Link ist in Form eines hochgestellten Fragezeichens neben den Begriffen Natürliche Person und
Juristische Person anzubringen Darstellungsbeispiele Registrieren-Bildschirme
V: Der Registrierungsvorgang ist Voraussetzung zum Erhalt eines Passworts für den Login.
0.5.5.12 Registrieren-Bildschirm
V: Aufbau und Inhalt der Registrieren-Bildschirme sind verbindlich Darstellungsbeispiel
Registrieren-Bildschirme
Mit der Registrierung wird die Grundlage für die Aufnahme eines antragsrelevanten Kontaktes
zwischen DL und EA geschaffen. Die Daten sind für eine Metaformularverwendung von Interesse.
Seite 38 von 47

Die Datenerhebung folgt der gängigen Vorgehensweise bei Registrierungsvorgängen im Internet. Eine
Akzeptanz bei den DL kann angenommen werden.
Die Angabe der Daten unterstreicht sowohl gegenüber dem DL als auch gegenüber dem EA die
Ernsthaftigkeit der Kontaktaufnahme.
E: Zur Vereinfachung der Datenverwaltung sowohl für den DL als auch den EA sollte die
Nutzung einer Metaformulartechnik berücksichtigt werden (Sammeln erfasster Daten im Hintergrund,
mit denen weitere Formulare, soweit möglich, bereits automatisch aufgefüllt und angeboten werden
können).
0.6 Darstellungsbeispiele und Notationen
Die Gestaltungsbeispiele für ein Internetportal der EA in NRW veranschaulichen die Corporate-
Design-Richtlinien. Die Beispiele visualisieren auch den gestalterischen Spielraum innerhalb der
Vorgaben und Empfehlungen.
Seite 39 von 47

0.6.1 Startseite
Quellangaben der Einzelelemente Bildkomposition Eyecatcher:
Motiv FotografIn
‚Beim Frisör’ Ute Pelz
Teigbearbeitung Moonlight
Holzpaket Moonlight
Dacharbeiten stormpic
Pflasterarbeiten N-Loader
Malerarbeiten barcode
Alle Motive entnommen: www.aboutpixel.de, kostenlose und lizenzfreie Bilddatenbank für den privaten
und kommerziellen Gebrauch.
Seite 40 von 47

0.6.2 Kontaktformular
Seite 41 von 47

0.6.3 Anmelden-Bildschirm
Seite 42 von 47

0.6.4 Passwort vergessen-Bildschirm
Seite 43 von 47

0.6.5 Registrieren-Bildschirm
Bildschirm 1, Natürliche Person
Seite 44 von 47

Bildschirm 2, Juristische Person
Seite 45 von 47

0.6.6 Suchergebnis / Suche, erweiterte
Die Ausgabe könnte wie folgt aussehen:
Seite 46 von 47

0.6.7 Technische Standards
V: Alle Internetportale der EA in NRW müssen dem HTML 4.1 / XHTML 1.0 Standard
entsprechen und mittels CSS Level 2 formatiert sein. Dabei sollte auf die Darstellungseigenheiten von
populären Browsern (z.B. MS Internet Explorer ab Version 6 und Mozilla Firefox ab Version 1.5)
Rücksicht genommen werden. Die Umsetzung einer gesonderten Textversion wird dadurch in der
Regel unnötig.
E: Die Auslieferung auf verschiedenen Medien (Bildschirm, PDA, Handheld, Druckern),
Plattformen (Windows, Linux, Mac OS) und Browsern mit geringerem Verbreitungsgrad (z.B. Apple
Safari, Opera, Konqueror) soll berücksichtigt werden.
V: Das Informationsangebot der EA in NRW im Internet ist gemäß dem Gleichstellungsgesetz
vom 01.05.2002 behindertengerecht, somit barrierefrei zugänglich anzubieten.
Die Vorgaben der BITV, Barrierefreie Informationstechnik-Verordnung vom 24.07.2002, sind zu
befolgen. Besondere Beachtung finden müssen:
• die Interpretierbarkeit durch Eingabe- und Ausgabegeräte für Körperbehinderte (Braille-
Ausgabe, Screenreader), bei veränderten Benutzereinstellungen (Farben, Schriften,
Schriftgröße) und ohne Zusatztechnologien (Plugins, Java, JavaScript, CSS). Dazu gehört
auch die verpflichtende Aufnahme von Übersprunglinks zu den Hauptelementen der Seite.
Diese dienen dazu, dass Nutzer, die mit einem Screenreader, textbasierenden Medien oder
nicht-css-aktivierten Browsern die Seite besuchen, unrelevante Teile überspringen können um
gleich zum Beispiel zum Inhalt oder zu einer Navigation zu kommen.
• die Gruppierung inhaltlich verwandter oder zusammenhängender Hyperlinks. Die Gruppen
sind eindeutig zu benennen und müssen einen Mechanismus enthalten, der das Umgehen der
Gruppe ermöglicht.
• semantische Auszeichnungen entsprechend der entsprechend Ziff. 3.5 – 3.7 der BITV
Seite 47 von 47