Rekommendationer för att optimera användaruppfattningen och estetiken
Gäller dennma checklisterekommendation för välstrukturerad upplevelseoptimering för Power Platform:
| XO:07 | Tillämpa klassiska designprinciper på visuella element som färg, typografi och layout. Sträva efter en fokuserad, balanserad och intuitiv visuell hierarki som leder användarnas uppmärksamhet till viktiga element och åtgärder. |
|---|
Denna guide beskriver rekommendationerna för visuella designmönster som påverkar användarnas behov, som kan påverka nöjdhet och antagande av ett program. Visuella element fungerar som de grundläggande byggblocken som används för att skapa erfarenheter. Att tillämpa visuella principer som överensstämmer med hur människor naturligt uppfattar och bearbetar information ger strukturerade metoder för att välja och arrangera visuella element för att skapa en effektiv och tilltalande program.
Viktiga designstrategier
Omfattande forskning om människors uppfattning av visuell design avslöjar att användare inte betraktar visuella element isolerat. Istället uppfattar de dem i förhållande till andra element och det sammanhang där de förekommer. Dessa relationer påverkar användarnas funktion, ger uppmärksamhet åt specifika områden, framkallar känslor, ökar förståelsen och ökar varumärkesidentiteten. Ett noggrant urval av och placering av visuella element kan skapa engagerande, minnesvärda och effektiva användarupplevelser som associerar till den målgruppen.
Estetisk och användbarhetseffekt
Tillförlitlighets- och användbarhetseffekt syftar till tendensen att betrakta attraktiva produkter som mer användbara. Användarna får en första information om ett program inom cirka 50 millisekunder. Det första intrycket beror på olika faktorer, till exempel struktur, färger, symmetri, textkvantitet och teckensnitt. Ett positivt första intryck kan förbättra användartillfredsställelsen. Forskning visar att användare är mer förlåtande mot mindre användbarhetsproblem när de tycker att ett gränssnitt är visuellt tilltalande. Dessutom kan designkvaliteten användas som en indikator på trovärdighet.
Balans och vikt
Visuell balans är en känsla av jämvikt och harmoni i visuell perception. Det hjälper användare att bearbeta och organisera visuell information mer effektivt genom att minska kognitiv belastning. Väl avvägda sammansättningar fungerar oftast bättre och är lättare att förstå, vilket gör att användarna kan fokusera på ett effektivt sätt och enklare navigera i visuella element. Denna viktiga aspekt av visuell balans understryker vikten av att skapa tydlig kommunikation och förbättra användarupplevelsen.
En sammansättning är balanserad när alla element är för viktiga. Ofta kräver den matematiska placeringen en justering. En del av de element som påverkar den visuella vikten är storlek, färg, färgad och tomma utrymmen.
Storlek: Större element tenderar ha större visuell vikt än de mindre. För att uppnå balans kan större element motvägas genom att gruppera dem med mindre element eller justera deras placering i layouten
Färg: Ljusa eller intensiva färger kan dra till sig mer uppmärksamhet och verka tyngre än dämpade eller neutrala färger. Balansera färger innebär att de fördelas jämnt i gränssnittet eller att man använder komplementfärger för att skapa visuell harmoni.
Densitet: Elementens densitet hänvisar till hur tätt packade de är inom ett givet utrymme. Att balansera densitet innebär att se till att elementen fördelas jämnt i gränssnittet för att undvika överbeläggning eller glesa områden.
Tomt utrymme (även kallat "negativt utrymme"): Tomt utrymme hänvisar till de tomma områdena mellan element. Utrymme hjälper till att skapa visuellt andrum och kan balansera kompositionen genom att framhäva och betona vissa element
En balanserad sammansättning är en summa av visuella krafter mellan elementen.
Att balansera layout är en av de svåraste uppgifterna, eftersom den inte är lätt att mäta.
Color
Nyanser, toner, skuggor och färger kan förmedla betydelse, framkalla känslor och skapa estetiskt tilltalande visuella upplevelser. Färg spelar en viktig roll när det gäller att uppmärksamma användarna, skapa hierarki, utöka informationen och förbättra användbarheten. Det finns flera orsaker till varför ett användargränssnitt med en genomtänkt färgdesign kan påverka användarna på det sätt du vill:
Uppmärksamhet och uppfattning. Vissa färger är mer iögonfallande än andra, vilket gör att designer kan rikta fokus till specifika element. Färgkontrast kan förbättra läsbarheten och göra skillnad på olika komponenter, vilket underlättar snabb informationsbearbetning.
Emotionell respons. Färger har psykologiska associationer som väcker känslor och stämningar. Varma färger som rött och orange kan skapa en känsla av energi och spänning, medan kalla färger som blått och grönt kan framkalla lugn och ro. Du kan ta fram önskade svar som påverkar användarnas inställning till den avsedda upplevelsen.
Varumärkesidentitet. Konsekvent användning av färg i olika varumärkesmaterial hjälper till att skapa en stark visuell identitet och främjar varumärkesigenkänning. Användare associerar ofta specifika färger med särskilda varumärken och associerar sin erfarenhet med varumärkeslojalitet och förtroende.
Visuell hierarki. Färg kan användas för att upprätta visuell hierarki och ordna information. Tilldela olika färger till olika element utifrån deras betydelse eller kategori för att skapa en tydlig hierarki och underlätta navigering och förståelse.
Närhet
Objekt som placeras närmare varandra verkar mer relaterade. När du arrangerar element ska du se till att det finns en märkbar skillnad i avstånd mellan element som är nära relaterade och de som inte är det.
Denna gestaltprincip antyder att det rumsliga avståndet mellan visuella element påverkar hur de uppfattas och organiseras mentalt och understryker dess betydelse för att underlätta effektiv bearbetning och förståelse av visuella stimuli.
Gruppera relaterade element som har liknande funktioner eller som tillhör samma hierarkiska kategori. Knappar som utför liknande åtgärder eller alternativ i en listmeny bör exempelvis grupperas tätt tillsammans för att indikera deras association. I ett navigeringsfält föreslår menyalternativ som är tätt placerade en relaterad uppsättning alternativ, medan ett större mellanrum mellan menykategorierna särskiljer dem visuellt. Formulärobjekt som är relaterade ska grupperas, till exempel adressfält i ett avsnitt kallat "adress".
Förbättra läsbarheten i textgränssnitten genom att justera texten mellan stycken, meningar och ord. Närmare styckeavstånd indikerar en logisk koppling eller fortsättning av tanken, medan större avstånd betecknar en övergång eller ett avbrott i innehållet Med den här metoden får du en effektiv förståelse av textinformation.
Se till att det finns en tydlig skillnad mellan relaterade och orelaterade element för att undvika förvirring. En avståndsramp kan hjälpa till att konsekvent bestämma ett lämpligt avstånd som behövs baserat på elementstorleken.
Cirkeln till vänster är mer relaterad till triangeln än till den andra cirkeln.
Avståndet mellan stycken är mindre än avståndet mellan avsnitt.
Kontinuitet
Element som är arrangerade på en linje eller kurva uppfattas vara mer relaterade än element som inte finns på en linje eller kurva.
Ordna gränssnittselement som navigeringsmenyer eller steg i en process, längs en linje eller en kurva för att skapa sekvenser eller konfigurationer. Med den här layouten blir relationen mellan element lättare för användarna att förstå det logiska informationsflödet eller åtgärderna.
Placera relaterade element, t.ex. kryssrutor, alternativknappar eller objekt i en punktlista, längs en linje för att gruppera dem visuellt. Enligt denna ordning ska användarna ha gemensamma syften eller tillhöra samma kategori, vilket underlättar navigeringen och förståelsen. Om objekt med liknande utseende dras in ytterligare, korreleras objektets position med en lägre placering i den visuella hierarkin.
Använd linjer eller kurvor för att vägleda användarnas uppmärksamhet och skapa visuella vägar genom gränssnittet. En pil kan till exempel rikta användarens öga från en del av innehållet till en annan längs en viss väg, vilket indikerar en anslutning eller ett förlopp. Denna teknik hjälper användare att navigera i gränssnittet mer intuitivt och uppmuntrar till utforskning.
Ordna viktiga element i gränssnittet, t.ex. uppmaningsknappar eller viktig information, längs framträdande linjer för att dra till sig användarnas uppmärksamhet och skapa fokuspunkter. Till exempel visas Fluent MessageBar-mönstret ofta som ett framträdande balanserat meddelande över innehållsområdet, med meddelandet till vänster, vilket leder till uppmaningsknapparna till höger. Denna layoutstrategi framhäver dessa element och understryker hur viktiga de är, vilket ökar sannolikheten för interaktion.
Kurvorna/linjerna är starkare än färg för vår uppfattning.
Guider använder kontinuitet för att visa användarna att stegen är anslutna, detta utan att överväldiga dem med för mycket information.
Avslut
Den mänskliga hjärnan tenderar att se hela former med ett enda bekant mönster över enskilda objekt, även när viss information saknas.
Säkerställ visuell enhetlighet i designelement, till exempel former, färger och storlek, så att användarna kan lära sig de mönster de kan förvänta sig, även om de presenteras i olika sammanhang.
Använd enkla och välkända ikoner eller symboler som gör att användarna kan fylla i saknad information utifrån sina tidigare erfarenheter. Ett förstoringsglasikon associeras till exempel ofta med sökfunktionen, även utan medföljande text.
Presentera informationen gradvis användarna (kallas även progressivt avslöjande). Låt användarna fylla i de uppgifter som saknas när de interagerar med gränssnittet, detta så att de inte överväldigas med för mycket information och uppmuntrar till att utforska.
Skapa sammanhängande visuella mönster som uppmuntrar användarna att uppfatta objekt som hela entiteter. Om du grupperar relaterade element tillsammans kan du till exempel göra det möjligt för användarna att förstå sin relation och sina syften. Ordna element visuellt konsekvent med hjälp av gestaltprinciper för att indikera segmentering. Använd utrymme effektivt för att skapa en känsla av avslutning kring gränssnittselement.
Använd animationer och övergångar för att vägleda användarnas uppmärksamhet och förmedla förändringar i gränssnittstillstånd. Smidiga övergångar mellan olika tillstånd eller skärmar kan hjälpa användare att förstå relationen mellan element och fylla i saknad information. Flera moderna kontroller som finns i Power Apps visar i sig animationer.
En kvadrat identifieras före fyra ofullständiga cirklar.
Animation från ett kort till en modal hjälper till att stänga avståndet mellan de två och relatera dem till varandra.
Fokuspunkt
En fokuspunkt är ett designelement som omedelbart drar till sig uppmärksamhet från betraktaren. En design bör helst ha en sekvens med fokuspunkter, vanligen mellan en och tre, som är arrangerade för att vägleda användaren genom innehållet på ett medvetet sätt.
Utforma gränssnittet med en tydlig informationshierarki där det viktigaste innehållet eller åtgärderna framhävs som fokuspunkter. Använd visuella element som storlek, färg, kontrast och för att göra elementen synliga. Presentera information som börjar med de viktigaste fokuspunkterna. Med den här metoden kan användare snabbt identifiera det mest relevanta innehållet eller åtgärderna och guidar dem genom gränssnittet i en logisk sekvens.
Placera de primära åtgärdsknapparna tydligt i gränssnittet, vilket gör dem till de mest kraftfulla fokuspunkterna. Knapparna ska vara visuellt åtskilda från andra element och strategiskt placerade så att användarna kan leda dem till önskade åtgärder, till exempel göra ett köp eller registrera sig. Fluent designspråk rekommenderar att du använder varumärkets temafärg för dessa element.
Använd kontrasten effektivt när du skapar fokuspunkter. Element som sticker ut på grund av skillnader i färg, ljusstyrka, storlek eller typografi drar naturligt användarens uppmärksamhet till sig. Att kontrastera ljusare ytor med mörkare text eller varumärkeselement skapar en mer framträdande fokuspunkt
Använd tomt utrymme för att markera fokuspunkter i miljön genom att skapa visuell avgränsning från kringelementen. Denna teknik hjälper till att förebygga distraktioner och låter användare fokusera på det viktigaste innehållet eller handlingarna. Gränssnittselement med mer utrymme runtomkring dem drar mer fokus och tenderar att uppfattas som viktigare än element med mindre utrymme.
Upprätthåll konsekvens i användningen av fokuspunkter i hela gränssnittet för att ge en sammanhängande användarupplevelse. Genom att fastställa ett mönster av fokuspunkter, styr du användarnas förväntningar om den hierarki de behöver förstå för att navigera i gränssnittet och hjälper dem att hitta viktig information eller åtgärder på olika skärmar eller sidor.
Tänk på att det är viktigt att behålla balansen och inte överväldiga användare med för många konkurrerande fokuspunkter.
Användarens öga dras till den blå fyrkanten först.
Element såsom uppmaningar till handlig kan göras till fokuspunkter för att säkerställa att användarna noterar dem.
Likhet
Objekt som ser ut liknande fungerar ofta som en grupp eller ett mönster, vilket gör att användarna förväntar sig att de har samma funktioner.
Se till att gränssnittselement med liknande funktioner har konsekventa visuella format. Knappar som utför liknande eller lika vägda åtgärder bör till exempel ha samma färg, form och storlek, vilket gör att användarna får sin delade funktion. Se till att element som skiljer sig markant åt i funktionerna är tydligt åtskiljbara. Båda teknikerna förhindrar förvirring och frustration genom att etablera tydliga visuella element.
Använd enhetlig ikonografi och symboler för att representera liknande åtgärder eller funktioner i hela gränssnittet. Användarna associerar välkända ikoner med specifika funktioner utifrån deras tidigare erfarenheter. För att möta dessa förväntningar, använd universellt erkända ikonmetaforer. Säkerställ konsekvens i ikonstilen genom att använda ikoner från samma uppsättning, som ikonografibiblioteket i Fluent UI.
Använd färgkodning för att signalera likheter mellan element eller kategorier. Om du till exempel använder samma färg för att markera relaterade objekt i en lista, eller grupperar liknande datapunkter i ett diagram, förbättrar du den visuella enhetligheten och hjälper användare att se urskiljbara mönster.
Bevara enhetligheten i typografin och texten för element som har liknande syften. Konsekventa teckensnitt, storlek och formatering bidrar till ett enhetligt visuellt språk, vilket underlättar att användarna känner igen relaterat innehåll eller åtgärder.
Ge enhetlig interaktiv feedback för liknande åtgärder i gränssnittet. Oavsett om det är att hålla muspekaren över en knapp eller klicka på en länk bör användare förvänta sig enhetliga svar för att förstärka sambandet mellan visuell likhet och funktionell ekvivalens. Även om plattformen i sig ger de flesta interaktivitetsbeteenden (såsom färgvärden för hovring och tryckt läge), håll denna designprincip i åtanke när du skapar komponentelement från grunden eller manuellt implementerar feedbacktillstånd.
Se till att visuella likheter kompletteras med andra ledtrådar, t.ex. textetiketter eller ljudfeedback, för att tillgodose användare med olika behov och preferenser. Effektiv kommunikation av funktioner via flera olika delar förbättrar användbarhet och inkludering.
Elementen är grupperade efter form och färg, inte arrangemang (kolumner och rader).
Om ett kort på en instrumentpanel öppnas som en sidopanel kommer användarna att förvänta sig att alla öppnas på det sättet.
Figur och bild
Människor uppfattar instinktivt element som antingen en "figur" (det som sticker ut framtill) eller en "grund" (det som går tillbaka till bakgrunden). Därför påverkar sammanhanget uppfattningen, och det är avgörande att säkerställa tillräcklig avgränsning för att skilja viktiga element från bakgrunden. Tomt utrymme (negativt utrymme) ökar förståelsen av innehållet.
Använd kontrast i färg, storlek eller visuell stil för att skapa en tydlig relation mellan figur och grund. Viktiga element bör framträda tydligt mot bakgrunden, göra dem lätta att urskilja och vägleda användarnas uppmärksamhet på ett effektivt sätt. Ytor med ljusare färger och mer kontrasterande visuella element mot bakgrunden har en mer framträdande plats. Den här metoden gör att användarna kan identifiera viktig information. Ge tillräcklig kontrast mellan förgrunds- och bakgrundselement för att förbättra läsbarheten för användare med synnedsättning, förbättra deras förmåga att komma åt och förstå innehåll.
Att upprätthålla enhetlighet i placeringen och utformningen av gränssnittselement förstärker förhållandet mellan figur och grund och hjälper användare att förstå gränssnittsstrukturen. Konsekvent användning av designmönster och visuella tips säkerställer att användare snabbt kan urskilja mellan förgrund- och bakgrundselement på olika skärmar och i olika sammanhang. Inkonsekvenser i utformningen kan störa användarnas mentala modeller och hindra deras förmåga till effektiv navigering i gränssnittet.
Låg kontrast och minimalt negativt utrymme bidrar till att uppfatta de vita rektanglarna som en del av bakgrunden.
En sidobild måste smälta in med bakgrunden så att användarna kan fokusera på viktigt innehåll.
Gruppering
Element brukar uppfattas som grupper om de delar ett område med en tydligt definierad gräns.
Genom att gruppera relaterade element i visuella behållare, t.ex. lådor, kort eller komponenter, blir de lättare för användarna att använda dem som sammanhållna enheter. Med den här metoden ordnas innehåll och funktioner visuellt, vilket gör det enklare att identifiera och bearbeta information. Tydliga grupperingar hjälper till att undvika ett rörigt gränssnitt och minska förvirring eller ineffektivitet. Gruppering är också effektivt om närhet inte är ett alternativ. Ett meddelandefält som sträcker sig över flera kontroller över en skärm betraktas till exempel som en relaterad enhet på grund av dess ramar och bakgrundsfärg.
Att upprätthålla en enhetlig visuell stil för grupperade element underlättar anslutningen och förbättrar användbarheten. Att använda liknande färger, teckensnitt eller ikoner för dessa element understryker att de tillhör samma kategori eller funktion. Inkonsekvenser i visuell presentation kan försvaga den upplevda grupperingen och få användare att förbise relationer mellan element eller misstolka deras mening eller syfte.
Lägga till ramar runt ett element eller en grupp av element skapar separation från omgivande element.
Uppdelning av innehåll hjälper användarna att förstå att ämnet ändras.
Signaler jämfört med brus
Visuella element såsom rader, kontrast och avstånd används för att signalera till användare att något är viktigt. För många signaler, eller signaler som lyfter fram information som inte är viktig, blir emellertid snabbt brus.
Använd principer för fokuspunkt (t.ex. fet text, kontrasterande färger eller ikoner) för att signalera viktig information eller åtgärder till användarna. Använd till exempel en ljus färg för viktiga knappar eller rubriker för att få dem att sticka ut.
Var selektiv med vad du lyfter fram för att inte överväldiga användare med för mycket information. Endast signalelement som verkligen är viktiga för användarens uppgift eller mål. För många signaler kan skapa förvirring och göra det svårt för användare att prioritera. Identifiera den information som är viktig för användaren och framhäv den på ett lämpligt sätt. Vanligtvis rekommenderas det att endast ha en (1) åtgärdsknapp per sida. Markera obligatoriska fält i formulär för att vägleda användarens uppmärksamhet. Detta förhindrar användare från att distraheras av onödiga detaljer och hjälper dem att fokusera på det som är viktigt.
Se till att signalerna följer ett konsekvent visuellt språk i hela gränssnittet för att fungera som en riktlinje som hjälper användarna att känna igen mönster och förstå innebörden av olika signaler intuitivt.
Skräddarsy anpassade lösningar för specifika sammanhang och användares behov. Om användare exempelvis granskar ett gränssnitt som visar specifika uppgifter, markera tydligt kritiska statusar och åtgärdsobjekt för att fånga deras uppmärksamhet. Sammanhangsberoende signaler hjälper användare att snabbt hitta relevant information utan att bli störda av orelaterade detaljer.
Signaler guidar användarna genom innehållet och förmedlar det som är viktigt.
Visuellt brus skapar förvirring och har motsatt effekt gentemot signaler.
Underlätta Power Platform
I arbetsyteappar kan du använda layoutbehållare för att gruppera relaterade element. Idealt sett bör du placera alla sidelement i behållare och genom att justera mellanrumsegenskapen kan layoutbehållare även effektivt skilja de underordnade behållarna åt.
I modellbaserade appformulär kan avsnitt användas för att gruppera relaterade fält eller element.
Implementera enhetlighet i vanliga visuella element med återanvändbara anpassade komponenter.
I arbetsyteappar har funktionen moderna kontroller integrerad signalering i sin design. Särskilt kontrollerna knapp och aktivitetsikon har olika alternativ för sina stilegenskaper, vilket gör dem till effektiva signaler. Följ bästa praxis för varje komponent och tillämpa signalering selektivt för att garantera en optimal kommunikation.
Relaterad information
- Principer för gruppering
- Gestaltpsykologi
- Estetisk användbarhetseffekt
- Avståndsstegring för Fluent UI-designsystem