Zwischen Weihnachten und Sylvester: Shop-Relaunch

Tonerdumping für das iPhone

Tonerdumping-Onlineshop Relaunch – hier für das iPhone

Der Onlineshop von Tonerdumping ist leider in den vergangenen Stunden nicht immer erreichbar gewesen. Das hängt damit zusammen, dass wir nicht nur den Server durch eine stärkere Maschine getauscht haben, sondern auch gleichzeitig einen Relaunch gestartet haben.

Im Mittelpunkt der Umstellung steht eine bessere Darstellung auf mobilen Geräten. Dabei galt es nicht nur ein frischeres, moderneres Design zu gestalten. Es ging vor allem auch darum, ein 15 Jahre altes System mit modernen Programmiertechniken umzugestalten. Das Grundgerüst – die Datenbank – blieb erhalten. Das Frotend, also das, was der Benutzer sehen und bedienen kann, ist komplett neu geschrieben. Die Schaltflächen sind nun so gestaltet, dass man mit dem Finger diese besser treffen können. Auch das erleichtert die Bedienung über Smartphones und Tablets.

Damit es die NSA und der BND etwas mehr Anstrengung haben nachzuvollziehen, welcher Kunde bei uns welches Produkt einkauft, ist ab sofort der gesamte Onlineshop verschlüsselt. Man erkennt das an den https-Adressen.

Viele kleine Neuerungen wurden in der fast einjährigen Entwicklungszeit umgesetzt. Beispielsweise wurde die Suchfunktion noch einmal verbessert. Die Suchvorschläge sind nun nicht nur Drucker-Kategorien, sondern es werden auch Tinten- und Tonerserien vorgeschlagen. Das war in der Umsetzung vor allem Fleißarbeit. Der Shop musste mit vielen Informationen gefüttert werden, damit das System dem Benutzer die richtigen Suchergebnisse vorschlagen kann.

Auch der Filial-Bereich ist komplett neu gestaltet. Die Filialen sind nun über die Datenbank eingebunden. Das erleichtert die Pflege, vor allem wenn sich beispielsweise eine Telefonnummer einer Filiale ändert muss das nur einmal in der Datenbank geändert werden. Die Filialen sind nun über www.toner-dumping.de/filialen erreichbar. Will man ein bestimmtest Bundesland auswählen, kann man das Bundesland einfach an das Ende dieser URL setzen. Zum Beispiel kommt man zu den Berliner Filialen über diese Adresse: www.toner-dumping.de/filialen/berlin.

Viele technische Veränderungen wurden aber unter der Benutzeroberfläche umgesetzt. Viel überflüssiger Code wurde entfernt, die Ladezeiten sind also geringer als vorher.

Für 2016 stehen viele weitere Verbesserungen im Shop an. Diese können wir nun angehen, da das Grundgerüst erneuert wurde. Was im Detail sonst noch verbessert wurde, berichten wir hier im Blog in den nächsten Tagen.

Einen großen Dank richten wir an unser zweiköpfiges Entwicklerteam: Daniel Hüpenbecker hat hier sicherlich als Chefentwickler den größten Anteil daran. Seit ein paar Monaten wird er durch Philip Schröder unterstützt, der sein Augenmerk auf die Programmierung von Funktionen legt, die im Hintergrund ablaufen. Ohne das kompetente Team unseres Webhosters von der Firma Vistec hätte der Umzug und die Einrichtung des neuen Servers nicht so gut geklappt. Auch an diese Adresse: Ein großes Dankeschön.

Wenn Ihnen noch etwas auffällt, was man besser machen könnte, dann würden wir uns über Kommentare freuen.

TONERDUMPING Relaunch: Gesamter Bestellprozess ist neu

Der Bestellvorgang bei www.toner-dumping.de wurde komplett überarbeitet. Der Kunde soll ab sofort mit übersichtlichen und überschaubaren Schaltflächen und nur den notwendigen Informationen beim Bestellen begleitet werden.

Beispiel: Wer gerade dabei ist seine Bezahlart auszuwählen, muss nicht darüber informiert werden, wo sich unsere Filialen befinden, wie hoch sein Stammkundenrabatt – selbst die Suchmaske für weitere Produkte ist an dieser Stelle fehl am Platz.

Der WEITER-Knopf ist bei jedem Schritt jetzt immer an der selben Stelle. Es gibt nichts Schlimmeres, wenn man nicht weiß, wie es weiter geht. Sämtliche Interaktions-Knöpf sind nun auch als solche erkennbar – orangene Rechtecke mit weißer Beschriftung.

Neu ist auch der Warenkorb. Für Benutzer, die ihr Javascript aktiviert haben (und das sind fast alle), kann man nun über ein Mülleinmersymbol mit der Maus gehen und das entsprechende Produkt aus dem Warenkorb löschen. Vorher musste man erst eine Checkbox anklicken und dann unten auf „aktualisieren“ drücken. Viele Kunden haben das nicht verstanden und an dieser Stelle die Bestellung abgebrochen. Ist Javascript deaktiviert, ist es allerdings wieder so wie gehabt. Lustiges Gimmick: Der Mülleimerdeckel hebt sich an, wenn der Mauspfeil ihn berührt. Deckel auf – Deckel zu – ich könnte das den ganzen Tag machen…

Die Linke Spalte lenkte ab. Es war nur die Zwischensumme zu sehen. Stammkundenrabatt und die Höhe der Versandkosten war zumindest unklar. Die Zahlungsanbietersymbole lenkten ab. Ein Klick darauf beendete den Bestellprozess.

Die Linke Spalte lenkte ab. Es war nur die Zwischensumme zu sehen. Stammkundenrabatt und die Höhe der Versandkosten war zumindest unklar. Die Zahlungsanbietersymbole lenkten ab. Ein Klick darauf beendete den Bestellprozess.

Die Linke Spalte ist weg. Der Mülleinmer erleichtert das Löschen von Produkten. Bereits im Warenkorb stehen Versandkosten.

Die Linke Spalte ist weg. Der Mülleinmer erleichtert das Löschen von Produkten. Bereits im Warenkorb stehen Versandkosten.

Der 2. Schritt ist die Auswahl der Zahlungsart. Wir haben uns gefragt, warum man hier sehen soll, wie hoch die Versandkosten sind – in diesem Bereich ist das zu spät. Deshalb kommt diese Information direkt in den Warenkorb. Der Onlineshop rechnet auch aus, wieviele Euros noch fehlen, damit die Bestellung versandkostenfrei wird. Hier beschränken wir die Informationen auf das Wesentliche: Zahlungsart anklicken – daraufhin erscheint noch eine Beschreibung zur Zahlungsart und erst dann erscheint der WEITER-Knopf für den dritten Schritt.

Die Doppelung der Bezahlsysmbole verwirrte. Die Höhe der Versandkosten waren hier nutzlos. Produktsuche lenkte hier nur ab.

Die Doppelung der Bezahlsysmbole verwirrte. Die Höhe der Versandkosten waren hier nutzlos. Produktsuche lenkte hier nur ab.

Keine Doppelung der Zahlungsarten. Zahlungsarten sind nun als Schaltflächen erkennbar. Für Vertrauen sorgen unten nochmal Trusted-Shops und das TÜV-Siegel.

Keine Doppelung der Zahlungsarten. Zahlungsarten sind nun als Schaltflächen erkennbar. Für Vertrauen sorgen unten nochmal Trusted-Shops und das TÜV-Siegel.

Der 3. Schritt – Bestellung prüfen und abschließen – ist nun im gleichen Design und alle Dinge (Adressen, Zahlungsarten oder Produkte) sind noch änderbar. Der „Jetzt Kaufen“-Knopf ist nun direkt unter dem endgültigen Rechnungsbetrag, wie es der Gesetzgeber seit ein paar Monaten vorschreibt.

Auch hier war die linke Spalte ein hohes Ablenkungspotential.

Auch hier war die linke Spalte ein hohes Ablenkungspotential.

Alle Ändern-Knöpfe sind als Schaltflächen erkennbar. Die ablenkende linke Spalte ist jetzt weg.

Alle Ändern-Knöpfe sind als Schaltflächen erkennbar. Die ablenkende linke Spalte ist jetzt weg.

 

Neues Design unseres Checkout-Bereichs

check-out-fast-alt

Checkout-Design alt

check-out-fast-neu

Checkout-Design neu

Heute kommt ein weitere Teil unseres Onlineshops aus der Frischzellenkur. Während beim alten Design noch eine aufklappbare Auswahlliste vorgab, vorgegeben hat, wie man seine Zahlungsweise auswählt, setzen wir beim neuen Design auf Radio-Buttons. Da wir die Zahlungslogos als Bild darstellen, sieht das Auge sofort, worum es geht. Erst wenn eines der vier Möglichkeiten ausgewählt wird, erscheint der unübersehbare Weiterknopf.

Sofort sichtbar sind nun auch die „ändern“-Knöpfe bei Rechnungs- und Versandadresse. Knöpfe bei TONERDUMPING sind orange. Das ist nun auch dort so.

Vom Farbdesign verschwindet nun ein weiteres Mal das typische OS-Commerce-Blau und wird durch das ruhigere TONERDUMPING-grau ersetzt.