ITLAGERSALG: En ny webshop til brugt IT

To computere kan have samme modelnavn og stadig være forskellige køb. Den ene har mere RAM. Den anden har et engelsk tastatur eller en anden stand. Modelnavnet kan altså sjældent klare hele præsentationen alene.

Min designopgave var at gøre de forskelle synlige i produktoversigten og på produktsiden. Kunden skal kunne danne sig et overblik og se, hvilke oplysninger der er værd at undersøge nærmere. Derfor fik stand og produktvalg en tydelig plads sammen med pris og købsinformation.

Jeg arbejdede med både UX/UI-design og udvikling af webshoppen. Arbejdet omfattede navigation, produktoversigt og produktsidens opbygning samt de valg, kunden møder undervejs.

Det gav mig mulighed for at følge designbeslutningerne ind i brugerfladen. Produktkort og vælgere skulle fungere med butikkens faktiske indhold på både desktop og mobil. Også når produktnavnet fyldte mere end én linje, eller computeren havde flere konfigurationer.

Ved brugt IT er stand en del af produktet. Produktkortene viser derfor stand sammen med pris. På produktsiden har valget af stand en forklaring på brugsspor tæt på selve vælgeren.

Det følger nærhedsprincippet (proximity): Elementer, der står tæt på hinanden, opfattes som sammenhørende. Her knytter placeringen forklaringen til det valg, kunden skal træffe. Oplysningen skal være til at finde, mens den er relevant for beslutningen.

Software og opgraderinger er samlet i særskilte grupper. Hver gruppe har sin egen opgave, så kunden kan tage stilling til valgene undervejs. Mit arbejde med hierarkiet handlede om at gøre sammenhængen mellem produktbillede, navn, valg og købsinformation tydelig.

Produktoversigten giver mulighed for at filtrere efter blandt andet anvendelse, producent, skærmstørrelse, stand og pris. Sammenligning og ønskeliste hjælper med at holde de relevante computere tilgængelige, mens kunden undersøger sortimentet.

Ønskelisten er et konkret eksempel på genkendelse frem for at huske. Kunden kan vende tilbage til de gemte varer og genkende dem. Det begrænser behovet for at huske modelnavne og finde produkterne igen fra bunden.

På mobilen er filtrene samlet bag en tydelig indgang. Det er progressive disclosure: Sekundære muligheder vises, når brugeren vælger at åbne dem. Produktoversigten får plads, mens filtrene stadig er tilgængelige. Stand, pris og nødvendige produktvalg skal fortsat være synlige dér, hvor kunden tager stilling til købet.

Produktvalgene ligger i en lodret rækkefølge, og købsområdet er tilgængeligt, mens kunden bevæger sig gennem produktsiden.

Frontend er bygget med Next.js, React og TypeScript. Headless betyder, at butikkens brugerflade kan udvikles selvstændigt. Det gav plads til at forme navigation og produktvisninger omkring kundens valg.

Mit tekniske arbejde omfattede genbrugelige komponenter, der kunne håndtere butikkens faktiske produktnavne og konfigurationer. Det understøtter consistency: Et produktkort eller en vælger skal være genkendelig, også når varen skifter. Den tekniske genbrug har dermed et formål i brugeroplevelsen.

Principperne forklarer prioriteringerne i designet. Hvor godt de fungerer for kunderne, skal vurderes på, om kunden kan finde en relevant computer og forstå sit valg af stand og konfiguration.

Den nye webshop er live på ITLAGERSALG.dk.

Besøg ITLAGERSALG.dk