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 im Footer der Seite 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 «-», bei Klick wird der Medienkontakt wieder minimiert.

Mit zusätzlichen Kontakten:

Analog zum Hauptkontakt sind bis zu drei zusätzliche Kontakte möglich. 

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

Mit Social-Media-Kanälen:

Social Media Icons der jeweiligen Plattformen. Bei Klick wird die entsprechende Webseite in einem neuen Fenster oder Tab geöffnet.

Kontakt klein (Kontakt Service in Figma)

Der Kontakt klein besteht aus:

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

Kontakt Inhalt

Der Kontakt Inhalt besteht aus:

  • Name des Kontakts
  • Eine oder mehrere Kontaktoptionen (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 «+» dargestellt, d.h. er erscheint erst, wenn man darauf klickt. Hier wird die Kommunikationsabteilung des eigentlichen Kontaktes angezeigt.

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 Inhalt

Wir verwenden den «Kontakt Inhalt», falls eine Kontaktaufnahme direkt im Inhalt der Seite sinnvoll ist.

Kontakt

Digitale Verwaltung – Information und Dialog

E-Mail

zhweb@zh.ch