Optimizacija odredišne ​​stranice za mobilne uređaje. Prilagodba odredišne ​​stranice za mobilne uređaje: odakle početi

Razvoj odredišnih stranica (tzv. landing page ili landing pages) čvrsto je ušao u paletu usluga većine web studija, a to ne čudi: odredišne ​​stranice su tražene jer se vjeruje da donose pravi novac. kupci najbrži.

U međuvremenu, slijetanja su različita. Jedna odredišna stranica, koja radi u tandemu s reklamnim bannerima, uspješno će informirati klijenta o proizvodu i usluzi i potaknuti ga na kupnju (ili bilo koju drugu potrebnu radnju), a druga će ostati obična stranica stranice, samo malo ljepši i "fancy" od ostalih. .

Što odredišnu stranicu čini uspješnom?

Odgovarajući na ovo pitanje, možemo spomenuti dizajn, korišteni sadržaj, strukturu elemenata, kompetentno postavljanje poziva na akciju, društvene gumbe itd. Međutim, ako sažeti i odgovorimo na gornje pitanje u jednu riječ, onda možemo s povjerenjem reći da uspjeh odredišne ​​stranice ovisi o upotrebljivosti.

Dobra upotrebljivost omogućuje klijentu da se na odredišnoj stranici osjeća kao kod kuće: struktura elemenata je prikladna; sadržaj i pozivi na akciju glatko dovode kupca do kupnje; slijetanje ne preopterećuje klijenta nepotrebnim informacijama; odredišna stranica ne tjera klijenta da bjesomučno skroluje po stranici kako bi pronašao željeni (ili ga već nema?) gumb za kupnju.

Dobra upotrebljivost, kao što možete pretpostaviti, nije univerzalna. Ne postoji jedan recept za sve niše i, naravno, ne može biti. U međuvremenu, mnogi dizajneri i programeri, kada rade na odredišnoj stranici, zanemaruju najjednostavniju stvar: dobra upotrebljivost odredišne ​​stranice za desktop neće biti tako za mobilne uređaje. Čini se očitim, ali ne...

Dakle, što se može učiniti da se napravi prikladna odredišna stranica za mobilne uređaje? Koje su značajke mobilnih odredišnih stranica? Što trebate imati na umu kada dizajnirate odredišnu stranicu za mobilne uređaje? Odgovorit ćemo na ova pitanja u nastavku.

Stvari koje treba imati na umu kada dizajnirate odredišnu stranicu za mobilne uređaje. 7 savjeta

Vjerojatno je ova istina već uspjela napuniti zube na rubu, ali ipak ćemo je ponoviti još jednom: mobilni korisnici se jako razlikuju od desktopa. Njihovi su ciljevi, kao što možete pretpostaviti, također vrlo različiti.

Dakle, kada počnete raditi na svojoj odredišnoj stranici, postavite si sljedeća pitanja:

• Utječu li veličina zaslona, ​​vrsta uređaja i opći kontekst korištenja na očekivanja korisnika? Ako da, kako?
• Što bi korisnicima mobilnih uređaja moglo najviše trebati na ovoj odredišnoj stranici?
• Što će potencijalni korisnici htjeti učiniti kada dođu na mobilnu odredišnu stranicu? Kakvi su njihovi postupci?

Čini se da su odgovori na ova pitanja očigledni, ali nemojte ih podcjenjivati. Činjenica je da mobilni korisnici ne kupuju tako aktivno kao desktop. Pretvorba se distribuira otprilike na sljedeći način:

1. Tablete
2. Pametni telefoni.

Što kaže? O banalnoj činjenici koja je poznata svakom psihologu: da bi donijela odluku, osobi su potrebne informacije predstavljene u prikladnom formatu. Štoviše, što je viša "cijena" rješenja, to su osobi potrebne kompetentnije informacije. Grubo rečeno, čovjek će bez problema naručiti pizzu sa pametnog telefona, ali neće kupiti auto dok sjedi sa pametnim telefonom u parku.

Uspjeh mobilne odredišne ​​stranice ne mjeri se uvijek konverzijama. Kupci koji dođu na odredišnu stranicu s mobilnog uređaja nisu uvijek raspoloženi za kupnju. Dapače, klijent posjeti takvu odredišnu stranicu kako bi se upoznao s informacijama i uspostavio emocionalnu vezu s proizvodom, a tek onda, kada dođe kući i sjedne za PC, obavi kupnju.

Sumirajući, možemo reći da je cilj klijenta pronaći informacije, cilj vlasnika stranice je dobiti novac, a cilj dizajnera i programera je napraviti landing stranicu koja bi mogla privući maksimalan broj potencijalnih kupaca. .

Dakle, dolaskom na mobilnu odredišnu stranicu, klijent traži informacije kako bi donio odluku - kupiti proizvod ili ne? Stoga se trebate potruditi da olakšate ovaj proces.

Otrcano, ali najlakši način da se klijent odluči hoće li kupiti ili ne je nazvati. Stoga postavite uslugu brzog poziva. Neka ikona dragocjenog telefona prati potencijalnog klijenta na cijeloj odredišnoj stranici. Imajte na umu da bi to trebala biti upravo ikona s telefonom i neka vrsta poziva na akciju poput "Nazovi odmah!". Brojna istraživanja su pokazala da je ikona 10-20% učinkovitija od običnog telefonskog broja.

Važno! Postavite pozive samo ako ste sigurni da će netko odgovoriti na njih. Ako potencijalni klijent nazove i čuje samo zvučne signale kao odgovor, možete sigurno zaboraviti na ovog klijenta.

Idealna mobilna odredišna stranica ne samo da ne preopterećuje korisnika informacijama, već ga i ne prisiljava na "nepotrebne" radnje. Takve nepotrebne radnje možemo sa sigurnošću pripisati ispunjavanju raznih obrazaca koje svi toliko volimo na računalu.

Natjerati klijenta da unese podatke o sebi za pretplatu ili kupnju na duže vrijeme i zamorno znači gubitak. Samo najustrajniji stižu do kraja. posljedično:

• smanjiti broj padajućih izbornika na minimum ili ih potpuno odbiti;
• smanjiti ukupan broj polja za popunjavanje - sve dodatne informacije može zatražiti djelatnik call centra nakon što klijent napusti narudžbu;
• provjerite jesu li sva preostala polja ispravno konfigurirana, odnosno mobilna tipkovnica se automatski prilagođava polju: puno ime - slova, telefon - brojevi itd .;
• ako je potrebna registracija, aktivirajte mogućnost registracije putem društvenih mreža;
• pobrinite se da usluge plaćanja ne zahtijevaju od klijenta ponovno popunjavanje svih podataka.

Grubo govoreći, broj potrebnih radnji na odredišnoj stranici svedite na minimum. Rad s malim ekranom je nezgodan, a ispunjavanje desetaka različitih polja samo je sprdnja!

Savjet 4. Poziv na akciju uvijek treba biti vidljiv

Bez obzira na svrhu vaše odredišne ​​stranice, dajte sve od sebe da vaš poziv na radnju bude ispred vaših kupaca.

“Kupite odmah!”, “Pretplatite se na newsletter!”, “Ostvarite popust!”, “Preuzmite knjižicu!” i drugi pozivi na radnju ne bi trebali biti negdje na dnu stranice ili negdje u zaglavlju odredišne ​​stranice, već bi se trebali ponavljati u različitim semantičkim dijelovima odredišne ​​stranice ili “pratiti” klijenta prilikom pomicanja.

Čini se da je najbolje rješenje sljedeće: postavite poziv na akciju ispod logotipa tvrtke u izborniku za pomicanje. Dakle, poziv na akciju uvijek će biti na vidiku, a korisnik će moći izvršiti željenu radnju s bilo kojeg mjesta na odredišnoj stranici. Osim toga, ovo rješenje će izbjeći probleme rješavanja: poziv na akciju uvijek će biti ispod logotipa i smanjivat će se-povećati zajedno s njim.

Sadržaj je bitan dio svake odredišne ​​stranice, ali ga ne bi trebalo biti previše. Sadržaj treba biti jasan, razumljiv i navesti klijenta na željenu radnju.

Posebnost mobilne odredišne ​​stranice je da su zahtjevi za sadržajem znatno povećani. Pažnja mobilnog korisnika je vrlo raspršena - neće lektorirati platna 20 minuta, što, zašto i zašto. Dakle, tekst mora biti prisutan, ali samo u biti.

Nemojte vući gumu, već odmah recite klijentu što može dobiti na ovoj odredišnoj stranici. Nemojte koristiti "lijepe" fraze i duge okrete - kratkoća, jednostavnost i jasnoća važniji su od stila. Zapamtite ovo.

Korisnici mobilnih uređaja ne samo da su manje skloni pažljivo čitati odredišnu stranicu, već si to često jednostavno ne mogu priuštiti zbog sporog učitavanja stranice.

Nedavno istraživanje provedeno u SAD-u pokazalo je da odredišne ​​stranice koje su teške i nisu optimizirane za male brzine interneta gube 40-50% potencijalnih kupaca. Pa, u svijetu u kojem svaki posao ima desetke konkurenata, nitko ne želi čekati i, vjerujte, neće.

Kako bi stranica bila svjetlija, provjerite:

• sve slike su optimizirane i mogu se brzo učitati čak i uz malu brzinu interneta;
• odredišna stranica koristi tehnologiju skalabilne vektorske grafike, odnosno sve slike moraju se povećavati i smanjivati ​​ovisno o razlučivosti bez gubitka kvalitete;
• sav sadržaj je u HTML-u, a ne prikazan kao slika.

Na samom početku članka napisali smo da se mobilni korisnici jako razlikuju od desktopa. To je istina, ali oni još uvijek nisu različiti ljudi. Koji god uređaj potencijalni klijent koristi, uvijek ima neku vrstu problema koji možete riješiti. U principu, svakom klijentu ne trebaju vaša roba i usluge, već rješenje za njegove probleme.

Što iz toga slijedi i kakve veze ima mobilna odredišna stranica s tim? Landing stranica će biti uspješna ako s potencijalnim klijentom uspijete podijeliti njegove želje i brige, ponuditi mu kompetentno i učinkovito rješenje problema. Svatko ima robu, usluge i odredišnu stranicu za sebe, ali samo vi imate rješenje!

Nakon što ste to shvatili, trebali biste razumjeti koje je rješenje najučinkovitije. Ovdje dolazi u obzir A/B testiranje. Koristite kontrolne grupe da saznate:

• što je privlačnije za vašu odredišnu stranicu, poziv na akciju ili ikonu brzog poziva;
• što radi bolje, ikona brzog poziva ili gumb s telefonskim brojem;
• Povećava li se konverzija ako uklonite dodatna polja;
• Povećava li se konverzija ako dodate mogućnost registracije putem računa na društvenim mrežama;
• poboljšava li se statistika potrebne radnje ako poziv na radnju postavite ne samo na samu odredišnu stranicu, već i ispod logotipa u izborniku za pomicanje;
• poboljšava li se upotrebljivost ako promijenite sadržaj, učinite ga jednostavnijim i jasnijim;
• pokušajte promijeniti poziv na akciju, dodati slogane koji kupcu govore da je proces kupnje, prijave itd. lako i neće dugo trajati.

zaključke

Sumirajući, možemo reći da odredišna stranica ne može biti uspješna bez dobre upotrebljivosti. Što je dobra mobilna upotrebljivost, opisali smo gore, ali opet ponovimo. Dakle, dobra odredišna stranica za mobilne uređaje:

• “naoštreno” za jedan zadatak;
• dovoljno informativan da klijent odluči poduzeti potrebnu radnju;
• omogućuje klijentu da jednostavno kontaktira službu podrške telefonom ili putem kontakt obrasca;
• ne prisiljava klijenta da ispuni mnoga polja prilikom obavljanja željene radnje;
• ne širi misao duž stabla, jasno i jasno daje do znanja koji će problem klijent riješiti poduzimanjem;
• brzo učitava, ne tjera klijenta da gubi dragocjeno vrijeme;
• omogućuje vam da izvršite potrebnu radnju, u kojem dijelu odredišne ​​stranice klijent ne bi bio (minimalno pomicanje);
• usmjerena ne na ponudu proizvoda ili usluge, već na rješavanje problema korisnika.

Također napominjemo da mobilna odredišna stranica mora proći A/B testiranje. Dakle, povećat ćete šanse da odredišna stranica funkcionira.

Nadamo se da smo danas riješili vaš problem. Hvala na čitanju!

Zamislite da se nalazite u nepoznatom gradu i trebate brzo pronaći određene informacije putem mobilnog telefona. Konačno ste pronašli pravi resurs, ali ... potpuno nije dizajniran za male ekrane. Potrebno je zauvijek da se stranica učita, male gumbe je nemoguće pronaći, a morate kopirati i zalijepiti telefonski broj tvrtke da biste nazvali ured. Ili još gore: trebate ispuniti dugačak obrazac za potencijalne klijente.

Svi smo to iskusili barem jednom u životu. Statistika analitičke tvrtke "IDC" kaže da će ove godine biti više korisnika koji pristupaju internetu putem mobilnih uređaja nego onih koji koriste osobna stacionarna računala.

Istraživanje Lukea Wroblewskog, glavnog direktora za proizvode u Googleu i autora Mobile First! pokazuje da se između 2009. i 2013. potrošnja sadržaja putem poznatih kanala poput televizije, radija i tiska značajno smanjila. Jedini pokazatelj koji je porastao je korištenje mobilnih uređaja.

Više nego ikad, ljudi sada kupuju online, čitaju vijesti i pretražuju web stranice na svojim telefonima. No, unatoč činjenici da se ovaj trend razvija već nekoliko godina, mnogi se resursi nisu uspjeli prilagoditi.

Čak iu 2015. godini većina korisnika ima niz poteškoća:

• Odredišne ​​stranice nisu optimizirane za mobilne zaslone, stranice su teške za navigaciju;
• Morate stalno zumirati i umanjiti stranice da biste pronašli informacije koje su vam potrebne;
• Trebate stalno unositi neke podatke;
• Stranice se sporo učitavaju;
• Gumbi su premali, pa posjetitelj često dođe na pogrešnu stranicu.

Zbog činjenice da postotak korištenja mobilnih uređaja svake godine raste, pitanje poboljšanja upotrebljivosti mobilne verzije postaje sve aktualnije.

Ako još niste optimizirali svoju odredišnu stranicu i niste sigurni da će svi korisnici telefona biti zadovoljni njome, obratite pozornost na ovih 5 uobičajenih pogrešaka i nikada ih nemojte činiti. U suprotnom će vaši potencijalni kupci ostati razočarani i odlučiti se u korist konkurenata.

1. Stranica nije optimizirana za mobilne uređaje

Još u prosincu 2012. medijski resurs Mashable proglasio je 2013. godinom responzivnog dizajna. Najveće tvrtke su tada obratile pozornost na to i razvile mobilne verzije svojih resursa. No, mnogi se do sada ne mogu pohvaliti ispravnim prikazom stranica.

Responzivni dizajn način je da se vaš resurs dobro prikaže na različitim platformama i uređajima bez stvaranja više stranica. Na primjer, korisnici će, bez gubljenja vremena na skaliranje (uostalom, ovo stvarno smeta), moći će prijeći ravno na navigaciju. Responzivni dizajn ne samo da će poboljšati korisničko iskustvo, već će imati i pozitivan utjecaj na konverzije.

Trgovac odjećom O'Neill Clothing postigao je impresivne rezultate nakon što su njegovi trgovci usvojili responsive dizajn. Pratili su tri ključna pokazatelja: konverzije, ponude i prihod tri tjedna prije i nakon primjene tehnologije. Rezultati su bili nevjerojatni.

iOS uređaji:

• Konverzija povećana za 65,71%
• Broj transakcija - za 112,50%
• Prihod - za 101,25%

Android uređaji:

• Konverzija povećana za 407,32%
• Broj transakcija - za 333,33%
• Prihod - za 591,42%

Mnogo je primjera koji ilustriraju jasne prednosti responzivnog dizajna. Skinny ties, tvrtka koja proizvodi kravate od 1971. godine, zabilježila je povećanje prihoda od 42,4% nakon lansiranja mobilnih uređaja. U tvrtki za fotografsku opremu Think Tank Photo broj transakcija napravljenih pomoću pametnih telefona i tableta porastao je za 96% u odnosu na prethodnu godinu.

2. Ignoriranje korisničkih ciljeva

Još jedna uobičajena pogreška je pretpostavka da će responzivni dizajn riješiti sve probleme. Ali nije sve tako jednostavno. Iako je u stanju spriječiti mnoge poteškoće, vrijedi razmotriti namjere onih korisnika koji resursu pristupaju s mobilnog telefona.

Mike Mace, potpredsjednik UserTestinga, istražio je tisuće mobilnih verzija. Evo njegovog zaključka: “Morate redizajnirati svoju stranicu posebno za mobilne uređaje, a ne samo je prilagoditi. Mobilna verzija nije samo drugačiji skup tehnologija, to je i drugačije ponašanje korisnika, različita očekivanja.”

Na primjer, vlasnici pametnih telefona očekuju da će njihovi ciljevi biti ispunjeni odmah. Žele brzo pronaći informacije tijekom pauze između sastanaka ili tijekom vožnje autobusom. Korisnik tableta često ima vremena za pretraživanje, na primjer, sjedi kod kuće ispred televizora (koji, inače, djeluje kao distrakcija).

Također treba imati na umu da se potrebe i prioriteti vlasnika mobilnih telefona često razlikuju od onih korisnika kućnih računala: prvi će, najvjerojatnije, morati brzo pronaći karticu ili telefonski broj. Stoga stručnjaci preporučuju ne samo "prenošenje" svih informacija s odredišne ​​stranice na mobilnu verziju, već razmišljanje o ciljevima korisnika i odgovarajućem dizajnu.

Nitko ne voli ispunjavati dugačke obrasce čak ni na redovitim stranicama, a unos raznih informacija putem mobitela toliko je neugodan da se ne uklapa ni u jedan okvir. Najbolji savjet: izbjegavajte duge, dosadne obrasce kada razvijate mobilnu verziju.

Kao rezultat toga, dobit ćete ne samo pozitivno korisničko iskustvo, već i povećanje prihoda, rast vašeg poslovanja. Kao što smo već doznali, dugi obrasci su dosadni, a ako ih koristite, sigurno ćete na taj način smanjiti stopu konverzije. Na primjer, velika putnička agencija, Expedia, izgubila je 12.000.000 dolara prihoda zbog nepotrebnih polja obrasca koja zbunjuju korisnike i jednostavno ih zbunjuju.

Ako korisnici vide dugačke obrasce na svom mobilnom uređaju, pokušat će izbjeći zamorne interakcije. Autorica Lean Startup UX-a Laura Klein napominje: "Očekivanje od korisnika mobilnih uređaja da unose podatke na isti način kao i korisnici stolnih računala najveća je pogreška mnogih tvrtki."

Nekoliko savjeta za stvaranje najprikladnijih i razumljivih obrazaca:

• Birajte samo jednostavne forme i ne tražite previše informacija;
• Uklonite dodatna polja;
• Uključite automatsko dovršavanje za najčešće riječi i izraze;
• Koristite alate ugrađene u mobilne uređaje (numerička tipkovnica, GPS, adresari, kamere itd.).

Poznata situacija: pokušavate pratiti poveznicu ili ispuniti obrazac putem mobilnog telefona, ali umjesto toga završite na potpuno drugoj stranici. Kombinacija malih ekrana i mnogih elemenata na koje se može kliknuti stvara mnogo neugodnosti za korisnike.

Steven Hoober, dizajner mobilnog korisničkog iskustva, dizajner i autor Mobile Interface Design savjetuje: “Provjerite je li svaka dodirna zona najmanje 8 milimetara od središta druge, iako je 10 milimetara čak i poželjnije.”

Veze, polja obrasca i drugi važni elementi trebaju biti dovoljno veliki da korisnici lako kliknu na njih. U tu svrhu, Apple je postavio minimalnu veličinu objekta od 44x44 piksela. Sada se ovaj standard koristi za sve proizvode tvrtke.

Ne postoje pravila i veličine koje bi odgovarale svakoj odredišnoj stranici, ali prema Stevenu Huberu, prilikom razvoja resursa treba uzeti u obzir tri kriterija: gumbi trebaju biti čitljivi, jasni i privlačni korisnicima.

Korisnici mobilnih uređaja vrlo su nestrpljivi i sporo učitavanje predstavlja veliki problem. 80% vlasnika pametnih telefona očekuje da će se stranice učitavati jednako brzo kao i na zaslonu računala. Ako stranica ne reagira na korisnikov dodir, tada je osoba najvjerojatnije:

Umjesto zaključka

Razina potrošnje medijskih sadržaja putem mobilnih uređaja svakim mjesecom raste. Sve više ljudi dobiva pristup mobilnom internetu, a to je važno uzeti u obzir prilikom izrade odredišne ​​stranice ili web stranice.

Presloženi resursi frustriraju korisnike i potiskuju ih konkurentima. Učinivši svoju odredišnu stranicu jednostavnom i ugodnom za korištenje na mobilnim uređajima, prestat ćete gubiti potencijalne kupce i povećati stopu stvaranja potencijalnih kupaca.

Opet, dobra vijest za vlasnike WordPress stranica je da postoje dodaci koji stvaraju mobilnu verziju vaše stranice na poddomeni, kao što je WP Mobile Edition.

Prednosti ove metode: Možete značajno pojednostaviti dizajn stranice za mobilne uređaje, što će dobro utjecati na njegovu brzinu.

minusi: trebate kreirati poddomenu i konfigurirati je, napisati zaseban predložak za nju i skriptu koja određuje s kojeg uređaja je korisnik došao, a to je duže od izrade adaptivnog dizajna.

Što ćemo dobiti?

Dodatna adresa web-mjesta na poddomeni "m." s dizajnom drugačijim od glavne domene, pojednostavljeno. Mreža je puna primjera takve implementacije, na primjer, ovdje je dobro poznato mjesto:

Ako ste se odlučili i naručili jedan od načina implementacije, ne zaboravite provjeriti kako se vaša stranica prikazuje na mobilnim uređajima iu Google online testovi.

Više o temi:

Imate pitanja?

Pitajte ih odmah i mi ćemo odgovoriti u roku od 8 radnih sati.

Mobilni promet promijenio je svijet tako brzo da su nova pravila igre mnoge iznenadila. Nedavna istraživanja tržišta pokazuju stalnu stagnaciju segmenta stolnih računala u pozadini snažnog rasta mobilnih uređaja koji traje više od godinu dana. Pod takvim uvjetima, posao koji nije spreman raditi s najvrjednijim prometom s pametnih telefona i tableta prestat će biti učinkovit - sada ili za šest mjeseci, nije važno.

To se posebno odnosi na tvrtke u segmentu e-trgovine koje se oslanjaju na prodaju putem odredišnih stranica. Broj jedan na popisu zadataka za voditelja takvog posla očito bi trebala biti adaptacija odredišne ​​stranice za mobilne uređaje. A kako bi bio što učinkovitiji, vrijedi procijeniti opseg posla.

Dakle – što i kako se prilagođavamo?

• Slike.U pravilu su slike na radnoj površini nepristojno velike i učitavanje na mobilnom uređaju traje vječno. Morate ih ili smanjiti – uklopiti ih na zaslone pametnih telefona i tableta, smanjiti kvalitetu kako biste smanjili težinu ili možete koristiti dodatak/skriptu Adaptive Images koji odabire veličinu i kvalitetu slike ovisno o uređaju. Prvo rješenje je strateški ispravnije i omogućit će vam učinkovitiju optimizaciju odredišne ​​stranice za mobilne uređaje.

• Izbornik.Pojednostavite navigaciju izbornikom - riješite se manje važnih opcija, višestupanjskih kartica i malih slova.

• Tablice.Svaka internetska trgovina sastoji se od tablica s robom, a često se nalaze na drugim stranicama. Kako bi se ti podaci ispravno prikazivali prilikom prilagođavanja odredišne ​​stranice za mobilne uređaje, osigurajte mogućnost horizontalnog pomicanja – kako bi glavni sadržaj ostao nepomičan.

• Obrasci za unos.Treba ih povećati i optimizirati za korištenje ispravnih vrsta polja. Također isključite automatsko ispravljanje, pisanje velikih slova i ispravljanje - ometaju unos podataka s telefona.

• Sadržaj.Nemojte koristiti font manji od 16 točaka, ne zaboravite na uvlake između redaka i od ruba zaslona - i nemojte pojednostavljivati ​​sadržaj toliko da klijent mora otići na web mjesto za desktop u potrazi za potrebne informacije.

• Prilagodljivost.Mnogi ljudi misle da optimiziranje odredišne ​​stranice za mobilne uređaje znači da ona bude responzivna. To nije sasvim točno: stranica jednostavno mora biti ispravno prikazana na svim ekranima, što se nikako ne postiže jednom tehnologijom. Pročitajte više o tehnologijama mobilizacije web mjesta u našem članku.

• Brzina skidanja.Ovaj parametar izravno ovisi o svim prethodnim točkama. U pravilu se najbrže učitavaju mobilne stranice izrađene pomoću tehnologije za izradu predložaka. Budući da su predlošci već unaprijed kvalitativno optimizirani, možete sigurno preskočiti sve prethodne stavke na popisu i prijeći na najzanimljivije - odabir i jednostavno postavljanje odgovarajuće opcije.

Sve te naizgled složene stvari lako se uklapaju u jednostavna rješenja. Rusko tržište nudi izbor opcija prilagodbe odredišne ​​stranice za mobilne uređaje za svaki ukus i proračun: možete unajmiti cijeli web studio ili koristiti online usluge. .

Tvoj izbor!

93% korisnika svakodnevno pristupa internetu s mobilnih uređaja. Ovo je 3.500.000.000 ljudi koji mogu posjetiti vašu odredišnu stranicu u bilo kojem trenutku sa svojih pametnih telefona ili tableta. Stoga morate uložiti sve napore kako biste optimizirali svoju mobilnu odredišnu stranicu. Ne postoji ništa gore od toka konverzije koji je potpuno neučinkovit na mobilnim uređajima.

U ovom ćete članku naučiti 8 najboljih primjera iz prakse za dizajn mobilnih uređaja koji će vam pomoći da poboljšate korisničko iskustvo i povećate broj konverzija na bilo kojem uređaju.

1. Riješite se navigacijske trake

Pogledajte koliko prostora navigacijska traka može zauzeti:

Na malim mobilnim zaslonima svaki je piksel bitan i morate ga maksimalno iskoristiti. Jedan jednostavan način da to učinite je da se riješite navigacijske trake. Na stolnim računalima to može biti vrlo korisno: posjetiteljima olakšava navigaciju web-mjestom i pronalaženje onoga što im treba. Ali na mobilnom uređaju navigacijska traka zauzima previše prostora na kojem bi mogao biti tekst, slike ili bilo koji drugi sadržaj.

Kako se posjetitelji mogu kretati vašom web lokacijom bez navigacijske trake? Postoji nekoliko načina. Najpopularniji od njih je mala gornja ploča. “Hamburger” služi kao svojevrsna ladica koja izmiče iz kuta ekrana i sadrži razne prečace izbornika.

Druga je mogućnost mobilna stranica na jednoj stranici. Međutim, ako vaša stranica ima puno sadržaja, to vam neće raditi.

Sigurno često koristite svoj pametni telefon – u autobusu ili u redu. Možda upravo čitate ovaj njegov članak. Kako držite svoj pametni telefon? Najvjerojatnije palcem prevlačite ekran. To radi 75% korisnika.

Prije nekoliko godina ovaj je grafikon bio biblija mobilnih dizajnera. Imajući to na umu, optimizirali su korisničko iskustvo za većinu ljudi. I iako je u to vrijeme možda bilo ispravno, tehnologija se brzo razvija i mijenja. U posljednjih nekoliko godina naši su telefoni i zasloni postajali sve veći i veći - ali naše ruke su ostale iste. Pametne telefone već držimo drugačije, dodirne zone su se pomaknule, a preciznost se smanjila bliže vanjskim kutovima zaslona.

Kao rezultat toga, dizajneri trebaju organizirati sadržaj tako da se glavne funkcije nalaze u sredini, a sekundarne na dnu i vrhu zaslona.

Pogodnost njihove uporabe izravno ovisi o mjestu funkcija. Glavne funkcije se nalaze tamo gdje su prije njih, a sekundarne spadaju u zone niske točnosti.

3. Optimizirajte i smanjite veličinu datoteka

Vjerojatno već znate koliko je važno optimizirati veličinu slika na odredišnoj stranici: one imaju značajan utjecaj na , što zauzvrat utječe i na korisničko iskustvo i na rangiranje vaše stranice u tražilicama. Na mobitelu je to dvostruko važno, ne samo zbog manje pouzdane veze, već i zbog toga što mobilni korisnici ne vole čekati.

Koristite web-mjesta kao što je TinyJPG ili alate poput ImageOptim (samo za Mac) ili Photoshop Export for Web da biste smanjili veličinu datoteke prije prijenosa slika na svoju web-lokaciju.

Dvije su stvari koje najviše utječu na veličinu datoteke:

• Kvaliteta. Ako ga spustite, datoteka će postati manja, ali će također pasti jasnoća i mogu se pojaviti artefakti.
• Veličina/razlučivost. Naravno, veličina datoteke uvelike ovisi o veličini slike. Naravno, ne želite napraviti slike tako male da korisnici ne vide ništa, ali ako je, na primjer, širina stupca u koji stavljate sliku 600px, širina slike ne bi trebala biti 1000px . Promijenite veličinu prije učitavanja slike na svoju odredišnu stranicu.

4. Telefonski broj dostupan za pozive jednim klikom

Optimizacija odredišne ​​stranice za mobilne uređaje prije svega znači pojednostavljenje korisničkog iskustva i minimiziranje broja potrebnih radnji. Stoga biste trebali koristiti mogućnosti mobilnih uređaja kako biste posjetili svoju stranicu (i kupnju proizvoda ili nazvali svoju tvrtku) ugodnim iskustvom.

Ako je vaša odredišna stranica za prodaju ili je telefonski poziv važna faza u toku konverzije, trebate olakšati poziv.

Jedan od načina da to postignete je da telefonski broj učinite dostupnim za pozive jednim klikom. Vjerojatno vam je poznata ova situacija: prebacujete se između telefona i preglednika, ponovno upisujete telefon ili ga pokušavate kopirati i slučajno kopirate sav ostatak sadržaja na stranici. Stoga telefonski broj na koji se može kliknuti puno znači.

A broj će izgledati ovako:

Posjetitelji će moći kliknuti na njega i nazvati.

Drugi važni elementi stranice također bi trebali biti interaktivni: na primjer, kada korisnik klikne na adresu, trebale bi se otvoriti Google karte. Većina aplikacija kao što je Facebook to radi automatski, ali možete unijeti svoju adresu u Google karte, kopirati vezu i zalijepiti je na svoju web stranicu.

Male stvari poput ove pomažu posjetiteljima odredišne ​​stranice da se osjećaju kao da ne propuštaju i da ne pretjeruju. Ne dopustite da mobilni uređaji blokiraju vaš tok konverzije.

Ako ste radili u ranim danima mobilnog weba, sjetit ćete se koliko je programera stvorilo potpuno odvojene web-lokacije s oznakama koje bi funkcionirale na malim zaslonima mobilnih uređaja. Ove stranice obično su sadržavale minimum slika i relativno veliku količinu teksta za učitavanje putem spore mobilne veze.

Prošlo je desetak godina, a krajolik se dramatično promijenio. Zasloni su veći, veze su brže. I pojavio se. Ove dvije vrste dizajna razlikuju se jedna od druge, ali imaju isti cilj: stvoriti jednu oznaku koja se dinamički mijenja ovisno o uređaju koji posjetitelj koristi.

Predlošci odredišne ​​stranice i uređivači mogu automatski stvoriti mobilnu responzivnu verziju vaše odredišne ​​stranice, čime se vaš tim štedi od potrebe da je ručno dizajnira.

Postoji nekoliko stvari koje treba imati na umu u vezi s odgovornošću:

• Veličine slika. Ako su slike na vašoj odredišnoj stranici vrlo važne, provjerite jesu li vidljive na mobilnim uređajima.
• Izgled sadržaja i izgled. Ovisno o tome kako su elementi postavljeni na desktop verziji vaše odredišne ​​stranice, mogu se pomaknuti na mobilnoj verziji. Provjerite ostaje li sve isto na različitim uređajima.
• Animacija. Animacija koja izgleda dobro na stolnom računalu možda neće raditi tako dobro na mobilnom uređaju. Provjerite prije objavljivanja.
• Video. Uzimajući u obzir prethodne smjernice za veličinu slike, razmislite o skrivanju videozapisa na mobilnom uređaju ili potpunom brisanju. Velik je, težak i može značajno usporiti mobilno iskustvo.
• JavaScript. Iako je to izvrstan programski jezik, ne radi uvijek na mobilnom uređaju, stoga provjerite je li sve prikazano ispravno.

6. Riješite se skočnih prozora

Od 2017. Google kažnjava stranice s "nametljivim umetcima". Uglavnom, radi se o skočnim prozorima.

Primjeri nametljivih umetaka koji sadržaj čine manje dostupnim.
1. Primjer nametljivog skočnog prozora.
2. Primjer zasebnog nametljivog umetka.
3. Još jedan primjer zasebnog nametljivog umetanja.

Skočni prozori na mobilnim uređajima značajno pogoršavaju korisničko iskustvo jer onemogućuju posjetiteljima vaše stranice da vide sadržaj koji ih zanima. Google snižava rang takvih stranica u rezultatima pretraživanja. Stoga jednostavno isključite skočne prozore.

Ako je sadržaj vašeg skočnog prozora dovoljno važan, dodajte ga na stranicu kao zaseban odjeljak. Tada Google neće sniziti vašu stranicu u rezultatima pretraživanja.

7. Optimizirajte obrasce za mobilne uređaje

Ako ste ikada kupovali na svom mobitelu, znate koliko može biti neugodno ispunjavati beskrajne obrasce na svom telefonu. Iako je tipkanje na mobitelu puno lakše nego prije, i dalje je teško. Tipkanje se i dalje oslanja na automatsko ispravljanje, a prsti se umaraju.

Kako riješiti problem? Logika je jednostavna. Dugi oblici zahtijevaju puno tipkanja. Tipkanje na mobitelu je užasno nezgodno. Posljedično, dugi oblici su užasno neugodni.

Ako želite smanjiti negativan utjecaj koji mobilni uređaji mogu imati na vašu stopu konverzije, pokušajte napraviti jednu od sljedećih izmjena u svojim obrascima.

Jednostavno je: što je manje obaveznih polja, to je manje truda potrebno od korisnika. Što je manje napora, manje je trenja.

Nije uvijek moguće smanjiti broj polja: uostalom, često polje postoji jer su informacije koje je potrebno unijeti u njega nužne. No, treba ukloniti sve što se može ukloniti, a neke oblike (ime i prezime, na primjer) spojiti.

Ako svoj obrazac za popunjavanje podijelite s , vaša mobilna stopa konverzije može se povećati. Na primjer, ako vaš obrazac ima 9 polja, u prvoj fazi možete ostaviti samo 3. Korisnik će ih ispuniti, kliknuti na gumb “Dalje” i doći na sljedeću stranicu, gdje također ima vrlo malo polja, i tako dalje.

Ova praksa učinit će dugačke obrasce manje odbojnima, a također će vam omogućiti prikupljanje informacija o potencijalnim klijentima u malim obrocima, što je korisno ako ih u nekom trenutku prestanu ispunjavati. Prvi korak je da zatražite adresu e-pošte kako biste ubuduće mogli surađivati ​​s tim ljudima.

8. Sklopivi dijelovi

Na malom ekranu sav vaš sadržaj skupljen je u jedan stupac – vrlo dugačak stupac. Na mobitelu je to posebno štetno, jer korisniku postaje mnogo teže kretati se stranicom i pronaći informacije koje ga zanimaju.

Sklopivi dijelovi mogu biti rješenje za ovaj problem.

Sklopivi odjeljci su spremnici sadržaja. Korisnik vidi njihove naslove i proširuje ih klikom. Na ovaj način skenira vašu stranicu u potrazi za sadržajem ili temama od interesa i ne mora prolaziti kroz puno teksta ili slika koje mu nisu potrebne.

Zaključak

Nadamo se da će vam ove smjernice za dizajn mobilnih uređaja pomoći da poboljšate korisničko iskustvo za one koji vašoj odredišnoj stranici pristupaju s mobilnih uređaja. Ova se načela često zaboravljaju, zbog čega su konverzije na mobilnim uređajima tako niske. Slijedite ih i vaši mobilni korisnici imat će najbolje iskustvo - i pretvoriti.