Mobiilivaade pole desktopi väike vend ehk miks suurelt tehtud disain taskus katki läheb?

Väga paljud veebiprojektid algavad suurel ekraanil.

Disain avatakse sülearvutis. Klient vaatab. Tegija seletab. Kõik on ilus. Pealkirjad hingavad. Pildid mõjuvad. Nupud on õigel kohal. Vahed on mõnusad. Leht näeb välja nagu päris ettevõtte päris veeb. Kõik noogutavad.

Siis avatakse sama asi telefonis.

Ja korraga on tunne, nagu oleks keegi proovinud elutuba kohvrisse pakkida. Ehk siis jah, tekib kohe küsimus, et kõike kuvatakse, aga jube palju skrollimist.

Kõik on tehniliselt olemas, aga kasutada on ebamugav. Pealkiri võtab pool ekraani. Pilt on liiga suur. Vorm on liiga pikk. Nupp jääb kuhugi alla. Menüüs on kaheksa taset. Tekst on justkui lõputu. Sõrm väsib enne, kui inimene kontaktini jõuab.

Ja siis küsib klient: “Aga kas see ei pidanud responsive olema?”

Pidi küll.

Aga responsive veebileht ja päriselt mobiilile optimeeritud veebileht ei ole alati sama asi.

Responsive tähendab, et veeb kohandub ekraaniga

Alustame põhilisest.

Responsive disain tähendab seda, et veebileht kohandub erinevate ekraanisuurustega. Desktop, sülearvuti, tahvel, telefon. Sisu liigub ümber, plokid lähevad üksteise alla, pildid muutuvad väiksemaks, menüü läheb hamburgeriks ja kõik mahub ekraanile ära.

See on tänapäeval elementaarne.

Kui uus veebileht ei ole responsive, siis ei ole tegemist mitte kokkuhoiuga, vaid ajarännuga aastasse 2009.

Aga responsive ei tähenda automaatselt, et mobiilikogemus on hea.

See tähendab sageli ainult seda, et desktopi sisu on väiksemale ekraanile ümber paigutatud. Ehk kõik on korrektselt tehtud, kogu sisu kohandatakse mobiilile.

Küsimus on selles, kas seda kõike sisu on seal väiksel ekraanil üldse vaja.

Mobiil ei ole desktopi väike vend

Mobiilivaade ei ole lihtsalt desktopi kitsam versioon.

Telefonis kasutatakse veebi teistmoodi. Inimene hoiab seadet käes. Sageli ühe käega. Sageli liigub samal ajal. Sageli on tal vähem kannatust. Sageli tahab ta kiiresti ühte konkreetset asja: hinda, kontakti, asukohta, teenuse selgitust, broneerimist või ostu.

Ta ei istu seal kohvitassiga, nautides sinu avalehe kolmanda ploki filosoofilist sügavust.

Ta tahab aru saada.

Ja kiiresti.

Kui mobiilis kuvatakse kogu desktopi sisu samas järjekorras, ainult üksteise alla laotuna, võib veeb olla tehniliselt korrektne, aga kasutaja jaoks tüütu.

See on nagu teha restoranimenüü, kus telefonis peab enne päevapakkumiseni jõudmist läbi lugema restorani ajaloo, peakoka lapsepõlve, ettevõtte väärtused ja kolm lõiku sellest, kuidas kõik algas kirest hea toidu vastu.

Väga tore.

Aga mul on kõht tühi.

Pöial on mobiilidisaini projektijuht

Desktopis kasutab inimene hiirt või puuteplaati. Telefonis kasutab ta enamasti pöialt.

See muudab kõike.

Mobiilikogemus peab arvestama, kuhu sõrm ulatub, kui suur nupp on, kui lihtne on menüüd avada, kui mugav on vormi täita ja kui kiiresti saab inimene teha vajaliku tegevuse.

Kui nupp on liiga väike, vajutab inimene mööda.

Kui lingid on liiga lähestikku, vajutab inimene valele lingile.

Kui vormis on liiga palju välju, annab inimene alla.

Kui CTA on liiga kaugel, ei jõua ta selleni.

Kui menüü on keeruline, läheb ta minema.

Ja ei, ta ei saada sulle hiljem tagasisidet pealkirjaga “Teie mobiilse kasutajaliidese interaktsioonimudel vajab parandamist”.

Ta lihtsalt kaob.

Vaikselt. Nagu hea müügivõimalus ikka.

Menüü telefonis ei tohi olla väike entsüklopeedia

Desktopis võib suurem menüü veel toimida.

Seal on ruumi. Inimene näeb valikuid. Ta saab pilguga kiiresti haarata, kuhu edasi minna.

Telefonis on menüü hoopis teine asi.

Kui mobiilimenüüs on kümneid linke, mitu taset, pikad teenusenimed ja segane järjestus, siis muutub see kasutaja jaoks takistuseks.

Mobiilimenüü peaks aitama inimesel kiiresti valida kõige olulisema suuna.

Mitte näitama kogu ettevõtte sisukaarti nagu vana raamatukogu kataloog.

Mõnikord on mobiilis mõistlik menüüd lihtsustada. Tõsta esile kõige olulisemad teenused. Lisada nähtav kontaktinupp. Hoida struktuur lühem. Peita vähemoluline info sügavamale. Või muuta mobiilis teekond täiesti teistsuguseks kui desktopis.

See ei ole “responsive vaikimisi”.

See on mobiilile optimeerimine.

Vormid on mobiilis tõehetk

Kui tahad teada, kas veeb on mobiilis päriselt kasutatav, vaata vorme.

Kontaktivorm. Päringuvorm. Broneerimine. Ostukorv. Registreerimine. Hinnapäring.

Need on kohad, kus kasutaja peab tegema pingutuse.

Desktopis võib pikk vorm veel kuidagi läbi minna. Telefonis muutub iga lisaväli väikeseks takistuseks.

Kas nime on vaja?

Kas ettevõtte nime on kohe vaja?

Kas telefoninumber on kohustuslik?

Kas peame küsima aadressi enne, kui inimene üldse teab, kas ta tahab pakkumist?

Kas sõnumiväli on mobiilis mugav?

Kas klaviatuur avaneb õige tüübiga?

Kas nupule on lihtne vajutada?

Mobiilis peab vorm olema võimalikult lühike ja selge.

Mitte sellepärast, et inimesed on rumalad. Vaid sellepärast, et telefonis on kontekst teine. Väike ekraan, sõrmed, liikumine, tähelepanu hajumine ja üldine elu, mis kogu aeg vahele segab.

CTA peab olema nähtav siis, kui inimene on valmis

CTA ehk üleskutse tegevusele on mobiilis eriti oluline.

Kui inimene loeb teenuse kohta ja saab aru, et see võiks talle sobida, peab järgmine samm olema lihtne.

Helista. Kirjuta. Küsi pakkumist. Broneeri aeg. Saada päring. Vaata hinda.

Aga paljud mobiilivaated teevad CTA-ga midagi kummalist.

Desktopis on nupp ilusasti paremal. Telefonis satub ta kuskile pika tekstimassi alla. Või ilmub ainult lehe lõpus. Või on nii väike, et sellele vajutamine nõuab kirurgilist täpsust ja rahulikku hingamist.

Mobiilis peab järgmine samm olema käeulatuses.

Mõnikord tähendab see sticky-nuppu. Mõnikord korduvaid CTA-sid. Mõnikord lühemat sisu. Mõnikord teistsugust plokkide järjekorda.

Jälle: see ei ole lihtsalt desktopi kokkusurumine. See on eraldi otsustamine.

Laadimiskiirus on mobiilis karmim

Suur ekraan, kiire internet ja rahulik kontor annavad veebile palju andeks.

Telefonis ei anna keegi midagi andeks.

Kui inimene avab veebi mobiilses andmes, autos, tänaval, kontoris lifti ees või õhtul diivanil, peab leht kiiresti avanema.

Liiga suured pildid, rasked videod, liigsed animatsioonid ja kolmandate osapoolte skriptid võivad mobiilikogemuse ära rikkuda.

Mobiili laadimiskiirus ei ole tehniline kapriis. See mõjutab otseselt seda, kas inimene jääb lehele või lahkub.

Ja kui kogu avalehe esimene sektsioon on üles ehitatud väga suurele videole, mis telefonis aeglaselt köhib ja lõpuks kuidagi käima läheb, siis võib see desktopis olla “wow”, aga mobiilis on see “ma lähen ära”.

Hea ekraanidega ühilduvus ja responsive lahendus arvestab erinevaid seadmeid, aga päris mobiili optimeerimine vaatab ka seda, mida tasub telefonis üldse laadida ja näidata.

Sisu pikkus on mobiilis teine teema

Desktopis võib pikk tekst olla okei, kui ta on hästi struktureeritud.

Telefonis muutub pikk tekst kiiresti lõputuks tunneliks.

See ei tähenda, et mobiilis peab sisu olema rumalalt lühike. Ei pea.

Aga mobiilis peab sisu olema paremini rütmistatud.

Lühemad lõigud. Selgemad vahepealkirjad. Korduvad CTA-d. Vähem dekoratiivseid plokke. Olulisem info varem. Sektsioonid, mida saab kiiresti skännida.

Ja mõnikord tähendab see ka seda, et kõike desktopi sisu ei pea mobiilis samal kujul näitama.

Võib-olla pikk võrdlustabel töötab desktopis hästi, aga mobiilis peaks sellest tegema akordionid.

Võib-olla suur galerii on desktopis ilus, aga mobiilis piisab kolmest pildist.

Võib-olla teenuse detailne protsess on desktopis vajalik, aga mobiilis peab alguses näitama ainult kõige olulisemat.

See on strateegia, mitte automaatika.

Responsive on baas. Mobiili optimeerimine on eraldi töö.

See on koht, kus ootused ja eelarve sageli tülli lähevad.

Klient eeldab, et kui uus veeb valmib, siis on mobiilivaade kohe 100% optimeeritud.

Tegija ütleb, et veeb on responsive.

Mõlemad kasutavad justkui õigeid sõnu, aga räägivad erinevast asjast.

Responsive lahendus tähendab, et veeb kohandub ekraanidega.

Mobiilile optimeeritud lahendus tähendab, et mobiilikogemus on eraldi läbi mõeldud: sisu, plokkide järjekord, vormid, menüü, CTA-d, pildid, laadimine, ostuteekond ja kasutaja tegelik käitumine telefonis.

See on rohkem tööd.

Ja rohkem töö tähendab rohkem eelarvet.

See ei ole trikk. See ei ole “aga võiks ju hinna sees olla”. See on sama loogika nagu auto ostmisel.

Baasvarustus viib sind punktist A punkti B. Kui tahad paremat helisüsteemi, mugavamaid istmeid, parkimisandureid, nelikvedu ja panoraamkatust, siis need on lisad. Mõnikord vajalikud, mõnikord mitte. Aga keegi ei eelda, et kõik võimalikud lisad tulevad baashinnaga kaasa, sest “auto ju”.

Veebiga on sama.

Miks tänapäeval veebilehe tegemine kallim tundub?

Üks põhjus on see, et veeb ei pea enam hea välja nägema ainult ühes kohas.

Kunagi piisas sellest, et veeb töötas enam-vähem ühes brauseris ja ühe suurusega ekraanil. Nüüd on telefonid, suured telefonid, väikesed telefonid, tahvlid, sülearvutid, suured monitorid, erinevad brauserid, erinevad ühendused ja inimesed, kelle kannatus on umbes sama pikk kui TikToki video sissejuhatus.

Kaasaegne veebidisain peab arvestama mitme seadme, mitme kasutusolukorra ja mitme teekonnaga.

Odavalt saab ka.

Aga siis tuleb aru saada, et ostad baaslahenduse.

Kui soovid eraldi läbimõeldud mobiiliteekonda, optimeeritud vorme, seadmetepõhist sisu, erinevaid CTA-lahendusi, põhjalikku testimist ja paremat mobiilikogemust, siis see on lisatöö.

Ja lisatöö peab olema eelarves.

Kui soovid hinnast paremini aru saada, aitab Caotica hinnakalkulaator mõelda, millised valikud ja ootused veebiprojekti maksumust mõjutavad.

Mobiilne ostuteekond võib olla täiesti erinev

Eriti oluline on see e-poodide, teenusebroneeringute ja päringuvormide puhul.

Desktopis võib inimene rahulikult võrrelda, lugeda, filtreerida, uurida ja täita pikemaid vorme.

Telefonis tahab ta tihti kiiremat teekonda.

Võib-olla peab mobiilis olema esimesena nähtav “Helista” nupp.

Võib-olla peab ostukorv olema lihtsam.

Võib-olla peab teenuse pikk kirjeldus tulema pärast lühikest kokkuvõtet.

Võib-olla tuleb mobiilis osa infot peita akordionitesse.

Võib-olla tuleb vorm jagada sammudeks.

Võib-olla tuleb kogu järjekord ümber teha.

Mobiilne kasutajateekond võib olla eraldi disainiülesanne.

See ei tähenda, et desktop ja mobiil peavad olema kaks täiesti erinevat veebi. Aga need ei pea olema ka üks ja sama leht, mis lihtsalt kitsamasse torusse suruti.

Just siin tuleb mängu kasutajamugavus ehk UX. Mobiilis ei piisa sellest, et kõik mahub ekraanile. Kasutajal peab olema mugav tegutseda.

Mis tuleb projekti alguses kokku leppida?

Kui tellid uut veebilehte, tasub kohe alguses küsida:

• Kas pakkumine sisaldab responsive lahendust või eraldi mobiili optimeerimist?
• Millistel seadmetel ja ekraanisuurustel veebi testitakse?
• Kas mobiilimenüü disainitakse eraldi?
• Kas vormid optimeeritakse mobiilis täitmiseks?
• Kas CTA-d ja kontaktiteekond mõeldakse mobiilis eraldi läbi?
• Kas kogu desktopi sisu kuvatakse mobiilis või tehakse valikuid?
• Kas pildid ja videod optimeeritakse mobiili jaoks?
• Kas e-poe või päringu teekond on mobiilis eraldi läbi testitud?

Kui need küsimused on alguses läbi räägitud, on hiljem palju vähem üllatusi.

Kui neid ei räägita, siis jõuab mobiiliteema sageli projekti lõppu. Ja projekti lõpus on mobiili põhjalik ümbermõtlemine umbes sama lõbus nagu köögi ümberplaneerimine pärast plaatimist.

Disain tuleb teha päris kasutuse järgi

Paljud kliendid vaatavad disaini suurel ekraanil, sest nii on mugav.

Aga päris kasutaja võib tulla telefonist.

Ta võib tulla reklaamist.

Ta võib tulla Google’ist.

Ta võib tulla sotsiaalmeediast.

Ta võib tulla õhtul diivanilt, bussist, koosoleku vahelt või kontori köögist.

Hea kodulehe disain peab arvestama päris kasutusolukorda, mitte ainult seda, kuidas kavand 27-tollisel monitoril välja näeb.

Sellepärast on kodulehe disain ja UX terviklik töö. Desktop, mobiil, sisu, CTA-d, vormid, kiirus, kasutajateekond ja testimine kuuluvad kõik sama küsimuse alla: kas inimene saab veebis oma asja mugavalt tehtud?

Kokkuvõttes

Mobiilivaade ei ole desktopi väike vend.

Telefonis on teine kasutusolukord, teine tähelepanu, teine ekraan, teine sisendi viis ja tihti ka teine eesmärk.

Responsive veeb on tänapäeval baas. See tähendab, et veeb kohandub ekraanidega ja ei lagune telefonis lihtsalt ära.

Aga mobiilile optimeeritud veeb tähendab rohkemat. See tähendab eraldi mõtlemist: mida näidata, mida peita, kuidas menüü töötab, kuidas vormi täita, kus CTA asub, kuidas pildid laadivad, kui pikk on sisu ja kas inimene saab telefonis päriselt tegutseda.

Kui soovid ainult baaslahendust, on responsive sageli piisav.

Kui mobiil on sinu jaoks oluline müügi-, päringu- või ostukanal, tuleb seda käsitleda eraldi tööna.

Ja see tuleb kokku leppida projekti alguses, mitte siis, kui kõik on juba valmis ja keegi avastab telefonis, et lehte peab skrollima nagu kasutusjuhendit külmkapi tagant.

Kui soovid veebilehte, mis ei näe hea välja ainult sinu sülearvutis, vaid töötab päriselt ka telefonis, tahvlis ja erinevatel ekraanidel, siis räägime sinu veebiprojektist.