Optimizacija odredišne ​​stranice za mobilne uređaje. Prilagođavanje odredišnih stranica za mobilne uređaje: odakle početi

Izrada landing stranica (tzv. landing pages ili landing stranica) se čvrsto ustalila u asortimanu usluga većine web studija i to nije iznenađujuće: landing stranice su tražene, jer se vjeruje da su one upravo one. koji najbrže donose pravi novac klijentima.

U međuvremenu, odredišna stranica je drugačija. Jedna landing stranica, koja radi u tandemu sa reklamnim banerima, uspješno će informirati klijenta o proizvodu i usluzi i potaknuti ga na kupovinu (ili bilo koju drugu potrebnu radnju), dok će druga ostati obična web stranica, samo malo više lijepa i “sofisticiranija” od ostalih.

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

Odgovarajući na ovo pitanje, možete spomenuti dizajn, korišteni sadržaj, strukturu elemenata, pravilno postavljanje poziva na akciju, društvene tipke itd. Međutim, ako sumiramo i odgovorimo na gornje pitanje jednom riječju, onda možemo sa sigurnošću reći da uspjeh odredišne ​​stranice ovisi o upotrebljivosti.

Dobra upotrebljivost omogućava klijentu da se osjeća kao kod kuće na odredišnoj stranici: struktura elemenata je zgodna; sadržaj i pozivi na akciju glatko vode klijenta do kupovine; odredišna stranica ne preopterećuje klijenta nepotrebnim informacijama; odredišna stranica ne tjera klijenta da bjesomučno skroluje po stranici kako bi pronašao željeno (ili ga u ovom trenutku više nema?) dugme za kupovinu.

Dobra upotrebljivost, kao što verovatno pogađate, 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, gube iz vida najjednostavniju stvar: dobra upotrebljivost za desktop odredišnu stranicu neće biti ista za mobilne uređaje. Izgleda očigledno, ali ne...

Dakle, šta možete učiniti da napravite odredišnu stranicu prilagođenu mobilnim uređajima? Koje su karakteristike mobilnih odredišnih stranica? Šta trebate imati na umu kada razvijate mobilnu odredišnu stranicu? Odgovorićemo na ova pitanja u nastavku.

Ono što trebate zapamtiti kada razvijate mobilnu odredišnu stranicu. 7 savjeta

Ova istina je ljudima vjerovatno već nagrizla zube, ali hajde da je ponovimo još jednom: korisnici mobilnih uređaja se jako razlikuju od korisnika desktopa. Njihovi ciljevi su, kao što možete pretpostaviti, takođe veoma različiti.

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

• Utječu li veličina ekrana, tip uređaja i cjelokupni kontekst korištenja na očekivanja korisnika? Ako da, kako?
• Šta bi korisnicima mobilnih uređaja moglo najviše trebati na ovoj odredišnoj stranici?
• Šta bi potencijalni korisnici željeli 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 ih ne treba potcjenjivati. Činjenica je da korisnici mobilnih uređaja ne kupuju tako aktivno kao korisnici desktopa. Konverzija se distribuira otprilike na sljedeći način:

1. Tablete
2. Smartphones.

Šta to znači? O banalnoj činjenici koja je poznata svakom psihologu: da bi donijela odluku, osobi su potrebne informacije predstavljene u prikladnom formatu. Štaviše, što je veća “cijena” rješenja, to su osobi potrebne kompetentnije informacije. Grubo govoreći, osoba će bez problema naručiti pizzu sa pametnog telefona, ali neće kupiti automobil dok sjedi sa pametnim telefonom u parku.

Uspjeh mobilne odredišne ​​stranice ne mjeri se uvijek konverzijom. Kupci koji dođu na odredišnu stranicu s mobilnog uređaja nisu uvijek raspoloženi da nešto kupe. Umjesto toga, klijent posjeti takvu landing stranicu kako bi se upoznao sa informacijama i uspostavio emocionalnu vezu sa proizvodom, a tek onda, kada dođe kući i sjedne za svoj PC, obavi kupovinu.

Ukratko, možemo reći da je cilj klijenta da pronađe informacije, vlasniku sajta da dobije novac, a dizajneru i programeru da kreiraju odredišnu stranicu koja može privući maksimalan broj potencijalnih klijenata.

Dakle, prilikom slijetanja na mobilnu odredišnu stranicu, klijent traži informacije kako bi donio odluku - kupiti proizvod ili ne? Stoga treba učiniti sve što je moguće da olakšate ovaj proces.

To je banalno, ali najlakši način da klijent odluči hoće li kupiti ili ne je da pozove. Stoga, postavite uslugu brzog poziva. Neka ikona dragocjenog telefona prati potencijalnog klijenta na cijeloj odredišnoj stranici. Imajte na umu da ovo treba da bude ikona sa telefonskim brojem i nekom vrstom poziva na akciju kao što je "Pozovi odmah!" Brojna istraživanja su pokazala da je ikona 10-20% efikasnija od običnog telefonskog broja.

Bitan! Uspostavljajte pozive samo ako ste sigurni da će neko odgovoriti na njih. Ako potencijalni klijent nazove i čuje samo ton biranja 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 lako mogu uključivati ​​popunjavanje raznih obrazaca koje svi toliko volimo na PC-u.

Prisiljavanje klijenta da unese duge i dosadne informacije o sebi za pretplatu ili kupovinu znači gubitak. Samo najuporniji stižu do kraja. dakle:

• smanjite broj padajućih menija na minimum ili ih potpuno uklonite;
• smanjiti ukupan broj polja za popunjavanje - sve dodatne informacije može zatražiti zaposlenik call centra nakon što klijent ostavi narudžbu;
• provjerite da li su sva preostala polja ispravno konfigurirana, odnosno da se mobilna tastatura automatski prilagođava polju: puno ime - slova, broj telefona - brojevi itd.;
• ako je potrebna registracija, aktivirajte opciju registracije putem društvenih mreža;
• Uvjerite se da usluge plaćanja ne zahtijevaju od klijenta da ponovo popuni sve podatke.

Grubo govoreći, smanjite broj obaveznih radnji na odredišnoj stranici na minimum. Rad sa malim ekranom je nezgodan, a popunjavanje desetina različitih polja je jednostavno ruglo!

Savjet 4. Poziv na akciju uvijek treba biti vidljiv

Bez obzira na svrhu odredišne ​​stranice, učinite sve kako biste osigurali da poziv na akciju uvijek bude vidljiv kupcima.

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

Čini se da je optimalno rješenje sljedeće: postavite poziv na akciju ispod logotipa kompanije u meniju za pomicanje. Tako će poziv na akciju uvijek biti vidljiv, a korisnik će moći poduzeti željenu akciju s bilo kojeg mjesta na odredišnoj stranici. Osim toga, ovo rješenje će izbjeći probleme s rješavanjem: poziv na akciju uvijek će biti ispod logotipa i smanjivat će se ili povećavati zajedno s njim.

Sadržaj je bitna komponenta svake odredišne ​​stranice, ali ne bi ga trebalo biti puno. Sadržaj treba da bude jasan, razumljiv i da navodi klijenta na željenu radnju.

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

Nemojte vući noge, već odmah recite klijentu da može dobiti odredišnu stranicu na ovoj odredišnoj stranici. Nemojte koristiti "lijepe" fraze i dugačke fraze - kratkoća, jednostavnost i jasnoća su važniji od stila. Zapamtite ovo.

Korisnici mobilnih uređaja ne samo da su manje skloni pažljivom čitanju odredišne ​​stranice, već često jednostavno ne mogu sebi to priuštiti zbog niske brzine učitavanja stranice.

Nedavno istraživanje sprovedeno u SAD pokazalo je da odredišne ​​stranice koje su teške i nisu optimizovane za niske brzine interneta gube 40-50% potencijalnih kupaca. Pa, u svijetu u kojem svaki posao ima desetine konkurenata, niko ne želi da čeka i, vjerujte, niko neće.

Da bi stranica bila lakša, vodite računa da:

• sve slike su optimizovane i mogu se brzo učitati čak i pri malim brzinama interneta;
• Odredišna stranica koristi tehnologiju skalabilne vektorske grafike, odnosno sve slike treba povećati i smanjiti ovisno o rezoluciji bez gubitka kvalitete;
• sav sadržaj je napisan u HTML-u i ne prikazuje se kao slika.

Na samom početku članka napisali smo da se korisnici mobilnih uređaja uvelike razlikuju od korisnika desktopa. To je istina, ali oni ipak nisu različiti ljudi. Bez obzira koji uređaj potencijalni klijent koristi, on uvijek ima neki problem koji možete riješiti. U principu, svakom klijentu nisu potrebni vaši proizvodi i usluge, već rješenje njegovih problema.

Šta iz ovoga 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, nudeći mu kompetentno i efikasno rješenje problema. Svako ima proizvode, usluge i odredišnu stranicu za sebe, ali rješenje je na vama!

Kada ovo shvatite, trebali biste shvatiti koje je rješenje najefikasnije. Ovdje dolazi u obzir A/B testiranje. Koristite kontrolne grupe da saznate:

• šta je privlačnije za vašu odredišnu stranicu, poziv na akciju ili ikonu brzog poziva;
• šta radi bolje, ikona za brzi poziv ili dugme koje označava broj telefona;
• povećava li se konverzija ako uklonite dodatna polja;
• povećava li se konverzija ako dodate mogućnost registracije putem naloga na društvenim mrežama;
• Da li se statistika o potrebnoj radnji poboljša ako postavite poziv na akciju ne samo na samoj odredišnoj stranici, već i ispod logotipa u meniju za pomeranje;
• da li se upotrebljivost poboljšava ako promijenite sadržaj, učinite ga jednostavnijim i jasnijim;
• pokušajte promijeniti poziv na akciju, dodati slogane koji informišu klijenta o procesu kupovine, registracije itd. lako i neće vam trebati puno vremena.

zaključci

Da rezimiramo, možemo reći da odredišna stranica ne može biti uspješna bez dobre upotrebljivosti. Gore smo opisali šta je dobra mobilna upotrebljivost, ali ponovićemo. Dakle, dobra odredišna stranica za mobilne uređaje:

• „skrojen” za određeni zadatak;
• dovoljno je informativan da klijent odluči da preduzme potrebnu radnju;
• omogućava klijentu da lako kontaktira službu podrške telefonom ili putem kontakt forme;
• ne prisiljava klijenta da ispuni mnoga polja prilikom izvođenja željene radnje;
• ne širi misao po stablu, jasno i jasno stavlja do znanja koji problem će klijent riješiti poduzimanjem radnje;
• učitava se brzo i ne čini klijenta gubitkom dragocjenog vremena;
• omogućava vam da izvršite potrebnu radnju, bez obzira na to na kojem dijelu odredišne ​​stranice se klijent nalazi (minimalno pomicanje);
• fokusiran ne na ponudu proizvoda ili usluge, već na rješavanje problema klijenta.

Također napominjemo da mobilna odredišna stranica mora proći A/B testiranje. Na ovaj način ćete povećati š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 pomoću mobilnog telefona. Konačno ste pronašli resurs koji vam je potreban, ali... on uopće nije namijenjen za mali ekran. Učitavanje stranice traje vječno, mala dugmad je nemoguće pronaći, a morate kopirati i zalijepiti telefonski broj kompanije da biste pozvali kancelariju. Ili još gore: morate ispuniti dugačak obrazac za potencijalne klijente.

Svi smo se barem jednom u životu susreli sa ovim. Statistike analitičke kompanije IDC pokazuju da će ove godine biti više korisnika koji pristupaju internetu putem mobilnih uređaja nego onih koji koriste personalne desktop računare.

Istraživanje Lukea Wroblewskog, Googleovog glavnog direktora za proizvode i autora Mobile First! pokazuje da je između 2009. i 2013. potrošnja sadržaja putem tradicionalnih kanala kao što su televizija, radio i štampa značajno smanjena. Jedini pokazatelj koji je povećan je korištenje mobilnih uređaja.

Ljudi sada kupuju na mreži, čitaju vijesti i pretražuju web stranice na svojim telefonima više nego ikad. Ali uprkos činjenici da se ovaj trend razvija već nekoliko godina, mnogi resursi se nisu uspjeli prilagoditi.

Čak iu 2015. godini većina korisnika se suočava sa nizom poteškoća:

• Odredišne ​​stranice nisu optimizirane za ekrane mobilnih uređaja, stranice su teške za navigaciju;
• Morate stalno zumirati i umanjiti stranice da biste pronašli informacije koje su vam potrebne;
• Potrebno je stalno unositi neke podatke;
• Stranice se učitavaju sporo;
• Dugmad su premala, tako da često posjetitelj završi na pogrešnoj stranici.

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

Ako još niste optimizirali svoju odredišnu stranicu i niste sigurni da će svi korisnici telefona biti zadovoljni njome, obratite pažnju na ovih 5 uobičajenih grešaka i nikada ih nemojte činiti. U suprotnom, vaši potencijalni klijenti će ostati razočarani i odlučiti se za konkurenciju.

1. Stranica nije optimizirana za mobilne uređaje

Još u decembru 2012. medijski resurs Mashable je nadolazeću 2013. proglasio godinom responsive dizajna. Najveće kompanije su tada obratile pažnju na to i razvile mobilne verzije svojih resursa. Ali mnogi se još uvijek ne mogu pohvaliti ispravnim prikazom stranica.

Responzivni dizajn je metoda koja će pomoći vašem resursu da se dobro prikaže na različitim platformama i uređajima bez kreiranja više stranica. Na primjer, korisnici će moći ići direktno na navigaciju bez gubljenja vremena na zumiranje (što je zaista neugodno). Responzivni dizajn ne samo da će poboljšati korisničko iskustvo, već će imati i pozitivan utjecaj na konverziju.

Prodavac odeće O'Neill Clothing postigao je impresivne rezultate nakon što su njegovi trgovci usvojili responzivni dizajn. Pratili su tri glavne metrike: konverziju, broj transakcija i prihod za tri sedmice prije i nakon korištenja tehnologije. Rezultati su bili nevjerovatni.

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%

Postoji mnogo primjera koji ilustruju jasne prednosti responzivnog dizajna. Stručnjaci iz Skinny ties, kompanije koja stvara veze od 1971. godine, zabilježili su povećanje prihoda od 42,4% nakon lansiranja mobilne verzije resursa. Firma za fotografsku opremu Think Tank Photo zabilježila je povećanje od 96% transakcija korištenjem pametnih telefona i tableta u odnosu na prethodnu godinu.

2. Ignoriranje korisničkih ciljeva

Još jedna uobičajena greška je pretpostavka da će responzivni dizajn riješiti sve probleme. Ali to nije tako jednostavno. Iako može spriječiti mnoge poteškoće, vrijedi razmisliti i o namjerama onih korisnika koji resursu pristupaju s mobilnog telefona.

Potpredsjednik UserTesting-a Mike Mace je sproveo istraživanje o hiljadama mobilnih verzija. Evo njegovog zaključka: „Trebali biste redizajnirati svoju stranicu posebno za mobilne uređaje, a ne samo je prilagođavati. 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 trenutno zadovoljstvo za svoje ciljeve. Žele brzo pronaći informacije tokom pauze između sastanaka ili dok se voze autobusom. Korisnik tableta često ima vremena za pretragu, na primjer, sjedi kod kuće ispred televizora (koji, inače, djeluje kao smetnja).

Također je vrijedno uzeti u obzir da se potrebe i prioriteti vlasnika mobilnih telefona često razlikuju od onih korisnika kućnih računara: prvi će najvjerovatnije morati brzo pronaći karticu ili broj telefona. Stoga stručnjaci preporučuju ne samo „prebacivanje“ svih informacija sa odredišne ​​stranice na mobilnu verziju, već razmišljanje o ciljevima korisnika i odgovarajućem dizajnu.

Nitko ne voli ispunjavati dugačke formulare, čak ni na redovnim web stranicama, a unos raznih informacija putem mobilnog telefona toliko je dosadan da se ne uklapa ni u jedan okvir. Najbolji savjet: Izbjegavajte duge, dosadne forme kada razvijate mobilnu verziju.

Kao rezultat toga, dobit ćete ne samo pozitivno korisničko iskustvo, već i povećan prihod i rast vašeg poslovanja. Kao što smo već naučili, dugi obrasci su dosadni, a ako ih koristite, vjerovatno ćete smanjiti stopu konverzije. Na primjer, velika turistička agencija Expedia izgubila je 12.000.000 dolara profita zbog nepotrebnih polja obrasca koja su zbunjivala korisnike i jednostavno zbunjivala.

Ako korisnici vide dugačke obrasce na svom mobilnom uređaju, pokušat će izbjeći dosadne interakcije. Laura Klein, autorica UX-a za Lean Startup, napominje: „Očekivati ​​da korisnici mobilnih uređaja unose podatke na isti način kao korisnici desktopa najveća je greška mnogih kompanija.

Nekoliko savjeta za stvaranje najprikladnijih i razumljivih obrazaca:

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

Situacija poznata mnogima: pokušate pratiti link ili ispuniti obrazac pomoću 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 Designing Mobile Experiences, savjetuje: "Uvjerite se da je svaka dodirna zona najmanje 8 milimetara od centra druge, iako je 10 milimetara još bolje."

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. Ovaj standard se sada koristi za sve proizvode kompanije.

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

Korisnici mobilnih uređaja su vrlo nestrpljivi i sporo vrijeme učitavanja je veliki problem. 80% vlasnika pametnih telefona očekuje da će se stranice učitavati jednako brzo kao na ekranu njihovog računara. Ako stranica ne reaguje na dodire korisnika, tada osoba najvjerovatnije:

Umjesto zaključka

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

Previše složeni resursi frustriraju korisnike i guraju ih prema konkurenciji. Učinivši svoju odredišnu stranicu jednostavnom i ugodnom za korištenje na mobilnim uređajima, prestat ćete propuštati potencijalne kupce i povećati stopu generiranja potencijalnih kupaca.

Opet, dobra vijest za vlasnike WordPress stranica - postoje dodaci koji kreiraju mobilnu verziju vaše stranice na poddomenu, na primjer, WP Mobile Edition.

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

Minusi: trebate kreirati poddomenu i konfigurirati je, napisati poseban predložak i skript za njega koji određuje s kojeg uređaja je korisnik došao, a to traje duže od kreiranja responsive dizajna.

Šta ćemo dobiti?

Dodatna adresa web stranice na poddomenu “m.” sa dizajnom koji se razlikuje od glavnog domena, pojednostavljeno. Internet je pun primjera takve implementacije, na primjer, evo jedne poznate stranice:

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 na temu:

Imate pitanja?

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

Mobilni saobraćaj je promijenio svijet tako brzo da su mnoge ljude iznenadila nova pravila igre. Nedavna istraživanja tržišta pokazuju stabilnu stagnaciju desktop segmenta na pozadini snažnog rasta mobilnih uređaja koji traje već nekoliko godina. U takvim uslovima, posao koji nije spreman da radi sa najvrednijim saobraćajem sa pametnih telefona i tableta prestaće da bude efikasan - sada ili za šest meseci, nije bitno.

Ovo se posebno odnosi na kompanije za e-trgovinu koje se oslanjaju na prodaju putem odredišnih stranica. Broj jedan na listi obaveza za šefa takvog biznisa očito bi trebao biti prilagođavanje odredišne ​​stranice za mobilne uređaje. A da bi bio što efikasniji, vrijedi procijeniti obim posla.

Dakle - šta i kako se prilagođavamo?

• Slike.Po pravilu, desktop slike su nepristojno velike i traje vječno da se učitavaju na mobilne uređaje. Ili ih je potrebno smanjiti - prilagoditi po veličini ekranima pametnih telefona i tableta, smanjiti kvalitetu kako biste smanjili težinu, ili možete koristiti dodatak/skriptu Adaptive Images, koja sama odabire veličinu i kvalitet slike ovisno o uređaj. Prvo rješenje je strateški ispravno i omogućit će vam da efikasnije optimizirate svoju odredišnu stranicu za mobilne uređaje.

• Meni.Pojednostavite navigaciju kroz meni - riješite se nevažnih opcija, kartica u više koraka i malog fonta.

• Stolovi.Svaka internet trgovina sastoji se od tablica s proizvodima, a često se nalaze na drugim stranicama. Kako biste osigurali da se ovi podaci ispravno prikazuju prilikom prilagođavanja odredišne ​​stranice za mobilne uređaje, omogućite 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 tipova polja. Također isključite automatsko ispravljanje, pisanje velikih slova i ispravljanje - oni ometaju unos podataka sa telefona.

• Sadržaj.Nemojte koristiti font manji od 16 tačaka, ne zaboravite na razmak između redova i od ivice ekrana - i nemojte pojednostavljivati ​​sadržaj toliko da klijent mora otići na desktop stranicu da pronađe informacije koje su im potrebne.

• Prilagodljivost.Mnogi ljudi misle da optimiziranje odredišne ​​stranice za mobilne uređaje znači prilagođavanje. Ovo nije sasvim tačno: sajt jednostavno mora biti ispravno prikazan na svim ekranima, što se ne postiže samo jednom tehnologijom. Više o tehnologijama mobilizacije web stranica pročitajte u našem članku.

• Brzina skidanja.Ovaj parametar direktno zavisi od svih prethodnih tačaka. U pravilu se najbrže učitavaju mobilne stranice napravljene pomoću tehnologije za izradu šablona. Budući da su predlošci već unaprijed optimizirani, možete bezbedno preskočiti sve prethodne stavke na listi i preći na najzanimljiviji dio – odabir i jednostavno prilagođavanje odgovarajuće opcije.

Sve ove naizgled složene stvari lako se mogu kombinirati u jednostavna rješenja. Rusko tržište nudi izbor opcija za prilagođavanje landing stranice mobilnim uređajima za svaki ukus i budžet: možete unajmiti cijeli web studio ili koristiti online usluge. Na primjer, MoAction predstavlja više od 100 gotovih rješenja koja imaju najviše ocjenu za mobilnost koju daje Google i profesionalni su.

Izbor je na vama!

93% korisnika svakodnevno pristupa internetu s mobilnih uređaja. Ovo je 3.500.000.000 ljudi koji u svakom trenutku mogu pristupiti vašoj odredišnoj stranici sa svojih pametnih telefona ili tableta. Stoga morate uložiti sve napore u optimizaciju vaše mobilne odredišne ​​stranice. Ne postoji ništa gore od toka konverzije koji je potpuno neučinkovit na mobilnim uređajima.

U ovom članku ćete naučiti 8 najboljih praksi dizajna mobilnih uređaja koji će vam pomoći da poboljšate korisničko iskustvo i povećate konverzije na bilo kojem uređaju.

1. Riješite se navigacijske trake

Pogledajte koliko prostora navigacijska traka može zauzeti:

Na malim mobilnim ekranima svaki piksel je vrijedan i morate ga maksimalno iskoristiti. Jedan jednostavan način da to učinite je da se riješite navigacijske trake. Na desktopu može biti vrlo korisno: posjetiteljima olakšava navigaciju po stranici i pronalaženje onoga što im treba. Ali na mobilnom uređaju, navigacijska traka zauzima previše prostora gdje 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 mali gornji panel. "Hamburger" služi kao neka vrsta fioke koja se izvlači iz ugla ekrana i sadrži razne prečice za meni.

Druga opcija je mobilna stranica na jednoj stranici. Međutim, ako vaša stranica ima puno sadržaja, neće biti prikladna za vas.

Verovatno često koristite svoj pametni telefon - u autobusu ili u redu. Možda čitate upravo ovaj njegov članak. Kako držite svoj pametni telefon? Najvjerovatnije prevlačite ekran palcem. 75% korisnika to radi.

Prije nekoliko godina, ovaj dijagram je bio biblija mobilnih dizajnera. Na osnovu toga, optimizirali su korisničko iskustvo za većinu ljudi. I iako je to možda bilo tačno u to vrijeme, tehnologija se brzo razvija i mijenja. Tokom proteklih nekoliko godina, naši telefoni i ekrani su postajali sve veći i veći—ali naše ruke su ostale iste. Već drugačije držimo pametne telefone, dodirne zone su se pomjerile, a preciznost bliže vanjskim uglovima ekrana je smanjena.

Kao rezultat toga, dizajneri moraju organizirati sadržaj tako da se glavne funkcije nalaze u centru, a sekundarne na dnu i vrhu ekrana.

Pogodnost njihove upotrebe izravno ovisi o lokaciji funkcija. Glavne funkcije se nalaze tamo gdje se nalaze, a sekundarne spadaju u područja niske preciznosti.

3. Optimizirajte i smanjite veličinu datoteka

Vjerojatno već znate koliko je važno optimizirati veličinu slika na vašoj odredišnoj stranici: one značajno utječu na , što zauzvrat utječe i na korisničko iskustvo i na rangiranje vaše stranice na pretraživačima. Na mobilnom je to dvostruko važno, ne samo zato što je veza manje pouzdana, već i zato što mobilni korisnici ne vole čekati.

Koristite web stranice kao što je TinyJPG ili alate kao što su ImageOptim (samo za Mac) ili "Export for Web" u Photoshopu da smanjite veličinu datoteke prije postavljanja slika na svoju web lokaciju.

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

• Kvaliteta. Ako ga spustite, datoteka će postati manja, ali će se smanjiti i jasnoća i mogu se pojaviti artefakti.
• Veličina/rezolucija. Naravno, veličina datoteke u velikoj mjeri ovisi o veličini slike. Naravno, ne želite da slike budu tako male da korisnici ne vide ništa, ali ako je, na primjer, širina stupca u koji postavljate sliku 600 piksela, širina slike ne bi trebala biti 1000 piksela. Promijenite veličinu prije postavljanja slike na svoju odredišnu stranicu.

4. Broj telefona dostupan za pozivanje jednim klikom

Optimizacija odredišne ​​stranice za mobilne uređaje znači, prije svega, pojednostavljenje korisničkog iskustva i minimiziranje broja potrebnih radnji. Zato biste trebali iskoristiti moć mobilnih uređaja kako biste posjetili vašu web stranicu (ili kupovinu proizvoda ili pozvali svoju tvrtku) ugodnim iskustvom.

Ako je vaša odredišna stranica dizajnirana za prodaju ili je telefonski poziv važna faza toka konverzije, onda morate olakšati da vas pozovu.

Jedan od načina da se to postigne je da se telefonski broj učini dostupnim za pozivanje jednim klikom. Vjerovatno ste upoznati sa ovom situacijom: prebacujete se sa telefona na pretraživač i obrnuto, ponovo kucate telefon ili pokušavate da ga kopirate i slučajno kopirate sav drugi sadržaj na stranici. Stoga, telefonski broj na koji se može kliknuti mnogo znači.

A broj će izgledati ovako:

Posjetioci će moći kliknuti na njega i pozvati.

Ostali važni elementi stranice također bi trebali biti interaktivni: na primjer, kada korisnik klikne na adresu, trebalo bi da se otvori Google Maps. Većina aplikacija poput Facebooka to radi automatski, ali možete unijeti svoju adresu u Google Maps, kopirati vezu i zalijepiti je na svoju web stranicu.

Male stvari poput ove pomažu posjetiteljima vaše odredišne ​​stranice da se osjećaju kao da ništa ne propuštaju i da ne moraju raditi dodatni posao. Ne dopustite da mobilni uređaji preplave vaš tok konverzije.

Ako ste radili u ranim danima mobilnog interneta, sjećate se koliko je programera kreiralo potpuno odvojene web stranice s markiranjem koje bi radile na malim ekranima mobilnih uređaja. Ove stranice obično su sadržavale minimalne slike i relativno mnogo teksta za učitavanje putem spore mobilne veze.

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

Predlošci odredišne ​​stranice i uređivači mogu automatski kreirati mobilnu responzivnu verziju vaše odredišne ​​stranice, eliminirajući potrebu vašeg tima da je razvija ručno.

Postoji nekoliko stvari koje treba imati na umu u vezi sa odzivom:

• Veličine slika. Ako su slike na vašoj odredišnoj stranici vrlo važne, pobrinite se da budu jasno vidljive na mobilnim uređajima.
• Izgled i raspored sadržaja. Ovisno o tome kako su elementi pozicionirani na desktop verziji vaše odredišne ​​stranice, mogu se promijeniti u mobilnoj verziji. Provjerite da li sve ostaje na svom mjestu na različitim uređajima.
• Animacija. Animacija koja izgleda dobro na desktopu možda neće raditi tako dobro na mobilnom uređaju. Provjerite prije nego što ga objavite.
• Video. S obzirom na prethodne preporuke o veličini slike, razmislite o skrivanju videozapisa na mobilnoj verziji ili da ga potpuno uklonite. Velik je, težak i može značajno usporiti mobilno iskustvo.
• JavaScript. Iako je odličan programski jezik, ne radi uvijek na mobilnom uređaju, pa se pobrinite da se sve prikazuje ispravno.

6. Riješite se iskačućih prozora

Od 2017. godine Google kažnjava stranice sa "nametljivim umetanjima". U suštini govorimo o pop-up prozorima.

Primjeri nametljivih umetanja koji sadržaj čine manje dostupnim.
1. Primjer nametljivog iskačućeg prozora.
2. Primjer zasebnog intruzivnog umetanja.
3. Još jedan primjer zasebnog nametljivog umetanja.

Skočni prozori na mobilnim uređajima značajno degradiraju korisničko iskustvo jer sprečavaju posjetitelje vaše stranice da vide sadržaj koji ih zanima. Google snižava rang takvih stranica u rezultatima pretraživanja. Zato samo onemogućite iskačuće prozore.

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

7. Optimizirajte obrasce za mobilne uređaje

Ako ste ikada kupovali na svom mobilnom telefonu, znate koliko može biti neugodno ispunjavati beskrajne obrasce sa svog telefona. Iako je kucanje na mobitelima postalo mnogo lakše nego prije, i dalje je teško. Tipkanje se i dalje oslanja na automatsku korekciju, a prsti se umaraju.

Kako riješiti problem? Logika je jednostavna. Dugi obrasci zahtijevaju puno kucanja. Tipkanje na mobilnim telefonima je užasno nezgodno. Shodno tome, dugi oblici su užasno nezgodni.

Ako želite smanjiti negativan učinak koji mobilni uređaji mogu imati na vaše stope konverzije, pokušajte napraviti jednu od sljedećih promjena u svojim obrascima.

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

Smanjenje broja polja nije uvijek moguće: na kraju krajeva, polje često postoji jer su informacije koje treba unijeti u njega neophodne. Međutim, sve što se može izbrisati mora se izbrisati, a neki oblici (ime i prezime, na primjer) moraju se kombinirati.

Ako podijelite popunjavanje obrasca sa , vaša stopa konverzije na mobilnom uređaju može se povećati. Na primjer, ako vaš formular ima 9 polja, u prvoj fazi možete ostaviti samo 3. Korisnik će ih popuniti, kliknuti na dugme “Dalje” i biti odveden na sljedeću stranicu, gdje je također vrlo malo polja, i tako dalje.

Ova praksa će učiniti dugačke obrasce manje zastrašujućim, a također će vam omogućiti da prikupljate informacije o potencijalnim klijentima u malim porcijama, što je korisno ako u nekom trenutku ipak odustanu od popunjavanja. Prvi korak je da zatražite adresu e-pošte kako biste ubuduće mogli raditi sa ovim ljudima.

8. Pokretni dijelovi

Na malom ekranu, sav vaš sadržaj je skupljen u jednu kolonu - veoma dugačku kolonu. Na mobilnom uređaju to je posebno štetno jer korisniku znatno otežava navigaciju po stranici i pronalaženje informacija koje ga zanimaju.

Rješenje ovog problema mogu biti sklopivi dijelovi.

Sekcije koje se mogu sklopiti su kontejneri sa sadržajem. Korisnik vidi njihove naslove i proširuje ih klikom. Na ovaj način, on skenira vašu stranicu u potrazi za sadržajem ili temama od interesa i ne mora provlačiti tonu 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 posjećuju vašu odredišnu stranicu s mobilnih uređaja. Ovi principi se često zaboravljaju i zbog toga je konverzija na mobilnim uređajima tako niska. Pratite ih i vaši mobilni korisnici će imati bolje iskustvo—i konvertirati.