Kontakt

Hauptkapitel
Designsystem
Unterkapitel
Muster (Patterns)
Gilt für
Websites & Webapplikationen (mit Login)

Darstellung und Verhalten

Der Kontakt wird immer in der Akzentfarbe der Seite dargestellt (siehe Farben). Auf Seiten ohne Akzentfarbe wird er blau dargestellt.

Varianten

Standard

Der Kontakt besteht aus:

  • H2-Titel «Kontakt»
  • Name des Kontakts
  • Beschreibungstext (optional)
  • Link für weitere Informationen (optional)
  • Adresse
    • Name, Strasse, Nr., PLZ, Ort
    • Link «Route anzeigen»
    • Link «Adresse kopieren»
    • Text (optional; Möglichkeiten: Text mit Links, Bold-Formatierung und nicht nummerierte Listen)
  • Telefonnummer 1 (Hinweis: Telefonnummern werden immer im Format +41 XX XXX XX XX geschrieben)
    • Text (optional; Möglichkeiten: Text mit Links, Bold-Formatierung und nicht nummerierte Listen)
  • Telefonnummer 2 (optional)
    • Text (optional; Möglichkeiten: Text mit Links, Bold-Formatierung und nicht nummerierte Listen)
    • Bei zwei Telefonnummern wird ein Titel pro Nummer angezeigt
  • E-Mail-Adresse
    • Text (optional; Möglichkeiten: Text mit Links, Bold-Formatierung und nicht nummerierte Listen)
  • Link (beispielsweise für Kontaktformular)
    • Titel
    • Text-Link
    • Text (optional; Möglichkeiten: Text mit Links, Bold-Formatierung und nicht nummerierte Listen)

Mit Medienkontakt

Vordefinierter Titel «Medienkontakt» und Link «anzeigen+». Bei Klick wird Folgendes angezeigt:

  • Name des Kontakts
  • Optionaler Beschreibungstext
  • Adress-Block (hier können ein oder mehrere Kontaktoptionen angezeigt werden)
    • Adresse
    • Telefonnummer
    • E-Mail-Adresse
  • Link «Schliessen», bei Klick wird der Medienkontakt wieder minimiert.

Mit Karte

Position der Adresse auf der Karte mit folgenden Funktionalitäten:

  • Option «Route anzeigen», öffnet Google Maps.
  • Standort anzeigen.
  • Zoomen (+/-)

Mit Social-Media-Kanälen

  • Vordefinierter Titel «Folgen Sie uns auf».
  • Social Media Icons der jeweiligen Plattformen. Bei Klick wird die entsprechende Webseite in einem neuen Fenster oder Tab geöffnet.

Kontakt klein

Der Kontakt klein besteht aus:

  • Name des Kontakts
  • Kontaktoption (Inhalt und Verhalten gleich wie bei «Kontakt Standard»):
  • Adresse
    • Telefonnummer
    • E-Mail

Verwendung

Für jeden Inhalt gibt es eine dedizierte Stelle, an die sich die Bürgerinnen und Bürger wenden können. Jede Seite hat genau einen Kontakt. Nutzende sehen auf den ersten Blick, dass es sich um einen Kontakt handelt. Durch die Farbe springt er optisch ins Auge.

Unabhängig von der Variante besteht ein Kontakt immer aus einem Namen und mindestens einer Kontaktoption (Adresse, Telefonnummer, E-Mail-Adresse).

Standard-Kontakt

Ein Standard Kontakt ist auf jeder Seite Pflicht. Den Kontakt zeigen wir immer unterhalb des Inhaltsbereichs einer Seite an. Es können eine oder mehrere Kontaktoptionen angezeigt werden. Zusätzlich bestehen folgende Optionen:

Medienkontakt

Dieser wird mit einem «anzeigen +» dargestellt, d.h. er erscheint erst, wenn man darauf klickt. Hier wird die Kommunikationsabteilung des eigentlichen Kontaktes angezeigt.

Karte

Wird im Kontakt eine Adresse angezeigt, kann der Kontakt mit einer Karte ergänzt werden. Dies macht vor allem Sinn bei Kontakten, bei denen Nutzende vor Ort etwas erledigen können (bspw. Schalter).

Social-Media-Kanäle

Zum Kontakt können noch die Social-Media-Kanäle des Kontaktes angezeigt werden.

Kontakt klein

Einen kleinen Kontakt nutzen wir nur innerhalb von Serviceseiten. Er ist Teil einer Handlungsaufforderung. Möchten Nutzende einen Service nutzen (bspw. «Namen ändern» nach einer Eheschliessung), erhalten sie auf der Serviceseite Informationen über den Ablauf und darüber, was sie machen müssen. Ist es möglich, den Service bspw. per Telefon oder Mail zu erledigen, dann wird die benötigte Adresse mit dem Element Kontakt klein angezeigt.

Wann der Kontakt klein die falsche Option ist

Im Kontakt klein kann nur eine Kontaktoption angezeigt werden. Stehen mehrere Kontaktoptionen für den Service zur Verfügung, so zeigen wir sie den Nutzenden mit der Servicebox an.

Kann der Service vor Ort durchgeführt werden, so nutzen wir nicht den Kontakt klein . In diesem Fall eignet sich das Element Standort finden mit den möglichen Standorten, da hier mit der Adresse eine Karte angezeigt wird.

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch