aiMOOC

E-Commerce und digitale Produktinformationen – Kategorien und Filter nutzerorientiert gestalten

QR-Code

Einleitung

E-Commerce und digitale Produktinformationen – Kategorien und Filter nutzerorientiert gestalten

Zielgruppe: Ausbildung im E-Commerce, Einzelhandel und kaufmännischen Bereich · Dauer: sechs Lerneinheiten à etwa 7–10 Minuten plus Praxisprojekt.

Dein Auftrag: Hilf einer Kundin, ein wirklich passendes Zubehörprodukt zu finden. Du gestaltest Kategorien, Filter, Vergleich und verständliche Hinweise.

Wichtig: Der ÜbungsShop „Pixelhafen“, die Personen, Artikel, technischen Produktdaten, Kontakte, Preise und Versandregeln sind vollständig fiktive Modellannahmen. Sie beschreiben keine realen Angebote. Die externen Lernmedien zeigen reale allgemeine Symbole und Anschlüsse, nicht die erfundenen Produkte. Rechtsstand der Prüfung: 11. Oktober 2026, Deutschland, B2C.

Impuls: Ein Einkaufswagen ist schnell gefunden. Das passende Produkt zu wählen ist schwieriger.

Lernziele und Ausbildungsfall

Nach dem Kurs kannst Du Kategorien, Filter, Attribute und Sortierung unterscheiden, Kompatibilität begründet prüfen, Gesamtkosten berechnen und kritische Produktangaben erkennen.

Gesprächsmedium 1 – fiktiver Kundenchat:

Rolle	Nachricht
Samira (Kundin)	„Mein Notebook L-14 hat USB-C. Ich brauche einen HDMI-Bildschirm, zwei USB-A-Geräte und mindestens 65 Watt Ladeleistung. Alles zusammen darf höchstens 120 Euro kosten.“
Lian (Azubi)	„Kann Dein USB-C-Anschluss Videos ausgeben? Ich prüfe DisplayPort Alt Mode und USB Power Delivery in den Gerätedaten.“
Samira	„Ja, beim L-14 sind beide Funktionen ausdrücklich angegeben. Bitte rechne den Versand ein.“

Modellannahme zum Notebook L-14: DisplayPort Alt Mode vorhanden, USB Power Delivery vorhanden, ein externer Full-HD-Monitor mit HDMI wird unterstützt. Bildschirm und USB-A-Peripherie sind bereits vorhanden. Ein Dock-Netzteil muss im Lieferumfang sein.

Lerneinheit 1: Bedarf in Suchkriterien übersetzen

Merksatz: Erst die Nutzung, dann den Preis abfragen.

Kundenwunsch	Prüffeld im Shop
Bildschirm anschließen	HDMI-Ausgang + unterstützter Videomodus
Notebook laden	USB Power Delivery, mindestens 65 W am Notebook
Maus und Tastatur	mindestens zwei USB-A-Anschlüsse
Budget einhalten	Artikelpreis plus Versandkosten

Basisaufgabe: Markiere im Chat vier überprüfbare Anforderungen. Feedback: Nur „USB-C“ wäre unzureichend, weil die Steckerform keine Video- oder Ladefunktion garantiert.

Lerneinheit 2: Kategorien, Attribute und Filter

Datei:Iconographic navigation comparison.png

Bildimpuls: Vergleiche, wie schnell Du eine Navigation anhand ihrer Beschriftung verstehst.

Kategorie = feste Sortimentsgruppe, etwa „Notebook-Zubehör → Dockingstations“. Attribut = gespeicherte Eigenschaft, etwa „HDMI-Ausgänge: 1“. Filter = Auswahl nach einem Attribut, etwa „HDMI: ja“. Sortierung = Reihenfolge der Treffer, etwa „Preis aufsteigend“.

Gute Filter: verständliche Namen, konsistente Werte, Mehrfachauswahl wo sinnvoll, Anzeige der Trefferzahl, sichtbare aktive Filter und eine Schaltfläche zum Zurücksetzen. Ein Filter „USB-C-kompatibel“ allein ist zu ungenau.

Mini-Entscheidung: „DisplayPort Alt Mode erforderlich“ gehört als klares Kompatibilitätsmerkmal auf die Produktseite; „HDMI vorhanden“ kann zusätzlich ein Filter sein.

Lerneinheit 3: USB-C ist nicht gleich Funktionsumfang

Fehler beim Erstellen des Vorschaubildes:

Datei:USB Type-C receptacle.svg

Stecker und Buchse sehen passend aus. Trotzdem müssen Video, Strom und Daten einzeln geprüft werden.

Fehler beim Erstellen des Vorschaubildes:

Auch Kabel mit ähnlichem Stecker können sich technisch unterscheiden.

Fehler beim Erstellen des Vorschaubildes:

Drei Fragen für die Beratung: Unterstützt das Notebook DisplayPort Alt Mode für die gewünschte Bildausgabe? Liefert das Dock über USB Power Delivery mindestens 65 W ans Notebook? Sind Kabel, Netzteil und HDMI-Anschluss für die konkrete Nutzung geeignet?

Video mit Quellenkritik: Das Google-Video von 2015 zeigt das damalige Potenzial von USB-C. Prüfe kritisch: Die dort gezeigten Funktionen gelten nicht automatisch für jeden USB-C-Port.

Sicherheitsregel im Verkauf: Ohne belegte Geräte- und Dock-Spezifikationen keine Kompatibilitätsgarantie. Technische Grundlage: USB-IF und VESA, siehe Quellen.

Lerneinheit 4: Produktvergleich im fiktiven ÜbungsShop

Modell-Datensatz – alle Werte erfunden; Preise brutto inklusive modellhaft 19 % Umsatzsteuer.

Merkmal	A: BasisHub 4	B: BildDock 65	C: ProDock 90
Artikelnummer	PH-101	PH-202	PH-303
Kategorie	USB-Hubs	Dockingstations	Dockingstations
Bruttopreis	59,50 €	95,20 €	142,80 €
USB-A	2	2	3
HDMI-Ausgänge	keiner	1	2
Video über USB-C	nein	DP Alt Mode am Host nötig	DP Alt Mode am Host nötig
Notebook-Laden über USB PD	nein	bis 65 W	bis 90 W
Netzteil im Lieferumfang	nein	ja	ja

Zusatzannahme: Modell C kann zwei Monitore nur mit einem geeigneten Notebook betreiben; das ist keine allgemeine USB-C-Zusage.

Vorgeschlagener Filterweg: „Notebook-Zubehör → Dockingstations“ → „HDMI-Ausgänge: mindestens 1“ → „Ladeleistung: mindestens 65 W“ → „Netzteil: enthalten“ → „Artikelpreis bis 120 €“. Erst dann die Gesamtkosten prüfen.

Datei:Checkmark on circle.svg

Praxisfall 1 – Anwendung: Entscheide für Samira und begründe die Auswahl mit drei technischen und einem kaufmännischen Argument.

Lerneinheit 5: Preis, Angaben und Verbraucherschutz

Versandregel nur im ModellShop: 4,90 € je Bestellung unter 100,00 € Artikelwert; ab 100,00 € Artikelwert versandkostenfrei. Das ist keine gesetzliche Versandregel.

Modellartikel	Artikel brutto	Versand	Zahlbetrag
A	59,50 €	4,90 €	64,40 €
B	95,20 €	4,90 €	100,10 €
C	142,80 €	0,00 €	142,80 €

Achtung: B erreicht die fiktive Freigrenze von 100 € vor dem Versand nicht. 95,20 € + 4,90 € = 100,10 €. Rechnerisch beträgt Bs Nettowarenpreis bei 19 % Umsatzsteuer 80,00 €.

Rechtscheck Deutschland – geprüft am 11.10.2026:

Thema	Was ist bei echten B2C-Angeboten zu prüfen?
PAngV §§ 3 und 6	Gesamtpreise einschließlich Umsatzsteuer und Hinweis auf zusätzliche Liefer-/Versandkosten; deren Höhe angeben, soweit vorab vernünftig berechenbar.
Grundpreis nach PAngV § 4	Bei einschlägigen Waren nach Gewicht, Volumen, Länge oder Fläche; für die hier nur stückweise angebotenen Docks regelmäßig kein solcher Grundpreis.
Umsatzsteuer nach UStG § 12	Regulärer Steuersatz 19 %; 7 % ermäßigt für bestimmte Umsätze. Im Modell gilt 19 % für alle drei Zubehörartikel.
Produktsicherheit nach EU-Verordnung 2023/988 Art. 19	Soweit anwendbar: im Fernabsatzangebot Hersteller mit Post- und E-Mail-Adresse, Produktidentifikation einschließlich Bild und gegebenenfalls erforderliche Warn-/Sicherheitsinformationen; bei Hersteller außerhalb der EU zusätzlich Angaben zur verantwortlichen Person.
Fernabsatzrecht und BGB § 312j	Wesentliche Eigenschaften klar angeben; im zahlungspflichtigen Bestellprozess eine eindeutig beschriftete Bestellschaltfläche vorsehen.
BGB § 356a, seit 19.06.2026	Für betroffene online geschlossene Verträge mit Widerrufsrecht: gut zugängliche Funktion „Vertrag widerrufen“, Bestätigungsschritt und unverzügliche Eingangsbestätigung.
BFSG/BFSGV	Seit 28.06.2025 Anforderungen an erfasste Dienstleistungen im elektronischen Geschäftsverkehr; gesetzliche Ausnahmen, insbesondere für Kleinstunternehmen als Dienstleistungserbringer, beachten.

Pflichtfeld-Demo (alles fiktiv, keine zulässigen Real-Kontaktdaten): Hersteller „Modelltechnik-Werk“ · Musterweg 5, 00000 Beispielort · sicherheit@modelltechnik.example · Artikel PH-202 · Produktbild und tatsächlich einschlägige Warnhinweise wären im echten Shop zusätzlich zu prüfen. Fiktive Angaben ersetzen keine rechtlich nötigen echten Herstellerdaten.

Praxisfall 2 – Rabattprüfung: B soll von 95,20 € auf 89,25 € sinken. Der niedrigste Gesamtpreis in den 30 Tagen davor war 83,30 € (alles Modellwerte). Welche 30-Tage-Information gehört bei der Preisermäßigung dazu? Erkläre, weshalb „statt 95,20 €“ allein keine ausreichende Prüfung ist. Siehe PAngV § 11.

Lerneinheit 6: Verständlichkeit und Barrierefreiheit testen

Gesprächsmedium 2 – fiktive Rückfrage:

Rolle	Aussage
Lian	„Mit Deinem angegebenen L-14 und dem HDMI-Bildschirm ist BildDock 65 laut unserem Modelldatenblatt passend. Einschließlich Versand kostet es 100,10 €.“
Samira	„Warum nicht das günstigere BasisHub 4?“
Lian	„Dem fehlen HDMI-Ausgang und Notebook-Ladefunktion. Der Preis allein ist daher kein sinnvoller Vergleich.“

Video 1: Was macht eine klare Seitengestaltung zugänglich?

Video 2: Kannst Du alle Filter mit der Tastatur bedienen?

Fünf-Sekunden-Test: Findest Du die Kategorie? Verstehst Du den Filter? Erkennst Du ein nicht kompatibles Produkt? Siehst Du den Gesamtpreis? Lassen sich Filter ohne Maus bedienen?

Transferfall: Ein anderes, ebenfalls fiktives Notebook N-7 hat zwar USB-C, aber keinen DisplayPort Alt Mode. Der Kunde möchte HDMI über das Dock. Erkläre, warum B und C dafür nicht ohne Weiteres geeignet sind und welche technischen Informationen Du vor einer Alternative benötigst.

Gestufte Hilfen und begründetes Feedback

Aufgabe	Hilfe 1 – Denkanstoß	Hilfe 2 – konkreter Hinweis	Lösung mit Begründung
Basis: Kategorie oder Filter?	Was ist ein fester Regalbereich?	„Dockingstations“ ist eine Produktgruppe, „HDMI: ja“ ein wählbares Merkmal.	Kategorie = Dockingstations; Filter = HDMI: ja. Kategorien strukturieren das Sortiment; Filter verkleinern eine Treffermenge.
Anwendung: Samiras Auswahl	Prüfe zuerst Funktionen, dann Kosten.	A kann weder HDMI noch Laden; C überschreitet 120 €.	B: BildDock 65, 100,10 € inklusive Versand. Ein HDMI-Port, zwei USB-A und 65 W erfüllen die Modellanforderungen.
Rabattfall: Was ist zu nennen?	Suche den niedrigsten Gesamtpreis der vergangenen 30 Tage.	Der Preis war zwischenzeitlich 83,30 €.	83,30 € ist die relevante 30-Tage-Angabe. Die bloße Gegenüberstellung mit 95,20 € ersetzt die Prüfung nach PAngV § 11 nicht.
Transfer: Notebook N-7	Identische Stecker sind keine Funktionsgarantie.	Dem N-7 fehlt DisplayPort Alt Mode.	Keine bestätigte Video-Kompatibilität von B/C. Erst Videoausgabe des Hosts, Dock-Technik und mögliche Alternativlösungen klären; keine unbelegte Empfehlung geben.

Selbstcheck: Begründe jede Entscheidung mit einem konkreten Datenfeld, nicht mit einem Werbeversprechen.

Interaktive Aufgaben

Quiz: Teste Dein Wissen

Was ist eine Produktkategorie? (Eine feste Sortimentsgruppe) (!Eine frei gewählte Preisspanne) (!Eine Reihenfolge nach Preis) (!Ein Versandrabatt)

Welches Beispiel ist ein Filter? (HDMI vorhanden) (!Warenkorb öffnen) (!Impressum lesen) (!Bestellung bezahlen)

Was beschreibt USB-C für sich allein? (Die Steckerform) (!Garantierte Videoausgabe) (!Garantierte Ladeleistung) (!Garantierte Datenrate)

Welche Technik ist für die im Fall genannte Bildausgabe über USB-C wichtig? (DisplayPort Alt Mode) (!Bluetooth Audio) (!Mobilfunk) (!NFC)

Welcher Modellartikel erfüllt Samiras Anforderungen im Budget? (BildDock 65) (!BasisHub 4) (!ProDock 90) (!Kein Artikel)

Was kostet BildDock 65 im fiktiven Standardversand? (100,10 Euro) (!95,20 Euro) (!99,00 Euro) (!142,80 Euro)

Was ist für eine Preisermäßigung nach PAngV grundsätzlich wichtig? (Der niedrigste Gesamtpreis der vorherigen 30 Tage) (!Der höchste Preis des Vorjahres) (!Der Einkaufspreis des Händlers) (!Die unverbindliche Gewinnspanne)

Welche Information gehört nach Art. 19 GPSR zu betroffenen Onlineangeboten? (Der Herstellerkontakt) (!Das Gehalt der Beschäftigten) (!Die Kundenzahl des Shops) (!Das interne Werbebudget)

Wie heißt eine eindeutige elektronische Widerrufsfunktion nach BGB § 356a? (Vertrag widerrufen) (!Mehr erfahren) (!Zum Newsletter) (!Weiter stöbern)

Was verbessert die Nutzbarkeit eines Produktfilters? (Tastaturbedienung und verständliche Bezeichnungen) (!Nur farbliche Kennzeichnungen) (!Versteckte ausgewählte Filter) (!Unklare Abkürzungen)

Memory

Kategorie	Feste Sortimentsgruppe
Attribut	Gespeicherte Produkteigenschaft
Filter	Einschränkung der Treffer
Sortierung	Reihenfolge der Treffer
USB-C	Steckerform
DisplayPort Alt Mode	Videofunktion am Anschluss
Power Delivery	Aushandlung der Stromversorgung

Drag and Drop

Ordne die richtigen Begriffe zu.	Passende Funktion
USB-C	Steckertyp
DisplayPort Alt Mode	Videosignal
Power Delivery	Ladefunktion
Preis aufsteigend	Sortierung
HDMI vorhanden	Filterkriterium

Kreuzworträtsel

Kategorie	Wie heißt eine feste Sortimentsgruppe?
Filter	Womit wird die Trefferliste nach Merkmalen eingeschränkt?
Attribut	Wie heißt eine gespeicherte Produkteigenschaft?
Kompatibilitaet	Wie nennt man die technische Passfähigkeit zweier Geräte?
Bruttopreis	Wie heißt ein Preis einschließlich Umsatzsteuer?
Versandkosten	Wie heißen zusätzliche Kosten für die Lieferung?

LearningApps

Dies ist eine Suche nach Fremdmaterial; einzelne Ergebnisse müssen fachlich und lizenzrechtlich geprüft werden.

Lückentext

Eine feste Sortimentsgruppe heißt

.

Eine im Datensatz gespeicherte Eigenschaft heißt

.

Die Einschränkung der Treffer heißt

.

Die Reihenfolge der Suchergebnisse heißt

.

Die USB-C-Bezeichnung beschreibt zunächst die

.

Für die Bildausgabe verlangt das Modellnotebook den DisplayPort

.

Die Aushandlung höherer Ladeleistung erfolgt über USB Power

.

Bei BildDock 65 beträgt der fiktive Versand

Euro.

Der fiktive Gesamtbetrag für BildDock 65 ist

Euro.

Der reguläre Umsatzsteuersatz für die Modellware beträgt

Prozent.

Offene Aufgaben

Leicht

Kundengespräch: Spiele den fiktiven Chat zu zweit nach und markiere die vier Kundenanforderungen.
Produktkategorie: Zeichne einen Kategorienbaum für Notebook-Zubehör mit Hubs und Dockingstations.
Produktattribut: Entwirf drei verständliche Filterbezeichnungen zu HDMI, USB-A und Ladeleistung.
Produktvergleich: Erstelle eine Vergleichskarte mit den drei fiktiven Modellprodukten.

Standard

Warenkorb: Erstelle für A, B und C je eine Bruttopreis-Versand-Gesamtsumme-Tabelle und erkläre die Freigrenze.
Kundenberatung: Nimm einen 60-Sekunden-Audiodialog mit ausschließlich fiktiven Namen und Daten auf.
Usability: Skizziere einen Filterbereich mit aktiven Filtern, Trefferzahl und Zurücksetzen-Funktion.
Preisangabenverordnung: Gestalte eine Vorher-Nachher-Karte zum fiktiven Rabattfall einschließlich 30-Tage-Preis.

Schwer

Kompatibilität: Entwickle eine Entscheidungsmatrix für N-7 ohne DisplayPort Alt Mode und kennzeichne ungeklärte Angaben.
Barrierefreiheit: Teste einen selbst gezeichneten Filterprototyp mit Tastaturablauf und verständlichen Alternativtexten.
Produktdatenmanagement: Erstelle ein fiktives Datenblatt mit Pflichtfeld-Check und kennzeichne fehlende Herstellerinformationen.
E-Commerce: Produziere ein zweiminütiges Erklärvideo mit fiktivem Beratungsfall, Preisvergleich, Quellen- und Lizenznachweisen.

Lernkontrolle

Bedarfsanalyse: Ein Kunde wünscht zwei Bildschirme, hat jedoch nur „USB-C“ angegeben. Entwickle eine sinnvolle Folge von Rückfragen und begründe sie.
Informationsarchitektur: Ein Shop führt Hubs und Docks ungeordnet unter „Kabel“. Begründe eine verbesserte Kategorien- und Filterstruktur.
Kaufentscheidung: Erkläre, weshalb das billigste Produkt im Modellfall nicht das wirtschaftlich passende ist.
Verbraucherschutz: Überarbeite die fiktive Rabattwerbung so, dass der 30-Tage-Referenzpreis berücksichtigt wird.
Barrierefreiheit: Ein Filter funktioniert nur per Maus und signalisiert Auswahl ausschließlich durch Farbe. Schlage überprüfbare Verbesserungen vor.
Qualitätssicherung: Entwirf einen Freigabeprozess für ein Zubehörangebot, der Technik, Gesamtpreis, Sicherheitsangaben und Rechte an Medien kontrolliert.

Lernnachweis

Für Deinen Lernnachweis legst Du ein fiktives Produktdatenblatt, eine Filter- und Kategorieskizze, eine begründete Produktempfehlung und eine Kostenrechnung vor. Zeige zusätzlich eine Transferentscheidung bei fehlenden technischen Angaben sowie eine Prüfliste für Recht, Barrierefreiheit, Quellen und Medienrechte. Bewertung: sachlich richtig, transparent begründet, nutzerverständlich, nachprüfbar. Verwende keine echten Personen- oder Kundendaten.

OERs zum Thema

Hinweis: Wikipedia ist Einstiegsmaterial, keine verbindliche Rechtsquelle. Die beiden W3C-Videos und das Google-Video sind eingebettete Fremdvideos, nicht automatisch OER; keine Downloads oder Weiterverbreitung annehmen.

Geprüfte Fachquellen

PAngV § 3 · § 6 · § 11: Gesamtpreise, Versand, Preisermäßigung.
UStG § 12: regulärer Satz 19 %, ermäßigter Satz 7 % für gesetzlich bestimmte Umsätze.
EU-Produktsicherheitsverordnung, Artikel 19: Fernabsatzangaben.
BGB § 312j · § 356a: Bestell- und Widerrufsfunktionen.
BFSG-FAQ · BFSGV § 19: E-Commerce und Barrierefreiheit.
USB-IF: USB-C-Begriffe und Funktionen · VESA: DisplayPort Alt Mode: technische Abgrenzung.
W3C WAI: Formulare beschriften · Tastaturbedienbarkeit: Gestaltungsgrundlagen.

Mediennachweise und Nutzungsrechte

Alle verlinkten Bild-Dateiseiten wurden für diesen Kurs geprüft. Bei CC BY und CC BY-SA Urheber und Lizenz beachten; Bearbeitungen kennzeichnen. Videos werden nur über den YouTube-Player eingebettet; Einbettbarkeit bedeutet keine freie Bearbeitungs- oder Downloadlizenz.

Eingebundene Commons-Datei	Urheber / Lizenz
Shopping cart icon.svg	Jbarta · CC0
Search icon-72a7cf.svg	Offnfopt · CC0
Iconographic navigation comparison.png	Cnbrb · CC BY-SA 4.0
USB Type-C.svg	Andreas Pietzowski · CC BY-SA 3.0
USB Type-C receptacle.svg	Niridya · CC0
USB connector illustration, to scale, grouping, Type-C plugs.svg	Matthew Wynn · CC BY-SA 4.0
HDMI Connector Types.png	C0nanPayne · CC0
Checkmark on circle.svg	andrea_S · CC0
Warning-icon.png	Lycopene579 · CC0