Anbefalinger for optimalisering av brukeroppfatning og estetikk
Gjelder denne Power Platform Well-Architected Experience Optimization-sjekklisteanbefalingen:
| XO:07 | Bruk klassiske utformingsprinsipper på visuelle elementer, for eksempel fargevalg, typografi og oppsett. Etterstreb et fokusert, balansert og intuitivt visuelt hierarki som veileder brukernes oppmerksomhet til viktige elementer og handlinger. |
|---|
Denne veiledningen beskriver anbefalingene for universelle visuelle utformingsmønstre som påvirker brukeroppfatningen, noe som kan ha betydelig innvirkning på tilfredshet og bruk av en app. Visuelle elementer fungerer som grunnleggende byggeklosser som brukes til å skape erfaringer. Bruk av visuelle prinsipper som stemmer overens med hvordan mennesker naturlig oppfatter og prosesserer informasjon, gir strukturerte metoder som hjelper deg med å velge og ordne visuelle elementer for å skape et effektivt og tiltalende program.
Viktige utformingsstrategier
Omfattende undersøkelser om menneskelig oppfatning av visuell design avslører at brukere ikke ser visuelle elementer isolert. I stedet oppfatter de dem i forhold til andre elementer, og konteksten de vises i. Disse relasjonene har innflytelse på brukeroppfatningen, trekker oppmerksomheten mot bestemte områder, frembringer følelser, hjelper til forståelsen, forbedrer estitikken og styrker varemerkeidentiteten. Nøye utvelging og plassering av visuelle elementer kan føre til engasjerende, minneverdige og effektive brukeropplevelser som appellerer til målgruppen.
Estetikk-anvendelighet-effekt
Estetikk-anvendelighet-effekten refererer til tendensen til å vurdere attraktive produkter som mer anvendelige. Brukere danner seg en innledende mening om et program innen ca. 50 millisekunder. Dette førsteinntrykket påvirkes av ulike faktorer, inkludert struktur, farger, avstand, symmetri, tekstmengde og skrifter. Et positivt førsteinntrykk kan forbedre den generelle brukertilfredsheten. Undersøkelser viser at brukere er mer tilgivende ift. mindre bruksproblemer når de synes et grensesnitt er visuelt tiltalende. I tillegg kan designkvaliteten fungere som en indikator på troverdighet.
Balanse og vekt
Visuell balanse representerer en følelse av likevekt og harmoni i den visuelle oppfatningen. Det hjelper brukere med å behandle og organisere visuell informasjon mer effektivt ved å redusere kognitiv belastning. Balanserte komposisjoner blir generelt sett på som mer attraktive og lettere å forstå, noe som gjør det mulig for brukerne å fokusere oppmerksomhet effektivt og navigere i visuelle stimuli på en enklere måte. Dette kognitive området med visuell balanse understreker viktigheten av å tilrettelegge for klar kommunikasjon og å forbedre den totale brukeropplevelsen.
En komposisjon er balansert når alle elementene er i optisk likevekt. Ofte krever den matematiske plasseringen justering. Noen av elementene som påvirker den visuelle vekten, er størrelse, farge, tetthet og blanktegn.
Størrelse: Større elementer har en tendens til å ha større visuell vekt enn de mindre. For å oppnå balanse kan større elementer balanseres ved å gruppere dem med mindre elementer eller justere plasseringen i oppsettet.
Farge: Lyse eller insense farger kan trekke til seg mer oppmerksomhet og kan fremstå sterkere enn dempede eller nøytrale farger. Balansering av farger innebærer å fordele dem jevnt i hele grensesnittet eller bruke komplementære farger for å skape visuell harmoni.
Tetthet: Elementtettheten viser til hvor tette de er i et gitt område. Balansering av tetthet innebærer å sørge for at elementene fordeles jevnt i grensesnittet for å unngå for tette eller spredte områder.
Blanktegn: Også kjent som negativt mellomrom, refererer blanktegn til de tomme områdene mellom elementene. Mellomrom bidrar til å skape et visuelt pusterom og kan balansere komposisjonen ved å fremheve og understreke bestemte elementer.
En balansert komposisjon er summen av visuell styrke mellom elementer.
Balansering av oppsett en en vanskelig oppgave, fordi den ikke enkelt kan måles.
Color
Nyanser, fargetoner, sjatteringer og toner kan formidle betydning, fremkalle følelser og skape et estetisk inntrykk. Farge spiller en viktig rolle i å veilede brukerens oppmerksomhet, etablere hierarki, formidle informasjon og forbedre brukervennligheten. Det er flere årsaker til at gjennomtenkt fargeutforming i et brukergrensesnitt kan påvirke brukerne slik du vil:
Oppmerksomhet og oppfatning. Enkelte farger er mer iøynefallende enn andre, noe som gjør det mulig for utformere å rette seernes fokus mot bestemte elementer. Fargekontrast kan forbedre lesbarheten og skille mellom forskjellige komponenter, noe forenkler hurtig prosessering av informasjon.
Følelsesmessig respons. Fargene har psykologiske assosiasjoner som fremkaller følelser og sinnstilstander. Varme farger som rød og oransje kan skape en energisk og engasjerende følelse, mens kalde farger som blått og grønt kan fremkalle ro. Du kan fremkalle ønsket respons for å påvirke brukere i forhold til den tiltenkte opplevelsen.
Merkevareidentitet. Konsekvent bruk av farge på tvers av varemerkemateriell bidrar til å etablere en kraftig visuell identitet og fremmer merkegjenkjenning. Brukere knytter ofte bestemte farger til bestemte varemerker og knytter sine erfaringer til merkelojalitet og tillit.
Visuelt hierarki. Farge kan brukes til å etablere visuelt hierarki og organisere informasjon. Tilordne forskjellige farger til elementer basert på viktigheten eller kategorien for å opprette et klart hierarki og forenkle navigasjon og forståelse.
Nærhet
Elementer som ligger nærmere hverandre, virker mer relaterte. Når du ordner elementer, må du sørge for at det er en merkbar forskjell i forholdet mellom elementer som er nært beslektet, og de som ikke er det.
Dette gestaltprinsippene antyder at den romlige avstanden mellom visuelle elementer har innflytelse på hvordan de blir oppfattet og organisert mentalt, og understreker hvor viktig det er å legge til rette for effektiv behandling og forståelse av visuelle stimuli.
Grupper relaterte elementer sammen som fungerer på lignende måte, eller som tilhører samme hierarkiske kategori. Knapper som utfører lignende handlinger eller alternativer på en rullegardinmeny, bør for eksempel grupperes tett sammen for å indikere tilknytningen deres. I et navigasjonsfelt antyder menyelementer som står tett sammen, et relatert sett med alternativer, mens en større avstanden mellom menykategorier skiller dem visuelt. Skjemaelementer som er relatert, bør grupperes sammen, for eksempel adressefelter i en del kalt "adresse".
Forbedre lesbarheten i grensesnitt med mye tekst ved å justere avstanden mellom avsnitt, setninger og ord. Tettere avsnittsavstand indikerer en logisk sammenheng eller fortsettelse av tankegangen, mens større mellomrom angir en overgang eller en pause i innholdet. Denne teknikken fremmer effektiv forståelse av tekstinformasjon.
Sørg for at det skilles merkbart mellom relaterte og urelaterte elementer, for å unngå forvirring. En avstandsrampe kan hjelpe deg med å konsekvent bestemme ønsket avstand som kreves, basert på elementstørrelsen.
Sirkelen til venstre er mer relatert til treangelet enn til den andre sirkelen.
Avstanden mellom avsnitt er mindre enn avstanden mellom inndelingene.
Kontinuitet
Elementer som er ordnet på en linje eller en kurve, blir oppfattet som mer relaterte enn elementer som ikke er på en linje eller en kurve.
Ordne grensesnittelementer, for eksempel navigasjonsmenyer eller trinn i en prosess, langs en linje eller kurve for å antyde en sekvens eller fremdrift. Dette oppsettet hjelper brukere med å oppfatte relasjonen mellom elementer og forstå den logiske flyten av informasjon eller handlinger.
Plasser relaterte elementer, for eksempel avmerkingsbokser eller alternativer, eller elementer i en punktliste, langs en linje for å gruppere dem visuelt sammen. Denne ordningen antyder for brukere at disse elementene har et felles formål eller tilhører samme kategori, noe som tilrettelegger for enklere navigasjon og forståelse. Hvis elementer som ser like ut, rykkes ytterligere inn, er elementets posisjon korrelert med en lavere plassering i det visuelle hierarkiet.
Bruk linjer eller kurver til å veilede brukernes oppmerksomhet og opprette visuelle baner gjennom grensesnittet. En pil kan for eksempel henvise brukerens øye fra én del av innholdet til en annen langs en bestemt bane og angi en kobling eller fremdrift. Denne teknikken hjelper brukere med å navigere i grensesnittet mer intuitivt, og oppmuntrer til utforsking.
Ordne viktige grensesnittelementer, for eksempel knapper med oppfordringer til handling eller viktig informasjon, langs fremtredende linjer for å tiltrekke brukernes oppmerksomhet og opprette kontaktpunkter. Mønsteret for den flytende meldingslinjen vises for eksempel ofte som et fremtredende balansert budskap i innholdsområdet, og meldingen til venstre fører til handlingsknappene til høyre. Denne oppsettsstrategien fremhever disse elementene og understreker hvor viktig det er å øke sannsynligheten for samhandling.
Kurvene/linjene er sterkere enn farge i vår oppfatning.
Veivisere bruker kontinuitet til å vise brukerne at trinnene er koblet sammen, uten å overvelde dem med for mye informasjon.
Lukking
Den menneskelige hjernen har en tendens til å se fullstendige skjemaer, gjenkjenne ett enkelt (kjent) mønster fremfor enkeltobjekter, selv når noe informasjon mangler.
Påse visuell konsekvens i utformingselementer, for eksempel former, farger og størrelser for å hjelpe brukere med å lære mønstre de kan forvente, selv om de presenteres i forskjellige kontekster.
Bruk enkle og kjente ikoner eller symboler som gjør det mulig for brukere å fylle ut manglende informasjon basert på tidligere erfaringer. Et forstørrelsesglassikon er for eksempel vanligvis knyttet til søkefunksjonalitet, selv uten tilhørende tekst.
Presenter informasjon som er tilgjengelig for brukere, også kalt progressiv offentliggjøring. Tillat brukere å fylle ut manglende detaljer når de samhandler med grensesnittet, og dermed unngå å overvelde dem med for mye informasjon, og oppmuntre til utforsking.
Opprett sammenhengende visuelle mønstre som oppmuntrer brukere til å oppfatte objekter som hele enheter. Hvis du for eksempel grupperer relaterte elementer sammen, kan det hjelpe brukere å forstå relasjonen og formålet med dem. Ordne elementer visuelt konsekvent ved hjelp av gestaltprinsippene for å indikere segmentering. Bruk plassen effektivt til å skape en følelse av omslutting rundt grensesnittelementer.
Bruk animasjon og overføringer til å rettlede brukernes oppmerksomhet og formidle endringer i grensesnittet. Jevne overganger mellom ulike tilstander eller skjermer kan hjelpe brukere med å forstå relasjonen mellom elementer og fylle ut manglende informasjon. Flere moderne kontroller som er tilgjengelige i Power Apps, viser animasjoner.
En firkant gjenkjennes først før fire ufullstendige sirkler.
Animasjon fra et kort til en modal bidrar til å lukke avstanden mellom de to og relatere dem til hverandre.
Fokuspunkt
Et fokuspunkt er et designelement som umiddelbart tiltrekker seg brukerens oppmerksomhet. Ideelt sett bør en utforming ha en sekvens med fokuspunkter, vanligvis mellom ett og tre, ordnet for å veilede brukeren gjennom innholdet på en målrettet måte.
Utform grensesnittet med et klart informasjonshierarki, der det viktigste innholdet eller handlingene fremheves som fokuspunkter. Bruk visuelle indikatorer som størrelse, farge, kontrast og plassering for å få disse elementene til å skille seg ut. Presenter informasjon gradvis, og begynn med de viktigste fokuspunktene. Denne teknikken hjelper brukere med raskt å identifisere det mest relevante innholdet eller de mest relevante handlingene og veileder dem gjennom grensesnittet på en logisk måte.
Plasser de primære handlingsknappene tydelig i grensesnittet, noe som gjør dem til de sterkeste fokuspunktene. Disse knappene må være visuelt atskilt fra andre elementer og strategisk plassert for å veilede brukere mot ønskede handlinger, for eksempel kjøpe eller registrere seg. Flytende utformingsspråk anbefaler å bruke fargen på varemerketemaet for disse elementene.
Bruk kontrast effektivt til å opprette fokuspunkter. Elementer som skiller seg ut på grunn av forskjeller i farge, lysstyrke, størrelse eller typografi, tiltrekker seg brukerens oppmerksomhet på en naturlig måte. Kontrasterende lysere flater med mørkere tekst eller varemerkedeelementer skaper et mer fremtredende fokuspunkt.
Bruk blanktegn til å utheve fokuspunkter ved å opprette visuell separasjon fra omkringliggende elementer. Denne teknikken bidrar til å hindre distraksjoner og gjør det mulig for brukerne å fokusere på det viktigste innholdet eller handlingene. Elementer i brukergrensesnittet med mer fokus rundt seg, blir mer fokusert og oppfattes gjerne som viktigere enn elementer med mindre plass.
Oppretthold ensartethet i bruken av fokuspunkter i hele grensesnittet for å gi en sammenhengende brukeropplevelse. Ved å angi et mønster for fokuspunkter veileder du brukernes forventninger om hierarkiet de trenger for å forstå for å navigere i grensesnittet og hjelpe dem med å finne viktig informasjon eller handlinger på tvers av ulike skjermer eller sider.
Husk at det er viktig å holde balansen og ikke overvelde brukere med for mange konkurrerende fokuspunkter.
Øyet trekkes mot den blå firkanten først.
Elementer som oppfordringer til handling kan gjøres til fokuspunkter for å sikre at brukerne legger merke til dem.
Likhet
Objekter som ligner på hverandre, blir ofte oppfattet som en gruppe eller et mønster, og fører til at brukere forventer at de har samme funksjonalitet.
Kontroller at grensesnittelementer med lignende funksjoner har konsekvente visuelle stiler. Knapper som utfører lignende handlinger eller handlinger med lik vekting, må for eksempel ha samme farge, form og størrelse og gi brukerne samme fellesfunksjonalitet. Du må også sørge for at elementer som er betydelig forskjellige i funksjonaliteten, tydelig skilles. Ved å etablere klare visuelle signaler forhindrer begge teknikkene forvirring og frustrasjon.
Bruk konsekvent ikonografi og symboler til å representere lignende handlinger eller funksjoner i hele grensesnittet. Brukere har en tendens til å knytte kjente ikoner til bestemte funksjoner basert på tidligere erfaringer. Du kan oppfylle disse forventingene ved å bruke ikonmetaforer med universell gjenkjenning. Sørg for at ikonene blir ensartet, ved hjelp av ikoner fra samme sett, for eksempel Fluent UI-ikonografibiblioteket.
Bruk fargekoding til å angi likheter mellom elementer eller kategorier. Hvis du for eksempel bruker samme farge til å utheve relaterte elementer i en liste, eller gruppering av lignende datapunkter i et diagram, vil dette forbedre visuell sammenheng og gjør det enklere for brukerne å skille mønstre.
Oppretthold ensartethet i typografi og tekststiler for elementer med lignende formål. Konsekvente skriftstiler, -størrelser og -formatering bidrar til et enhetlig visuelt språk, noe som gjør det mulig for brukerne å gjenkjenne relatert innhold eller handlinger.
Gi konsekvent, interaktiv tilbakemelding for lignende handlinger på tvers av grensesnittet. Uavhengig av om pekeren beveger seg over en knapp eller det klikkes på en kobling må brukerne forvente ensartede svar for å understreke tilknytningen mellom visuell likhet og funksjonell ekvivalens. Selv om plattformen gir mest interaktivitetsvirkemåte, for eksempel fargeverdier ved peker over-bevegelser og nedtrykket tilstand, bør du ha dette utformingsprinsippet i bakhodet når du oppretter komponentelementer fra bunnen av eller implementerer tilbakemeldingstilstander manuelt.
Sørg for at visuelle likheter kompletteres av andre indikatorer, for eksempel tekstetiketter eller tilbakemeldinger, for å imøtekomme brukere med ulike behov og preferanser. Effektiv kommunikasjon av funksjonalitet gjennom flere sansemodaliteter forbedrer brukervennligheten og inklusiviteten.
Elementene er gruppert etter form og farge, ikke hvor de er plassert (kolonner og rader).
Hvis ett kort på et instrumentbord åpnes som et sidepanel, forventer brukerne at alle åpnes på den måten.
Figur og bakgrunn
Personer oppfatter instinktivt elementer som enten en "figur" (som skiller seg ut foran) eller en bakgrunn. Derfor påvirker konteksten oppfatningen, og det er avgjørende å sikre tilstrekkelig avgrensing for å skille viktige elementer fra bakgrunnen. Blanktegn (negativt mellomrom) øker forståelsen av innhold.
Bruk kontrast i farge, størrelse eller visuell stil for å etablere en relasjon mellom figur og bakgrunn. Viktige elementer bør skille seg ut mot bakgrunnen, noe som gjør dem enkle å skille mellom og veileder brukernes oppmerksomhet effektivt. Flater med lysere farger og mer kontraherende visuelle elementer mot bakgrunnen, fremheves mer. Denne metoden reduserer visuelt rot og hjelper brukere med å identifisere nøkkelinformasjon. Sørg for tilstrekkelig kontrast mellom forgrunns- og bakgrunnselementer for å forbedre lesbarheten for brukere ved hjelp av visuelle effekter, slik at de kan få tilgang til og forstå innhold.
Konsekvent plassering og utforming av grensesnittelementer understreker forholdet mellom figur-bakgrunn-relasjonen og hjelper brukere med å forstå grensesnittstrukturen. Konsekvent bruk av utformingsmønstre og visuelle indikatorer sikrer at brukerne raskt kan skjelne mellom forgrunns- og bakgrunnselementer på tvers av forskjellige skjermer og kontekster. Inkonsekvenser i utformingen kan forstyrre brukernes modellene og hindre deres mulighet til å navigere i grensesnittet effektivt.
Lav kontrast og minimal negativ plass bidrar til å oppfatte de hvite rektanglene som en del av bakgrunnen.
Et sidebilde må skjules i bakgrunnen, slik at brukerne kan fokusere på viktig innhold.
Gruppering
Elementer har en tendens til å bli oppfattet som grupper hvis de deler et område med en klart definert grense.
Gruppering av relaterte elementer i visuelle beholdere, for eksempel bokser, kort eller kantlinjer, hjelper brukere med å oppfatte dem som sammenhengende enheter. Denne metoden organiserer innhold og funksjonalitet visuelt, noe som gjør det enklere å identifisere og behandle informasjon. Klare grupperinger bidrar til å unngå rotete grensesnitt og redusere forvirring eller ineffektivitet. Gruppering er også effektivt når nærhet ikke er et alternativ, for eksempel en meldingslinje som strekker seg over flere kontroller på en skjerm, som oppfattes som en relatert enhet på grunn av rammene og bakgrunnsfargen.
Det å opprettholde en konsekvent visuell stil for grupperte elementer styrker tilkoblingen og forbedrer brukervennligheten. Bruk av lignende farger, skrifter eller ikoner for disse elementene understreker at de tilhører samme kategori eller funksjon. Inkonsekvenser i visuell presentasjon kan gjøre den oppfattede grupperingen mer inkonsistente og få brukere til å overse relasjoner mellom elementer eller feiltolke meningen eller formålet.
Hvis du legger til kantlinjer rundt et element eller en gruppe elementer, skilles det fra omkringliggende elementer.
Inndeling av innhold hjelper brukerne med å forstå at emnet bytter.
Signaler kontra støy
Visuelle indikatorer, for eksempel linjer, kontrast og avstand, brukes til å signalisere til brukerne at noe er viktig. For mange signaler eller signaler som fremhever informasjon som ikke er viktig, blir imidlertid raskt støy.
Bruk fokuspunktprinsipper, for eksempel fet tekst, kontrasterende farger eller ikoner, til å signalisere viktig informasjon eller handlinger til brukere. Bruk for eksempel en lys farge for viktige knapper eller overskrifter for å få dem til å skille seg ut.
Vær selektiv om hva du fremhever, for å unngå å overvelde brukerne med for mye informasjon. Bare fremhev elementer som virkelig er viktige for brukerens oppgave eller mål. For mange signaler kan skape forvirring og gjøre det vanskelig for brukere å prioritere. Identifiser informasjonen som er viktigst for brukeren, og legg vekt på den på riktig måte. Vanligvis anbefales det at du bare har én handlingsknapp per side. I skjemaer uthever du obligatoriske felt for å veilede brukerens oppmerksomhet. Dette hindrer at brukere går seg bort i unødvendige detaljer, og hjelper dem med å fokuser det som er viktig.
Sørg for at signaler følger et konsistent visuelt språk gjennom hele grensesnittet for å fungere som en retningslinje som hjelper brukerne å gjenkjenne mønstre og forstå betydningen av forskjellige signaler intuitivt.
Skreddersy signaler til den bestemte konteksten og brukerens behov. Hvis brukere for eksempel søker i et grensesnitt som presenterer bestemte oppgaver, bør du tydelig signalisere kritisk status og handlingselementer for å få oppmerksomheten deres. Kontekstavhengige signaler hjelper brukere med raskt å finne relevant informasjon uten å bli forstyrret av urelaterte detaljer.
Signaler hjelper brukerne gjennom innholdet og formidler det som er viktig.
Visuell støy introduserer forvirring og har motsatt effekt av signaler.
Tilrettelegging for Power Platform
I lerretsapper bruker du oppsettbeholdere til å gruppere relaterte elementer. Ideelt sett bør du organisere alle sideelementer i beholdere, og oppsettsbeholdere kan også effektivt skille underordnede beholdere ved å justere egenskapsegenskapen.
I modelldrevne appskjemaer kan inndelinger brukes til å gruppere relaterte felter eller elementer.
Implementer ensartethet i vanlige visuelle elementer ved hjelp av egendefinerte komponenter som kan brukes på nytt.
I lerretsapper har moderne kontroller integrert signalisering i utformingen. Spesifikt har knappe- og indikator-kontrollene alternativer i stilegenskapene, noe som gjør dem til effektive signaler. Overhold beste fremgangsmåter for hver komponent, og bruk signalisering selektivt for å sikre optimal kommunikasjon.
Relatert informasjon
- Grupperingsprinsippene
- Gestaltpsykologi
- Estetikk-anvendelighet-effekt
- Avstandsramper for Fluent ID-utformingssystem