En side til “spor min ordre”, hvor kunden indtaster sit telefonnummer og ser ordrens status uden at oprette en konto, er en lille, men meget besøgt side på de fleste bangladeshiske webshops, hvor gæstecheckout er normen. I denne butik var resultatvisningen tydeligvis kun bygget og testet til mobil: smal, kun tekst, ingen produktbilleder og for det meste tom på en computerskærm.
Det, det oprindelige layout manglede
Siden virkede (kunden kunne faktisk se ordrens status), men præsentationen undersolgte den. Uden produktbilleder skulle en kunde med en ordre på flere varer læse varenavnene grundigt for at bekræfte, hvad de faktisk havde modtaget; fakturerings- og leveringsoplysninger flød sammen som almindelig tekst uden visuel adskillelse, og på en computerskærm så en kolonne i mobilbredde midt på en bred side ufærdig ud.
Redesignet
Rettelserne var bevidst afgrænsede, ikke en fuld genopbygning:
- Produktbilleder på hver varelinje, tilføjet via filteret
woocommerce_order_item_name, afgrænset snævert til netop denne side, så det ikke påvirker, hvordan varer vises andre steder i WooCommerce. - Fakturering og levering samlet i et ordentligt kort, med klar visuel adskillelse fra tabellen med ordrens varer i stedet for at flyde sammen i én tekstblok.
- En bredere container på computer, så siden faktisk bruger den tilgængelige plads i stedet for at lade en kolonne i mobilbredde svæve i et hav af hvid plads.
- Ny rækkefølge på mobil, hvor kundens adresse er flyttet over ordretabellen, så det første, de bekræfter, er “skal den til det rigtige sted?”, før de scroller ned og ser, hvad ordren indeholder.
Det vigtigste
- En side, der kun er bygget og testet i én skærmstørrelse, forringes stille og roligt i alle andre størrelser; det er værd bevidst at tjekke begge ender.
- At afgrænse et skabelonfilter snævert (til én side, én kontekst) undgår bivirkninger på resten af platformens visning.
- Rækkefølgen på mobil bør følge det, læseren først skal bekræfte, ikke bare være en krympet udgave af rækkefølgen på computer.
Læs også: egen styring af kolonner på mobil, vores arbejde med UI- og UX-design.
Støder du på en lignende begrænsning i din egen WooCommerce- eller WordPress-admin? Lad os tale — ArtinTech Solution bygger netop den slags skræddersyede værktøjer til webshops.