Blog

8 tekoälytyökalua UX- ja UI-suunnitteluprosessisi tueksi

DEC 12, 2023

Tekoälystä (AI) on kiistatta tullut merkittävä osa suunnitteluprosessia. Tekoälyohjatussa ajassa UX/UI-suunnittelijoiden on tärkeää omaksua tekoälytyökalut ja ottaa ne osaksi päivittäistä työnkulkuaan.

Chi Pham

Chi is a UX/UI designer obsessed with data-driven design and user psychology. Utilizing an analytical mind from her engineering background with creative thinking that she learned through work and her MA, she designs digital experiences that people enjoy.

Tutkimukseni ja kokeilujeni kautta olen tutustunut erilaisiin tekoälytyökaluihin ja arvioinut niiden soveltamista suunnitteluprosessiini aina kartoitusvaiheesta lopulliseen toimitukseen asti. Tarkastellaan hypoteettisen esimerkin avulla, miten tekoäly voi parantaa suunnitteluprosessiamme.

Kuvittele, että pyörität yritystä, jonka kautta ihmiset voivat varata alpakoita tapahtumiinsa. Käytettävissäsi on kuusi alpakkaa, ja eläinten hyvinvoinnin varmistamiseksi asiakkaat voivat varata enintään kaksi alpakkaa korkeintaan kahdeksi tunniksi. Tällä hetkellä asiakkaat voivat tehdä varauksia vain puhelimitse, mikä tekee prosessista hankalan ja resursseja vievän sekä vaikeuttaa aikataulun tehokasta hallintaa.

Järjestelmän sujuvoittamiseksi ja modernisoimiseksi päätät digitalisoida varausprosessin. Hyödynnetään tekoälyä kattavan digitaalisen varausjärjestelmän kehittämiseen alusta loppuun.

Tekoälytyökalujen tehokas käyttö

ChatGPT

Tiedän, että tämä voi tuntua itsestään selvältä ja saatat ajatella: ”Tiedän jo, mitä kaikkea ChatGPT:llä voi tehdä.” Mutta odota – kyse on paljon muustakin kuin Lorem Ipsumin korvaamisesta.

ChatGPT voi herättää käyttäjäpersoonat eloon luomalla vastauksia, jotka jäljittelevät aitoja käyttäjävuorovaikutuksia. Tässä tapauksessa voimme hyödyntää ChatGPT:tä alustavien ideoiden luomiseen UX:n ja tutkimuksen näkökulmasta. Katsotaan, voiko se auttaa meitä ymmärtämään kohderyhmäämme.

Tässä on alkuperäinen kehotteeni:

CHATGPT example 1

ChatGPT antoi varsin hyvän ehdotuksen aloitukseen:

Chat GPT EXAMPLE 2

Kuvitteellisen skenaarion esittäminen voi tukea merkittävästi koko empatian rakentamisen prosessia. Tarkastellaan, miten ChatGPT voi auttaa käyttäjäpersoonien luomisessa.

chatgpt example 3

ChatGPT:tä voi käyttää inspiraation lähteenä täydentämään tehokkaasti olemassa olevia käyttäjäpersoonia. Tämä on erityisen hyödyllistä projekteissa, joissa budjetti tai aika on rajallinen ja perinteisiä käyttäjätutkimusprosesseja voi olla vaikea toteuttaa. On kuitenkin tärkeää tunnistaa myös tämän lähestymistavan haitat.

Tällä lähestymistavalla saadut havainnot voivat olla hypoteettisia ja poiketa huomattavasti todellisten käyttäjien kokemuksista. Mielestäni menetelmä voi tarjota arvokkaita näkemyksiä, mutta siihen on suhtauduttava varovaisesti. Sitä tulisi mahdollisuuksien mukaan tasapainottaa vankemmilla käyttäjätutkimusmenetelmillä.

QoQo

QoQo:n avulla voit luoda käyttäjäpersoonia, parantaa UX-kirjoittamista, luoda käyttäjäpolkuja ja jopa laatia käsikirjoituksia käyttäjähaastatteluihin. ChatGPT:hen verrattuna sen tekee kätevämmäksi integrointi Figma-pluginina.

QoQo works as a plugin on Figma.

Huomio: QoQo toimii Figma-pluginina.

Nyt kun olemme tunnistaneet kohdeasiakkaat ja käyttäjäpersoonat, visualisoidaan ne ja luodaan QoQo:n avulla asiakaspolkukartta. Hyödynsin yhtä ChatGPT:n luomista persoonista, ja QoQo kehitti sitä edelleen yksityiskohtaisemmaksi.

QoQo1
QoQo2

Kokeiltuani QoQo:ta riittävän yksityiskohtaisella toimeksiannolla sain vaikutelman, että se on erityisen hyvä harkittujen persoonien ja asiakaspolkukarttojen luomisessa.

Pidän sitä erittäin hyödyllisenä lähtökohtana empatian rakentamiseen kohdeasiakkaita kohtaan. Se on erinomainen työkalu erityisesti työpajojen valmisteluun ja yhteistyöhön sidosryhmien kanssa.

QoQo säästää aikaa ja tarjoaa kattavan lähtökohdan, joka kattaa lähes kaikki käyttäjäpolun osa-alueet. Todellisen käyttäjädatan hankkiminen on kuitenkin tärkein ja uskottavin tapa tukea suunnittelupäätöksiä. Siksi on olennaista tiedostaa, ettei tämä työkalu voi korvata suunnitteluprosessin käyttäjätutkimus- ja kartoitusvaihetta.

TheyDo

TheyDo auttaa luomaan käyttäjäpolkuja, jotka edistävät toimintojen välistä yhteistyötä ja oivaltavaa analyysia. Työkalu automatisoi havaintojen kartoittamisen sekä poimii ja luokittelee keskeiset löydökset asiakaspalautteesta ja haastatteluista. Se tunnistaa ja nostaa esiin jopa vaikuttavimmat teemat, mikä tekee siitä arvokkaan työkalun suunnitteluprosessiin.

TheyDo

Valitettavasti en ole vielä päässyt kokeilemaan TheyDon journey AI -ominaisuuksia, sillä niitä kehitetään edelleen, joten en voi antaa tästä tekoälytyökalusta konkreettista arviota. Perusominaisuuksien perusteella yksi QoQo:ta hyödyllisemmältä vaikuttava piirre on kuitenkin kyky tuoda käyttäjätutkimuksen havainnot ohjelmistoon ja luoda niiden pohjalta käyttäjäpolku.

Tekoäly auttaa luokittelemaan dataa ja muuttamaan sen toimenpiteitä ohjaaviksi havainnoiksi. Koska en ole vielä kokeillut sitä, suhtaudun hieman epäilevästi siihen, kuinka tehokkaasti se pystyy käsittelemään käyttäjätutkimusdataa sen laajuuden ja monimuotoisuuden vuoksi. Käyttäjätutkimusdata sisältää sekä määrällistä että laadullista tietoa, ja laadullisen datan käsittely voi olla hieman haastavaa.

Relume

Tämä tekoälytyökalu on erityisen hyvä tuottamaan nopeasti sivustokarttoja ja rautalankamalleja hyödyntämällä monipuolista komponenttikirjastoa, jonka avulla asettelua voi muokata vaivattomasti. Valmiit suunnitelmat voidaan tuoda sujuvasti Figmaan.

Automate wireframe from sitemap with the component library.

Palataanpa alpakkojen vuokrauksen varausjärjestelmää koskevaan esimerkkiimme. Relume AI tarjoaa lähtökohdan sivukartalle erityisesti silloin, kun sille annetaan yksityiskohtainen prompti, sillä se parantaa tuloksia ja tekstisisältöjä.

Se toimii sekä inspiraationa että muokattavana pohjana, jonka avulla sivukarttaa on helppo muokata. Tämä puolestaan helpottaa rautalankamallien luomista todellisella sisällöllä yleisen Lorem Ipsum -tekstin sijaan, mistä pidän.

Työkalu on erityisen hyödyllinen responsiivisessa suunnittelussa, sillä sen kirjaston avulla voi testata erilaisia asetteluja tai mukauttaa niitä omien ideoidensa pohjalta. Kokemukseni mukaan se vähentää merkittävästi rautalankamallien luomiseen käytettävää manuaalista työtä, jolloin aikaa jää enemmän olennaisiin tehtäviin, kuten ratkaisujen iterointiin ja käyttäjätestauksen valmisteluun näiden yksityiskohtaisten rautalankamallien avulla.

A sitemap for an Alpaca booking system service.
Wireframe with three screen sizes.

UIzard

The wireframe created by UIzard for our Alpaca booking service.

Mielestäni yllä oleva rautalankamalli ei liity aiheeseen lainkaan. Näyttääkö se mielestäsi tutulta? Se muistuttaa Airbnb:n asettelua.

Ilmaisversiossa UIzard luo promptisi perusteella vain rautalankamallin ja näyttää käyttöliittymän esikatseluna. Kun UIzardin luomia rautalankamalleja vertaa Relumen malleihin, UIzardin mallit vaikuttavat kuitenkin vähemmän viimeistellyiltä. Tulokset ja sisältö eivät vastaa promptia yhtä hyvin. UIzard käyttää esimerkiksi Lorem Ipsum -tekstiä, joten rautalankamallin arvoa on vaikea nähdä yleistä asettelua pidemmälle.

Lisäksi luotu käyttöliittymä vaikuttaa karkealta eikä sovellu valmiiksi suunnitelmaksi, vaan se vaatii merkittäviä muutoksia. Asettelu on melko yleinen ja tarjoaa vain vähän inspiraatiota.

UI preview based on the AI-generated wireframe.

Luodaan käyttöliittymä uudelleen ja siirrytään sen avulla seuraavaan vaiheeseen:

Alpaca

Attention Insight

Attention Insight on tekoälypohjainen työkalu, joka tarjoaa huomiolämpökarttoja mahdollisten toimivuusongelmien tunnistamiseen suunnitteluvaiheessa erilaisissa käyttöliittymissä verkkosivustoista mobiilisovelluksiin.

Attention Insights provides attention heatmap.

Selvitetään, kiinnittääkö UIzardilla luomamme alpakka-aiheinen verkkosivusuunnitelma käyttäjien huomion tehokkaasti:

Heatmap

Kokeiltuani Attention Insightia pidän sitä hyödyllisenä työkaluna, jolla on monipuolisia käyttötarkoituksia. Lämpökartan lisäksi se tarjoaa selkeyspisteytyksen, joka perustuu erilaisiin suunnittelun osa-alueisiin, kuten tekstin määrään, kontrastiin, kokoon ja värikylläisyyteen. Haluaisin kuitenkin tarkempaa tietoa siitä, miten pisteet lasketaan ja millä kriteereillä lämpökartta luodaan. Koska data ei ole peräisin todellisilta käyttäjiltä, tuloksia kannattaa käyttää suuntaa-antavana tietona.

Mieleen tulee useita käyttötapauksia. Työkalu on esimerkiksi korvaamaton A/B-testauksessa ja sen varmistamisessa, että suunnitelmasi kiinnittää käyttäjien huomion tehokkaasti.

Attention Insight voi toimia myös vakuuttavana näyttönä suunnitelmien esittelyissä sidosryhmille ja auttaa havainnollistamaan suunnittelupäätösten perusteluja.

Työkalu toimii parhaiten, kun suunnittelutavoitteesi ovat selkeät. Jos tavoitteenasi on esimerkiksi kiinnittää enemmän huomiota toimintakehotukseen (CTA), Attention Insight voi analysoida suunnittelun iteraatioita ja määrittää, mikä niistä vastaa tavoitteitasi parhaiten.

Testing the Eficode homepage with Attention Insights.

Muita UI-suunnittelua tukevia työkaluja

Magician (Figma-lisäosa)

Figma-lisäosana Magician sujuvoittaa suunnitteluprosessia luomalla nopeasti kuvia, ikoneita ja tekstiä, mikä parantaa suunnittelutyönkulun tehokkuutta merkittävästi.

Magician plugin on Figma
Icons8 Background Remover (Figma-lisäosa)

Tämä Figma-lisäosa on välttämätön viimeisteltyjen ja monikäyttöisten grafiikoiden luomiseen. Se helpottaa taustojen poistamista ja varmistaa, että grafiikkasi ovat siistejä ja valmiita monenlaisiin käyttötarkoituksiin.

Tekoäly ja tulevaisuuden mahdollisuudet

Tekoäly ei ole asia, jota pitäisi pelätä. Se on mahdollisuus oppia ja kehittyä suunnittelutyössäsi. Useimmat UI/UX-suunnittelun tekoälytyökalut on tarkoitettu inspiroimaan suunnittelijoita ja antamaan heille paremmat edellytykset luoda erinomaisia käyttäjäkokemuksia. Ihmisille suunniteltaessa on kuitenkin tärkeää tiedostaa tekoälyn rajoitukset, kuten mahdolliset ongelmat, jotka johtuvat kontekstin tai tiettyjä aiheita koskevien resurssien puutteesta.

Myös eettiset näkökohdat ovat merkittävässä roolissa tekoälyn vastuullisen käytön varmistamisessa. Kun pidämme nämä tekijät mielessä, voimme hyödyntää tekoälytyökaluja mahdollisimman tehokkaasti.

Ota tekoäly osaksi päivittäistä työtäsi, niin huomaat, miten se voi parantaa suunnitteluprosessejasi, sujuvoittaa tehtäviä ja ruokkia luovaa inspiraatiotasi. Mahdollisuudet ovat rajattomat, ja suunnittelun tulevaisuus kietoutuu epäilemättä tekoälyn kyvykkyyksiin.

Jotkin yritykset asettavat UX:n etusijalle tavoitellessaan brändimenestystä, kun taas toiset eivät. Syynä voi olla epävarmuus UX-suunnittelun taloudellisesta tuotosta ja sen vaikutuksista liiketoimintaan. Lue lisää blogikirjoituksestamme.

  • Software development
  • Design and UX

Subscribe to our newsletter