GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

GESIS-Web-Styleguide

Einleitung

Diese Seiten präsentieren den GESIS-Web-Styleguide. Dieser Styleguide zeigt und erklärt, wie GESIS' Corporate Design auf Webseiten umgesetzt wird. Er umfasst unter anderem Regeln zum Layout, zu Farben, Schriftarten und dem HTML-Quelltext. Ein über alle GESIS-Webseiten konsequent umgesetzter, einheitlicher Stil hat erheblichen positiven Einfluss auf das Benutzererlebnis (User Experience, UX): Besucher*innen finden sich auf Webseiten schnell zurecht, wenn diese mit wiederkehrenden, standardisierten Layouts, Komponenten, Mustern und Metaphern aufgebaut sind.

Auch Besucher*innen der GESIS-Webseiten soll es leichtfallen, ihre Anliegen möglichst leicht zu erreichen. Beispiele für wiederkehrende Anwendungsfälle sind:

  • das Navigieren über ein Seitenmenü,
  • das Finden von Informationen über einen Suchschlitz,
  • das Ausfüllen eines HTML-Formulars,
  • der Wechsel der Seitensprache oder
  • eine Kontaktaufnahme.

Inkonsistentes Design, fehlerhafte Darstellungen auf Smartphones, nicht unterstützte Browser und Unbedienbarkeit bei reiner Tastaturbedienung (Stichwort Barrierefreiheit) steigern die Frustration und führen schnell zum Seitenverlassen.

Ein Beispiel zur Navigation entlang mehrerer GESIS-Webangebote

GESIS bietet vielfältige, aufeinander abgestimmte und miteinander integrierte Web-Angebote an. Benutzer*innen kommen im Rahmen ihrer virtuellen GESIS-Besuche häufig mit mehren GESIS-Webseiten in Berührung, wie folgendes Beispiel zeigt:

  • Eine Forscherin sucht für ihr aktuelles Thema nach aktuellen Daten zu deutschen Wahlstudien.
  • Über die Google-Suchanfrage "Wahlstudien" wird sie auf ein Angebot bei GESIS hingewiesen. Sie folgt dem Link und steigt damit in den GESIS-Kontext ein: Sie landet auf der Seite https://www.gesis.org/wahlen/wahlen-home, einer Seite innerhalb GESIS' Content-Management-System GESIS-Web (www.gesis.org).
  • Nach erster Lektüre der GESIS-Wahlstudien-Seiten konkretisiert sich ihr Interesse auf das Thema Politbarometer 2020. Um dazu passende Forschungsdaten zu finden, bedient sie sich des Suchschlitzes im oberen Seitenbereich. Nach Eingabe der Suchanfrage "politbarometer 2020" erscheinen verlinkte Suchergebnisse. Sie folgt dort dem Link zu gefundenen Forschungsdaten.
  • Die Besucherin befindet sich jetzt auf einer Seite im Kontext der GESIS-Suche (search.gesis.org). Für ihre Forschungsarbeit möchte sie nun den kumulierten Datensatz des Politbarometers 2020 herunterladen. Beim Klick auf den Download-Link erscheint ein Dialogfenster: Das Dialogfenster weist darauf hin, dass nur angemeldete Benutzer den Datensatz herunterladen können. Über einen weiteren Link gelangt die Forscherin zur Benutzerregistrierung und -anmeldung.
  • Sie ist nun auf den Seiten des GESIS Login (login.gesis.org) gelandet. Nach Ausfüllen und Absenden eines HTML-Formulars hat die Benutzerin den ersten Schritt ihrer GESIS-Benutzerkonto-Registrierung absolviert. Sie erhält eine E-Mail mit einem Link zur Aktivierung des Benutzerkontos. Der Aufruf dieses Links schließt die Registrierung ab, und die Benutzerin ist nun angemeldet. Sie wird außerdem auf die ursprüngliche GESIS-Suche-Seite zum Politbarometer-Datensatz weitergeleitet.
  • Da ihre Anmeldung nicht nur für login.gesis.org, sondern auch für search.gesis.org gültig ist, kann die Forscherin nun den gewünschten Datensatz herunterladen.

Einheitlicher Stil hilft – der GESIS-Web-Styleguide

Das vorangegangene Beispiel zeigt eines von vielen Szenarien, bei denen Benutzer*innen zwischen verschiedenen GESIS-Webangeboten eigenständig navigieren oder geleitet werden, um ihre Anliegen zu erreichen. Ihnen wird dabei erheblich geholfen, wenn derselbe Stil auf allen GESIS-Webseiten, -Angeboten und -Portalen zur Anwendung kommt: die Wiederverwendung identischer Begriffe/Vokabulare, Bedienelemente und Layouts vermittelt schnell und effektiv, wo man etwas findet und wie es weitergeht.

So machen es auch andere: Googles Online-Angebote wie beispielsweise Maps, Gmail und die Google-Suche verwenden einen gemeinsamen Stil, damit Benutzer*innen zwischen diesen miteinander integrierten Diensten verständlich navigieren können.

Der GESIS-Web-Styleguide zeigt, was für die korrekte Umsetzung des GESIS-Web-Stils beachtet werden muss. Neben Erklärungen zur Bedeutung und korrekter Umsetzung allgemeinerer Aspekte wie beispielsweise Barrierefreiheit, responsive Design und Layout thematisiert er die korrekte Verwendung von Farben, Icons und Schriftarten.

Das GESIS-Web-Frontend-Frameworks hilft bei der Umsetzung des GESIS-Web-Stils in GESIS-Webangeboten. Durch Einbindung dieses Frontend-Frameworks stehen einem Webangebot unter anderem CSS-Layout-Regeln und Widgets für eine einheitliche Darstellung und Bedienung zur Verfügung.

Aufgrund der Vielfalt von GESIS-Webangeboten behandelt der GESIS-Web-Styleguide eine große Bandbreite an Anwendungsfällen. Feedback über kBugs wird die Ausarbeitung des Styleguides und des Frontend-Frameworks mitsteuern.