UI Design Patterns: Osvědčená řešení běžných problémů s použitelností

Sonja Hoffmann Naposledy aktualizováno 21.10.2020
11 min.
Vzory návrhu uživatelského rozhraní
Naposledy aktualizováno 21.10.2020

Jak by mělo být strukturováno menu vašeho webu? Proč je pro některé provozovatele webových stránek snazší získat předplatitele než pro jiné? Proč uživatelé vyplňují nebo ignorují formulář na vašem webu? Jako designér jsem se zabýval otázkami týkajícími se návrhu uživatelského rozhraní a použitelnosti webu – odpovědi najdete v tomto článku.

Co jsou vzory návrhu uživatelského rozhraní?

Vzory návrhu uživatelského rozhraní (UI) jsou knihovny problémů s použitelností, které již byly úspěšně analyzovány a vyřešeny. Ty by však neměly být přijaty jeden na jednoho. Poskytují však rozsáhlý základ pro harmonický uživatelský zážitek. Vzory uživatelského rozhraní jsou navrženy tak, aby usnadnily a urychlily váš pracovní postup.

Další tipy k návrhu uživatelského rozhraní a použitelnosti na webu

Jak je popsáno v tomto článku, dobrá použitelnost pomáhá uživatelům hladce procházet váš web, produkt nebo značku.

Vzorec pro vzory návrhu uživatelského rozhraní

Jak víte, které vzory návrhu jsou vhodné pro vaše webové stránky a jak je správně používat? Chris Bank ve své e-knize Mobile UI Design Patterns vymyslel následující přístup:

  • Detekce problémů: Čeho se uživatel snaží dosáhnout na vašem webu a s jakými problémy se setkává? Pokuste se formulovat problémy v jedné větě.
  • Přístup k řešení: Vyřešili tento problém jiní designéři? Pokud ano, jak?
  • Příklad ze skutečného života: Podívejte se na příklady a projděte si je jako uživatel. Pokuste se analyzovat, co vám pomohlo vyřešit konkrétní úkol. Přemýšlejte o tom, co vás přimělo přemýšlet – nebo možná dokonce neklidně. 
  • Použití: Shrňte výsledky analýzy. Jak je můžete implementovat na svých webových stránkách, abyste návštěvníkům přidali hodnotu? Bez jakých vzorů designu byste se měli obeřit? Pokud máte průvodce stylem, měli byste tam zahrnout své výsledky.

4 kategorie vzorů návrhu uživatelského rozhraní

Vzory návrhu uživatelského rozhraní lze rozdělit do čtyř kategorií, které vám stručně představím v této sekci. Bohužel nebudu schopen pokrýt všechny vzory návrhu uživatelského rozhraní. Pokud se chcete ponořit hlouběji do tématu, web vám nabízí téměř neomezené příležitosti k dalšímu čtení. Několik užitečných zdrojů souvisejících se vzory návrhu uživatelského rozhraní jsou:

1. Nejběžnější navigační prvky

Navigace je jedním z nejdůležitějších prvků interakce pro uživatele: funguje nejen jako obsah vaší stránky, ale také jako průvodce. Skutečnost, že je obvykle umístěna nahoře nebo na straně, byla původně hlavně z hierarchických důvodů. S navigací ukážeme uživateli na první pohled, co může dělat na našich stránkách a kde se v současné době nachází.

Díky letům praxe jsme tyto znalosti internalizovali do té míry, že trend k minimalismu nemusí v navigaci zastavovat. Vzory návrhu jsou proto zcela přizpůsobitelné – nebo je dokonce třeba je přizpůsobit, aby vaše stránka fungovala.

snímek obrazovky-www.castoretpollux.com-2020.06.11-18-05-59
Webové stránky Castor & Pollux

Castor et Pullex dodržují pravidla vzoru uživatelského rozhraní a stále je přizpůsobují jednotlivě na svou stranu: navigace, která se nachází v pravé horní obrazovce a při posouvání se stává "lepkavou". Logo, které opakovaně přivádí uživatele zpět do "bezpečného útočiště" - domovské stránky.

Web, který sám o sobě umožňuje mnoho interakcí, a proto se zdá být téměř trochu chaotický, získává příjemnou použitelnost pomocí již známých designových řešení.

"Lepkavé" navigace, jak je popsáno ve výše uvedeném příkladu, jsou skvělým vynálezem v webovém designu. Nejen, že s nimi můžete zobrazovat působivé animace, ale také zrychlují návštěvníkům webových stránek vašeho webu z "A do B". S One Pagers fungují také jako společné vlákno: uživatel ví, kde je a co již viděl.

Totéž platí pro strouhanku: pro malé stránky neumytí moc smysl. Na složitějších stránkách však mohou dělat zázraky. Pomáhají uživateli nejen orientovat se doma, ale také skákat zpět na jakékoli místo v navigaci.

Další způsob použití těchto vzorů je v následujícím příkladu:

Tvůrci tohoto webu přijali znalosti mobilního menu hamburgerů: na jedné straně, aby usnadnili minimalistickou navigaci na svých stránkách, což není pro uživatele cizí. Na druhou stranu, dát svému produktu dostatek prostoru, aby mohl být v popředí.

screenshot-demodern.com
Příklad projektu Demodern

Z trendu vy vyjdou něco – ale přinejmenším stejně užitečné – jsou tzv. jezdci v navigaci. Připomínají archivační systém a uživatelé jim rychle a intuitivně rozuměli. I zde funguje poloscho skilled stejně dobře v zeštíhlené verzi jako v původní verzi.

Mezitím jsou jezdci stále více používáni jako modální karty k zobrazení obsahu, který má být propojen. Jako modální karty mají také tu výhodu, že stránky nemusí být zcela znovu načteny, aby se zobrazoval jiný obsah. Zejména na produktových stránkách obchodů založených na WooCommerce často je vidíme, jako v následujících příkladech: 

UI Design Patterns: Osvědčená řešení běžných problémů s použitelností
Pohled na atlantickou terasu

Dále méně minimalistický příklad srovnání:

UI Design Patterns: Osvědčená řešení běžných problémů s použitelností
Ukázková stránka bambusového oblečení

Vzory uživatelského rozhraní jsou často založeny na interakcích reálného světa. Proto je důležité nikdy neztratíme ze zřetele fyzické vlastnosti a/nebo je záměrně nezměníme. To znamená, že uživatel již nemůže intuitivně porozumět těmto akcím a jejich důsledkům. Pro ilustraci jsem výše uvedený příklad jednou ulaji:

snímek obrazovky-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Fyzické vlastnosti struktury složek již nejsou k dispozici. Karty teď vypadají jako nemístné navigační prvky. Sounáležitost prvků je poněkud ztracena – zdají se být téměř náhodně uspořádány.

Nabídky přetečení a tlačítka "Přeskočit do sekce"

Pro dokončení našeho seznamu nesmí chybět nabídky přetečení a tlačítka "Přejít do sekce". Tlačítka "Přejít na sekci" jsou obvykle umístěna v levém dolním rohu. Umožňují uživateli přejít zpět do horní části stránky jedním kliknutím. Zejména u one pagerů dávají tlačítka Přejít na sekci smysl: Šetří čas a zabraňují frustraci prostřednictvím zdlouhavého posouvání.

Rozevírací nabídky mají ve skutečnosti menší původ při zlepšování použitelnosti stránek. Jsou navrženy tak, aby ušetřily místo a přizpůsobily se více obsahu v navigaci. Kromě toho váš design vypadá uklizenější a jasnější. Rozevírací nabídky patří mezi vzory návrhu, které se často označují jako anti-patterny – protože ve skutečnosti usnadňují navigaci na webové stránce. Rozevírací nabídky, ale stále se doporučuje. Koneckonců, jejich fungování je známo a učeno. Indikátory pro rozevírací nabídku jsou často vzory sleďových kostí dolů.

UI Design Patterns: Osvědčená řešení běžných problémů s použitelností
Ehireho webové stránky

Tlačítka a odkazy záměrně řeším pouze krátce v tomto článku, protože by měly být dobře známy každému návrháři. Design a animace tlačítek mají téměř žádné limity. Jejich styl obvykle závisí na vizuálním rozložení nabízených informací. Měly by být jasně viditelné v primární barvě stránky a měly by být seskuteny s příslušným obsahem.

Totéž platí pro odkazy: již nemusí být zobrazeny modře s podtržítkem, jak tomu bývalo. Ale jejich existence musí být jasná a především jednotná. Rozsáhlé znalosti o tlačítkách naleznete zde.

Stránkování – sdílení obsahu na více stránkách – je obzvláště důležité pro e-commerce obchody, které nabízejí větší počet produktů. Používá se k nabídce obsahu na více stránkách, zkrácení doby načítání a rozdělení jeho obsahu na snadno stravitelné oddíly. Noviny, jako je FAZ, také používají stránkování k rozdělení delších článků.

snímek obrazovky-www.faz.net-2020.06.13-15-49-43
Příklad FAZ

Také, který se v posledních letech dostal do trendu, je nyní jedním z naučených vzorů uživatelského rozhraní tzv. "tučný footer". Zde můžete například odkazovat na často navštěvované podstránky, ukládat kontaktní údaje a zobrazovat legální obsah, který v primární navigaci neztratil nic hierarchicky. 

Zápatí pak částečně funguje jako jiný strukturovaný obsah stránky. Ale může také stát jako druh upoutávky na více informací. Jakmile uživatel projde vaši stránku, zápatí mu stále může nabídnout relevantní obsah – jako jsou zajímavé články, odkazy na sociální média a spol. – které je zaměstnává vaším produktem.

2. Vstup a výstup: Kontaktní a odběr formulářů

Kromě pokynů pro ochranu údajů stojí za to zaměřit se také na potřeby uživatelů. Zejména na mobilních zařízeních může vstupní formulář rychle vést k frustraci: Již malá obrazovka, fyzické prostředí během používání, časový aspekt a možné nestabilní připojení mohou rychle představovat test nervové slzy. Naštěstí existují některé vzory návrhu, které již tyto problémy řešily.

Tip:

Obecně platí na webu následující: co nejkratší, tak dlouho, jak je to nutné. Studie ukázaly, že přidávání zbytečných otázek je kolapsem účasti a může potenciálně stát spoustu peněz.

V následujícím, jsem vytvořil fiktivní formu, abych vám ukázal nejdůležitější principy: 

Formulář
Zásady pro vstupní formuláře
  1. Testy sledování očí zjistily, že zpracováváme informace rychleji, když jsou uspořádány shora dolů, namísto zleva doprava. Proto je vhodné umístit nad pole formuláře nad pole formuláře a vytvořit pouze jeden sloupec.
  2. Je užitečné poskytnout uživateli ukázkový vstup v předem stanovených symbolech , takže požadované informace jsou vizualizovány předem. Měli byste se vyhnout rozřezané číselné položky, protože pouze komplikují vstup. Měly by být také naprogramovány tak, aby byly tolerantní k prostorům.
  3. Zpracování chyb je důležité a složité téma. Hvězdička a červené ohraničené vstupní pole se zde osvědčily jako vzory uživatelského rozhraní. V ideálním případě by pole měla být samozřejmá. Nicméně byste měli vždy očekávat, že něco nebude fungovat. Proto nabídněte různé možnosti nápovědy. Existuje několik možností: informační tlačítko, které nabízí možnou pomoc při vznášení. Nebo vyskakování malých modalů, pokud formulář není úspěšně odeslán.
  4. Je to dobré místo pro zpětnou vazbu, jakmile zadáte. V případě hesel bylo také prokázáno, že uživateli poskytl kvalitativní posouzení toho, jak bezpečné heslo si zvolil. 
  5. Vícestupňová forma má několik psychologických výhod. Zpočátku je to jasnější a méně skličující. Pokud je pak uživatel také zobrazen pomocí indikátoru (zde nakládací lišty), kde je ve formě, ví přesně, co přichází. Je méně pravděpodobné, že předčasně skončí. Osobní údaje by měly být vždy dotázány na konci formuláře. Koneckonců, pokud návštěvník vašeho webu již formulář do značné míry vyplnil, bude pro něj obtížnější vzdát se již investovaného času bez výsledku. Je také vhodné jednoduše požádat o informace, které jsou skutečně potřebné, a také odůvodnit žádost. Pokud požádáte své uživatele, aby se k něčemu přihlásili, je vhodné pro ně zadat výhodu - "Vždy nejprve získejte nejlepší nabídky". V posledním kroku byste měli poskytnout malý přehled o tom, co se stane dál – a co může uživatel očekávat a kdy.

Kromě toho by vaše formuláře měly zahrnovat automatické vyplňování (prostřednictvím dat uložených v prohlížeči) a rozpoznávání informací (například přidání města po zadání PSČ). V tom případě, zejména v případě WordPress mnoho formulářů, které již byly ve výchozím nastavení zahrnuty. 

Pokud je to možné, měli byste se vyvarovat nebo alespoň udržovat používání Captchas na minimu. Podle této studie mohou captchas způsobit o 30 procent menší interakci s formou.

3. Strukturování obsahu

Jako provozovatel webových stránek byste měli zejména prozkoumat, jak je obsah vašeho webu strukturován: Pomáhají vašim návštěvníkům najít cestu přes vaše stránky? Je váš obsah snadno přístupný a rozumíte jeho hierarchii? 

Otázka snadné přístupnosti oslovuje zejména uživatele, kteří si váš web prohlížet za změněných podmínek. Například u lidí s barevným viděním a zrakovým postižením. Pokud se chcete ponořit hlouběji do tématu přístupnosti a přístupnosti, najdete další informace zde: 

Pokud máte blog nebo online časopis, možná znáte problém: Máte spoustu zajímavého obsahu, který byste chtěli nabídnout co nejakutněji. Vhodným vzorem návrhu je tzv. "Seznam článku". Zde kategorizujete svůj obsah a zobrazíte pouze malý úryvek najednou. To vám umožní zobrazit mnoho témat na první pohled, aniž byste zaplavili uživatele informacemi. Pěkný příklad zde ukazuje RAIDBOXES :

RAIDBOXES WP unboxed
Pohled na WordPress Časopis wp unboxed

Tato divize umožňuje uživateli létat nad celým obsahem podle oblastí zájmu a rychleji tak zjistit, co ho zajímá.

Chcete-li nabídnout určitý obsah bez rozptylování, můžete použít modální boxy. Ty leží na zbytku stránky a umožňují uživateli soustředit se pouze na její obsah. To může být nezbytné a důležité. Všimněte si však, že tyto mody jsou také spíše anti-vzor: v zásadě blokují uživateli jakoukoli manévrovací místnost, pokud je modal otevřený.

Modální boxy však mohou návštěvníkům pomoci lépe porozumět vašemu obsahu. Modální boxy, které jsou příliš běžné nebo zdánlivě neprávem spuštěné, však mohou rychle způsobit frustraci a pocit bezmocnosti.

Do této kategorie patří také lightbox a celoobrazový režim. Na jedné straně umožňují uživateli podívat se zblízka na vybraný obsah. Na druhou stranu znemožňují jakoukoli jinou interakci. Proto je vždy důležité nabídnout alespoň jeden úběžný bod. Obzvláště dobře známé jsou kliknutí na X v pravé horní části obrázku nebo kliknutím mimo pole ji znovu zavřete.

Prezentace jsou také oblíbeným způsobem zobrazení obrázků. Rozlišuje se mezi automatickým přehráváním a ručně navigované prezentace. Galerie jsou často uvedeny jako miniaturní obrázky a pak zvětšeny pomocí prezentací a/nebo světelných schránek.

Zde byste měli jednat především podle funkce: Jaký druh obrázků reprezentujete? Musí být k dispozici jako celá obrazovka? A co je důležitější: váš obsah jako celek nebo jednotlivé obrázky? Stojí za to uchýlit se k jiným možnostem – například lupě, která zvětšuje vaše obrazy při vznášení? Ten je obzvláště populární v e-commerce.

Snímek obrazovky Se vzory návrhu uživatelského rozhraní Unsplash
Zobrazení miniatur na unsplash.com

unsplash.com používá kombinaci galerie obrázků a světelných boxů. Obrázky se však nezobrazují jako miniatury. Proč? Unsplash je platforma, která nabízí pouze obrázky ke stažení. To znamená, že uživatelé si musí být moci vybrat pro nebo proti obrázku přímo na první pohled. Aby bylo možné učinit toto rozhodnutí, musí být rozlišení obrazu relativně dobré. Miniatury by na to byly příliš malé. A kliknutí na každý obrázek jednotlivě nebo procházení prezentace by mnohokrát minimalizovalo efektivitu stránky.

Během celého procesu implementace a návrhu nesmíte nikdy ztratit ze zřetele otázku hodnoty/ hodnoty a důležitosti.

4. Hrajte sociální kanály

To platí pro vzory, které pomáhají vést uživatele k vašim kanálům sociálních médií a / nebo jim usnadňují sociální interakci. Podrobné příklady naleznete zde.

Závěr

Nakonec mohu doporučit dva hlavní přístupy. Nejprve navštivte a analyzujte co nejvíce webových stránek, abyste shromáždili inspiraci: Jak jiní návrháři vyřešili určité problémy nebo je nevyřešili? Co mě frustruje, když surfuju po síti? Kdy jsem byl naposledy pozitivně překvapen – a proč? 

Za druhé, vždy si pamatujte, že vy nejsi uživatel. Návštěvníci vašich webových stránek přemýšlejí překvapivě jinak než vy. Možná ještě neznáte svůj produkt. Proto opakovaně proveďte několik testů, abyste posoudili, jaká je použitelnost na vašem webu.

Jaké máte otázky pro Sonju ohledně vzorů uživatelského rozhraní?

Použijte funkci komentáře. Chcete být informováni o nových příspěvcích a tipech o návrhu a vývoji webu? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho zpravodaje.

Po studiu designu počítačových her a kreativního psaní v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamifikaci a výzkum motivace uživatelů a jejích zkušeností, a s velkou vášní a zvědavostí na technologické trendy.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.