UX disain aitab inimesel kodulehel oma eesmärgini jõuda. UI disain teeb selle teekonna nähtavaks nuppude, kirja, värvide ja paigutuse kaudu. Kui klient ei leia hinnapäringu vormi, ei lahenda muret tingimata uus värvipalett. Kui vorm on leitav, kuid selle väljad on loetamatud, ei piisa ainult paremast lehestruktuurist.
Ettevõtte jaoks on vahe praktiline. Sa pead teadma, kas tellid uue välimuse, parandad ostuteekonda või vajad mõlemat. Vastasel juhul võid saada kena kujunduse, mis jätab vana probleemi alles. Selles juhendis vaatame UX ja UI erinevust päringuvormi, teenuslehe ja e-poe näitel. Lõpus on kontrollnimekiri, millega disainipakkumisi võrrelda.
Kas sinu lehel jääb külastaja järgmise sammu juures hätta? Vaata meie UX ja UI disaini teenust. Alustada saab ühest olulisest teekonnast, mitte tingimata kogu kodulehe uuendamisest.
Mis on UX disain?
UX tuleb väljendist user experience ehk kasutajakogemus. See hõlmab inimese kogemust ettevõtte, toote või teenusega, mitte ainult ekraani kasutamist. Ka ootamatu tarnekulu ja vastuseta jäänud päring mõjutavad kogemust. Nielsen Norman Group selgitab seda oma kasutajakogemuse käsitluses.
Kodulehe projektis tähendab UX-töö näiteks külastaja küsimuste väljaselgitamist, lehtede järjestamist ja oluliste teekondade läbimõtlemist. Disainer uurib, millist infot inimene otsustamiseks vajab. Seejärel loob ta lahenduse, mida saab enne arendamist katsetada.
Väikeettevõtte puhul võiks lähteülesanne olla konkreetne. Mitte „teeme parema kogemuse“, vaid „uus klient leiab sobiva teenuse ja saab saata piisava infoga päringu“. Sellist ülesannet saab vaadelda ja kontrollida. Üldine soov saada moodsam veeb jääb seevastu kergesti maitsevaidluseks.
Mis on UI disain?
UI tähendab user interface ehk kasutajaliidest. Veebilehel on selle osad näiteks menüü, nupud, vormiväljad, ikoonid ja tekstide paigutus. UI disainer kujundab, kuidas neid osi nähakse ja kasutatakse.
UI ei tähenda ainult värvide valimist. Nupul on tavavaade, fookuse olek ja vajadusel laadimisolek. Vormiväljal on nimetus, sisestatud tekst ning veateade. Mobiilivaates peab sama lahendus toimima teistsuguses ruumis kui suurel ekraanil.
Hea pakkumine kirjeldab seega ka liidese käitumist. Üks ilus esilehe pilt ei ütle, mis juhtub pika teenusenimega, tühja otsingutulemusega või ebaõnnestunud vormisaatmisega. Need olukorrad tuleb samuti läbi mõelda.
UX ja UI erinevus ühe pilguga
Jaotus ei ole jäik ametipiir. Väikeses projektis võib mõlemat tööd teha sama inimene. Oluline on, et pakkumine kataks mõlemad küsimused. Kes otsustab, mida külastaja peab saama teha? Kes näitab, kuidas lahendus ekraanil töötab?
Näide ühest päringuvormist
Kujutame ette hooldusettevõtet, kelle lehel alustatakse päringut, kuid jäetakse see sageli pooleli. See on näide, mitte Marketing Sharksi klienditulemus. Vorm küsib kohe ettevõtte registrikoodi, täpset aadressi, teenuse tehnilist nimetust ja soovitud töömahtu.
UX-küsimus on, kas klient oskab sellele kõigele enne esimest vestlust vastata. Võib-olla piisab alguses probleemi kirjeldusest, piirkonnast ja kontaktist. Ülejäänu saab täpsustada hiljem. Samas ei tasu eemaldada välja, milleta ettevõte ei saa päringut õigesse kohta suunata.
UI-küsimus on, kas inimene näeb välja nimetust, mõistab nõutud vormingut ning saab vea korral arusaadava juhise. W3C vormiväljade märgistamise juhend rõhutab väljade ja nimetuste korrektset seostamist. Välja sisse kirjutatud näidistekst ei asenda alati nähtavat nimetust.
Kolmas küsimus puudutab arendust. Kas vorm saadetakse päriselt kohale ja kas õnnestumise teade ilmub õigel hetkel? Kujundusfail üksi seda ei tõenda. Enne töö vastuvõtmist tuleb katsetada toimivat vormi, mitte ainult selle pilti.
Kust alustada olemasoleva kodulehe parandamist?
Vali üks äriliselt oluline tegevus
Pane kirja, mida külastaja peaks suutma teha. Näiteks võrrelda kahte teenust, leida toote mõõdud või broneerida aeg. Väldi lähteülesannet „parandada kõike“. Ühe teekonna puhul on lihtsam eristada probleemi, lahendust ja tulemust.
Kui veebiprojekti eesmärk ise pole selge, vaata esmalt võrdlust e-pood või koduleht. Teenuse müümine päringu kaudu ja kauba müümine ostukorvis vajavad erinevat ülesehitust.
Vaata inimest ülesannet täitmas
Palu sihtrühma kuuluval inimesel valitud ülesanne lõpuni teha. Ära ütle ette, millisele nupule vajutada. Küsi pigem, mida ta järgmisena ootab ja mis jäi ebaselgeks. Märgi üles kohad, kus ta peatub, tagasi liigub või abi küsib.
Nielsen Norman Group soovitab kvalitatiivse kasutatavustesti lähtekohana sageli umbes viit osalejat ühe kasutajarühma kohta. See aitab leida probleeme, mitte arvutada kogu kliendibaasi käitumise protsente. Erinevad sihtrühmad võivad vajada eraldi osalejaid. Vaata testijate arvu selgitust.
Tee esmalt lihtne prototüüp
Prototüüp on lahenduse katsetatav mudel. See võib olla lihtne leheskeem või klikitav vaadete jada. Alguses ei pea iga ikoon ja värv olema lõplik. Kõigepealt kontrolli, kas inimene mõistab valikuid ning jõuab soovitud tulemuseni.
Näiteks võid võrrelda kahte teenusevaliku lahendust. Ühes on teenused sinu ettevõtte osakondade järgi, teises kliendi probleemi järgi. Test ei pea küsima, kumb rohkem meeldib. Küsimus on selles, kummaga leiab inimene endale sobiva teenuse.
Lisa kujundus ja kontrolli päris sisu
Kui teekond toimib, täpsusta kirjasuurused, vahed, nupud ja muud komponendid. Kasuta päris pealkirju, hindu ja tootenimesid. Lühikese näidistekstiga sobiv kaart võib tegeliku sisuga laguneda. Sama kehtib pikemate veateadete ja mobiilimenüü kohta.
Brändi ühtsus ei pea kaduma. Visuaalne disain aitab siduda liidese sinu ettevõtte ilmega. Samas peab nupp jääma arusaadavaks ka siis, kui brändi aktsentvärvi kasutatakse lehel mujal.
Mida disainipakkumisest küsida?
Võrdle pakkumisi töö sisu, mitte ainult vaadete arvu järgi. Kümme ekraanipilti võivad tähendada kümmet olulist lahendust või sama lehe väikseid variatsioone. Küsi, millist probleemi iga tööetapp lahendab ja milline tulemus sulle üle antakse.
- Milline kasutajateekond on töö keskmes ja kelle jaoks seda parandatakse?
- Kas olemasolevate päringute või kliendiküsimuste analüüs kuulub hinna sisse?
- Kas saad enne arendust klikitava prototüübi?
- Millised mobiili- ja arvutivaated tehakse?
- Kas vormivead, laadimisolekud ja tühjad tulemused on kujundatud?
- Kes koostab tegelikud tekstid ja kontrollib nende sobivust?
- Kes testib lahendust kasutajatega ning kes parandused rakendab?
- Kas töö sisaldab arenduse järelkontrolli ja millised on vastuvõtutingimused?
Küsi ka seda, mida pakkumine ei sisalda. Sisestustekstide kirjutamine, arendus ja analüütika seadistamine võivad olla eraldi tööd. Ühine dokument aitab vältida olukorda, kus kõik eeldavad, et puuduva osa teeb keegi teine.
Pane paika töö vastuvõtmise tingimused
Enne arenduse algust kirjuta üles, mille järgi lahenduse valmisolekut hindad. Näiteks peab klient leidma teenuse kirjelduse, mõistma järgmise sammu sisu ja saama vormi edukalt saata. Kontrolli teekonda ka klaviatuuriga. Nii ei jää kvaliteet ainult selle inimese hinnata, kes kujunduse ise koostas.
Lisa üleandmise juurde loetelu teadaolevatest piirangutest. Kui mõni vaade jääb järgmisse etappi, peab see olema selgelt kirjas. Samuti lepi kokku, kes jälgib pärast käivitamist päringute saabumist. Mõõtmise ja tagasiside eest vastutav inimene aitab märgata probleeme enne, kui need muutuvad tavaliseks kliendikaebuseks.
Viis viga, mida saad vältida
Alustad värvist, kuigi probleem on infos. Kui klient ei leia, millisele piirkonnale teenust pakud, ei aita ainult nupu värv. Lisa vajalik teave otsustamise kohta.
Küsid ainult, kas kujundus meeldib. Maitsearvamus ei näita, kas inimene oskab tellida. Anna testis konkreetne ülesanne ja jälgi selle täitmist.
Vaatad ainult suurt ekraani. Katseta sama teekonda telefonis. Ava menüü, sisesta vormi andmed ja kontrolli, kas klaviatuur varjab olulist infot.
Võtad vastu ainult ideaalse olukorra. Proovi vormi vale aadressiga, jäta nõutud väli täitmata ja kontrolli tühja otsingut. W3C arendusjuhised rõhutavad selgeid juhiseid, veateateid ja tagasisidet.
Lubad endale kindla müügikasvu ilma mõõtmiseta. Uus kujundus ei tõesta automaatselt paremat tulemust. Hooaeg, reklaam ja pakkumise muutus võivad numbreid samuti mõjutada.
Kuidas paranduse mõju mõõta?
Vali mõõdik enne muudatust. Päringulehel võiks see olla edukalt saadetud vormide osakaal asjakohastest külastustest. E-poes võid jälgida ostukorvi alustamist ja ostuni jõudmist. Ära vaheta mõõdiku tähendust võrdluse keskel.
Vaata ka päringute kvaliteeti. Rohkem saadetud vorme ei ole tingimata parem tulemus, kui vajalik info puudub või päringud ei sobi teenusega. Lepi müügitiimiga kokku, milline kontakt on sisuliselt kasutatav.
Väikese liiklusega lehel võib protsent kõikuda üksikute sündmuste tõttu. Näita raportis ka külastuste ja päringute arvu. Kui andmeid on vähe, kasuta lisaks kasutajateste ja kliendivestlusi. Ära kuuluta ühe nädala põhjal võitjat.
Laiema kontrolli jaoks loe kodulehe auditi juhendit. Müügiteekonna mõõdikuid selgitab lähemalt artikkel e-poe konversioonimäärast. Need aitavad eristada kujundusmuret liikluse või pakkumise probleemist.
Korduma kippuvad küsimused
Kas UX ja UI tähendavad sama asja?
Ei. UX käsitleb inimese kogemust ja eesmärgini jõudmist. UI keskendub kasutajaliidesele, mille kaudu inimene toodet kasutab. Need tööd on seotud, kuid üks ei asenda teist.
Kas väikeettevõte vajab UX disaini?
Väikeettevõte vajab arusaadavat klienditeekonda, kuid mitte tingimata mahukat eraldi uuringuprojekti. Alustada võib ühest olulisest ülesandest, kliendiküsimuste ülevaatusest ja lihtsast prototüübist.
Kas sama disainer võib teha UX ja UI tööd?
Jah, kui tal on oskused mõlema jaoks. Küsi näiteid nii probleemide uurimisest kui ka kasutajaliidese kujundamisest. Ainult visuaalne portfoolio ei näita kogu tööprotsessi.
Kas uus kujundus suurendab müüki?
Seda ei saa ette garanteerida. Kujundus võib eemaldada ostmist takistavaid probleeme, kuid tulemust mõjutavad ka pakkumine, liiklus ja hind. Mõju tuleb pärast muudatust mõõta.
Kas prototüüp on valmis koduleht?
Ei. Prototüüp aitab teekonda ja kujundust katsetada, kuid ei pruugi salvestada andmeid ega saata päringuid. Töötav veeb vajab arendust ning eraldi kontrolli.
Kumb tuleb enne, UX või UI?
Alusta kasutaja eesmärgist ja teekonnast, seejärel täpsusta visuaalset lahendust. Praktikas liiguvad tööd edasi-tagasi. Kujunduse katsetamine võib näidata, et ka struktuuri tuleb muuta.
Alusta ühest kohast, kus klient hätta jääb
UX ja UI vahe aitab sul tellida õiget tööd. Küsi esmalt, mida klient peab saama teha. Seejärel vaata, milline info, paigutus ja tagasiside teda aitavad. Alles siis saad hinnata, kas vajad uut välimust või põhjalikumat teekonna muutust.
Marketing Sharksiga saad alustada UX ja UI disaini arutelust. Too kaasa üks oluline leht ja kirjeldus sellest, kus kliendid takerduvad. Nii on vestlus konkreetne ega alga kogu veebilehe põhjendamatust ümberehitamisest.
