Kontaktní formuláře jsou klíčovou součástí mnoha webových stránek. I když jsou obecně jednoduché, musíte se ujistit, že se snadno používají, pokud chcete sbírat potenciální zákazníky a zůstat v kontaktu se svými uživateli. To obvykle není problém s kancelářským provozem, ale používání formulářů může být obtížné, pokud používáte mobilní zařízení.

V tomto tutoriálu si povíme něco o důležitosti navrhování formulářů vhodných pro mobilní zařízení. Dále vás provedeme pěti tipy, abychom se ujistili, že vaše formuláře na mobilních zařízeních fungují hladce.

Pojďme do práce!

Proč je důležité, aby vaše formuláře byly mobilní

Formuláře přicházejí ve všech tvarech a velikostech. Nejčastěji se budete zabývat kontaktními formuláři:

příklad kontaktního formuláře.png

Registrační (předplatné) formuláře jsou také velmi populární, protože vám umožňují sbírat e-maily a cílit je během kampaní:

cílové e-maily během kampaní

Formuláře však lze použít pro všechny druhy jiných účelů. Můžete například shromažďovat informace pomocí online dotazník nebo dotazník , v takovém případě budete potřebovat formuláře, které uživatelům umožňují zadávat odpovědi.

Jinými slovy, formuláře jsou velmi univerzální a téměř všechny weby používají formuláře tak či onak. Proto je nezbytné, aby vaše formuláře byly snadno použitelné (pokud nechcete svým návštěvníkům poskytovat frustrující zážitek).

Používání formulářů ze stolního nebo přenosného počítače je obvykle velmi snadné. Máte plnou myš a klávesnici, takže výběr pole, které chcete použít, a zadávání dat by neměl být problém. Procházení webu ze smartphonu nebo jiného kompaktního zařízení má však komplikace.

Když pracujete prsty na malé obrazovce, může být interakce s formuláři někdy zdrcující kvůli špatným rozhodnutím o návrhu. Tomu byste se měli ve svých vlastních designech vyhnout. Koneckonců, pokud mobilní uživatelé nemohou komunikovat s vašimi formuláři, riskujete ztrátu konverzí, potenciálních zákazníků nebo jen otravné návštěvníky.

Je také důležité pochopit, že mobilní provoz je nyní, ne-li více, důležitý než zdroje pro stolní počítače. Mobilní provoz ji ve skutečnosti v posledních letech již předběhl. To znamená, že navrhování webových stránek vhodných pro mobilní telefony by mělo být vaším hlavním cílem při zahájení nového projektu.

5 tipy pro navrhování snadno použitelných mobilních forem

Naštěstí není navrhování formulářů vhodných pro mobily tak obtížné, jak si dokážete představit. Ve většině případů stačí mít na paměti některé základy a před uvedením do provozu důkladně otestovat své formuláře. Pojďme si promluvit o tom, jak na to!

1. Odstraňte všechny nepotřebné sekce

Čím více polí váš formulář obsahuje, tím obtížnější bude jeho použití v mobilních zařízeních. Ve skutečnosti je používání formulářů v mobilních zařízeních jednoduše komplikovanější. Snížením počtu polí nebo sekcí obsažených ve formulářích můžete maximalizovat své šance, že je návštěvníci vyplní.

Zde je rychlý příklad a kontaktní formulář s některými dalšími poli, která nejsou na mobilu nutná:

pole není potřeba na mobile.png

Ve většině případů vše, co potřebujete pro skvělé kontaktní formulář je jméno, e-mail a tělo zprávy, kterou chcete obdržet. Vše ostatní závisí na typu webu, který používáte, a na tom, zda se snažíte sbírat potenciální zákazníky.

Čím méně polí formulář má, tím snáze je mobilní návštěvníci budou moci používat. Koneckonců, výběr pole pomocí dotykové obrazovky může být složitý, bez ohledu na to, jak dobře navržený, aby se minimalizoval počet chmele, který musí uživatelé udělat.

Vaším cílem v tomto okamžiku je zkontrolovat existující formuláře na vašem webu. Projděte každou z jejich sekcí a zjistěte, zda opravdu potřebujete další pole kromě těch, která byla zmíněna výše. Pokud existuje zbytečné pole, jednoduše jej smažte.

2. Pokud je to možné, použijte rozevírací seznamy

Většině z nás vyhovuje psaní na mobilních zařízeních a používání dotykových obrazovek. Nicméně odeslání SMS příteli a vyplnění a kontaktní formulář jsou dvě velmi odlišné zkušenosti. S těmito je velká šance, že budete frustrovaní, když budete muset zadávat spoustu informací.

Jedním ze způsobů, jak svému mobilnímu návštěvníkovi usnadnit život, je zjednodušit rozhodování o prvcích vašeho webu, které musí učinit. Abyste měli představu, o čem mluvíme, využijme náš předchozí příklad rezervovat restaurace:

provést rezervaci.png

Chcete-li rezervovat, pravděpodobně budete muset zanechat jméno, e-mail, telefon  et  uveďte čas a také počet přítomných osob. Existují dva způsoby, jak vytvořit pole formuláře pro ověření denní doby. rezervovat:

  1. Nakonfigurujte pole, které přijímá pouze číselné položky.
  2. Navrhněte rozevírací seznam včetně všech dostupných časů pro rezervaci.

Jak si dokážete představit, ten druhý je pro uživatele mobilních zařízení uživatelsky přívětivější. S tímto přístupem nemusí zadávat čísla a mohou si z možností, které zahrnete, vybrat, co jim nejlépe vyhovuje.

Myšlenka podívat se na své formuláře a zjistit, zda obsahují pole, která můžete nahradit rozevíracími nabídkami. Ne vždy tomu tak bude, protože ke shromažďování jmen nebo e-mailů nemůžete použít rozbalovací nabídky, ale lze použít i jiné možnosti.

Bez ohledu na jejich případ použití se chcete ujistit, že vaše rozevírací nabídky obsahují možnosti, které lze snadno vybrat z mobilních zařízení. Jinými slovy, udělejte nabídku dostatečně velkou, aby někdo nemusel pokukovat, aby vybral správnou možnost.

3. Ujistěte se, že tlačítka pro odeslání se snadno dotknou

Tento tip je poměrně jednoduchý, ale je třeba ho zmínit. Každý formulář, který navrhnete, by měl obsahovat způsob, jak uživatelé potvrdí, že chtějí zadané údaje odeslat. Ve většině případů to znamená vytvoření tlačítka pro odeslání:

vytvořte tlačítko Odeslat.png

Při použití běžného počítače je klepnutí na tlačítko Odeslat nejpřirozenější věcí na světě. Na mobilních zařízeních jsme však narazili na několik formulářů, kde je mnohem těžší stisknout tlačítko.

Pokud vaši návštěvníci nemohou zadat informace, které zadali do vašich formulářů, bude veškeré vaše úsilí zbytečné. Navíc nic nevypadá tak neprofesionálně jako tlačítko odeslat  to nefunguje podle očekávání.

Chcete-li navrhnout tlačítka pro lepší odeslání pro mobilní zařízení, zvažte tři tipy:

  1. Ujistěte se, že jsou dostatečně velké, abyste na ně mohli snadno klepnout na mobilním zařízení.
  2. Neumisťujte tlačítka příliš blízko k jiným položkám, aby se jich uživatelé nedotkli správně.
  3. Zvýrazněte svá tlačítka, například pomocí kontrastních barev nebo kreativní typografie.

Kromě toho budete také chtít otestovat tlačítka před spuštěním vašeho webu. Podrobněji se dozvíme, jak to udělat za minutu. Prozatím si promluvme o výkonu.

4. Ujistěte se, že se formuláře rychle načítají

V mnoha našich článcích hodně mluvíme o výkonu webových stránek a není to proto, že potřebujeme rychlost. Jde o to, že většina lidí nemá ráda pomalé webové stránky, což dává dokonalý smysl.

S rychlejší rychlostí internetu může být obtížné čekat na příliš dlouhé načítání webových stránek. Rychlost mobilního internetu se navíc liší mnohem více než běžné domácí připojení. To znamená, že váš web bude muset být vysoce optimalizován pro mobilní zařízení, pokud chcete, aby tito uživatelé byli spokojení, protože ne všichni budou mít přístup k internetu (tj. Rychlý).

Tento konkrétní tip se může vztahovat na celý váš web, ale je také důležitý pro mobilní stránky zobrazující vaše formuláře. Pokud se načítání těchto částí vašeho webu trvá příliš dlouho, vy ztrácí konvertity a příležitosti, jak se spojit s vašimi návštěvníky.

Načtení webové stránky by obvykle nemělo trvat déle než dvě sekundy. Jakmile překročíte tento limit, míra okamžitého opuštění má tendenci dramaticky se zvyšovat, což je pro vás strašná zpráva a vzhledem k povaze procházení mobilních telefonů je nejlepší tento čas udržovat na co nejnižší úrovni. .

S ohledem na to existuje mnoho způsobů, jak zlepšit celkový výkon vašeho webu. Můžete například upgradovat na lepší plánubytování, použijte responzivní motiv optimalizovaný pro rychlost a komprimovat obrázky. Samozřejmě to pomůže všem uživatelům, ale bude to užitečné zejména pro ty, kteří používají menší zařízení.

5. Před publikováním otestujte své formuláře

Vzhledem k tomu, že formuláře jsou klíčovou součástí většiny webových stránek, má smysl je před publikováním důkladně otestovat. S WordPress je tento proces docela přímočarý. Můžete pokračovat a navrhnout konkrétní stránky tak, aby zobrazovaly vaše formuláře, a nepublikovat je, dokud je plně nevyzkoušíte.

Samozřejmě, jakýkoli plugin nebo téma, které chcete použít, je na vás (pokud to může pomoci při vývoji mobilních webů). Pokud však jde o fázi testování, doporučujeme vám, abyste to zjednodušili a používali nástroje, jako je nářadí rozvoje chróm dělat práci.

Pojďme si ukázat rychlý příklad. Pokud používáte Chrome, pokračujte a zobrazte náhled stránky pomocí formuláře, který chcete otestovat. Poté klikněte pravým tlačítkem kdekoli na této stránce a vyberte tuto možnost prozkoumat . Chrome zobrazí sadu nástrojů, které můžete použít ke kontrole a úpravám zdrojového kódu stránky, vpravo a vlevo, můžete vidět náhled jejího vzhledu z mobilního zařízení:

Přehled vývojových nástrojů Chrome.

V horní části obrazovky můžete pomocí nabídky přepínat mezi různými rozlišeními. Chrome obsahuje nastavení pro několik populárních mobilních zařízení, ale můžete také zadat vlastní rozlišení.

V tomto okamžiku byste měli zkontrolovat vzhled a chování kontaktního formuláře na více zařízeních. Vezměte si níže uvedený příklad - formulář funguje dobře, ale můžete vidět, že se nevejde tak dobře, jak by měl. Věnujte zvláštní pozornost zejména textu a ikonám, které jsou příliš blízko k okraji obrazovky:

design formuláře pro mobile.png

Jedním ze způsobů, jak tomuto problému zabránit, je udržovat jednoduché formuláře, jak jsme uvedli v prvním tipu. V níže uvedeném příkladu formulář používá více rozevíracích seznamů a vyžaduje pouze tři pole. Díky tomu se snadno používá a co je důležitější, forma je tak jednoduchá, že se musí perfektně hodit pro všechna zařízení:

Příklad formuláře bez problémů se škálováním.

Pokud máte nějaké problémy s některým z vašich formulářů, musíte je samozřejmě okamžitě vyřešit. V opačném případě riskujete odcizení svého mobilního publika, kterému se nejprve snažíme vyhnout!

Proč investovat do čističky vzduchu?

Zajištění kompatibility vašeho webu s mobilními zařízeními je klíčem k udržení provozu a frustraci vašich návštěvníků. Konkrétně by vaše formuláře měly být snadno použitelné na mobilních zařízeních, pokud nechcete přijít o příjem zpráv nebo shromažďování cenných potenciálních zákazníků.

Pokud jde o navrhování formulářů kompatibilních s mobilem, zde je pět tipů, které vám usnadní život:

  1. Odstraňte všechny nepotřebné sekce.
  2. Pokud je to možné, použijte rozevírací seznamy.
  3. Ujistěte se, že tlačítka pro odeslání lze snadno stisknout.
  4. Ujistěte se, že se formuláře rychle načítají.
  5. Před publikováním otestujte své formuláře.