Osvědčené postupy pro 6 běžných prvků uživatelského rozhraní
Vzhled a použitelnost některých prvků rozhraní a funkčnosti jsou rozhodující pro úspěch všech webových stránek na dnešním trhu.
Studie prokázaly, že i zpoždění v myšlení na straně uživatele, které se dělí za druhé, oslabí jejich vnímání a zájem o webové stránky a nakonec sníží míru konverze.
V některých výklencích a průmyslových odvětvích mohou mít prvky UI, které nejsou zřejmé v jejich používání, zcela přijatelné. Blogování a vývoj webu jsou dokonalým příkladem.
Ale když navrhneme uživatelské rozhraní pro netechnologicky orientované publikum - což je obvykle v případě práce s klientem - musíme zajistit, aby některé prvky uživatelského rozhraní nebyly příliš vzdálené od toho, co jsou zvyklí uživatelé.
Tento článek popisuje některé osvědčené postupy a vlastnosti použitelnosti šesti prvků uživatelského rozhraní a konvencí pro každého, aby vývojáři mohli vytvářet uživatelské zkušenosti, které jsou krásné i jednoduché.
1. Vzhled vyhledávacího pole
Na rozsáhlých webových stránkách bohatých na informace nebo na produktech je vyhledávání králem. Uživatelé zde obecně opouštějí konvenční navigační panely ve prospěch vyhledávacího pole.
Vyhledávací pole, které není okamžitě viditelné, bude mít jeden ze dvou efektů: 1) uživatel předpokládá, že není k dispozici žádná funkčnost vyhledávání nebo 2) uživatel vyhledá funkčnost vyhledávání po zpožděném a možná dráždivém období.
Ujistěte se, že vyhledávací pole na vašem webu je snadné vidět. Tmavé pozadí a fantazijní grafika zhorší použitelnost , takže nejlepší je udržet bílou nebo světle šedou barvu. Také se ujistěte, zda je vyhledávací pole dostatečně velké vzhledem k ostatním důležitým prvkům na stránce, a tím udržuje jeho polohu ve vizuální hierarchii.
Vyhledávací pole je zapnuté Doména podle IP je ideální pro vizuální téma webu, je oranžová a graficky konzistentní s okolím. Ale pokud by vyhledávací schránka na zaneprázdněném webu dostala tuto léčbu, bylo by pravděpodobně obtížné zjistit.
Design není překážkou pro Domain by IP, protože webová stránka má jednu funkci: vyhledávání, které je přímo uprostřed stránky. Kromě toho, že jsou v technologickém výklenku, jeho vývojáři mají menší podnět k tomu, aby se drželi konvence. Tento stupeň kreativity by se však měl vyhnout na větších webových stránkách , jejichž cílové publikum nemusí být tak technicky zdatné.
Dobrodružství , zatím udržuje vyhledávací políčko bílé, pohodlné velikosti a snadno se nachází na stránce:
I když je v cizím jazyce, Adventure Time má velmi jasné vyhledávací pole, a to i pro anglicky mluvící uživatele. Velikost a barva krabice doplňuje lupa, která se stala univerzálním symbolem pro vyhledávání online. Uživatel, který tuto službu hledá, zde nebude mít problém.
Tento vzorec by měl být dodržován ve všech projektech zaměřených na různorodou uživatelskou základnu.
Další čtení:
2. Zřetelně označený skládaný / rozšiřitelný obsah
Webové stránky mají prospěch ze skládacích panelů a rozbalovacích nabídek, protože vytvářejí čistší a méně sražené rozvržení. Skrytý obsah těchto prvků rozhraní však může poškodit použitelnost webových stránek, pokud jejich přítomnost není jasně uvedena.
Když uživatel klikne na holý odkaz nebo tlačítko, očekává, že bude převeden na novou stránku. Ale když uživatel klikne na odkaz nebo tlačítko, které má skrytý indikátor obsahu, očekávají, že nový obsah bude okamžitě zobrazen (pomocí jazyka JavaScript nebo AJAX) a má možnost následně jej skrýt. Webová stránka by proto měla ostře rozlišovat mezi normálními odkazy a odkazy, které odhalují nový obsah prostřednictvím jazyka JavaScript .
Skládací obsah, například boční panely a stromy nabídek, lze označit šipkou, trojúhelníkem nebo indikátorem plus / minus, který je podobný programu Windows Explorer. Panel, který přihlášeni uživatelé vidí CSS Globe jasně ukazuje, že je skládací:
Níže je stejná stránka po rozbalení panelu, aby se odhalila skupina funkcí:
Když je obsah v panelu nyní rozbalen, šipka se otáčí o 90 stupňů, což naznačuje, že tentýž obsah může být nyní skrytý nebo sbalený. Stejný princip lze aplikovat i na drop-down nebo fly-out menu, i když by to nevyžadovalo rotující šipku. Překvapivě je tato funkce často vynechána i na profesionálně navržených webových stránkách.
Další čtení:
3. Indikátor zatížení AJAX
Když zlepšíte uživatelskou zkušenost tím, že načtete obsah přes asynchronní požadavky, ujistěte se, že uživatel informuje, že je zpracováván požadavek AJAX. Bez tohoto ukazatele se uživatel může vzdát čekání nebo se divit, proč se v reakci na jejich kliknutí nic nestalo.
To můžete dosáhnout mnoha způsoby; Jedním ze způsobů je zvýraznění položky "Načítání" nebo podobné zprávy v místě nebo v blízkosti místa, kde se akce bude odehrávat, jako čtečka RSS společnosti Google:
V horní části obrazovky je žlutý zvýrazněný text, který se zobrazí, když kliknete na tlačítko Označit vše jako přečtené, a říká uživateli, že se něco děje.
Jiný způsob, jak to uvést, je animace nebo otáčející se hodinové sklo, které by bylo známé uživatelům systému Windows. Animovaný indikátor se používá na mnoha webových stránkách, včetně Cvrlikání , kde uživatelé kliknou na tlačítko "Více" pro zobrazení starších tweets:
Po kliknutí na tlačítko a v závislosti na rychlosti připojení klienta k serveru se zobrazí známá animovaná vířivá grafika, která uživateli říká, že se jeho žádost zpracovává.
AJAX načítání grafiky je k dispozici zdarma z mnoha různých webových stránek, z nichž mnohé umožňují přizpůsobit grafiku velikostí, barvou a dalšími možnostmi.
Tento typ vizuálního indikátoru je důležitý pro asynchronní požadavky, které neposkytují informace na straně klienta o tom, jakou činnost načítá.
AJAX-podobný indikátor by mohl být také použit ke zlepšení non-AJAX funkce, která se chová jako AJAX a potřebuje čas na načtení. To může zahrnovat fotogalerii, která načítá větší obrázek při kliknutí na miniaturu.
AJAX načítání grafiky a dalších ukazatelů ve skutečnosti nezrychlují stránku, ale zlepšují dobu načítání "vnímaného" , což je často stejně cenné jako zlepšení skutečného času načítání.
Další čtení:
4. Umístění nákupního košíku a přihlašovací a registrační funkce
Když uživatelé naskenují stránku pro tlačítko "Nákupní košík" nebo "Zaregistrujte se", první místo, které vypadají, je v pravém horním rohu stránky. Pokud nemáte přesvědčivý důvod k tomu, udržujte tuto funkci v známém místě, jinak riskujete zpomalení a narušení uživatelského prostředí.
Možnosti a funkce, které by spadaly do této kategorie, zahrnují "Zobrazit košík", "Check out", "Přihlásit se", "Odhlásit se", "Registrovat", "Odeslat odkaz," "Zapomněli jste heslo?" "Tato poslední položka by byla obvykle poslední v horizontální navigační liště.
TasteBook obsahuje čtyři takové odkazy v pravém horním rohu rozvržení:
Maui Divers šperky je dalším dobrým příkladem a také obsahuje grafickou nákupní tašku:
5. Formát data vypršení platnosti na formuláři platební karty
Když formulář požádá o datum vypršení platnosti kreditní karty, formát je vždy stejný: měsíc, který je reprezentován dvěma číslicemi, po němž následuje rok, představovaný dvěma nebo čtyřmi číslicemi (např. 03/11 nebo 03/2011). Čtyřmístný formát popisuje datum vypršení platnosti na samotné kreditní kartě.
Nejlepším způsobem, jak tyto informace shromáždit a posílit uživatelskou zkušenost, je použít dvě samostatné políčka výběru, jedna za měsíc a druhou za rok. Nezapomeňte uživatele zadat datum vypršení platnosti do jediného textového pole, a to i v případě, že poskytnete pokyny.
Zde je dobrý příklad z platební stránce Maui Divers šperky:
A zde je příklad špatně navrženého pole pro vypršení platnosti:
Měsíční selektor by navíc neměl zobrazovat názvy měsíců, ale místo toho by měl obsahovat čísla 01 až 12. Není důvod zpomalit uživatele tím, že je ukáže, že "08" znamená "srpen".
6. Snadno identifikovatelné odkazy
To by nikdy nemělo být problémem, ale některé webové stránky stále bohužel jasně nerozlišují mezi odkazy a běžným textem v hlavním těle.
Ve většině případů je nejlepším způsobem označování tohoto rozdílu vytvoření odkazů v jiné barvě a jejich zdůraznění. V některých případech stačí pouze silná kontrastní barva; ale pouze podtržení nebo jen změna barvy mírně je zřídka dostačující a často zhoršuje dostupnost.
Cameron.io dělá toto rozlišení dobře:
Tyto odkazy by nebyly viditelné, kdyby byly pouze podtržené, ale nezměnily se. Nevytvářeli jste tlačítko, které nevypadalo jako tlačítko, takže proč se textové odkazy spojí do hlavního těla? Jelikož většina uživatelů skenuje text online, návrháři by měli zajistit, aby všechny odkazy byly identifikovatelné dlouho předtím, než je myš převracena.
Další čtení:
Závěr
Veškeré prvky a funkce uživatelského rozhraní, které jsou popsány v tomto článku, jsou zásadní pro používání webu a hrají důležitou roli ve vnímaní vaší značky.
Mnoho malých vylepšení může znamenat velký rozdíl ve vnímané rychlosti a může znemožnit uživatelům zklamání nebo nepohodlí.
Ujistěte se, že prvky uživatelského rozhraní jsou jednoduché a racionální a podle možností dodržujte konvence. Uvidíte snížené míry odchodů, lepší konverze a nepřetržitý tok návratnosti provozu.
Napsal výhradně pro WDD Louis Lazaris, nezávislý spisovatel a webový vývojář. Louis běží Působivé weby , kde publikuje články a cvičení o web designu.
Jak lze zlepšit některé z těchto nebo jiných prvků uživatelského rozhraní? Podělte se o své myšlenky do níže uvedených komentářů.