Asettelun optimointia koskevat suositukset
Koskee tämän Power Platform Well-Architected -käyttökokemuksen optimoinnin tarkistusluetteloa koskevia suosituksia:
| XO:06 | Ylläpidä käytettäviä ja visuaalisesti houkuttelevia asetteluja näytöissä, joissa on eri koot ja tarkkuudet. Voit hahmontaa sisältöä dynaamisesti eri tavoilla mukautuvien tekniikoiden avulla. |
|---|
Tässä oppaassa kerrotaan sellaisten näyttöjen asetteluiden suunnittelua koskevista suosituksista, joissa on helppo siirtyä ja jotka mukautuvat sujuvasti erilaisia laitteita varten. Näin varmistetaan, että käyttäjillä on yhtenäinen ja optimaalinen katselukokemus käytettävästä laitteesta riippumatta.
Määritelmät
| Termi | Määritelmä |
|---|---|
| Näyttöikkuna | Digitaalisen käyttöliittymän näkyvä osa, kuten verkkoselain tai mobiilisovellus, jossa sisältö näytetään. Näyttöikkunat liitetään usein laiteluokkiin (matkapuhelin, tabletti tai pöytätietokone) näytön dimensioiden ja tarkkuuksien perusteella. |
| Keskeytyskohdat | Tietyt pikseliarvot, jotka määrittävät mukautuvan asettelun toiminnan määrittämisessä käytettävät näyttöikkunat. |
Tärkeimmät suunnittelustrategiat
Reagoivat asettelut sisältävät joustavia ja tehokkaita käyttökokemuksia, joita voi käyttää eri kokoisissa ikkunoissa. Ne mukautetaan skaalaamalla sisältöä, järjestämällä elementtejä uudelleen ja näyttämällä tekstiä ja kuvia valikoivasti. Vastuulliset asettelut vastaavat käyttäjien tarpeita näyttö koosta riippumatta.
Yhtenäisen sovelluskehyksen määrittäminen
Sovelluskehys sisältää joukon ohjausobjekteja, jotka ovat käytettävissä kaikissa näytöissä yhdenmukaisesti. Se koostuu kolmesta pääosasta, jotka ovat otsikko, siirtyminen ja sisältöalue. Yksinkertaiset sovellukset voivat käyttää otsikko-osaa joustavasti, kun taas kehittyneemmät sovellukset käyttävät usein sivusiirtymistä useiden sivujen ottamiseksi käyttöön. Aliosat ovat mukautettavia. Voit esimerkiksi liittää yleisen haun otsikkoon tai ryhmäkohteet sivusiirtymiseen sovelluksen vaatimusten mukaisesti.
Sovelluskehyksen kolme tärkeintä aliosaa:
Otsikko on pääosa, joka on suunniteltu jokaisen sisäisen sovelluksen osaksi. Se koostuu aliosista, joiden avulla käyttäjät voivat käyttää koko järjestelmän toimintoja. Otsikko auttaa käyttäjiä suunnistamaan käyttöliittymässä ja tarjoaa yhdenmukaisuutta käyttökokemuksissa. Se näkyy sovelluskehyksen yläosassa, ja sen tulisi näkyä sovelluksen kaikilla sivuilla. Se voi myös isännöidä yleisiä komentoja, kuten hakua, asetuksia, ilmoituksia, palautetta, profiilia tai ohjetta. Sovelluksen nimen on oltava aina näkyvissä. Parhaassa tapauksessa ne ovat myös valittavissa olevia linkkejä aloitus- tai saapumissivulle. Otsikon on oltava reagoiva niin, että komennot siirretään ylivuodon hallintaan näyttöikkunoihin, joiden koko on enintään 600 kuvapistettä. Hakusyötteen leveys on myös reagoiva, ja sen koko on alle 1 023 kuvapistettä.
Siirtyminen on yhdessä toimivien ohjausobjektien järjestelmä, jonka avulla käyttäjät voivat etsiä tietoja ja suorittaa tehtäviä. Sen avulla käyttäjät voivat siirtyä osasta toiseen sovelluksessa. Hierarkkisesti sitä ei ole liitetty yhteenkään sivuun tai osaan, mutta se on kaiken muun sisällön yläpuolella. Se on aina esillä, mutta sen voi minimoida tiivistettyyn tilaan (jota kutsutaan myös sivutila), jolloin sivun sisällölle vapautuu tilaa. Jos kyseessä on pieni ikkunakoko, se voidaan minimoida pikaikkunan valikoksi. Yleisimmät siirtymismuodot ovat yläosan ja reunan siirtymisalueet. Molempia ei saa käyttää samanaikaisesti.
Sisältöalue sisältää näytön kohdistuksen. Selainikkunan koko vaikuttaa sisältökehykseen ja pääsisältöalueen käytettävissä olevan tilan. Tämä kehys mukautuu keskeytyskohdan ja kunkin osan vastaavan reagoivan toiminnan perusteella. Lisätietoja on kohdassa Keskeytyskohtamatriisin luominen.
Sisältöalue voi vaihtoehtoisesti sisältää useita alialueita, jotka ovat käytettävissä elementtien yhdenmukaista sijoittamista varten. Näitä elementtejä ovat esimerkiksi sivun otsikko, tekstiin upotetut sivuruudut ja paneelit, jotka ovat peittävät sisältöä.
Yhdenmukaisen suunnittelukielen, joka sisältää värirakenteet, typografian ja asettelun rakenteen, noudattamisen avulla käyttäjät voivat nopeasti tunnistaa ja käsitellä erilaisia elementtejä sekaannuksetta. Mitä yhdenmukaisempi kaikissa sisäisissä yrityssovelluksessa käytettävä sovelluskehysmalli on, sitä vahvemman muistikuvamallin ja mentaalisen mallin käyttäjä saa. Tämä vaikutus voimistuu entisestään, jos käytetään toimialan standardeja ja ympäristön yleisiä malleja.
Kun sovelluskehys on määritetty, jokainen näytön asettelu sijaitsee sovelluskehyksen sisältöalueella.
Sisältöalueen harkittu käyttö
Käyttäjät haluavat saumattomia käyttökokemuksia, joissa tiedot ovat jo valmiiksi käytettävissä, teksti helposti luettavissa ja joissa on käytettävyyttä parantava, ei hankaloittava visuaalinen muotoilu. Priorisoi tärkeimpien tietojen hyvä näkyvyys, varmista luettavuus kaikissa sarakkeissa ja tasapainota rakenne-elementtejä niin, että ne ovat visuaalisesti miellyttäviä.
Varmista, että tärkeät tiedot ovat näkyvissä heti ilman vieritystä, kun näyttö avataan. Priorisoi tärkeiden tietojen, kuten siirtymisvaihtoehtojen, tärkeän sisällön ja toiminnallisten kohteiden, näyttämistä näytön yläosan lähellä. Riittävän kohdemäärän ja kunkin kohteen eriteltyjen tietojen riittävän näyttämisen pitäminen tasapainossa on jatkuva haaste. Vaikka voi olla houkuttelevaa antaa ensimmäisessä näkymässä kaikki mahdolliset tiedot, käyttäjät voivat kokea liialliset tiedot ylivoimaisiksi, jolloin tärkeiden elementtien merkitys vähenee. Voit käyttää tiiviitä yhteenvetoja tai esinäkymiä, joissa näkyy pieni osa yksityiskohtaisesta sisällöstä. Tämä houkuttelee käyttäjiä etsimään lisätietoja. Koontinäytöt on optimoitu näyttämään suuria tietomääriä tätä tarkoitusta varten.
Järjestä sisältö loogisesti ja maksimoi tila sisällyttämällä useita sarakkeita, osia tai ryhmittelyjä. Kiinnitä erityistä huomiota sarakkeiden leveyteen ja varmista, että teksti pysyy luettavana ilman liiallista vaivannäköä. Vältä liian kapeita sarakkeita, jotka pakottavat käyttäjiä jatkuvasti vierittämään vaakasuuntaisesti. Tämä häiritsee vuorovaikutusta. Liian leveät sarakkeet taas voivat haitata luettavuutta, koska käyttäjien on seurattava pitkiä rivejä. Pyri tasapainoon, joka tulee miellyttävää lukemista ja samalla käyttää tilan tehokkaasti hyväksi.
Määritä visuaalisten elementtien koko ja sijainti sopivasti, jotta tuloksena on visuaalisesti miellyttävä ja tasapainoinen käyttöliittymä. Kohdista tekstit vastaaviin visuaalisiin tehosteisiin ja otsikoihin, ylläpidä yhdenmukaisia elementtien välejä ja noudata hierarkiaa käyttäjän tarpeiden perusteella. Rajaa tarpeettomat koristelut pois ja kohdista kuvapisteet harkitusti kaikkein tärkeimpiin elementteihin. Priorisoi ja korosta sisältöä ja siirtymiselementtejä erityisesti, jos kysymyksessä on sovellus tai aloitussivu, jossa käytetään paljon siirtymistä. Vältä turhaa koristelua, joka heikentää käytettävyyttä.
Taustalla oleva ruudukko voi olla hyödyllinen elementtien yhdenmukaisessa järjestämisessä. Valitun ruudukon toiminnan on oltava yhdenmukaista sovelluksen jokaisen näytön sisältöalueella. Se voidaan ottaa käyttöön myös osatasolla, kuten korteissa tai sivuruuduissa. Ruudukon asettelun yleisin tyyppi verkkosovelluksissa on sarakeruudukko. Reagoivien näyttöjen käyttöönotossa suositellaan liukuvan (tai venyvän) ruudukon toimintaa.
Luotujen asettelujen ja ryhmittelymallien käyttäminen
Käytä sisällön ja elementtien järjestämisessä käyttöliittymässä yleisesti hyväksyttyjä rakenteita ja asetteluita. Näitä asetteluja ja malleja on tarkennettu ja ne on todettu tehokkaiksi ajan kuluessa. Ne ovat käyttäjille tuttuja ja intuitiivisia käyttää, ja niihin on helppo ottaa käyttöön mukautuvia malleja. Kun pääskenaariot ja -elementit on tunnistettu, yhdistä kukin luotuun asetteluun, joka sisältää parhaan vuorovaikutuksen. Priorisoi sisältö ja ominaisuudet, jotka ovat tärkeitä tehtävän suorittamisessa. Määritä elementit, jotka ovat aina näkyvissä ja käytettävissä näytössä sekä ne, jotka voidaan piilottaa tai joita voidaan käyttää muiden valikoiden tai toimintojen kautta.
Seuraavassa luettelossa esitellään joitakin yrityksen ja tuottavuussovellusten usein käyttämiä luotuja asetteluita. Kaikki on mahdollista tehdä pääsisällön alueella.
Saapumis- tai aloitusnäyttö
Saapumis- tai aloitusnäyttö toimii sovelluksen aloituskohtana, josta käyttäjä saa yleiskatsauksen sovelluksen tarjonnasta ja ominaisuuksista. Yleensä tarkoitus on kiinnittää vierailijoiden huomio ja kannustaa tiettyihin toimintoihin, kuten ensimmäisen kerran tehtävien suorittamiseen ja sisällön tutkimiseen. Se sisältää usein hero-kuvia ja selkeät siirtymisvaihtoehdot.
Sen avulla voi toivottaa käyttäjät tervetulleiksi, käyttää tärkeitä toimintoja nopeasti, näyttää siirtymisvaihtoehtoja ja toimintokutsuja sekä määrittää sovelluskokemuksen sävyn. Priorisoi selkeyttä, yksinkertaisuutta ja intuitiivista siirtymistä, jotta käyttäjien ohjaaminen on tehokasta.
Raporttinäkymä
Koontinäyttö keskitetty keskus näyttää käyttäjille kattavan olennaisten tietojen yleiskatsauksen. Se sisältää usein mukautettavia pienoisohjelmia ja moduuleja, joiden avulla käyttäjät voivat valvoa tiettyjä mittareita ja suorittaa toimintoja.
Koontinäyttöjä voi käyttää sovelluksissa, joissa on monimutkaisia tietojoukkoja ja monivaiheisia toimintoja. Niiden avulla käyttäjät voivat seurata edistymistä, analysoida trendejä ja tehdä tietopohjaisia päätöksiä. Ne ovat erityisen hyödyllisiä analyysiympäristöissä, projektinhallintatyökaluissa ja taloushallinnon sovelluksissa.
Lomake
Lomake on rakenteellinen asettelu, joka helpottaa käyttäjien tietojen syöttämistä. Se koostuu yleensä kentistä, joihin syötetään erilaisia tietotyyppejä, kuten tietoja, numeroita, päivämääriä ja valintoja. Lomakkeet ovat olennaisia käyttäjien syötteiden keräämisessä, tapahtumien käsittelyssä ja sovellusten vuorovaikutuksen helpottamisessa.
Niitä käytetään yleensä rekisteröintityövaiheissa, uloskuittausprosesseissa, tietojensyöttötehtävissä ja kaikissa skenaarioissa, joissa käyttäjä syöttää tietoja tai antaa palautetta.
Entiteetti- tai profiilinäkymä
Entiteetti- tai profiilinäkymä näyttää yksityiskohtaisia tietoja tietystä entiteetistä, kuten käyttäjäprofiilista, tuoteluettelosta tai sisältökohteesta. Se sisältää yleensä kuvailevaa tekstiä, multimediaelementtejä sekä liittyviä toimintoja ja vuorovaikutusta.
Ne sopivat hyvin sovelluksen kohteiden yksityiskohtaisten tietojen näyttämiseen. Ne tarjoavat käyttäjille yksityiskohtaisia merkityksellisiä tietoja, helpottavat päätöksentekoa ja tukevat osallistumista tiettyihin entiteetteihin, kuten yhteisöpalvelusovellusten käyttäjäprofiileihin ja sähköisen kaupankäynnin ympäristöjen tuoteluetteloihin.
Luettelosivu
Luettelo tai taulukko näyttää kohteiden tai entiteettien kokoelman rakenteellisessa muodossa, joka näytetään usein lineaarisessa asettelussa tai ruudukkoasettelussa. Se sisältää yleensä lyhyitä yhteenvetoja tai kunkin kohteen esikatseluja sekä siirtymisen ohjausobjekteja selaamista ja suodatusta varten.
Luettelosivuilla voi tehokkaasti esittää suuria sisältö- ja tietojoukkoja helposti luettavassa muodossa. Niiden avulla käyttäjät voivat tehdä tarkistuksia ja hakuja sekä siirtyä tehokkaasti. Jos tietyillä riveillä on otettu käyttöön toimintoja, prosessin on oltava selkeä. Luettelosivuja käytetään yleensä sisällönhallintajärjestelmissä, hakemistoluetteloissa, hakutuloksissa ja uutissyötteissä
Pieni tarkistus (jaettu näyttö)
Pieni tarkistus tai jaettu näyttö jakaa liittymän kahteen erilliseen osaan. Toinen on vasemmalla puolella oleva luettelo ja toinen oikealla puolella oleva kohdenäkymä. Luettelo sisältää yleensä kohteiden kokoelman, ja kohdenäkymässä on yksityiskohtaisia tietoja luettelosta valitusta kohteesta.
Tämä asettelu on erityisen tehokas skenaarioissa, joissa käyttäjien on selattava kohdeluetteloa nopeasti ja tarkasteltava yksityiskohtaisia tietoja kustakin kohteesta samanaikaisesti. Näin tapahtuu esimerkiksi suoritettaessa joukkotoimintoja. Tuoteluettelot, tiedostojen hallintajärjestelmät, sähköposti- ja tietoliikenneasiakasohjelmat sekä tehtävien hallintatyökalut (esimerkiksi Azure Dev Ops -kyselyn katseluohjelma) ovat skenaarioita, jotka yleensä sopivat tähän malliin.
Ohjattu toiminto
Ohjattu toiminto opastaa käyttäjiä peräkkäisten vaiheiden tai tehtävien läpi yleensä lineaarisesti monimutkaisen prosessin suorittamiseksi loppuun tai tietyn tavoitteen saavuttamiseksi. Se sisältää usein edistymisen ilmaisimia, kehotteita ja vahvistustarkastuksia. Ohjatuilla toiminnoilla voi yksinkertaistaa monimutkaisia prosesseja, vähentää kognitiivista ylikuormitusta ja opastaa käyttäjiä tehtävissä ja työnkuluissa, jotka eivät ole heille ennestään tuttuja. Niitä käytetään yleensä käyttöönoton työnkuluissa, määritysprosesseissa, monivaiheisissa lomakkeissa ja tehtäväpohjaisessa vuorovaikutuksessa, kuten monitasoisten asetusten ja tapahtumien määrittämisessä.
Vakioasettelua voi mukauttaa ja käyttää pohjana tiettyjen tarpeiden mukaisesti. Tämä prosessi voi sisältää elementtien lisäämisen tai poistamisen, elementtien koon ja sijoittamisen muuttamisen sekä tuotemerkin identiteetin ja visuaalisten suunnitteluohjeiden yhdenmukaistamisen tyylin avulla. Erilaisia määrityksiä ja vakioasetteluja kokeilemalla on mahdollista löytää kaikkein tehokkain määritys sisältöä ja yleistä käyttökokemusta varten.
Kaikkien laitteiden asetteluiden suunnitteleminen
Asettelut ovat määritettyjen sääntöjen ja sisällön järjestämisen lähtökohta. Sisällön tuominen harkittuihin rakenteisiin on tärkeää, mutta jotta kaikki toimii yhdessä selkeän hierarkian kanssa eri ympäristöissä ja eri kokoisissa näytöissä edellyttää skaalauslogiikan käyttöä. Tässä haasteessa voidaan käyttää sekä yksittäistä, mukautuvaa että reagoivaa rakennetta. Joissakin tapauksissa oikea vaihtoehto on mukautuvan ja reagoivan rakenteen yhdistelmä.
Reagoiva rakenne käyttää vain yhtä asettelua, jossa sisältö on joustavaa ja muodon koon muuttumiseen reagoivaa. Tämä rakennetekniikka käyttää tietyn laitteen ominaisuuksien tarkistamisessa tietovälinekyselyjä, ja sisältö hahmonnetaan vastaavasti. Reagoivan rakenteen ansiosta on mahdollista luoda ominaisuus kerran, jonka jälkeen se toimii tehokkaasti kaiken kokoisissa näytöissä.
Mukautuva asettelu muuttuu kokonaan sen mukaan, missä muodossa se esitetään. Mukautuva rakenne sisältää useita kiinteän asettelun kokoja, ja se käynnistää selaimen annetun asettelun lataamiseksi käytettävissä olevan tilan perusteella. Mukautuvan rakenteen avulla rakennetut sivustot havaitsevat keskeytyspisteitä käyttämällä tietovälinekyselyjä samalla tavalla kuin reagoiva rakenne. Niissä käytetään myös lisämerkintöjä laitteen ominaisuuksien perusteella. Tätä prosessia kutsutaan progressiivisiksi parannukseksi.
Sijoittaminen uudelleen
Muuta sivun elementtien sijaintia.
Pidä sisältö järjestyksessä, luettavissa ja tasapainossa optimoimalla kokoonpanoa ikkunan koon kasvaessa. Esimerkiksi mobiilinäyttöikkunan pinotut elementit voidaan sijoittaa uudelleen vaakasuuntaisesti suurissa näyttöikkunoissa. Muutos seuraa luonnollista vasemmalta oikealle kulkevaa lukujärjestystä. Se luo tasapainoa rakenteeseen ja ylläpitää visuaalista kohdistusta sivun tärkeissä elementeissä.
Muuta kokoa
Muuta sivun elementtien kokoa ja marginaaleja.
Muuttamalla sivun elementtien kokoa käyttökokemuksesta saadaan aiempaa monipuolisempi, koska ikkunan yläosassa on enemmän sisältöä, eikä sivua tarvitse vierittää pystysuunnassa. Sivun marginaaleja muuttamalla asetteluun voi lisätä tyhjää tilaa, jolloin tasapaino paranee. Sisältö on ilmavampaa, ja rakenteen visuaalinen ulkoasu paranee. Esimerkiksi hero-osa voi olla koko ikkunan levyinen, jotta taustakuva näkyy paremmin. Kuvan alla oleva sisältö voidaan laajentaa, mutta se käyttää eri marginaaleja, jolloin asetteluun saadaan vaihtelua. Tämä auttaa visuaalisen hierarkian määrittämisessä.
Suorita työnkulku uudelleen
Optimoi sivun elementtien työnkulku.
Sivun elementtejä muokkaaminen niin, että ne ovat kokonaan näkyvissä, koska ikkunan koko ja suunta otetaan huomioon, kun sisältöä järjestetään uudelleen. Esimerkiksi pienen näyttöikkunan sisällön yksittäinen sarake voidaan siirtää suuressa ikkunassa näyttämään kaksi tekstisaraketta. Tämä tekniikka sallii sisällön näyttämisen sivun yläosassa.
Näyttäminen/piilottaminen
Optimoi sisältöä ikkunan koon ja suunnan mukaan.
Näytä tai piilota sivun elementit optimoidaksesi sisältöä ikkunan koon ja sen suunnan mukaan. Tämä reagoiva tekniikka mukauttaa tietojen määrää katselun kontekstin mukaan. Esimerkiksi pienessä näytössä näkyvät luokat voivat näyttää rajoitetut metatiedot, kuten kuvan, otsikon ja linkin. Muut tiedot näytetään, jotta käyttäjän huomio säilyy. Suurissa näytöissä luokat voivat näyttää muita metatietoja, kuten henkilön, päivämäärän ja lyhyen kuvauksen, jotka sopivat näyttöikkunaan hyvin.
Arkkitehtuurin uudistaminen
Suorita sivun elementeille ja sisällölle fork-toiminto tai tiivistä ne, jos haluat säilyttää kohdistuksen tärkeissä tiedoissa ja toiminnoissa.
Tämä menettely muistuttaa progressiivisen tietojen antamisen käytäntöä, mutta sitä käytetään erikokoisissa ikkunoissa ja erilaisissa suunnissa. Esimerkiksi ikkunan laajentaminen mahdollistaa kohdeluettelon näyttämisen tietojen vieressä. Tämä visuaalinen linkki sisällön välissä antaa käyttäjille mahdollisuuden valita toinen kohde helposti. Pienissä näytöissä kohdistus säilyy tärkeiden tietojen näyttämisessä.
Keskeytyskohtamatriisin luominen
Keskeytyskohtamatriisi toimii graafisena kuvauksena, joka näyttää sovelluksen rakenteen reagoivan ja mukautuvan toiminnan kooltaan ja suunnaltaan erilaisissa näytöissä. Se näyttää yleensä rakenteellisen ruudukon tai asettelun, jossa on rakenteen vastauksen yksityiskohtaiset tiedot eri keskeytyskohdissa. Kukin segmentti vastaa erillistä näytön leveyttä, ja se sisältää merkityksellisiä tietoja rakenteesta, asettelusta ja toiminnoista. Keskeytyskohtamatriisi käsittää näytön leveyteen, näyttöikkunan suunnan, rakenteen elementit, asettelun rakenteen, sisällön esittämisen, siirtymisen, tietovälineen ja vuorovaikutteiset osat. Niitä käytetään esitettäessä, miten sivuston ja sovelluksen rakenne reagoi näytöissä, jotka ovat eri kokoisia ja joilla on erilaiset suunnat. Tämä menettely auttaa kunkin näytön rakenteen viimeistelyssä sekä käyttöönotossa, kun tärkeän osan ominaisuuden muutoksia seurataan eksplisiittisesti ja kun niistä kerrotaan.
Power Platform – avustaminen
Mallipohjaisten sovellusten lomakkeiden asettelut määritetään Power Apps Studion avulla. Lomakkeiden suunnitteluohjelma antaa tekijöille mahdollisuuden lisätä elementtejä ruudukkorakenteeseen. Näin lomakkeiden sivuista tulee luonnostaan reagoivia. Upotetuissa mukautetuissa osissa, kuten mukautetuissa sivuissa, upotetuissa kaavion osissa ja Power Apps Component Framework -koodikomponenteissa, on oltava reagoivaa toimintaa toteutuksissa. Esimerkiksi mukautettujen sivujen on otettava käyttöön reagoivaa toimintaa samalla tavalla kuin pelkät pohjaan perustuvat sovellukset, jotta ne toimivat oikein.
Pohjaan perustuvissa sovelluksissa on tehtävä eksplisiittinen määritys jokaiselle osalle reagoivan toiminnan ottamiseksi käyttöön. Näin käyttökokemuksen hallinta paranee. Näyttöjen koot määräytyvät sovelluksen määrityksen mukaan. Tähän voidaan viitata sijainnin, toiminnan, näkyvyyden ja muiden olennaisten ominaisuuksien määrittämiseksi.