{"id":23519,"date":"2022-02-08T06:34:39","date_gmt":"2022-02-08T04:34:39","guid":{"rendered":"https:\/\/www.software-developer-india.com\/?p=23519"},"modified":"2022-02-08T06:34:45","modified_gmt":"2022-02-08T04:34:45","slug":"ui-vs-ux-mita-eroa-on-kayttoliittymasuunnittelun-ja-kayttokokemuksen-suunnittelun-valilla","status":"publish","type":"post","link":"https:\/\/www.software-developer-india.com\/fi\/ui-vs-ux-mita-eroa-on-kayttoliittymasuunnittelun-ja-kayttokokemuksen-suunnittelun-valilla\/","title":{"rendered":"UI vs UX: mit\u00e4 eroa on k\u00e4ytt\u00f6liittym\u00e4suunnittelun ja k\u00e4ytt\u00f6kokemuksen suunnittelun v\u00e4lill\u00e4?"},"content":{"rendered":"\n

UI vs UX: mit\u00e4 eroa on k\u00e4ytt\u00f6liittym\u00e4suunnittelun ja k\u00e4ytt\u00f6kokemuksen suunnittelun v\u00e4lill\u00e4?<\/h2>\n\n
\"\"<\/a><\/figure><\/div>\n\n

UI tarkoittaa User Interface Designia, ja UX Design on lyhenne sanoista User Experience Design. T\u00e4ll\u00e4 erolla on selv\u00e4\u00e4, ett\u00e4 vaikka k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 on kyse verkkosivuston esteettisist\u00e4 elementeist\u00e4, UX keskittyy k\u00e4ytt\u00e4j\u00e4n kokemuksiin verkkosivustosta tai tuotteesta. <\/p>\n\n

Maallikon termein. K\u00e4ytt\u00f6liittym\u00e4ss\u00e4 on kyse koristeista, joita laitat taloa rakentaessasi, kun taas UX:ssa on kyse talon perustasta ja rakenteesta. Vastaavasti taloa rakentaessa mietit\u00e4\u00e4n perustusta ja kuinka vahva se olisi, ja sitten jatkaisit kaunistamista yhdist\u00e4m\u00e4ll\u00e4 talon huoneet, portaat ja lattiat. Kun perustus on valmis ja talo on rakennettu, voit alkaa mietti\u00e4 talon tekemist\u00e4 entist\u00e4 houkuttelevammaksi, p\u00e4\u00e4tt\u00e4\u00e4 seinien v\u00e4reist\u00e4, koristeista ja kaikista muista lis\u00e4yksist\u00e4, joita teet tehd\u00e4ksesi talosta esteettisesti houkuttelevan ja upean. <\/p>\n\n

Menn\u00e4\u00e4n nyt hieman syvemm\u00e4lle n\u00e4ihin kahteen<\/strong><\/h3>\n\n

Aiemmin el\u00e4m\u00e4 oli yksinkertaista, ja verkkosivujen suunnittelijoilla oli yksinkertainen teht\u00e4v\u00e4 suunnitella toimiva verkkosivusto, ja UX ja k\u00e4ytt\u00f6liittym\u00e4 eiv\u00e4t olleet niin erill\u00e4\u00e4n. Mutta kun muotoiluteollisuus kasvoi ja kypsyi, ero n\u00e4iden kahden v\u00e4lill\u00e4 kasvoi ja roolit tarkentuivat. On kuitenkin t\u00e4rke\u00e4\u00e4 ymm\u00e4rt\u00e4\u00e4, ett\u00e4 sek\u00e4 k\u00e4ytt\u00f6liittym\u00e4 ett\u00e4 UX eiv\u00e4t kilpaile kesken\u00e4\u00e4n, vaan t\u00e4ydent\u00e4v\u00e4t toisiaan, koska toinen ei voi olla olemassa ilman toista. <\/p>\n\n

Mit\u00e4 on UX-suunnittelu?<\/strong><\/h3>\n\n

UX-suunnittelussa on kyse k\u00e4ytt\u00e4j\u00e4n matkasta, kun h\u00e4n on vuorovaikutuksessa tuotteen kanssa, alusta loppuun tunteellisella tavalla. UX-suunnittelun koko perusta on k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisyys ja se, kuinka k\u00e4ytt\u00e4j\u00e4 nauttii tuotteen k\u00e4yt\u00f6st\u00e4.<\/p>\n\n

Jotta t\u00e4m\u00e4 onnistuisi, suunnittelijan on tunnettava k\u00e4ytt\u00e4j\u00e4, h\u00e4nen tarpeet ja tavoitteet, jopa heid\u00e4n kamppailunsa. Esimerkiksi verkkokauppasivustolla ensisijaisena tavoitteena tulisi olla se, ett\u00e4 k\u00e4ytt\u00e4j\u00e4n on helppo l\u00f6yt\u00e4\u00e4 etsim\u00e4st\u00e4\u00e4n tuote ja tehd\u00e4 vaivaton ostos. T\u00e4m\u00e4n toteuttamiseen tarvitaan monia vaiheita, koska ellei sivustolla ole helppo navigoida, kukaan ei vieraile. Jos tuotetta ei ole saatavilla, k\u00e4ytt\u00e4j\u00e4ll\u00e4 on helposti oltava vaihtoehto. Suunnittelija voi hy\u00f6dynt\u00e4\u00e4 erilaista k\u00e4ytett\u00e4viss\u00e4\u00e4n olevaa dataa varmistaakseen asiakasmatkan helpon. <\/p>\n\n

Joten voit sanoa, ett\u00e4 UX:n kehitys alkoi k\u00e4ytt\u00f6liittym\u00e4n kehityksest\u00e4 ja kasvusta, koska se antaa k\u00e4ytt\u00e4jille jotain vuorovaikutusta, positiivista, negatiivista tai neutraalia. <\/p>\n\n

T\u00e4ss\u00e4 on joitainUX<\/strong>-suunnittelijan teht\u00e4vi\u00e4 :<\/h3>\n\n

K\u00e4ytt\u00e4j\u00e4tutkimuksen tekeminen<\/strong><\/p>\n\n

UX Designer tekee k\u00e4ytt\u00e4j\u00e4tutkimusta saadakseen k\u00e4sityksen siit\u00e4, mit\u00e4 k\u00e4ytt\u00e4j\u00e4 haluaa. T\u00e4m\u00e4 tehd\u00e4\u00e4n haastattelujen, kyselyiden, havaintojen jne. Tutkimuksen aikana suunnittelija tunnistaa asiakkaan kipukohdat ja ehk\u00e4 jopa kuuntelee h\u00e4nen ehdotuksiaan. Ideoita asiakkaan ongelmien ratkaisemiseksi tulee varmasti olemaan useampi kuin yksi, joten suunnittelijan on pohdittava eri ideoita ja p\u00e4\u00e4tett\u00e4v\u00e4, mik\u00e4 on toteutettavissa ja mik\u00e4 ei. Kaikista toteuttamiskelpoisista ideoista valitaan toteuttamiskelpoisin. <\/p>\n\n

K\u00e4ytett\u00e4vyyden huomioiminen<\/strong><\/p>\n\n

K\u00e4ytett\u00e4vyys liittyy k\u00e4ytt\u00f6kokemukseen siin\u00e4 mieless\u00e4, ett\u00e4 se leijuu jossain hy\u00f6dyllisyyden ja toivottavuuden v\u00e4liss\u00e4. Joten kun olet keksinyt k\u00e4ytt\u00f6kelpoisen ratkaisun k\u00e4ytt\u00e4j\u00e4n ongelmaan, sinun on puututtava my\u00f6s sen k\u00e4ytett\u00e4vyyteen. K\u00e4ytett\u00e4vyystekij\u00e4ss\u00e4 on kyse siit\u00e4, kuinka vastata k\u00e4ytt\u00e4j\u00e4n tarpeisiin ja toiveisiin. <\/p>\n\n

Strategisen suunnitelman laatiminen<\/strong><\/p>\n\n

Seuraavana askeleena kohti UX Designia kehitt\u00e4j\u00e4 laatii strategisen suunnitelman tuotteen luomiseksi, t\u00e4ss\u00e4 nettisivun, ja varmistaa, ett\u00e4 suunnitelmaan ei liity vain sit\u00e4, mit\u00e4 asiakkaat haluavat, vaan my\u00f6s sit\u00e4, mit\u00e4 sijoittajat ja sidosryhm\u00e4t vaativat. <\/p>\n\n

Prototyyppien tekeminen<\/strong><\/p>\n\n

Prototyyppien luominen on toinen t\u00e4rke\u00e4 vaihe suunnittelusprinteiss\u00e4. T\u00e4m\u00e4 vaihe tulee sen j\u00e4lkeen, kun toteuttamiskelpoinen idea on p\u00e4\u00e4tetty, joten prototyyppi on tuotteen kokeellinen malli. T\u00e4m\u00e4n pit\u00e4isi sopia hyvin asiakkaiden ja sidosryhmien tarpeiden kanssa, joten prototyyppi voidaan luoda useilla eri tavoilla – se voi olla paperiprototyyppi\u00e4, vain luonnoksia korkean tason digitaalisiin malleihin. <\/p>\n\n

Se auttaisi sinua ajamaan ratkaisua, joka hy\u00f6dytt\u00e4isi yrityst\u00e4 ja k\u00e4ytt\u00e4ji\u00e4. Parasta prototyyppien valmistuksessa on, ett\u00e4 voit mukauttaa muutoksia ajoissa, n\u00e4ytt\u00e4\u00e4 idean k\u00e4ytt\u00e4jille n\u00e4hd\u00e4kseen, pit\u00e4v\u00e4tk\u00f6 he siit\u00e4. Varhainen prototyyppi auttaa est\u00e4m\u00e4\u00e4n kalliita virheit\u00e4. <\/p>\n\n

Mit\u00e4on<\/strong> k\u00e4ytt\u00f6liittym\u00e4suunnittelu?<\/h3>\n\n
\"\"<\/a><\/figure><\/div>\n\n

K\u00e4ytt\u00f6liittym\u00e4 tai k\u00e4ytt\u00f6liittym\u00e4 on resurssi, jonka kanssa k\u00e4ytt\u00e4j\u00e4 on vuorovaikutuksessa. Joten kyse olisi enemm\u00e4n kunkin tuoteelementin, kuten tekstin, painikkeen ja muiden k\u00e4ytt\u00f6liittym\u00e4elementtien, asettelusta. Ja miten n\u00e4m\u00e4 elementit n\u00e4ytt\u00e4v\u00e4t ja toimivat. K\u00e4ytt\u00f6liittym\u00e4 ei keskity pelk\u00e4st\u00e4\u00e4n sivuston esteettiseen puoleen, vaan sivuston tehokkuuteen, saavutettavuuteen ja reagoivuuteen kokonaisuudessaan. <\/p>\n\n

K\u00e4ytt\u00f6liittym\u00e4suunnittelun eri elementit<\/strong><\/h3>\n\n

K\u00e4ytt\u00f6liittym\u00e4elementit jakautuvat nelj\u00e4\u00e4n p\u00e4\u00e4luokkaan:<\/p>\n\n

Navigointikomponentit<\/strong> – N\u00e4m\u00e4 komponentit auttavat k\u00e4ytt\u00e4j\u00e4\u00e4 navigoimaan verkkosivustolla, esimerkiksi Android-laitteen hampurilaisvalikko ja Apple-laitteiden v\u00e4lilehtipalkit. <\/p>\n\n

Input Controls<\/strong> – N\u00e4iden s\u00e4\u00e4timien avulla k\u00e4ytt\u00e4j\u00e4t voivat sy\u00f6tt\u00e4\u00e4 tietoja j\u00e4rjestelm\u00e4\u00e4n. K\u00e4ytt\u00e4j\u00e4t voivat valita tarvitsemansa tiedot useista sy\u00f6tteist\u00e4, mik\u00e4 helpottaa tietojen sy\u00f6tt\u00e4mist\u00e4. <\/p>\n\n

Informaatiokomponentit<\/strong> \u2013 N\u00e4it\u00e4 osia ovat ty\u00f6kaluvihjeet, ilmoitukset, viestilaatikot, kuvakkeet, edistymispalkit jne. ja kuinka n\u00e4m\u00e4 tiedot jaetaan k\u00e4ytt\u00e4jien kanssa. <\/p>\n\n

S\u00e4il\u00f6t<\/strong> \u2013 K\u00e4ytt\u00f6liittym\u00e4ss\u00e4 oleva s\u00e4il\u00f6 toimii elementtin\u00e4, joka on luotu sis\u00e4lt\u00e4m\u00e4\u00e4n sivuelementit tietylle, kohtuulliselle leveydelle suhteessa k\u00e4ytt\u00e4j\u00e4n n\u00e4ytt\u00f6\u00f6n. T\u00e4m\u00e4 voidaan yhdist\u00e4\u00e4 muihin k\u00e4ytt\u00f6liittym\u00e4elementteihin (esimerkiksi ruudukko, valikko) paremman n\u00e4yt\u00f6n saamiseksi. <\/p>\n\n

UI tutkimus<\/strong><\/h3>\n\n

K\u00e4ytt\u00f6liittym\u00e4suunnittelu vaatii my\u00f6s tutkimusta, koska lopputuote on suunniteltava k\u00e4ytt\u00e4jien tarpeiden ja odotusten mukaan. T\u00e4t\u00e4 varten k\u00e4ytt\u00f6liittym\u00e4suunnittelijat ja UX-suunnittelijat ty\u00f6skentelev\u00e4t yhdess\u00e4 selvitt\u00e4\u00e4kseen, t\u00e4yttyv\u00e4tk\u00f6 projektin tavoitteet ja yleis\u00f6n odotukset. K\u00e4ytt\u00f6liittym\u00e4suunnittelijat tutkivat parhaita visuaalisia elementtej\u00e4, jotka toimisivat parhaiten, v\u00e4ripaletteja, etutyyppej\u00e4, kuvioita jne.<\/p>\n\n

Johtop\u00e4\u00e4t\u00f6s<\/strong><\/h3>\n\n

N\u00e4iden kahden yhdistelm\u00e4 on eritt\u00e4in t\u00e4rke\u00e4 tuotteen erinomaisen k\u00e4ytt\u00f6kokemuksen tarjoamiseksi. Kun k\u00e4ytt\u00e4j\u00e4t vertailevat tuotetta, UX-muotoilu toimii kuitenkin erottimena sinun ja kilpailijasi tuotteissa. Ihmiset, jotka kokevat huonon k\u00e4ytt\u00f6kokemuksen, siirtyv\u00e4t varmasti kilpaileviin tuotteisiin.<\/p>\n\n

Joten itse asiassa ne eiv\u00e4t kilpaile kesken\u00e4\u00e4n, vaan t\u00e4ydent\u00e4v\u00e4t ominaisuuksiaan varmistaakseen, ett\u00e4 k\u00e4ytt\u00e4j\u00e4t liikkuvat verkkosivustolla ilman ongelmia. Jos UX on hyv\u00e4, mutta k\u00e4ytt\u00f6liittym\u00e4 ei ole tarpeeksi miellytt\u00e4v\u00e4, he eiv\u00e4t ehk\u00e4 halua palata takaisin ja p\u00e4invastoin. <\/p>\n\n

Lyhyesti sanottuna k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 on kyse siit\u00e4, kuinka k\u00e4ytt\u00e4j\u00e4 on vuorovaikutuksessa verkkosivuston visuaalisten ja teknisten komponenttien kanssa, ja UX tarkoittaa k\u00e4ytt\u00e4j\u00e4lle annettavaa yleist\u00e4 kokemusta. <\/p>\n\n

Mielenkiintoisia linkkej\u00e4:<\/strong><\/h3>\n\n

Lis\u00e4tietoja k\u00e4ytt\u00f6liittym\u00e4st\u00e4 ja UX-suunnittelusta<\/a><\/p>\n\n

Jotkut yht\u00e4l\u00e4isyydet ja erot UX-suunnittelun ja k\u00e4ytt\u00f6liittym\u00e4suunnittelun v\u00e4lill\u00e4<\/a><\/p>\n\n

Kuvat: Canva<\/p>\n\n

\n\n
\"\"<\/figure><\/div>\n\n

Kirjoittaja: Sascha Thattil ty\u00f6skentelee Software-Developer-India.com -sivustolla, joka on osa YUHIRO-ryhm\u00e4\u00e4. YUHIRO on intialainen saksalainen yritys, joka tarjoaa ohjelmoijia IT-yrityksille, virastoille ja IT-osastoille. <\/p>\n