Obrasci za kontakt ključna su sastavnica mnogih web stranica. Iako su u pravilu jednostavni, morate se pobrinuti da su jednostavni za upotrebu ako želite prikupljati potencijalne kupce i ostati u kontaktu sa svojim korisnicima. To obično nije problem s uredskim prometom, ali korištenje obrazaca može biti teško ako koristite mobilni uređaj.

U ovom uputstvu malo ćemo razgovarati o važnosti dizajniranja obrazaca prilagođenih mobilnim uređajima. Zatim ćemo vas provesti kroz pet savjeta kako biste osigurali nesmetani rad obrazaca na mobilnim uređajima.

Idemo na posao!

Zašto je važno da vaši obrasci budu prilagođeni mobilnim uređajima

Obrasci dolaze u svim oblicima i veličinama. Najčešće ćete imati posla s obrascima za kontakt:

primjer obrasca za kontakt.png

Obrasci za prijavu (pretplata) također su vrlo popularni jer vam omogućuju prikupljanje e-adresa i njihovo ciljanje tijekom kampanja:

ciljane poruke e-pošte tijekom kampanje.png

Međutim, obrasci se mogu koristiti u sve druge svrhe. Na primjer, podatke možete prikupljati pomoću online ankete ili upitnika , u tom će vam slučaju trebati obrasci koji omogućuju korisnicima unos odgovora.

Drugim riječima, obrasci su vrlo svestrani i gotovo sve web stranice koriste obrasce na ovaj ili onaj način. Stoga je neophodno da su vaši obrasci jednostavni za upotrebu (osim ako posjetiteljima ne želite pružiti frustrirajuće iskustvo).

Korištenje obrazaca sa stolnog ili prijenosnog računala obično je vrlo jednostavno. Imate puni miš i tipkovnicu, pa odabir polja koje želite koristiti i unos podataka ne bi trebao predstavljati problem. Međutim, pregledavanje weba sa vašeg pametnog telefona ili drugog kompaktnog uređaja ima komplikacija.

Kada radite prstima na malom zaslonu, interakcija s obrascima ponekad može biti neodoljiva zbog loših dizajnerskih odluka. To je nešto što biste trebali izbjegavati u vlastitom dizajnu. Napokon, ako korisnici mobilnih uređaja ne mogu komunicirati s vašim obrascima, mogli biste izgubiti konverzije, potencijalne kupce ili samo smetati posjetiteljima.

Također je presudno shvatiti da je mobilni promet sada, ako ne i važniji, važan od izvora na stolnim računalima. U stvari, mobilni je promet posljednjih godina već pretekao potonji. To znači da bi vam oblikovanje web stranice prilagođene mobilnim uređajima trebao biti glavni cilj pri pokretanju novog projekta.

5 savjeti za izradu jednostavnih mobilnih obrazaca

Srećom, dizajniranje obrazaca prilagođenih mobilnim uređajima nije tako teško kao što biste mogli zamisliti. U većini slučajeva trebate imati na umu neke temeljne podatke i temeljito testirati svoje obrasce prije nego što ih stavite u upotrebu. Razgovarajmo o tome kako to učiniti!

1. Izbrišite sve nepotrebne odjeljke

Što više obrazaca sadrži obrazac, to će ga biti teže koristiti na mobitelu. Doista, upotreba obrazaca na mobilnim uređajima jednostavno je složenija. Smanjivanjem broja polja ili odjeljaka koji su uključeni u vaše obrasce, možete povećati šanse da ih posjetitelji popune.

Evo kratkog primjera a kontakt obrazac s nekim dodatnim poljima koja nisu potrebna na mobitelu:

polja nisu potrebna na mobile.png

U većini slučajeva, sve što vam je potrebno za odličan kontakt obrazac je ime, email i tijelo poruke koju želite primiti. Sve ostalo ovisi o vrsti web stranice koju koristite i pokušavate li prikupiti potencijalne kupce.

U konačnici, što manje obrazaca ima obrazac, to će ih lakše koristiti mobilni posjetitelji. Napokon, odabir polja pomoću zaslona osjetljivog na dodir može biti nezgodno, bez obzira koliko dobro dizajniran, kako bi se smanjio broj poskoka koji korisnici moraju napraviti.

Vaš je cilj u ovom trenutku pregledati postojeće obrasce na vašoj web lokaciji. Prođite kroz svaki njihov odjeljak i utvrdite jesu li vam doista potrebna neka dodatna polja osim prethodno spomenutih. Ako postoji nepotrebno polje, samo ga izbrišite.

2. Koristite padajuće popise ako je moguće

Većini nas je ugodno tipkati na mobilnim uređajima i koristiti zaslone osjetljive na dodir. Međutim, slanje poruke prijatelju i ispunjavanje a kontakt obrazac dva su vrlo različita iskustva. S njima postoji velika vjerojatnost da ćete se frustrirati ako budete morali upisivati ​​puno informacija.

Jedan od načina da olakšate život svom mobilnom posjetitelju jest pojednostaviti izbore koje moraju donijeti o elementima vaše stranice. Da bismo vam dali ideju o čemu govorimo, iskoristimo naš prethodni primjer rezerviranje restoran:

rezervirati.png

Da biste napravili rezerviranje, vjerojatno ćete morati ostaviti ime, e-mail, telefon  et  navedite vrijeme, kao i broj prisutnih. Postoje dva načina na koje možete stvoriti polje obrasca za potvrdu doba dana. rezerviranje:

  1. Konfigurirajte polje koje prihvaća samo numeričke unose.
  2. Dizajnirajte padajući popis, uključujući sva raspoloživa vremena za rezervaciju.

Kao što možete zamisliti, potonji je jednostavniji za korisnike mobilnih uređaja. Ovim pristupom ne trebaju unositi brojeve i mogu samo odabrati što im najbolje odgovara, među opcijama koje uključujete.

Ideja je da pogledate svoje obrasce i vidite sadrže li oni polja koja biste mogli zamijeniti padajućim izbornicima. To neće uvijek biti slučaj jer ne možete koristiti padajuće izbornike za prikupljanje imena ili e-pošte, ali mogu se koristiti druge opcije.

Bez obzira na slučaj njihove upotrebe, želite biti sigurni da vaši padajući izbornici uključuju opcije koje je lako odabrati s mobilnih uređaja. Drugim riječima, učinite jelovnik dovoljno velikim da netko ne mora kljuvati da bi odabrao pravu opciju.

3. Obavezno dodirnite gumbe za prijavu

Ovaj je savjet vrlo jednostavan, ali ga ipak treba spomenuti. Svaki obrazac koji dizajnirate trebao bi sadržavati način na koji korisnici mogu potvrditi da žele poslati unesene podatke. U većini slučajeva to znači stvaranje gumba za slanje:

stvori gumb za prijavu.png

Kada koristite uobičajeno računalo, klik na gumb za slanje najprirodnija je stvar na svijetu. Međutim, na mobilnim smo uređajima naišli na nekoliko obrazaca u kojima je puno teže pritisnuti gumb.

Ako vaši posjetitelji ne mogu dostaviti podatke koje su unijeli u vaše obrasce, sav vaš trud bit će izgubljen. Osim toga, ništa ne izgleda tako neprofesionalno kao gumb poslati  to ne radi kako se očekivalo.

Da biste dizajnirali bolje gumbe za slanje mobilnih uređaja, evo tri savjeta za razmotriti:

  1. Provjerite jesu li dovoljno velike da lako možete dodirnuti mobilni uređaj.
  2. Ne stavljajte gumbe preblizu drugim predmetima kako ih korisnici ne bi pravilno dodirnuli.
  3. Istaknite gumbe, na primjer pomoću kontrastnih boja ili kreativne tipografije.

Povrh svega toga, morat ćete isprobati i svoje gumbe prije nego što web stranica postane aktivna. Za minutu ćemo detaljnije objasniti kako to učiniti. Za sada, razgovarajmo o izvedbi.

4. Provjerite jesu li se obrasci brzo učitali

U mnogim našim člancima puno govorimo o performansama web stranica, a to nije zato što nam je potrebna brzina. Poanta je u tome da većina ljudi ne voli spore web stranice, što ima sasvim smisla.

S bržom internetom, može biti teško čekati da se web stranica predugo učita. Uz to, brzine mobilnog interneta obično se razlikuju mnogo više od uobičajenih kućnih veza. To znači da će vaša web stranica trebati biti visoko optimizirana za mobilne uređaje ako želite ove korisnike učiniti sretnima, jer neće svi imati pristup internetu (tj. Brz).

Ovaj se određeni savjet može odnositi na cijelu vašu web stranicu, ali je važan i za mobilne stranice koje prikazuju vaše obrasce. Ako se za učitavanje ovih dijelova web stranice predugo traži, vi izgubiti pretvorbe i mogućnosti za povezivanje sa svojim posjetiteljima.

Učitavanje web stranice obično traje najviše dvije sekunde. Kad prijeđete ovo ograničenje, stope napuštanja početne stranice imaju tendenciju dramatično se povećati, što je za vas užasna vijest, a s obzirom na prirodu pregledavanja putem mobilnih uređaja, najbolje je da ovo vrijeme bude što je moguće niže. .

Imajući to na umu, postoji mnogo načina za poboljšanje ukupne izvedbe vaše stranice. Na primjer, možete nadograditi na bolji plansmještaj, koristite responzivnu temu optimiziranu za brzinu i komprimirati slike. Naravno, ovo će pomoći svim korisnicima, ali će biti posebno korisno onima koji koriste manje uređaje.

5. Ispitajte svoje obrasce prije objavljivanja

S obzirom na to da su obrasci ključni dio većine web stranica, logično je da ih temeljito testirate prije nego što ih objavite. S WordPressom je ovaj postupak prilično jednostavan. Možete nastaviti dizajnirati određene stranice za prikaz obrazaca i ne objavljivati ​​ih dok ih u potpunosti ne testirate.

Naravno, koji god dodatak ili temu želite koristiti ovisi o vama (ukoliko može pomoći u razvoju web lokacija za mobilne uređaje). Međutim, što se tiče faze testiranja, preporučujemo da to bude jednostavno i da koristite alate kao što su outils razvoja krom raditi.

Prođimo kroz brzi primjer. Ako upotrebljavate Chrome, samo naprijed pregledajte stranicu s obrascem koji želite testirati. Zatim desnom tipkom miša kliknite bilo gdje na ovoj stranici i odaberite opciju pregledati . Chrome će prikazati skup alata koje možete koristiti za pregled i uređivanje izvornog koda stranice zdesna i slijeva, možete vidjeti pregled njegovog izgleda s mobilnog uređaja:

Pregled alata za razvoj Chromea.

Na vrhu zaslona možete se koristiti izbornikom za prebacivanje između različitih razlučivosti. Chrome uključuje postavke za nekoliko popularnih mobilnih uređaja, ali možete unijeti i prilagođenu razlučivost.

U ovom trenutku trebali biste provjeriti izgled i ponašanje vašeg obrasca za kontakt na više uređaja. Uzmimo primjer u nastavku - obrazac dobro funkcionira, ali možete vidjeti da ne odgovara onako kako bi trebao. Posebno obratite pažnju na tekst i ikone koji su preblizu rubu zaslona:

dizajn for mobile.png

Jedan od načina da spriječite ovaj problem je da pojednostavite obrasce, kao što smo spomenuli u prvom savjetu. U primjeru u nastavku obrazac koristi više padajućih popisa i zahtijeva samo tri polja. To ga čini jednostavnim za upotrebu, a što je još važnije, obrazac je toliko jednostavan da mora savršeno odgovarati svim uređajima:

Primjer obrasca bez problema s skaliranjem.

Ako imate bilo kakvih problema s bilo kojim od vaših obrazaca, očito ih morate odmah riješiti. U suprotnom riskirate otuđiti svoju mobilnu publiku, što prvo pokušavamo izbjeći!

Zaključak

Osiguravanje da je vaša web stranica kompatibilna s mobilnim uređajima ključno je za zadržavanje prometa i ne frustriranje posjetitelja. Točnije, vaši bi obrasci trebali biti jednostavni za upotrebu na mobilnim uređajima ako ne želite propustiti primanje poruka ili prikupljanje vrijednih potencijalnih klijenata.

Kada je riječ o izradi mobilnih obrazaca, ovdje je pet savjeta za pojednostavljivanje vašeg života:

  1. Izbrišite sve nepotrebne odjeljke.
  2. Koristite padajuće popise ako je moguće.
  3. Provjerite je li gumbe za predaju lako pritisnuti.
  4. Provjerite jesu li se obrasci brzo učitali.
  5. Ispitajte svoje obrasce prije objavljivanja.