Käyttäjän ymmärryksen ja estetiikan optimointisuosituksia
Koskee tämän Power Platform Well-Architected -käyttökokemuksen optimoinnin tarkistusluetteloa koskevia suosituksia:
| XO:07 | Perinteisten suunnitteluperiaatteiden käyttäminen visuaalisissa elementeissä, kuten värimalleissa, typografiassa ja asettelussa. Tavoitteena kohdennettu, tasapainoinen ja intuitiivinen visuaalinen hierarkia, joka ohjaa käyttäjien huomioon tärkeisiin elementteihin ja toimintoihin. |
|---|
Tässä oppaassa käsitellään sellaisia yleisten visuaalisten suunnittelumallien suosituksia, jotka vaikuttavat käyttäjän ymmärrykseen. Tämä puolestaan voi vaikuttaa merkittävästi tyytyväisyyteen sovelluksen käytössä ja sen käyttöönottamiseen. Visuaaliset elementit ovat kokemusten luonnissa käytettäviä perustason rakenneosia. Sellaisten visuaalisten periaatteiden käyttäminen, jotka ihmiset luontaista tapaa havaita ja käsitellä tietoja, mahdollistaa jäsennettyjen menetelmien käyttämisen visuaalisten elementtien valinnassa ja järjestämisessä luotaessa tehokasta ja miellyttävää sovellusta.
Tärkeimmät suunnittelustrategiat
Kattava ihmisten visuaalisen suunnittelun hahmottamista koskeva tutkimus osoittaa, että käyttäjät eivät tarkastele visuaalisia elementtejä erillään muista elementeistä. Sen he hahmottavat ne suhteessa muihin elementteihin ja kontekstiin, jossa ne näkyvät. Nämä suhteet vaikuttavat käyttäjän havaitsemiseen sekä kiinnittävät huomion tietyillä alueille, synnyttävät tunteita, auttavat ymmärtämään, täydentävät estetiikka ja vahvistavat brändi-identiteettiä. Visuaalisten elementtien huolellinen valinta ja järjestäminen voi luoda osallistavia, mieleenpainuvia ja tehokkaita käyttökokemuksia, joihin kohdeyleisö reagoi.
Esteettisyyden ja käytettävyyden suhde
Esteettisyyden ja käytettävyyden vaikutuksella viitataan siihen, että houkuttelevia tuotteita pidetään usein käytettävyydeltään parempina. Käyttäjät muodostavat ensimmäisen mielipiteensä sovelluksesta noin 50 millisekunnin aikana. Monet tekijät, kuten rakenne, värit, välit, symmetria, tekstin määrä ja fontit, vaikuttavat ensivaikutelmaan. Myönteinen ensivaikutelma voi parantaa käyttäjien kokonaistyytyväisyyttä. Tutkimuksissa on havaittu, että käyttäjät ovat valmiita antamaan anteeksi pienet käytettävyysongelmat, jos he pitävät käyttöliittymän visuaalisesta ilmeestä. Lisäksi laadukas suunnittelu voi toimia merkkinä uskottavuudesta.
Tasapaino ja painoarvo
Visuaalinen tasapaino ilmaisee visuaalisessa hahmottamista tasapainon ja harmonian tunnetta. Sen ansiosta käyttäjät voivat käsitellä ja järjestää visuaalisia tietoja tehokkaasti, sillä se vähentää kognitiivista rasitetta. Tasapainoisia sommitelmia pidetään yleisesti miellyttävämpinä ja helpommin ymmärrettävissä, joten käyttäjien huomio keskittyy tehokkaasti ja visuaalisissa ärsykkeissä siirtyminen helpottuu. Tämä visuaalisen tasapainon kognitiivinen puoli korostaa sen merkitystä selkeän viestinnän edistämisessä ja yleisen käyttökokemuksen parantamisessa.
Sommittelu on tasapainoinen, kun kaikki elementit ovat optisessa tasapainossa. Matemaattinen sijoittelu edellyttää usein säätämistä. Visuaaliseen painoarvoon vaikuttavia elementtejä ovat esimerkiksi koko, väri, tiiviys ja tyhjä tila.
Koko: Suurten elementtien visuaalinen painoarvo on yleensä suurempi kuin pienten elementtien. Tasapaino voidaan saavuttaa siten, että suurten elementtien vastapainona ne ryhmitellään pienten elementtien kanssa tai niiden sijoittelua asettelussa muutetaan.
Väri: Kirkkaat tai voimakkaat värit herättävät enemmän huomiota tai vaikuttavat raskaammilta kuin himmeät tai neutraalit värit. Värejä tasapainotetaan hajauttamalla ne tasaisesti koko liittymän alueelle tai luomalla visuaalista harmoniaa vastavärejä käyttämällä:
Tiiviys: Elementtien tiiviys viittaa siihen, kuinka tiiviisti ne on sijoitettu tietylle alueelle. Tiiviyttä tasapainotetaan varmistamalla, että elementit on hajautettu tasaisesti koko liittymän alueelle, jotta alueille ei tule liian tai liian vähän sisältöä.
Tyhjä tila: Myös negatiiviseksi tilaksi kutsuttu tyhjä tila viittaa elementtien välissä olevaan tyhjään tilaan. Tila auttaa luomaan visuaalista avaruutta ja voi tasapainottaa sommitelmaa tuomalla tiettyjä elementtejä esiin tai korostamalla niitä.
Tasapainoinen sommittelu on elementtien välisten visuaalisten voimien summa
Asettelun tasapainottaminen on yksi hankalimmista tehtävistä, sillä se ei ole kätevästi mittavissa
Color
Erilaiset sävyt ja vivahteet voivat sisältää merkityksiä, herättää tunteita ja luoda miellyttävän esteettisen vaikutelman. Värin merkitys on ratkaiseva käyttäjän huomion ohjaamisessa, hierarkian muodostamisessa, tietojen välittämisessä ja käytettävyyden parantamisessa: On useita syitä, miksi värin harkittu käyttö käyttöliittymissä voi vaikuttaa käyttäjiin toivotulla tavalla:
Huomion kiinnittäminen ja havaitseminen. Tietyt värit kiinnittävät enemmän huomiota kuin toiset värit, joten suunnittelijat voivat ohjata katsojien huomion tiettyihin elementteihin. Värikontrasti voi parantaa luettavuutta ja erottaa erilaiset komponentit, mikä edistää tietojen nopeaa käsittelyä.
Emotionaalinen vastaus. Väreillä on psykologisia mielleyhtymiä, jotka herättävät tunteita ja vaikuttavat mielialoihin. Lämpimät värit, kuten punainen ja oranssia, voivat luoda mielikuvan energisyydestä ja innostuneisuudesta, kun taas viileät värit, kuten sininen ja vihreä, voivat luoda mielikuvan rauhallisuudesta ja tyyneydestä. Toivottuja vastineita synnyttämällä voidaan ohjata käyttäjiä kohta tarkoitettua kokemusta.
Brändi-identiteetti. Värien johdonmukainen käyttö kaikissa brändäysmateriaaleissa auttaa luomaan voimakkaan visuaalisen identiteetin ja edistämään brändin tunnettavuutta. Käyttäjät liittävät usein tietyt värit tiettyihin brändeihin; myös kokemus liitetään brändiuskollisuuteen ja luottamukseen.
Visuaalinen hierarkia. Värien avulla voidaan luoda visuaalinen hierarkia ja järjestää tietoja. Elementeille voidaan määrittää eri värejä elementtien tärkeyden tai luokan mukaan. Tällä tavoin voidaan luoda selkeä hierarkia sekä helpottaa siirtymistä ja ymmärtämistä.
Läheisyys
Lähekkäin toisiaan sijoitetut kohteet näyttävät liittyvän kiinteämmin toisiinsa. Elementtejä järjestettäessä on varmistettava, että toisiinsa läheisesti liittyvien elementtien välissä oleva tila poikkeaa selvästi elementeistä, jotka eivät liity kiinteästi toisiinsa.
Tämä gestalt-periaate osoittaa, että visuaalisten elementtien välissä oleva tila vaikuttaa siihen, miten ne hahmotetaan ja järjestetään mielessä. Lisäksi se osoittaa selvästi, kuinka tärkeää on tehokkaan visuaalisten ärsykkeiden tehokkaan käsittelyn ja ymmärtämisen edistäminen.
Toiminnoiltaan samankaltaisten tai samaan hierarkialuokkana kuuluvien liittyvien elementtien ryhmitteleminen yhteen. Esimerkiksi samankaltaisia toimintoja suorittavat painikkeet tai avattavan valikon vaihtoehdot on ryhmiteltävä lähekkäin ilmaisemaan, että ne liittyvät yhteen. Siirtymispalkissa lähekkäin sijoitetut valikkovaihtoehdot ilmaisevat, että kyse on toisiinsa liittyvistä vaihtoehdoista. Valikkoluokkien välillä oleva suurempi väli puolestaan erottelee ne toisistaan. Toisiinsa liittyvät lomakekohteet on ryhmiteltävä yhteen, kuten osoitekentät osoite-nimisessä osassa.
Luettavuuden parantaminen paljon tekstiä käyttävissä liittymissä muuttamalla kappaleiden, lauseiden ja sanojen välissä olevia välejä. Lähekkäin olevat kappaleet ilmaisevat loogisen yhteyden ja ajatuksen jatkumisen, kun taas suuremmat välit ilmaisevat siirtymän tai sisällön katkeamisen. Tämä tekniikka tehostaa tekstimuotoisten tietojen ymmärtämistä.
Sekaannuksen välttämiseksi onkin varmistettava, että toisiinsa liittyvien ja liittymättömien elementtien riviväleissä on selkeästi havaittava ero. Välien erottelu voi auttaa määrittämään yhdenmukaisesti tarvittavan välin elementin koon mukaan.
Vasemmalla oleva ympyrä liittyy kiinteämmin kolmioon kuin toiseen ympyrään
Kappaleiden välinen väli on pienempi kuin osien välinen väli
Jatkuvuus
Viivalle tai kaarelle järjestettyjen elementtien katsotaan liittyvän lähemmin toisiinsa kuin elementit, jotka eivät ole viivalla tai kaarella.
Käyttöliittymän elementtien, kuten siirtymisvalikkojen tai prosessin vaiheiden, järjestäminen viivan tai kaaren muotoon ilmaisee sarjaa tai etenemistä. Tämä asettelu auttaa käyttäjiä hahmottamaan elementtien välisen suhteen ja ymmärtämään tietojen tai toimintojen loogisen siirtymisen.
Liittyvien elementtien, kuten valintaruudun tai valintanappien, tai luettelomerkityn luettelon kohteiden asettaminen luetteloon viivan muotoon ryhmittelee ne visuaalisesti yhteen. Tämä järjestely ilmaisee käyttäjille, että kyseisillä elementeillä on jaettu yhteinen tarkoitus tai että ne kuuluvat samaan ryhmään, mikä helpottaa siirtymistä ja ymmärtämistä. Jos samankaltaiselta näyttäviä elementtejä on vielä sisennetty, kohteen sijainti korreloi alempaa sijaintia visuaalisessa hierarkiassa.
Viivojen ja kaarien avulla voidaan ohjata käyttäjien huomiota ja luoda visuaalisia polkuja liittymässä. Nuoli voi esimerkiksi ohjata käyttäjän siirtämään katseen tiettyä polkua pitkin sisällön yhdestä osasta toiseen osaan, ja tällä tavoin voidaan ilmaista yhteys tai eteneminen. Tämä tekniikka auttaa käyttäjiä siirtymään liittymässä aiempaa intuitiivisemmin, minkä lisäksi se kannustaa tutustumaan liittymään.
Liittymän keskeisten elementtien, kuten toimintokutsupainikkeiden ja tärkeiden tietojen, järjestäminen huomiota herättävien viivojen mukaisesti kiinnittää käyttäjien huomion ja luo kiintopisteitä. Esimerkiksi Fluent MessageBar -malli näytetään usein huomiota herättävänä tasapainotettuna, koko sisältöalueen kattavana sanomana siten, että oikealla oleviin toimintokutsupainikkeisiin johtava sanoma on vasemmalla. Tämä asettelustrategia tuo nämä elementit esiin ja korostaa niiden merkitystä, minkä ansiosta vuorovaikutuksen todennäköisyys kasvaa.
Kaaret tai viivat vaikuttavat havaitsemiseen enemmän kuin väri
Ohjatut toiminnot käyttävät jatkuvuutta näyttämään käyttäjille, että vaiheet liittyvät yhteen ilman käyttäjät hukkuisivat tietotulvaan
Sulkeminen
Ihmisaivoilla on taipumus nähdä täydellisiä muotoja ja tunnistaa yksi tuttu malli yksittäisten objektien sijaan, vaikka osa tiedoista puuttuisikin.
Suunnitteluelementtien, kuten muotojen, värien ja kokojen, visuaalisen yhdenmukaisuuden varmistaminen auttaa käyttäjiä oppimaan odotettavissa olevia malleja, vaikka ne ilmaistaisiin eri yhteyksissä.
Yksinkertaisten ja tuttujen kuvakkeiden tai symbolien käyttö antaa käyttäjille mahdollisuuden täyttää puuttuvat tiedot aiemman kokemuksen perusteella. Esimerkiksi suurennuslasikuvake liitetään yleisesti hakutoimintoon myös ilman siihen liitettyä tekstiä.
Tietojen ilmoittaminen käyttäjille vähitellen, mitä kutsutaan myös eteneväksi paljastamiseksi. Käyttäjät saavat mahdollisuuden täyttää puuttuvat tiedot liittymän käytön aikana, mikä estää liiallisen tiedon antaminen käyttäjille ja kannustaa perehtymiseen.
Yhtenäisten visuaalisten mallien luominen kannustaa käyttäjiä hahmottamaan objekteja kokonaisina yksiköinä. Esimerkiksi liittyvien elementtien ryhmittäminen yhteen voi auttaa käyttäjiä ymmärtämään niiden suhteen ja tarkoituksen. Elementtien järjestäminen visuaalisesti yhdenmukaisesti käyttämällä gestalt-periaatteita segmentoinnin ilmaisemiseen. Tilan käyttäminen tehokkaasti luomaan sulkemisen tunne liittymän elementtien ympärille.
Animaatioiden ja siirtyminen käyttäminen ohjaamaan käyttäjien huomiota ja ilmaisemaan muutoksia liittymän tiloissa. Sujuvat siirtymät eri tilojen tai näyttöjen välillä voi auttaa käyttäjiä hahmottamaan elementtien väliset suhteet ja täyttämään puuttuvat tiedot. Useat Power Appsiin sisältyvät modernit ohjausobjektit näyttävät animaatioita.
Neliö hahmotetaan ennen neljän vajaan ympyrän hahmottamista
Animaatio kortista modaaliksi auttaa sulkemaan niiden välillä olevan välin ja liittämään ne toisiinsa
Keskipiste
Keskipiste on suunnitteluelementti, joka katsoja kiinnittää heti huomiota. Suunnitelmassa on parhaassa tapauksessa sarja keskipisteitä, yleensä yhdestä kolmeen, jotka on järjestetty opastamaan käyttäjä siirtymään järkevästi sisällössä.
Liittymään on suunniteltava selkeä tietohierarkia, jossa tärkein sisältö ja tärkeimmät toiminnot ovat korostettuja keskipisteitä. Visuaalisten vihjeiden, kuten koon, värin, kontrastin ja sijoittamisen, avulla nämä elementit voidaan nostaa esiin. Tiedot esitetään vähitellen siten, että ensimmäisenä on tärkeimmät keskipisteet. Tämä tekniikka auttaa käyttäjiä tunnistamaan nopeasti olennaisimman sisällön tai toiminnot, minkä lisäksi se ohjaa käyttäjää siirtymään liittymässä loogisessa järjestyksessä.
Ensisijaiset toimintokutsupainikkeet sijoitetaan näkyvästi liittymään, jolloin niistä tulee selkeimmät keskipisteet. Näiden painikkeiden on erotuttava visuaalisesti muista elementeistä ja niiden on oltava strategisesti sijoitettuna siten, että ne opastavat käyttäjiä kohti toimittuja toimintoja, kuten ostamista tai rekisteröitymistä. Fluent-suunnittelukieli suosittelee brändin teemavärin käyttämistä näissä elementeissä.
Keskipisteitä voi luoda tehokkaiden kontrastien avulla. Erilaisen värin, kirkkauden, koon tai typografian vuoksi muista erottuvat elementit kiinnittävät luontaisesti käyttäjän huomion. Kontrastin muodostaminen kirkkaiden pintoja ja tumman tekstin tai brändättyjen elementtien välille luo selkeästi näkyvän keskipisteen.
Tyhjän tilan avulla voidaan korostaa keskipisteitä erottamalla ne visuaalisesti ympäröivistä elementeistä. Tämä tekniikka auttaa estämään häiriötekijät ja antaa käyttäjille mahdollisuuden keskittyä tärkeimpään sisältöön tai tärkeimpiin toimintoihin. Käyttöliittymäelementit, joiden ympärillä on runsaasti tilaa, kiinnittävät tehokkaammin huomiota, ja niitä pidetään yleensä tärkeämpinä kuin vähemmän tilaa käyttäviä elementtejä.
Keskipisteitä on käytettävä johdonmukaisesti koko liittymässä, jotta käyttökokemus on yhtenäinen. Keskipistemallin määrittäminen ohjaa käyttäjien odotuksia hierarkiasta, joka on ymmärrettävä, jotta siirtymässä voidaan siirtyä. Ne myös auttavat löytämään tärkeitä tietoja tai toimintoja eri näytöistä tai sivuilta.
On muistettava, että tasapainon säilyttäminen on tärkeää eikä käyttäjiä saa hämmentää liian monilla kilpailevilla keskipisteillä.
Käyttäjän katse hakeutuu ensimmäisenä siniseen neliöön
Elementeistä, kuten toimintokutsuista, voidaan tehdä keskipisteitä, mikä varmistaa, että käyttäjä havaitsee ne
Samanlaisuus
Samanlaisilta vaikuttavat objektit hahmotetaan usein ryhmänä tai mallina, minkä vuoksi käyttäjät olettavat niiden toimintojen olevat samat.
Tämän vuoksi onkin varmistettava, että liittymän samankaltaisia toimintoja sisältävien liittymän elementtien visuaalinen tyyli on yhdenmukainen. Esimerkiksi samanlaisia tai painoarvoltaan samoja toimintoja suorittavien painikkeiden värin, muodon ja koon oltava sama, mikä ilmaisee käyttäjille niiden jakavan toimintoja. Käänteisesti on varmistettava, että elementit, joiden toiminnot poikkeavat merkittävästi toisistaan, ovat selkeästi erilaisia. Kumpikin tekniikka estää sekaannukset ja turhautumisen selkeästi ilmaistujen visuaalisten vihjeiden avulla.
Ikonografian ja symbolien yhdenmukainen käyttö samankaltaisten toimintojen ja ominaisuuksien ilmaisemiseen koko liittymässä. Käyttäjillä on taipumus yhdistää tutut kuvakkeet tiettyihin toimintoihin aiemman kokemuksen perusteella. Näihin odotuksiin vastaaminen edellyttää yleisesti tunnistettujen kuvakkeiden käyttämistä. Kuvakkeiden johdonmukaisen tyylin varmistaminen käyttämällä saman sarjan kuvakkeita, kuten Fluent UI -kuvakekirjastoa.
Värikoodauksen käyttäminen elementtien ja luokkien samankaltaisuuksien ilmaisemiseen. Esimerkiksi samaa väriä voidaan käyttää korostamaan liittyvät nimikkeet luettelossa tai ryhmittelemään samankaltaiset arvopisteet kaaviossa, mikä parantaa visuaalista yhdenmukaisuutta ja auttaa käyttäjiä havaitsemaan malleja.
Yhdenmukaisen typografian ja tekstin tyylin säilyttäminen elementeissä, joilla on vastaavat tarkoitukset. Yhdenmukaiset fontin tyylit, koot ja muotoilu muodostaa yhtenäisen visuaalisen kielen, mikä auttaa käyttäjiä tunnistamaan liittyvän sisällön tai liittyvät toiminnot.
Yhdenmukaisen vuorovaikutteisen palautteen antaminen liittymän samankaltaisissa toiminnoissa. Olipa kyse osoittimen pitämisestä painikkeen päällä tai linkin napsauttamisesta, käyttäjien on voitava odottaa yhdenmukaista vastinetta, jolla vahvistetaan visuaalisen samankaltaisuuden ja toiminnallisen vastaavuuden välistä liitosta. Vaikka suuri osa vuorovaikutustoiminta, kuten osoittimen kohteen päällä pitäminen tai painetun tilan väriarvot, tulee ympäristöstä, tämä suunnitteluperiaate kannattaa muistaa luotaessa komponenttien elementtejä alusta alkaen tai toteuttamalla palautetilat manuaalisesti.
On varmistettava, että muut vihjeet, kuten tekstiselitteet tai äänipalaute, täydentävät visuaalisia samankaltaisuuksia, sillä näin voidaan ottaa huomioon käyttäjät, joilla on monenlaisia tarpeita ja mieltymyksiä. Toimintojen tehokas viestintä useiden aistimodaliteettien kautta parantaa käytettävyyttä ja osallistavuutta.
Elementit ryhmitellään muodon ja värin eikä järjestyksen (sarakkeet ja rivit) mukaan
Jos yksi koontinäytön kortti avautuu sivupaneelina, käyttäjät odottavat niiden kaikkien avautuvan samalla tavoin
Hahmo ja tausta
Ihmiset hahmottavat vaistomaisesti elementtien olevan joko hahmo (näkyy edessä) tai tausta (häviää taustalle). Tämän vuoksi konteksti vaikuttaa hahmottamiseen ja onkin olennaista varmistaa riittävä rajaus, joka erottaa tärkeät elementit taustasta. Tyhjä tila (negatiivinen tila) parantaa sisällön ymmärtämistä.
Selkeän hahmon ja taustan välisen suhteen voi muodostaa hyödyntämällä värin, koon tai visuaalisen tyylin kontrastia. Tärkeiden elementtien on erotuttava selkeästi taustasta, mikä helpottaa niiden erottamista ja kiinnittää käyttäjien huomion tehokkaasti. Väriltään vaaleat pinnat ja kontrastin taustaa vasten muodostavat visuaaliset elementit näkyvät paremmin. Tällä tavoin voidaan vähentää turhia visualisointeja, minkä lisäksi se auttaa käyttäjiä tunnistamaan keskeiset tiedot. Riittävä kontrasti edusta- ja taustaelementtien välillä parantaa näkövammaisten käyttäjien luettavuutta, mikä puolestaan parantaa heidän mahdollisuuksia käyttää ja ymmärtää sisältöä.
Liittymän elementtien yhdenmukainen sijoittaminen ja tyyli vahvistaa hahmon ja taustan suhdetta sekä auttaa käyttäjiä ymmärtämään liittymän rakennetta. Suunnittelumallien ja visuaalisten vihjeiden yhdenmukainen käyttö varmistaa, että käyttäjät erottavat nopeasti edusta- ja taustaelementit eri näytöissä ja konteksteissa. Suunnittelussa olevat epäjohdonmukaisuudet voivat häiritä käyttäjän mielessä olevia malleja ja estää heitä siirtymästä tehokkaasti liittymässä.
Vähäinen kontrasti ja minimaalinen negatiivinen tila vaikuttavat siihen, että valkoiset suorakulmiot hahmotetaan osaksi taustaa
Sivulla oleva kuva on häivytettävä taustalle, jotta käyttäjät voivat keskittyä tärkeään sisältöön
Ryhmittely
Elementit hahmotetaan usein ryhminä, jos ne ovat samalla alueella, jossa on selkeästi määritetty raja.
Liittyvien elementtien ryhmittely visuaalisiin säilöihin, kuten laatikoihin, kortteihin tai reunuksiin, auttaa käyttäjiä hahmottamaan ne yhtenäisenä yksikkönä. Tällä tavoin voidaan järjestää sisältöä ja toimintoja visuaalisesti, mikä helpottaa tietojen tunnistamista ja käsittelyä. Selkeät ryhmittelyt auttavat estämään sekavan liittymän muodostumisen sekä vähentävät sekaannuksia ja tehottomuutta. Ryhmittely on tehokasta myös silloin, kun läheisyys ei ole mahdollista: esimerkiksi näytössä useita ohjausobjekteja kattava sanomapalkki hahmotetaan liittyväksi yksiköksi reunojen ja taustavärin vuoksi.
Ryhmiteltyjen elementtien yhdenmukaisen visuaalisen tyylin ylläpitäminen vahvistaa niiden yhteyttä ja parantaa käytettävyyttä. Samankaltaisten värien, fonttien ja kuvakkeiden käyttäminen näissä elementeissä vahvistaa niiden kuulumista samaan luokkaan tai toimintoon. Visuaalisen esityksen epäjohdonmukaisuudet voivat heikentää hahmotettua ryhmittelyä, minkä vuoksi käyttäjät eivät huomaa elementtien välisiä suhteita tai miksi he tulkitsevat niiden tarkoituksen väärin.
Reunusten lisääminen elementin tai elementtiryhmän ympärille erottaa sen ympäröivistä elementeistä
Sisällön osiointi auttaa käyttäjiä ymmärtämään, että aihe on muuttumassa
Signaalit ja turha tieto
Visuaalisten vihjeiden, kuten viivojen, kontrastien ja välien, avulla käyttäjille ilmoitetaan, että jokin on tärkeää. Jos signaaleja on kuitenkin liian paljon tai jos signaalit korostavat tietoja, jotka eivät ole tärkeitä, signaaleista tulee nopeasti turhaa tietoa.
Keskipisteen periaatteiden, kuten lihavoidun tekstin, kontrastivärien tai kuvakkeiden, avulla voidaan ilmoittaa tärkeistä tiedoista tai toiminnoista käyttäjille. Tärkeät painikkeet tai otsikot voidaan esimerkiksi nostaa esille käyttämällä kirkasta väriä.
Korostamisessa kannattaa käyttää harkintaa, jotta käyttäjät eivät saa liikaa tietoa. Vain käyttäjän tehtävän tai tavoitteen kannalta tärkeät elementit kannattaa nostaa esille. Jos signaaleja on liian paljon, se aiheuttaa sekaannusta ja käyttäjien tekemä priorisointi vaikeutuu. Käyttäjän kannalta tärkeimmän tiedon tunnistaminen ja sen korostaminen sopivalla tavalla. Yleensä suosituksena on käyttää sivulla vain yhtä toimintokutsupainiketta. Lomakkeissa pakollisten kenttien korostaminen auttaa kiinnittämään käyttäjän huomion. Tällä tavoin käyttäjät eivät huku tarpeettomiin tietoihin, vaan heitä autetaan keskittymään oleelliseen.
On varmistettava, että signaalien visuaalinen kieli on yhdenmukainen koko liittymässä. Tämä toimii opastuksena, joka auttaa käyttäjiä tunnistamaan malleja ja hahmottamaan intuitiivisesti eri signaalien merkityksen.
Signaalit räätälöidään kontekstin ja käyttäjän tarpeiden mukaan. Jos käyttäjät esimerkiksi silmäilevät tiettyjä tehtäviä ilmaisevaa liittymää, tärkeä tila ja toimintaa ohjaavat kohteet ilmaistaan selkeästi, jotta niihin kiinnitetään huomiota. Tilannekohtaiset signaalit auttavat käyttäjiä löytämään nopeasti olennaisia tietoja ilman turhien tietojen aiheuttamaa häiriötä.
Signaalit auttavat opastamaan käyttäjiä siirtymään sisällössä ja ilmaisevat, mikä on tärkeää
Turhat visuaaliset tiedot aiheuttavat sekaannusta, joten ne toimivat päin vastoin kuin signaalit
Power Platform – avustaminen
Pohjaan perustuvissa sovelluksissa liittyviä elementtejä ryhmitellään asettelusäilöjen avulla. Parhaassa tapauksessa kaikki sivuelementit järjestetään säilöihin, ja asettelusäilöjen avulla voidaan myös tehokkaasti erottaa alatason säilöt muuttamalla väliominaisuutta.
Mallipohjaisen sovelluksen lomakkeissa liittyviä kenttiä tai elementtejä voidaan ryhmitellä osien avulla.
Yleisiä visuaalisia elementtejä voidaan ottaa yhdenmukaisesti käyttöön uudelleenkäytettävien mukautettujen komponenttien avulla.
Pohjaan perustumissa sovelluksissa signaalit on integroitu modernien ohjausobjektien rakenteeseen. Etenkin painike- ja merkki-ohjausobjektien tyyliominaisuuksissa on vaihtoehtoja, minkä vuoksi ne ovat tehokkaita signaaleja. Optimaalinen viestintä voidaan varmistaa noudattamalla kunkin komponentin kohdalla parhaita käytäntöjä ja käyttämällä signaaleja valikoivasti.
Liittyvät tiedot
- Ryhmittelyn periaatteet
- Hahmopsykologia
- Esteettisyyden ja käytettävyyden suhde
- Fluent UI -mallijärjestelmän välivalikoima