211service.com
Det geniala tekniska tricket som gör Amazons menyer användbara
Rullgardinsmenyer och undermenyer är ett nödvändigt ont för grafiska användargränssnitt. För en webbplats som Amazon, som tvingar kunden att manipulera ett oändligt antal Matryoshka-docka-liknande textetiketter, är det helt avgörande att göra denna hierarkiska navigering så enkel och smidig som möjligt. Hur kan du skruva ihop en enkel undermeny? Åh, tro mig, det finns sätt. Om du någonsin har stött på det som ingenjör Ben Kamens kallar 'whack-a-mole'-menyn, kommer du att förstå vad jag menar. Här är hans exempel:
GIF av Ben Kamens .
Undermenyn visar sig själv direkt när du rullar musen över dess mål, men gör det också försvinna lika omedelbart om du inte trär nålen genom att flytta musen exakt horisontellt in i undermenyområdet.
Detta är superirriterande. Om Amazons menyer agerade på detta sätt skulle det kunna kosta dem miljontals dollar i förlorad försäljning.
Enligt Kamens är den vanliga lösningen att slå en meny något som kallas hysteres . Det är ett fint ord som i princip bara betyder försening. Programvaruingenjörer ser till att undermenyn inte visas (och av) omedelbart; istället finns det en liten fördröjning. Detta ger användaren tillräckligt med tid för att flytta musen direkt (dvs diagonalt) till det undermenyobjekt hon vill klicka på, utan att det jävla försvinner under henne i processen.
Nackdelen är att själva undermenyn tar lite tid att visa i första hand. Det är väldigt lite tid, men när du navigerar i programvara kan allt mindre än omedelbart kännas trögt. Amazons undermenyer visas omedelbart (ingen hysteres på framsidan), men det finns inget menyproblem heller. Hur?
Som kamens förklarar , det handlar om något ganska enkelt: att förutsäga var du kommer att flytta musen. Amazons ingenjörer förutspår en viss zon av möjliga musbanor när du rullar över en undermeny. Om du flyttar in i denna zon (som du skulle göra när du flyttade för att välja ett objekt i undermenyn), aktiveras hystereseffekten och håller undermenyn öppen för dig. Om du flyttar musen utanför denna zon, antar Amazon att du inte är intresserad av undermenyn, och den försvinner lika omedelbart som den såg ut.
Resultatet? Tja, resultatet (mest troligt) är att du aldrig ens vet hur bra du har det när du använder Amazons menyer. De bara fungerar; de gör vad du vill och håller dig ur vägen. Detta är kännetecknet för ett bra mjukvarugränssnitt: att inte märka hur bra det är.
Men vad Kamens inlägg (du borde verkligen läsa det) gör fascinerande tydligt hur mycket ingenjörskonst och design måste smälta samman bakom kulisserna för att kunna leverera den här typen av ultra-subtil, men ändå extremt viktig bit av användarupplevelse. I Amazons skala har denna atomära uppmärksamhet på detaljer enorma nedströmseffekter på intäkterna. Det är det perfekta exemplet på vad Steve Jobs menade när han sa att design inte är hur det ser ut, det är hur det fungerar. Och det är den typen av mänskligt centrerad nano-innovation som du aldrig ens lägger märke till, utan måste applådera när du gör det.
Läs Ben Kamens originalinlägg här.