Die Ja- und Nein-Feedback-Buttons am unteren Rand jedes Artikels erscheinen standardmäßig grau, wenn die Leser nicht mit der Maus darüber fahren. Diese kontrastarme Standardeinstellung kann die Buttons schwerer bemerkbar machen und die Wahrscheinlichkeit verringern, dass Leser mit ihnen interagieren. Du kannst die Standard-Button-Farben mit einem CSS-Schnipsel übersteuern, um sie sichtbarer zu machen, deine Markenfarben zu übereinstimmen oder eine klarere visuelle Unterscheidung zwischen den positiven und negativen Feedback-Optionen zu schaffen.
Wann sollte man das verwenden
Nutzen Sie diese Anpassung, wenn Sie möchten:
- Machen Sie Feedback-Buttons prominenter, damit die Leser eher mit ihnen interagieren.
- Wenden Sie Markenfarben auf die Ja- und Nein-Buttons an, um ein einheitliches visuelles Erlebnis zu schaffen.
- Unterscheide die Ja- und Nein-Tasten mit unterschiedlichen Farben, zum Beispiel Grün für Ja und Rot für Nein, um ihre Bedeutung auf einen Blick zu verdeutlichen.
Bevor du anfängst
- Du brauchst Zugriff auf die Einstellungen () > Wissensdatenbank-Seite > Site-Anpassung > benutzerdefiniertes CSS und JavaScript im Knowledge Base-Portal.
- Haben Sie Ihre gewünschten HEX-Farbcodes bereit, bevor Sie beginnen. Der Standardausschnitt verwendet
#5ebf83(grün) für Ja und#e67367(rot/orange) für Nein.
Wie man die Standard-Feedback-Tastenfarbe ändert
-
Navigiere zu den Einstellungen (
) > Wissensdatenbank-Website > Site-Anpassung > benutzerdefiniertes CSS und JavaScript im Knowledge Base-Portal.
-
Wählen Sie im linken Navigationsfenster den CSS-Tab aus und fügen Sie folgenden Ausschnitt ein:
.article-feedback-action{
button[aria-label="Yes"]{
background-color: #5ebf83;
color: white;
}
button[aria-label="No"]{
background-color: #e67367;
color: white;
}
}
-
Aktualisieren Sie die Farbcodes auf Ihre gewünschten Werte.
-
Klicken Sie auf Speichern.
Ergebnis
Vorher
Die Feedback-Buttons erscheinen grau, wenn die Leser nicht über ihnen schweben, was sie leicht übersehen lässt.
Danach
Nach der Anwendung des CSS werden die Feedback-Buttons jederzeit in den angegebenen Farben angezeigt, nicht nur beim Hovern.
Best Practices
- Halte Ja und Nein optisch deutlich. Leser verarbeiten Farbsemantik schnell. Grün für Ja und Rot oder Orange für Nein zu verwenden, folgt der etablierten Konvention und reduziert die kognitive Anstrengung. Vermeide es, für beide Knöpfe ähnliche Farben zu verwenden.
- Vergleichen Sie den Kontrast mit dem Hintergrund Ihrer Seite. Die gewählten Tastenfarben sollten sowohl im hellen als auch im dunklen Modus lesbar sein. Verwenden Sie einen Kontrastprüfer, um zu überprüfen, ob Ihre Auswahl den WCAG AA-Standards entspricht (mindestens 3:1 für UI-Komponenten).
- Test nach dem Speichern. Öffne einen Artikel auf deiner Wissensdatenbank und vergewissere, dass die Buttons sowohl im Standardzustand als auch im Hover in den richtigen Farben angezeigt werden.