Mida ikooni-illukaga peale hakata?!

Mida ikooni-illukaga peale hakata?!

Tagasi Reijo Palmiste Kirjutas: Reijo Palmiste 19.september 2017

Juba kolmandat nädalat järjest tüütame sind oma illukaikoonijutuga. Tasa ja targu hakkame aga jõudma tuumani ja ehk lähemale ka lõppsõnale. Tänases postituses asetame kõnealused konkreetsesse konteksti – rakenduste maailm. Kõige parem on õppida läbi ehtsate real world näidete, eks. Me ei leiuta jalgratast, ainult analüüsime, kuidas on keskjooks, kahvel ja porilauad omavahel seotud ning mis kasu neist üldse on. Leiutamise jätame sinule, kui oled siit midagi uut ja harivat teada saanud.

Ikoonid äppides – kes siis tegelikult tööd teevad?

Millal sa viimati kasutasid mõnda äppi, rakendust või moblajubinat, milles polnud ühtegi ikooni? Ikoon (või superväike illustratsioon) tuleb mängu juba enne, kui sa rakenduse töölaualt käimagi vajutanud oled. Hmm … kuidas saame koguda nende vajaduse kokku ühte lausesse? Mõtleme sellest nii – ekraanid on väikesed, sõnad on pikad, aga ikoonid on? Väikesed. Rääkimata sellest, et üheselt mõistetavad, vahet pole, mis keelt sa räägid või mis kultuurist pärined. Õigesti ja hästi valmistatud ikoon muutub äpile hindamatuks varaks. Mida mõtleme “õigesti ja hästi” all? Superterav retina ekraanil, ei veni ega lohise, on joondatud korrektselt õiges suuruses ja on animeerimise puhul loodud kasutades korrektseid koodipõhiseid meetodeid. Rakendame hoolega põhimõtet “Do it right or don’t do it at all”, eks?

Onboarding – ee, kõik pardale?

Onboarding – polegi päris kindel, kuidas sellist asja meie emakeelde tõlkida, aga anname endast parima. Protsess iseenesest on lihtne – veena kasutaja võimalikult lihtsalt äppi kasutama. That’s it. Võid seda muidugi teha nii, kuidas ise paremaks pead – vaba maa. Aga, kujutad juba ette, kuidas see läheb meie senise teemaga kokku? Täpselt – illustratsioonid. Shocker, I know. Selle tarbeks on meil siin just soojas ka paar head näidet.

App walkthrough interaction by Divan Raj App walkthrough interaction by Divan Raj

Onboarding for Uniture Memory Booster by 5.21 Onboarding for Uniture Memory Booster by 5.21

Mida täpselt need illukad seal teevad? Kõige põhilisem asi – loo jutustamine. Mis äpp see on, mida sa sellega teha saad, kuidas sa seda teha saad ja mis kasu sellest üldse sulle võiks olla. Basic stuff. Tehnilisemaks minnes – numbrid näitavad, et sisu puust ja punaseks tegemine tõstab konversiooni ja kiirendab kogu protsessi. Lihtsalt öeldes – õppimine on palju ladusam ja lõbusam kui põhimeetodiks on ilusad pildid mitte kuiv tekst. Khm. (The irony here is not lost on me.)

Keskkonna peentuunimine

Toome need mõlemad mõtted ühte rüppe – kuidas ikoonid ja illustratsioonid peaksid üksteist rakendustes toetama? Paberil kõlaks nagu oleks juba liiga palju stuffi korraga ekraanil. Tõest on see õnneks kaugel. Praeguseks on ikoonide olemasolu juba sinu mobiilikasutusse niivõrd kinnistunud, et tihti sa ei pane tähelegi. See on justkui uus loomulik keel, mille oled ära õppinud. Kujutisena maakera tähendab keelt, inimene tähendab kasutajakontot, nooled liigutavad asju edasi-tagasi ja maja tähendab kodulehte või stardipunkti. Vanemad tegijad veel mäletavad, mida kujutab kurikuulus salvestusikoon, mis nüüdisajal nooremaid pead kratsima paneb.

Kokkuvõttes simple stuff, tegelikult. Omandasid salaja uue keele, nii et ise ei saanud arugi – tehnoloogia maagia. Illustratsioonid lähevad sellest sammu edasi – keerukuse aste on liigade võrra kõrgem, aga elemendid ju korduvad? Tähelepanelik power user olles näed samu asju, aga erinevates kuubedes. Kõike kureeritakse sinu kui lõppkasutaja järgi ja kui seda ei tehta, saad sa sellest kohe aru. Kõige paremad rakendused ja äpid toimivad su sõrmede all nii ladusalt, nagu nad oleksid su käepikendused digitaalmaailma. See on standard, mille sa peaksid endale äppe luues seadma.

Sinu järgmine äpiprojekt?

Aeg järjekordne põhjalik kokkuvõte teha, tl;dr so to speak. Võiksime ju tuua kõik punktidena välja, aga liiga lihtsaks ei maksa ka kõike teha, eks? Hästi, turvavööd peale ja let’s go. Illustratsioon toob sulle sõnumi läbi kirka visuaali. Kirgas visuaal > kuiv tekst (või ükskõik milline tekst.) Tehniliselt peaks olema joondamise jaoks illustratsioonil kindel fikseeritud suurus. Animatsioonid pole ka off the table: kõike saab liikuma panna juba rakenduse enda sees. Illukad (ikoonidest rääkimata, doh) aitavad su kasutajaid igal sammul ja tõstavad üleüldiseid onboarding numbreid. Suuremad numbrid – kõik on rõõmsamad.

Rääkides ikoonidest? Nemad loovad põhja kasutajakogemusele, The User Experience. Päris riskantne teema, eks. Ikoone kasutades hoiad kokku ruumis ja kasutaja mõttetöös (toetudes kasutaja enda instinktidele). Ikoon inimesest = kasutaja profiil ja nii edasi ja nii edasi. Peidetud aare ikoonides: testimist on lihtne läbi viia, näiteks: sisene kontosse, leia otsing, logi välja. Great success!

Aga – järgmisel nädalal saabub juba teema lõppsõna. Tegelikult räägime natuke veel veebiküljest ka, sest mida suurem pind seda uhkemad illustratsioonid. Lahkame ääri-veeri võib-olla ka nende tehnilist poolt ;) Igatahes, nagu alati – tšeki meie blogi või Dribbblet, kui tunned inspiratsioonis puudujääke.

Onboarding Flow by Duong Nguyen Onboarding Flow by Duong Nguyen

Smarthome iOS Exploration by Igor Rastvorov Smarthome iOS Exploration by Igor Rastvorov

Kiwi Jobs onboarding screens by Gosia Filipek Kiwi Jobs onboarding screens by Gosia Filipek

Bitbit Navigation State by Oscar Bicada III Bitbit Navigation State by Oscar Bicada III

Snippet UX/UI app by Cuberto Snippet UX/UI app by Cuberto

Onboarding Pickme app by Ha Truong Onboarding Pickme app by Ha Truong

DAY008: On-boarding screen for an education app by Sudeep Phase DAY008: On-boarding screen for an education app by Sudeep Phase

Ios Mobile Application by Asgar Qureshi Ios Mobile Application by Asgar Qureshi

Onboarding Clustory by Maryna Samsyka Onboarding Clustory by Maryna Samsyka

iD mobile onboarding by Indy Virdi iD mobile onboarding by Indy Virdi