Status & Feedback
Loader
Der Loader ist ein kreisförmiger Ladeindikator, mit dessen Hilfe dem Nutzer angezeigt werden kann, dass Seiteninhalte geladen werden. Er steht in drei Größen zur Verfügung.
Loader250 (60x60px)
Loader200 (40x40px)
Loader100 (20x20px)
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 vier 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.
Links innerhalb von Hinweisblöcken können mit der Klasse p_message__link um einen dezenten Hover-Effekt ergänzt werden.
message100
Hinweis
Erfolg
Warnung
Fehler
Lieferbarkeit deprecated
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
Bald lieferbar
Nicht lieferbar
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
mit großer Zahl
mit Icon
mit definierter Hintergrundfarbe
badge200
mit Zahl
mit großer Zahl
mit Icon
mit definierter Hintergrundfarbe
Tag
tag50
petrol
red
black
tag100
petrol
red
black
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.
energyLabelScala100
Farbbereich Start mit A
energyLabelScala200
Farbbereich Start mit A
energyLabel200
Farbbereich Start mit A
Farbbereich Start mit A+
Farbbereich Start mit A++
Farbbereich Start mit A+++
energyLabel100
Farbbereich Start mit A
Farbbereich Start mit A+
Farbbereich Start mit A++
Farbbereich Start mit A+++
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
rating100
rating50
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
Mit Pfeil unten
Mit Pfeil links
Mit Pfeil rechts
Mit Pfeil rechts
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