Single blog post

[Case Study] Eesti parima kinnisvaraportaali uus kasutajaliides

m.kv.ee kinnisvaraportaal sai äsja Kuldmuna konkursil Hõbemuna mobiilsete veebide kategoorias. Kulla sai meie teine töö – Amservi mobiiliveeb. See on tore tunnustus aga eelkõige seetõttu, et tegime kinnisvaraportaali kasutajaliidese lahenduse sellise, mida ka ise tahaks kasutada, üritades vältida kõiki ebamugavusi, mis tavaliselt segavad. Tulemuseks on lihtne kena kasutajaliides, millega saavutame hea kasutuskogemuse.

kv-responsive-web

OKIA roll selles töös oli külastajale silmaga nähtava osa ehk kasutajaliidese loomine, mis on kasutuskogemuse põhitala. Õigemini taasloomine, sest võtsime kasutustee üsna algosadeks lahti, refokusseerisime tükid ning panime uuesti kokku. Seda kõigile ekraanidele, responsiivselt. Lihtsustatult öeldes tegime uue kasutajaliidese disaini ning kodeerimise (html), tehnilise arendustöö tegi klient ise. Meie poolt osalesid projektis 5 inimest: loovjuht, kasutuskogemuse analüütik, disainer, kodeerija ja projektijuht.

Fookus!

Üks asi, mida ise alati oluliseks peame, on fokusseerida kõige olulisemale. Päris hästi toimib vajadusel 80:20 võte: kui 80% kasutajatest pole mingi asi kõige olulisem, lükka see tahaplaanile.

Samast põhimõttest lähtuvalt on tavaliselt hea põhimõte: lihtsusta, nii palju kui võimalik.

Vanas veebis oli fookus hajevil, oluline võrdne vähemolulisega. Meie tõime esiplaanile vankumatult objektide otsingu (+ äriliselt oluline “Lisa kuulutus”), ülejäänud tegevused ja funktsioonide tõstsime eraldi eemale. Müra minimaalseks. Kuulutuse lisamine, login, lihtsaks. Kusjuures kogu aeg peab mõtlema ja arvestama sellega, et me peame tegema selle lahenduse igale ekraanile, responsiivse.

Päis enne:

kv-ee-old

Pärast, kus fookused on seatud ja ka värvipalett ja kogu visuaal on viidud korporatiivse stiiliga kokkusobivaks:

kv-ee-new

Otsinguvaade

Kui põhifookused paigas, hakkasime lihtsustama veebi sisuosa. Kaotasime ära mürarikkad kõrvaltulbad, tegime thumbnailid hästi suurteks, sest kinnisvara puhul töötab pilt tugevalt. Otsinguvaatest saad kiirelt avada mugavalt keritava pildivaate (mitte next-next-next vajutatava tüütuse), ilma, et peaksid objekti avama ning näed objektide juures ka põhiinfot: hinda, pindala, tubade arvu jms.

Tüüpiline kasutajakäitumine on see, et kinnisvara otsides valid endale “portsu” huvipakkuvaid objekte, millesse rohkem süvened. Seda on aga väga tüütu teha näiteks erinevatesse tääbidesse kuulutusi avades või bookmarkides, oluliselt mugavam on kasutada järjehoidjaid (väike täheke iga objekti juures). Järjehoidja töötab seejuures ka sisselogimata kasutajale, kus need salvestatakse cookie’dega. Sisselogitud kasutajale aga tema kontole.

Selle tulemusena saad oma eelvalikud ära teha juba otsingutulemuse vaates ning seejärel süveneda väljavalitutesse.

kv-ee-jarjehoidjad

Objektivaade

Objektivaates tõstsime fookusesse muidugi pildid, kaardi, seejärel aga kohe objekti põhiinfo (ehk: milline objekt, kus, mis parameetritega). Jõudes kriitilise kohani – ärini – sai hästi eraldatud kontaktivõtumoodul, milles ka väike vorm.

Kogu täiendav info on allpool, pakkudes lisalugemist sügavama huvi puhul.
Lõpeb vaade nö sarnaste objektide valikuga, pakkudes lehe lõppu jõudes alati lisategevusi.

kv-ee-objekt

Responsiivsus

Lähteülesande üks oluline punkt oli lahendada kogu asi responsiivse ehk ekraanidele muganduvana. Responsiivse lahenduse mõte on selles, et kood on sama, arendusmaht on sama, kasutuskogemus on võimalikult sarnane, aga ekraanide suurustega arvestav. Selleks tegime kujundusse mitu murdumispunkti, kus arvestasime peamiselt suure, keskmise ja väikese ekraaniga. Tavaliselt on need desktop/laptop, tahvelarvuti ja nutitelefon.

Mis asja omakorda huvitavaks ja keeruliseks teeb, on infopaigutuse järjekord erinevatel ekraanidel. Kui tavaliselt  paigutuvad HTML-s siselemendid näiteks mobiiliekraanil üksteise järel üksteise alla, siis KV.EE puhul on täpselt ära määratletud nende loogiline vajaduspõhine järjekord. Näiteks 2 vertikaalset infotulpa asetseksid muidu üksteise alla, aga siin puhul vaadatakse tulpades sisublokke eraldi prioriteetsuse alusel. Näiteks pildist paremal on põhiinfo, mis muidu liiguks väikesel ekraanil pika kirjelduse alla, aga KV puhul liigub ta hoopis loogiliselt avapildi alla. Ma plaanin sellest eraldi artikli teha.

Suur

kv-laptop

Keskmine

kv-tablet

Väike

kv-smartphone

Kommenteerib KV.EE tegevjuht Tarvo Teslon

KV.EE oli mobiilsete seadmete jaoks lihtsustatud juba paar aastat. Tegemist oli lihtsa muudatusega, kus ekraaniruumi säästmiseks olime reklaamid ja vähem olulise info ära võtnud. KV.EE kasutajatest oli juba iga kuues lehel viibija mobiilse seadmega. Samas oli näha, et inimesed ei viibinud lehel kaua, vaadati hädapärast infot ja sellega tihti portaali külastus piirnes.

Kui 2013. aasta lõpus uus responsiivse disainiga leht sai mobiili ja tahvlikasutajatele üles pandud, muutusid kõik numbrid päevapealt oluliselt paremaks. KV.EE lehel viibimise aeg kasvas 2 minuti võrra (+50%), vaadatud kodude arv kasvas kaks korda ja põrkemäär (bounce rate) kukkus 25%. Ja kuigi lehel oli alguses vigu, saime väga hea tagasiside kasutajatelt, kes meie muudatusi kiitsid ja hea teenuse eest tänasid.

Ülesande püstitusega, muuta KV.EE mobiilisõbralikuks, pöördusime mitme agentuuri poole. OKIA meeskond tundus esmasel kohtumisel väga hea ja kui saime kätte esimesed visandid, pidasime OKIA’t kindlasti õigeks valikuks. Täna võin öelda, et saime endale väga tugeva spetsialistidega partneri, kellel ideedest ja headest nõuannetest puudu ei ole.

Kokkuvõtteks

Eesmärgiks oli teha kasutajaliides, mis parandab kasutuskogemust. Ehk saada maksimaalselt hea emotsioon, kui lähed KV lehele ning seeläbi paraneb kliendi äri suures pildis.

Selle projekti kõige keerulisem osa oli responsiivsus, mis on siiski suhteliselt uus teema kõigi jaoks ning väga funktsionaalse lahenduse puhul paras väljakutse. Olukorra teevad keerulisemaks näiteks mitmed Androidi-põhised seadmed, kus väikesed erinevused brauseriversioonides või seadmetes suudavad pilti näidata üsna erinevalt.

See sait on veel töös, arenduses, osad kuvad alles jõuavad selleni, mis nad olema peaksid. Nagu ikka, hea veebilahendus pole kunagi päris valmis ja areneb edasi.

Hetkel on uus veeb kättesaadav vaid mobiilselt urlilt m.kv.eekuid see toimib võrdselt hästi kõigil ekraanidel.

***

Meile siin OKIA’s meeldib eriti kasutajaliideste loomine, kus me keskendume kasutuskogemusele, heale disainile, reponsiivsetele lahendustele. Meile meeldib teha asju, mida on mõnus kasutada, mis seeläbi soodustavad klientide äri. See on ühtlasi meie klientidele konkurentsieeliseks. Täna on meil töös mitme juba olemasoleva Eesti portaali kasutajaliidese täielik uuendamine. Kui sul on selle teema vastu huvi, kirjuta meile info@okia.ee ja saame kokku.

Jaga postitust oma lemmikus sotsiaalmeediakanalis:

Jumbotron

Räägime edasi?

Pikk kogemus disainimaastikul on näidanud, et parimad tulemused kasvavad kommunikatsioonist ja sõprusest. Seetõttu soovimegi luua sinuga sooja ja siira partnersuhte, mis kannaks vilja ka aastaid pärast esimest teretust. Üheskoos võime seada verstapostid kasvõi silmapiirile, vahemaad kartmata.

Olen valmis!