Sdílet prostřednictvím

Doporučení pro dodržování norem návrhu

  • Článek

Platí pro toto doporučení kontrolního seznamu optimalizace prostředí pro Power Platform Well-Architected:

XO:02 Dodržujte zavedené standardy, konvence a zásady. Používejte běžné návrhové vzory. Udržujte konzistenci prvků návrhu, terminologie a interakcí napříč rozhraním. Použijte konzistentní vzory a standardy, abyste uživatele provedli rozhraním a vytvořili soudržné uživatelské prostředí.

Tato příručka popisuje doporučení pro stanovení návrhových standardů, konvencí a osvědčených postupů pro vývoj uživatelských rozhraní, která vylepšují uživatelské prostředí a celkový úspěch aplikace. Odchylky od standardů by měly být pečlivě zváženy, aby nedošlo k negativnímu ovlivnění uživatelského prostředí a použitelnosti aplikace.

Klíčové strategie návrhu

Dodržování návrhových standardů pomáhá snížit úsilí při rozhodování v procesu návrhu tím, že identifikuje důležité aspekty návrhu. Pochopení standardů umožňuje týmům dosáhnout dobře navržených uživatelských rozhraní a zjednodušit jejich schopnost. Tento přístup má za následek rychlejší vývojové cykly, lepší použitelnost a vyšší spokojenost uživatelů, což v konečném důsledku vede ke zvýšení produktivity a efektivity interních softwarových systémů.

Pochopení zásad návrhu

Rozsáhlý výzkum lidské kognice informuje o našem chápání vizuálního návrhu a interakce s digitálními produkty. Tyto znalosti jsou základem mnoha osvědčených postupů a standardů, které tvoří přibližně 80 % konečného produktu. Principy designu mohou překlenout zbývajících 20 % kreativní mezery, kterou normy nepokrývají. Znalost těchto znalostí umožňuje vývojovému týmu lépe porozumět návrhovým úvahám během plánování, snižuje závislost na návrhových zdrojích nebo zlepšuje spolupráci s nimi.

Postupujte podle běžných vzorců a metafor

Univerzální vzory a metafory jsou v digitálních produktech široce uznávány a očekávány. Začlenění těchto vzorů tam, kde je to vhodné, může zjednodušit zapojení uživatelů a dlouhodobé používání, snížit náklady na školení a podporu a potenciálně snížit potřebu aktualizací nebo přepracování. Tyto postupy zahrnují různé aspekty návrhu, včetně kompozice rozvržení, navigační struktury, hierarchie informací a návrhu interakce.

Rozhodující je dodržování standardních metafor ikon a sémantických barev. Ikony by měly využívat zavedené vizuální asociace k rychlému a efektivnímu předávání funkcí uživatelům. Podobně sémantické barvy, jako je červená pro chybu nebo zelená pro úspěch, poskytují okamžitou vizuální zpětnou vazbu, která je v souladu s očekáváním uživatelů a mentálními modely. Dodržování těchto konvencí pomáhá snižovat kognitivní zátěž a zvyšuje použitelnost tím, že podporuje pocit známosti a pohodlí.

Vytvořte designový systém

Návrhový systém je soubor opakovaně použitelných funkčních stavebních bloků používaných k vytvoření uživatelského rozhraní. Jsou navrženy speciálně pro organizaci tak, aby každý prvek odpovídal zavedeným standardům značky. Čtyři klíčové součásti systému návrhu jsou tokeny návrhu, součásti, knihovny vzorů a pokyny.

Tokeny návrhu jsou základní vizuální prvky uživatelského rozhraní, včetně aspektů, jako je barva, typografie a mezery. Jsou vyjádřeny jako proměnné ve standardním formátu, což usnadňuje vytváření a údržbu aplikace pomocí návrhového systému. Bez ohledu na konkrétní design, tokeny designu zefektivňují překlad designu do kódu. Například definováním tokenu s názvem „primary-color“ s určenou hodnotou mohou vývojáři bezproblémově integrovat návrh pomocí tokenu místo vložení konkrétní hodnoty přímo do kódu. Návrhové tokeny lze sladit s příručkou stylů organizace a centrálně spravovat, aby se vytvořily snadno použitelné tokeny.

Komponenta představuje samostatnou modulární jednotku uživatelského rozhraní. Slouží jako vizuální prvek pro sestavení rozhraní aplikací. Dobře navržené komponenty vykazují dvě klíčové vlastnosti: opětovnou použitelnost a modularitu. Měly by být navrženy tak, aby zajistily, že si udrží vizuální konzistenci napříč různými aplikacemi v ekosystému značky, čímž se sníží potřeba pokaždé znovu vytvářet design. Jedna komponenta by měla bez problémů sloužit v různých kontextech.

Power Apps poskytuje komplexní sadu základních univerzálních komponent, jako jsou tlačítka, rozevírací seznamy a několik kompozitních komponent, jako je moderní tabulka. Tyto ovládací prvky používejte co nejvíce pro základní potřeby a poté zvažte vytvoření kompozitních komponent tam, kde existují mezery pro opakovatelné vzory uživatelského rozhraní.

Kompozitní komponenty by měly být dostatečně univerzální, aby je bylo možné používat tak, jak jsou, nebo s malými odchylkami (prostřednictvím parametrů) v různých kontextech aplikace, bez nutnosti úprav. Některé příklady vlastních komponent zahrnují:

  • Záhlaví nebo zápatí se značkou společnosti
  • Komponenta stránky zdrojů o velikosti obrazovky, která uživatelům poskytuje zpětnou vazbu a získává pomoc od IT
  • Univerzální obsah, jako jsou upozornění na autorská práva nebo odkazy

Knihovna vzorů nabízí sadu předdefinovaných návrhových vzorů, které mohou tvůrci použít jako výchozí bod pro vytváření uživatelských rozhraní. Tyto vzory slouží jako standardizovaná řešení běžných návrhových problémů. Primárním cílem knihovny vzorů je nabízet centralizovanou sbírku dobře vytvořených vzorů, která umožňuje vytvářet konzistentní a efektivní uživatelská rozhraní. Knihovny vzorů umožňují vývojářům používat konkrétní vzor a řídit se zavedenými pokyny pro použití, což zajišťuje soudržnost a efektivitu napříč návrhy uživatelských rozhraní.

Zásady nabízejí pravidla a osvědčené postupy pro projektové týmy, jak efektivně používat komponenty a vizuální styly. Na rozdíl od zásad pro styl, které se zaměřují na estetiku, zásady pro návrhový systém definují funkční chování komponent a očekávání interakce uživatele. Pokud například návrhový systém poskytuje sadu tokenů návrhu pro odkazování na barvy, zásady by měly objasnit, kdy tyto barvy použít a jak mohou vývojáři získat přístup k odpovídající barvě v Power Apps. U komponent by měla existovat dokumentace o správném použití, vstupních a výstupních parametrech a změnách stavu, které lze od komponenty očekávat.

Úsilí centralizovaného návrhového systému může také hostit univerzální mediální prostředky, jako jsou firemní loga a další designové prostředky, v úložišti, aby bylo možné rozšířit rychlý vývoj.

Uživatelské rozhraní Fluent UI od společnosti Microsoft je příkladem široce rozšířeného návrhového systému s otevřeným zdrojovým kódem. Může být účinným referencí pro mnoho návrhových rozhodnutí učiněných v Power Apps, protože všechny moderní ovládací prvky využívají komponenty konstrukčního systému Fluent (2). Designové systémy, jako je Fluent UI, jsou výsledkem značného množství výzkumného a vývojového úsilí do vytváření komponent, aby bylo zajištěno, že splňují potřeby uživatelů. Jsou také navrženy tak, aby mohly být všudypřítomné a snadno použitelné napříč různými digitálními produkty a platformami. Každá komponenta má specifické zásady, které zajistí, že aplikace bude v souladu se zamýšleným prostředím. Využijte znalostí podložených výzkumem tím, že si projdete zásady pro Fluent 2.

Sdílení, aby se zabránilo duplicitním implementacím, nejen zvyšuje efektivitu výroby, ale také zajišťuje, že prostředí zůstane v průběhu času soudržné. Příspěvky ke sdíleným prvkům pomáhají udržovat prostředí svěží a odrážejí odborné znalosti z celé organizace. V současné době je koherence výzvou, protože součásti, systémy, procesy a kultura často nejsou sdíleny, nepodporují koherenci a ztěžují příspěvky.

Provádějte revize návrhu

Přístup ke zdrojům, které mají řídit návrh uživatelského prostředí, je zásadní pro zajištění toho, aby aplikace splňovala zavedené standardy UI/UX. Centralizované týmy by se měly zaměřit na seznámení se základními standardy a osvědčenými postupy návrhu. Zatímco designéři jsou obvykle obeznámeni s uživatelskými zkušenostmi, projektoví manažeři mohou také těžit z učení se těmto dovednostem, aby mohli efektivně přispívat do týmu.

Nejúčinnějším způsobem, jak ověřit prostředí, je fyzicky ho projít. Můžete však také programově číst metadata aplikace Power Apps. Metody, jak toho dosáhnout, mohou zahrnovat kontrolu, zda je v aplikaci použit správný motiv, nebo ověření, zda jsou hodnoty tokenu motivu odkazovány ve starších ovládacích prvcích. Pokud například určité prvky textu musí používat určité tokeny návrhu, název textové komponenty by mohl odpovídat konkrétní hodnotě a vlastnosti komponenty by pak měly odpovídat konkrétnímu mapování tokenu návrhu.

Vyhodnoťte počet prvků, které jsou konkrétním typem komponenty a splňují určitá kritéria, oproti těm, které je nesplňují. Zvažte například textové komponenty, které jsou buď nesprávně, nebo správně pojmenované, ale nedodržují zásady pro hodnoty vlastností. Pro vynucení responzivního rozvržení by se určité kontejnery rozvržení mohly mapovat na konkrétní konvence pojmenování a hodnoty vlastností (jako je LayoutWrap).

Plňte standardy přístupnosti k rozšíření uživatelské základny

Začlenění principů inkluzivního designu zajišťuje, že produkty uspokojí různorodé cílové skupiny, včetně lidí všech schopností. Inkluzivní návrh se snaží identifikovat potenciální překážky pro uživatele všech schopností při vytváření produktů, které řeší výzvy před konečnou implementací. Je nezbytné porozumět a diskutovat o funkčních aspektech, které by mohly vést k interakčním bariérám, aby je bylo možné efektivně překonat.

Function Purpose
Kognice Naše schopnost přijímat, interpretovat a zpracovávat informace je ovlivněna mnoha faktory. Mezi tyto faktory patří pozornost, uvědomění, zaměření, paměť, úsudek, porozumění, řešení problémů a uvažování. Kognice člověka může ovlivnit způsob, jakým se učí, ať už se učí používat nové zařízení, nebo se učí nové informace ve třídě. Mnoho aspektů kognice se navzájem ovlivňuje.
Mobilita Naše anatomie a svaly nám dávají pohyblivost a spoléhají na signály mozku, které ovládají svaly. Mobilita zahrnuje úchop, jemné motorické dovednosti, koordinaci, kontrolu (dobrovolný a nedobrovolný pohyb), rychlost, svalový tonus, vytrvalost, držení těla a dočasná zranění. Mobilita může být ovlivněna situačními, dočasnými, progresivními nebo trvalými podmínkami.
Zpracování obrazu Naše schopnost vidět a porozumět vizuálním informacím z našeho prostředí vede myšlení a pohyb. Zrak je ovlivněn jak fyzickými, tak neurologickými faktory. Omezení zraku zahrnují slepotu, slabé vidění (částečně nevidomí), sníženou ostrost, ztrátu zorného pole, barevnou slepotu, fotofobii (světlocitlivost), a dokonce i jasné sluneční světlo ovlivňující čitelnost textu na obrazovce.
Sluch Naše schopnost přijímat a porozumět zvukovým informacím z našeho prostředí také vede myšlení a pohyb. Stupně ztráty sluchu se liší v širokém spektru, což vede k překážkám každodenního používání technologií. Mezi dočasné nebo situační příklady patří hlučná prostředí nebo tiché zóny, kde přehrávání zvuku není možné.
Hlas, řeč a komunikace Naše schopnost komunikovat (verbálně nebo neverbálně) je nezbytná pro vyjádření našich přání a potřeb, vytváření vztahů, předávání informací ostatním a interakci s naším prostředím.
Smysly a vnímání Smysl je naše schopnost detekovat smysly, jako je dotyk nebo umístění našeho těla. Vnímání je způsob, jakým mozek tyto smysly zpracovává a komunikuje. Omezení smyslů zahrnují vestibulární poruchy, chronickou bolest, integritu kůže, citlivost (přecitlivělost a hyposenzibilizaci) a propriocepci.

Způsoby přístupu k obsahu

Uživatelé přistupují k digitálnímu obsahu různými způsoby. Kromě ovládání myší a ukazatelem mohou také používat klávesnici a asistenční technologie, jako jsou čtečky obrazovky a Braillova písma, lupy, titulky, rozpoznávání hlasu a nastavení vysokého kontrastu, které přizpůsobují prostředí tak, aby vyhovovalo potřebám uživatele.

Pomocné nástroje

Mezi běžné asistenční nástroje patří:

  • Klávesnice: Lidé se zrakovým postižením komunikují s webovými stránkami a aplikacemi pomocí softwaru pro čtení obrazovky, který čte obsah a ovládací prvky nahlas pomocí technologie převodu textu na řeč a používá klávesnici jako alternativní vstup k interakci typu ukázat a kliknout pomocí standardní myši. Kromě podpory základní sady příkazů klávesnice poskytují čtečky obrazovky také komplexní sadu příkazů klávesnice. Tyto příkazy poskytují uživatelům výkonnou doplňkovou sadu nástrojů pro efektivnější interakci s uživatelskými rozhraními.

  • Čtečka obrazovky: Čtečky obrazovky převádějí digitální text na syntetizovanou řeč a výstup v Braillově písmu. Umožňují uživatelům poslouchat obsah a procházet pomocí klávesnice. Tato technologie umožňuje nevidomým nebo slabozrakým osobám používat informační technologie se stejnou úrovní nezávislosti a soukromí jako kterýkoli jiný uživatel. Čtečky obrazovky využívají také lidé s kognitivními poruchami nebo poruchami učení a uživatelé, kteří prostě preferují zvukový obsah před textem. Tyto nástroje přesahují použití webu a pomáhají při navigaci v dokumentech, tabulkách a operačních systémech.

  • Dotyk: Dotykové cíle jsou z velké části zaměřeny na lidi se zpožděním pohybu, kteří mohou mít problémy s poklepáním na obrazovku. Přesněji řečeno, dotyk je navržen tak, aby lidem pomohl omezit množství falešných vstupů z nezamýšlených (nebo neregistrovaných) dotyků.

  • Dynamický obsah: Mezníkové role, neboli popisky ARIA, nabízejí okamžité výhody pro uživatele čtečky. Existuje osm rolí, z nichž každá představuje blok obsahu, který se běžně vyskytuje na webových stránkách. Chcete-li je použít, přidejte příslušný atribut role do vhodného kontejneru ve vašem HTML, což uživatelům čtečky obrazovky umožní rychlou navigaci do dané části stránky.

Vizuální styly

Chcete-li vytvořit inkluzivní produkty pro uživatele s různými schopnostmi vidění, je nezbytné vzít v úvahu vizuální styly, jako je barva, kontrast a velikost textu. To zahrnuje zajištění dostatečného kontrastu mezi textem a jeho pozadím, včetně textu na obrázcích, ikonách a tlačítkách, aby se zlepšila čitelnost pro uživatele s nízkou citlivostí na kontrast nebo barvoslepostí. Dobře kontrastní obsah zlepšuje čitelnost za různých světelných podmínek, z čehož mají prospěch všichni uživatelé.

Standardní text by měl zachovat kontrastní poměr alespoň 4,5 : 1 s pozadím. Pro větší text, interaktivní komponenty a vizualizace dat je vyžadován minimální kontrastní poměr 3 : 1 s barvou pozadí. Indikátory stavu by měly k přenosu informací efektivně využívat sémantické barvy, typ a snímky a zajistit, aby obsah vnímali všichni uživatelé. Zvažte podporu vysoce kontrastní barevné palety, která normalizuje barevnou paletu pro zobrazování obsahu s kontrastním poměrem alespoň 7 : 1, což zajišťuje viditelnost a jasnost. Nabídka tmavého režimu může výrazně zlepšit čitelnost a snížit únavu očí.

Typografie

Typografie hraje klíčovou roli při zajišťování čitelnosti pro uživatele s různými potřebami. Text musí být dostatečně velký a dostatečně rozmístěn, aby vyhovoval různým požadavkům uživatelů. Uživatelé by měli mít možnost upravit nastavení, jako je orientace a úrovně přiblížení, přičemž aplikace podle toho plynule přizpůsobí rozvržení obsahu. Dobře nastavená typografie nejen napomáhá čitelnosti, ale také usnadňuje orientaci a navigaci na stránce, což je výhodné pro osoby se slabým zrakem, kognitivními poruchami a barvoslepostí a pro ty, kteří se spoléhají na čtečky obrazovky.

Nadpisy by měly obsahovat velký nebo tučný text, aby umožnily rychlé skenování a porozumění, zejména pro vizuálně orientované uživatele. Správně použité prvky nadpisu zajišťují efektivní navigaci pro všechny uživatele. Šířka řádků a mezery výrazně ovlivňují čitelnost; například příliš široké řádky namáhají oči, zatímco příliš krátké řádky narušují rytmus a porozumění. Zaměřte se na délku řádku 50 až 70 znaků a výšku řádku, která je 120 % až 145 % velikosti písma, abyste zlepšili čitelnost.

Na mobilních zařízeních by mělo být možné změnit velikost textu až na 200 %, aniž by došlo k ohrožení obsahu nebo funkčnosti. Tato flexibilita zajišťuje, že uživatelé mohou upravovat velikost textu podle svých preferencí nebo potřeb, čímž se zvyšuje celková dostupnost. Kromě toho by uživatelé měli mít možnost přiblížit rozhraní s rozložením stránek navrženým tak, aby obsah plynule přeformátovalo bez vodorovného posouvání pro úrovně přiblížení až 400 %. Zajištění toho, že obsah zůstane přístupný a čitelný bez ohledu na velikost obrazovky zařízení, přispívá k uživatelsky přívětivějšímu prostředí pro všechny uživatele.

Obrázky, grafiky a pohyb

Obrázky a grafika činí obsah příjemnějším a snáze srozumitelným pro mnoho lidí, zejména pro ty, kteří mají kognitivní poruchy a poruchy učení. Zatímco obrázky mohou lidem se zrakovým postižením sloužit jako vodítka a pomáhají jim orientovat se v obsahu, rozsáhlé používání na webech může uživatelům vytvářet velké překážky.

Přístupné postupy týkající se mediálního obsahu jsou přínosem pro uživatele Braillova písma a čtečky obrazovky, uživatele, kteří procházejí s vypnutými obrázky, aby ušetřili spotřebu dat, a prohledávače vyhledávačů. Mohou také pomoci lidem se ztrátou sluchu nebo kognitivními poruchami.

Pro zpřístupnění vizuálního obsahu použijte alternativní text. Atributy Alt popisují vizuální obsah, například text, který se zobrazuje při stahování obrázků. Alternativní text přizpůsobte kontextu obrázku. Buďte struční a informativní (použijte 150 až 250 znaků). Nezapomeňte označit obrázky, které duplikují textový obsah, jako dekorativní.

Interakce

U interakce na přístupnosti záleží nejvíce. Pokud uživatel nemůže hladce procházet produktem a provádět úkoly, produkt není skutečně přístupný. Efektivní interakce pomocí klávesnice a dotyku pomáhají uživatelům čteček obrazovky, čteček Braillova písma a těm, kteří navigují pomocí klávesnice. Typické interakce zahrnují:

  • Navigace: Uživatelé asistenční technologie procházejí webovou stránkou tabulátorem, vyhledáváním a v případě programů pro čtení z obrazovky pomocí seznamů nadpisů a odkazů. Zajistěte efektivní navigaci pomocí klávesnice pomocí orientačních bodů, nadpisů a zkratek, např. „přeskočení na hlavní obsah“.

  • Hypertextové odkazy: Použitelnost a dostupnost hypertextových odkazů lze zlepšit tím, že budou jasné, stručné a smysluplné mimo kontext. Použijte dostatečný barevný kontrast a vizuálně je odlište od ostatního obsahu.

  • Tabulka: Spoléhat se pouze na vizuální podněty nestačí k vytvoření přístupné tabulky. Strukturální značení umožňuje asistenční technologii rozpoznávat záhlaví a datové buňky.

  • Formuláře: Vstupní pole, která se používají pro různé webové interakce, často vyvolávají obavy o přístupnost u osob, které používají čtečky obrazovky nebo klávesnice.

  • Viditelnost: Viditelnost zaměření pomáhá uživatelům, kteří se spoléhají na klávesnici, při navigaci na stránce tím, že vizuálně označuje prvek, se kterým dále interagují. Někdy je potřeba zaměření přesunout programově nebo omezit na konkrétní oblast, aby se optimalizovalo prostředí.

  • Změny stavu: Zadejte text pro jakoukoli změnu stavu a oznámení. Komunikace o chybových stavech a vedení uživatelů při obnově chyb, jako jsou chybějící informace nebo problém se systémem, je zásadní.

Usnadnění dáky Power Platform

Moderní ovládací prvky jsou k dispozici pro aplikace plátna i aplikace řízené modelem.

Aplikace plátna podporují moderní motivy, což vám umožňuje implementovat konzistentní paletu značek napříč všemi ovládacími prvky v aplikaci. Modelem řízené aplikace podporují motivy pro úpravu základních prvků značky, jako jsou barvy záhlaví aplikací, odkazy a některé ikony formulářů.

Opakovaně použitelné komponenty s ohledem na řešení jsou k dispozici v několika formách pro různé typy aplikací. Vlastní komponenty plátna lze použít v aplikacích plátna nebo na vlastních stránkách a vytváří se s minimálním psaním kódu. Power Apps component framework lze použít k implementaci komponent kódu v aplikacích plátna, v modelem řízených aplikacích Power Pages

Aplikace plátna podporují dostupné vlastnosti, které mapují konkrétní funkce asistenční technologie. Použijte nástroje ve studiu k ověření souladu s přístupností.

I když jsou modelem řízené aplikace přístupné bez konfigurace, zajistěte, aby všechny webové zdroje přidané do aplikace byly přístupné. Vložená prostředí plátna, včetně vlastních stránek, musí být ručně nakonfigurována tak, aby vyhovovala standardům přístupnosti.

Modelem řízené aplikace poskytují vestavěné standardní klávesové zkratky pro procházení formulářů a zobrazení.

Aplikace plátna vyžadují komponenty kódu k aktivaci klávesových zkratek, které lze konfigurovat pomocí klávesových zkratek sady pro tvůrce.

Kontrolní seznam optimalizace prostředí

Kontrolní seznam optimalizace prostředí