Del via

Anbefalinger til følgende designstandarder

  • Artikel

Gælder for denne anbefaling af kontrolliste til optimering af Power Platform-velstruktureret oplevelse:

XO:02 Følg etablerede standarder, konventioner og retningslinjer. Brug almindelige designmønstre. Bevar ensartethed i designelementer, terminologi og interaktioner på tværs af grænsefladen. Brug ensartede mønstre og standarder til at vejlede brugerne gennem brugergrænsefladen og til at skabe en sammenhængende brugeroplevelse.

I denne vejledning beskrives anbefalingerne til oprettelse af designstandarder, konventioner og bedste praksis til udvikling af brugergrænseflader, der forbedrer brugeroplevelsen og programmets overordnede succes. Afvigelser fra standarder skal overvejes nøje for at undgå at påvirke brugerens oplevelse og programmets anvendelighed negativt.

Vigtigste designstrategier

Ved at følge designstandarder kan du reducere beslutningsindsatsen i designprocessen ved at identificere de vigtige aspekter af design. Forståelse for standarderne detaljerer og strømliner et teams mulighed for at opnå veldesignede brugergrænseflader. Denne fremgangsmåde medfører hurtigere udviklingscyklusser, forbedret anvendelighed og større brugertilfredshed, hvilket i sidste ende fører til øget produktivitet og effektivitet i interne softwaresystemer.

Forstå designprincipper

Omfattende undersøgelser af menneskets kognitive evner øger vores forståelse af visuelt design og interaktion med digitale produkter. Denne viden underbygger mange bedste praksisser og standarder og udgør ca. 80 % af det endelige produkt. Designprincipper kan fjerne den resterende 20 % kløft, der ikke er omfattet af standarder. Kendskab til denne viden forbedrer udviklingsteamets forståelse af designovervejelser under planlægning, reducerer afhængigheden af eller forbedrer samarbejde med designressourcer.

Følg almindelige mønstre og metaforer

Universelle mønstre og metaforer genkendes vidt og bredt og forventes i digitale produkter. Hvis disse mønstre indarbejdes, hvor det er passende, kan det forenkle bruger-onboarding og langvarig brug, reducere uddannelses- og supportomkostninger og potentielt mindske behovet for opdateringer eller nye design. Disse fremgangsmåder omfatter forskellige aspekter af design, herunder layoutkomposition, navigationsstruktur, informationshierarki og interaktionsdesign.

Det er vigtigt at holde sig til standardikoners metaforer og semantiske farver. Ikoner skal bruge etablerede visuelle associationer til at formidle funktionaliteten hurtigt og effektivt for brugerne. På samme måde giver semantiske farver, f.eks. rød for fejl eller grøn for succes, øjeblikkelig visuel feedback, der er i overensstemmelse med brugernes forventninger og tankegange. At følge disse konventioner hjælper med at reducere kognitiv belastning og forbedrer brugervenligheden ved at fremme en følelse af fortrolighed og komfort.

Etablere et designsystem

Et designsystem er en samling funktionsblokke, der kan genbruges, og som bruges til at opbygge en brugergrænseflade. De er designet specifikt til en organisation, så alle elementer er i overensstemmelse med mærkets etablerede standarder. De fire nøglekomponenter i et designsystem er designtokens, komponenter, mønsterbiblioteker og retningslinjer.

Designtokens er grundlæggende visuelle elementer i en brugergrænseflade, herunder aspekter som farve, typografi og plads. De kommer til udtryk som variabler i standardformat, så der oprettes og vedligeholdes et program ved hjælp af designsystemet. Uanset det specifikke design strømliner designtokens oversættelsen af design til kode. Ved f.eks. at definere et token med navnet "primary-color" med en angivet værdi kan udviklere integrere designet problemfrit vha. tokenet i stedet for at integrere en bestemt værdi direkte i koden. Designtokens kan justeres i en organisations typografivejledning og styres centralt, så det bliver nemt at oprette brugervenlige tokens.

En komponent repræsenterer en separat modulenhed på en brugergrænseflade. Den fungerer som et visuelt element til at samle appgrænseflader. Veldesignede komponenter har to nøgleegenskaber: genbrugelighed og modularitet. De bør konstrueres til at sikre, at de opretholder visuel konsistens på tværs af flere applikationer inden for et brands økosystem, hvilket reducerer behovet for at genskabe designet hver gang. En enkelt komponent bør fungere problemfrit i flere sammenhænge.

Power Apps indeholder et omfattende sæt grundlæggende universelle komponenter, såsom knapper og rullelister, og sammensatte komponenter, som den moderne tabel. Brug disse kontrolelementer i så høj grad som muligt til grundlæggende behov, og overvej derefter at bygge sammensatte komponenter, hvor der er plads til mønstre, der gentages på brugergrænsefladen.

Sammensatte komponenter skal være så alsidige, at de kan bruges, som de er, eller med mindre variationer (via parametre) på tværs af forskellige appkontekster uden behov for ændringer. Her er nogle eksempler på brugerdefinerede komponenter:

  • Et sidehoved eller en sidefod med firmamærket
  • En ressourcesidekomponent i skærmstørrelse, hvor brugerne kan give feedback og få it-hjælp
  • Universelt indhold som meddelelser om ophavsret eller links

Et mønsterbibliotek indeholder et sæt foruddefinerede designmønstre, som udviklere kan bruge som udgangspunkt for at oprette brugergrænseflader. Disse mønstre fungerer som standardiserede løsninger på almindelige designudfordringer. Det primære mål med et mønsterbibliotek er at tilbyde en central samling veldesignede mønstre, der gør det muligt at oprette ensartede og effektive brugergrænseflader. Mønsterbiblioteker giver udviklere mulighed for at anvende et bestemt mønster og følge de retningslinjer for anvendelse, der er fastlagt for brugen, og som sikrer effektivitet på tværs af design af brugergrænsefladen.

Retningslinjer indeholder regler og bedste praksis for projektteams om, hvordan komponenter og visuelle typografier bruges effektivt. I modsætning til retningslinjer for typografi, der fokuserer på æstetik, definerer designsystemvejledninger komponenternes funktionsfunktionsmåde og brugernes forventninger til interaktion. Hvis et designsystem f.eks. indeholder et designtokensæt til referencefarver, skal retningslinjerne tydeliggøre, hvornår disse farver skal bruges, og hvordan udviklere har adgang til den tilsvarende farve i Power Apps. I forbindelse med komponenter skal der være dokumentation om korrekt brug, input- og outputparametre samt de tilstandsvariationer, der kan forventes af komponenten.

Centrale designsystemindsatser kan også være vært for universelle medieaktiver, f.eks. virksomhedslogoer og andre designaktiver, i et lager for at muliggøre hurtig udvikling.

Microsofts Fluent UI er et eksempel på et vidt udbredt open source-designsystem. Det kan være en effektiv reference for mange designbeslutninger, der træffes i, Power Apps fordi alle moderne kontroller bruger komponenterne i Fluent (2) designsystemet. Designsystemer som Fluent UI er resultatet af en betydelig mængde forsknings- og udviklingsindsats for at skabe komponenter for at sikre, at de opfylder brugernes behov. De er også designet på en måde, der let kan bruges på tværs af forskellige digitale produkter og platforme. Hver komponent har specifikke retningslinjer for at sikre, at programmet stemmer overens med den tilsigtede oplevelse. Udnyt den viden, der understøttes af forskning, ved at gennemgå Fluent 2-vejledningen.

Deling for at undgå dobbeltimplementeringer øger ikke kun produktionseffektiviteten, men sikrer også, at oplevelserne forbliver sammenhængende over tid. Bidrag til delte elementer er med til at holde erfaringen ny og afspejle ekspertise fra hele organisationen. Lige nu er sammenhæng en udfordring, fordi komponenter, systemer, processer og kultur ofte ikke deles, ikke fremmer sammenhæng og gør det vanskeligt at yde et bidrag.

Udføre designgennemsyn

Adgang til ressourcer, der er beregnet til at vejlede design af brugeroplevelsen, er vigtig for at sikre, at en app overholder de etablerede UI/UX-standarder. Centrale teams skal blive fortrolig med grundlæggende designstandarder og bedste praksis. Mens designere typisk har viden om brugeroplevelsen, kan projektledere også drage fordel af at lære disse færdigheder for at bidrage effektivt til teamet.

Den mest effektive måde at validere en oplevelse på er at gennemgå den fysisk. Du kan dog også læse Power Apps-appmetadata via programmering. Metoder til at opnå dette kan omfatte kontrol af, at det korrekte tema anvendes på appen, eller bekræftelse af, at der refereres til tematokenværdier i ældre kontrolelementer. Hvis bestemte tekstelementer f.eks. skal bruge bestemte designtokens, kan tekstkomponentens navn svare til en bestemt værdi, og komponentens egenskaber skal derefter matche med en bestemt tilknytning af et designtoken.

Evaluer antallet af elementer, der er en bestemt komponenttype og opfylder visse kriterier, i forhold til dem, der ikke gør. Du kan f.eks. overveje tekstkomponenter, der enten er forkert navngivet eller navngivet korrekt, men som ikke følger retningslinjer for egenskabsværdier. Hvis du vil gennemtvinge et dynamisk layout, kan visse layoutbeholdere knyttes til bestemte navngivningskonventioner og egenskabsværdier (f.eks. LayoutWrap).

Opfyld tilgængelighedsstandarder for at øge brugerbasen

Indarbejdelse af inkluderende designprincipper sikrer, at produkterne passer til et blandet publikum, herunder personer med enhver formående. Inkluderende design gør det muligt at identificere potentielle barrierer for enhver bruger for at oprette produkter, der håndterer udfordringer før den endelige implementering. Det er vigtigt at forstå og diskutere de funktionelle aspekter, der kan føre til interaktionsbarrierer for effektivt at overvinde dem.

Funktion Purpose
Genkendelse Vores evne til at modtage, fortolke og behandle oplysninger påvirkes af mange faktorer. Disse faktorer omfatter opmærksomhed, bevidsthed, fokus, hukommelse, bedømmelse, forståelse, problemløsning og ræsonnement. En persons opfatteevne kan påvirke den måde, de lærer på, uanset om de skal lære at bruge en ny enhed eller forstå nye oplysninger i et klasselokale. Mange aspekter af kognitive evner påvirker hinanden.
Mobilitet Vores anatomi og muskler giver os mobilitet, og de er afhængige af hjernens signaler, der styrer musklerne. Mobilitet omfatter greb, finmotorik, koordinering, kontrol (frivillig vs. ufrivillig bevægelse), hastighed, muskeltoning, udholdenhed, kropsstilling og midlertidige skader. Mobilitet kan påvirkes af situationsbestemte, midlertidige, progressive eller permanente forhold.
Syn Vores mulighed for at se og forstå visuelle oplysninger fra vores miljø styrer tanker og bevægelse. Synet påvirkes både af fysiske og neurologiske faktorer. Synsbegrænsninger omfatter blindhed, svagt syn (delvist seende), forringet opmærksomhedsniveau, tab af synsfelt, farveblindhed, fotofobi (lysfølsomhed) og endda stærkt sollys, der påvirker læselighed af tekst på et skærmbillede.
Hørelse Vores mulighed for at modtage og forstå lyde fra vores miljø styrer også tanker og bevægelse. Graden af høretab varierer over et bredt spektrum, hvilket fører til barrierer for daglig brug af teknologi. Af midlertidige eller situationsbestemte eksempler kan nævnes støjende miljøer eller stillezoner, hvor lydafspilning ikke er mulig.
Stemme, tale og kommunikation Vores mulighed for at kommunikere (verbalt eller ikke-verbalt) er vigtig for at give udtryk for vores ønsker og behov, skabe relationer, formidle oplysninger til andre og interagere med miljøet.
Følelse og opfattelse Følelse er vores mulighed for at registrere følelser som berøring eller vores kropssprog. Opfattelse er, hvordan hjernen behandler og kommunikerer disse følelser. Følelsesmæssige begrænsninger omfatter vestibulær dysfunktion, kronisk smerte, hudintegritet, følsomhed (hypersensitive og hyposensitive) og balancesansen.

Metoder for adgang til indhold

Brugere har adgang til digitalt indhold på forskellige måder. Ud over mus og markør kan de også bruge tastatur- og hjælpeteknologier som skærm- og braillelæsere, forstørrelsesglas, billedtekster, stemmegenkendelse og indstillinger med høj kontrast, som alle tilpasser oplevelsen til brugerens behov.

Hjælpeværktøjer

Almindelige hjælpemidler omfatter:

  • Tastatur: Personer med synshandicap interagerer med websteder og apps ved hjælp af skærmlæsersoftware, som læser indhold og kontrolelementer højt vha. tekst-til-tale-teknologi og bruger tastaturet som et alternativt input til peg-og-klik-interaktion med en standardmus. Ud over at understøtte det grundlæggende sæt af tastaturkommandoer har skærmlæsere også et komplekst sæt tastaturkommandoer. Disse kommandoer giver brugerne et stærkt ekstra sæt værktøjer, der kan bruges til at arbejde mere effektivt med brugergrænseflader.

  • Læser: Skærmlæsere konverterer digital tekst til syntetiseret tale og brailleoutput. De giver brugerne mulighed for at høre indhold og navigere med tastaturet. Denne teknologi gør det muligt for personer, der er blinde eller svagtseende, at bruge informationsteknologi på samme niveau af uafhængighed og beskyttelse af personlige oplysninger som alle andre brugere. Skærmlæsere bruges også af personer med indlæringsvanskeligheder og af brugere, der blot foretrækker lydindhold frem for tekst. Disse værktøjer rækker ud over webbrug og hjælper med navigation i dokumenter, regneark og operativsystemer.

  • Berøring: Berøringsmål er primært rettet mod personer med nedsat motorik, der kan have problemer med at trykke på skærmen. Berøring er mere specifikt udviklet til at hjælpe brugere med at begrænse mængden af tilfældigt input fra utilsigtede (eller ikke-registrerede) berøringer.

  • Dynamisk indhold: Landmærkeroller, eller ARIA-etiketter, giver omgående fordele for brugere af skærmlæser. Der findes otte roller, som hver især repræsenterer en blok af indhold, som ofte optræder på websider. Du kan bruge dem ved at føje den relevante rolleattribut til en velegnet beholder i HTML'en og gøre det muligt for brugere af skærmlæsere hurtigt at navigere til den pågældende sektion på siden.

Visuelt layout

Hvis du vil oprette inkluderende produkter til brugere med forskellige synsevner, er det vigtigt at overveje visuelle typografier som farve, kontrast og tekststørrelse. Dette indebærer, at der skal være tilstrækkelig kontrast mellem tekst og baggrund, herunder tekst på billeder, ikoner og knapper, for at gøre det mere læsevenligt for brugere med følsomhed over for lav kontrast eller farveblindhed. Velkontrasterende indhold øger læsbarheden i forskellige lysforhold, hvilket er til fordel for alle brugere.

Standardteksten skal have en kontrast på mindst 4,5:1 i baggrunden. Til større tekst, interaktive komponenter og datavisualiseringer kræves der en minimumkontrast på 3:1 med baggrundsfarven. Statusindikatorer bør bruge semantiske farver, tekst og billeder effektivt til at formidle information og sikre, at indhold kan opfattes af alle brugere. Overvej at understøtte en farvepalet med stor kontrast, som normaliserer farvepaletten til visning af indhold med en kontrast på mindst 7:1, så synligheden og klarheden sikres. Hvis du tilbyder en mørk tilstand, kan det øge læsbarheden og gøre det mindre anstrengende for øjnene.

Typografi

Typografi spiller en vigtig rolle for at sikre læsbarhed for brugere med forskellige behov. Teksten skal være tilstrækkelig stor og med tilstrækkelig afstand til at imødekomme forskellige brugerkrav. Brugerne bør kunne justere indstillinger som f.eks. retning og zoomniveauer, hvor programmer problemfrit kan tilpasse deres indholdslayout efter behov. Velindstillet typografi hjælper ikke kun med læsbarheden, men letter også sideorientering og navigation, hvilket gavner personer med nedsat syn, kognitive handicap og farveblindhed og dem, der er afhængige af skærmlæsere.

Overskrifter skal indeholde stor eller fed tekst for at muliggøre hurtig scanning og forståelse, især for visuelt orienterede brugere. Korrekt anvendte overskriftselementer sikrer en effektiv navigation for alle brugere. Linjebredde og -afstand øger læsbarheden betydeligt. F.eks. kan overdrevent brede linjer anstrenge øjnene, mens overdrevne korte linjer forstyrrer rytmen og forståelsen. Sigt efter en linjelængde på 50 til 70 tegn og en linjehøjde, der er 120 % til 145 % af skriftstørrelsen, for at forbedre læsbarheden.

På mobilenheder skal teksten kunne tilpasses op til 200 % uden at gå på kompromis med indhold eller funktionalitet. Denne fleksibilitet sikrer, at brugere kan justere tekststørrelsen efter deres præferencer eller behov og dermed forbedre den overordnede tilgængelighed. Brugere skal have mulighed for at zoome ind på grænsefladen med sidelayout, der er designet til problemfrit at lade indhold flyde uden at skulle rulle vandret for at zoome op til 400 %. Sikring af, at indhold forbliver tilgængeligt og læsbart, uanset enhedens skærmstørrelse, bidrager til en mere brugervenlig oplevelse for alle brugere.

Billeder, grafik og bevægelse

Billeder og grafik gør indhold nemmere at forstå for mange personer, især dem med kognitive udfordringer og indlæringsvanskeligheder. Mens billeder kan tjene som signaler for personer med synshandicap og hjælpe dem med at orientere dem i indholdet, kan omfattende brug på websteder skabe store barrierer for brugerne.

Tilgængelige fremgangsmåder omkring medieindhold gavner brugere af blindskrift og skærmlæsere, brugere, der navigerer med billeder slået fra for at spare båndbredde, og crawlere i søgeprogrammer. De kan også hjælpe personer med høretab eller kognitive handicap.

Brug alternativ tekst til at gøre visuelt indhold tilgængeligt. Alt-attributter beskriver visuelt indhold, f.eks. tekst, der vises, mens billeder downloades. Tilpas alternativ tekst til billedets kontekst. Vær præcis og informativ (brug 150 til 250 tegn). Husk at markere billeder, der duplikerer tekstindhold som dekorativt.

Interaktion

Interaktion er det sted, hvor tilgængelighed er vigtigst. Hvis en bruger ikke kan navigere uden problemer og udføre opgaver i et produkt, er produktet ikke fuldt tilgængeligt. Effektive tastatur- og berøringsinteraktioner hjælper brugere af skærmlæsere, læsere af blindskrift og dem, der navigerer ved hjælp af et tastatur. Typiske interaktioner omfatter:

  • Navigering: Brugere af hjælpeteknologi navigerer på en webside ved hjælp af tabulering, søgning og, hvis det drejer sig om skærmlæsere, med lister over overskrifter og links. Sørg for effektiv tastaturnavigation med landemærker, overskrifter og genveje, f.eks. "spring til hovedindhold".

  • Hyperlinks: Brugervenligheden og tilgængeligheden af hyperlinks kan forbedres ved at gøre dem klare, kortfattede og meningsfulde ude af kontekst. Anvend tilstrækkelig farvekontrast, og differentier visuelt fra andet indhold.

  • Tabeller: Det er ikke tilstrækkeligt at bruge visuelle signaler alene til at oprette en tilgængelig tabel. Strukturel formatering gør det muligt at genkende sidehoveder og dataceller med hjælpeteknologi.

  • Formularer: Indtastningsfelter, der bruges til forskellige webinteraktioner, giver ofte anledning til problemer med tilgængelighed for personer, der bruger skærmlæsere eller tastaturer.

  • Fokus: Synligheden af fokus hjælper brugere, der er afhængige af tastaturet til at navigere på siden, ved visuelt at angive det element, de kommunikerer med dernæst. Undertiden skal fokus flyttes via programmering eller begrænses til et bestemt område for at optimere oplevelsen.

  • Tilstandsændringer: Angiv tekst for alle tilstandsændringer og meddelelser. Det er vigtigt at kommunikere fejltilstande og guide brugere gennem gendannelse efter fejl, f.eks. manglende oplysninger eller et systemproblem.

Power Platform-processtyring

Moderne kontrolelementer er tilgængelige for både lærredapps og modelbaserede apps.

Lærredapps understøtter moderne temaer, så du kan implementere et gennemført mærke på tværs af alle kontrolelementer i appen. Modelbaserede apps understøtter temaer til ændring af grundlæggende brandingelementer som farver på appoverskrifter, links og nogle formularikoner.

Løsningsbaserede komponenter, der kan genbruges, er tilgængelige i flere formularer for forskellige apptyper. Brugerdefinerede lærredskomponenter kan bruges i lærred-apps eller brugerdefinerede sider, og de er opbygget vha. low code. Power Apps component framework kan bruges til at implementere kodekomponenter for lærredapps, modelbaserede apps og Power Pages.

Lærredapps understøtter tilgængelige egenskaber, der knyttes til bestemte funktioner i hjælpeteknologi. Brug in-studio-værktøjer til at validere overholdelse af tilgængelighed.

Selvom modelbaserede apps er tilgængelige uden konfiguration, skal du sikre dig, at alle webressourcer, der føjes til appen, er tilgængelige. Integrerede lærredoplevelser, herunder brugerdefinerede sider, skal konfigureres manuelt for at imødekomme tilgængelighedsstandarder.

Modelbaserede apps har indbyggede standardtastaturgenveje til navigation i formularer og visninger.

Lærredapps kræver kodekomponenter for at aktivere tastaturgenveje, som kan konfigureres ved hjælp af Creator Kits tastaturgenveje.

Kontrolliste for optimering af oplevelse

Kontrolliste for optimering af oplevelse