Doporučení pro optimalizaci uživatelského vnímání a estetiky
Platí pro toto doporučení kontrolního seznamu optimalizace prostředí pro Power Platform Well-Architected:
| XO:07 | Na vizuální prvky, jako jsou barevná schémata, typografie a rozložení, aplikujte klasické principy návrhu. Usilujte o cílenou, vyváženou a intuitivní vizuální hierarchii, která přitáhne pozornost uživatelů k důležitým prvkům a akcím. |
|---|
Tato příručka popisuje doporučení ohledně univerzálních vzorů vizuálního návrhu, které ovlivňují vnímání uživatele, což může významně ovlivnit spokojenost a přijetí aplikace. Vizuální prvky slouží jako základní stavební bloky používané k vytváření prostředí. Použití vizuálních principů, které jsou v souladu s přirozeným lidským vnímáním a zpracováváním informací, poskytuje strukturované metody, které pomáhají vybrat a uspořádat vizuální prvky, aby tvořily efektivní a přitažlivou aplikaci.
Klíčové strategie návrhu
Rozsáhlý výzkum lidského vnímání vizuálního designu odhaluje, že uživatelé nevnímají vizuální prvky izolovaně. Místo toho je vnímají ve vztahu k jiným prvkům a kontextu, ve kterém se objevují. Tyto vztahy ovlivňují uživatelské vnímání, přitahují pozornost ke konkrétním oblastem, vzbuzují emoce, napomáhají porozumění, zlepšují estetiku a posilují identitu značky. Pečlivý výběr a uspořádání vizuálních prvků může vytvořit poutavé, zapamatovatelné a efektivní uživatelská prostředí, která rezonují s cílovou skupinou.
Efekt estetiky vs. použitelnosti
Efekt estetiky vs. použitelnosti popisuje tendenci považovat atraktivní produkty za použitelnější. Uživatelé si vytvoří počáteční názor na aplikaci během přibližně 50 milisekund. Tento první dojem je ovlivněn různými faktory, včetně struktury, barev, mezer, symetrie, množství textu a fontů. Pozitivní první dojem může zvýšit celkovou spokojenost uživatelů. Výzkum ukazuje, že uživatelé jsou shovívavější k menším problémům s použitelností, když považují rozhraní za vizuálně přitažlivé. Kromě toho může kvalita návrhu sloužit jako indikátor důvěryhodnosti.
Vyváženost a zatížení
Vizuální vyváženost navozuje pocit rovnováhy a harmonie ve vizuálním vnímání. Pomáhá uživatelům zpracovávat a organizovat vizuální informace efektivněji snížením kognitivní zátěže. Vyvážené kompozice jsou obecně vnímány jako příjemnější a snáze srozumitelné, umožňují uživatelům efektivně soustředit pozornost a snadněji se orientovat ve vizuálních podnětech. Tento kognitivní aspekt vizuální vyváženosti podtrhuje její důležitost díky usnadnění jasné komunikace a zlepšení celkového uživatelského prostředí.
Kompozice je vyvážená, když jsou všechny prvky v optické rovnováze. Matematické umístění často vyžaduje úpravu. Některé z prvků, které ovlivňují vizuální zatížení, jsou velikost, barva, hustota a prázdný prostor.
Velikost: Větší prvky mají tendenci většího vizuálního zatížení než menší. Pro dosažení rovnováhy lze větší prvky vyvážit jejich seskupením s menšími prvky nebo úpravou jejich umístění v rozložení.
Barva: Světlé nebo intenzivní barvy mohou přitahovat více pozornosti a působí těžším dojmem než tlumené nebo neutrální barvy. Vyvážení barev zahrnuje jejich rovnoměrné rozložení v rozhraní nebo použití doplňkových barev k vytvoření vizuální harmonie.
Hustota: Hustota prvků znamená, jak těsně jsou v daném prostoru rozvrženy. Vyvážení hustoty zahrnuje rovnoměrné rozložení prvků v rozhraní, aby nevznikaly přeplněná nebo řídká místa.
Bílý prostor: Bílý prostor, označovaný také jako negativní prostor, označuje prázdné oblasti mezi prvky. Prostor pomáhá vytvářet vizuální místo k nadechnutí a může vyvážit kompozici zvýrazněním a zdůrazněním určitých prvků.
Vyvážená kompozice je součtem vizuálních sil mezi jednotlivými prvky.
Vyvážení rozložení je jedním z nejtěžších úkolů, jelikož jej nelze snadno měřit.
Color
Odstíny a tóny mohou sdělit význam, vyvolat emoce a působit esteticky přitažlivě. Barva hraje klíčovou roli pro zaměření pozornosti uživatele, vytvoření hierarchie, předávání informací a zlepšení použitelnosti. Existuje několik důvodů, proč promyšlený barevný design v uživatelském rozhraní může ovlivnit uživatele tak, jak chcete:
Pozornost a vnímání. Některé barvy jsou poutavější než jiné, což umožňuje návrhářům zaměřit pozornost diváků na konkrétní prvky. Barevný kontrast může zlepšit čitelnost a rozlišit různé komponenty, což usnadňuje rychlé zpracování informací.
Emocionální odezva. Barvy mají psychologické asociace, které vyvolávají emoce a nálady. Teplé barvy jako červená a oranžová mohou navodit pocit energie a vzrušení, zatímco studené barvy jako modrá a zelená mohou navodit klid a pohodu. Můžete vyvolat požadované reakce a ovlivnit uživatele směrem k zamýšlenému zážitku.
Identita značky. Konzistentní používání barev napříč materiály souvisejícími se značkou pomáhá vytvořit silnou vizuální identitu a napomáhá rozpoznání značky. Uživatelé často spojují konkrétní barvy s konkrétními značkami a spojují své zkušenosti s loajalitou a důvěrou ke značce.
Vizuální hierarchie. Barvu lze použít k vytvoření vizuální hierarchie a uspořádání informací. Přiřaďte různé barvy prvkům na základě jejich důležitosti nebo kategorie, abyste vytvořili jasnou hierarchii a usnadnili navigaci a porozumění.
Blízkost
Položky, které jsou umístěny blíže k sobě, působí, že mají bližší vztah. Při uspořádávání prvků zajistěte, aby byl patrný rozdíl v rozestupech mezi prvky, které spolu úzce souvisejí, a těmi, které spolu nesouvisí.
Tento Gestaltův princip postuluje, že prostorová vzdálenost mezi vizuálními prvky ovlivňuje, jak jsou mentálně vnímány a organizovány, a podtrhuje její důležitost při usnadnění efektivního zpracování a porozumění vizuálním podnětům.
Seskupte související prvky, které jsou funkčně podobné nebo patří do stejné hierarchické kategorie. Například tlačítka, která provádějí podobné akce nebo možnosti v rozevírací nabídce, by měla být seskupena těsně vedle sebe, aby byla zřejmá jejich přidruženost. Položky nabídky v navigačním panelu, které jsou blízko sebe, naznačují související sadu možností, zatímco větší mezera mezi kategoriemi nabídky je vizuálně odlišuje. Položky formuláře, které spolu souvisejí, by měly být seskupeny, například pole adresy v sekci „adresa“.
Zlepšete čitelnost v rozhraních s velkým množstvím textu úpravou mezer mezi odstavci, větami a slovy. Užší mezery mezi odstavci značí logické spojení nebo pokračování myšlenky, zatímco větší mezery značí přechod nebo přerušení obsahu. Tato technika podporuje efektivní porozumění textovým informacím.
Zajistěte, že je patrný rozdíl v rozestupech mezi souvisejícími a nesouvisejícími prvky, abyste předešli nejasnostem. Rozestupová rampa může pomoci konzistentně určit potřebnou vhodnou vzdálenost na základě velikosti prvku.
Kruh nalevo více souvisí s trojúhelníkem než s dalším kruhem.
Rozestup mezi odstavci je menší než mezera mezi sekcemi.
Kontinuita
Prvky, které jsou uspořádány na čáře nebo křivce, jsou vnímány jako více související než prvky, které nejsou na čáře nebo křivce.
Uspořádejte prvky rozhraní, jako jsou navigační nabídky nebo kroky v procesu, podél čáry nebo křivky, aby vyjadřovali sekvenci nebo postup. Toto rozložení pomáhá uživatelům vnímat vztah mezi prvky a pochopit logický tok informací nebo akcí.
Umístěte související prvky, jako jsou možnosti zaškrtávacího políčka nebo přepínače, nebo položky do seznamu s odrážkami podél čáry, abyste je vizuálně seskupili. Toto uspořádání uživatelům sděluje, že tyto prvky mají společný účel nebo patří do stejné kategorie, což usnadňuje navigaci a porozumění. Pokud jsou podobně vypadající položky dále odsazeny dovnitř, pozice položky koreluje s nižším umístěním ve vizuální hierarchii.
Pomocí čar nebo křivek veďte pozornost uživatelů a vytvářejte vizuální cesty rozhraním. Například šipka může nasměrovat oko uživatele z jedné části obsahu do druhé podél určité cesty, což naznačuje propojení nebo postup. Tato technika pomáhá uživatelům intuitivněji procházet rozhraním a nabádá je k průzkumu.
Uspořádejte klíčové prvky rozhraní, jako jsou tlačítka s výzvou k akci nebo důležité informace, podél výrazných čar, abyste upoutali pozornost uživatelů a vytvořili ústřední body. Například vzor Fluent MessageBar je často zobrazen jako výrazná vyvážená zpráva v oblasti obsahu se zprávou umístěnou vlevo, která vede doprava k tlačítkům s výzvou k akci. Taková strategie rozložení zvýrazňuje tyto prvky a zdůrazňuje jejich význam, čímž zvyšuje pravděpodobnost interakce.
Křivky/čáry jsou pro vnímání výraznější než barvy.
Průvodci využívají kontinuitu, aby uživatelům ukázaly, jak jsou kroky propojeny, aniž by je zahltily příliš mnoha informacemi.
Uzavření
Lidský mozek má tendenci vidět úplné formy a rozpoznává jediný známý vzorec namísto jednotlivých objektů, i když chybí některé informace.
Zajistěte vizuální konzistenci prvků návrhu, jako jsou tvary, barvy a velikosti, abyste uživatelům pomohli naučit se vzory, které budou očekávat, i když jsou prezentovány v různých kontextech.
Používejte jednoduché a známé ikony nebo symboly, které uživatelům umožňují doplnit chybějící informace na základě jejich předchozích zkušeností. Například ikona lupy je běžně spojena s funkcí vyhledávání, a to i bez doprovodného textu.
Prezentujte informace uživatelům postupně, postupné odhalování. Umožněte uživatelům doplnit chybějící informace při interakci s rozhraním, abyste je nezahltili příliš velkým množstvím informací a nabádali je k průzkumu.
Vytvářejte soudržné vizuální vzory, které uživatele nabádají, aby vnímali objekty jako celé entity. Například seskupení souvisejících prvků může uživatelům pomoci pochopit jejich vztah a účel. Prvky vizuálně uspořádejte konzistentně podle Gestaltových principů, aby vytvářely segmentaci. Efektivně využívejte prostor k vytvoření pocitu uzavření kolem prvků rozhraní.
Používejte animace a přechody k vedení pozornosti uživatelů a vyjádření změn ve stavech rozhraní. Plynulé přechody mezi různými stavy nebo obrazovkami mohou uživatelům pomoci pochopit vztah mezi prvky a doplnit chybějící informace. Moderní ovládací prvky dostupné v Power Apps již z podstaty zobrazují animace.
Čtverec je rozpoznán dříve než čtyři neúplné kruhy.
Animace přechodu z karty do modálního okna pomáhá uzavřít mezeru mezi těmito dvěma objekty a vzájemně je propojuje.
Ústřední bod
Ústřední bod je designový prvek, který okamžitě upoutá pozornost diváka. V ideálním případě by návrh měl mít sekvenci ústředních bodů, typicky mezi jedním až třemi, uspořádaných tak, aby uživatele záměrným způsobem provázely obsahem.
Navrhněte rozhraní s jasnou hierarchií informací, kde jsou nejdůležitější obsah nebo akce zdůrazněny jako ústřední body. Použijte vizuální vodítka, jako je velikost, barva, kontrast a umístění, aby tyto prvky vynikly. Prezentujte informace postupně, počínaje nejdůležitějšími ústředními body. Tato technika pomáhá uživatelům rychle identifikovat nejrelevantnější obsah nebo akce a vede je rozhraním v logickém pořadí.
Primární tlačítka s výzvou k akci umístěte na prominentní místo v rozhraní, abyste z nich učinili nejvýraznější ústřední body. Tato tlačítka by měla být vizuálně odlišná od ostatních prvků a měla by být strategicky umístěna tak, aby uživatele navedla k požadovaným akcím, jako je nákup nebo registrace. Jazyk designu Fluent doporučuje pro tyto prvky použít barvu motivu značky.
Efektivně využijte kontrast k vytvoření ústředních bodů. Prvky, které vynikají kvůli rozdílům v barvě, jasu, velikosti nebo typografii, přirozeně přitahují pozornost uživatele. Kontrast jasnějších povrchů s tmavším textem nebo značkovými prvky vytváří výraznější ústřední body.
Pomocí bílého prostoru zvýrazněte ústřední body vytvořením vizuálního oddělení od okolních prvků. Tato technika pomáhá předcházet rozptylování a umožňuje uživatelům soustředit se na nejdůležitější obsah nebo akce. Prvky UI s větším prostorem okolo přitahují více pozornosti a mají tendenci být vnímány jako důležitější než prvky s menším prostorem.
Ústřední body používejte konzistentně v celém rozhraní, aby bylo zajištěno soudružné uživatelské prostředí. Nastavením vzoru ústředních bodů nasměrujete očekávání uživatelů na hierarchii, které musí porozumět, aby se mohli pohybovat v rozhraní, a pomůžete jim najít důležité informace nebo akce na různých obrazovkách nebo stránkách.
Pamatujte si, že je důležité zachovat vyvážení a nezahlcovat uživatele příliš mnoha protichůdnými ústředními body.
Oko uživatele nejprve přitáhne modrý čtverec.
Z prvků typu volání akce lze učinit ústřední body, aby si jich uživatelé všimli.
Podobnost
Objekty, které vypadají podobně, jsou často vnímány jako skupina nebo vzor, což uživatele vede k očekávání, že budou mít stejnou funkčnost.
Zajistěte, aby prvky rozhraní s podobnými funkcemi měly konzistentní vizuální styl. Například tlačítka, která provádějí podobné nebo stejně vážené akce, by měla mít stejnou barvu, tvar a velikost, což uživatelům signalizuje jejich sdílenou funkčnost. Naopak zajistěte, aby prvky, které se výrazně liší ve funkčnosti, byly jasně rozlišitelné. Obě techniky zabraňují zmatku a frustraci, jelikož vytvářejí jasná vizuální vodítka.
Používejte konzistentní ikonografii a symboly k reprezentaci podobných akcí nebo funkcí v celém rozhraní. Uživatelé mají tendenci spojovat známé ikony s konkrétními funkcemi na základě svých minulých zkušeností. Ke splnění těchto očekávání používejte všeobecně uznávané metafory ikon. Zajistěte konzistenci stylů použitím ikon ze stejné sady, jako je knihovna ikonografie Fluent UI.
Použijte barevné kódování k označení podobností mezi prvky nebo kategoriemi. Například použití stejné barvy ke zvýraznění souvisejících položek v seznamu nebo seskupení podobných datových bodů v grafu zlepšuje vizuální koherenci a pomáhá uživatelům rozlišovat vzory.
Zachovejte jednotnost typografie a stylů textu u prvků, které slouží k analogickým účelům. Konzistentní styl, velikost a formátování písem přispívají k soudržnému vizuálnímu jazyku, který uživatelům usnadňuje rozpoznání souvisejícího obsahu nebo akcí.
Poskytujte konzistentní interaktivní zpětnou vazbu u podobných akcí napříč rozhraním. Ať už se jedná o umístění myši na tlačítko, nebo kliknutí na odkaz, uživatelé by měli očekávat jednotné reakce, které posilují spojení mezi vizuální podobností a funkční ekvivalencí. I když platforma ze své podstaty poskytuje většinu chování při interaktivitě, jako jsou barevné hodnoty stavu umístění kurzoru a stisknutí tlačítka, při vytváření prvků komponent od začátku nebo ruční implementaci stavů zpětné vazby mějte na paměti tento princip návrhu.
Zajistěte, aby byla vizuální podobnost doplněna dalšími podněty, jako jsou textové popisky nebo zvuková zpětná vazba, aby bylo vyhověno uživatelům s různými potřebami a preferencemi. Efektivní komunikace ohledně funkčnosti prostřednictvím více smyslových modalit zvyšuje použitelnost a inkluzivitu.
Prvky jsou seskupeny podle tvaru a barvy, nikoli podle uspořádání (sloupce a řádky).
Pokud se jedna karta na řídicím panelu otevře jako postranní panel, uživatelé to budou očekávat od všech karet.
Figura a pozadí
Lidé instinktivně vnímají prvky buď jako „figuru“ (to, co vyčnívá vepředu), nebo „pozadí“ (co ustupuje do pozadí). Kontext tedy ovlivňuje vnímání a je důležité zajistit dostatečné odlišení důležitých prvků od pozadí. Prázdné místo (negativní prostor) zvyšuje porozumění obsahu.
Použitím kontrastu v barvě, velikosti nebo vizuálním stylu vytvoříte jasný vztah mezi figurou a pozadím. Důležité prvky by měly výrazně vyčnívat na pozadí, aby byly snadno rozlišitelné a účinně vedly pozornost uživatelů. Povrchy se světlejšími barvami a kontrastnějšími vizuálními prvky na pozadí jsou výraznější. Tento přístup snižuje vizuální nepořádek a pomáhá uživatelům identifikovat klíčové informace. Poskytněte dostatečný kontrast mezi prvky v popředí a pozadí, abyste zlepšili čitelnost pro uživatele se zrakovým postižením a zlepšili jejich schopnost přístupu a porozumění obsahu.
Zachování konzistence v umístění a stylu prvků rozhraní posiluje vztah mezi figurou a pozadím a pomáhá uživatelům chápat strukturu rozhraní. Důsledné používání návrhových vzorů a vizuálních podnětů zajišťuje, že uživatelé mohou rychle rozlišovat mezi prvky v popředí a pozadí na různých obrazovkách a v různých kontextech. Nekonzistence v designu mohou narušit mentální modely uživatelů a bránit jejich schopnosti efektivně procházet rozhraním.
Malý kontrast a minimální negativní prostor přispívají ke vnímání bílých obdélníků jako součásti pozadí.
Postranní obrázek musí ustoupit do pozadí, takže uživatelé se soustředí na důležitý obsah.
Seskupení
Prvky bývají vnímány jako skupiny, pokud sdílejí plochu s jasně definovanou hranicí.
Seskupování souvisejících prvků do vizuálních kontejnerů, jako jsou okna, karty nebo okraje, pomáhá, aby je uživatelé vnímali jako soudržné jednotky. Tento přístup vizuálně organizuje obsah a funkce, což usnadňuje identifikaci a zpracování informací. Jasná seskupení pomáhají zabránit nepřehlednému rozhraní a snižují zmatek nebo neefektivitu. Seskupování je také efektivní, když blízkost prvků není možná; například pruh zpráv se rozprostírá přes několik ovládacích prvků na obrazovce a je vnímán jako související jednotka kvůli svému ohraničení a barvě pozadí.
Zachování konzistentního vizuálního stylu seskupených prvků posiluje jejich propojení a zlepšuje použitelnost. Použití podobných barev, písem nebo ikon pro tyto prvky zdůrazňuje, že patří do stejné kategorie nebo funkce. Nekonzistence ve vizuální prezentaci mohou oslabit vnímané seskupení a způsobit, že uživatelé přehlédnou vztahy mezi prvky nebo si špatně vyloží jejich význam nebo účel.
Přidání hranic okolo prvku nebo skupiny prvků je odděluje od okolních prvků.
Rozdělení obsahu do sekcí pomáhá uživatelům pochopit, že se mění téma.
Signály vs. šum
Vizuální podněty, jako jsou čáry, kontrast a mezery, dávají uživatelům najevo, že je něco důležité. Příliš mnoho signálů nebo signály zvýrazňujících informace, které nejsou důležité, se však rychle stanou šumem.
Použitím principů ústředních bodů, jako je tučný text, kontrastní barvy nebo ikony, můžete uživatelům signalizovat důležité informace nebo akce. Můžete například použít jasnou barvu pro důležitá tlačítka nebo nadpisy, aby vynikly.
Dbejte na to, co zvýrazňujete, abyste uživatele nezahltili příliš velkým množstvím informací. Signalizujte pouze prvky, které jsou skutečně důležité pro úkol nebo cíl uživatele. Příliš mnoho signálů může způsobit zmatek a znesnadnit uživatelům stanovení priorit. Identifikujte informace, které jsou pro uživatele nejdůležitější, a vhodně je zdůrazněte. Obvykle se doporučuje mít na stránce pouze jedno tlačítko s výzvou k akci. Ve formulářích zvýrazněte požadovaná pole, abyste získali pozornost uživatele. To zabraňuje uživatelům ztrácet se ve zbytečných detailech a pomáhá jim soustředit se na to podstatné.
Zajistěte, aby signály sledovaly konzistentní vizuální jazyk v celém rozhraní, aby sloužily jako vodítko, které uživatelům pomáhá rozpoznávat vzory a intuitivně chápat význam různých signálů.
Přizpůsobte signály konkrétnímu kontextu a potřebám uživatele. Pokud si například uživatelé prohlíží rozhraní, které prezentuje určité úkoly, jasně signalizujte položky v kritickém stavu a akční položky, aby upoutaly jejich pozornost. Kontextové signály pomáhají uživatelům rychle najít relevantní informace, aniž by je rozptylovaly nesouvisející detaily.
Signály pomáhají navádět uživatele obsahem a informovat o důležitých věcech.
Vizuální šum způsobuje zmatení a má opačný efekt než signály.
Usnadnění díky Power Platform
V aplikacích plátna používejte kontejnery rozložení k seskupení souvisejících prvků. V ideálním případě byste měli uspořádat všechny prvky stránky do kontejnerů a kontejnery rozložení mohou také efektivně oddělit podřízené kontejnery změnou vlastnosti rozteče.
Ve formulářích modelem řízených aplikací lze použít sekce k seskupení souvisejících polí nebo prvků.
Implementujte konzistenci v běžných vizuálních prvcích pomocí opakovaně použitelných vlastních komponent.
V aplikacích plátna má funkce moderních ovládacích prvků integrovanou signalizaci v rámci jejich designu. Konkrétně ovládací prvky tlačítka a odznaku nabízejí možnosti ve vlastnostech stylu, což z nich činí účinné signály. Dodržujte osvědčené postupy pro každou komponentu a signalizaci používejte selektivně, abyste zajistili optimální komunikaci.
Související informace
- Principy seskupování
- Gestalt psychologie
- Efekt estetiky vs. použitelnosti
- Rozestupová rampa návrhového systému Fluent UI