Nawigacja użytkowa Jak wpływa na projekt użytkownika

Aby zaprojektować skuteczną i przyjazną dla użytkownika nawigację, musimy nie tylko myśleć o tym, jak to zrobić pogrupuj nasze treści w dobrze zorganizowane menu aby umożliwić użytkownikom łatwe znalezienie tego, czego chcą, ale także o tym, jak zaprojektować narzędzia, których będą potrzebować do interakcji z witryną

Nawigacja, która nie jest ściśle związana z treścią i pomaga użytkownikom wykonywać różne czynności, jest nazywana nawigacja narzędziowa, i jest to mniej szeroko omawiany, ale niezwykle ważny aspekt projektowania doświadczeń użytkowników. Paski wyszukiwania, formularze logowania i rejestrowania, przyciski subskrypcji, udostępniania i drukowania, koszyki zakupów, menu kontekstowe i narzędzia umożliwiające użytkownikom zmianę języka lub rozmiaru czcionki są typowymi przykładami nawigacji narzędziowej.

Projektowanie ich nie jest tak proste, jak się wydaje na pierwszy rzut oka wymaga rozważenia, aby dowiedzieć się, jakich elementów potrzebujemy, gdzie je umieścić i jak je wyświetlić aby upewnić się, że nasi goście mogą szybko je znaleźć i zrozumieć, jak działają.

Jak użyteczna nawigacja wpływa na UX

Kiedy projektujemy nawigację użytkową, musimy zdecydować, w jaki sposób chcemy, aby nasi użytkownicy korzystali z naszej witryny. Musimy zapewnić im struktura interakcji który pasuje do naszych celów biznesowych, prowadzi użytkowników przez podróż klientów, daje im łatwe do zrozumienia opcje i zapewnia im przyjemną obsługę.

Po pierwsze, muszą być w stanie szybko wykonać pożądane czynności. Jeśli pozwolimy im na to, zadowolenie klientów wzrośnie, a zadowoleni użytkownicy będą spędzać więcej czasu i więcej pieniędzy na stronach internetowych.

Strona główna AirBnB jest zgodna z tą zasadą UX, a jej górne menu zawiera tylko narzędzia użytkowe. To nie jest zwykłe rozwiązanie, ale jeśli spojrzymy na niesamowitą szybkość wzrostu AirBnB, jest to idealny wybór dla nich.

4 główne elementy menu są skierowane do 4 głównych osób, które zazwyczaj odwiedzają witrynę AirBnB: osoby zainteresowane zostaniem hostem (“Zostań gospodarzem”), ludzie, którzy chcą rozwiązać problem, który miał miejsce podczas korzystania z usługi (“Wsparcie”), nowi i powracający użytkownicy (“Zapisz się” i “Zaloguj Się”). Strona domowa AirBnB koncentrująca się na narzędziach zawiera również pasek szybkiego wyszukiwania, który jest kluczowym narzędziem na stronie wynajmu zakwaterowania.

Po drugie, użytkownicy nie potrzebują zbędnych narzędzi, ponieważ zbyt dużo bałaganu rozprasza uwagę i zmniejsza skupienie. Jakie narzędzia są niezbędne w naszej nawigacji użytkowej i co nie zależy od charakteru naszej strony. Na przykład może być użyteczne dołączenie widoku wydruku na blogu lub w witrynie z wiadomościami, ale ta sama funkcja może być niepotrzebnym rozpraszaniem uwagi na forum lub w serwisie społecznościowym.

Na przykład Washington Post wyświetla nawigację narzędzi na stronach z pojedynczym postem inaczej niż na stronie głównej. W ten sposób użytkownicy spotykają się tylko z narzędziami, które są istotne i nie są nękani opcjami, których i tak nie chcieliby używać.

Istnieją 3 elementy nawigacji narzędziowej, z których użytkownicy mogą korzystać w całej witrynie. Są one elegancko zawarte w stałym górnym pasku (narzędzie wyszukiwania, “Zaloguj”, i “Subskrybować”), ale użytkownicy nie muszą myśleć o opcjach dotyczących pojedynczych postów, takich jak “Lista do przeczytania” podczas przeglądania strony głównej lub jednej ze stron kategorii.

Po trzecie, użytkownicy muszą szybko zrozumieć, co mogą zrobić na naszej stronie. Odwiedzający niekoniecznie wiedzą, czego chcą, dlatego zawsze musimy przekazywać im informacje o dostępnych opcjach.

Jeśli spojrzysz na poniższy zrzut ekranu, zobaczysz, że The New York Times informuje użytkowników o dostępności 3 różnych wersji: amerykański, Międzynarodowy, i chiński, a także umożliwia im szybko przełączać się między tymi trzema. Ten świetny przykład inteligentnej nawigacji narzędziowej pokazuje użytkownikom mniej oczywiste opcje, których prawdopodobnie nie znaleźliby sami, w niezobowiązujący i elegancki sposób.

Znajdź najlepsze miejsce

Istnieją typowe miejsca dla nawigacji narzędziowej, w których użytkownicy intuicyjnie szukają tych narzędzi, ponieważ to właśnie oni przyzwyczaili się na większości stron internetowych. Przełamywanie konwencji projektowania stron internetowych jest uważane za złą praktykę użytkownika i jest szczególnie prawdziwe w przypadku nawigacji narzędziowej, która w większości przypadków dotyczy bardziej użyteczności niż kreatywności.

Ponieważ nawigacja użyteczności jest drugorzędna w stosunku do nawigacji opartej na treści w większości stron internetowych, często umieszczana jest w mniej widocznych, ale wciąż widocznych obszarach. Zwykle oznacza to (1) prawy górny róg stron internetowych i (2) dolną część stopki. Jego dobrym pomysłem jest przestrzeganie tych konwencji, tak jak są to miejsca, w których większość użytkowników najpierw szuka narzędzi użytkowych.

Jak widać poniżej, Reuters umieścił większość swoich narzędzi użytkowych w tych dwóch typowych obszarach, prawym górnym rogu witryny i dolnej części stopki poniżej nawigacji opartej na treści. Unikalnym rozwiązaniem jest stała dodatkowa stopka z 2 elementami użytkowymi, które projektanci uznali za najważniejsze: “Zaloguj się lub zarejestruj” i “Najnowsze z My Wire”.

Warto zauważyć, że dodatkowy obszar nawigacji narzędziowej jest nadal umieszczony w rodzaju stopki, w której użytkownicy normalnie szukaliby podobnych narzędzi, więc projektanci Reutersa byli w pewien sposób twórczy ale nadal przestrzegał konwencji projektowania stron internetowych, aby zachować użyteczność.

Zbuduj strukturę logiczną

Grupowanie narzędzi użytkowych w logiczną strukturę ma kluczowe znaczenie, jeśli chcemy zbudować witrynę o wysokim współczynniku konwersji. Może to stanowić wyzwanie, nawet jeśli nie chcemy zapewnić użytkownikom wielu opcji, ale Amazon przenosi złożoność nawigacji narzędziowej na wyższy poziom. Amazon ma niezwykle skomplikowaną nawigację narzędziową z wieloma opcjami, ale jeśli używamy Amazon wystarczająco regularnie, nie wydaje się tak. To jest magia inteligentnego projektu.

Nie tylko umieścili nawigację narzędziową w prawym górnym rogu, gdzie użytkownicy oczekują jej znalezienia, ale podzielili ją także na 3 główne grupy: (1) pasek wyszukiwania, (2) informacje dotyczące użytkownika (poniżej paska wyszukiwania ) i (3) czynności, które użytkownicy mogą wykonywać w witrynie.

Jest inteligentny, ponieważ dzięki wizualnym wskazówkom, takim jak koszyk lub ikona wyszukiwania, klienci mogą w mgnieniu oka zdecydować, której grupy chcą użyć, i od tej pory mogą zignorować pozostałe dwie. Jest tylko jedna grupa (“Twoje konto”, “Spróbuj Prime”, “Kosz”, i “Lista życzeń”), który ma podmenu, które są również logicznie uporządkowane, a różne grupy podmenu są podzielone przez dyskretne, ale widoczne separatory, aby pomóc użytkownikom szybko znaleźć to, czego chcą.

Utwórz efektywny projekt wizualny

Projekt wizualny skutecznej nawigacji narzędziowej musi być zgodny ze słynną zasadą KISS (Keep It Simple, Stupid). Zaleca się, aby dostarczyć ikony z etykietami tekstowymi, sprawić, by kontrolki wyglądały jak kontrolki i wizualnie podkreślić najważniejsze działania. Dobrym pomysłem może być także odróżnienie nawigacji od treści i nawigacji opartej na treści za pomocą nieco innej konstrukcji.

Dwa wspaniałe przykłady skutecznego projektowania wizualnego można znaleźć na stronie internetowej Walmart i Etsy. Projektanci umieścili nawigację użytkową na najwyższym z obu stron i wyróżnili ją kolorami, które różnią się od reszty nawigacji, Walmartem z niebieskim tłem i Etsy z niebieskimi czcionkami.

Obie strony podkreśl najważniejsze działania użytkownika za pomocą różnych elementów wizualnych, Walmart używa koloru żółtego do wyszukiwania i przycisków logowania, podczas gdy Etsy daje dyskretną niebieską ramkę do przycisku Zaloguj i zawiera szarą ikonę koszyka nad menu koszyka.

Jest to jedyne miejsce, w którym Etsy używa ikony w menu narzędzi, podczas gdy Walmart wyświetla ikonę obok każdego elementu, ale nadal nie zapomina dołączyć niezbędnych etykiet tekstowych tuż obok ikon.