Duomenimis Paremtas Aplikacijos Dizainas

WECHEER.IO – tai sparčiai auganti technologijų kompanija, nuolat kurianti  naujas, kūrybiškas inovacijas technologijų srityje. Kompanija apjungia ergonomišką pramoninį dizainą su išmaniais sprendimais kurdama naujos kartos daiktų interneto įrenginius bei prietaisus.

Jų pastarasis išradimas jau drebina nusistovėjusią alaus industriją. Tai – pirmasis pasaulyje išmanus butelių atidarytuvas, jau šiandien plačiai naudojamas Vietnamo baruose bei kavinėse.

Vienas iš šio išmanaus įrenginio svarbiausių funkcionalumų – duomenų rinkimas. WECHEER.IO visus surinktus duomenis siekia panaudoti tikslingiems ir kliento patirtį pagerinantiems tikslams. Dėl šios priežasties kompanija nusprendė sukurti barų ir jų populiarumo žemėlapį (angl. Bar Heatmap) – programėlę, kuri leistų žmonėms rasti populiariausius barus jų vietovėje bei tuo pačiu plačiai skleistų žinią apie WECHEER sukurtą išmanų išradimą. Kompanija susisiekė su Adeo Web, prašydami pagalbos kuriant dizainą visam šiam projektui – o mes kibom į darbus.

Iššūkis

Išmanusis butelių atidarytuvas renka duomenis apie kiekvieną atidarytą butelį:

  • Kokie buteliai buvo atidaryti
  • Koks kiekis buvo atidarytas
  • Kur jie buvo atidaryti
  • Kas juos atidarė

Šiluminis barų išsidėstymo žemėlapis (angl. heatmap), sukurtas remiantis minėto įrenginio pagalba surinktais (bei papildytais) duomenimis, tuomet parodo populiariausius barus, esančius netoliese vartotojo.

Pagrindiniai šio projekto iššūkiai buvo:

  • Ribotas laikas, per kurį turėjo būti įvykdytas projektas
  • Prekės ženklo identiteto išlaikymas kuriant programėlės dizainą
  • Verslo tikslų, programėlės ir vartotojų poreikių apjungimas
  • Nepriekaištingos vartotojų patirties užtikrinimas

Sprendimas

 

7 dizaino kūrimo proceso žingsniai

 

Pirmas žingsnis. Lūkesčių nustatymas.

Sulaukę preliminarios norimos programėlės struktūros, pradėjome darbą. Mūsų pirminis žingsnis buvo sukurti pirmosios “Barai netoliese” (angl. Nearby Bars) versijos vartotojo sąveikos langą. Šiame žingsnyje taip pat turėjome apgalvoti, kaip įtraukti barų populiarumą atspindinčius ženklelius. Šio žingsnio metu supratome kliento lūkesčius bei gavome patvirtinimą, kad einame teisinga linkme.

Antras žingsnis. Testavimas, taisymas, tobulinimas

Kuomet pasiekėme tašką, kai mūsų ir kliento dizaino lūkesčiai sutapo, pradėjome testuoti smulkius dizaino objektus. Atlikome vartotojų interviu, kad suprastume, kokie ženkliukai geriausiai ir aiškiausiai atvaizduoja baro populiarumo reitingus. Remdamiesi rezultatais, patobulinome bei atnaujinome jų dizainą.

Nuolatinis bendradarbiavimas ir komunikacija su klientu yra viena svarbiausių sėkmingo projekto sudėtinių dalių. Kiekvieno dizaino plėtojimo proceso žingsnyje mes glaudžiai bendradarbiavome su klientu tam, kad viso proceso metu judėtume tik teisinga linkme bei tam, kad galutinis produkto duomenimis paremtas dizainas atitiktų esamą prekės ženklo įvaizdį ir komunikaciją.

Trečias žingsnis. Vartotojų srautai ir dizaino karkasas

Tam, kad įsitikintume, ar teisingai sukūrėme dizaino karkasą (angl. wireframe), mums prireikė kito įrankio iš mūsų arsenalo – vartotojų srautų (angl. User flows). Vartotojų srautai atskleidžia, kokius veiksmus vartotojas turi atlikti tam, kad užbaigtų numatytą procesą. Pavyzdžiui, tam, kad vartotojas sėkmingai užsiregistruotų prisijungęs pirmą kartą, jam reikės praeiti visą registracijos procesą:

Pagrindinis puslapis > Registracijos langas > Išsamus registracijos langas > El. pašto patvirtinimo langas > Sėkmingo el. pašto patvirtinimo langas > Prisijungimo langas > Aplikacijos langas

Veikiausiai šis procesas skamba nesudėtingai, nes kiekvienas iš mūsų esame jį perėję daugybę kartų. Visgi vartotojų srautų proceso ištyrimas suteikia itin vertingų įžvalgų. Kuriuos langus verta palikti? Gal yra žingsnis, kurį galėtume praleisti? Kurie langai reikalauja vartotojo indėlio, o kurie tik atvaizduoja informaciją? Kaip galime naviguoti iš vieno lango į kitą? O į prieš tai buvusį?

Po to kai sumodeliavome įmanomus vartotojų srautus bei atsakėme į visus kilusius klausimus, mes turėjome tvirtą pagrindą vartotojo patirties plėtojimui. Ši informacija padėjo mums priimti teisingus dizaino sprendimus, iš kurių pirminis žingsnis buvo patobulinti pradinį dizaino karkasą. Atnaujinę dizaino karkasą – atspėjote teisingai – nusiuntėme jį kliento peržiūrai ir patvirtinimui.

Ketvirtas žingsnis. Dizaino karkaso konstravimas.

Kuomet klientas patvirtino numatytą dizaino karkasą, atėjo metas pradėti kurti ir plėtoti puslapių dizainą. Visi programėlėje esantys langai buvo sukurti per artimiausią savaitę. Tuomet mūsų laukė linksmoji dalis – testavimas, testavimas, testavimas!

Penktas žingsnis. Testavimas, testavimas, testavimas.

Be vartotojų interviu bei duomenų analizės, svarbiausia dalis, kurią turėjome būti užtikrinti, tai teisingai sudėliotos vartotojų kelionės. Iš pirmo žvilgsnio tai gali pasirodyti kaip smulki, nereikšminga detalė. Iš tiesų, programėlės sėkmė būtent nuo šios detalės ir priklauso. Dėl šios priežasties mes praleidome gausybę laiko projektuodami, modeliuodami, testuodami ir tobulindami skirtingas įmanomas vartotojų keliones populiarių barų išsidėstymo žemėlapio programėlėje. Kad nesusimaišytumėte vartotojų kelionės su vartotojų srautais, vartotojų keliones apima keleto veiksmų seka (tarsi tikra kelionė nuo vieno taško iki kito), kuria vartotojai turi nueiti tam, kad pasiektų galutinį tikslą; šiuo atveju, naudodamiesi prototipiniais programėlės langais.

Kaip pavyzdys, viena iš vartotojo kelionių gali būti rasti specifinį barą šioje programėlėje. Vartotojui pristatėme prototipinį programėlės dizainą ir paprašėme pakomentuoti kiekvieną savo daromą žingsnį – kodėl jis spaudžia būtent ten; ką jis tikisi atrasti kitame puslapyje; ką jis dabar spaustų, jei žinotų galutinį tikslą, kurį turi rasti; kas jam patiko/nepatiko programėlėje, ir t.t. 

Mes išplėtėme šį tyrimą ir paprašėme vartotojų ištestuoti paieškos funkciją, pakomentuoti, ką jie tikėtųsi rasti su šia funkcija, kokiu tikslu jie ja naudotųsi, ir t.t. Eigoje nuodugniai užsirašinėjome kiekvieną smulkiausią detalę ir komentarą.

Tokie tyrimai ir testavimai padėjo mums atlikti paskutinius programėlės patobulinimus – sukeisti keletą langų, pridėti tuos, kuriuos vartotojas tikėjosi rasti ir pašalinti nereikalingus.

Šeštas žingsnis. Aušta raiška ir tikslumas

Žinodami, kad sukūrėme puikiai veikiantį dizaino karkasą, kuris suteikia gerą vartotojo patirtį, mes pradėjome rūpintis detalėmis – pridėjome anksčiau sukurtus vartotojų sąveikos langus ir susifokusavome ties svarbiomis detalėmis. Kiekviena intuityvi programėlė turi daugybę nesuskaičiuojamų mažų detalių, paslėptų nuo tiesioginės vartotojo sąveikos, bet ženkliai gerinančių naršymą ir sąveiką. Kad to pasiektume, turėjome atlikti tokias užduotis:

  • Išdėlioti informaciją, kad tekstai ir vizualinė medžiaga būtų lengvai randami, pamatomi, intuityvūs
  • Išskirti funkcijų hierarchiją – tam, kad svarbiausi programėlės funkcionalumai iškart išsiskirtų, kristų į akis
  • Patobulinti šriftą, teksto dydį, tarpus bei teksto formatavimą, siekiant užtikrinti lengvą, patogų skaitomumą
  • Ir… daugybė kitų smulkių užduočių

Septintas žingsnis. Galutinis testavimas

Galiausiai priėjome galutinio testavimo sesijas. Šį kartą vartotojai ištestavo galutinį programėlės dizianą ir atsakė į visus ankstesnius klausimus. Rezultatas – intuityvus, patrauklus ir duomenimis paremtas programėlės dizainas ir laimingi mūsų kliento vartotojai.

Rezultatas

Mūsų išskirtinis 7 žingsnių dizaino procesas leido mums pateikti galutinai išpildytą struktūrą, visus programuotojui reikalingus įrankius bei užtikrinti nepriekaištingą UX/UI mobiliosios programėlės patirtį per mažiau nei dvi savaites.

Kas toliau?

Dizaino komandos darbas čia baigtas! Kitose artimiausiose projekto fazėse mūsų programuotojai sukurs programėlės front-end ir back-end dalis, kad jos veikimas pilnai atitiktų numatytą išvaizdą.