Del via

Anbefalinger for å følge utformingsstandarder

  • Artikkel

Gjelder denne Power Platform Well-Architected Experience Optimization-sjekklisteanbefalingen:

XO:02 Følg etablerte standarder, konvensjoner og retningslinjer. Bruk vanlige utformingsmønstre. Oppretthold konsekvent i utformingselementer, terminologi og samhandlinger på tvers av grensesnittet. Bruk konsekvente mønstre og standarder til å veilede brukere gjennom grensesnittet og skape en sammenhengende brukeropplevelse.

Denne veiledningen beskriver anbefalingene for oppretting av utformingsstandarder, -konvensjoner og anbefalte fremgangsmåter for å utvikle brukergrensesnitt som forbedrer brukeropplevelsen og programmets generelle suksess. Avvik fra standarder bør nøye vurderes for å unngå negativ innvirkning på brukerens opplevelse og programbrukervennligheten.

Viktige utformingsstrategier

Å følge utformingsstandarder bidrar til å redusere beslutningstaking i utformingsprosessen ved å identifisere de viktige sidene ved utformingen. Forståelse av standardene er viktig og effektiviserer et teams mulighet til å oppnå godt utformede brukergrensesnitt. Denne metoden fører til raskere utviklingssykluser, forbedret brukervennlighet og forbedret brukertilfredshet, noe som til slutt fører til økt produktivitet og effektivitet for interne programvaresystemer.

Forstå utformingsprinsipper

Omfattende undersøkelser om menneskelig kognisjon informerer vår forståelse av visuell utforming og samhandling med digitale produkter. Denne kunnskapen understøtter mange anbefalte fremgangsmåter og standarder og står for ca. 80 % av det endelige produktet. Utformingsprinsippene kan omfatte de resterende 20 % i kreativ avstand som ikke dekkes av standarder. Kjennskap til denne kunnskapen forbedrer utviklingsteamets forståelse av utformingshensyn under planleggingen, reduserer avhengighet eller forbedrer samarbeidet med utformingsressurser.

Følg vanlige mønstre og metaforer

Universelle mønstre og metaforer gjenkjennes og forventes i digitale produkter. Innarbeiding av disse mønstrene der det er hensiktsmessig, kan forenkle innføring av brukere og langsiktig bruk, redusere opplærings- og kundestøttekostnader og potensielt redusere behovet for oppdateringer eller ny utforming. Disse fremgangsmåtene omfatter ulike aspekter ved utforming, inkludert oppsettssammensetning, navigasjonsstruktur, informasjonshierarki og samhandlingsutforming.

Det er svært viktig å holde seg til standard ikonmetaforer og semantiske farger. Ikoner bør bruke etablerte visuelle tilknytninger til å formidle funksjonalitet raskt og effektivt til brukere. Semantiske farger, for eksempel rødt for feil eller grønt for suksess, gir på samme måte umiddelbar visuell tilbakemelding som er i samsvar med brukernes forventninger og mtetale modeller. Ved å følge disse konvensjonene bidrar dette til å redusere kognitiv belastning og forbedrer brukervennligheten ved å skape en sans for kjennskap og fortrolighet.

Opprett et utformingssystem

Et utformingssystem er en samling funksjonelle byggeblokker som kan brukes til å bygge et brukergrensesnitt. De er utformet spesielt for en organisasjon, slik at hvert element er i samsvar med varemerkets etablerte standarder. De fire viktige komponentene i et utformingssystem er utformingstokener, komponenter, mønsterbiblioteker og retningslinjer.

Utformingstokener er grunnleggende visuelle elementer i et brukergrensesnitt, blant andre aspekter som farge, typografi og avstand. De uttrykkes som variabler i et standardformat, noe som gjør det mulig å opprette og vedlikeholde et program ved hjelp av utformingssystemet. Uavhengig av den bestemte utformingen effektiviserer utformingstokenene oversettelsen av utforming til kode. Ved å for eksempel definere et token kalt "primærfarge" med en angitt verdi, kan utviklere integrere designet sømløst ved hjelp av tokenet i stedet for å legge inn en bestemt verdi direkte i koden. Utformingstokenene kan justeres etter stilveiledningen for en organisasjon og administreres sentralt for å produsere brukervennlige tokener.

En komponent representerer en diskret, modulær enhet i et brukergrensesnitt. Den fungerer som et visuelt element for å sette sammen appgrensesnitt. Godt utformede komponenter har to hovedegenskaper: gjenbrukbarhet og modularitet. De bør utformes for å sikre at de opprettholder visuell konsekvens i flere programmer i et varemerkes økosystem, noe som reduserer behovet for å opprette utformingen på nytt hver gang. Én enkelt komponent skal effektivt fungere i flere kontekster.

Power Apps inneholder et omfattende sett med grunnleggende, universelle komponenter, for eksempel knapper, rullegardinmenyer og flere sammensatte komponenter, for eksempel den moderne tabellen. Bruk disse kontrollene så mye som mulig for grunnleggende behov, og vurder deretter å bygge sammensatte komponenter der det finnes tomrom for repeterbare mønstre i brukergrensesnittet.

Sammensatte komponenter bør være allsidige nok til å brukes som de er, eller med små variasjoner (gjennom parametere) i forskjellige appkontekster, uten behov for endringer. Eksempler på egendefinerte komponenter er følgende:

  • En firmamerket topp- eller bunntekst
  • En ressurssidekomponent med skjermstørrelse der brukere kan gi tilbakemelding og få IT-hjelp
  • Universelt innhold, for eksempel opphavsrettsmerknader eller koblinger

Et mønsterbibliotek har et sett med forhåndsdefinerte utformingsmønstre som utviklere kan bruke som startpunkt til å opprette brukergrensesnitt. Disse mønstrene fungerer som standardiserte løsninger på vanlige utformingsutfordringer. Hovedmålet med et mønsterbibliotek er å tilby en sentralisert samling velutformede mønstre, noe som gjør det mulig å opprette konsekvente og effektive brukergrensesnitt. Med mønsterbiblioteker kan utviklere bruke et bestemt mønster og følge etablerte retningslinjer for bruk, noe som sikrer sammenheng og effektivitet på tvers av brukergrensesnittutforminger.

Retningslinjer tilbyr regler og anbefalte fremgangsmåter for prosjektteam om effektiv bruk av komponenter og visuelle stiler. I motsetning til stilretningslinjer, som fokuserer på estetikk, definerer retningslinjer for utformingssystem funksjonell funksjonalitet for komponenter og forventninger til brukersamhandling. Hvis et utformingssystem for eksempel har et utformingstokensett for å henvise til farger, bør retningslinjene avklare når disse fargene skal brukes, og hvordan utviklere kan få tilgang til den tilsvarende fargen i Power Apps. For komponenter må det finnes dokumentasjon for riktig bruk, inndata- og utdataparametere samt tilstandsvariasjoner som kan forventes av komponenten.

Sentralisert utformingssystem kan også være vert for universelle medieressurser, for eksempel firmalogoer og andre utformingsressurser i en lagerbedrift, for å muliggjøre bred, rask utvikling.

Microsofts Fluent UI er et eksempel på et omfattende brukt utformingssystem med åpen kildekode. Det kan være en effektiv referanse for mange utformingsavgjørelser som tas i Power Apps, fordi alle moderne kontroller bruker komponentene i Fluten (2)-utformingssystemet. Utformingssystemer som Fluent UI er resultatet av en betydelig mengde forsknings- og utviklingsinnsats i oppretting av komponenter for å sikre at de oppfyller brukernes behov. De er også utformet på en måte som kan brukes over hele verden og enkelt på tvers av ulike digitale produkter og plattformer. Hver komponent har spesifikke retningslinjer for å sikre at programmet er i samsvar med den tiltenkte opplevelsen. Dra nytte av den forskningsbasert kunnskapen ved å se gjennom Fluent 2-veiledningen.

Deling for å unngå duplikatimplementeringer øker ikke bare produksjonseffektiviteten, men sikrer også at opplevelsene forblir sammenhengende over tid. Bidrag til delte elementer bidrar til å holde opplevelsen oppdatert og gjenspeile ekspertise fra hele organisasjonen. For øyeblikket er sammenheng en utfordring fordi komponenter, systemer, prosesser og kultur ofte ikke deles, ikke fremmer sammenheng og gjør bidrag vanskelig.

Utfør utformingsgjennomganger

Tilgang til ressurser som er ment å veilede utformingen av brukeropplevelsen, er avgjørende for å sikre at en app oppfyller etablerte standarder for brukergrensesnitt og brukeropplevelse. Sentraliserte team bør ha som mål å gjøre seg kjent med grunnleggende utformingsstandarder og anbefalte fremgangsmåter. Selv om utformere vanligvis har kunnskap om brukeropplevelse, kan prosjektledere også ha nytte av å lære disse ferdighetene for å bidra effektivt til teamet.

Den mest effektive måten å validere en opplevelse på er å gå gjennom den fysisk. Du kan imidlertid også lese Power Apps-appmetadata programmatisk. Metoder for å oppnå dette kan for eksempel omfatte kontroll av at riktig tema brukes i appen, eller å kontrollere at det henvises til tematokenverdier i eldre kontroller. Hvis bestemte tekstelementer for eksempel må bruke bestemte utformingstokener, kan navnet på tekstkomponenten samsvare med en bestemt verdi, og komponentens egenskaper må da samsvare med en bestemt utformingstokentildeling.

Evaluer antall elementer som er en bestemt komponenttype og oppfyller bestemte vilkår, kontra de som ikke gjør det. Vurder for eksempel tekstkomponenter som har feil navn eller har riktig navn, men som ikke følger retningslinjer for egenskapsverdi. For å bruke responsivt oppsett kan bestemte oppsettbeholdere tildeles til bestemte navnekonvensjoner og egenskapsverdier (f.eks. LayoutWrap).

Oppfyll tilgjengelighetsstandarder for å øke brukerbasen

Inkludering av universelle utformingsprinsippene sikrer at produktene imøtekommer en allsidig målgruppe, inkludert enkeltpersoner med alle typer funksjoner. Universell utforming søker etter å identifisere potensielle utfordringene for brukere med alle typer funksjoner for å opprette produkter som løser utfordringer før endelige implementeringen. Det er viktig å forstå og diskutere de funksjonelle sidene som kan føre til samhandlingsutfordringer for å overvinne dem på en effektiv måte.

Function Purpose
Kognitivt Vår evne til å motta, tolke og behandle informasjon påvirkes av mange faktorer. Disse faktorene inkluderer oppmerksomhet, bevissthet, fokus, minne, forståelse, problemløsning og resonnement. En brukers kognitive evner kan påvirke måten de lærer på, enten de lærer hvordan de bruker en ny enhet eller lærer seg ny informasjon i et klasserom. Mange aspekter ved kognitive evner påvirker hverandre.
Mobilitet Anatomien vår og musklene våre gir oss mobilitet, og de er avhengige av hjernesignaler, som styrer muskler. Mobilitet innebærer gripebevegelser, finmotorikk, koordinering, kontroll (frivillig kontra ufrivillig bevegelse), hastighet, muskelmasse, utholdenhet, stilling og midlertidige skader. Mobilitet kan påvirkes av situasjonsmessige, midlertidige, progressive eller permanente betingelser.
Syn Evnen vår til å se og forstå visuell informasjon fra miljøet veileder tanke og bevegelse. Syn påvirkes av både fysiske og geologiske faktorer. Synsbegrensninger inkluderer blindhet, nedsatt syn (delvis nedsatt syn), redusert synsskarphet, tap av synsfelt, fargeblindhet, fotofobi (lett sensitivitet) og til og med nedsatt synshemming som påvirker lesbarheten til tekst på en skjerm.
Hørsel Evnen vår til å motta og forstå lyd fra miljøet veileder også tanke og bevegelse. Grader av hørselstap varierer på tvers av et bredt spektrum, noe som fører til utfordringer i den daglige teknologibruken. Midlertidige eller situasjonsmessige eksempler inkluderer miljøer med støy eller stille soner der lydavspilling ikke er mulig.
Tale, stemme og kommunikasjon Vår evne til å kommunisere (verbalt eller ikke-verbalt) er vesentlig for å uttrykke ønsker og behov, forme relasjoner, formidle informasjon til andre og samhandle med miljøet.
Følelse og oppfatning Følelse er vår evne til å oppdage sanser som berøring eller plassering av kroppen. Oppfatning er hvordan hjernen behandler og kommuniserer disse sansene. Sansebegrensninger omfatter talefeil, kronisk smerte, hudintegritet, følelse (hypersensitive og hyposensitive) og proprisepsjon.

Metoder for tilgang til innhold

Brukere får tilgang til digital innhold på forskjellige måter. I tillegg til inndata fra mus og peker kan de også bruke tastaturet og hjelpeteknologier som skjerm- og blindeskriftlesere, forstørrelsesglass, bildetekster, stemmegjenkjenning og innstillinger for høy kontrast, som alle tilpasser opplevelsen for å dekke brukerens behov.

Hjelpeverktøy

Vanlige hjelpeverktøy inkluderer:

  • Tastatur: Personer med synshemninger samhandler med nettsteder og apper ved hjelp av skjermleserprogramvare, som leser innhold og kontroller høyt ved hjelp av tekst-til-tale-teknologi, og bruker tastaturet som alternativ inndata til pek-og-klikk-samhandling med en standardmus. I tillegg til å støtte det grunnleggende settet tastaturkommandoer har skjermlesere også et komplekst sett med tastaturkommandoer. Disse kommandoene gir brukere et kraftig ekstra sett med verktøy for å samhandle mer effektivt med brukergrensesnitt.

  • Skjermleser: Skjermlesere konverterer digital tekst til syntetisert tale- og punktskriftutdata. De gir brukerne mulighet til å høre innhold og navigere med tastaturet. Denne teknologien gjør det mulig for brukere med blindhet eller nedsatt syn å bruke informasjonsteknologi med samme nivå av uavhengighet og personvern som alle andre brukere. Skjermlesere brukes også av personer med kognitive hemminger eller læringshemninger, og av brukere som ganske enkelt foretrekker lydinnhold over tekst. Disse verktøyene strekker seg ut over nettbruk og hjelper deg med å navigere i dokumenter, regneark og operativsystemer.

  • Berøring: Berøringsmål er i stor grad rettet mot personer med motoriske forsinkelser, som kan ha problemer med å trykke på skjermen. Berøring er mer spesifikt utformet for å hjelpe personer med å begrense mengden falsk inndata fra utilsiktede (eller uregistrerte) berøringer.

  • Dynamisk innhold: Landemerkeroller eller ARIA-etiketter gir umiddelbare fordeler for skjermleserbrukere. Det er åtte roller, hver representerer en innholdsblokk som vanligvis forekommer på nettsider. Hvis du vil bruke dem, legger du til det relevante rolleattributtet i en egnet beholder i HTML-koden, slik at skjermleserbrukere raskt kan navigere til denne delen av siden.

Visuelle stiler

Hvis du vil opprette produkter for brukere med ulike synshemminger, er det viktig å vurdere visuelle stiler som farge, kontrast og tekststørrelse. Dette innebærer å sikre tilstrekkelig kontrast mellom tekst og bakgrunnen, inkludert tekst på bilder, ikoner og knapper, for å forbedre lesbarheten for brukere med sensitivitet for lav kontrast eller fargeblindhet. Innhold i kontrast gir bedre lesbarhet under ulike forhold og er til nytte for alle brukere.

Standardtekst bør ha en kontrastforhold på minst 4,5:1 med bakgrunnen. For større tekst, interaktive komponenter og datavisualiseringer kreves et minimum kontrastforhold på 3:1 med bakgrunnsfargen. Statusindikatorer bør bruke semantiske farger, type og bilder effektivt for å formidle informasjon, slik at innhold kan oppfattes av alle brukere. Vurder å støtte en fargepalett med høy kontrast, som normaliserer fargepaletten for visning av innhold med et kontrastforhold på minst 7:1, noe som sørger for synlighet og klarhet. Hvis du bruker mørk modus, kan det føre til betydelig bedre lesbarhet og redusere øyebelastning.

Typografi

Typografi spiller en viktig rolle for å sikre lesbarhet for brukere med ulike behov. Teksten må være stor nok og ha tilstrekkelig plass til å imøtekomme ulike brukerkrav. Brukerne skal kunne justere innstillinger, for eksempel retning og zoomnivåer, med programmer som effektivt tilpasser innholdsoppsettet i henhold til dette. Velsett typografi bidrar ikke bare til lesbarhet, men legger også til rette for papirretning og navigasjon, noe som er til fordel for folk med nedsatt syn, kognitive funksjonshemninger, fargeblindhet og personer som er avhengige av skjermlesere.

Overskrifter bør inneholde stor eller fet tekst for å muliggjøre hurtigsøk og forståelse, spesielt for visuelt orienterte brukere. Overskriftselementer som er riktig brukt, sikrer effektiv navigasjon for alle brukere. Linjebredde og avstand påvirker lesbarheten betydelig: for eksempel vil svært brede linjer forstyrre synet, samtidig som for korte linjer forstyrrer rytmen og forståelsen. Ta sikte på en linjelengde på 50 til 70 tegn og en linjehøyde som er 120 % til 145 % av skriftstørrelsen, for å forbedre lesbarheten.

På mobilenheter bør teksten kunne endres opptil 200 % uten at det går på akkord med innhold eller funksjonalitet. Denne fleksibiliteten sikrer at brukere kan justere tekststørrelsen i henhold til preferanser eller behov, noe som forbedrer den generelle tilgjengeligheten. Brukere bør også ha muligheten til å zoome inn på grensesnittet, med sideoppsett som er utformet for å flyte på nytt innhold sømløst uten vannrett rulling for zoomenivåer opptil 400 %. Å sørge for at innholdet forblir tilgjengelig og lesbart, uavhengig av skjermstørrelsen på enheten, bidrar til en mer brukervennlig opplevelse for alle brukere.

Bilder, grafikk og bevegelse

Bilder og grafikk gjør innhold mer engasjerende og lettere å forstå for mange, og spesielt for personer med kognitive hemminger og læringshemninger. Selv om bilder kan fungere som indikatorer for personer med visuelle hemminger, kan omfattende bruk på nettsteder bidra til å orientere dem i innholdet, men utstrakt bruk på nettsteder kan skape større utfordringer for brukere.

Tilgjengelige anbefalte fremgangsmåter rundt medieinnhold er til fordel for punktskrift- og skjermleserbrukere, brukere som blar gjennom bilder deaktivert for å spare båndbredde og søkemotorer. De kan også hjelpe personer med nedsatt syn eller kognitive funksjonshemninger.

Bruk alternativ tekst til å gjøre visuelt innhold tilgjengelig. Alt-attributter beskriver visuelt innhold, for eksempel tekst som vises mens bilder lastes ned. Tilpass den alternative teksten i konteksten til bildet. Vær kortfattet og informativ (bruk fra 150 til 250 tegn). Husk å merke bilder som dupliserer tekstinnhold som dekorativt.

Samhandling

Samhandling er stedet der tilgjengeligheten er mest viktig. Hvis en bruker ikke kan navigere i et produkt uten problemer og fullføre oppgaver, er ikke produktet helt tilgjengelig. Effektiv samhandling med tastatur og berøring hjelper brukere av skjermlesere, punktskriftlesere og de som navigerer ved hjelp av et tastatur. Vanlige samhandlinger inkluderer:

  • Navigasjon: Brukere av hjelpeteknologi navigerer på en nettside ved å kategorisere, søke etter og, når det gjelder skjermlesere, bruke lister over overskrifter og koblinger. Sikre effektiv tastaturnavigasjon med landemerker, overskrifter og snarveier, f.eks. "hopp til hovedinnhold".

  • Hyperkoblinger: Brukervennlighet og tilgjengelighet for hyperkoblinger kan forbedres ved å gjøre dem klare, konsise og meningsfulle ut av konteksten. Bruk tilstrekkelig fargekontrast og skill visuelt fra annet innhold.

  • Tabeller: Å være avhengig av visuelle indikatorer alene er ikke tilstrekkelig til å opprette en tilgjengelig tabell. Strukturelt påslag gjør det mulig for hjelpeteknologi å gjenkjenne overskrifter og datacellene.

  • Skjemaer: Inndatafelter, som brukes til diverse typer nettsamhandling, øker ofte tilgjengelighetsinnvirkningen for personer som bruker skjermlesere eller tastatur.

  • Fokus: Fokussynlighet hjelper brukere som er avhengige av tastaturet for å navigere på siden, ved å angi det neste elementet de samhandler med, visuelt. Noen ganger må fokus flyttes programmatisk eller begrenset til et bestemt område for å optimalisere opplevelsen.

  • Tilstandsendringer: Angi tekst for eventuelle tilstandsendringer og kunngjøringer. Det er svært viktig å kommunisere feiltilstander og veilede brukere ved feiloppretting, f.eks. manglende informasjon eller systemproblem.

Tilrettelegging for Power Platform

Moderne kontroller er tilgjengelige for både lerretsapper og modelldrevne apper.

Lerretsapper støtter moderne tema, slik at du kan implementere en ensartet merkevare på tvers av alle kontrollene i appen. Modelldrevne apper støtter tema for å endre grunnleggende varemerkeelementer, for eksempel farger på apphoder, koblinger og noen skjemaikoner.

Komponenter som kan brukes på nytt, er tilgjengelige i flere skjemaer for ulike apptyper. Egendefinerte lerretskomponenter kan brukes i lerretsapper eller egendefinerte sider og bygges med lav kode. Power Apps component framework kan brukes til å implementere kodekomponenter for lerretsapper, modelldrevne apper og Power Pages.

Lerretsapper støtter tilgjengelige egenskaper som tilordnes spesifikke teknologiske funksjoner. Bruk verktøy i studioet til å validere tilgjengelighetssamsvar.

Selv om modelldrevne apper er tilgjengelige uten konfigurasjon, må du sørge for at alle nettressurser som legges til i appen, er tilgjengelige. Innebygde lerretsopplevelser, inkludert egendefinerte sider, må konfigureres manuelt for å oppfylle tilgjengelighetsstandarder.

Modelldrevne apper gir innebygde standard hurtigtaster for navigering i skjemaer og visninger.

Lerretsapper krever kodekomponenter for å aktivere hurtigtaster, som kan konfigureres ved hjelp av Creator Kits hurtigtaster.

Sjekkliste for opplevelsesoptimalisering

Sjekkliste for opplevelsesoptimalisering