Dela via

Rekommendationer för att följa designstandarder

  • Artikel

Gäller dennma checklisterekommendation för välstrukturerad upplevelseoptimering för Power Platform:

XO:02 Följ etablerade standarder, konventioner och riktlinjer. Använd vanliga designmönster. Upprätthåll enhetlighet i designelement, termer och interaktioner i hela gränssnittet. Använd konsekventa mönster och standard för att guida användarna genom gränssnittet och skapa en sammanhängande användarupplevelse.

I den här guiden beskrivs rekommendationer för hur du fastställer designstandarder, konventioner och metodtips för att utveckla användargränssnitt som förbättrar användarupplevelsen och programmets övergripande framgång. Avvikelser från standarderna ska övervägas noggrant för att undvika att användarens upplevelse och programmets användbarhet påverkas negativt.

Viktiga designstrategier

Genom att följa designstandarder kan du minska beslutfattningsarbetet i designprocessen genom att identifiera de viktiga designaspekterna. Genom att förstå standarderna kan man specificera och effektivisera teamets möjligheter att skapa väldesignade användargränssnitt. Den här metoden resulterar i snabbare utvecklingscykel, förbättrad användbarhet och ökad användartillfredsställelse, vilket slutligen leder till ökad produktivitet och effektivitet för interna programvarusystem.

Förstå designprinciper

Omfattande forskning om human kognition bidrar till vår förståelse av visuell design och interaktion med digitala produkter. Den här kunskapen ligger till grund för många bästa praxis och standarder och utgör cirka 80 % av slutprodukten. Designprinciper kan överbrygga den återstående 20 % stora kreativa luckan som inte täcks av standarderna. Kännedom om den här kunskapen förbättrar utvecklingsteamets förståelse av designavväganden vid planering, vilket minskar beroendet av eller förbättrar samarbetet med designresurser.

Följa vanliga mönster och metaforer

Mönster och metaforer känns igen allmänt och förväntas i digitala produkter. Om de här mönstren införlivas där så är lämpligt kan det förenkla användarnas acceptans av produkten, vilket minska utbildnings- och supportkostnader och potentiellt minskar behovet av uppdateringar eller ny utformning. Dessa metoder sträcker sig över olika aspekter av design, inklusive layoutsammansättning, navigeringsstruktur, informationshierarki och interaktionsdesign.

Att hålla sig till standardikonmetaforer och semantiska färger är mycket viktigt. Ikoner bör använda etablerade visuella associationer för att snabbt och effektivt förmedla funktionaliteten för användarna. På samma sätt ger semantiska färger, som röd för fel och grön för framgång, omedelbar visuell feedback som överensstämmer med användarnas förväntningar och mentala modeller. Genom att följa de här konventionerna kan den kognitiva belastningen minskas och användbarheten ökas genom att ge en välbekant, trygg känsla.

Etablera ett designsystem

Ett designsystem är en samling återanvändbara funktionella byggblock som används för att bygga ett användargränssnitt. De är speciellt utformade för en organisation så att varje element ligger i linje med varumärkets etablerade standarder. De fyra huvudkomponenterna i ett designsystem är designtokens, komponenter, mönsterbibliotek och riktlinjer.

Designtokens är grundläggande visuella element i ett användargränssnitt, inklusive aspekter som exempelvis färg, typografi och avstånd. De uttrycks som variabler i ett standardformat och underlättar skapandet och underhållet av ett program med hjälp av designsystemet. Oavsett vilken design som används förenklas översättningen av designen till kod av designtokens. Genom att till exempel definiera en token med namnet "primary-color" med ett angivet värde kan utvecklare integrera designen sömlöst med hjälp av token istället för att bädda in ett specifikt värde direkt i koden. Designtokens kan anpassas till en organisations stilguide och hanteras centralt för att skapa lättanvända tokens.

En komponent representerar en diskret, modulär enhet i ett användargränssnitt. Den fungerar som ett visuellt element för att sammanställa appgränssnitt. Väldesignade komponenter har två viktiga egenskaper: återanvändbarhet och modularitet. De bör utformas så att de upprätthåller en visuell enhetlighet i olika program inom ett varumärkes ekosystem, vilket minskar behovet av att skapa designen på nytt varje gång. En enskild komponent ska sömlöst fungera i flera olika sammanhang.

Power Apps innehåller en omfattande uppsättning grundläggande universella komponenter såsom knappar och listrutor, och sammansatta komponenter som till exempel den moderna tabellen. Använd dessa kontroller i så stor utsträckning som möjligt för grundläggande behov och fundera sedan på att skapa sammansatta komponenter där det finns luckor för återkommande användargränssnittsmönster.

Sammansatta komponenter bör vara tillräckligt flexibla för att kunna användas som de är eller med mindre variationer (via parametrar) i olika appkontexter, utan att det krävs några ändringar. Några exempel på anpassade komponenter:

  • Rubrik eller sidfot med företagets varumärke
  • En resurssideskomponent i skärmstorlek där användarna kan ge feedback och få IT-hjälp
  • Universellt innehåll som copyrightmeddelanden eller länkar

Ett mönsterbibliotek erbjuder en uppsättning fördefinierade designmönster som utvecklare kan använda som utgångspunkt när de skapar användargränssnitt. Dessa mönster fungerar som standardiserade lösningar på vanliga designutmaningar. Det primära målet med ett mönsterbibliotek är att erbjuda en centraliserad samling väl utformade mönster, så att konsekventa och effektiva användargränssnitt kan skapas. Mönsterbibliotek gör det möjligt för utvecklare att använda ett visst mönster och följa etablerade riktlinjer för användning, vilket säkerställer enhetlighet och effektivitet i alla användargränssnittsutformningar.

Riktlinjer innehåller regler och bästa praxis för projektteam om hur man använder komponenter och visuella formatmallar på ett effektivt sätt. Till skillnad från formatriktlinjer, som fokuserar på estetik, definierar systemriktlinjer komponenternas funktionella beteende och användarnas interaktionsförväntningar. Om ett designsystem tillhandahåller en designtoken för färger bör riktlinjerna klargöra när dessa färger ska användas och hur utvecklare kan få åtkomst till motsvarande färg i Power Apps. För komponenter bör det finnas dokumentation om korrekt användning, indata- och utdataparametrar och tillståndsvariationer som kan förväntas av komponenten.

Centraliserade designsystem kan också vara värd för medieresurser som företagslogotyper och andra designresurser i en förvaringsplats för snabb utveckling.

Microsofts Fluent UI är ett exempel på ett vedertaget designsystem med öppen källkod. Det kan vara en effektiv referens för många designbeslut i Power Apps eftersom alla moderna kontroller använder komponenterna i Fluent (2)-designsystemet. Designsystem som Fluent UI är ett resultat av betydande forskning och utveckling för att skapa komponenter som med säkerhet uppfyller användarnas behov. De är också utformade på ett sätt som lätt kan användas överallt på olika digitala produkter och plattformar. Varje komponent har specifika riktlinjer för att säkerställa att programmet överensstämmer med den avsedda upplevelsen. Dra nytta av den forskningsbaserade kunskapen genom att läsa Fluent 2-riktlinjerna.

Delning för att undvika dubblettimplementering ökar inte bara produktionseffektiviteten utan säkerställer också att upplevelser förblir sammanhängande över tid. Bidrag till delade element håller upplevelserna fräscha och återspeglar expertis från hela organisationen. För tillfället är enhetlighet en utmaning eftersom komponenter, system, processer och kultur ofta inte delas, inte främjar enhetlighet och gör det svårare att ge bidrag.

Genomför designgranskningar

Åtkomst till resurser som är avsedda att vägleda designen av användarupplevelser är en förutsättning för att en app uppfyller fastställda UI/UX-standarder. Ett centraliserat team bör bekanta sig med de grundläggande designstandarderna och metodtipsen. Designer är vanligtvis kunniga om användarupplevelse, men projektansvariga kan också ha nytta av att lära sig dessa färdigheter för att kunna bidra effektivt till teamet.

Det effektivaste sättet att validera en upplevelse är att fysiskt gå igenom den. Men du kan också programmässigt läsa Power Apps-appmetadata. Metoder för att göra detta kan till exempel vara att kontrollera att rätt ämne används för appen, eller att kontrollera att tokenvärden för temat refereras till i äldre kontroller. Om vissa textelement till exempel måste använda vissa designtokens kan textkomponentens namn motsvara ett visst värde, och komponentens egenskaper bör då matcha en viss designtokenmappning.

Utvärdera antalet element som har en specifik komponenttyp och uppfyller vissa villkor, jämfört med dem som inte gör det. Tänk till exempel på textkomponenter som antingen är felaktigt namngivna eller korrekt namngivna, men inte följer riktlinjerna för egenskapsvärden. För att framtvinga responsiv layout kan vissa layoutbehållare kan vara mappade till specifika namnkonventioner och egenskapsvärden (till exempel LayoutWrap).

Förbättra användarbasen genom att uppfylla tillgänglighetsstandarder

Genom att införliva principer för inkluderande design säkerställer du att produkterna kan användas av en diversifierad målgrupp, inklusive individer med olika egenskaper. Inkluderande design vill identifiera potentiella hinder för användare med olika egenskaper för att skapa produkter hanterar utmaningar före den slutliga implementeringen. Det är viktigt att du förstår och diskuterar de funktionella aspekter som kan leda till interaktionshinder för att kunna undvika dem på ett effektivt sätt.

Funktion Purpose
Kognition Möjligheten att ta emot, tolka och bearbeta information beror på många faktorer. Dessa faktorer omfattar uppmärksamhet, medvetenhet, fokus, minne, bedömning, förståelse, problemlösning och slutledningsförmåga. En persons kognition kan påverka hur personen lär sig, oavsett om det gäller att lära sig använda en ny enhet eller lära sig ny information i ett klassrum. Många aspekter av kognition påverkar varandra.
Mobilitet Våra anatomi och muskler ger mobilitet, och de är beroende av signaler från hjärnan som kontrollerar musklerna. Mobilitet omfattar förståelse, finmotoriska färdigheter, koordinering, kontroll (frivilliga kontra ofrivilliga rörelser), hastighet, muskeltonus, uthållighet, hållning och tillfälliga skador. Mobiliteten beror på situationsförhållanden, tillfälliga, progressiva eller bestående förhållanden.
Synförmåga Vår möjlighet att se och förstå visuell information från vår miljö vägleder tänkande och rörelser. Synen påverkas både av fysiska faktorer och neurologiska faktorer. Synbegränsningar omfattar blindhet, dålig syn (synskadad), försämrad skärpa, synfältsförlust, färgblindhet, fotofobi (ljuskänslighet) och till och med skarpt solljus som påverkar textens läsbarhet på en skärm.
Hörsel Vår möjlighet att ta emot se och förstå ljud från vår miljö vägleder också tänkande och rörelser. Hörselnedsättningar kan variera stort och leda till olika hinder för användning av vardagsteknik. Tillfälliga exempel eller exempel på situationer är bullriga miljöer eller tysta zoner där ljuduppspelning inte är möjligt.
Röst, tal och kommunikation Vår möjlighet att kommunicera (verbalt eller icke-verbalt) är viktigt för att kunna ge uttryck för våra önskemål och behov, skapa relationer, förmedla information till andra och interagera med vår miljö.
Sinnesförnimmelse och uppfattning Sinnesförnimmelser är vår förmåga att identifierar förnimmelser som beröring eller vår kropps position. Uppfattning är hur hjärnan bearbetar och kommunicerar de här förnimmelserna. Begränsningar i sinnesförnimmelse inkluderar hörselsjukdomar, kronisk smärta, hudskador, känslighet (överkänslig och underkänslig) och proprioception.

Metoder för att komma åt innehåll

Användarna får åtkomst till digitalt innehåll på olika sätt. Förutom inmatning via mus och pekare kan de även använda tangentbords- och hjälpmedelstekniker såsom skärm- och punktskriftsläsare, förstoringsglas, textning, röstigenkänning och inställningar med hög kontrast, som alla anpassar upplevelsen efter användarens behov.

Hjälpmedelsverktyg

Vanliga hjälpmedel är följande:

  • Tangentbord: Personer med synnedsättning interagerar med webbplatser och appar med hjälp av skärmläsarprogram, som läser upp innehåll och kontroller högt med hjälp av text-till-tal-teknik, och använder tangentbordet som en alternativ inmatning till peka-och-klicka-interaktion med en vanlig datormus. Förutom att stöd för den grundläggande uppsättningen med tangentbordskommandon erbjuder skärmläsare en komplex uppsättning tangentbordskommandon. Med de här kommandona får användarna ytterligare kraftfulla verktyg som kan interagera med användargränssnittet på ett effektivare sätt.

  • Skärmläsare: Skärmläsare konverterar digital text till syntetiskt tal och punktskriftsutdata. De ger användarna möjlighet att höra innehåll och navigera med tangentbordet. Med den här tekniken kan personer med blindhet eller dålig syn använda informationsteknik med samma nivå av oberoende och sekretess som andra användare. Skärmläsare används också av personer med funktionshinder och inlärningssvårigheter, och av användare som föredrar ljudinnehåll framför text. Verktygen omfattar mer än webbanvändning, och hjälper till med navigering i dokument, kalkylblad och operativsystem.

  • Pekfunktion: Pekmål är till stor del avsedda för personer med långsam motorik som kan ha problem med att trycka på skärmen. Pekning har utformats för att hjälpa användare begränsa mängden felaktiga indata från oavsiktliga (eller oregistrerade) pekningar.

  • Dynamiskt innehåll: Ländmärkesroller (även ARIA-etiketter) erbjuder omedelbara fördelar för användare av skärmläsare. Det finns åtta roller som var och en representerar ett innehållsblock som vanligtvis förekommer på webbsidor. Om du vill använda dem lägger du till det relevanta rollattributet i en lämplig behållare i HTML-koden, vilket gör att användare av läsare snabbt kan navigera till det avsnittet på sidan.

Visuella format

Om du vill skapa produkter för användare med olika synfunktioner är det viktigt att tänka på visuella format som färg, kontrast och textstorlek. Det inbegriper att du ser till att det finns tillräcklig kontrast mellan text och bakgrund, inklusive text på bilder, ikoner och knappar, för att förbättra läsbarheten för användare med låg kontrastkänslighet eller färgblindhet. Väl kontrasterande innehåll förbättrar läsbarheten vid olika belysning, vilket gagnar alla användare.

I standardtext bör kontrastförhållandet vara minst 4.5:1 mot bakgrunden. För större text, interaktiva komponenter och datavisualiseringar krävs en minsta kontrastfaktor på 3:1 mot bakgrundsfärgen. Statusindikatorer bör använda semantiska färger, typer och bildspråk för att effektivt förmedla information, detta så att innehållet kan uppfattas av alla användare. Överväg att stödja en färgpalett med hög kontrast som normaliserar färgpaletten för att visa innehåll med ett kontrastförhållande på minst 7:1, detta för att säkerställa synlighet och tydlighet. Om du erbjuder ett mörkt läge kan det förbättra läsbarheten betydligt och minska belastningen på ögonen.

Typografi

Typografi spelar en viktig roll för att säkerställa läsbarhet för användare med olika behov. Texten måste vara tillräckligt stor och ha lämpligt avstånd för att passa till olika användarbehov. Användarna bör kunna justera inställningar som orientering och zoomningsnivåer, och programmen ska sömlöst anpassa innehållslayouten efter behov. Välinställd typografi underlättar både läsbarhet, sidorientering och navigering, vilket gagnar personer med dålig syn, förståndsmässiga funktionshinder och färgblindhet, samt personer som är beroende av skärmläsare.

Rubriker bör innehålla stor eller fet text för att möjliggöra snabb skanning och förståelse, särskilt för visuellt inriktade användare. Korrekt använda rubrikelement säkerställer effektiv navigering för alla användare. Radbredd och avstånd påverkar läsbarheten betydligt. Alltför breda rader belastar ögonen, och alltför korta rader stör rytmen och förståelsen. Sikta på en radlängd på 50 till 70 tecken och en radhöjd som är 120 till 145 procent av teckenstorleken för att förbättra läsbarheten.

På mobila enheter bör texten kunna storleksändras till 200 procent utan att äventyra innehåll eller funktioner. Tack vare den här flexibiliteten kan användarna anpassa textstorleken efter sina önskemål och behov, vilket ökar tillgängligheten som helhet. Användarna bör ha möjlighet att zooma in i gränssnittet, med sidlayouter som utformats för att flöda innehåll sömlöst utan att vågrät rullning för zoomningsnivåer på upp till 400 procent. Att se till att innehållet blir tillgängligt och läsbart, oavsett enhetens skärmstorlek, bidrar till en mer användarvänlig upplevelse för alla användare.

Bilder, grafik och rörelse

Bilder och grafik gör innehållet mer bekvämt och lättare att förstå, särskilt för personer med kognitiva funktionshinder och inlärningssvårigheter. Bilder kan fungera som visuella riktmärken för personer med synnedsättning och hjälpa dem orientera sig i innehållet, men omfattande användning på webbplatser kan samtidigt skapa stora hinder för användare.

Tillgänglighetsmetoder för medieinnehåll är bra för Braille- och skärmläsaranvändare, användare som bläddrar med bilder är inaktiverade för att spara bandbredd och användare som använder sökmotorers sökrobotar. De kan också hjälpa personer med hörselnedsättning och kognitiva funktionshinder.

Använd alternativtext för att göra visuellt innehåll tillgängligt. Alt-attribut beskriver visuellt innehåll, till exempel text som visas när bilder laddas ner. Anpassa Alt-text bildens kontext. Var koncis och information (använd mellan 150 och 250 tecken). Kom ihåg att markera bilder som duplicerar textinnehåll som dekorativt.

Kontakt

Interaktion är där tillgängligheten är viktigast. Om en användare inte kan navigera i en produkt på ett smidigt sätt och utföra uppgifter, är produkten inte helt tillgänglig. Effektiva tangentbords- och pekinteraktioner hjälper användare av skärmläsare och Braille-läsare och dem som navigerar med ett tangentbord. Vanliga interaktioner är:

  • Navigering: Användare av hjälpmedelsteknik navigerar på en webbsida genom att tabba, söka och, när det gäller skärmläsare, använda listor med rubriker och länkar. Säkerställ effektiv tangentbordsnavigering med landmärken, rubriker och genvägar som exempelvis "hoppa till huvudinnehåll".

  • Hyperlänkar: Användbarheten och tillgängligheten för hyperlänkar kan förbättras genom att göra dem tydliga, koncisa och meningsfulla i kontexten. Tillämpa tillräcklig färgkontrast och skilj visuellt från annat innehåll.

  • Tabeller: Att enbart förlita sig på visuella tips räcker inte för att skapa en tillgänglig tabell. Strukturella pålägg gör att hjälpmedelstekniken kan identifiera rubriker och dataceller.

  • Formulär: Indatafält som används för olika webbinteraktioner leder ofta till tillgänglighetsproblem för personer som använder skärmläsare eller tangentbord.

  • Fokus: Med fokussynlighet kan användare som är beroende av tangentbordet navigera på sidan genom att visuellt ange det element de interagerar med härnäst. Ibland måste fokus flyttas programmässigt eller begränsas till ett specifikt område för att optimera upplevelsen.

  • Tillståndsändringar: Ange text för alla tillståndsändringar och meddelanden. Det är mycket viktigt att kommunicera feltillstånd och vägleda användare genom felåterställning, t.ex. information som saknas eller systemproblem.

Underlätta Power Platform

Moderna kontroller finns för både arbetsyteappar och modellbaserade appar.

Arbetsyteappar har stöd moderna teman, vilket gör att du kan implementera en enhetlig varumärkespalett för alla kontroller i appen. Modellbaserade appar har stöd för teman ändra grundläggande anpassning av element som apprubrikers färg, länkar och vissa formulärikoner.

Återanvändbara lösningsanpassade komponenter är tillgängliga i flera former för olika apptyper. Anpassade arbetsytekomponenter kan användas i arbetsyteappar eller på anpassade sidor, och är skapade med lågkod. Power Apps component framework kan användas för att implementera kodkomponenter för arbetsyteappar, modellbaserade appar och Power Pages.

Arbetsyteappar har stöd för tillgängliga egenskaper som är mappade till specifika hjälpmedelsfunktioner. Använd verktyg i studion för att validera tillgänglighetsefterlevnaden.

Modellbaserade appar är tillgängliga utan konfiguration, vilket säkerställer att alla webbresurser som läggs till i appen är tillgängliga. Inbäddade arbetsyteupplevelser, även anpassade sidor, måste konfigureras manuellt så att de uppfyller tillgänglighetsstandarden.

Modellbaserade appar innehåller inbyggda standardtangentbordsgenvägar för navigering i formulär och vyer.

Arbetsyteappar kräver kodkomponenter för att aktivera tangentbordsgenvägar, vilka kan konfigureras med Creator Kits tangentbordsgenvägar.

Checklista för upplevelseoptimering

Checklista för upplevelseoptimering