Soovitused kasutaja taju ja esteetika optimeerimiseks

Kehtib selle Power Platform hästi läbimõeldud kogemuse optimeerimise kontrollnimekirja soovituse kohta:

XO:07	Rakenda klassikalisi disainipõhimõtteid visuaalsetele elementidele, nagu värvilahendused, tüpograafia ja paigutus. Püüdle fokuseeritud, tasakaalustatud ja intuitiivse visuaalse hierarhia poole, mis suunab kasutajate tähelepanu olulistele elementidele ja tegevustele.

See juhend kirjeldab soovitusi universaalsete visuaalse disaini mustrite kohta, mis mõjutavad kasutaja taju, mis omakorda võib oluliselt mõjutada rahulolu ja rakenduse omaksvõttu. Visuaalsed elemendid on elamuste loomise alustalaks. Visuaalsete põhimõtete rakendamine, mis on kooskõlas sellega, kuidas inimesed loomulikult infot tajuvad ja töötlevad, pakub struktureeritud meetodeid visuaalsete elementide valimiseks ja korraldamiseks, et luua tõhus ja atraktiivne rakendus.

Peamised disainistrateegiad

Ulatuslikud uuringud inimeste visuaalse disaini tajumise kohta näitavad, et kasutajad ei vaata visuaalseid elemente isoleeritult. Selle asemel tajuvad nad neid seoses teiste elementidega ja kontekstiga, milles nad esinevad. Need suhted mõjutavad kasutajate taju, juhtides tähelepanu konkreetsetele valdkondadele, tekitades emotsioone, aidates kaasa arusaamisele, parandades esteetikat ja tugevdades brändi identiteeti. Visuaalsete elementide hoolikas valik ja paigutus aitavad luua kaasahaaravaid, meeldejäävaid ja tõhusaid kasutuskogemusi, mis kõnetavad sihtrühma.

Esteetiline-kasutatav efekt

Esteetilise kasutatavuse efekt viitab kalduvusele pidada atraktiivseid tooteid kasutatavamateks. Kasutajad kujundavad rakenduse kohta esmase arvamuse umbes 50 millisekundi jooksul. Seda esmamuljet mõjutavad mitmesugused tegurid, sealhulgas struktuur, värvid, vahekaugus, sümmeetria, teksti hulk ja fondid. Positiivne esmamulje võib suurendada kasutajate üldist rahulolu. Uuringud näitavad, et kasutajad on väiksemate kasutatavusprobleemide suhtes andestavamad, kui liides on visuaalselt meeldiv. Lisaks võib disaini kvaliteet olla usaldusväärsuse näitajaks.

Tasakaal ja kaal

Visuaalne tasakaal esindab tasakaalu ja harmoonia tunnet visuaalses tajumises. See aitab kasutajatel visuaalset teavet tõhusamalt töödelda ja korraldada, vähendades kognitiivset koormust. Tasakaalustatud kompositsioone tajutakse üldiselt meeldivamana ja kergemini mõistetavana, võimaldades kasutajatel tähelepanu tõhusalt koondada ja visuaalsetes stiimulites kergemini navigeerida. See visuaalse tasakaalu kognitiivne aspekt rõhutab selle olulisust selge suhtluse hõlbustamisel ja üldise kasutajakogemuse parandamisel.

Kompositsioon on tasakaalus, kui kõik elemendid on optilises tasakaalus. Tihti vajab matemaatiline paigutus kohandamist. Mõned visuaalset kaalu mõjutavad elemendid on suurus, värv, tihedus ja tühik.

• Suurus: Suuremad elemendid kipuvad visuaalselt kaalukamad olema kui väiksemad. Tasakaalu saavutamiseks saab suuremaid elemente tasakaalustada, rühmitades neid väiksemate elementidega või muutes nende paigutust paigutuses.

• Värv: Erksad või intensiivsed värvid võivad rohkem tähelepanu köita ja tunduda raskemad kui summutatud või neutraalsed värvid. Värvide tasakaalustamine hõlmab nende ühtlast jaotamist kogu liideses või täiendavate värvide kasutamist visuaalse harmoonia loomiseks.

• Tihedus: Elementide tihedus viitab sellele, kui tihedalt nad antud ruumis paiknevad. Tiheduse tasakaalustamine hõlmab elementide ühtlase jaotumise tagamist liideses, et vältida ülerahvastatust või hõredaid alasid.

• Tühik: Tuntud ka kui negatiivne ruum, viitab tühik elementide vahele jäävatele tühjadele aladele. Ruum aitab luua visuaalset hingamisruumi ja tasakaalustab kompositsiooni, tõstes esile ja rõhutades teatud elemente.

Tasakaalustatud kompositsioon on elementide vaheliste visuaalsete jõudude summa.

Paigutuse tasakaalustamine on üks raskemaid ülesandeid, kuna seda ei saa kergesti mõõta.

Värv

Toonid, varjundid ja värvid võivad edastada tähendust, tekitada emotsioone ja luua esteetilist atraktiivsust. Värvil on oluline roll kasutaja tähelepanu suunamisel, hierarhia loomisel, teabe edastamisel ja kasutatavuse parandamisel. Läbimõeldud värvilahenduse mõju kasutajaliideses soovitud viisile on mitmeid põhjuseid:

1. Tähelepanu ja taju. Teatud värvid on pilkupüüdvamad kui teised, võimaldades disaineritel suunata vaatajate tähelepanu konkreetsetele elementidele. Värvikontrast võib parandada loetavust ja eristada erinevaid komponente, hõlbustades teabe kiiret töötlemist.

2. Emotsionaalne reaktsioon. Värvidel on psühholoogilised seosed, mis kutsuvad esile emotsioone ja meeleolusid. Soojad värvid nagu punane ja oranž võivad tekitada energiat ja elevust, samas kui jahedad värvid nagu sinine ja roheline võivad esile kutsuda rahu ja vaikuse. Saate esile kutsuda soovitud reaktsioone, et mõjutada kasutajaid soovitud kogemuse suunas.

3. Brändi identiteet. Värvide järjepidev kasutamine brändimaterjalides aitab luua tugeva visuaalse identiteedi ja edendab brändi tuntust. Kasutajad seostavad teatud värve sageli kindlate kaubamärkidega ning seostavad oma kogemust brändilojaalsuse ja usaldusega.

4. Visuaalne hierarhia. Värvi saab kasutada visuaalse hierarhia loomiseks ja teabe korraldamiseks. Määrake elementidele erinevad värvid vastavalt nende olulisusele või kategooriale, et luua selge hierarhia ning hõlbustada navigeerimist ja mõistmist.

Lähedus

Lähemale asetatud esemed tunduvad omavahel seotumad. Elementide paigutamisel veenduge, et tihedalt seotud ja mitteseotud elementide vahel oleks märgatav vahekauguste erinevus.

See Gestalti printsiip viitab sellele, et visuaalsete elementide vaheline ruumiline kaugus mõjutab seda, kuidas neid vaimselt tajutakse ja korraldatakse, ning rõhutab selle olulisust visuaalsete stiimulite tõhusa töötlemise ja mõistmise hõlbustamisel.

Grupeeri omavahel seotud elemendid, mis on funktsionaalselt sarnased või kuuluvad samasse hierarhilisse kategooriasse. Näiteks nupud, mis rippmenüüs sarnaseid toiminguid või valikuid täidavad, tuleks grupeerida tihedalt kokku, et näidata nende seost. Navigeerimisribal viitavad lähestikku paiknevad menüüelemendid seotud valikute komplektile, samas kui suurem vahe menüükategooriate vahel eristab neid visuaalselt. Seotud vormiüksused tuleks grupeerida, näiteks aadressiväljad jaotises nimega „aadress”.

Parandage tekstirohkete liideste loetavust, kohandades lõikude, lausete ja sõnade vahelist vahet. Tihedam lõiguvahe näitab loogilist seost või mõtte jätkumist, suurem vahe aga üleminekut või sisulist katkestust. See meetod soodustab tekstilise teabe tõhusat mõistmist.

Segaduse vältimiseks veenduge, et seotud ja mitteseotud elementide vahel oleks märgatav vahe. Vahekauguse kaldtee aitab järjepidevalt määrata vajaliku vahekauguse elemendi suuruse põhjal.

Vasakpoolne ring on rohkem seotud kolmnurga kui teise ringiga.

Lõikude vaheline kaugus on väiksem kui jaotiste vaheline kaugus.

Järjepidevus

Elemente, mis on paigutatud joonele või kõverale, tajutakse rohkem seotud kui elemente, mis ei asu joonel või kõveral.

Korraldage liidese elemente, nagu navigeerimismenüüd või protsessi etapid, piki joont või kõverat, et viidata järjestusele või edenemisele. See paigutus aitab kasutajatel tajuda elementide vahelist seost ja mõista teabe või toimingute loogilist voogu.

Paigutage seotud elemendid (nt märkeruudud või raadiosuvandid või täpploendi üksused) piki joont, et need visuaalselt rühmitada. See korraldus viitab kasutajatele, et neil elementidel on ühine eesmärk või nad kuuluvad samasse kategooriasse, hõlbustades navigeerimist ja mõistmist. Kui sarnase välimusega üksused on veelgi sissepoole taandatud, korreleerub üksuse asukoht visuaalses hierarhias madalama paigutusega.

Kasutage jooni või kõveraid, et juhtida kasutajate tähelepanu ja luua visuaalseid teid läbi liidese. Näiteks võib nool suunata kasutaja pilgu ühelt sisujaotiselt teisele mööda teatud teed, mis näitab ühendust või edenemist. See tehnika aitab kasutajatel liideses intuitiivsemalt navigeerida ja julgustab uurimist.

Korraldage liidese põhielemendid, nagu tegevusele kutsuvad nupud või oluline teave, silmapaistvatele joontele, et juhtida kasutajate tähelepanu ja luua fookuspunkte. Näiteks kuvatakse Fluent MessageBari muster sageli silmapaistva tasakaalustatud sõnumina kogu sisualal, kusjuures sõnum asub vasakul, mis viib paremal asuvate tegevusekutsenuppudeni. See paigutusstrateegia tõstab need elemendid esile ja rõhutab nende olulisust, suurendades interaktsiooni tõenäosust.

Kõverad/jooned on meie taju jaoks tugevamad kui värv.

Viisardid kasutavad järjepidevust, et näidata kasutajatele, et etapid on omavahel seotud, ilma et nad liigse teabega üle koormaksid.

Sulgemine

Inimese aju kipub nägema terviklikke vorme, tundes üksikute objektide kohal ära ühe tuttava mustri, isegi kui osa teabest puudub.

Tagage kujunduselementide (nt kujundid, värvid ja suurused) visuaalne järjepidevus, et aidata kasutajatel õppida mustreid, mida nad peaksid ootama, isegi kui neid esitatakse erinevates kontekstides.

Kasutage lihtsaid ja tuttavaid ikoone või sümboleid, mis võimaldavad kasutajatel oma varasemate kogemuste põhjal puuduvat teavet täita. Näiteks suurendusklaasi ikooni seostatakse tavaliselt otsingufunktsiooniga, isegi ilma kaasneva tekstita.

Esitage teavet kasutajatele järk-järgult, mida nimetatakse ka progressiivseks avalikustamiseks. Lubage kasutajatel liidesega suheldes puuduvaid üksikasju täita, vältides nende ülekoormamist liigse teabega ja julgustades uurimist.

Looge ühtseid visuaalseid mustreid, mis julgustavad kasutajaid tajuma objekte terviklike üksustena. Näiteks võib seotud elementide rühmitamine aidata kasutajatel mõista oma suhet ja eesmärki. Paigutage elemendid visuaalselt järjepidevalt, kasutades segmenteerimise näitamiseks Gestalt-põhimõtteid. Kasutage ruumi tõhusalt, et luua liidese elementide ümber suletuse tunne.

Kasutage animatsioone ja üleminekuid, et juhtida kasutajate tähelepanu ja edastada muudatusi liidese olekutes. Sujuvad üleminekud erinevate olekute või ekraanide vahel võivad aidata kasutajatel mõista elementide vahelisi seoseid ja täita puuduvat teavet. Mitmed kaasaegsed juhtelemendid, mis on saadaval Power Apps oma olemuselt kuvatavates animatsioonides.

Ruut tuvastatakse enne nelja mittetäieliku ringi.

Animatsioon kaardilt modaalile aitab sulgeda lõhet nende kahe vahel ja seostada neid üksteisega.

Keskpunkt

Fookuspunkt on disainielement, mis tõmbab kohe vaataja tähelepanu. Ideaalis peaks kujundusel olema fookuspunktide jada, tavaliselt üks kuni kolm, mis on paigutatud nii, et kasutajat sihipäraselt sisu kaudu juhatada.

Kujundage liides selge teabehierarhiaga, kus fookuspunktidena rõhutatakse kõige olulisemat sisu või tegevusi. Kasutage visuaalseid näpunäiteid, nagu suurus, värv, kontrast ja positsioneerimine, et need elemendid silma paistaksid. Esitage teavet järk-järgult, alustades kõige olulisematest fookuspunktidest. See tehnika aitab kasutajatel kiiresti tuvastada kõige asjakohasema sisu või toimingud ja juhendab neid loogilises järjestuses läbi liidese.

Asetage peamised tegevusele kutsuvad nupud liideses silmapaistvalt, muutes need tugevaimaks fookuspunktiks. Need nupud peaksid olema visuaalselt teistest elementidest eristuvad ja strateegiliselt paigutatud, et suunata kasutajaid soovitud toimingute juurde, nagu ostu sooritamine või registreerumine. Sorav disainikeel soovitab nende elementide jaoks kasutada bränditeema värvi.

Kasutage fookuspunktide loomiseks tõhusalt kontrasti. Elemendid, mis paistavad silma värvi, heleduse, suuruse või tüpograafia erinevuste tõttu, köidavad loomulikult kasutaja tähelepanu. Heledamate pindade kontrastimine tumedama teksti või kaubamärgiga elementidega loob silmapaistvama fookuspunkti.

Kasutage fookuspunktide esiletõstmiseks valget ruumi, luues visuaalse eralduse ümbritsevatest elementidest. See tehnika aitab vältida segajaid ja võimaldab kasutajatel keskenduda kõige olulisemale sisule või toimingutele. Kasutajaliidese elemendid, mille ümber on rohkem vahet, tõmbavad rohkem tähelepanu ja neid peetakse tavaliselt olulisemaks kui väiksema ruumiga elemente.

Säilitage järjepidevus fookuspunktide kasutamisel kogu liideses, et pakkuda ühtset kasutajakogemust. Fookuspunktide mustri määramisega suunate kasutajate ootusi hierarhia suhtes, mida nad peavad kasutajaliideses navigeerimiseks mõistma, ja aitate neil leida olulist teavet või toiminguid erinevatelt ekraanidelt või lehtedelt.

Pidage meeles, et oluline on säilitada tasakaal ja mitte koormata kasutajaid liiga paljude konkureerivate fookuspunktidega.

Pilk tõmmatakse kõigepealt sinisele ruudule.

Selliseid elemente nagu üleskutsed tegevusele saab muuta keskpunktiks, et kasutajad neid märkaksid.

Sarnasus

Sarnaseid objekte tajutakse sageli rühma või mustrina, mistõttu kasutajad eeldavad, et neil on sama funktsionaalsus.

Veenduge, et sarnaste funktsioonidega liideseelementidel oleks ühtlane visuaalne stiil. Näiteks sarnaseid või võrdse kaaluga toiminguid tegevatel nuppudel peaks olema sama värv, kuju ja suurus, andes kasutajatele märku nende ühisest funktsionaalsusest. Vastupidi, veenduge, et funktsionaalsuse poolest oluliselt erinevad elemendid oleksid selgelt eristatavad. Mõlemad tehnikad hoiavad ära segaduse ja pettumuse, luues selged visuaalsed näpunäited.

Kasutage ühtset ikonograafiat ja sümboleid, et esindada sarnaseid toiminguid või funktsioone kogu liideses. Kasutajad kipuvad oma varasemate kogemuste põhjal seostama tuttavaid ikoone konkreetsete funktsioonidega. Nende ootuste täitmiseks kasutage üldtunnustatud ikoonimetafoore. Ikoonide stiili järjepidevuse tagamiseks kasutage sama komplekti ikoone, näiteks Fluenti kasutajaliidese ikonograafiateegi.

Kasutage värvikoodi, et tähistada elementide või kategooriate sarnasusi. Näiteks sama värvi kasutamine loendis seotud üksuste esiletõstmiseks või sarnaste andmepunktide rühmitamine diagrammil suurendab visuaalset sidusust ja aitab kasutajatel mustreid eristada.

Säilitage tüpograafia ja teksti stiili ühtsus analoogseid eesmärke teenivate elementide jaoks. Järjepidevad fondistiilid, -suurused ja -vorming aitavad kaasa ühtsele visuaalsele keelele, hõlbustades kasutajatel seotud sisu või toimingute äratundmist.

Andke järjepidevat interaktiivset tagasisidet sarnaste toimingute kohta kogu liideses. Olenemata sellest, kas hõljutate kursorit nupu kohal või klõpsate lingil, peaksid kasutajad ootama ühtseid vastuseid, mis tugevdavad seost visuaalse sarnasuse ja funktsionaalse ekvivalentsuse vahel. Kuigi platvorm pakub oma olemuselt enamikku interaktiivsuslikke käitumisi, nagu hõljumise ja vajutatud oleku värviväärtused, pidage seda disainipõhimõtet meeles, kui loote komponentide elemente nullist või rakendate tagasiside olekuid käsitsi.

Veenduge, et visuaalseid sarnasusi täiendavad muud näpunäited, nagu tekstisildid või helitagasiside, et rahuldada erinevate vajaduste ja eelistustega kasutajaid. Funktsionaalsuse tõhus edastamine mitme sensoorse modaalsuse kaudu suurendab kasutatavust ja kaasatust.

Elemendid on rühmitatud kuju ja värvi, mitte paigutuse järgi (veerud ja read).

Kui üks armatuurlaual olev kaart avaneb külgpaneelina, eeldavad kasutajad, et nad kõik avanevad sel viisil.

Joonis ja maandus

Inimesed tajuvad elemente instinktiivselt kas "figuurina" (mis paistab esiküljel silma) või "maapinnana" (mis taandub tagaplaanile). Seetõttu mõjutab kontekst taju ja oluline on tagada piisav piiritlemine, et eristada olulisi elemente taustast. Valge ruum (negatiivne ruum) suurendab sisu mõistmist.

Kasutage värvi, suuruse või visuaalse stiili kontrasti, et luua selge seos figuuri ja maapinna vahel. Olulised elemendid peaksid taustal silmapaistvalt eristuma, muutes need kergesti eristatavaks ja juhtides kasutajate tähelepanu tõhusalt. Heledamate värvide ja kontrastsemate visuaalsete elementidega pinnad taustal on silmatorkavamad. See lähenemisviis vähendab visuaalset segadust ja aitab kasutajatel tuvastada põhiteavet. Tagada esiplaani ja tausta elementide vahel piisav kontrast, et parandada nägemispuudega kasutajate loetavust, parandades nende juurdepääsu ja arusaamist sisule.

Liidese elementide paigutuse ja stiili järjepidevuse säilitamine tugevdab joonise ja maa suhet ning aitab kasutajatel mõista liidese struktuuri. Kujundusmustrite ja visuaalsete näpunäidete järjepidev kasutamine tagab, et kasutajad saavad kiiresti eristada esiplaani ja tausta elemente erinevatel ekraanidel ja kontekstides. Ebakõlad disainis võivad häirida kasutajate vaimseid mudeleid ja takistada nende võimet liideses tõhusalt navigeerida.

Madal kontrastsus ja minimaalne negatiivne ruum aitavad kaasa valgete ristkülikute tajumisele tausta osana.

Külgpilt peab taanduma tagaplaanile, et kasutajad saaksid keskenduda olulisele sisule.

Rühmitamine

Elemente kiputakse tajuma rühmadena, kui nad jagavad selgelt määratletud piiriga ala.

Seotud elementide rühmitamine visuaalsetes konteinerites (nt kastid, kaardid või äärised) aitab kasutajatel tajuda neid ühtsete üksustena. See lähenemisviis korraldab sisu ja funktsionaalsuse visuaalselt, muutes teabe tuvastamise ja töötlemise lihtsamaks. Selged rühmitused aitavad vältida segadust ja vähendada segadust või ebaefektiivsust. Rühmitamine on tõhus ka siis, kui lähedus pole võimalik; Näiteks teateriba, mis hõlmab ekraanil mitut juhtelementi, tajutakse selle ääriste ja taustavärvi tõttu seotud üksusena.

Rühmitatud elementide ühtse visuaalse stiili säilitamine tugevdab nende seost ja parandab kasutatavust. Sarnaste värvide, fontide või ikoonide kasutamine nende elementide jaoks rõhutab, et need kuuluvad samasse kategooriasse või funktsiooni. Ebajärjekindlused visuaalses esituses võivad nõrgendada tajutavat rühmitust ja panna kasutajad tähelepanuta jätma elementide vahelised seosed või tõlgendama valesti nende tähendust või eesmärki.

Ääriste lisamine elemendi või elementide rühma ümber loob eralduse ümbritsevatest elementidest.

Sisu osadeks jagamine aitab kasutajatel mõista, et teema vahetub.

Signaalid vs. müra

Visuaalseid vihjeid, nagu jooned, kontrast ja vahed, kasutatakse kasutajatele olulise märkimiseks. Liiga palju signaale või signaale, mis toovad esile ebaolulist teavet, muutub aga kiiresti müraks.

Kasutage olulise teabe või toimingute edastamiseks kasutajatele fookuspõhimõtete, näiteks paksu teksti, kontrastsete värvide või ikoonide abil. Näiteks kasutage oluliste nuppude või pealkirjade jaoks erksat värvi, et need silma paistaksid.

Olge esiletõstmise osas valiv, et mitte kasutajaid liiga palju infoga üle koormata. Märgi ainult elemente, mis on kasutaja ülesande või eesmärgi jaoks tõeliselt olulised. Liiga palju signaale võib tekitada segadust ja muuta kasutajatel prioriteetide seadmise keeruliseks. Tuvastage kasutaja jaoks kõige olulisem teave ja rõhutage seda asjakohaselt. Tavaliselt on soovitatav, et lehel oleks ainult üks tegevusele kutsuv nupp. Vormides tõstke esile kohustuslikud väljad, et suunata kasutaja tähelepanu. See aitab kasutajatel ebavajalike detailide taha eksida ja keskenduda olulisele.

Veenduge, et signaalid järgiksid kogu liideses ühtset visuaalset keelt, mis toimiks juhisena, mis aitab kasutajatel mustreid ära tunda ja erinevate signaalide tähendust intuitiivselt mõista.

Kohanda signaale vastavalt konkreetsele kontekstile ja kasutaja vajadustele. Näiteks kui kasutajad skaneerivad liidest, mis kuvab teatud ülesandeid, andke kriitilisest olekust ja toimingutest selgelt märku, et nende tähelepanu köita. Kontekstuaalsed signaalid aitavad kasutajatel kiiresti leida asjakohast teavet, ilma et nad laseksid end segada ebaolulistest detailidest.

Signaalid aitavad kasutajatel sisus orienteeruda ja edastada olulist teavet.

Visuaalne müra tekitab segadust ja omab signaalidele vastupidist mõju.

Power Platform hõlbustamine

Lõuendirakendustes kasutage seotud elementide rühmitamiseks **paigutuskonteinereid**. ... Ideaalis peaksite kõik leheelemendid konteineritesse korraldama ja paigutuskonteinerid saavad ka tütarkonteinereid tõhusalt eraldada, kohandades atribuuti gap.

Mudelipõhistes rakenduse vormides saab sektsioone kasutada seotud väljade või elementide rühmitamiseks.

Rakendage tavaliste visuaalsete elementide järjepidevust korduvkasutatavate kohandatud komponentide abil. ...

Lõuendirakendustes on moodsates juhtelementides integreeritud signaalimine. Täpsemalt pakuvad nupu ja märgi juhtelemendid oma stiiliomadustes valikuid, muutes need tõhusateks signaalideks. Järgige iga komponendi puhul parimaid tavasid ja rakendage signaalimist valikuliselt, et tagada optimaalne kommunikatsioon.

Seotud teave

• Rühmitamise põhimõtted
• Gestalti psühholoogia
• Esteetiline kasutatavusefekt
• Sujuva kasutajaliidese disainisüsteemi vahekauguste kaldtee

Kasutuskogemuse optimeerimise kontrollnimekiri

Kasutuskogemuse optimeerimise kontrollnimekiri