Aanbevelingen voor het optimaliseren van gebruikersperceptie en esthetiek
Van toepassing op deze goed ontworpen Power Platform-aanbevelingenchecklist voor belevingsoptimalisatie:
| XO:07 | Pas klassieke ontwerpprincipes toe op visuele elementen zoals kleurenschema's, typografie en lay-out. Streef naar een gerichte, evenwichtige en intuïtieve visuele hiërarchie die de aandacht van gebruikers naar belangrijke elementen en acties leidt. |
|---|
Deze gids beschrijft de aanbevelingen voor universele visuele ontwerppatronen die de perceptie van de gebruiker beïnvloeden, wat de tevredenheid en acceptatie van een toepassing aanzienlijk kan beïnvloeden. Visuele elementen dienen als de fundamentele bouwstenen die worden gebruikt om ervaringen te creëren. Het toepassen van visuele principes die aansluiten bij de manier waarop mensen op natuurlijke wijze informatie waarnemen en verwerken, biedt gestructureerde methoden om visuele elementen te helpen selecteren en rangschikken om een effectieve en aantrekkelijke toepassing te creëren.
Belangrijke ontwerpstrategieën
Uit uitgebreid onderzoek naar de menselijke perceptie van visueel ontwerp blijkt dat gebruikers visuele elementen niet geïsoleerd bekijken. In plaats daarvan nemen ze deze waar in relatie tot andere elementen en de context waarin ze voorkomen. Deze relaties beïnvloeden de perceptie van de gebruiker, vestigen de aandacht op specifieke gebieden, wekken emoties op, bevorderen het begrip, verbeteren de esthetiek en versterken de merkidentiteit. Zorgvuldige selectie en rangschikking van visuele elementen kan boeiende, gedenkwaardige en effectieve gebruikerservaringen creëren die resoneren met de doelgroep.
Esthetisch-bruikbaarheidseffect
Het esthetisch-bruikbaarheidseffect verwijst naar de neiging om aantrekkelijke producten als bruikbaarder te beschouwen. Gebruikers vormen binnen ongeveer 50 milliseconden een eerste oordeel over een toepassing. Deze eerste indruk wordt beïnvloed door verschillende factoren, waaronder structuur, kleuren, spatiëring, symmetrie, teksthoeveelheid en lettertypen. Een positieve eerste indruk kan de algehele gebruikerstevredenheid vergroten. Onderzoek toont aan dat gebruikers meer vergevingsgezind zijn als het gaat om kleine gebruiksproblemen als ze een interface visueel aantrekkelijk vinden. Bovendien kan de ontwerpkwaliteit dienen als een indicator voor geloofwaardigheid.
Balans en gewicht
Visuele balans vertegenwoordigt een gevoel van evenwicht en harmonie in visuele perceptie. Het helpt gebruikers visuele informatie efficiënter te verwerken en te organiseren door de cognitieve belasting te verminderen. Evenwichtige composities worden over het algemeen als prettiger en gemakkelijker te begrijpen ervaren, waardoor gebruikers de aandacht effectief kunnen concentreren en met groter gemak door visuele stimuli kunnen navigeren. Dit cognitieve aspect van visuele balans onderstreept het belang ervan bij het faciliteren van duidelijke communicatie en het verbeteren van de algehele gebruikerservaring.
Een compositie is in balans als alle elementen in optisch evenwicht zijn. Vaak vereist de wiskundige plaatsing aanpassing. Elementen die het visuele gewicht beïnvloeden zijn onder andere grootte, kleur, dichtheid en witruimte.
Grootte: grotere elementen hebben doorgaans meer visueel gewicht dan kleinere. Om balans te bereiken, kunnen grotere elementen worden gecompenseerd door ze te groeperen met kleinere elementen of door hun plaatsing binnen de indeling aan te passen.
Kleur: Felle of intense kleuren kunnen meer aandacht trekken en zwaarder lijken dan gedempte of neutrale kleuren. Het uitbalanceren van kleuren houdt in dat ze gelijkmatig over de interface worden verdeeld of dat complementaire kleuren worden gebruikt om visuele harmonie te creëren.
Dichtheid: de dichtheid van elementen verwijst naar hoe dicht ze zich binnen een bepaalde ruimte bevinden. Bij het balanceren van de dichtheid wordt ervoor gezorgd dat elementen gelijkmatig over de interface zijn verdeeld, zodat overbevolking of schaarse gebieden worden voorkomen.
Witruimte: Witruimte, ook wel negatieve ruimte genoemd, verwijst naar de lege ruimtes tussen elementen. Witruimte helpt visuele ademruimte te creëren en kan de compositie in balans brengen door bepaalde elementen te markeren en te benadrukken.
Een evenwichtige samenstelling is een som van visuele krachten tussen de elementen
Het in evenwicht brengen van de indeling is een van de moeilijkste taken, omdat het niet gemakkelijk te meten is.
Color
Kleurtinten, tinten en tonen kunnen betekenis overbrengen, emoties oproepen en esthetische aantrekkingskracht creëren. Kleur speelt een cruciale rol bij het vestigen van de aandacht van gebruikers op iets, het vaststellen van hiërarchie, het overbrengen van informatie en het verbeteren van de bruikbaarheid. Er zijn verschillende redenen waarom een doordacht kleurenontwerp in een gebruikersinterface gebruikers kan beïnvloeden zoals u dat wilt:
Aandacht en perceptie. Bepaalde kleuren zijn opvallender dan andere, waardoor ontwerpers de aandacht van de kijker op specifieke elementen kunnen richten. Kleurcontrast kan de leesbaarheid verbeteren en onderscheid maken tussen verschillende onderdelen, waardoor een snelle verwerking van informatie wordt vergemakkelijkt.
Emotionele respons. Kleuren hebben psychologische associaties die emoties en stemmingen oproepen. Warme kleuren zoals rood en oranje kunnen een gevoel van energie en opwinding creëren, terwijl koele kleuren zoals blauw en groen kalmte en rust kunnen oproepen. U kunt gewenste reacties uitlokken om gebruikers te beïnvloeden in de richting van de beoogde ervaring.
Merkidentiteit. Consistent kleurgebruik in merkmaterialen draagt bij aan het creëren van een sterke visuele identiteit en bevordert de merkherkenning. Gebruikers associëren specifieke kleuren vaak met bepaalde merken en associëren hun ervaring met merkloyaliteit en vertrouwen.
Visuele hiërarchie. Kleur kan worden gebruikt om visuele hiërarchie vast te stellen en informatie te ordenen. Wijs verschillende kleuren toe aan elementen op basis van hun belang of categorie. Zo creëert u een duidelijke hiërarchie en vergemakkelijkt u de navigatie en het begrip.
Nabijheid
Items die dichter bij elkaar zijn geplaatst, lijken meer verwant. Zorg er bij het rangschikken van elementen voor dat er een duidelijk verschil is in de ruimte tussen elementen die nauw verwant zijn en elementen die dat niet zijn.
Dit Gestaltprincipe suggereert dat de ruimtelijke afstand tussen visuele elementen van invloed is op hoe ze mentaal worden waargenomen en geordend, en onderstreept het belang ervan bij het faciliteren van een efficiënte verwerking en begrip van visuele stimuli.
Groepeer gerelateerde elementen die functioneel vergelijkbaar zijn of tot dezelfde hiërarchische categorie behoren. Knoppen die soortgelijke acties of opties binnen een vervolgkeuzemenu uitvoeren, moeten bijvoorbeeld dicht bij elkaar worden gegroepeerd om hun associatie aan te geven. In een navigatiebalk suggereren menu-items die dicht bij elkaar staan een gerelateerde set opties, terwijl een grotere afstand tussen menucategorieën ze visueel onderscheidt. Formulieronderdelen die met elkaar verbonden zijn, moeten worden gegroepeerd, zoals adresvelden in een sectie met de naam 'adres'.
Verbeter de leesbaarheid in interfaces met veel tekst door de afstand tussen alinea's, zinnen en woorden aan te passen. Een kleinere alinea-afstand duidt op een logische verbinding of voortzetting van de gedachte, terwijl een grotere afstand een overgang of een breuk in de inhoud aangeeft. Deze methode bevordert een efficiënt begrip van tekstuele informatie.
Zorg ervoor dat er een merkbaar onderscheid is in de afstand tussen gerelateerde en niet-gerelateerde elementen om verwarring te voorkomen. Een afstandshelling kan helpen bij het consistent bepalen van de juiste afstand die nodig is op basis van de elementgrootte.
De cirkel aan de linkerkant heeft meer te maken met de driehoek dan met de andere cirkel.
De ruimte tussen alinea's is kleiner dan de ruimte tussen secties.
Continuïteit
Elementen die op een lijn of curve zijn gerangschikt, worden als meer verwant ervaren dan elementen die niet op een lijn of curve liggen.
Rangschik interface-elementen, zoals navigatiemenu's of stappen in een proces, langs een lijn of curve om een reeks of voortgang te impliceren. Deze indeling helpt gebruikers de relatie tussen elementen waar te nemen en de logische stroom van informatie of acties te begrijpen.
Plaats gerelateerde elementen, zoals selectievakjes of keuzerondjes, of items in een lijst met opsommingstekens, langs een lijn om ze visueel te groeperen. Deze rangschikking suggereert voor gebruikers dat deze elementen een gemeenschappelijk doel hebben of tot dezelfde categorie behoren, waardoor navigatie en begrip eenvoudiger wordt. Als op elkaar lijkende items verder naar binnen worden ingesprongen, wordt de positie van het item gecorreleerd met een lagere plaatsing in de visuele hiërarchie.
Gebruik lijnen of curven om de aandacht van gebruikers te trekken en visuele paden door de interface te creëren. Een pijl kan de blik van de gebruiker bijvoorbeeld langs een bepaald pad van de ene inhoudssectie naar de andere leiden, wat een verband of voortgang aangeeft. Deze methode helpt gebruikers intuïtiever door de interface te navigeren en stimuleert verkenning.
Rangschik belangrijke interface-elementen, zoals call-to-action-knoppen of belangrijke informatie, langs opvallende lijnen om de aandacht van gebruikers te trekken en aandachtspunten te creëren. Het Fluent Messagebar-patroon wordt bijvoorbeeld vaak weergegeven als een prominent, evenwichtig bericht in het inhoudsgebied, waarbij het bericht aan de linkerkant staat en naar de call-to-action-knoppen aan de rechterkant leidt. Deze indelingsstrategie markeert deze elementen en benadrukt hun betekenis, waardoor de kans op interactie groter wordt.
De curven/lijnen zijn sterker dan kleur voor onze waarneming.
Wizards gebruiken continuïteit om gebruikers te laten zien dat de stappen met elkaar verbonden zijn, zonder hen te overweldigen met te veel informatie.
Sluiting
Het menselijk brein heeft de neiging om complete vormen te zien, waarbij een enkel vertrouwd patroon wordt herkend, boven individuele objecten, zelfs als er informatie ontbreekt.
Zorg voor visuele consistentie in ontwerpelementen, zoals vormen, kleuren en grootten, zodat gebruikers patronen kunnen leren die ze mogen verwachten, zelfs als ze in verschillende contexten worden gepresenteerd.
Gebruik eenvoudige en bekende pictogrammen of symbolen waarmee gebruikers ontbrekende informatie kunnen invullen op basis van hun eerdere ervaringen. Een vergrootglaspictogram wordt bijvoorbeeld vaak geassocieerd met zoekfunctionaliteit, zelfs zonder begeleidende tekst.
Presenteer informatie geleidelijk aan gebruikers, ook wel progressieve openbaarmaking genoemd. Geef gebruikers de mogelijkheid om ontbrekende details in te vullen tijdens hun interactie met de interface, zodat ze niet worden overspoeld met te veel informatie en verkenning wordt gestimuleerd.
Creëer samenhangende visuele patronen die gebruikers aanmoedigen objecten als hele entiteiten waar te nemen. Het groeperen van gerelateerde elementen kan gebruikers bijvoorbeeld helpen hun relatie en doel te begrijpen. Orden elementen visueel consistent met behulp van de Gestaltprincipes om segmentatie aan te geven. Gebruik de ruimte effectief om een gevoel van beslotenheid rond interface-elementen te creëren.
Gebruik animaties en overgangen om de aandacht van gebruikers te leiden en veranderingen in interfacestatussen over te brengen. Vloeiende overgangen tussen verschillende statussen of schermen kunnen gebruikers helpen de relatie tussen elementen te begrijpen en ontbrekende informatie in te vullen. Met meerdere moderne besturingselementen beschikbaar in Power Apps worden inherent animaties weergegeven.
Een vierkant wordt herkend voordat er vier onvolledige cirkels zijn.
Animatie van een kaart naar een modaal helpt de kloof tussen de twee te dichten en ze met elkaar in verband te brengen.
Brandpunt
Een brandpunt is een ontwerpelement dat onmiddellijk de aandacht van de kijker trekt. Idealiter heeft een ontwerp een reeks brandpunten, meestal tussen één en drie, die zijn gerangschikt om de gebruiker doelbewust door de inhoud te leiden.
Ontwerp de interface met een duidelijke hiërarchie van informatie, waarbij de belangrijkste inhoud of acties als brandpunten worden benadrukt. Gebruik visuele signalen zoals grootte, kleur, contrast en positionering om deze elementen te laten opvallen. Presenteer informatie geleidelijk, te beginnen met de belangrijkste brandpunten. Deze methode helpt gebruikers snel de meest relevante inhoud of acties te identificeren en leidt hen in een logische volgorde door de interface.
Plaats de primaire call-to-action-knoppen prominent in de interface, waardoor ze de sterkste aandachtspunten zijn. Deze knoppen moeten visueel onderscheiden zijn van andere elementen en strategisch gepositioneerd zijn om gebruikers naar gewenste acties te leiden, zoals een aankoop doen of zich aanmelden. Fluent-ontwerptaal raadt aan om voor deze elementen de merkthemakleur te gebruiken.
Gebruik contrast effectief om brandpunten te maken. Elementen die opvallen door verschillen in kleur, helderheid, grootte of typografie trekken uiteraard de aandacht van de gebruiker. Het contrasteren van helderdere oppervlakken met donkerdere tekst of merkelementen creëert een prominenter brandpunt.
Gebruik witruimte om aandachtspunten te benadrukken door visuele scheiding te creëren van de omringende elementen. Deze methode helpt afleiding te voorkomen en zorgt ervoor dat gebruikers zich kunnen concentreren op de belangrijkste inhoud of acties. UI-elementen met meer ruimte eromheen trekken meer aandacht en worden doorgaans als belangrijker gezien dan elementen met minder ruimte.
Zorg voor consistentie in het gebruik van brandpunten in de hele interface om een samenhangende gebruikerservaring te bieden. Door een patroon van brandpunten in te stellen, begeleidt u gebruikersverwachtingen over de hiërarchie die ze moeten begrijpen om door de interface te navigeren en helpt u hen belangrijke informatie of acties op verschillende schermen of pagina's te vinden.
Houd er rekening mee dat het belangrijk is om het evenwicht te bewaren en gebruikers niet te overstelpen met te veel tegenstrijdige brandpunten.
Het oog wordt eerst naar het blauwe vierkant getrokken.
Elementen zoals oproepen tot actie kunnen centraal worden gesteld om ervoor te zorgen dat gebruikers ze opmerken.
Overeenkomst
Objecten die op elkaar lijken, worden vaak gezien als een groep of patroon, waardoor gebruikers verwachten dat ze dezelfde functionaliteit hebben.
Zorg ervoor dat interface-elementen met vergelijkbare functies consistente visuele stijlen hebben. Knoppen die vergelijkbare of even zwaarwegende acties uitvoeren, moeten bijvoorbeeld dezelfde kleur, vorm en grootte hebben, zodat gebruikers hun gedeelde functionaliteit kunnen zien. Zorg er omgekeerd voor dat elementen die qua functionaliteit aanzienlijk verschillen, duidelijk te onderscheiden zijn. Beide methoden voorkomen verwarring en frustratie doordat ze duidelijke visuele signalen geven.
Gebruik consistente iconografie en symbolen om soortgelijke acties of functies in de hele interface weer te geven. Gebruikers hebben de neiging bekende pictogrammen te associëren met specifieke functies op basis van hun ervaringen uit het verleden. Om aan deze verwachtingen te voldoen, moet u universeel erkende pictogrammetaforen gebruiken. Zorg voor consistentie in de pictogramstijl door pictogrammen uit dezelfde set te gebruiken, zoals de Fluent UI-iconografiebibliotheek.
Gebruik kleurcodering om overeenkomsten tussen elementen of categorieën aan te duiden. Als u bijvoorbeeld dezelfde kleur gebruikt om gerelateerde items in een lijst te markeren, of vergelijkbare gegevenspunten in een diagram te groeperen, wordt de visuele samenhang verbeterd en worden gebruikers geholpen bij het onderscheiden van patronen.
Handhaaf uniformiteit in typografie en tekststijl voor elementen die analoge doeleinden dienen. Consistente lettertypestijlen, -grootten en opmaak dragen bij aan een samenhangende beeldtaal, waardoor de herkenning door gebruikers van gerelateerde inhoud of acties wordt vergemakkelijkt.
Bied consistente interactieve feedback voor soortgelijke acties in de hele interface. Of het nu gaat om het bewegen over een knop of het klikken op een koppeling, gebruikers mogen uniforme reacties verwachten die de associatie tussen visuele gelijkenis en functionele gelijkwaardigheid versterken. Hoewel het platform inherent het meeste interactiviteitsgedrag biedt, zoals kleurwaarden voor de status van aanwijzen met de muis en drukken op de knop, moet u dit ontwerpprincipe in gedachten houden wanneer u onderdeelelementen helemaal opnieuw maakt of feedbackstatuswaarden handmatig implementeert.
Zorg ervoor dat visuele overeenkomsten worden aangevuld met andere signalen, zoals tekstlabels of audiofeedback, om tegemoet te komen aan gebruikers met uiteenlopende behoeften en voorkeuren. Effectieve communicatie van functionaliteit via meerdere sensorische modaliteiten verbetert de bruikbaarheid en inclusiviteit.
De elementen zijn gegroepeerd op vorm en kleur, niet op rangschikking (kolommen en rijen).
Als één kaart op een dashboard als een zijpaneel wordt geopend, verwachten gebruikers dat alle kaarten op die manier worden geopend.
Figuur-grond
Mensen nemen elementen instinctief waar als een "figuur" (wat opvalt aan de voorkant) of als een "grond" (wat naar de achtergrond verdwijnt). Daarom beïnvloedt context de perceptie, en is het van cruciaal belang om voor voldoende afbakening te zorgen om belangrijke elementen van de achtergrond te onderscheiden. Witruimte (negatieve ruimte) vergroot het begrip van de inhoud.
Gebruik contrast in kleur, formaat en visuele stijl om een duidelijke relatie tussen figuur en achtergrond te creëren. Belangrijke elementen moeten duidelijk opvallen tegen de achtergrond, waardoor ze gemakkelijk te onderscheiden zijn en de aandacht van gebruikers effectief kan worden geleid. Oppervlakken met lichtere kleuren en meer contrasterende visuele elementen tegen de achtergrond vallen meer op. Deze aanpak vermindert visuele rommel en helpt gebruikers belangrijke informatie te identificeren. Zorg voor voldoende contrast tussen voorgrond- en achtergrondelementen om de leesbaarheid voor gebruikers met een visuele beperking te verbeteren, waardoor hun vermogen om inhoud te openen en te begrijpen wordt verbeterd.
Het handhaven van consistentie in de plaatsing en stijl van interface-elementen versterkt de figuur-grondrelatie en helpt gebruikers bij het begrijpen van de interfacestructuur. Consistent gebruik van ontwerppatronen en visuele signalen zorgt ervoor dat gebruikers snel onderscheid kunnen maken tussen voorgrond- en achtergrondelementen in verschillende schermen en contexten. Inconsistenties in het ontwerp kunnen de mentale modellen van gebruikers verstoren en hun vermogen om efficiënt door de interface te navigeren belemmeren.
Laag contrast en minimale negatieve ruimte dragen bij aan de waarneming van de witte rechthoeken als onderdeel van de achtergrond.
Een zijafbeelding moet naar de achtergrond verdwijnen, zodat gebruikers kunnen focussen op belangrijke inhoud..
Groepering
Elementen worden doorgaans als groepen waargenomen als ze een gebied delen met een duidelijk gedefinieerde grens.
Door gerelateerde elementen binnen visuele containers te groeperen, zoals vakken, kaarten of randen, kunnen gebruikers ze als samenhangende eenheden waarnemen. Deze aanpak organiseert inhoud en functionaliteit visueel, waardoor het gemakkelijker wordt om informatie te identificeren en te verwerken. Duidelijke groeperingen helpen een rommelige interface te voorkomen en verwarring of inefficiëntie te verminderen. Groeperen is ook effectief als nabijheid geen optie is. Bijvoorbeeld, een berichtenbalk die meerdere bedieningselementen op een scherm beslaat, wordt gezien als één samenhangend geheel vanwege de randen en de achtergrondkleur.
Het handhaven van een consistente visuele stijl voor gegroepeerde elementen versterkt hun verbinding en verbetert de bruikbaarheid. Door vergelijkbare kleuren, lettertypen of pictogrammen voor deze elementen te gebruiken, wordt benadrukt dat ze tot dezelfde categorie of functie behoren. Inconsistenties in visuele presentatie kunnen de waargenomen groepering verzwakken en ervoor zorgen dat gebruikers relaties tussen elementen over het hoofd zien of hun betekenis of doel verkeerd interpreteren.
Door randen rondom een groep elementen toe te voegen wordt er een scheiding gecreëerd met omringende elementen.
Door inhoud in secties op te splitsen is het voor gebruikers duidelijker dat het onderwerp verandert.
Signalen versus ruis
Visuele signalen zoals lijnen, contrast en spatiëring worden gebruikt om gebruikers duidelijk te maken dat iets belangrijk is. Te veel signalen, of signalen die informatie benadrukken die niet belangrijk is, worden echter al snel ruis.
Gebruik brandpuntprincipes, zoals vetgedrukte tekst, contrasterende kleuren of pictogrammen, om belangrijke informatie of acties aan gebruikers te signaleren. Gebruik bijvoorbeeld een felle kleur voor belangrijke knoppen of koppen, zodat deze opvallen.
Wees selectief in wat u benadrukt om te voorkomen dat u gebruikers overstelpt met te veel informatie. Signaleer alleen elementen die echt van belang zijn voor de taak of het doel van de gebruiker. Te veel signalen kunnen voor verwarring zorgen en het voor gebruikers moeilijk maken om prioriteiten te stellen. Identificeer de informatie die het belangrijkst is voor de gebruiker en benadruk deze op de juiste manier. Normaal gesproken wordt aanbevolen om slechts één call-to-action-knop per pagina te hebben. Markeer in formulieren de verplichte velden om de aandacht van de gebruiker te trekken. Dit voorkomt dat gebruikers verdwalen in onnodige details en helpt hen zich te concentreren op wat essentieel is.
Zorg ervoor dat signalen een consistente visuele taal volgen in de gehele interface, die als gids dient zodat gebruikers patronen kunnen herkennen en de betekenis van verschillende signalen intuïtief kunnen begrijpen.
Stem signalen af op de specifieke context en de behoeften van de gebruiker. Als gebruikers bijvoorbeeld een interface scannen die bepaalde taken presenteert, geef dan duidelijk de kritieke status en actiepunten aan om hun aandacht te trekken. Contextuele signalen helpen gebruikers snel relevante informatie te vinden zonder te worden afgeleid door niet-gerelateerde details.
Signalen helpen bij het leiden van gebruikers door inhoud en aan te geven wat belangrijk is.
Visuele ruis brengt verwarring en heeft het tegenovergestelde effect van signalen.
Power Platform faciliteren
Gebruik in canvas-apps indelingscontainers om gerelateerde elementen te groeperen. Idealiter worden alle pagina-elementen in containers georganiseerd, en indelingscontainers kunnen ook onderliggende containers efficiënt scheiden door de eigenschap gap aan te passen.
In modelgestuurde app-formulieren kunnen secties worden gebruikt om gerelateerde velden of elementen te groeperen.
Zorg voor consistentie in algemene visuele elementen met herbruikbare aangepaste onderdelen.
In canvas-apps is voor de functie voor moderne besturingselementen signalering geïntegreerd in het ontwerp ervan. Met name de besturingselementen knop en badge bieden opties in de bijbehorende stijleigenschappen, waardoor ze effectieve signalen zijn. Volg de best practices voor elk onderdeel en pas signalering selectief toe om optimale communicatie te garanderen.
Gerelateerde informatie
- Principes van groeperen
- Gestaltpsychologie
- Esthetisch-bruikbaarheidseffect
- Afstandshelling van Fluent UI-ontwerpsysteem