AWO im Web

Der Header enthält das AWO-Logo, die Hauptnavigation und wichtige Schnellzugriffe. Das Logo steht vorzugsweise links oben auf weißem Hintergrund und verlinkt zur Startseite.

Die Hauptnavigation zeigt die wichtigsten Seitenbereiche. Unterseiten können über ein Mega-Menü aufgerufen werden. Hover-Effekte und farbliche Hervorhebungen kennzeichnen aktive Menüpunkte und erleichtern die Orientierung.

Eine optionale Schnellleiste bietet Zugriff auf Funktionen wie Suche, Sprachwechsel oder Leichte Sprache.

Der Hero-Bereich schließt direkt an den Header an und prägt den ersten visuellen Eindruck. Er besteht meist aus einem großflächigen, aussagekräftigen Bild, das den Charakter der Website vermittelt.

Auf Startseiten kann das Bild durch eine kurze Headline (5–8 Wörter), einen knappen Beschreibungstext und maximal zwei Buttons ergänzt werden. Texte müssen dabei ausreichend kontrastreich und gut lesbar sein.

Die Inhaltsbereiche bestehen aus flexibel kombinierbaren Content-Elementen wie Texten, Bildern, Kacheln, Akkordeons und Infoboxen. Unterschiedliche Layouts und dezente Farbflächen sorgen für Abwechslung und eine klare Struktur.

Jede Seite besitzt eine eindeutige Hauptüberschrift (H1). Weitere Überschriften folgen einer logischen Hierarchie. Fließtexte sollten gut lesbar und in ihrer Zeilenlänge begrenzt sein. Als Richtwert gelten etwa 80 Zeichen pro Zeile.

Der Footer bildet den Abschluss jeder Seite und bietet weiterführende Informationen und Kontaktmöglichkeiten. Er sollte sich optisch vom übrigen Seiteninhalt abheben.

Typische Bestandteile sind eine Übersicht der wichtigsten Seitenbereiche, Social-Media-Links und eine optionale Newsletter-Anmeldung. Rechtliche Pflichtangaben wie Impressum, Datenschutz und Barrierefreiheitserklärung müssen von jeder Seite aus erreichbar sein.

Der Mitgliedsantrag sollte prominent und leicht auffindbar platziert sein. Empfehlenswert ist z. B. ein gut sichtbarer Call-to-Action-Button in der Navigation oder auf der Startseite, eine eigene Seite „Mitglied werden“ oder eine direkte Verlinkung aus thematisch passenden Inhaltsbereichen. Besucher*innen sollten nicht lange suchen müssen, um den Antrag zu finden.

Das verwendete Feldformat sollte immer zur erwarteten Antwort passen. Eine Übersicht gängiger Formate:

• Freitext-Felder (einzeiliges Textfeld) werden für kurze, freie Texteingaben genutzt. Geeignet für Angaben, bei denen keine vordefinierten Antwortmöglichkeiten sinnvoll sind.
• Mehrzeilige Textfelder eignen sich für längere Freitexte, bei denen mehr als eine Zeile benötigt wird.
• Ein Dropdown (Auswahlmenü) zeigt beim Klick eine Liste von Optionen, aus denen genau eine ausgewählt werden kann. Geeignet für Felder mit vielen vordefinierten Antwortmöglichkeiten, da es wenig Platz benötigt.
• Radio-Buttons sind in der Regel rund und ermöglichen die Auswahl genau einer Option aus einer überschaubaren Liste – alle Optionen sind sofort auf einen Blick sichtbar, ohne dass ein Klick notwendig ist. Geeignet für Felder mit zwei bis maximal vier Optionen.
• Checkboxen sind in der Regel eckig (quadratisch) und ermöglichen – im Gegensatz zu Radio- Buttons – die gleichzeitige Auswahl mehrerer Optionen. Außerdem werden sie für einzelne Ja/Nein-Bestätigungen verwendet, die aktiv angehakt werden müssen.
• Datumsfelder sind spezielle formatierte Eingabefeld für Datumsangaben, häufig mit einem Kalender-Picker, über den das Datum ausgewählt werden kann.
• Zahlenfelder akzeptieren ausschließlich numerische Eingaben akzeptiert. Typische Anwendungsfälle: Postleitzahl, Anzahl von Personen.
• Datei-Upload ermöglicht es Besucher*innen, eine Datei hochzuladen.

Formulare sollten so kurz wie möglich gehalten werden – sowohl aus Nutzerfreundlichkeits- als auch aus Datenschutzperspektive sollten nur die Angaben abgefragt werden, die wirklich notwendig sind. Wenn der Antrag viele Felder umfasst, empfiehlt es sich, das Formular in mehrere Schritte aufzuteilen (sogenanntes Multi-Step-Formular). So sehen Besucher*innen auf einen Blick immer nur eine überschaubare Anzahl an Fragen und fühlen sich nicht von der Gesamtlänge des Formulars überwältigt.

• Bedingte Felder: Nicht alle Fragen sind für alle Besucher*innen relevant. Mit sogenannten bedingten Feldern (englisch: Conditional Logic) lassen sich Felder so einrichten, dass sie nur erscheinen, wenn vorher eine bestimmte Antwort gegeben wurde.
• Pflichtfelder: Es sollten so wenige Pflichtfelder wie möglich verwendet werden – jedes zusätzliche Pflichtfeld erhöht die Hemmschwelle und kann dazu führen, dass Besucher*innen das Formular abbrechen. Als Pflichtfeld sollten nur Angaben markiert werden, die für die Bearbeitung des Antrags zwingend erforderlich sind. Optionale Felder können angeboten werden, sollten aber klar als freiwillig erkennbar sein. Pflichtfelder werden üblicherweise mit einem Sternchen (*) gekennzeichnet – mit einem erklärenden Hinweis am Anfang oder Ende des Formulars (z. B. „* Pflichtfeld“).
• Bestätigung: Nach dem Absenden des Formulars sollte stets eine klare Rückmeldung erfolgen – z. B. durch eine Bestätigungsseite („Ihr Antrag wurde erfolgreich übermittelt“) und/oder eine automatische Bestätigungs- E-Mail. So wissen Besucher*innen, dass ihre Eingabe angekommen ist.
• Datenschutz: Da bei Mitgliedsanträgen und anderen Formularen personenbezogene Daten erfasst werden, muss direkt beim Formular ein Hinweis auf die Datenschutzerklärung sowie eine entsprechende Einwilligungserklärung vorhanden sein – üblicherweise als Checkbox, die aktiv angehakt werden muss. Auf die entsprechende Datenschutzerklärung muss direkt innerhalb des Formulars verlinkt werden.
• Mobile Tauglichkeit: Formulare sollten auf allen Endgeräten gut bedienbar sein.
• Barrierefreiheit: Alle Felder sollten eindeutig beschriftet sein, Pflichtfelder klar gekennzeichnet und Fehlermeldungen verständlich formuliert – direkt neben dem betroffenen Feld.