Af hverju WordPress eyðublöðin þín þurfa að vera aðgengileg fyrir farsíma

Meira en helmingur allrar vefumferðar kemur frá snjalltækjum. Ef eyðublöðin þín virka ekki vel í símum og spjaldtölvum, þá ertu að missa innsendingar – og hugsanlega viðskiptavini – á hverjum einasta degi.

Í þessari handbók munt þú læra hvers vegna eyðublöð sem eru sniðin að snjalltækjum skipta máli og hvað gerir eyðublöð sannarlega farsímavæn.

Farsímaveruleikinn

Tölfræði um umferð í farsímum

• 59% + af alþjóðlegri vefumferð er farsími
• 92% af netnotendum sem fá aðgang að farsíma
• 70% af vefumferð í sumum atvinnugreinum er farsími
• Notkun farsíma heldur áfram að aukast ár frá ári

Hvað þetta þýðir fyrir eyðublöð

Ef síðan þín fær 1,000 gesti á dag:

• ~600 eru á snjalltækjum
• Ómóttækileg eyðublöð pirra þessa gesti
• Pirraðir gestir yfirgefa eyðublöð
• Yfirgefin eyðublöð = glataðar leiðir, sala, endurgjöf

Hvað gerist með eyðublöðum sem ekki bregðast við

The User Experience

Á eyðublaði sem ekki er móttækilegt standa farsímanotendur frammi fyrir:

Lítill texti

• Merkimiðar of litlir til að lesa
• Kímdi augun við leiðbeiningar
• Vantar mikilvægar upplýsingar

Ómögulegir innsláttarreitir

• Textareitir of lítill til að tappa nákvæmlega
• Að slá inn rangt sviðum
• Stöðug aðdráttur að/fjarlæging

Brotnar uppsetningar

• Reitir skera af brúnum skjásins
• Lárétt skrun nauðsynleg
• Senda hnappur falinn eða ekki aðgengilegur

Pirrandi samskipti

• Fellilistar erfitt að velja
• Kassar of lítill til að tappa
• Dagsetningarvalsmenn ónothæf

Niðurstaðan

Notendur gefast upp. Þeir:

• Yfirgefa eyðublaðið alveg
• Skildu síðuna þína eftir pirraða
• Farðu til samkeppnisaðila með betri eyðublöð
• Aldrei aftur

Kostnaðurinn við eyðublöð sem ekki bregðast við

Týndar breytingar

Sérhvert yfirgefið form er glatað tækifæri:

• Tengiliðareyðublað → Týnd leið
• Tilboðsbeiðni → Týnd sala
• Skráning → Týndur viðskiptavinur
• Ábendingareyðublað → Glatað innsýn

Skemmt mannorð

Léleg upplifun í farsímum endurspeglar vörumerkið þitt:

• „Þetta fyrirtæki virðist úrelt“
• „Þeim er alveg sama um notendaupplifun“
• „Ef form þeirra eru slæm, hvað þá með vöruna þeirra?“

SEO áhrif

Google forgangsraðar farsímavænum síðum:

• Farsímavænar flokkanir eru staðlaðar
• Léleg upplifun í farsímum hefur áhrif á sæti í röðun
• Lægri sæti = minni umferð

Samkeppnisókostur

Þó að þú pirri farsímanotendur, þá eru samkeppnisaðilar með góð eyðublöð:

• Náðu í leiðirnar sem þú ert að missa
• Byggðu upp tengsl við hugsanlega viðskiptavini þína
• Vaxið á meðan þið veltið fyrir ykkur hvers vegna viðskipti eru fá

Hvað gerir eyðublað aðgengilegt fyrir farsíma

1. Vökvabreidd

Eyðublöð ættu að aðlagast skjástærð:

• Full breidd á litlum skjám
• Viðeigandi breidd á stærri skjám
• Engin lárétt skrun nokkurn tímann

2. Lesanlegur texti

Allur texti læsilegur án aðdráttar:

• Merki: Lágmark 14-16px
• Inntakstexti: Lágmark 16px (kemur í veg fyrir aðdrátt í iOS)
• Hjálpartexti: Lágmark 12-14px
• Nægilegt andstæða

3. Snertivæn skotmörk

Snertanlegt efni, stærð þess er hægt að stinga á, fyrir fingur:

• Lágmarks snertimark: 44 × 44 pixlar
• Nægilegt bil milli þátta
• Auðvelt að smella á gátreiti og útvarpstæki

4. Staflað skipulag

Í farsíma, staflaðu þáttum lóðrétt:

• Einn reitur í hverri röð
• Merkingar fyrir ofan inntak (ekki við hliðina á)
• Hnappar í fullri breidd

5. Innfæddir inntaksgerðir

Virkjaðu viðeigandi farsímalyklaborð:

• Netfangsreitur → Netfangslyklaborð (@, .com)
• Símasvæði → Talnaborð
• Vefslóðarreitur → Vefslóðarlyklaborð
• Talnasvið → Töluleg innsláttur

6. Farsímavænir íhlutir

Þættir hannaðir fyrir snertingu:

• Innbyggðir dagsetningarvalarar (skrunhjól)
• Stórir fellilistar kveikjur
• Snertivæn skráarupphleðsla

7. Sýnilegur sendahnappur

Notendur verða að geta fundið og ýtt á senda:

• Full breidd eða áberandi stærð
• Litur með miklum birtuskilum
• Greinilega sýnileg án þess að skruna (ef mögulegt er)

Bestu starfsvenjur fyrir farsímaeyðublöð

Haltu eyðublöðum stuttum

Farsímanotendur hafa minni þolinmæði:

• Spyrðu aðeins nauðsynlegra spurninga
• Fjarlægja reiti sem eru „góðir til að hafa“
• Íhugaðu fjölþrepa fyrir lengri eyðublöð

Nota uppsetningu með einum dálki

Fjöldálkaútlit bila í farsímum:

• Staflaðu öllum reitum lóðrétt
• Auðveldara að skanna og klára
• Samræmd upplifun á öllum tækjum

Fínstilltu röðun reita

Raðaðu reitum rökrétt:

• Mikilvægast fyrst
• Tengdir reitir flokkaðir saman
• Auðvelt að ná með þumalfingri

Gefðu skýr merki

Merkingar ættu að vera ótvíræðar:

• Fyrir ofan völlinn (ekki fljótandi inni)
• Alltaf sýnilegt (ekki treysta eingöngu á staðgengil)
• Lýsandi en hnitmiðað

Virkja sjálfvirka útfyllingu

Leyfðu vöfrum að hjálpa notendum:

• Sjálfvirk útfylling nafns, netfangs, símanúmers
• Sjálfvirk útfylling heimilisfangs
• Minnkar innslátt á litlum lyklaborðum

Sýna staðfestingu innlínu

Hjálpaðu notendum að laga villur strax:

• Villuboð við hliðina á reitum
• Staðfesting í rauntíma þegar mögulegt er
• Skýrar leiðbeiningar til að laga

Gerðu hnappa augljósa

Sendingarhnappar ættu að skera sig úr:

• Andstæður litur
• Stórt tappamark
• Skýr aðgerðartexti („Senda“, „Senda“, „Skrá“)

Prófun á viðbragðshæfni í farsímum

Verkfæri fyrir forritara fyrir vafra

Fljótleg prófun í skjáborðsvafra:

1. Opnaðu eyðublaðsíðuna þína
2. Ýttu á F12 (forritunartól)
3. Smelltu á rofatáknið fyrir tækið
4. Veldu mismunandi stærðir tækja
5. Samspil prófunarforms

Raunveruleg tækjaprófun

Ekkert slær við raunveruleg tæki:

• Prófa á iPhone og Android
• Prófun á spjaldtölvum
• Prófaðu mismunandi skjástærðir
• Fylltu út eyðublaðið í raun og veru

Hvað á að prófa

• ✓ Geturðu lesið öll merkimiða án þess að stækka?
• ✓ Er auðvelt að smella á innsláttarreitina?
• ✓ Birtist rétt lyklaborð?
• ✓ Geturðu auðveldlega valið valmöguleika í fellilista?
• ✓ Er hægt að smella á gátreiti/útvarpshljóð?
• ✓ Er sendahnappurinn sýnilegur og aðgengilegur?
• ✓ Er eyðublaðið sent inn með góðum árangri?
• ✓ Eru villuboð sýnileg og skýr?

Google Mobile-Friendly Test

Athugaðu almenna farsímavænleika síðunnar:

1. Farðu í farsímavænleikaprófunartól Google
2. Sláðu inn vefslóð eyðublaðssíðunnar þinnar
3. Fara yfir niðurstöður og tillögur

Algeng vandamál með farsímaform

Vandamál: Texti of lítill

Orsök: Fastar pixlastærðir sem ekki stækka

lausn: Notið hlutfallslegar einingar (em, rem) eða að lágmarki 16px

Vandamál: Reitir of þröngir

Orsök: Ílát með fastri breidd

lausn: Nota prósentubreidd (100% í farsímum)

Vandamál: Lyklaborðshlífar

Orsök: Engin skrunstilling þegar lyklaborðið birtist

lausn: Gakktu úr skugga um að fókusreiturinn skuli birtast

Vandamál: Aðdráttur við inntaksfókus (iOS)

Orsök: Leturstærð undir 16px í inntaki

lausn: Stilltu leturstærð innsláttar á að minnsta kosti 16px

Vandamál: Fellivalmyndir sem eru erfiðar í notkun

Orsök: Sérsniðnir fellilistar eru ekki snertanlegar

lausn: Notaðu innbyggða valþætti eða snertivæna valkosti

Vandamál: Senda hnappur utan skjás

Orsök: Langar eyðublöð án sýnilegrar framvindu

lausn: Festihnappur fyrir senda eða skýrir skrunvísar

Farsíma-sértækir eiginleikar

Smelltu-til-að-símtala símatenglar

Símanúmer í staðfestingum ættu að vera hægt að slá inn:

• Tenglar með tel: samskiptareglum
• Einn smellur til að hringja

Staðsetningargreining

Fyrir heimilisfangsreiti:

• Möguleiki á að nota núverandi staðsetningu
• Sjálfvirk útfylling borgar/svæðis

Samþætting myndavéla

Fyrir skráarupphleðslur:

• Bein aðgangsmöguleiki að myndavél
• Aðgangur að ljósmyndasafni
• Skjalaskönnun

Snertu Bendingar

Innbyggð samskipti í farsímum:

• Strjúktu á milli skrefa í eyðublaðinu
• Dragðu til að endurnýja
• Klíptu til aðdráttar (ef þörf krefur)

Árangur í farsímum

Af hverju hraði skiptir meira máli í farsímum

• Farsímatengingar oft hægari
• Gagnamörk fyrir suma notendur
• Minni þolinmæði í farsímanum
• Atriði sem varða rafhlöðunotkun

Ráðleggingar um frammistöðu eyðublaðs

Lágmarka þyngd eyðublaðs

• Léttar eyðublaðaviðbætur
• Lágmarks CSS/JavaScript
• Bjartsýndar eignir

Latur hleðsla þegar mögulegt er

• Hlaða inn eyðublaðsþáttum eftir þörfum
• Ekki hlaða inn földum skilyrtum reitum fyrirfram

Bjartsýni myndir

• Þjappa hvaða myndum sem er í eyðublöðum
• Notið viðeigandi snið (WebP)
• Móttækilegar myndastærðir

Farsímaaðferð Auto Form Builder

Sjálfvirk eyðublaðasmiður er smíðað fyrst og fremst fyrir farsíma:

Móttækilegt sjálfgefið

• Öll eyðublöð svara sjálfkrafa
• Engin sérstök stilling þarf
• Aðlagast hvaða skjástærð sem er

Snertihæfðir reitir

• Rétt stærð tappamarka
• Innbyggðir farsímainntak
• Snertivænir dagsetningar-/tímavalsmöguleikar

Farsímavæn hönnun

• Staflauppsetning á litlum skjám
• Reitir í fullri breidd í farsíma
• Lesanlegar leturstærðir

Léttur árangur

• Lágmarks JavaScript fótspor
• Hraðhleðslu eyðublaða
• Bjartsýni fyrir farsímanet

Gátlisti: Er eyðublaðið þitt tilbúið fyrir farsíma?

Skipulag

• ☐ Einn dálkur í farsíma
• ☐ Engin lárétt skrunun
• ☐ Reitir í fullri breidd
• ☐ Nægilegt bil milli þátta

Leturfræði

• ☐ Merkimiðar lesanlegir án aðdráttar (14px+)
• ☐ Sláðu inn texta að minnsta kosti 16px
• ☐ Góð birtuskil

Milliverkanir

• ☐ Snertimarkmið 44px lágmark
• ☐ Réttar gerðir lyklaborða
• ☐ Einfalt val í fellilista
• ☐ Hægt er að smella á gátreiti/útvarpstæki

virkni

• ☐ Eyðublað sent inn
• ☐ Villuboð sjáanleg
• ☐ Skilaboð um að þetta hafi tekist birtast
• ☐ Skráarupphleðslur virka

Frammistaða

• ☐ Hleðst hratt á 3G
• ☐ Engin blokkunarforrit
• ☐ Lágmarks gagnanotkun

Algengar spurningar

Af hverju stækka eyðublöðin mín í iOS þegar ég pikka á reit?

iOS aðdráttur sjálfkrafa þegar leturstærð innsláttar er minni en 16px. Stilltu leturstærð innsláttar á að minnsta kosti 16px til að koma í veg fyrir þetta.

Ætti ég að búa til aðskilin eyðublöð fyrir farsíma og tölvur?

Nei - móttækileg hönnun tekur á báðum. Eitt vel hannað móttækilegt eyðublað virkar á öllum tækjum. Að viðhalda aðskildum eyðublöðum tvöfaldar vinnuna og hættu á ósamræmi.

Hvernig get ég prófað á tækjum sem ég á ekki?

Notið verkfæri fyrir vafraþróunarforrit fyrir grunnprófanir. Fyrir ítarlegar prófanir, notið netþjónustur eins og BrowserStack eða spyrjið vini/samstarfsmenn með mismunandi tæki.

Fylla farsímanotendur í raun út eyðublöð?

Já! Farsímaviðskipti og leiðaöflun eru gríðarleg. Notendur búast við að geta klárað verkefni í farsímum. Ef eyðublöðin þín virka vel, þá munu þeir nota þau.

Hver er mikilvægasta úrbæturnar á farsímaforminu?

Rétt stærð snertimarka. Ef notendur geta ekki pikkað nákvæmlega á reiti og hnappa skiptir ekkert annað máli. Gakktu úr skugga um að allir gagnvirkir þættir séu að minnsta kosti 44 × 44 pixlar.

Yfirlit

Að gera eyðublöð aðgengileg fyrir snjalltæki:

1. Skilja hvað er í húfi – 60%+ umferð er frá farsímum
2. Notaðu móttækilega hönnun – Fljótandi breidd, staflað skipulag
3. Stærð fyrir snertingu – Lágmarksfjöldi snertimarka er 44px
4. Tryggja lesanleika – Lágmarks inntakstexti er 16px
5. Virkja hægri lyklaborð – Notið réttar inntaksgerðir
6. Prófaðu á raunverulegum tækjum – Notið ekki bara hermir
7. Veldu móttækileg verkfæri – Byrjaðu með eyðublaðasmiðum sem eru tilbúnir fyrir farsíma

Niðurstaða

Farsímavæn eyðublöð eru ekki valkvæð - þau eru nauðsynleg. Þar sem megnið af vefumferð kemur úr farsímum kosta eyðublöð sem virka ekki í símum þig daglega leiðir, viðskiptavini og orðspor.

Sjálfvirk eyðublaðasmiður býr sjálfkrafa til eyðublöð sem eru sniðin að snjalltækjum. Sérhvert eyðublað aðlagast skjástærð, notar snertivæna þætti og virkar vel á farsímanetum. Engin stilling þarf - bara smíðaðu eyðublaðið þitt og það virkar alls staðar.

Tilbúinn/n fyrir farsímavæn eyðublöð? Sækja sjálfvirka eyðublaðasmiðinn og veita farsímanotendum þínum þá upplifun sem þeir eiga skilið.