Status & Feedback

Hinweiskommunikation

Mit Hilfe der Hinweiskommunikation können dem Nutzer Informationen auf der Seite mitgeteilt werden. Der Inhalt eines Hinweises kann ein- oder mehrzeilig sein.

Es gibt insgesamt fünf Arten von Hinweisen:

  • Hinweis: Eine neutrale Information.
  • Erfolg: Eine Information über eine erfolgreich durchgeführte Aktion.
  • Warnung: Ein Hinweis auf ein mögliches Problem oder eine andere wichtige Information. (In einem Flow kommt der Nutzer auch ohne Behebung des Problems weiter.)
  • Fehler: Eine wichtige Information über ein Problem, das das Ausführen einer gewünschten Aktion verhindert hat. (In einem Flow muss das Problem gelöst werden, bevor der Nutzer weiterkommt.)

Zusätzlich gibt es die Möglichkeit, ein "Schließen-X" in die Hinweiskommunikation zu integrieren, über das die Meldung ausgeblendet werden kann.

message100

Hinweis

Hinweis! Aus Ihrem Warenkorb wurden nicht mehr lieferbare Artikel entfernt.
Hinweis! Aus Ihrem Warenkorb wurden nicht mehr lieferbare Artikel entfernt.

Erfolg

Erfolg! Sie haben sich erfolgreich abgemeldet.
Erfolg! Sie haben sich erfolgreich abgemeldet.

Warnung

Warnung! Ihr Passwort ist wurde schon seit 1 Jahr nicht geändert. Um ihr Konto umfassend zu schützen, sollten Sie dieses umgehend ändern.
Warnung! Ihr Passwort ist wurde schon seit 1 Jahr nicht geändert. Um ihr Konto umfassend zu schützen, sollten Sie dieses umgehend ändern.

Fehler

Fehler! Beim Login ist ein Fehler aufgetreten. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.
Fehler! Beim Login ist ein Fehler aufgetreten. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.

Lieferbarkeit

Das Lieferbarkeit-Pattern dient der Formatierung von Lieferbarkeitsaussagen. Es stehen drei Zustände mit unterschiedlichen Farben zur Verfügung: "Schnell lieferbar", "Bald lieferbar" und "Nicht lieferbar".

Schnell lieferbar

lieferbar in 2-3 Werktagen

Bald lieferbar

lieferbar in 3 Wochen

Nicht lieferbar

leider ausverkauft

Badge

Mit Hilfe des Badges können Zustände an Stellen visualisiert werden, an denen nur wenig Platz zur Verfügung steht. Es wird momentan zum Beispiel im Header zur Darstellung des Login-Status oder der Anzahl der Artikel im Warenkorb und Merkzettel eingesetzt. Ein Badge darf nur Icons oder Zahlen enthalten.

Standardhintergrundfarbe ist das grey400, es kann aber auch eine beliebige andere Hintergrundfarbe definiert werden.

badge100

mit Zahl

1

mit großer Zahl

3000

mit Icon

!

mit definierter Hintergrundfarbe

1

badge200

mit Zahl

1

mit großer Zahl

3000

mit Icon

!

mit definierter Hintergrundfarbe

1

Label

Mit Hilfe des Labels können ergänzende Informationen an Stellen hervorgehoben werden, an denen nur wenig Platz zur Verfügung steht.

Standardhintergrundfarbe des Labels ist das red100, es kann aber auch eine beliebige andere Hintergrundfarbe definiert werden.

label100

Standardvariante

+ Gratis

mit definierter Hintergrundfarbe

Lorem ipsum

Flag

Das Flag ist ein Störer mit dem ein Status, wie beispielsweise die Rabattierung eines Produkts, hervorgehoben werden kann.

Hintergrundfarbe des Flags ist das red100.

flag100

%

Energielabel

Das Energielabel dient dazu, die Energieeffizienzklasse eines Produkts gemäß EU-Verordnung darzustellen. Das Pattern besteht aus einem Pfeil in einer von zwei definierten Größen, einer von sieben Farben und einer von zehn Beschriftungen. Die sieben Farben sind von der EU vorgegeben und keine OTTO-Farben. Sie sollen nicht in anderen Kontexten eingesetzt werden!

Bitte beachten: Die Farben und Beschriftungen sind nicht aneinander gekoppelt. Dies ist notwendig, da die beste Energieeffizienzklasse, die immer dunkelgrün dargestellt wird, je nach Produktkategorie zwischen A, A+, A++ und A+++ variiert. Somit können Energielabel mit gleichen Buchstaben unterschiedliche Farben besitzen.

Das Energielabel-Pattern beinhaltet keine Funktionalität. So muss beispielsweise das Öffnen eines Layers mit dem detaillierten Energielabel selbst implementiert werden.

energyLabel200

Farbbereich Start mit A

A
B
C
D
E
F
G

Farbbereich Start mit A+

A+
A
B
C
D
E
F
G

Farbbereich Start mit A++

A++
A+
A
B
C
D
E
F
G

Farbbereich Start mit A+++

A+++
A++
A+
A
B
C
D
E
F
G

energyLabel100

Farbbereich Start mit A

A
B
C
D
E
F
G

Farbbereich Start mit A+

A+
A
B
C
D
E
F
G

Farbbereich Start mit A++

A++
A+
A
B
C
D
E
F
G

Farbbereich Start mit A+++

A+++
A++
A+
A
B
C
D
E
F
G

Kundenbewertung

Mit Hilfe des Kundenbewertungs-Patterns kann eine Sterne-Bewertung visualisiert werden. Es gibt halbe, volle und leere Sterne, so dass Bewertungen zwischen null und fünf Sternen in 0,5er-Schritten abgebildet werden können.

rating200

o o o o o
/ o o o o
* o o o o
* / o o o
* * o o o
* * / o o
* * * o o
* * * / o
* * * * o
* * * * /
* * * * *

rating100

o o o o o
/ o o o o
* o o o o
* / o o o
* * o o o
* * / o o
* * * o o
* * * / o
* * * * o
* * * * /
* * * * *

rating50

o o o o o
/ o o o o
* o o o o
* / o o o
* * o o o
* * / o o
* * * o o
* * * / o
* * * * o
* * * * /
* * * * *

Notiz

Das Pattern "Notiz" dient dazu, Kommentare oder Hinweise zu verschiedenen Produkten und Funktionen auf otto.de zu ermöglichen. Es existieren zwei Varianten, die durch ihre unterschiedliche Pfeilausrichtung entweder über unter dem zu kommentierenden Element eingefügt werden können.

annotation100

Mit Pfeil oben

Eine generische lange Notiz.

Mit Pfeil unten

Eine generische lange Notiz.

Status-Schritte

Das Pattern der Status-Schritte zeigt eine definierte Anzahl an Schritten an und visualisiert, in welchem Schritt sich der Nutzer gerade befindet. Jeder Schritt besteht aus einer Zahl und einer Beschriftung.

statusSteps100

  • 1 Ihr Warenkorb
  • 2 Anmelden
  • 3 Zahlungsart & Adresse
  • 4 Danke

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!