211service.com
Genialna sztuczka inżynierska, która sprawia, że menu Amazon jest użyteczne
Rozwijane menu i podmenu to zło konieczne graficznego interfejsu użytkownika. W przypadku witryny takiej jak Amazon, która zmusza klienta do manipulowania nieskończoną liczbą etykiet tekstowych przypominających lalki Matrioszki, absolutnie kluczowe jest, aby ta hierarchiczna nawigacja była tak łatwa i płynna, jak to tylko możliwe. Jak możesz schrzanić proste podmenu? Och, uwierz mi, są sposoby. Jeśli kiedykolwiek zetknąłeś się z tym, co inżynier Ben Kamens nazywa menu whack-a-mole, będziesz wiedział, co mam na myśli. Oto jego przykład:
GIF autorstwa Ben Kamens .
Podmenu wyświetla się natychmiast po najechaniu myszą na cel, ale także sprawia, że: zniknąć tak samo natychmiast, chyba że nawleczesz igłę, przesuwając mysz dokładnie poziomo do obszaru podmenu.
To bardzo irytujące. Gdyby menu Amazona działało w ten sposób, mogłoby to kosztować miliony dolarów utraconej sprzedaży.
Według Kamensa, zwykłym sposobem na walnięcie w menu jest coś, co nazywa się histereza . To wymyślne słowo, które w zasadzie oznacza opóźnienie. Inżynierowie oprogramowania dbają o to, aby podmenu nie wyświetlało się (i wyłączało) natychmiast; zamiast tego jest niewielkie opóźnienie. Daje to użytkownikowi wystarczająco dużo czasu, aby przenieść mysz bezpośrednio (tj. po przekątnej) do elementu podmenu, który chce kliknąć, bez znikania spod niej tej cholernej rzeczy.
Minusem jest to, że samo wyświetlenie podmenu zajmuje trochę czasu. To bardzo mało czasu, ale podczas nawigacji w oprogramowaniu wszystko, co nie jest natychmiastowe, może wydawać się powolne. Podmenu Amazona wyświetlają się natychmiast (bez histerezy z przodu), ale nie ma też problemu z menu. W jaki sposób?
jak kamens wyjaśnia , sprowadza się to do czegoś całkiem prostego: przewidywania, gdzie ruszysz myszą. Inżynierowie Amazona przewidują pewną strefę możliwych ścieżek myszy, gdy najedziesz kursorem na podmenu. Jeśli wejdziesz do tej strefy (tak jak w przypadku przechodzenia w celu wybrania pozycji w podmenu), włącza się efekt histerezy, utrzymując otwarte podmenu. Jeśli przesuniesz mysz poza tę strefę, Amazon założy, że nie jesteś zainteresowany podmenu i zniknie tak natychmiast, jak się pojawiło.
Wynik? Cóż, rezultatem (najprawdopodobniej) jest to, że nigdy nawet nie wiesz, jak dobrze masz je podczas korzystania z menu Amazona. Po prostu działają; robią to, co chcesz i trzymają się z daleka. To jest cecha dobrego interfejsu oprogramowania: nie zauważanie, jak dobry jest.
Ale co Post Kamensa (naprawdę powinieneś to przeczytać) fascynująco wyjaśnia, jak bardzo inżynieria i projekt muszą się ze sobą łączyć za kulisami, aby zapewnić ten rodzaj niezwykle subtelnego, a jednocześnie bardzo ważnego doświadczenia użytkownika. W skali Amazona ta atomowa dbałość o szczegóły ma ogromny wpływ na przychody. To doskonały przykład na to, co Steve Jobs miał na myśli, mówiąc, że projektowanie to nie to, jak wygląda, tylko to, jak działa. I jest to rodzaj nanoinnowacji zorientowanych na człowieka, których nawet nie zauważasz, ale kiedy to robisz, musisz klaskać.
Przeczytaj oryginalny post Bena Kamensa tutaj.