Eine Sendungsverfolgungsseite für Desktop und Mobilgeräte neu gestalten

Eine Seite „Bestellung verfolgen“ – auf der Kunden ihre Telefonnummer eingeben und den Bestellstatus ohne Kundenkonto sehen – ist klein, aber stark besucht auf den meisten bangladeschischen Shops, wo Gastbestellungen die Regel sind. In diesem Shop war die Ergebnisansicht offensichtlich nur für Mobilgeräte gebaut und getestet: schmal, nur Text, keine Produktbilder und auf einem Desktop-Bildschirm größtenteils leer.

Was dem ursprünglichen Layout fehlte

Die Seite funktionierte – Kunden konnten ihren Bestellstatus sehen –, aber die Darstellung wurde dem nicht gerecht. Ohne Produktbilder mussten Kunden bei einer Bestellung mit mehreren Artikeln die Namen genau lesen, um zu prüfen, was sie erhalten hatten; Rechnungs- und Versanddaten liefen ohne optische Trennung als Fließtext ineinander, und auf einem Desktop-Monitor wirkte eine Spalte in Handybreite mitten auf einer breiten Seite unfertig.

Die Neugestaltung

Die Änderungen waren bewusst begrenzt, kein kompletter Neubau:

• Produktbilder bei jeder Position, ergänzt über den Filter woocommerce_order_item_name und eng auf diese eine Seite beschränkt, damit die Darstellung von Artikeln nirgends sonst in WooCommerce beeinflusst wird.
• Rechnungs- und Versanddaten als eigene Karte, klar getrennt von der Artikeltabelle statt als ein Block Fließtext.
• Ein breiterer Container auf dem Desktop, damit die Seite den verfügbaren Platz nutzt, statt eine Spalte in Handybreite in einem Meer aus Weißraum treiben zu lassen.
• Neu geordnetes Layout auf Mobilgeräten: Die Kundenadresse steht über der Bestelltabelle – so prüft der Kunde zuerst „Geht das an die richtige Adresse?“, bevor er scrollt, um den Inhalt der Bestellung zu sehen.

Die wichtigsten Erkenntnisse

• Eine Seite, die nur für eine Bildschirmgröße gebaut und getestet wurde, verschlechtert sich unbemerkt bei allen anderen – es lohnt sich, bewusst beide Enden zu prüfen.
• Einen Template-Filter eng zu begrenzen (auf eine Seite, einen Kontext), vermeidet Nebenwirkungen auf die übrige Darstellung der Plattform.
• Die Reihenfolge im mobilen Layout sollte dem folgen, was der Leser zuerst bestätigen muss, und nicht nur eine verkleinerte Desktop-Reihenfolge sein.

Weiterlesen: individuelle Spaltensichtbarkeit auf Mobilgeräten, unsere UI- und UX-Designarbeit.

Stoßen Sie in Ihrem eigenen WooCommerce- oder WordPress-Adminbereich an eine ähnliche Grenze? Sprechen wir darüber – ArtinTech Solution baut genau diese Art von individuellen Shop-Tools.