Copilot ei kykene (vielä) tekemään Canvas Power Appseja puolestamme (Kyllä, olen testannut uutta Plan designeria sekä nykyisiä Power Appsin copilotteja). Tämä ei kuitenkaan tarkoita sitä ettei tekoälyä voi hyödyntää Power Appsien teossa.

Mutta miten tekoäly voisi auttaa meitä yhdessä silmiinpistävässä ongelmassa, joka useassa näkemässäni Power Appsissa on?

Hirvittävän näköisessä käyttöliittymässä.

Syy viimeistelemättömän näköisiin käyttöliittymiin on luonnollinen. Power Appsien teossa on valitettavan harvoin mukana käyttöliittymäsuunnitteluun ja/tai visuaaliseen ilmeeseen erikoistunutta henkilöä. Nämä kaksi asiaa kulkevat usein käsi kädessä. Keskitytään tällä kertaa puhtaasti sovelluksen ulkoasun siistimiseen.

Esimerkki – Asiakasvastaavan mobiilisovellus

Tehdään sovellus, jolla asiakasvastaava pääsee käsiksi kaikkii työssään oleellisiin tietoihin.

Aloitusnäyttö koostuu seuraavista elementeistä:

  • Yläbanneri, jossa on sovelluksen nimi
  • Asiakasvastaavan perustiedot (name, address, status)
  • Asiakasvastaavan vastuulla olevat asiakkaat (accounts)
  • Footerissa oleva navigaatio (Home, My Tasks, My Hours, Settings)

Säilöjen (container) avulla rakennettu responsiivinen sovellus näyttää ilman sen kummempia viilauksia todennäköisesti tältä.

Meillä ei ole käytössämme visuaalista suunnittelijaa, joten otetaan Copilot avuksi. Voisiko se antaa vinkkejä miten ulkoasusta saisi siistimmän?

Siistimpi UI – Copilot

Annetaan Copilotille kuva käyttöliittymästä sekä ohjeet

  • Lyhyt kuvaus mitä kokonaisuuksia näytöllä on
  • Erota käyttäjän tiedot ja asiakaslista visuaalisesti toisistaan
  • Lisää kaikkialle riittävästi tyhjää tilaa
  • Käytä annettuja brändivärejä

Copilot antaa kirjalliset ohjeet ulkoasun parantamiseksi. Värit ovat mukana, mutta tarkat fonttien koot ja marginaalit puuttuvat. Tieto siitä että yläbannerilla tulee olla ”Generous top and bottom padding” ei paljoa lämmitä.

Mutta voimme pyytää Copilotilta esimerkin näytöstä!

Lopputulos on hieman yllättävä. Saamme visuaalisesti näyttävän ehdotuksen jossa tiedot on jaettu kahdelle näytölle. Copilot on lisännyt näytöille uutta sisältöä, joita kuvasta on vaikea tunnistaa. Aloitusnäytön osoitekenttä on liian lyhyt (arvona ”46”) ja toisen näytön sisältö on niin tuhruista, etten oikein tiedä mitä siinä on tarkoitus esittää.

Ei nyt aivan kelvotonta. Tämä on kuitenkin enemmän fiiliskuva, josta voisi ottaa vaikutteita suunnitteluvaiheessa. Nyt tämä tulee hieman myöhään. Haluaisin vain ehdotuksen siitä miten nykyistä näyttöä voisi siistiä.

Pyydetään Copilotilta kuitenkin vielä uusi versio, jossa kaikki tiedot ovat samalla näytöllä.

Lopputulos on äskeistäkin villimpi.

Siistimpi UI – Copilot (toinen yritys)

Mutta voi ei! Minähän käytin Copilottia väärästä paikasta. Eli vanhaa versiota.

Siirrytään osoitteeseen https://m365.cloud.microsoft/chat jossa meitä odottaa uunituore versio M365 Copilot Chatista. Sen pitäisi käyttää kuvien generoinnissa kehittyneempää kielimallia.

Lopputulos ei ole kyllä ainakaan parempi.

Ei lannistuta. Yritetään vielä Visual Creator Agentilla.

Ok. Luovutan.

Siistimpi UI – ChatGPT

Käytän työssäni Microsoftin Copilotin lisäksi myös ChatGPT:tä. Syy on ilmeinen. Niillä on omat vahvuutensa.

Annetaan ChatGPT:lle alkuperäinen kuva Power Appsista ja samat ohjeet kuin Copilotille.

ChatGPT aloittaa Copilotin tapaan antamalla ohjeet tekstimuodossa. Tällä kertaa ohjeet sisältävät myös marginaalien määrät, fonttien värit ja koot sekä paljon muuta mikä Copilotin vastauksesta uupui.

Pyydetään lopuksi kuva ehdotetusta käyttöliittymästä.

Ei tämä mikään mestariteos ole. Mutta juuri sitä mitä hain. Visuaalisesti siistitty versio työstämästäni sovelluksesta.

ChatGPT:n ehdottamien muutosten toteuttaminen

Teen ensin muutokset noudattamalla ChatGPT:n antamia ohjeita. Tämä kaikki katsomatta lopussa pyytämääni esimerkkikuvaa.

Tämän jälkeen teen uuden kierroksen hyödyntäen ChatGPT:n muodostamaa esimerkkikuvaa. Siitä voi poimia mukaan ohjeista puuttuneet tai epäselvät yksityiskohdat.

Sovellus näyttää nyt tältä. Selvä parannus alkuperäiseen. Aikaa tähän kaikkeen meni noin 30min.

Mutta miksi tyytyä tähän? Pyydetään chatGPT:ltä parannusehdotuksia juuri tekemäämme uuteen versioon.

Ja näin iterointi jatkuu.

Copilot/ChatGPT ja YAML

Voisiko tekoälyn ehdottamat muutokset toteuttaa jotenkin helpommin? Canvas Power Apps on käytännössä YAML-koodia.

Alkuperäisen näyttömme koodi näyttää tältä. Yhteensä 404 riviä.

Pyydetään Copilottia luomaan YAML-koodi antamastamme näytönkuvasta. Ja sehän kiltisti generoi sellaisen.

Valitettavasti Copilotin koodi ei toimi Power Appsissa. Syy selviää kun sitä vertaa alkuperäisen näyttömme koodiin. Syntaksi on eri ja pituuttakin ehdotetulla koodilla on ainoastaan 58 riviä.

Lopputulos ei ole sen parempi ChatGPT:llä. Vaikka molemmille antaisi alkuperäisen näytön koodin referenssiksi. Tai linkkejä dokumentaatioon aiheesta.

No ehkä tämä tulee toimimaan vielä joskus.

Yhteenveto

Mikäli visuaalinen silmäsi on keskimääräisellä tasolla, eikä sinulla ole käytettävissäsi ammattisuunnittelijaa, voit kohentaa kummasti Power Appsiesi visuaalista ilmettä tekoälyä hyödyntämällä. Suosittelen kokeilemaan useaa työkalua parhaan lopputuloksen saavuttamiseksi.

Testaamissani avustajissa oli selkeä ero

  • Microsoft Copilot kykenee luomaan fiiliskuvia suunnittelun ideoinnin pohjaksi
  • ChatGPT kykenee antamaan tarkat ohjeet miten jo tehdyn sovelluksen ulkoasua voi parantaa

Mutta onhan tämä nyt selvä parannus pienellä vaivalla. Ei se mitään ammattilaisen jälkeä ole. Mutta parannus.