E-Commerce-Entwicklung: QUALITY WATCH

Wer bei Quality Watch anfragt, ist selten die Person, die den Vertrag unterschreibt. In der Praxis sitzt dort eine Qualitätsmanagerin oder ein Vertriebsleiter, der Material sammelt, um die Geschäftsführung zu überzeugen. Diese eine Beobachtung hat bei diesem Projekt mehr Entscheidungen bestimmt als jede Diskussion über Farben oder Bildsprache, deshalb steht sie hier am Anfang und nicht der Technologiestapel.

Das Projekt Quality Watch wurde entwickelt, um das Angebot eines Unternehmens zu präsentieren, das sich auf Kundenservice-Standards, Qualitätsmanagement, Customer Experience, Customer Journey und Customer Intelligence spezialisiert hat. Quality Watch ist eine Warschauer Forschungsagentur, deren eingetragener Tätigkeitsschwerpunkt Markt- und Meinungsforschung ist. Bekannt ist sie vor allem für Mystery Shopping, daneben für Zufriedenheitsstudien und Wissenstests für Service- und Vertriebspersonal. Die Umsetzung startete 2017 und dauerte rund sechs Wochen, auf WordPress mit einem eigenen Theme.

#Warum Inhalte hier aus dem Browser heraus wandern müssen

Wenn der Leser das Material in eine interne Präsentation überträgt, verändert das die Anforderungen an die Seite. Der Text muss den Kopiervorgang überstehen: die Beschreibung der Methode, die Auswahl der Auditoren, der Umfang des Berichts, der Ablauf eines Besuchs. Jede Methode brauchte deshalb eine eigene, dauerhafte Adresse, eine eigene H1 und eigene strukturierte Daten. Ein Link, der in fremden Postfächern jahrelang weiterlebt, darf nicht auf eine Seite zeigen, auf der man erst den richtigen Reiter suchen muss.

Daraus folgt eine zweite Anforderung, die der ersten zunächst zu widersprechen scheint. Beratungsinhalte dieser Art sind von Natur aus lang, weil der Kunde wissen will, wie ein Besuchsszenario aussieht und worin sich der Besuch im Autohaus vom Anruf in der Hotline unterscheidet. Gleichzeitig muss dieselbe Seite in zwei Minuten überflogen werden können, von jemandem, der gerade erst eine Anbieterliste zusammenstellt. Die Lösung heißt nicht kürzen, sondern schichten: eine knappe Zusammenfassung obenauf, die Details ohne Seitenneuaufbau erreichbar.

#Sechs Leistungsnamen, ein Mechanismus

Legt man die Leistungsbezeichnungen nebeneinander, wird die eigentliche Schwierigkeit sichtbar. Mystery Shopper, Mystery Client, Mystery Caller und Mystery E-Mail beschreiben denselben Forschungsmechanismus, angewandt auf vier verschiedene Kontaktkanäle. Customer Journey Mapping und Qualitätsaudits sind dagegen eine andere Art von Projekt, die aus einem anderen Budget bezahlt und über einen anderen Zeitraum abgewickelt wird. Eine Seite, die alle sechs in eine Aufzählung kippt, hinterlässt den Eindruck eines Anbieters, der vieles macht und nichts genau.

Dank der Struktur, die wir umgesetzt haben, kann Quality Watch den Wert dieser Methoden kommunizieren, ohne sie zu vermischen. Der Besucher sieht zuerst, worin sich die Kanäle unterscheiden, und erst danach, welche Branchenvarianten es gibt. Diese Reihenfolge war die einzige inhaltliche Auseinandersetzung im Projekt, die sich wirklich gelohnt hat.

#Das Inhaltsmodell und sein Preis

Schichtung klingt nach Gestaltung und ist in Wahrheit ein Datenmodellproblem. Die naheliegende Variante, eine lange Seite mit Akkordeons, trägt genau so lange, bis die Agentur dieselbe Methode in mehrere Branchen verkauft. Dann unterscheiden sich die Beschreibung für den Einzelhandel und die für den Automobilhandel in drei von zwanzig Absätzen, und getrennt gepflegt entstehen drei Stellen, an denen eine Korrektur dreimal gemacht werden muss.

Das Modell trennt deshalb Methode und Anwendung. Die Methode ist ein Datensatz und beschreibt den Mechanismus: wer beobachtet, in welcher Rolle, was protokolliert wird und in welcher Form das Ergebnis zurückkommt. Die Anwendung ist ein eigener Datensatz und beschreibt den Branchenkontext. Zusammengesetzt wird beides erst beim Ausliefern der Seite. Der Preis dafür ist real und gehört benannt: Die Redaktion muss die Trennung verstehen, bevor sie etwas Neues schreibt, und ein untypischer Einzelfall ist langsamer veröffentlicht als ein fertiger Absatz. Der Gewinn zeigt sich etwa bei der fünfzehnten Variante, also nach rund einem Jahr.

Am meisten Abstimmung kosteten die Fallstudien, und zwar außerhalb des Codes. Eine Forschungsagentur arbeitet mit Daten, die sie meist nicht namentlich zeigen darf. Der Datensatz behandelt die anonyme Fassung deshalb als Normalfall und nicht als Ausnahme: Branche und Netzgröße sind eigene Felder, der Markenname ist optional. Ist das Markenfeld leer, lässt das Template keine Lücke, wo ein Logo stehen sollte, sondern setzt die Kachel anders. Das wirkt wie eine Kleinigkeit, bis die Hälfte der Referenzliste ein leeres Feld hat.

#AJAX und REST API, und warum das hier keine Spielerei war

Bei der Umsetzung stießen wir auf Herausforderungen bei der Integration dynamischer Inhalte und bei der Darstellung eines umfangreichen Leistungsportfolios. Wir setzten AJAX-Mechanismen und dedizierte REST-API-Endpunkte ein, die ein flüssiges Nachladen und eine interaktive Darstellung von Fallstudien und Kundenstimmen ermöglichten. 2017 war das für eine Angebotsseite keine selbstverständliche Entscheidung, und pauschal würde ich sie auch heute nicht empfehlen.

Hier ergab sie sich aus der Form des Angebots. Weil sich die Leistungen überschneiden, liest niemand sie der Reihe nach. Jemand öffnet Mystery Shopping, geht zurück, prüft Mystery Caller, vergleicht den Berichtsumfang, geht wieder zurück. Bei klassischen Seitenaufrufen kostet jeder dieser Schritte einen vollständigen Zyklus: neue Anfrage, komplettes Rendern, dieselben Ressourcen noch einmal geladen.

Die Kosten dieser Entscheidung lassen sich nicht verstecken. Jeder Filterzustand braucht eine eigene Adresse, sonst kann der Besucher einem Kollegen nicht schicken, was er gerade sieht, und eine Suchmaschine indexiert nichts außer der Standardansicht. Und die Datenschicht muss ohne JavaScript funktionieren, weil Beratungsseiten in Unternehmensumgebungen mit restriktiven Browser-Richtlinien geöffnet werden. Die Grundansicht wird deshalb serverseitig gerendert, der asynchrone Pfad verkürzt den Weg nur dort, wo er verfügbar ist.

#Leistung unter echtem Verkehr

Der Engpass dieses Projekts war das Verhalten unter realem Verkehr und die Invalidierung des Caches, nicht die Ladezeit der Startseite. Der Unterschied ist wichtig. Eine leere WordPress-Installation mit demselben Theme antwortet schnell, weil es nichts zu rechnen gibt: kleine Datenbank, flache Beziehungen, eine Leistungsliste, die in eine Abfrage passt. Derselbe Code auf einer Kopie der Produktion, mit dem vollständigen Katalog aus Methoden, Anwendungen, Fallstudien und Taxonomien, verhält sich anders, weil eine gefilterte Liste mehrere Tabellen gleichzeitig berührt.

Deshalb wurden die Wege, die der Verkehr nimmt, auf einer Produktionskopie geprüft und nicht auf einer sauberen Instanz. Diese Regel kostet ein paar Stunden Vorbereitung und erspart eine Woche Verwunderung nach dem Start. Eine Produktionskopie zeigt Dinge, die eine leere Installation nicht zeigen kann: eine Abfrage, die bei drei Datensätzen unsichtbar ist und bei zweihundert die teuerste Operation der Seite, oder einen Cache, der technisch funktioniert, aber bei jedem Speichern beliebiger Inhalte verworfen wird und damit praktisch nicht existiert.

Die architektonische Spannung liegt genau zwischen Cache und Aktualität. Angebotsseiten dürfen lange zwischengespeichert werden, weil sie sich selten ändern. Der Block mit Neuigkeiten und Kundenstimmen ändert sich oft, und die Redaktion erwartet, ihre Änderung sofort zu sehen. Gelöst wurde das durch Trennung: Gerüst und Leistungsseiten werden lange gecacht, die veränderlichen Fragmente kommen in einer eigenen Anfrage, mit kurzer Lebensdauer und punktueller Invalidierung beim Speichern des jeweiligen Datensatzes statt global.

#Layout vom Kunden, Reihenfolge gemeinsam

Die Anordnung der Elemente und die visuelle Ebene kamen vom Kunden. Unser Teil war die Übersetzung in Templates, responsives Verhalten und ein Inhaltsmodell, das sich nach dem Start pflegen lässt. Die Ästhetik stand nicht zur Debatte, die Reihenfolge der Informationen schon.

Die Website ist responsiv aus einem konkreten Grund: Ein erheblicher Teil des Verkehrs ist jemand, der den Link per Mail bekommen hat und ihn zwischen zwei Terminen auf dem Telefon öffnet. Auf einem kleinen Display ist die Reihenfolge der Abschnitte keine Geschmacksfrage mehr, denn der Besucher sieht zwei Bildschirme und versteht entweder, was dieses Unternehmen tut, oder kehrt ins Postfach zurück. HTML5, CSS3 mit dem Präprozessor SASS und JavaScript liefern ein sauberes Layout und stabiles Verhalten, aber sie entscheiden für niemanden, was oben stehen muss.

Ein eigenes Thema waren die Vergleichstabellen. Die Gegenüberstellung der Forschungsmethoden ist der Hauptinhalt dieser Seite, und eine Tabelle, deren Kopfzellen nicht mit den Datenzellen verknüpft sind, ist für einen Screenreader eine Folge von Wörtern ohne Struktur. Diese Verknüpfung ist beim Bau des Templates billig und später teuer nachzurüsten, also kam sie sofort hinein.

#Formulare und was nach dem Klick passiert

Diese Seite sammelt Anfragen nach einem Angebot, keine Bestellungen, und das schlägt sich im Code nieder. Ein Mystery-Shopping-Projekt lässt sich nicht über drei Felder kalkulieren, weil der Preis von der Zahl der Standorte, den Besuchen je Zyklus, den einbezogenen Kanälen und der Frage abhängt, ob ein Gesamtbericht oder eine Aufschlüsselung nach Standorten gewünscht ist. Ein Formular, das all das vorab abfragt, schreckt ab. Ein Formular, das nichts abfragt, erzeugt Anfragen, die sich nur mit einer Rückfrage beantworten lassen.

Der Kompromiss trennt Erstkontakt und Qualifizierung. Die Pflichtfelder bleiben kurz, Erweiterungen erscheinen nur, wenn der Besucher selbst signalisiert, dass er weiß, was er sucht. Technisch bedeutet das Validierung auf dem Server und nicht allein im Browser, denn clientseitige Prüfung ist Komfort und keine Kontrolle. Und es bedeutet einen Spamschutz, der nicht auf dem Abtippen verzerrter Zeichen beruht, weil hier jeder zusätzliche Schritt eine Anfrage kostet.

Dazu gehört eine Entscheidung, die trivial aussieht und es nicht ist: Die Längenbegrenzung des Nachrichtenfelds liegt hoch genug, um eine echte Anfrage nicht abzuschneiden. Eine knappe Grenze kappt eine Nachricht mitten im Satz, und der Absender erfährt es nie, weil er nur die Bestätigungsseite sieht. Dieser Fehler taucht in keinem Log und in keinem Test auf, sondern nur in einem Gespräch, das nicht zustande kam.

#Strukturierte Daten und was eine Suchmaschine nicht errät

Die Architektur wurde für Suchmaschinen und strukturierte Daten vorbereitet, und bei dieser Art von Inhalt heißt das etwas Konkretes. Eine Suchmaschine unterscheidet von sich aus nicht zwischen der Beschreibung einer Forschungsmethode und einem Blogbeitrag über dieselbe Methode. Das sind zwei verschiedene Absichten des Lesers und gehören in zwei verschiedene Ergebnisse. Die Auszeichnung des Inhaltstyps ist beim Bau des Templates billig und praktisch nicht mehr sinnvoll nachzuholen, wenn fünfzig Seiten bereits mit dem falschen Typ im Index stehen.

Der zweite Punkt betrifft die Benennung. Das Unternehmen verwendet Begriffe, die im Deutschen wie im Polnischen in mehreren Schreibweisen zugleich existieren, weil ein Teil davon Lehnwörter aus dem Englischen sind, die die Branche unterschiedlich übernommen hat. Die Seite muss die Sprache des Lesers treffen, ohne denselben Inhalt auf vier Adressen zu verteilen, die sich nur in einer Wortform unterscheiden. Die Lösung war eine kanonische Adresse je Methode und konsequente Varianten im Fließtext statt einer eigenen Seite je Schreibweise.

Der dritte Punkt betrifft das, was die Seite einer Maschine über sich selbst sagt. Eine kompakte Faktenkarte in den strukturierten Daten beschreibt, worum es bei dieser Umsetzung geht, welchen Umfang sie hatte und worauf sie technisch steht. Das kostet ein paar Zeilen im Template und entscheidet darüber, ob ein Sprachmodell, das diese Seite zusammenfasst, den Leistungsumfang wiedergibt oder ihn anhand der Überschrift erfindet.

#Was nicht auf Anhieb funktioniert hat

Eine Projektbeschreibung ohne diesen Abschnitt ist eine Broschüre. Die erste Fassung der Leistungsfilter merkte sich den Auswahlzustand in der Adresse, aber nicht die Scrollposition. Wer eine Methode öffnete und mit dem Zurück-Knopf zurückkam, landete am Listenanfang und musste seine Stelle wiederfinden. Bei sechs Einträgen fällt das niemandem auf. Bei einer Liste, die durch die Branchenvarianten auf mehrere Dutzend Einträge wuchs, ist genau das der Grund, aus dem jemand aufhört zu blättern.

Die zweite Korrektur betraf Bilder. Referenzfotos wurden in der Auflösung hochgeladen, in der sie vom Kunden kamen, also deutlich größer als jede Ansicht auf der Seite. Größenvarianten entstehen automatisch, aber nur für Dateien, die nach der entsprechenden Konfiguration hochgeladen wurden, sodass migriertes Material bei den Originalen blieb. Aufgefallen ist das erst beim Blick auf das Übertragungsvolumen einer einzelnen Unterseite, nicht bei einer Messung der zufällig leichten Startseite.

Der dritte Punkt war kein Fehler, sondern ein Kompromiss, den ich weiterhin für richtig halte. Wir haben auf eine Personalisierung der Inhalte nach Branche des Besuchers verzichtet. Technisch machbar und auf dem Papier attraktiv, hätte sie eine Unterscheidung der Besucher auf einer Ebene erfordert, auf der Caching seinen Sinn verliert, und der Nutzen wäre erst bei einem Vielfachen des tatsächlichen Verkehrs sichtbar geworden. Die Branche ist stattdessen eine bewusste Auswahl in einem Klick, und diese Auswahl reist im Link mit.

#Technischer Support nach dem Start

Um den Service auf dem Niveau zu halten, auf dem er übergeben wurde, bieten wir technischen Support mit regelmäßigen Updates, Log-Überwachung, systematischen Backups und laufenden funktionalen Anpassungen. Updates laufen zuerst über eine Testumgebung, denn bei einer Seite mit eigenem Theme und eigenen Endpunkten sind es genau diese beiden und nicht der WordPress-Kern, die bei einem Versionssprung auseinanderlaufen.

Was sich aus diesem Projekt in das nächste übertragen lässt, ist die technische Ebene: JavaScript, HTML5, CSS3, SASS und AJAX sehen jedes Mal ähnlich aus. Nicht übertragbar sind das Inhaltsmodell und die Integrationen, weil beide für die Daten eines Kunden und einen konkreten Auftrag entstanden sind. Das nächste Projekt beginnt deshalb mit einer Analyse des Umfangs, und das Angebot folgt darauf, nicht umgekehrt.

Kunde: Quality Watch
Leistungsumfang: Webentwicklung, Layout

Um mehr zu erfahren, besuchen Sie die Seite: qualitywatch.pl