De ingenieuze technische truc die Amazon-menu's bruikbaar maakt

Vervolgkeuzemenu's en submenu's zijn een noodzakelijk kwaad van grafische gebruikersinterfaces. Voor een site als Amazon, die de klant dwingt een eindeloos aantal Matryoshka-pop-achtige tekstlabels te manipuleren, is het absoluut cruciaal om deze hiërarchische navigatie zo gemakkelijk en vloeiend mogelijk te maken. Hoe kun je een eenvoudig submenu verknoeien? Oh, geloof me, er zijn manieren. Als je ooit bent tegengekomen wat ingenieur Ben Kamens het whack-a-mole-menu noemt, weet je wat ik bedoel. Hier is zijn voorbeeld:

GIF door Ben Kamens .

Het submenu wordt onmiddellijk weergegeven wanneer u de muis over het doel beweegt, maar maakt het ook verdwijnen net zo direct, tenzij u de naald inrijgt door uw muis precies horizontaal in het submenugebied te bewegen.

Dit is super irritant. Als de menu's van Amazon op deze manier zouden werken, zou het hen miljoenen dollars aan verloren verkopen kunnen kosten.

Volgens Kamens is de gebruikelijke oplossing om een ​​menu te meppen iets genaamd hysterese . Het is een mooi woord dat eigenlijk gewoon uitstel betekent. Software-ingenieurs zorgen ervoor dat het submenu niet onmiddellijk wordt weergegeven (en weer ongedaan wordt gemaakt); in plaats daarvan is er een kleine vertraging. Dit geeft de gebruiker genoeg tijd om haar muis direct (d.w.z. diagonaal) naar het submenu-item te bewegen waarop ze wil klikken, zonder dat het verdomde ding daarbij onder haar vandaan verdwijnt.

Het nadeel is dat het submenu zelf wat tijd nodig heeft om in de eerste plaats weer te geven. Het is maar heel weinig tijd, maar bij het navigeren in software kan alles wat minder is dan instant traag aanvoelen. De submenu's van Amazon worden onmiddellijk weergegeven (geen hysterese vooraan), maar er is ook geen sprake van een menuprobleem. Hoe?

als kamens verklaart , komt het neer op iets heel eenvoudigs: voorspellen waar je je muis heen gaat. De ingenieurs van Amazon voorspellen een bepaalde zone van mogelijke muispaden wanneer je over een submenu rolt. Als u naar deze zone gaat (zoals u zou doen wanneer u zich verplaatst om een ​​item in het submenu te selecteren), treedt het hysterese-effect in werking, waardoor het submenu voor u open blijft. Als je de muis buiten deze zone beweegt, gaat Amazon ervan uit dat je niet geïnteresseerd bent in het submenu, en het verdwijnt even snel als het verscheen.

Het resultaat? Welnu, het resultaat (hoogstwaarschijnlijk) is dat je nooit weet hoe goed je het hebt als je de menu's van Amazon gebruikt. Ze werken gewoon; ze doen wat je wilt en blijven uit je buurt. Dit is het kenmerk van een goede software-interface: niet doorhebben hoe goed het is.

Maar wat Het bericht van Kamens (je zou het echt moeten lezen) maakt fascinerend duidelijk hoeveel techniek en ontwerp achter de schermen moeten samensmelten om dit soort ultrasubtiele, maar uiterst belangrijke gebruikerservaring te leveren. Op de schaal van Amazon heeft deze atomaire aandacht voor detail enorme downstream-effecten op de omzet. Het is het perfecte voorbeeld van wat Steve Jobs bedoelde toen hij zei dat design niet is hoe het eruit ziet, maar hoe het werkt. En het is het soort mensgerichte nano-innovatie die je niet eens opmerkt, maar die je moet applaudisseren als je dat doet.

Lees hier het originele bericht van Ben Kamens.

zich verstoppen