Menu hamburgera i ukryta nawigacja Hurt UX Metrics

1. Dlaczego warto studiować ukrytą i widoczną nawigację
2. Miary: Wykorzystanie nawigacji, wykrywalność treści, czas, trudność zadania
3. Użycie nawigacji: ukryta nawigacja używana coraz rzadziej w zadaniu
4. Ukryta nawigacja prowadzi do pogorszenia doświadczenia użytkownika
5. Różnice między komputerem stacjonarnym a mobilnym doświadczeniem użytkownika
6. Dlaczego ukryta nawigacja jest mniej skuteczna
7. Zalecenia dotyczące nawigacji

Nasze ilościowe testy użyteczności ukrytych menu (takich jak ikony hamburgerów) i widoczne menu (takie jak linki na górze stron) pokazują, że:

• Ukryta nawigacja jest mniej wykrywalna niż widoczna lub częściowo widoczna nawigacja.
  • Gdy nawigacja jest ukryta, użytkownicy rzadziej korzystają z nawigacji.
  • Jeśli ludzie korzystają z ukrytej nawigacji, robią to później w zadaniu, niż gdyby były widoczne.

• Ukryta nawigacja zapewnia gorsze wrażenia użytkownika niż widoczna lub częściowo widoczna nawigacja, zarówno w telefonach komórkowych, jak i interfejsach użytkownika na pulpicie. Odkrycie to dotyczy wielu metryk UX, w tym oceny trudności zadań przez użytkowników, czasu poświęconego na zadanie i sukcesu zadania.
• Na komputerach stacjonarnych ukrywanie nawigacji obniża poziom doświadczenia i możliwości nawigacji w większym stopniu niż w przypadku telefonów.
• Ukrywanie nawigacji wpływa głównie na treść, która nie jest bezpośrednio dostępna za pośrednictwem linku wewnątrz strony.

Dlaczego warto studiować ukrytą i widoczną nawigację

Elastyczny projekt ma wiele zalet ; jednak jednym z jego mniej korzystnych efektów jest nadmierna popularność projektów mobilnych, które słabo przekładają się na większe ekrany pulpitu. Aby być jasnym, samo „mobilne pierwsze” nie jest problemem. Problem polega raczej na pobieraniu wystarczająco dobrych projektów mobilnych i przenoszeniu ich na komputery stacjonarne, na których również nie działają. Mobile-first nie powinien równać się tylko z telefonem komórkowym.

(Oczywiście istnieje tutaj ogólna zasada: jeśli technika projektowania ma obejmować platformy X i Y, to bezkompromisowe podejście X-first spowoduje, że Y stanie się refleksją i zaszkodzi użytkownikom Y. Jak wyjaśniono w naszym kursie na Skalowanie interfejsów użytkownika , aby zaprojektować dla X i Y, musisz wziąć pod uwagę mocne strony i potrzeby obu stron i odpowiednio dostosować dwie wersje strony.)

Ukryta nawigacja, taka jak menu hamburgerów, jest jednym z wielu wzorów inspirowanych projektami mobilnymi. Przestrzeń ekranu to cenny towar na telefonie komórkowym. Aby sprostać wyzwaniu ustalanie priorytetów treści nadal tworząc nawigację (i inne chrom ) dostępne, projektanci często polegają na ukrywaniu nawigacji w menu - często wskazywanym przez niesławną ikonę hamburgera. Podobnie jak tania sieć fast foodów, projektanci są uzależnieni od wygody, a teraz obsługują miliony każdego dnia, zarówno na urządzeniach mobilnych, jak i na komputerach stacjonarnych.

Podczas gdy nasze jakościowe testy użytkowników wielokrotnie to wykazały nawigacja ukryta pod menu rozwijanym jest mniej widoczna na pulpicie , chcieliśmy zmierzyć wielkość tego efektu w badaniu ilościowym i ocenić względny wpływ ukrytej nawigacji na pulpicie w porównaniu z mobilnym. Aby to zrobić, nawiązaliśmy współpracę z firmą WhatUsersDo (firma specjalizująca się w zdalnym testowaniu użyteczności), aby przeprowadzić badanie z udziałem 179 uczestników, którzy ukończyli zadania w 6 różnych witrynach, zarówno na smartfonach, jak i komputerach stacjonarnych. Wyniki tego dużego badania są opisane w tym artykule. Dodatkowy artykuł zawiera nasz szczegółowa metodologia badań i zdjęcia menu przetestowany.

Miary: Wykorzystanie nawigacji, wykrywalność treści, czas, trudność zadania

Aby określić skuteczność i użyteczność różnych menu, przeprowadziliśmy testy użyteczności na komputerowych i mobilnych wersjach 6 różnych witryn internetowych z różnymi typami projektów nawigacji. Oto typy nawigacji, które rozważaliśmy:

1. Ukryta nawigacja : główne linki nawigacyjne zostały umieszczone pod ikoną (np. Hamburger) lub przyciskiem i wymagane było wyświetlenie wyraźnej akcji użytkownika.
2. Widoczna nawigacja : główne łącza nawigacyjne zostały pokazane na widocznym pasku nawigacyjnym i dzięki temu można je było łatwo zobaczyć bez potrzeby wcześniejszego działania.
3. Nawigacja combo : niektóre główne linki nawigacyjne były widoczne, a niektóre ukryte w menu.

Zauważ, że dla urządzeń mobilnych nie przetestowaliśmy w pełni warunków widocznej nawigacji. (Widoczna nawigacja jest mniej powszechna na urządzeniach mobilnych, a ze względu na inne ograniczenia w naszym badaniu, nie byliśmy w stanie uwzględnić tego warunku). Przetestowaliśmy warunki nawigacji ukrytej i kombi w telefonie komórkowym.

Napisaliśmy 2 proste zadania dla każdej strony internetowej. Niektóre zadania można wykonać bez korzystania z ogólnej nawigacji witryny, podczas gdy inne zadania wymagają użycia nawigacji (lub wyszukiwania). Oto przykład zadania: „Przejdź na stronę http://www.bbc.com i sprawdź, czy są jakieś informacje na temat przyrody lub dzikiej przyrody, którymi jesteś zainteresowany. Po znalezieniu konkretnego artykułu, który jest interesujący, powiedz, który to jest jest."

Aby zmierzyć skuteczność tych projektów, zebraliśmy 5 wskaźników:

1. Korzystanie z nawigacji: czy uczestnicy w ogóle korzystali z łączy nawigacyjnych
2. Czas do nawigacji: czas od rozpoczęcia zadania do pierwszego użycia nawigacji w tym zadaniu
3. Trudność zadania: ocena trudności zadania przez uczestników
4. Wykrywalność treści: czy uczestnicy byli w stanie odkryć zawartość witryny
5. Czas zadania: czas potrzebny na wykonanie zadań

Pierwsze 2 metryki dotyczą korzystania z nawigacji, a ostatnie 3 odnoszą się do jakości obsługi użytkownika.

(Więcej na temat różnych typów metryk UX oraz sposobów ich zbierania i analizowania w naszym kursie całodniowym Pomiar doświadczenia użytkownika .)

Użycie nawigacji: ukryta nawigacja używana coraz rzadziej w zadaniu

Aby określić ilościowo użycie nawigacji, przyjrzeliśmy się (1) użyciu nawigacji: czy nawigacja była używana podczas zadania; oraz (2) czas do nawigacji: czas od początku zadania do momentu użycia nawigacji. (Liczyliśmy tylko czas nawigacji, jeśli nawigacja była używana.)

Te metryki mówią nam, czy nawigacja jest pomocna, a także czy łatwo ją odkryć. Jeśli nawigacja jest najistotniejsza, można oczekiwać, że będzie ona używana częściej i szybciej, niż gdyby trudno było ją odkryć.

Nasze zadania nie nakazywały uczestnikom korzystania z nawigacji, wyszukiwania, łączy do stron ani żadnych innych funkcji interfejsu. Ludzie mogli raczej używać tego, co chcieli, w interfejsie, aby wykonać zadanie. Założyliśmy, że jeśli nawigacja jest widoczna i wydaje się przydatna dla użytkowników, klikną ją; jeśli nie, spróbują innych rzeczy. Dlatego uznajemy, że nie kliknięcie menu może po prostu odzwierciedlać, że użytkownicy postrzegają coś innego jako lepszy wybór, a nie, że nie zauważyli ani nie rozpoznali menu.

Na przykład na niektórych stronach i zadaniach link w linii może mieć wysoką wartość zapach informacji - pomyśl o szukaniu filmu na stronie gazety: jeśli pierwszy nagłówek, który widzisz na stronie, dotyczy dokładnie tego filmu, prawdopodobnie wybierzesz go bez użycia nawigacji lub wyszukiwania.

Nasze wyniki wskazują, że w obu tych środkach ukryta nawigacja była znacznie mniej wykrywalna niż nawigacja widoczna lub kombinowana:

1. Zarówno na urządzeniach mobilnych, jak i stacjonarnych, ludzie znacznie częściej korzystali z nawigacji, gdy wszystkie lub niektóre opcje nawigacji były widoczne (tj. W warunkach widocznych i kombi).

• Na komputerach ludzie korzystali z ukrytych menu tylko w 27% przypadków, podczas gdy korzystali z nawigacji widocznej lub kombi prawie dwa razy więcej: odpowiednio w 48% i 50% przypadków.
• Na urządzeniach mobilnych korzystano z ukrytej nawigacji w 57% przypadków, a nawigacja combo w 86% przypadków - 1,5 razy więcej.

Przeprowadziliśmy regresję logistyczną z różnymi efektami i stwierdziliśmy, że różnice te były istotne statystycznie. Wynik ten nie jest zaskakujący: kiedy (wszystkie lub niektóre) opcje nawigacji są widoczne, są one bardziej istotne dla użytkowników. Jeśli nie ma nic innego, ślad ekranu nawigacji widocznej lub kombi jest większy niż menu reprezentowanego tylko przez ikonę lub etykietę, więc ludzie zauważą to bardziej.

2. Ludzie znacznie częściej korzystali z nawigacji (ukrytej lub częściowo widocznej) na telefonie komórkowym niż na komputerze.

Istnieje wiele potencjalnych wyjaśnień tego odkrycia:

• Nawigacja na telefonie komórkowym (ukryta pod menu lub częściowo widoczna) zajmuje większą część powierzchni ekranu niż na pulpicie, ponieważ ekran jest mniejszy. W ten sposób ludzie częściej to zauważają i używają. Rzeczywiście, na pulpicie byliśmy świadkami wielu sesji, w których ludzie nawet nie widzieli ikony menu. Niektórzy uczestnicy testów twierdzili nawet, że strony z ukrytą nawigacją nie mają menu.
• Ponieważ ukryta nawigacja jest bardziej popularna na urządzeniach przenośnych niż na komputerach, ludzie mogą być bardziej zaznajomieni z nią i częściej myślą o jej użyciu.
• Strony mobilne wymagają zazwyczaj przewijania, mają mniej treści widoczne nad fałdą i czasami ładują się wolniej, więc ludzie mogą uciekać się do korzystania z menu zamiast patrzeć na stronę i sprawdzać, czy istnieje jakaś treść, która pasuje do ich zainteresowań. Na pulpicie szybkość ładowania strony jest wysoka, a większy ekran zapewnia lepszy podgląd zawartości strony. (Innymi słowy, koszt interakcji Dostęp do żądanej informacji jest wyższy na urządzeniach mobilnych niż na biurku.)

Pisanie na klawiaturze jest trudniejsze i bardziej podatne na błędy, a ludzie mogą preferować nawigacja zamiast wyszukiwania , kiedy nawigacja jest dostępna.

1. Zarówno na komputerze stacjonarnym, jak i mobilnym, gdy nawigacja była ukryta, korzystanie z niej zajęło uczestnikom dłużej niż w przypadku, gdy była widoczna lub częściowo widoczna. Nasz uogólniony model efektów mieszanych pokazał, że wynik ten był nieznacznie istotny (p <0,1).

Chociaż liczby zdają się wskazywać na efekt urządzenia (to znaczy, że uczestnicy szybciej korzystali z ukrytej nawigacji na urządzeniach mobilnych niż na pulpicie) lub interakcji (to znaczy, że wpływ ukrytej nawigacji był wyższy na pulpicie niż na telefonie komórkowym), efekty te nie były istotne statystycznie.

Dodatkowe kilka sekund może wydawać się małostkowe i zgadzamy się, że nie będzie to różnica między grzywną a strasznym doświadczeniem użytkownika. Ale w ciągu tych kilku chwil użytkownik może zacząć doświadczać frustracji i zwątpienia w siebie. Dodaj jeszcze kilka sekund, a użytkownik może zrezygnować z zadania, a przynajmniej z menu.

Ukryta nawigacja prowadzi do pogorszenia doświadczenia użytkownika

Pozostałe 3 zebrane przez nas dane skupiały się na jakości doświadczeń użytkowników:

• Możliwość wykrywania treści . Nasze zadania były dość proste i dawały użytkownikom dużą swobodę (np. „Znajdź interesujący Cię artykuł technologiczny”), aby ludzie byli w stanie je zrealizować przez większość czasu. Jednak biorąc pod uwagę cel naszego badania, wykorzystaliśmy bardziej zróżnicowaną miarę sukcesu (wykrywalność treści), która uwzględniała nie tylko to, czy ludzie ukończyli zadanie, ale także, jak je ukończyli. W ten sposób wykrywalność treści mierzyła, czy użytkownicy byli w stanie znaleźć treść, której szukali, używając nawigacji (a nie wyszukiwania) w przypadkach, gdy treść nie była bezpośrednio powiązana ze strony głównej.
• Ocena trudności zadania . Pod koniec każdego zadania poprosiliśmy uczestników, aby ocenili, jak łatwe lub trudne jest zadanie w skali od 1 do 7, przy czym 1 jest łatwe, a 7 trudne. Trudność zadania jest subiektywną miarą; mierzy samoocenę oceny zadania przez użytkowników. Zwykle odzwierciedla ich ogólne doświadczenie w korzystaniu z witryny, więc wysoki szacowany stopień trudności będzie pośrednio wskazywał na rzeczywistą trudność w zlokalizowaniu nawigacji i nawigowaniu po witrynie.
• Czas na zadanie . Ta metryka reprezentowała czas, jaki zajęło uczestnikom wykonanie zadania, niezależnie od tego, czy zakończyło się powodzeniem, czy nie. Menu może dodać lub zmniejszyć czas zadania, jeśli znalezienie, otwarcie lub użycie jest łatwe lub trudne, więc dłuższe czasy zadań odzwierciedlają również dodatkowy koszt interakcji ze względu na mniej użyteczną nawigację.

Nasze odkrycia pokazują, że we wszystkich 3 różnych metrykach ukryta nawigacja znacznie zmniejsza wrażenia użytkownika zarówno na urządzeniach mobilnych, jak i stacjonarnych .

1. Zarówno na urządzeniach mobilnych, jak i komputerowych, wykrywalność treści była znacznie niższa, gdy nawigacja była ukryta . Środek ten wykazał ponad 20% spadek wykrywalności w witrynach z ukrytą nawigacją w porównaniu z witrynami z nawigacją widoczną lub kombi. Innymi słowy, nawigacja widoczna lub kombi sprawiła, że ​​ludzie byli bardziej skłonni do pomyślnego wykonania zadania i bez polegania na wyszukiwaniu.

1. Ukryta nawigacja doprowadziła do znacznie wyższych poziomów trudności niż nawigacja widzialna lub combo : stopień trudności wykazał 21% wzrost w ukrytej nawigacji w porównaniu z widocznością i 11% wzrost w porównaniu z nawigacją combo. Wynik ten jest zgodny z naszymi innymi ustaleniami i wzmocnił wniosek, że ukrywanie nawigacji utrudnia użytkownikom wykonywanie zadań . Widoczna nawigacja została uznana za najmniej trudną, najprawdopodobniej dlatego, że była łatwa do wykrycia, a użytkownicy mogli natychmiast zeskanować opcje nawigacji i wybrać jedną z nich. Inne typy nawigacji ukrywają opcje nawigacji i zwiększają koszty interakcji.

1. Użytkownicy musieli znacznie dłużej wykonywać zadania na stronach z ukrytą nawigacją niż na stronach z widoczną lub kombi nawigacją zarówno na komputerze stacjonarnym, jak i mobilnym .

• Na pulpicie ludzie byli o co najmniej 39% wolniejsi, gdy nawigacja była ukryta (w porównaniu z warunkami widocznymi lub kombinowanymi).
• Na urządzeniach przenośnych było 15% wolniej, gdy nawigacja była ukryta (w porównaniu ze stanem kombi).

Różnice między komputerem stacjonarnym a mobilnym doświadczeniem użytkownika

W pierwszej części tego artykułu informowaliśmy, że użytkownicy mobilni znacznie częściej korzystają z nawigacji niż użytkownicy komputerów stacjonarnych (patrz Rysunek 1). Omawiamy tutaj różnice między komputerami stacjonarnymi i mobilnymi związane z parametrami użytkowania.

1. Ukryta nawigacja z większym prawdopodobieństwem zmniejszy wykrywalność treści na pulpicie niż na urządzeniach mobilnych . Innymi słowy, gdy użytkownicy musieli odkryć zawartość wymagającą użycia nawigacji, byli bardziej narażeni na awarię na komputerze niż na komórkę. Co więcej, spadek sukcesu był większy, gdy nawigacja była ukryta. Wynik ten można również wyjaśnić zwiększoną skłonnością użytkowników komputerów do korzystania z wyszukiwania: wyszukiwanie jest bardziej istotne (w większości przypadków) na pulpicie, a użytkownicy mogą być bardziej skłonni do korzystania z niego, gdy ścieżka do treści nie jest od razu widoczna.
2. Użytkownicy komputerów stacjonarnych byli szybsi niż użytkownicy mobilni (podczas łączenia wszystkich typów nawigacji) Średnio użytkownicy mobilni potrzebowali 12% więcej czasu na wykonanie zadań. Ten wynik nie jest zaskakujący: ze względu na mały ekran i wąski kanał komunikacyjny między użytkownikiem a urządzeniem uzyskanie takiej samej zawartości na telefonie wymaga zwykle więcej interakcji.

Dlaczego ukryta nawigacja jest mniej skuteczna

Dlaczego ukryta nawigacja ma takie efekty? W całym artykule zasugerowaliśmy kilka odpowiedzi:

1. Niski poziom : mała ikona jest trudniejsza do zauważenia na dużym ekranie (a nawet na mniejszym urządzeniu mobilnym).
2. Niski zapach informacji : ikona menu lub etykieta zazwyczaj nie mówią ludziom, co jest w środku, więc nie mają pojęcia, czy znajdą to, czego potrzebują, klikając na nią.
3. Dodatkowa praca : Aby dowiedzieć się, co znajduje się w menu, ludzie muszą je rozwinąć. Zwiększa to koszt interakcji dla użytkowników i sprawia, że ​​są mniej skłonni do tego, lub, jeśli to zrobią, mogą trwać dłużej.
4. Brak standardów : Ukryta nawigacja jest wdrażana na różne sposoby przez różne witryny. Niektóre witryny go używają, inne nie. Na urządzeniach mobilnych wzorce zaczynają się tworzyć, ale na pulpicie istnieje duża zmienność i niespójność w rozmieszczaniu i etykietowaniu ukrytej nawigacji.
5. Niska znajomość : zwłaszcza na komputerach stacjonarnych, ukrywanie nawigacji nie jest powszechnym wzorcem i ludzie mogą nie oczekiwać globalnej nawigacji w rozszerzalnym menu. Niektórzy ludzie mogą również nie być zaznajomieni z ikoną hamburgera, która jest często używana w takich menu. Ta niska znajomość jest pogarszana przez brak standardów, które zmniejszają długoterminową zdolność uczenia się (jak omówiono dalej w naszym kursie na Ludzki umysł i użyteczność , uczenie się jest ułatwione przez wielokrotne narażenie na ten sam wzór.)

Z tych 5 punktów przeciwko ukrytej nawigacji, tylko ten ostatni może spaść w przyszłych latach. Hipotetycznie, mogłaby również wystąpić zwiększona standaryzacja projektu (co również zwiększyłoby znajomość), ale nasze doświadczenie obserwujące projektowanie stron internetowych ewoluowało przez dziesięciolecia, nie czyni nas optymistami, że wkrótce pojawią się silne standardy projektowe. Trzy największe punkty o niskiej istotności, niski zapach informacji i dodatkowa praca zawsze będą przekleństwem ukrytej nawigacji, która zmniejszy jej użyteczność.

Zalecenia dotyczące nawigacji

Jakie są wnioski z tych badań dla twojego następnego projektu?

Desktop : Istnieje wiele ekranów nieruchomości do wyświetlania opcji nawigacji i zalecamy:

• Nie używaj ukrytej nawigacji (np. Ikon hamburgerów) w interfejsach użytkownika pulpitu.
• Zamiast tego wyświetlaj opcje nawigacji najwyższego poziomu, zwykle na górze strony lub w dół po lewej stronie.

Komórka : W przypadku telefonów nie ma trudnej i szybkiej reguły. Ale nasze ogólne zalecenia to:

• Jeśli witryna ma 4 lub mniej łączy nawigacyjnych najwyższego poziomu, wyświetl je jako widoczne linki.
• Jeśli Twoja witryna zawiera więcej niż 4 łącza nawigacyjne najwyższego poziomu, jedynym rozsądnym rozwiązaniem jest ukrycie niektórych z nich. Stwierdziliśmy, że kara za użyteczność nałożona przez ukrytą nawigację jest bardzo obecna na urządzeniach mobilnych, ale jest mniejsza niż na pulpicie. Dlatego zalecamy dokonanie takiego kompromisu, ponieważ użyteczność rozszerzalnego menu nawigacyjnego jest znacznie lepsza niż alternatywnych projektów.
• Podaj linki na stronie do ważnych informacji na swojej stronie lub użyj innych metod wspieranie hamburgera (lub jakieś inne ukryte) menu.

Zapamiętaj: mobile-first nie jest tym samym co telefon komórkowy . Plus, oczywiście, podążaj za innym od dawna Wytyczne UX dotyczące projektowania menu .

Inne artykuły związane z badaniem Ten artykuł został oparty na