10 načina za poboljšanje web stranice za mobitele

Imate web stranicu prilagođenu mobitelima, zar ne? Je li ugrađen responzivan dizajn ili ste koristili dodatak da bi izgledala dobro? Prilagođava li se različitim rezolucijama i različitim uređajima? Kako je uporaba mobilnog interneta s godinama eksplodirala, korisničko iskustvo vaše mobilne web stranice (ili mobilnog UX-a) trebala bi privući toliko pažnje kao i korisničko iskustvo vaše web stranice na stolnim računalima i laptopima. Čak i više, jer će Google sve češće ocjenjivati ​​vašu web stranicu na temelju vaše mobilne verzije. U ovom članku želimo podijeliti deset stvari koje možete učiniti za poboljšanje korisničkog iskustva (UX) vaše web stranice na pametnim telefonima.

Za početak ćemo napraviti razliku. Iako se sve stvari spomenute u ovom članku odnose i na tablete, imali smo na umu pametne telefone prilikom pisanja ovog članka. No, nadalje od 2020. godine ne morate imati na umu samo pametne telefone jer mnogi drugi uređaji mogu konzumirati vaš sadržaj. Čitate ovaj članak na pametnom telefonu? Naravno zašto ne. Možete čitati i na pametnom satu ili pametnom televizoru. Gdje god!?

1. Koristite dizajn zasnovan na zadacima web stranice

Dizajnirajte svoju web stranicu za mobilne uređaje i njezinu strukturu imajući na umu korisnika - a pritom ne zaboravite na mobilni SEO. Vaš korisnik koristi mobilni telefon. Možda je na putu i treba provjeriti nešto na vašoj web stranici. Što bi to moglo biti? Razmislite trenutak o stvarima koje posjetitelji rade na vašoj web lokaciji (provjerite Google Analytics, koristite zdrav razum o svom poslu ili provedite odgovarajuće testiranje). Odlučite se o glavnim zadacima za vaše web mjesto za mobilne uređaje i istaknite najočitije informacije.

Glavni zadaci vaše mobilne web stranice su male skupine informacija (obično manje od deset, često manje od pet) koji su najvažniji za vaše kupce. To su ključne informacije koje korisnici očekuju brzo obaviti na vašoj web lokaciji. Optimizirajte svoje mobilne stranice na takav način da su te informacije dostupne na najjednostavniji mogući način.

Trebate olakšati stvari. Ako netko pronađe vašu web stranicu i počne je pregledavati, pobrinite se da može lako pronaći i dovršiti ono što je želio učiniti ili saznati. Na njihovom mobitelu vjerojatno ima gomila aplikacija koje su navikli koristiti. Čitanje na mobilnom uređaju može otežati fokusiranje korisnika. Ometanje dolazi posvuda, ne samo na telefonu, već i od okoline. Dizajnirajte svoj UX za mobilne uređaje kako bi bili sigurni da će sve obaviti, prije nego što se korisnik prebaci na druge aplikacije ili web stranice.

2. Dodajte jasan izbornik i opciju pretraživanja

Jedan od glavnih elemenata mobilnog UX-a je pretraživanje. Morate biti u mogućnosti pretraživati ​​u određenom trenutku. Opcija pretraživanja uvijek bi trebala biti dostupna tijekom čitanja stranice ili klikom na drugu. Stvar je u tome da, iako se trudimo predstaviti najlakšu moguću web stranicu, kao što je spomenuto u gornjem odjeljku, uvijek će postojati elementi koje jednostavno moramo zadovoljiti. Za sav sadržaj bilo bi dobro omogućiti opciju mobilnog pretraživanja.

Ako ste posrednik u prometu nekretninama ili prodajete odjeću putem interneta, ta opcija pretraživanja mogla bi biti i najvažniji element na vašoj mobilnoj početnoj stranici. U tom slučaju pokažite tu opciju pretraživanja u području sadržaja i učinite je dostupnom putem trake izbornika na drugim stranicama.

Još jedna stvar o mobilnom UX-u vezanom uz pretraživanje: imate samo jednu mogućnost korisniku pružiti kvalitetnu pretragu. Ne bude li bio zadovoljan rezultatom, vjerojatnost da će napustiti vašu web stranicu i nikada se ne vratiti je vrlo velika. Pazite da i vaše stranice internih rezultata pretraživanja izgledaju sjajno. Rezultati bi se trebali poredati prema relevantnosti, na primjer, i na stolnim računalima i na mobilnim uređajima. Osigurajte da se mogu razlikovati pojedinačni rezultati, pa poboljšajte razdvajanje rezultata.

3. Ne pretjerujte razdjelnicima

O tom nedostatku razdvajanja; to ne znači da biste trebali koristiti sve vrste razdjelnika na svom mobilnom web mjestu. Razdjelnici zauzimaju prostor, a to bi umjesto toga moglo negativno utjecati na mobilni UX. Razmislite o načinima oblikovanja elemenata, tako da svi izgledaju kao zasebni odjeljci, bez potrebe za razdjelnikom. Koristite obrube, razmak, naslove. Puno se stvari može učiniti za poboljšanje mobilnog UX-a bez dodavanja linijskih elemenata koji samo zauzimaju prostor. Naravno, nije zabranjeno koristiti ih. Samo pripazite da se uklope i nemojte odvlačiti pažnju korisnika od sadržaja nepotrebnim elementima.

4. Koristite kratke obrasce

Kao i na vašoj web stranici za stolna računala, i vaša web stranica za mobilne uređaje može ili treba imati za cilj konverziju. Kupnja proizvoda ili dobivanje cijene za vaše usluge. Pretplata na vaš bilten ili jednostavno ispunjavanje obrasca za kontakt sve su radnje koje zahtijevaju korisnički unos. Na mobilnom telefonu obrasci od šest stranica uništavaju mobilni UX. Korisnici ih mogu ispuniti, ali to je užasno veliko, nezgrapno, nepregledno, budući da se radi o obrascu od šest stranica.

Za optimalan UX za mobilne uređaje želite da obrasci budu što kraći. Uklonite sve stvari koje želite pitati, ali nisu neophodne. Newsletter? Samo polje za unos adrese e-pošte. Web trgovina? Adresa dostave i adresa fakture. Ili barem mogućnost kopiranja adrese za dostavu na adresu računa. Ipak se pobrinite da slijedite GDPR smjernice!

5. Smanjite vizualni doživljaj

Možda mislite da vaša web stranica na stolnom računalu izgleda fantastično sa svim tim bojama i ogromnim slikama, ali na vašoj web stranici za mobilne uređaje učinak će se percipirati drugačije. Bit će manje fokusa. Vaša web stranica ne mora biti samo crno-bijela, ali lijepa bijela pozadina, crna slova i jedna ili možda dvije podržavajuće boje dovoljne su za bolji mobilni UX.

Obavezno osigurajte da vaša mobilna stranica i web stranica za stolna računala imaju isti paritet - one bi trebale ponuditi identično iskustvo na mobilnim uređajima, kao i na stolnim računalima. To se odnosi ne samo na sadržaj, već i na dizajn. Osim toga, danas, kada pregledavate svoju web stranicu, uvijek biste ju trebali gledati iz perspektive mobilnog uređaja. Dakle, trebate li ikada započeti projekt redizajna web stranice - napravite to prvo prilagođeno za mobilne uređaje.

Ublažavanje stvari također vrijedi za vaše divlje animacije, akrobacije i slično. Svaki nebitni dio JavaScript-a koji dodate na svoju web stranicu otežava učitavanje i njezino pokretanje. Osim toga, animacija nema uvijek smisla na mobilnoj web stranici. Neka vaše web stranica bude jednostavna i čitka!

6. Ispravno područja gumba

To je tako očito, ali još uvijek postoji razlog za zabrinutost. Web stranice za mobilne uređaje uglavnom se pregledavaju pomoću prstiju i palčeva, a tipke ne pružaju uvijek dovoljno prostora da ih lako pritisnete. U Googleovoj dokumentaciji za razvojne programere to možete pronaći pod Accessible tap targets. A trebamo biti u mogućnosti kliknuti i na elemente tim palcem.

U gore navedenom Googleovom članku možete pronaći preporučene dimenzije:
Minimalna preporučena veličina područja dodira je oko 48 neovisnih piksela o uređaju na web stranici s pravilno postavljenim mobilnim prikazom. Primjerice, dok ikona može imati samo širinu i visinu od 24 piksela, možete osigurati dodatno područje oko ikonice kako biste ciljnu veličinu gumba povećali do 48 piksela. Područje od 48 × 48 piksela odgovara oko 9 mm, što je približno veličini površine jagodice prstiju.

Uz to, stručnjaci za iskoristivost web stranica otkrili su da gumbi na mobilnim uređajima trebaju imati prikazanu veličinu od najmanje 1cm x1cm kako bi se spriječile pogreške i frustracije. Također, ubitačno frustrirajuće je kada su dodirni elementi često preblizu jedan drugome. Dosadno je kliknuti link i završiti negdje drugdje, samo zato što je veza pokraj nje preblizu vezi koju ste željeli.

7. Ne koristite previše veličina slova

Tipografija može doprinijeti ali i uništiti vašu mobilnu web stranicu. Nije važna samo vrsta fonta koji odaberete, već i veličina fontova. Ne možete koristiti iste veličine fontova za desktop i mobitele.

Dva su razloga za to:

Veličina zaslona za mobitelu. Ne želite da naslov ispunjava zaslon; želite biti sigurni da članak započinje u prvom prikazu stranice. Niti želite da osnovni font (poput fonta pasusa) bude premalen za čitanje, a da ne treba zumirati.
Stvorit ćete nered kada koristite više od tri veličine slova. Razlike u veličini bit će puno vidljivije. Zbog toga biste trebali ograničiti broj veličina fonta na dvije, možda tri veličine.

Googleovi testovi za prilagodbu web stranice mobilnim uređajima čak provjeravaju jesu li veličine fontova u redu.

8. Optimizirajte za brzinu

Još jedan glavni čimbenik mobilnog UX-a je brzina. Postoji više alata za provjeru brzine web stranice, o čemu smo već pisali. Možete učiniti nekoliko stvari kako biste poboljšali performanse. Prva se uvijek čini očitom: optimizacija slike. Trebali biste barem smanjiti veličinu slike pomoću alata kao što je Squoosh. Uz to, trebali biste kombinirati i umanjiti CSS i JavaScript datoteke koje su učitane. Što manje veza s poslužiteljem treba uspostaviti, to će vaša web stranica biti brža i mobilni UX bit će bolji. Naravno, trebali biste koristiti i sjajan hosting, jer se to često pokaže kao odlučujuće za brzinu web stranice.

Brzina web stranice vruća je tema na Googleu. Ne tako davno, kako su najavili tako su i napravili u Googleu. Dodali su novi skup mjernih podataka pod nazivom Core Web Vitals. Te metrike daju Googleu uvid za novi faktor rangiranja: korisničko iskustvo web stranice. 2021. mobilne web stranice također će se ocjenjivati ​​prema tom iskustvu koje nude korisnicima. Naravno, brzina učitavanja web stranice je jedan od tih važnih čimbenika.

9. Ne pretjerujte s oglasima

Mnoge web stranice koriste oglase kako bi zaradile nešto novca i to je potpuno u redu. Ali ono što ne biste trebali je prestrašiti korisnika skočnim prozorima i slično. Zapravo ne poštujete korisnika kada je prva stvar koju mu priuštite da iskusi skočni prozor sa obrascem za prijavu na vaš newsletter. Prije nego što prikažete oglase i CTA-ove, pobrinite se da se stvari pravilno učitavaju. Uz to, neka oglasi budu pristojni i ublaženi. Želite uspostaviti vezu i stvoriti odnos s korisnikom, a to se ne događa kada im u trenu iskoči oglas "KUPI ODMAH NAJSUPER ČETKU ZA PSA" u trenutku kad se nađu na vašoj mobilnoj web stranici. Ovo je loše korisničko iskustvo - i ono koje bi čak moglo razljutiti Google. A tada ćete u svojoj web stranici uživati samo vi.

10. Testirajte UX za mobilne uređaje

Kada poslužujete responzivnu web stranicu svojim posjetiteljima, morate osigurati da se svaka promjena na stolnom računalu testira i na mobilnoj verziji vaše web stranice. To je jedini način na koji možete osigurati da vaša web stranica bude uvijek ažurna. Obavezno testirajte svoju web stranicu za mobilne uređaje iznova i iznova.

Dakle, kao zaključak, mobilni UX odnosi se na puno stvari. U ovom smo članku razgovarali o ovih deset načina za poboljšanje mobilnog UX-a:

1. Koristite dizajn zasnovan na zadacima koje vaša web stranica mora izvršavati
2. Napravite dobar izbornik s opcijom pretraživanja
3. Nije potrebno dodavati razdjelnike kada su odjeljci jasno definirani
4. Neka obrasci i polja za unos teksta budu što kraći
5. Ne dodavajte previše boja u svoj dizajn
6. Provjerite mogu li se neometano kliknuti gumbi i linkovi
7. Ne pretjerujte s varijacijama veličine fonta
8. Neka vaše web stranice bude što brže
9. Ne stavljajte nametljive oglase i skočne prozore
10. Testirajte sve promjene na svom web mjestu na mobilnim uređajima

Radujemo se vašim prijedlozima!

Ovo je samo deset od mnogih stvari za koje mislimo da biste ih trebali uzeti u obzir prilikom optimizacije mobilnog UX-a. Sigurni smo da možete nabrojati još najmanje dvostruko i radujemo se vašim iskustvima na tu temu: koje još stvari smatrate a koje bi trebale uzeti u obzir?
Pišite nam kako bismo proširili bazu znanja!