Anbefalinger til optimering af brugernes opfattelse og æstetik
Gælder for denne anbefaling af kontrolliste til optimering af Power Platform-velstruktureret oplevelse:
| XO:07 | Anvend klassiske designprincipper på visuelle elementer som farveskemaer, typografi og layout. Forsøg at opnå et fokuseret, afbalanceret og intuitivt visuelt hierarki, der retter brugernes opmærksomhed mod vigtige elementer og handlinger. |
|---|
I denne vejledning beskrives anbefalingerne til universelle visuelle designmønstre, der påvirker brugernes opfattelse, og som i høj grad kan påvirke tilfredsheden med og indførelsen af et program. Visuelle elementer fungerer som de grundlæggende byggesten, der bruges til at skabe oplevelser. Ved at anvende visuelle principper, der er i overensstemmelse med den måde, mennesker naturligt opfatter og behandler oplysninger på, får du strukturerede metoder, der kan hjælpe dig med at vælge og arrangere visuelle elementer for at oprette et effektivt og attraktivt program.
Vigtigste designstrategier
Omfattende undersøgelser af den menneskelige opfattelse af visuelt design viser, at brugere ikke ser visuelle elementer isoleret. De opfatter dem i stedet i forhold til andre elementer og den kontekst, de vises i. Disse relationer har indflydelse på brugernes opfattelse og retter opmærksomhed mod bestemte områder, fremkalder følelser, skaber bedre forståelse, forbedrer æstetikken og styrker mærkeidentitet. Omhyggelig udvælgelse og arrangering af visuelle elementer kan skabe engagerende, mindeværdige og effektive brugeroplevelser, der giver genlyd hos målgruppen.
Æstetik-anvendelighedseffekt
Æstetik/anvendelighed-effekten henviser til tendensen til at opfatte attraktive produkter som mere brugbare. Brugerne danner sig den første mening om et program inden for ca. 50 millisekunder. Dette første indtryk påvirkes af forskellige faktorer, herunder struktur, farver, symmetri, tekstmængde og skrifttyper. Et positivt første indtryk kan øge den samlede brugertilfredshed. Undersøgelser viser, at brugerne er mere tilgivende over for mindre problemer med anvendelighed, når brugergrænsefladen er flot. Derudover kan designkvaliteten fungere som en indikator for troværdighed.
Balance og vægt
Visuel balance giver en følelse af ligevægt og harmony i den visuelle opfattelse. Den hjælper brugere med at behandle og organisere visuelle oplysninger mere effektivt ved at reducere kognitiv belastning. Afbalancerede opbygninger opfattes som regel som mere behagelige og nemmere at forstå, så brugerne kan fokusere deres opmærksomhed effektivt og nemmere navigere i visuelle elementer. Dette cognitive aspekt af visuel balance understreger dens betydning i at skabe klar kommunikation og forbedre den samlede brugeroplevelse.
En opbygning er afbalanceret, når alle elementerne er i optisk ligevægt. Ofte kræver den matematiske placering tilpasninger. Nogle af de elementer, der påvirker den visuelle vægt, er størrelse, farve, tæthed og hvidt rum.
Størrelse: Større elementer har tendens til at bære mere visuel vægt end mindre. Hvis du vil opnå balance, kan du give større elementer modvægt ved at gruppere dem med mindre elementer eller ved at justere deres placering i layoutet.
Farve: Lyse eller intense farver kan tiltrække mere opmærksomhed og virke tungere end dæmpede eller neutrale farver. Afbalancering af farver indebærer, at de distribueres jævnt i hele brugergrænsefladen, eller at der bruges komplementærfarver for at skabe visuel harmoni.
Tæthed: Elementernes tæthed henviser til, hvor tæt de er pakket på et givent område. Afbalancering af tæthed betyder, at elementer skal fordeles jævnt i brugergrænsefladen for at undgå overfyldte eller halvtomme områder.
Hvidt rum: Også kendt som negativt rum, henviser hvidt rum til de tomme områder mellem elementer. Afstand er med til at give et visuelt pusterum, og det kan skabe balance i opbygningen ved at fremhæve og understrege bestemte elementer.
En afbalanceret opbygning er summen af visuelle kræfter mellem elementerne.
Balancering af layout er en af de sværeste opgaver, fordi det ikke let kan måles.
Color
Nuancer, farvetoner og skygger kan udtrykke mening, fremkalde følelser eller skabe æstetik appel. Farver spiller en vigtig rolle i forbindelse med at styre brugerens opmærksomhed i en bestemt retning, skabe hierarki, viderebringe oplysninger og forbedre anvendelighed. Der er flere årsager til, at gennemtænkt farvedesign i en brugergrænseflade kan påvirke brugerne på den ønskede måde:
Opmærksomhed og opfattelse. Visse farver er mere iøjnefaldende end andre, og designere kan bruge dem til at styre brugernes fokus til bestemte elementer. Farvekontraster kan forbedre læsbarheden og skelne de forskellige komponenter fra hinanden, hvilket gør det muligt at behandle oplysninger hurtigt.
Emotionel reaktion. Farver har psykologiske associationer, som både fremkalder følelser og sindsstemninger. Varme farver som rød og orange kan skabe en følelse af energi og glæde, mens kolde farver som blå og grøn kan skabe ro og stilhed. Du kan fremkalde de ønskede reaktioner for at påvirke brugerne i retning af den ønskede oplevelse.
Mærkeidentitet. Ensartet brug af farver på tværs af mærkematerialer er med til at skabe en stærk visuel identitet og medfører mærkegenkendelse. Brugere knytter ofte bestemte farver til bestemte mærker og knytter deres oplevelse til mærkeloyalitet og -tillid.
Visuelt hierarki. Farver kan bruges til at skabe et visuelt hierarki og organisere oplysninger. Tildel forskellige farver til elementer baseret på deres vigtighed eller kategori for at skabe et klart hierarki og gøre det nemmere at navigere og forstå.
Nærhed
Elementer, der er placeret tættere på hinanden, virker mere relaterede. Når du arrangerer elementer, skal du sørge for, at der er en mærkbar forskel i afstanden mellem elementer, der er nært beslægtede, og dem, der ikke er.
Ud fra dette designprincip påvirker afstanden mellem visuelle elementer den måde, de opfattes og organiseres på mentalt, og det understreger, hvor vigtigt det er at muliggøre effektiv behandling og forståelse af visuelle elementer.
Gruppér relaterede elementer, hvis funktion ligner hinanden, eller som tilhører den samme hierarkiske kategori. Knapper, der udfører lignende handlinger, eller indstillinger på en rulleliste, skal f.eks. grupperes tæt sammen for at angive deres tilknytning. På en navigationslinje udgør menupunkter tæt på hinanden et sæt relaterede indstillinger, mens en større afstand mellem menukategorierne adskiller dem visuelt. Formularelementer, der er relateret, skal grupperes sammen, f.eks. adressefelter i en sektion, der kaldes "adresse".
Du kan forbedre læsbarheden på grænseflader med meget tekst ved at justere afstanden mellem afsnit, sætninger og ord. Afsnit, der er tættere på hinanden, indikerer en logisk forbindelse eller en fortsat tankerække, mens en større afstand angiver en overgang eller et skift i indholdet. Denne teknik fremmer en effektiv forståelse af tekstoplysninger.
Sørg for, at der er en mærkbar forskel i afstanden mellem relaterede og ikke-relaterede elementer for at forhindre forvirring. En afstandsrampe kan bruges til konsekvent at finde frem til den passende afstand, der skal bruges afhængigt af elementstørrelsen.
Cirklen i venstre side er mere relateret til trekanten end til den anden cirkel.
Afstand mellem afsnit er mindre end afstanden mellem sektioner.
Kontinuitet
Elementer, der er arrangeret på en linje eller en kurve, opfattes som mere relaterede end elementer, der ikke er på en linje eller en kurve.
Arranger elementer på brugergrænsefladen, f.eks. navigationsmenuer eller trin i en proces, langs en linje eller kurve for at indikere en sekvens eller et forløb. Dette layout hjælper brugere med at opfatte relationen mellem elementer og forstå den logiske strøm af oplysninger eller handlinger.
Placer relaterede elementer, f.eks. afkrydsningsfelt, alternativknapper eller en liste med punkttegn, langs en linje for at gruppere dem visuelt sammen. Denne organisering viser brugerne, at disse elementer har et fælles formål eller tilhører den samme kategori, hvilket gør det nemmere at navigere i og forstå dem. Hvis elementer, der ligner hinanden, indrykkes yderligere, korreleres elementets placering med en lavere placering i det visuelle hierarki.
Brug linjer eller kurver til at rette brugernes opmærksomhed i en bestemt retning, og opret visuelle stier gennem brugergrænsefladen. En pil kan f.eks. ændre brugerens opmærksomhed fra ét afsnit med indhold til et andet via en bestemt sti, hvilket angiver en forbindelse eller et forløb. Denne teknik hjælper brugere med at navigere mere intuitivt på brugergrænsefladen og opfordrer dem til at udforske.
Arranger vigtige elementer på brugergrænsefladen, f.eks. handlingsknapper eller vigtige oplysninger, på fremtrædende pladser for at få brugernes opmærksomhed og skabe fokuspunkter. Mønsteret for flydende meddelelseslinje vises f.eks. ofte som en fremtrædende afbalanceret meddelelse på tværs af hele indholdsområdet med meddelelsen til venstre, hvilket fører til handlingsknapperne til højre. I denne layoutstrategi fremhæves disse elementer, og der lægges vægt på deres betydning, hvilket øger sandsynligheden for interaktion.
Vi opfatter kurver/linjer stærkere end farver.
Guider bruger kontinuitet til at vise brugere, at trinnene er forbundet, uden at oversvømme dem med for mange oplysninger.
Lukning
Den menneskelige hjerne har tendens til at se komplette formularer, genkende et enkelt, velkendt mønster frem for de enkelte objekter, også selvom der mangler visse oplysninger.
Sørg for visuel ensartethed i designelementer, f.eks. former, farver og størrelser, for at hjælpe brugerne med at lære mønstre, de skal forvente, også selvom de vises i forskellige sammenhænge.
Brug simple og velkendte ikoner eller symboler, som giver brugerne mulighed for at udfylde manglende oplysninger på baggrund af deres tidligere erfaringer. Et ikon for forstørrelsesikoner knyttes f.eks. ofte til søgefunktionalitet, også uden tilhørende tekst.
Vis oplysninger gradvist til brugere – også kaldet progressiv afsløring. Tillad brugere at udfylde manglende detaljer, når de interagerer med grænsefladen, undgå at overvælde dem med for meget information og tilskynde til udforskning.
Opret sammenhængende visuelle mønstre, der opfordrer brugere til at opfatte objekter som hele objekter. Gruppering af relaterede elementer kan f.eks. hjælpe brugerne med at forstå deres relation og formål. Arranger elementer visuelt ved konsekvent at bruge designprincipper til at indikere segmentering. Brug afstand effektivt til at skabe en følelse af afslutning omkring elementer på brugergrænsefladen.
Brug animationer og overgange til at rette brugernes opmærksomhed i en bestemt retning og vise ændringer i tilstande for brugergrænseflader. Problemfri overgange mellem forskellige tilstande eller skærmbilleder kan hjælpe brugerne med at forstå relationen mellem elementer og udfylde manglende oplysninger. Flere moderne kontrolelementer, der findes i Power Apps, viser animationer.
En firkant genkendes først før fire ufuldstændige cirkler.
Animation fra et kort til en modal hjælper med at lukke kløften mellem de to og relatere dem til hinanden.
Omdrejningspunkt
Et omdrejningspunkt er et designelement, der straks tiltrækker sig brugerens opmærksomhed. Ideelt set bør et design have en sekvens af fokuspunkter, typisk mellem et og tre, arrangeret til at guide brugeren gennem indholdet på en bevidst måde.
Design grænsefladen med et tydeligt hierarki af oplysninger, hvor det vigtigste indhold eller de vigtigste handlinger er fremhævet som fokuspunkter. Brug visuelle effekter som størrelse, farve, kontrast og placering til at få disse elementer til at skille sig ud. Præsenterer oplysninger gradvist, og start med de vigtigste fokuspunkter. Denne teknik hjælper brugere med hurtigt at identificere det mest relevante indhold eller de mest relevante handlinger og hjælper dem gennem brugergrænsefladen i en logisk rækkefølge.
Placer primære handlingsknapper på en fremtrædende plads i grænsefladen, hvilket gør dem til de vigtigste fokuspunkter. Disse knapper skal være visuelt adskilte fra andre elementer og være strategisk placeret for at vejlede brugere i retning af ønskede handlinger, f.eks. foretage et køb eller tilmelde sig. Et flydende designsprog anbefaler, at du bruger mærketemafarven til disse elementer.
Brug kontrast effektivt til at oprette fokuspunkter. Elementer, der skiller sig ud på grund af forskelle i farve, lysstyrke, størrelse eller typografi, tiltrækker sig naturligt brugerens opmærksomhed. En kontrast mellem lysere overflader og mørkere farver eller brandede elementer skaber et mere fremtrædende fokuspunkt.
Brug blanktegn og negativ afstand til at fremhæve fokuspunkter ved at oprette visuel adskillelse fra de omgivende elementer. Denne teknik er med til at forhindre afbrydelser og giver brugerne mulighed for at fokusere på det vigtigste indhold eller de vigtigste handlinger. Elementer på brugergrænsefladen med større afstand omkring tiltrækker sig større fokus og har tendens til at blive opfattet som vigtigere end elementer med mindre plads.
Bevar ensartethed i brugen af fokuspunkter i hele brugergrænsefladen for at give en sammenhængende brugeroplevelse. Ved at angive et mønster med fokuspunkter vejleder du brugerne i deres forventninger til det hierarki, de skal forstå for at kunne navigere i brugergrænsefladen, og du hjælper dem med at finde vigtige oplysninger eller handlinger på tværs af forskellige skærmbilleder eller sider.
Vær opmærksom på, at det er vigtigt at bevare en balance, så brugerne ikke får for mange fokuspunkter at vælge mellem.
Øjet drages først mod den blå firkant.
Elementer, f.eks. handlingselementer, kan gøres til fokuspunkter for at sikre, at brugerne ser dem.
Lighed
Objekter, der vises på samme måde, opfattes ofte som en gruppe eller et mønster, hvilket får brugerne til at forvente, at de har samme funktionalitet.
Sørg for, at elementer på brugergrænsefladen med lignende funktioner har ensartede visuelle typografier. Knapper, der udfører lignende eller ligeligt vægtede handlinger, skal f.eks. have samme farve, form og størrelse, hvilket signalerer den delte funktionalitet til brugerne. Omvendt skal du sikre, at elementer, der adskiller sig betydeligt i funktionalitet, tydeligt kan kendes fra hinanden. Begge teknikker forhindrer forvirring og frustrationer ved at oprette tydelige visuelle effekter.
Brug ensartede ikonografier og symboler til at repræsentere lignende handlinger eller funktioner i hele brugergrænsefladen. Brugere har tendens til at associere velkendte ikoner med bestemte funktioner baseret på deres tidligere erfaringer. Hvis du vil leve op til disse forventninger, skal du bruge ikonmetaforer, der genkendes af alle. Sørg for, at typografien for ikoner er ensartet, ved at bruge ikoner fra det samme sæt, f.eks. Fluent UI-ikonbiblioteket.
Anvend farvekodning for at angive ligheder mellem elementer eller kategorier. Hvis du f.eks. bruger den samme farve til at fremhæve relaterede elementer på en liste eller grupperer lignende datapunkter i et diagram, øges den visuelle sammenhæng, og det hjælper brugerne med at se mønstre.
Anvend ensartet typografi og ensartede tekstformater for elementer, der har analoge formål. Ensartede typografier, størrelser og formateringer bidrager til et ensartet visuelt sprog, hvilket fremmer brugernes genkendelse af relateret indhold eller relaterede handlinger.
Giv ensartet interaktiv feedback til lignende handlinger på tværs af brugergrænsefladen. Uanset om brugerne holder musen hen over en knap eller klikker på et link, bør de forvente ensartede reaktioner for at forstærke tilknytningen mellem visuelle ligheder og ensartet funktionalitet. Selvom platformen er udviklet til at tilbyde den mest interaktive funktionsmåde, f.eks. farveværdier for pege- og trykketilstand, skal du huske på dette designprincip, når du opretter komponentelementer fra bunden eller manuelt implementerer feedbacktilstande.
Sørg for, at visuelle ligheder suppleres af andre effekter, f.eks. tekstetiketter eller lydfeedback, for at imødekomme brugere med forskellige behov og præferencer. Effektiv kommunikation med funktionalitet via flere sansemodaliteter øger anvendelighed og inklusivitet.
Elementerne grupperes efter form og farve, ikke i arrangementer (kolonner og rækker).
Hvis et kort på et dashboard åbnes som et sidepanel, forventer brugerne, at de alle åbnes på den måde.
Figur og område
Folk opfatter instinktivt elementer som enten en "figur" (det, der viser sig foran) eller et "område" (det, der findes i baggrunden). Konteksten påvirker derfor opfattelsen, og det er vigtigt at sikre en tilstrækkelig afgrænsning til at skelne mellem vigtige elementer og baggrunden. Blanktegn (negativ afstand) øger forståelsen af indhold.
Brug kontraster i farve, størrelse eller visuel typografi til at skabe en klar relation mellem figur og område. Vigtige elementer skal skille sig ud på en fremtrædende plads i forhold til baggrunden, så de er lette at genkende, og styre brugernes opmærksomhed på en effektiv måde. Grænseflader med lysere farver og visuelle elementer med større kontrast til baggrunden er mere fremtrædende. Denne tilgang øger den visuelle overskuelighed og hjælper brugerne med at identificere vigtige oplysninger. Skab tilstrækkelig kontrast mellem forgrunds- og baggrundselementer for at øge læsbarheden for brugere med nedsat syn, hvilket forbedrer deres mulighed for at få adgang til og forstå indhold.
Ved at bevare ensartethed i placeringen af og typografien for elementer på brugergrænsefladen forstærkes relationen mellem figur/område, og brugerne får en bedre forståelse af brugergrænsefladestrukturen. Ensartet brug af designmønstre og visuelle effekter sikrer, at brugerne hurtigt kan skelne mellem forgrundselementer og baggrundselementer på tværs af forskellige skærmbilleder og kontekster. Uregelmæssigheder i design kan forstyrre brugernes mentale model og forringe deres mulighed for at navigere effektivt i grænsefladen.
Lav kontrast og negativ afstand bidrager til, at de hvide firkanter omfattes som en del af baggrunden.
Et sidebillede skal vises i baggrunden, så brugere kan fokusere på vigtigt indhold.
Gruppering
Elementer har tendens til at blive opfattet som grupper, hvis de deler et område med en klart defineret grænse.
Hvis relaterede elementer grupperes i visuelle objektbeholdere, f.eks. felter, kort eller rammer, kan brugere nemmere opfatte dem som sammenhængende enheder. Med denne fremgangsmåde organiseres indhold og funktionalitet visuelt, hvilket gør det nemmere at identificere og behandle oplysninger. Med tydelige grupperinger kan du bedre undgå en rodet brugergrænseflade og reducere forvirring og ineffektivitet. Gruppering er også effektiv, når der tæthed ikke er en mulighed. En meddelelseslinje, der strækker sig over flere kontrolelementer på tværs af en skærm, opfattes f.eks. som en relateret enhed på grund af rammerne og baggrundsfarven.
Ved at bevare en ensartet visuel typografi for grupperede elementer styrkes deres relation, og anvendelighed forbedres. Hvis du bruger lignende farver, skrifttyper eller ikoner til disse elementer, understreges det, at de tilhører den samme kategori eller funktion. Inkonsistens i den visuelle præsentation kan svække den opfattede gruppering og få brugerne til at overse relationer mellem elementer eller misforstå deres betydning eller formål.
Tilføjelse af rammer rundt om et element eller en gruppe af elementer kan separere dem fra omgivende elementer.
Opdeling af indhold i afsnit hjælper brugere med at forstå, at emnet skifter.
Signaler vs. støj
Visuelle effekter som linjer, kontrast og afstand bruges til at fortælle brugerne, at noget er vigtigt. Men for mange signaler eller signaler, der fremhæver oplysninger, som ikke er vigtige, bliver hurtigt til støj.
Brug fokuspunktsprincipper som fed tekst, kontrastfarver eller ikoner til at signalere vigtige oplysninger eller handlinger til brugerne. Brug f.eks. en lys farve til vigtige knapper eller overskrifter for at få dem til at skille sig ud.
Vær selektiv med, hvad du fremhæver, for at undgå at oversvømme brugere med for mange oplysninger. Signaler kun elementer, der virkelig er vigtige for brugerens opgave eller mål. For mange signaler kan skabe forvirring og gøre det svært for brugerne at prioritere. Identificer de oplysninger, der er vigtigst for brugeren, og fremhæv dem på passende vis. Det anbefales som regel kun at have én handlingsknap pr. side. I formularer kan du fremhæve obligatoriske felter for at tiltrække brugerens opmærksomhed. Derved forhindrer du brugere i at fare vild i unødvendige detaljer og hjælper dem med at fokusere på det, der er vigtigt.
Sørg for, at signaler følger et ensartet visuelt sprog i hele grænsefladen for at fungere som en retningslinje, der hjælper brugerne med at genkende mønstre og forstå betydningen af forskellige signaler intuitivt.
Skræddersy signaler efter den specifikke kontekst og brugerens behov. Hvis brugere f.eks. skal have et hurtigt overblik over en brugergrænseflade, der præsenterer bestemte opgaver, skal vigtige statusser og handlingsrettede elementer signaleres tydeligt for at tiltrække brugernes opmærksomhed. Kontekstafhængige signaler hjælper brugerne med hurtigt at finde relevante oplysninger uden at blive forstyrret af ikke-relaterede detaljer.
Signaler hjælper med at vejlede brugere gennem indhold og vise det, der er vigtigt.
Visuel støj skaber forvirring og har den modsatte virkning af signaler.
Power Platform-processtyring
I lærredapps kan du bruge layoutobjektbeholdere til at gruppere relaterede elementer. Det er en god ide at organisere alle sideelementer i objektbeholdere, og layoutobjektbeholdere kan også adskille underordnede objektbeholdere på en effektiv måde ved at justere afstanden.
I modelbaserede appformularer kan sektioner bruges til at gruppere relaterede felter eller elementer.
Implementer ensartethed i almindelige visuelle elementer med brugerdefinerede komponenter, der kan genbruges.
I lærredapps indeholder moderne kontrolelementer integrerede signaler som en del af deres design. Især tilbyder kontrolelementer af typerne knap og badge indstillinger i deres egenskaber for typografi, hvilket gør dem effektive signaler. Overhold bedste praksis for de enkelte komponenter, og anvend signaler selektivt for at sikre optimal kommunikation.
Relaterede oplysninger
- Principper for gruppering
- Gestaltpsykologi
- Æstetik-anvendelighedseffekt
- Afstandsrampe for Fluent UI-designsystem