| Quellen: eigene Bilder ISB (Shirts, Art-Print)
Bildquelle: eigenes Bild ISB (Landschaft)
Material
Es liegt im pädagogischen Ermessen der Lehrkraft, die Checkliste einzusetzen.
Checkliste: Wie gut ist unser Shop?
Viele Besucher auf seinem Webshop zu haben, ist ein Ziel des Online-Marketings. Wie aber können wir sicherstellen, dass sich die Besucher bei uns auch wohlfühlen und tatsächlich auf unserer Seite einkaufen? Die folgenden Punkte sind als Anhaltspunkte dafür gedacht, was man bei der Konzeption eines Online-Shops berücksichtigen sollte.
1. Usability (Benutzerfreundlichkeit)
Wie einfach ist die Webseite zu bedienen? Je einfacher und verständlicher die Navigation, desto wohler fühlt sich der Kunde auf der Seite.
|
übersichtliches Design: Wiedererkennungswert und zu Produkt und Zielgruppe passend
|
x
|
schnelles Laden und einfaches Bedienen der Seite
|
x
|
klare Navigation und einheitliche, verständliche Klickwege
|
deutliche Visualisierung von „Call-to-Action“-Elementen
(man weiß, wo man klicken muss)
|
x
|
Rückmeldungen zu Funktionen, Vorgängen und genau formulierte Fehlermeldung
|
x
|
Möglichkeit, Aktionen rückgängig zu machen
x
|
Responsive Webdesign
|
x
|
Kontakt/Hilfe sofort ersichtlich
|
x
|
Sonstiges:
x
|
2. Der Weg zum Produkt
Der Kunde sollte möglichst komfortabel ein für ihn passendes Produkt finden.
(Achtung: abhängig vom Shop bzw. Produkt)
|
sinnvolle und leicht nachvollziehbare Kategorien/Warengruppen und wenige Unterkategorien
|
x
|
unterschiedliche und sinnvolle Filter (Preis, Farbe, Material etc.)
|
x
|
Produktvergleich oder Merk- bzw. Wunschzettel vorhanden und ohne Kundenkonto möglich
|
Schnellansicht/Quick View-Funktion vorhanden mit Möglichkeit, auf den Merkzettel oder in den Warenkorb zu befördern
|
x
|
„in den Warenkorb“-Button deutlich erkennbar und leicht erreichbar
|
x
|
Sonstiges:
x
|
3. Produktsuche
Ob bei der Suche nach einem bestimmten Artikel oder bei der Suche nach dem richtigen Artikel – eine gute Suchfunktion muss den Kunden so gut wie möglich unterstützen.
|
Suchfunktion gut sichtbar
|
x
|
durch Suchfunktion alle Produkte auffindbar
|
x
|
Suchbegriff empfehlen und ähnliche Begriffe vorschlagen
|
sinnvolle, änderbare Sortierung wählen (z. B. nach Preis aufsteigend) und Filtermöglichkeit
|
x
|
„Fehlertoleranz“ bei der Eingabe des Suchbegriffs
|
x
|
Suchergebnisse bieten ausreichend Informationen zu den Produkten (Preis, Farbe, Verfügbarkeit etc.)
|
4. Produktpräsentation
Die Produktpräsentation muss übersichtlich, ansprechend, anschaulich, informativ und vollständig sein. Sie soll dem Kunden helfen, sich für das Produkt zu entscheiden.
|
optisch ansprechend und übersichtlich gestaltet
|
x
|
alle wichtigen Informationen zum Produkt bereitgestellt
|
x
|
bei Variantenprodukten für jede Ausführung Verfügbarkeit und Lieferzeiten angegeben
x
|
Bilder und Videos
schöne, aussagekräftige, qualitativ gute Bilder, Detailbilder, unterschiedliche Perspektiven
Zoomfunktion
Produktvideos
|
x
|
„Produktbewertungen/ Erfahrungsberichte vorhanden
|
x
|
Cross-Selling-Produkte oder ähnliche Produkte werden angeboten
x
|
Produktbeschreibung
stichpunktartige Kurzinfo
Detailbeschreibung
Nutzen und Vorteile des Produkts hervorgehoben
|
x
|
Sonstiges:
|
5. Warenkorb
Ein Warenkorb sollte so einfach und übersichtlich wie möglich für den User gestaltet sein und so einfach und komfortabel wie möglich zu bedienen sein.
|
vertrauenserweckende und zum Kauf motivierende Elemente im Warenkorb
Trusted Shops-Siegel (oder ähnliche Zertifizierungen)
Gastbestellung möglich
|
x
|
Rückmeldung und veränderte Darstellung des Warenkorbs, wenn etwas reingelegt wird
Anzahl der Artikel wird angezeigt
Gesamtwert der Bestellung wird angezeigt
|
x
|
Warenkorb gut strukturiert und übersichtlich aufgebaut
bearbeitbar
Versandkosten deutlich
x
|
Warenkorb auf jeder Seite des Shops leicht zu finden
|
x
|
Bestellprozess einfach gestaltet
Fortschrittsanzeige
Möglichkeit, Bestellprozess zu verlassen und eingegebene Daten und Warenkorb zu speichern
|
x
|
Möglichkeit, jetzt zu bestellen oder weiter einzukaufen wird deutlich
x
|
6. „Conversiontreiber"
Wie werden Kunden überzeugt, tatsächlich bei uns zu bestellen?
Ob ein Kunde bestellt, hat sehr viel mit Vertrauen und Service zu tun!
|
versandkostenfreie Bestellung
|
x
|
schnelle Lieferzeiten
|
x
|
viele unterschiedliche Zahlungsmöglichkeiten, vor allem Rechnungskauf
|
Merkzettel anlegen ohne Anmeldung möglich
|
x
|
Skonto (z. B. bei Vorkasse) oder 0 % Finanzierung
|
x
|
Zahlungsarten deutlich kommuniziert und gut sichtbar
|
Gütesiegel (Trusted Shops etc.)
|
x
|
Erfahrungsberichte/Produktbewertungen
|
x
|
Möglichkeit zum Direktkauf (vom Produkt oder aus dem Warenkorb aus)
|
Unternehmen und Team wird vorgestellt
|
x
|
konkreter Ansprechpartner mit Namen und Bild
|
x
|
Spaßfaktor & besondere Funktionen, Einkaufsberater, Tipps, Blogs, Magazine, Spiele etc.
|
Abbildung: Checkliste für guten Shop, eigene Darstellung ISB
Erwartungshorizont
Die Internetseite der Warenhaus GmbH enthält folgende Verbesserungsmöglichkeiten/eingebaute Fehler:
SEO (= Search Engine Optimization)/Suchmaschinenoptimierung
Für weitere Hinweise zu SEO siehe z. B. https://www.more-fire.com/tipps/die-10-goldenen-regeln-der-seo/
kein responsives Design -> wirkt sich negativ auf SEO aus
Texte mit Grafiken eingebaut -> (SEO und Barrierefreiheit)
Titelbild nicht komprimiert -> zu groß, Ladezeiten zu lang!
Überschriften (h1, h2, h3) sind nicht hierarchisch gesetzt (siehe Artikel „Design-Herbst", „Sommer-Gewinnspiel")
Barrierefreiheit
Überschriften (h1, h2, h3) sind nicht hierarchisch gesetzt (siehe Artikel „Design-Herbst", „Sommer-Gewinnspiel")
Bilder sind nicht mit alt-Attributen versehen (siehe hierzu z. B. unter: http://www.die-barrierefreie-website.de/umsetzung/grafiken.html)
ungenügender Kontrast zwischen blauer Schrift (Überschriften) und weißem Hintergrund (Farbcodes: #0077db (blau) und #ffffff (weiß))
Rechtliche Fehler (Stand: 15.04.2018)
falsche/fehlende Impressumsangaben (siehe „Über uns") – Verstoß gegen § 5 Telemediengesetz „Allgemeine Informationspflichten"
fehlende Datenschutzerklärung – § 13 Telemediengesetz „Pflichten des Diensteanbieters"
fehlende Urheberrechtsangaben für Bilder und Grafiken
inhaltliche Fehler
fehlende Anfahrtsbeschreibung
AGB -> „Under Construction", fehlen vollständig
fehlendes Suchfeld
veraltete Angebote „Design-Herbst", „Sommer-Gewinnspiel"
Serviceleistungen (siehe Marketingmix)
keine Möglichkeit, Waren online zu betrachten oder einzukaufen
fehlende Hinweise zur Preisangabe (z. B. „Preisangaben inkl. gesetzlicher MwSt. zzgl. Versandkosten")
Hinweise für Lehrkräfte
Wie kann die Webseite im Unterricht dargestellt werden?
Die Webseite liegt in Dateiform vor und kann durch Öffnen der Datei „index.html” im Browser dargestellt werden – nur in der Word-Variante. Man kann sich dann wie gewohnt durch die Webseite klicken. In der Praxis bedeutet dies, dass den Schülerinnen und Schülern z. B. die Dateien auf einem Rechner zur Verfügung gestellt werden müssen (z. B. auf einem Netzwerkverzeichnis, einer lokalen Festplatte oder einem USB-Stick).
Technisch versiertere Lehrkräfte können die Webseite auch auf einem lokal betriebenen Webserver (z. B. XAMP oder MAMP) zur Verfügung stellen, den die Schülerinnen und Schüler dann über eine Netzwerkverbindung aufrufen können.
Welche Fehler sollten meine Schülerinnen und Schüler erkennen?
Es wird wahrscheinlich nicht vorkommen, dass Schülerinnen und Schüler alle eingebauten Fehler auf der Webseite erkennen werden. Erkannt werden sollten aber auf jeden Fall die Fehler im rechtlichen Bereich und die inhaltlichen Fehler.
Wie kann ich die Webseite anpassen?
Die Dateien der Webseite können auf die individuellen Bedürfnisse der einzelnen Schulen und Schülerinnen und Schüler angepasst werden. Bearbeiten Sie die HTML- und CSS-Dateien in einem geeigneten Texteditor. Auch die Bilddateien können mit einem Grafikprogramm angepasst werden.
Material
Einstiegssituation
In der Marketing-Abteilung der Warenhaus GmbH erreicht Sie folgende E-Mail:
Sehr geehrte Damen und Herren,
vielen Dank für die Hinweise und Vorschläge zu unserem bisherigen Shop. Kein Wunder, dass unsere Kunden sich hier nicht wohlgefühlt haben. Wir brauchen dringend einen neuen Online-Auftritt.
Aufgrund Ihrer Expertise bitte ich Sie nun, ein Konzept für unseren neuen Online-Shop zu erstellen, das nicht nur alle rechtlichen Anforderungen erfüllt, sondern auch den Bedürfnissen unserer Kunden gerecht wird. Wir werden dann verschiedene Konzepte in der Geschäftsführersitzung besprechen und umsetzen lassen.
Freundliche Grüße
Chris Customer
Geschäftsführer
Hinweise für Lehrkräfte
Im Zielgespräch sollte mit den Schülerinnen und Schüler klar eingegrenzt werden, was von ihnen erwartet wird, z. B.:
1) übersichtliche Startseite
2) beispielhafte Kategorieseite (oder mehrere)
3) beispielhafte Produktseite (oder mehrere)
4) Warenkorb
5) Bestellabschlussseite
Bevor das Projekt gestartet wird, sollten die Schülerinnen und Schüler mit dem Ablauf und den theoretischen Grundlagen eines Projektes vertraut sein. Die nachstehenden Hinweise unterstützen hierbei.
Hinweise zur Projekttheorie und zu Arbeitspaketen formulieren (siehe Kapitel 5.1)
Projekttitel
|
Erstellen eines neuen Online-Auftritts
|
Notwendige Teilschritte
|
Erstellen einer Startseite,
Erstellen von Produktkategorieseiten
|
Mögliche Arbeitspakete
|
rechtliche Voraussetzungen,
gestalterische Voraussetzungen
|
Mögliche Meilensteine
|
Präsentation der Kenntnisse von rechtlichen und gestalterischen Grundlagen bis zum ...
gemeinsames Konzept einer Startseite bis zum ...
gemeinsames Konzept einer Kategorieseite bis zum ...
…
|
Für das Erstellen des Konzeptes schlagen die Autoren drei verschiedene Möglichkeiten vor:
Variante 1: Desktop-Programme
Die Software Pencil ist kostenlos und Open Source (offener Quellcode).
Nachteil: Das Programm ist nur auf Englisch verfügbar. Die Webseite des Projekts ist unter http://pencil.evolus.vn erreichbar.
Alternativ kann ein Entwurf auch in MS PowerPoint erstellt werden.
Einrichtung
Folgen Sie den Installationshinweisen auf der Webseite.
Starten Sie das Programm. Es öffnet sich ein leeres Dokument.
Abbildung: Desktop-Programme I, eigne Darstellung ISB
3. Fügen Sie über den Befehl „Manage collections …" Website-Formen hinzu
(z. B. Bootstrap oder DOJO Widgets).
Abbildung: Desktop-Programme II, eigene Darstellung ISB
|
