Utility Navigace Jak to ovlivňuje uživatelské zkušenosti Design

Abychom navrhli účinnou a uživatelsky příjemnou navigaci, nemusíme jen přemýšlet o tom, jak na to seskupit náš obsah do dobře strukturovaných nabídek umožnit uživatelům snadno najít to, co chtějí, ale také o tom, jak navrhnout nástroje, které budou potřebovat k interakci s webem

Volá se navigace, která není striktně spjata s obsahem a pomáhá uživatelům provádět různé akce navigace, a je to méně rozšířený, ale nesmírně důležitý aspekt designu uživatelského prostředí. Vyhledávací lišty, přihlašovací a registrační formuláře, tlačítka pro přihlášení, sdílení a tisk, nákupní vozíky, kontextové nabídky a nástroje, které umožňují uživatelům přepínat jazyky nebo velikost písma, jsou typickými příklady obslužné navigace.

Navrhnout je není tak snadné, jak se zdá na první pohled, to vyžaduje zvážení zjistit, jaké prvky potřebujeme, kam umístit a jak je zobrazit aby naši návštěvníci mohli rychle najít a pochopit, jak fungují.

Jak ovlivňuje obslužná navigace UX

Když navrhujeme navigaci, musíme se rozhodnout, jak chceme, aby naši uživatelé komunikovali s našimi stránkami. Musíme jim poskytnout interakční struktury který odpovídá našim obchodním cílům, vede uživatele cestou zákazníka, dává jim snadno srozumitelné možnosti a poskytuje jim příjemný uživatelský zážitek.

Nejdříve, musí být schopni rychle provádět akce, které chtějí. Pokud jim to umožní, spokojenost zákazníků poroste a spokojení uživatelé mají tendenci trávit více času a více peněz na webových stránkách.

Domovská stránka AirBnB se řídí tímto principem UX a její horní menu obsahuje pouze nástroje. Není to obvyklé řešení, ale pokud se podíváme na neuvěřitelnou rychlost růstu AirBnB, je to ideální volba pro ně.

Čtyři hlavní položky nabídky jsou zaměřeny na 4 hlavní osoby, které obvykle navštěvují stránky AirBnB: lidé, kteří mají zájem stát se hostitelem (“Staňte se hostitelem”), lidé, kteří chtějí vyřešit problém, ke kterému došlo při používání služby (“Pomoc”), nových a vracejících se uživatelů (“Přihlásit se” a “Přihlásit se”). Domovská stránka AirBnB zaměřená na nástroje také obsahuje panel s rychlým vyhledáváním, který je klíčovým nástrojem na webových stránkách pronájmu ubytování.

Za druhé, uživatelé nepotřebují zbytečné nástroje, protože příliš mnoho nepořádků odvádí pozornost a snižuje zaměření. Jaké nástroje jsou nezbytné v naší navigaci a co není závislé na povaze našich stránek. Například může být užitečné zahrnout zobrazení tisku na blog nebo na zpravodajské stránky, ale stejná funkce může být zbytečným rozptýlením na fóru fóra nebo na webových stránkách sociálních médií..

Washington Post například zobrazuje navigaci na nástrojích na jednotlivých stránkách příspěvku odlišně od domovské stránky. Tímto způsobem se uživatelé setkávají pouze s nástroji, které jsou relevantní, a nejsou otravovány možnostmi, které by stejně nechtěly používat.

K dispozici jsou 3 položky navigačního nástroje, které mohou návštěvníci chtít použít na webu. Ty jsou elegantně zahrnuty v pevné horní liště (vyhledávací nástroj, “Přihlásit se”, a “předplatit”), ale uživatelé nemusí přemýšlet o možnostech týkajících se jednotlivých příspěvků, jako je “Seznam čtení” při procházení domovskou stránkou nebo jednou ze stránek kategorie.

Za třetí, uživatelé potřebují rychle pochopit, co mohou na našich stránkách dělat. Návštěvníci nemusí nutně vědět, co chtějí, a proto jim vždy musíme poskytnout informace o možnostech, které mají.

Pokud se podíváte na níže uvedenou obrazovku, uvidíte, že The New York Times informuje uživatele o dostupnosti 3 různých verzí: americký, Mezinárodní, a čínština, a také jim umožňuje rychle přepínat mezi těmito třemi. Tento skvělý příklad inteligentní obslužné navigace ukazuje uživatelům méně zřejmé možnosti, které by zřejmě nenalezli na vlastní pěst, neuváženým a elegantním způsobem.

Najít nejlepší místo

Tam jsou typické umístění pro navigaci nástroje, kde uživatelé intuitivně hledat tyto nástroje, protože to je to, co si zvykli na většině webových stránek. Prolomení konvence webového designu je považováno za špatnou praxi pro uživatele, a to platí zejména pro navigaci, která je ve většině případů více o použitelnosti než kreativitě..

Vzhledem k tomu, že navigace ve většině webových stránek je sekundární k navigaci založené na obsahu, je často umístěna v méně prominentních, ale stále viditelných oblastech. To obvykle znamená (1) pravý horní roh webových stránek a dolní část zápatí (2). To je dobrý nápad dodržovat tyto úmluvy, tak jako to jsou místa, kde většina uživatelů hledá nástroje nejdříve.

Jak můžete vidět níže, Reuters umístil většinu svých nástrojů do těchto dvou typických oblastí, v pravém horním rohu stránky, a dolní část zápatí pod navigací založenou na obsahu. Jedinečným řešením je zde fixní zápatí s 2 nástroji, které designéři považovali za nejdůležitější: “Přihlaste se nebo se zaregistrujte” a “Poslední z mého drátu”.

Je zajímavé poznamenat, že extra navigační oblast nástroje je stále umístěna do zápatí, kde uživatelé obvykle hledají podobné nástroje, takže návrháři společnosti Reuters byli způsobem ale stále dodržovala konvence webového designu, aby byla zachována použitelnost.

Sestavte logickou strukturu

Pokud chceme vytvořit web s vysokou mírou konverze, je klíčové seskupení nástrojů do logické struktury. To může být výzva, i když nechceme poskytovat uživatelům mnoho možností, ale Amazon přebírá složitost navigace nástroje na další úroveň. Amazon má neuvěřitelně složitou navigaci s mnoha možnostmi, ale pokud používáme Amazon dost často, tak se to nezdá. To je kouzlo inteligentního designu.

Oni ne jen umístili pomocnou navigaci v pravém horním rohu kde uživatelé očekávají, že najde to, ale oni také rozdělili to do 3 hlavních skupin: (1) vyhledávací panel, (2) informace o uživateli (pod panelem hledání \ t ) a (3) akce, které mohou uživatelé provádět na webu.

Je to chytré, protože díky vizuálním podnětům, jako je nákupní košík nebo ikona vyhledávání, se zákazníci mohou rozhodnout v záblesku oka, kterou skupinu chtějí používat, a od té doby mohou ostatní dva ignorovat. Existuje pouze jedna skupina (“Váš účet”, “Zkuste Prime”, “Košík”, a “Seznam přání”), které má také podnabídky, které jsou také logicky strukturovány, a různé skupiny podnabídek jsou rozděleny diskrétními, ale viditelnými oddělovači, které pomáhají uživatelům rychle najít to, co chtějí.

Vytvoření efektivního vizuálního návrhu

Vizuální design efektivní navigace potřebuje dodržovat slavný princip KISS (Keep It Simple, Stupid). Doporučuje se, aby byly ikony opatřeny textovými štítky, aby ovládací prvky vypadaly jako ovládací prvky, a vizuálně zdůrazňujte nejdůležitější akce. Rovněž může být dobré rozlišovat mezi obsluhou a navigací založenou na obsahu pomocí mírně odlišného designu.

Dva skvělé příklady efektivního vizuálního designu naleznete na webových stránkách Walmart's a Etsy. Návrháři umístili navigaci nástroje na nejvyšším z obou stránek a zvýraznili ji barvami, které se liší od zbytku navigace, Walmart s modrým pozadím a Etsy s modrými fonty..

Obě místa zdůraznit nejdůležitější akce uživatele s různými prvky vizuálního návrhu, Walmart používá žlutá tlačítka pro vyhledávání a přihlášení, zatímco Etsy dává diskrétní modré ohraničení tlačítku Přihlášení a obsahuje šedou ikonu nákupního košíku nad nabídkou Košík..

Toto je jediné místo, kde Etsy používá ikonu v nabídce nástrojů, zatímco Walmart zobrazuje ikonu vedle každé položky, ale nezapomíná zahrnout potřebné textové štítky přímo vedle ikon.