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

Sonja Hoffmann Aktualizováno 21.
11 min.
Návrhové vzory uživatelského rozhraní
Naposledy aktualizováno 21.

Jak by mělo být menu vašich webových stránek strukturováno? Proč je pro některé provozovatele webových stránek snazší získat předplatitele než ostatní? Co přiměje uživatele vyplnit nebo ignorovat formulář na vašem webu? Jako designér jsem se zabýval otázkami týkajícími se designu uživatelského rozhraní a použitelnosti webu - odpovědi najdete v tomto článku.

Co jsou návrhové vzory uživatelského rozhraní(UI)?

Návrhové vzory 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řijímány jeden na jednoho. Poskytují však rozsáhlý základ pro harmonický uživatelský zážitek. Vzorky uživatelského rozhraní jsou navrženy tak, aby usnadnily a urychlily váš pracovní postup.

Další tipy k UX Design & Web Použitelnost

Stejně jako v v tomto článku Dobrá použitelnost pomáhá vést uživatele hladce prostřednictvím vašich stránek, produktů nebo značky.

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

Jak víte, které návrhové vzory jsou vhodné pro vaše webové stránky a jak je správně používat? Chris Bank komentoval ve své e-knihy Návrhové vzory mobilního uživatelského rozhraní tento postup:

  • Zjišťování problémů: Co je uživatel se snaží dosáhnout na vašich webových stránkách a jaké problémy se setká? Pokuste se formulovat problémy v jedné větě.
  • Přístup k řešení: Vyřešili tento problém jiní návrháři? Pokud ano, jak?
  • Real-Life-Příklad: Podívejte se na příklady a projít je jako uživatel. Pokuste se analyzovat, co vám pomohlo vyřešit konkrétní úkol. Zamyslete se nad tím, 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 kterých designových vzorů byste se měli obměkutit? Pokud máte průvodce stylem, měli byste tam uvést své výsledky.

4 kategorie návrhových vzorů uživatelského rozhraní

Návrhové vzory uživatelského rozhraní lze rozdělit do čtyř kategorií, které vám stručně představím v této části. Bohužel, nebudu moci pokrýt všechny návrhové vzory uživatelského rozhraní. Pokud se chcete ponořit hlouběji do tématu, web vám nabízí téměř neomezené možnosti číst dále. Několik užitečných zdrojů souvisejících s návrhovými vzory uživatelského rozhraní:

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

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

Díky dlouholeté praxi jsme tyto znalosti internalizovali do takové míry, že trend k minimalismu se nemusí zastavit v navigaci. Návrhové vzory jsou proto zcela přizpůsobitelné - nebo dokonce musí být přizpůsobeny, aby vaše stránka fungovala.

snímek obrazovky-www.castoretpollux.com-2020.06.11-18-05-59
Internetové stránky Kolečko a Pollux

Castor et Pullex se drželi pravidel vzoru uživatelského rozhraní a stále je přizpůsobili individuálně na svou stranu: navigaci, 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.

Webová stránka, která sama o sobě umožňuje mnoho interakcí, a tak se zdá být téměř trochu chaotická, získává příjemnou použitelnost pomocí již známých konstrukčních řešení.

"Sticky" navigace, jak je popsáno ve výše uvedeném příkladu, jsou nádherný vynález v web design. Nejen, že s nimi můžete zobrazit působivé animace- také zrychlují návštěvníky webových stránek vašich webových stránek z "A do B". S jedním pagers, oni také pracují jako společné vlákno: uživatel ví, kde je a co už viděl.

Totéž platí o strouhance: pro malé stránky, které nemají moc smysl. Na složitějších stránkách však mohou dělat zázraky. Pomáhají nejen uživateli orientovat se doma, ale také skočit zpět na libovolné místo v navigaci.

Další způsob, jak použít tyto vzory je v následujícím příkladu:

Tvůrci této stránky přijali znalosti mobilního burger menu: na jedné straně, s cílem usnadnit minimalistickou navigaci svých stránek, což není cizí uživateli. Na druhou stranu, aby váš produkt dostatek místa, aby se v popředí.

screenshot-demodern.com
Příklad projektu Demodern (Demodern)

Něco vymetlo z tohoto trendu - ale alespoň stejně užitečné - jsou takzvaní jezdci v navigaci. Připomínají archivační systém a uživatelé jim rychle a intuitivně rozumějí. I zde se polokvalifikovaní dílo daří stejně dobře v zeštíhlené verzi jako v původní verzi.

Do té doby, jezdci jsou stále více používány jako modální karty pro zobrazení obsahu, který má být propojeny. Jako modální karty mají také tu výhodu, že stránky nemusí být zcela znovu načteny, aby zobrazovaly 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 Atlantická terasa

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

UI Design Patterns: Osvědčená řešení běžných problémů s použitelností
Příklad stránky Bambusové 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 neztrácet ze zřetele fyzikální vlastnosti a / nebo je změnit úmyslně. To znamená, že uživatel již nemůže intuitivně pochopit tyto akce a jejich důsledky. Pro ilustraci jsem výše uvedený příklad upravil jednou:

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

Fyzické vlastnosti struktury složek již nejsou k dispozici. Karty nyní vypadají jako chybně umístěné navigační prvky. Sounáležitost prvků je poněkud ztracena - zdá se, že jsou téměř náhodně uspořádány.

Přetečení nabídky a tlačítka "Přejít na oddíl"

Chcete-li dokončit náš seznam, nesmí chybět přetečení nabídek a tlačítek "Přejít na oddíl". 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 na začátek stránky jedním kliknutím. Zejména s jedním pagery, Přejít na tlačítka sekce smysl: Šetří čas a zabránit frustraci přes zdlouhavé rolování.

Rozbalovací nabídky mají ve skutečnosti méně svého původu při zlepšování použitelnosti stránek. Jsou navrženy tak, aby šetřila místo a přizpůsobovala více obsahu v navigaci. Kromě toho, váš design vypadá více uklizené a jasnější. Rozbalovací nabídky patří mezi návrhové vzory, které jsou často označovány jako anti-vzory - protože ve skutečnosti neusnadňují navigaci na webové stránce. Rozbalovací nabídky, ale stále se doporučuje. Koneckonců, jejich fungování je známo a učeno. Indikátory pro rozbalovací menu jsou často dolů ukazující rybí kosti vzory.

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

Tlačítka a odkazy jsem záměrně pouze stručně řešit v tomto článku, protože by měly být dobře známy každému návrháři. Neexistuje téměř žádné omezení pro design a animaci tlačítek. Jejich styl obvykle závisí na vizuálním uspořádání nabízených informací. Měly by být jasně viditelné Primární barva stránky tak, aby byly seskupeny s příslušným obsahem.

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

Stránkování – sdílení obsahu na více stránkách – je obzvláště důležité pro obchody elektronického obchodu, které nabízejí větší počet produktů. Používá se k nabízení obsahu na více stránkách, snížení doby načítání a rozdělení jeho obsahu do snadno stravitelných sekcí. 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ý přišel do trendu v posledních letech, tak-zvané "tuk zápatí" je nyní jedním z naučených vzorů uživatelského rozhraní. Zde můžete například vytvořit odkaz na často navštěvované podstránky, uložit kontaktní údaje a zobrazit právní obsah, který v primární navigaci neztratil nic hierarchicky. 

Zápatí pak částečně funguje jako jiný strukturovaný obsah stránky. Ale to může také stát jako druh ukázky pro více informací. Jakmile uživatel prolistoval vaši stránku, zápatí mu stále může nabídnout relevantní obsah - například zajímavé články, odkazy na sociální média & co. - které je udržují zaneprázdněné vaším produktem.

2. Vstup a výstup: Kontaktní a odběru formuláře

Kromě pokynů pro ochranu údajů stojí také za to zaměřit se 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, stejně jako možné nestabilní připojení, mohou rychle představovat test nervového slzy. Naštěstí existují některé návrhové vzory, které již tyto problémy řešily.

Tip:

Stejně jako obecně na webu platí následující: co nejkratší, pokud je to nutné. Studie ukázaly, že přidání zbytečných otázek je kolaps v účasti a může potenciálně stát hodně peněz.

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

Formulář
Zásady pro vstupní formuláře
  1. Testy sledování očí zjistili, že zpracováváme informace rychleji, když je uspořádán shora dolů, namísto zleva doprava. Proto je vhodné umístit nadpis nad pole formuláře a vytvořit pouze jeden sloupec.
  2. Je užitečné poskytnout uživateli příklad vstupu v předem stanovených zástupných symbolů - takže požadované informace jsou vizualizovány předem. Měli byste se vyhnout rozčtvrcené čí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. Asterisk a vstupní pole s červeným ohraničením se zde osvědčily jako vzory uživatelského rozhraní. V ideálním případě by pole měla být srozumitelná. Nicméně, měli byste vždy očekávat, že něco nebude fungovat. Proto je nezbytné nabídnout různé možnosti pomoci. Existuje několik způsobů, jak to udělat: informační tlačítko, které nabízí možnou pomoc při vznášejícím se. Nebo vyskakování malých modals, pokud formulář není úspěšně podání.
  4. Je to dobré místo, kde můžete poskytnout zpětnou vazbu, jakmile zadáte. V případě hesel bylo také prokázáno, že uživateli poskytuje kvalitativní posouzení toho, jak bezpečné heslo si zvolil. 
  5. Vícestupňová forma má několik psychologických výhod. Zpočátku je jasnější a méně skličující. Pokud je uživatel zobrazen také pomocí indikátoru (zde nakládací lišta), kde je ve formě, přesně ví, co přijde. Je méně pravděpodobné, že předčasně skončí. Osobní údaje by měly být vždy požádány na konci formuláře. Koneckonců, pokud návštěvník vašich webových stránek již do značné míry vyplnil formulář, bude pro něj obtížnější vzdát se času, který již investoval 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 zaregistrovali, je vhodné pro ně určit přínos - "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 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Č). Vymýcení, zejména v případě WordPress mnoho formulářů, které již byly zahrnuty ve výchozím nastavení. 

Pokud je to možné, měli byste se vyhnout, nebo alespoň udržet použití Captchas na minimum. Hlasité této studie captchas může způsobit 30 procent méně interakce s formulářem.

3. Strukturování obsahu

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

Otázka snadné přístupnosti se obrací zejména na uživatele, kteří si vaše stránky prohlíží za změněných podmínek. Například u lidí s barevným viděním a zrakovým postižením. Pokud byste se chtěli hlouběji ponořit do tématu přístupnosti a přístupnosti, více informací naleznete zde: 

Pokud máte blog nebo on-line časopis, možná víte, problém: Máte spoustu zajímavých obsah, který byste chtěli nabídnout co nej rovnoměrněji. Vhodným návrhovým vzorem je takzvaný "Seznam článků". Zde kategorizujete svůj obsah a zobrazujete pouze malý úryvek najednou. To vám umožní zobrazit mnoho témat na první pohled bez zaplavení uživatelů s informacemi. Pěkný příklad ukazuje zde RAIDBOXES:

RAIDBOXES WP unboxed
Pohled na WordPress Časopis wp unboxed

Tato divize umožňuje uživateli přeletět celý obsah podle oblastí zájmu a tím rychleji najít to, co ho zajímá.

Chcete-li vám umožnit nabízet určitý obsah bez rozptylování, můžete použít modální boxy. Ty leží nad zbytkem stránky a umožňují uživateli soustředit se pouze na jeho 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živatele z jakékoli manévrovací místnosti, pokud je modální otevřený.

Nicméně, modální boxy mohou pomoci návštěvníkům lépe pochopit váš obsah. Nicméně, modální boxy, které jsou příliš časté nebo zdánlivě nespravedlivě spuštěny, mohou rychle způsobit frustraci a pocit bezmoci.

Do této kategorie patří také režim Lightbox a fullscreen. Na jedné straně umožňují uživateli, aby se na vybraný obsah zblízka podíval. Na druhou stranu znemožňují jakoukoliv jinou interakci. Proto je vždy důležité nabídnout alespoň jeden úběžný bod. Zvláště dobře známé zde jsou kliknutím na X v pravé horní části obrázku nebo kliknutím mimo pole jej 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ými prezentacemi. Galerie jsou často uvedeny jako miniatury obrázků a pak zvětšeny pomocí prezentací a/nebo světelných boxů.

Zde byste měli jednat především podle funkce: Jaký druh obrázků zastupujete? 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 dalším možnostem - jako je lupa, která zvětšuje vaše obrázky při vznášející se? Ten je obzvláště populární v e-commerce.

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

unsplash.com používá kombinaci obrazárny a lightboxů. Obrázky se však nezobrazí jako miniatury. Proč? Unsplash je platforma, která nabízí pouze obrázky ke stažení. To znamená, že uživatelé musí mít možnost vybrat si obrázek přímo na první pohled nebo proti němu. Aby bylo možné učinit toto rozhodnutí, rozlišení obrazu musí být relativně dobré. Miniatury by na to byly příliš malé. A kliknutí na každý obrázek jednotlivě nebo navigace prostřednictvím prezentace by minimalizovalo účinnost stránky mnohokrát.

V průběhu procesu implementace a návrhu nesmíte nikdy ztratit ze zřetele otázku hodnoty/hodnoty a významu.

4. Hrát 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 tohoto zde Číst.

Závěr

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

Za druhé, vždy pamatujte, že nejste uživatel. Návštěvníci vašich webových stránek myslí 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 ve skutečnosti použitelnost na vašem webu.

Jaké máte otázky pro Sonja o vzorech uživatelského rozhraní?

Použijte funkci komentáře. Chcete být informováni o nových příspěvcích a tipy o web design a vývoj? Pak nás následujte na TwitterFacebook nebo přes náš Bulletin.

Po studiu game designu a creative writingu v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamification a výzkum motivace uživatelů a jejích zkušeností, spolu s vášní a zvědavostí pro 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 * .