Det geniale tekniske trick, der gør Amazon-menuer brugbare

Rullemenuer og undermenuer er et nødvendigt onde ved grafiske brugergrænseflader. For et websted som Amazon, der tvinger kunden til at manipulere et endeløst antal af Matryoshka-dukkelignende tekstetiketter, er det helt afgørende at gøre denne hierarkiske navigation så let og flydende som muligt. Hvordan kan du skrue op for en simpel undermenu? Åh, tro mig, der er måder. Hvis du nogensinde har stødt på det, som ingeniør Ben Kamens kalder whack-a-mole menuen, ved du, hvad jeg mener. Her er hans eksempel:

GIF af Ben Kamens .

Undermenuen viser sig selv med det samme, når du ruller musen hen over dets mål, men gør det også forsvinde lige så øjeblikkeligt, medmindre du tråder nålen ved at flytte musen nøjagtigt vandret ind i undermenuområdet.

Det her er super irriterende. Hvis Amazons menuer handlede på denne måde, kunne det koste dem millioner af dollars i tabt salg.

Ifølge Kamens er den sædvanlige løsning at knalde en menu noget, der hedder hysterese . Det er et fancy ord, der dybest set bare betyder forsinkelse. Softwareingeniører sørger for, at undermenuen ikke vises (og ikke vises) med det samme; i stedet er der en lille forsinkelse. Dette giver brugeren tid nok til at flytte sin mus direkte (dvs. diagonalt) til det undermenupunkt, hun ønsker at klikke på, uden at det forbandede forsvinder under hende i processen.

Ulempen er, at selve undermenuen tager lidt tid at vise i første omgang. Det er en meget lille mængde tid, men når du navigerer i software, kan alt mindre end øjeblikkeligt føles trægt. Amazons undermenuer vises øjeblikkeligt (ingen hysterese foran), men der er heller ikke noget menuproblem. Hvordan?

Som kamens forklarer , kommer det ned til noget ret simpelt: at forudsige, hvor du vil flytte din mus. Amazons ingeniører forudsiger en bestemt zone af mulige musestier, når du ruller hen over en undermenu. Hvis du bevæger dig ind i denne zone (som du ville gøre, når du flyttede for at vælge et punkt i undermenuen), aktiveres hysterese-effekten og holder undermenuen åben for dig. Hvis du flytter musen uden for denne zone, antager Amazon, at du ikke er interesseret i undermenuen, og den forsvinder lige så øjeblikkeligt, som den så ud.

Resultatet? Nå, resultatet er (mest sandsynligt), at du aldrig engang ved, hvor godt du har det, når du bruger Amazons menuer. De virker bare; de gør hvad du vil og holder dig ude af vejen. Dette er kendetegnende for en god software-grænseflade: ikke at bemærke, hvor god den er.

Men hvad Kamens indlæg (du burde virkelig læse det) gør det fascinerende klart, hvor meget teknik og design skal smelte sammen bag kulisserne for at levere denne form for ultra-subtil, men alligevel ultra-vigtig smule brugeroplevelse. På Amazons skala har denne atomare opmærksomhed på detaljer enorme downstream-effekter på omsætningen. Det er det perfekte eksempel på, hvad Steve Jobs mente, da han sagde, at design ikke er, hvordan det ser ud, det er sådan, det fungerer. Og det er den slags menneskecentrerede nano-innovation, som du aldrig selv lægger mærke til, men som du skal bifalde, når du gør det.

Læs Ben Kamens originale indlæg her.

skjule