Stil und Bewegung in Umfragen

Inhalt Dieser Seite:

 

Tipp: Wenn Ihr Design-Editor nicht mit der Abbildung übereinstimmt, verwenden Sie vermutlich den alten Editor. Weitere Informationen finden Sie unter Das alte Design (EN).

Stil und Bewegung in Umfragen im Überblick

Der Stil einer Umfrage ist entscheidend dafür, dass die Teilnehmer die Umfrage gerne ausfüllen. Zum Still einer Umfrage gehören die Schriftart, Farben, der Fragenabstand sowie sämtliche benutzerdefinierten CSS, die Sie hinzufügen möchten. Außerdem können Sie festlegen, wie sich Ihre Umfrage bewegen soll, von animierten Seitenübergängen bis hin zum automatischen Weiterleiten der Teilnehmer durch die Umfrage, wenn sie Fragen beantworten.

Schriftarten

Sie können die Schriftart der Fragen und Antwortmöglichkeiten im Abschnitt „Stil“ des Design-Menüs (EN) anpassen. Um die Schriftart zu ändern, klicken Sie auf das Dropdown-Feld Schriftart und wählen Sie eine Schriftart aus.

Option „Schriftart“ im Abschnitt „Stil“ unter „Design“

Sie können auch die Schriftgröße einer Umfrage anpassen. Dazu können Sie die Schrift fett formatieren oder die Fragen und Antworten der Umfrage in unterschiedlichen Größen anzeigen.

Um die Schriftgröße zu ändern, geben Sie die gewünschte Größe (in Pixel) in das Feld „Schriftgröße“ ein. Klicken Sie rechts neben der Schriftgröße auf das Symbol B, um die Schrift fett zu formatieren.
Unter „Design“ verfügbare Optionen zum Ändern von Schriftgröße und Fettformatierung von Frage- und Antworttext

Tipp: Die hier angezeigten Schriftanpassungsoptionen sind für Best Practices und Barrierefreiheit für Umfragen optimiert. Weitere Optionen, etwa um den gesamten Umfragetext kursiv oder unterstrichen anzuzeigen, finden Sie im alten Design-Menü (EN).

Standardschriftarten

Das Dropdown-Feld zur Schriftartauswahl enthält eine Option für die Standardschriftart. Die Standardschriftart hängt vom ausgewählten Layout (EN) ab:

  • Für das Layout Normal wird die Schriftart Poppins verwendet.
  • Für das Layout Modern wird die Schriftart Open Sans verwendet.
  • Für das Layout Klassisch wird die Schriftart Helvetica Neue verwendet.

Farben

Sie können die Farbe der Elemente in einer Umfrage im Abschnitt „Stil“ des Design-Menüs (EN) anpassen. In diesem Abschnitt können Sie die primäre und die sekundäre Farbe für Ihre Umfrage festlegen.

Auf dem Design-Reiter im Abschnitt „Stil“ verfügbare Optionen für primäre und sekundäre Farbe

Tipp: Die hier angezeigten Farbanpassungsoptionen sind für Best Practices und Barrierefreiheit für Umfragen optimiert. Das alte Design (EN)-Menü enthält zusätzliche Optionen, mit denen Sie die Farben bestimmter Umfrageelemente wie Antwortmöglichkeitentext und Validierungsfehler festlegen können.

Primäre Farbe

Die primäre Farbe wird für die Hauptelemente der Umfrage verwendet. Die genaue Anwendung hängt vom Umfragelayout ab, aber normalerweise wird diese Farbe für Features wie den Fortschrittsbalken und Fragenhervorhebungen verwendet.

Auf dem Design-Reiter verfügbare Option für die primäre Farbe. Diese Option wirkt sich auf Fortschrittsbalken und Fragenhervorhebungen aus.

Sekundäre Farbe

Die sekundäre Farbe wird für untergeordnete Elemente der Umfrage verwendet. Die genaue Anwendung hängt vom Umfragelayout ab, aber normalerweise wird diese Farbe für Features wie die Weiter- und Zurück-Schaltflächen verwendet.
Auf dem Design-Reiter verfügbare Option für die sekundäre Farbe. Diese Option wirkt sich auf die Weiter-Schaltfläche aus.

Benutzerdefiniertes CSS hinzufügen

Vorsicht: Der folgende Code wird im Ist-Zustand bereitgestellt und erfordert Programmierkenntnisse. Der Qualtrics Support bietet keinerlei Hilfestellung oder Beratung im Zusammenhang mit eigenem Programmcode an. Stattdessen können Sie sich gerne in unserer engagierten Benutzer-Community (EN) erkundigen.

Es kann vorkommen, dass Sie das Design Ihrer Umfrage mit mehr als nur den einfachen, per Mausklick verfügbaren Formatierungsoptionen anpassen möchten. Technisch versierte Benutzer, die das Layout einer Umfrage mit eigenem Code anpassen möchten, können ihr eigenes benutzerdefiniertes CSS hinzufügen.

Cascading Style Sheets (CSS) ist eine Programmiersprache für die Gestaltung von Webseiten. Mit der Funktion zum Hinzufügen von benutzerdefiniertem CSS können Sie Ihr eigenes CSS direkt in den CSS-Editor eingeben oder auf eine online gehostete CSS-Datei verweisen.

So fügen Sie einer Umfrage ein benutzerdefiniertes CSS hinzu:

  1. Öffnen Sie beim Bearbeiten der Umfrage das Menü Design.
    Navigieren zum Abschnitt „Stil“ des Design-Reiters und Verwenden der zwei CSS-Optionen am unteren Rand des Reiters
  2. Klicken Sie auf den Abschnitt Stil.
  3. Geben Sie Ihr eigenes CSS in das Feld Benutzerdefiniertes CSS ein.
    Tipp: Falls Sie mehr Platz für die CSS-Erstellung benötigen, klicken Sie unter dem Feld „Benutzerdefiniertes CSS“ auf Bearbeiten, um den CSS-Editor zu öffnen.
  4. Falls Sie online gehostetes CSS verwenden, geben Sie die URL des Online-Hosts in das Feld Externes CSS ein.
  5. Klicken Sie auf Übernehmen.

Tipp: Mit dem folgenden Code können Sie das Standardlogo in Ihrer Designvorlage entfernen. Kopieren Sie dazu den folgenden CSS-Code in den Editor für Ihr benutzerdefiniertes CSS:

html .Skin #Logo {display: none;}

Vordergrundkontrast

Vordergrundkontrast legt den Kontrast zwischen dem Vordergrund (Text, Textfelder usw.) und dem Hintergrundbild fest. Zur Auswahl stehen die Optionen „Niedrig“, „Mittel“ und „Hoch“. Falls der Umfragetext vor dem Umfragehintergrund schwer zu lesen ist, können Sie die Lesbarkeit unter Umständen verbessern, indem Sie den Vordergrundkontrast erhöhen.

Dazu wählen Sie eine Graustufenfarbe mit einem WCAG-konformen Kontrastverhältnis von 4,5 aus. Ändern Sie diese Einstellung in „Mittel“ oder „Hoch“, um den Kontrast zwischen Text und Hintergrund zu erhöhen. „Hoch“ ist immer Weiß oder Schwarz. Das Hintergrundbild und die Farbe und Durchlässigkeit des Overlays werden bei der Festlegung der geeigneten Vordergrundfarbe ebenfalls berücksichtigt. Diese Einstellung entspricht dem Vordergrundkontrast im Abschnitt „Hintergrund“ (EN).

Auf dem Design-Reiter im Abschnitt „Stil“ verfügbare Option „Vordergrundkontrast“

Fragenabstand

Fragenabstand legt den Abstand zwischen den einzelnen Fragen in einer Umfrage fest. Zur Auswahl stehen die Optionen „Kompakt“, „Komfortabel“ und „Ausgedehnt“. Mit dem Fragenabstand können Sie die Länge Ihrer Umfrage steuern. Sie können beispielsweise den Abstand zwischen den Fragen reduzieren, wenn die Umfrage auf eine Seite passen soll.
Auf dem Design-Reiter im Abschnitt „Stil“ verfügbare Option „Fragenabstand“

Design und Rich Content Editor

Sie können Schriftarten und die Textfarbe auf zwei Arten bearbeiten: global und lokal. Globale Stiländerungen werden im Design-Menü vorgenommen und wirken sich auf alle Fragen- und Antworttexte aus. Lokale Stiländerungen werden für einzelne Fragen oder Antwortmöglichkeiten im Rich Content Editor (EN) vorgenommen. Lokale Änderungen haben Vorrang vor globalen Änderungen. Wenn Sie also eine Frage im Rich Content Editor ändern, werden diese Änderungen anstelle der Konfiguration im Design-Menü angezeigt.

Mit der Option Formatierung entfernen (EN) können Sie jederzeit die lokale Formatierung für ausgewählte Fragen entfernen und stattdessen die globalen Einstellungen einheitlich anwenden.

So entfernen Sie Formatierung

  1. Wählen Sie alle Fragen aus, indem Sie auf die erste Frage klicken, bis zum Ende scrollen, dabei die Umschalttaste gedrückt halten und auf die letzte Frage klicken. Die ausgewählten Fragen werden mit einem aktivierten Kontrollkästchen neben der Fragenummer angezeigt.
    Auswählen mehrerer Fragen im Umfragen-Editor
  2. Navigieren Sie zu Werkzeuge.
    Auf „Werkzeuge“ klicken, Mauszeiger auf „Prüfung“ bewegen und „Formatierung entfernen“ auswählen
  3. Bewegen Sie den Mauszeiger auf Prüfung und wählen Sie Formatierung entfernen aus.

Seitenübergang

Mit der im Abschnitt „Bewegung“ verfügbaren Option Seitenübergang können Sie den Übergangseffekt auswählen, der abgespielt wird, wenn Umfrageteilnehmer durch die Seiten Ihrer Umfrage navigieren.
Auf dem Design-Reiter im Abschnitt „Bewegung“ verfügbare Option „Seitenübergang“

Unten sehen Sie eine Übersicht über die verschiedenen Seitenübergangstypen:

  • Ohne: Es wird kein Seitenübergang verwendet. Die einzelnen Seiten der Umfrage werden wie normale Webseiten geladen.
  • Gleiten: Wenn ein Umfrageteilnehmer auf die Weiter- oder Zurück-Schaltfläche klickt, gleitet die entsprechende Seite horizontal auf den Bildschirm.
  • Überblenden: Wenn ein Umfrageteilnehmer auf die Weiter- oder Zurück-Schaltfläche klickt, wird die entsprechende Seite eingeblendet, während die aktuelle Seite verblasst.
  • Salto: Wenn ein Umfrageteilnehmer auf die Weiter- oder Zurück-Schaltfläche klickt, macht die Seite einen Salto, und die nachfolgende Seite wird angezeigt.

Autofokus

Mit der Funktion Autofokus im Abschnitt „Bewegung“ werden alle Fragen der Umfrage mit Ausnahme der aktuell angezeigten Frage verblasst dargestellt. Damit wird verhindert, dass die Umfrageteilnehmer durch vorherige oder nachfolgende Fragen abgelenkt werden.

Die Funktion „Autofokus“ ist aktiviert und in der Vorschau wird ein Beispiel für die Funktion angezeigt.

Automatische Weiterleitung

Mit der Einstellung zur automatischen Weiterleitung im Abschnitt „Bewegung“ wird festgelegt, ob die Umfrageteilnehmer beim Beantworten Ihrer Fragen automatisch weitergeleitet werden. Sie können das Teilnehmererlebnis bei Umfragen mit mehreren Einstellungen steuern.
Drei Optionen für die automatische Weiterleitung im Abschnitt „Bewegung“ des Design-Reiters

  • Automatische Weiterleitung bei Fragen: Bei Auswahl dieser Option müssen die Umfrageteilnehmer nicht scrollen, um zur nächsten Frage zu gelangen. Stattdessen werden sie automatisch zur nächsten Frage weitergeleitet, sobald sie eine Antwort ausgewählt haben. Wenn Sie die Option „Automatische Weiterleitung bei Fragen“ aktivieren, wird nach bestimmten Fragetypen wie Texteingabe und Multiple Choice-Fragen mit Mehrfachauswahl eine Fertig-Schaltfläche angezeigt. Die Umfrageteilnehmer können auf diese Schaltfläche klicken, um zur nächsten Frage zu gelangen.
    Tipp: Diese Einstellung muss aktiviert sein, damit die anderen Funktionen für die automatische Weiterleitung genutzt werden können.
  • Autoadvance-Schaltfläche ausblenden: Wenn Sie diese Option aktivieren, wird die Fertig-Schaltfläche ausgeblendet, die angezeigt wird, wenn die Option „Automatische Weiterleitung bei Fragen“ aktiviert ist.
  • Automatische Weiterleitung auf Seiten: Bei Auswahl dieser Option müssen die Umfrageteilnehmer nicht auf eine Weiter-Schaltfläche klicken, um zur nächsten Seite zu gelangen. Stattdessen gelangen sie automatisch auf die nächste Seite, sobald sie eine Antwort auf die letzte Frage der Seite ausgewählt haben.
    Tipp: Mit der Funktion „Automatische Weiterleitung auf Seiten“ wird Ihrer Umfrage die Zurück-Schaltfläche auch dann hinzugefügt, wenn dies nicht in den Allgemeinen Einstellungen (EN) festgelegt ist.

Wenn Sie die automatische Weiterleitung aktivieren, wird die Funktion für alle Seiten der Umfrage aktiviert. Die automatische Weiterleitung ist mit Zurück-Schaltflächen (EN) kompatibel.

Tipp: Wenn Sie eine Umfrageeinladung mit einer integrierten E-Mail-Frage erstellen und die Umfrage nur diese eine Frage enthält, wird die Umfrage durch die automatische Weiterleitung nicht automatisch übermittelt.