Kontaktné formuláre sú kľúčovou súčasťou mnohých webových stránok. Aj keď sú vo všeobecnosti jednoduché, musíte sa ubezpečiť, že sú ľahko použiteľné, ak chcete získať potenciálnych zákazníkov a zostať v kontakte so svojimi používateľmi. Spravidla to nie je problém s kancelárskym prenosom, ale používanie formulárov môže byť ťažké, ak používate mobilné zariadenie.

V tomto výučbe si povieme niečo o dôležitosti navrhovania formulárov vhodných pre mobilné zariadenia. Ďalej vás prevedieme piatimi tipmi, aby ste sa ubezpečili, že vaše formuláre na mobilných zariadeniach fungujú hladko.

Poďme do práce!

Prečo je dôležité, aby vaše formuláre boli priateľské pre mobilné zariadenia

Formy majú všetky tvary a veľkosti. Najčastejšie budete vybavovať kontaktné formuláre:

príklad kontaktného formulára.png

Registračné (predplatné) formuláre sú tiež veľmi populárne, pretože vám umožňujú zbierať e-maily a zacieliť ich počas kampaní:

cieľové e-maily počas campaigns.png

Formuláre však možno použiť na všetky druhy iných účelov. Môžete napríklad zbierať informácie pomocou on-line prieskum alebo dotazník , v takom prípade budete potrebovať formuláre, ktoré umožňujú používateľom zadávať odpovede.

Inými slovami, formuláre sú veľmi všestranné a takmer všetky weby používajú formuláre tak či onak. Preto je nevyhnutné, aby boli vaše formuláre ľahko použiteľné (pokiaľ nechcete svojim návštevníkom poskytnúť frustrujúci zážitok).

Používanie formulárov zo stolového alebo prenosného počítača je zvyčajne veľmi jednoduché. Máte plnú myš a klávesnicu, takže výber poľa, ktoré chcete použiť, a zadávanie údajov by nemal byť problém. Prehliadanie webu zo smartphonu alebo iného kompaktného zariadenia má však komplikácie.

Pri práci prstami na malej obrazovke môže byť interakcia s formulármi niekedy zdrvujúca kvôli zlým rozhodnutiam o dizajne. Tomu by ste sa mali pri svojich vlastných dizajnoch vyhnúť. Ak totiž používatelia mobilných zariadení nemôžu interagovať s vašimi formulármi, môžete prísť o konverzie, privedenie potenciálnych zákazníkov alebo iba otravovať návštevníkov.

Je tiež nevyhnutné pochopiť, že mobilná prevádzka je teraz, ak nie viac, dôležitá ako zdroje z počítačov. Mobilná prevádzka ju v posledných rokoch v skutočnosti predbehla. To znamená, že navrhovanie webových stránok vhodných pre mobilné zariadenia by malo byť vašim hlavným cieľom pri začatí nového projektu.

5 tipy na navrhovanie ľahko použiteľných mobilných formulárov

Našťastie, navrhovanie formulárov vhodných pre mobilné zariadenia nie je také ťažké, ako by ste si predstavovali. Vo väčšine prípadov si musíte uvedomiť niektoré základné zásady a pred použitím ich formulárov dôkladne otestovať. Povieme si, ako na to!

1. Vymažte všetky nepotrebné časti

Čím viac polí váš formulár obsahuje, tým ťažšie sa bude používať v mobilných zariadeniach. Používanie formulárov v mobilných zariadeniach je skutočne jednoduchšie. Znížením počtu polí alebo sekcií zahrnutých vo vašich formulároch môžete maximalizovať svoje šance, že ich návštevníci vyplnia.

Tu je rýchly príklad a Kontaktný formulár s niektorými ďalšími poliami, ktoré nie sú potrebné na mobilnom zariadení:

polia nie sú potrebné na mobile.png

Vo väčšine prípadov všetko, čo potrebujete na skvelé Kontaktný formulár je meno, e-mail a telo správy, ktorú chcete dostávať. Všetko ostatné závisí od typu webovej stránky, ktorú používate, a od toho, či sa snažíte zbierať potenciálnych zákazníkov.

Čím menej polí formulár má, tým ľahšie ich budú mobilní návštevníci môcť používať. Nakoniec, výber poľa pomocou dotykovej obrazovky môže byť zložitý, bez ohľadu na to, ako dobre navrhnutý, aby sa minimalizoval počet zásahov, ktoré musia používatelia urobiť.

Vaším cieľom v tomto okamihu je skontrolovať existujúce formuláre na vašom webe. Prejdite každú z ich častí a zistite, či skutočne potrebujete nejaké ďalšie polia okrem tých, ktoré sú uvedené vyššie. Ak existuje nepotrebné pole, jednoducho ho vymažte.

2. Ak je to možné, použite rozbaľovacie zoznamy

Väčšine z nás vyhovuje písanie na mobilných zariadeniach a používanie dotykových obrazoviek. Odoslanie SMS priateľovi a vyplnenie a Kontaktný formulár sú dve veľmi odlišné skúsenosti. S nimi je veľká šanca, že budete frustrovaní, ak budete musieť zadávať veľa informácií.

Jedným zo spôsobov, ako vášmu mobilnému návštevníkovi uľahčiť život, je zjednodušiť výber prvkov vašej lokality. Aby ste mali predstavu, o čom hovoríme, využime náš predchádzajúci príklad rezervovať reštaurácia:

urobiť rezerváciu.png

Ak chcete urobiť a rezervovať, pravdepodobne budete musieť zanechať meno, e-mail, telefón  et  uveďte čas, ako aj počet prítomných osôb. Existujú dva spôsoby, ako môžete vytvoriť pole formulára na overenie času dňa. rezervovať:

  1. Nakonfigurujte pole, ktoré akceptuje iba číselné položky.
  2. Navrhnite rozbaľovací zoznam obsahujúci všetky dostupné časy na rezerváciu.

Ako si dokážete predstaviť, druhá z nich je pre používateľov mobilných telefónov príjemnejšia. Pri tomto prístupe nemusia zadávať čísla a z možností, ktoré zahrnete, si môžu vybrať, čo im najviac vyhovuje.

Myšlienka pozrieť sa na svoje formuláre a zistiť, či obsahujú polia, ktoré by ste mohli nahradiť rozbaľovacími ponukami. Nebude to tak vždy, pretože na zhromažďovanie mien alebo e-mailov nemôžete použiť rozbaľovacie ponuky, ale môžete použiť aj iné možnosti.

Nech už sú ich prípady použitia akékoľvek, chcete sa uistiť, že vaše rozbaľovacie ponuky obsahujú možnosti, ktoré je ľahké vybrať z mobilných zariadení. Inými slovami, urobte ponuku dostatočne veľkú, aby niekto nemusel ťuknúť, aby si vybral správnu možnosť.

3. Uistite sa, že tlačidlá na odoslanie sa dajú ľahko dotknúť

Tento tip je celkom jednoduchý, ale treba ho ešte spomenúť. Každý formulár, ktorý navrhnete, by mal obsahovať spôsob, ako používatelia potvrdia, že chcú zadané údaje odoslať. Vo väčšine prípadov to znamená vytvorenie tlačidla na odoslanie:

vytvorte tlačidlo odoslania.png

Pri používaní bežného počítača je kliknutie na tlačidlo odoslať najprirodzenejšou vecou na svete. Na mobile sme sa však stretli s niekoľkými formulármi, kde je oveľa ťažšie stlačiť tlačidlo.

Ak vaši návštevníci nemôžu predložiť informácie, ktoré zadali do vašich formulárov, bude všetko vaše úsilie zbytočné. Navyše nič nevyzerá tak neprofesionálne ako gombík odoslať  to nefunguje podľa očakávania.

Ak chcete navrhnúť lepšie tlačidlá na odosielanie pre mobilné zariadenia, je potrebné zvážiť tri tipy:

  1. Uistite sa, že sú dostatočne veľké, aby ste na nich mohli ľahko klepnúť na mobilnom zariadení.
  2. Tlačidlá neumiestňujte príliš blízko k iným položkám, aby sa ich používatelia nedotkli správne.
  3. Zvýraznite svoje tlačidlá, napríklad pomocou kontrastných farieb alebo kreatívnej typografie.

Okrem toho budete tiež chcieť otestovať svoje tlačidlá predtým, ako bude váš web zverejnený. O chvíľu pôjdeme podrobnejšie, ako to urobiť. Zatiaľ si povieme niečo o výkone.

4. Uistite sa, že sa vaše formuláre načítavajú rýchlo

V mnohých našich článkoch hovoríme veľa o výkonnosti webových stránok a nie je to preto, že potrebujeme rýchlosť. Ide o to, že väčšina ľudí nemá rada pomalé webové stránky, čo dáva dokonalý zmysel.

Pri rýchlejšej rýchlosti internetu môže byť ťažké čakať na príliš dlhé načítanie webových stránok. Rýchlosť mobilného internetu sa navyše zvyčajne líši oveľa viac ako bežné domáce pripojenie. To znamená, že váš web bude musieť byť vysoko optimalizovaný pre mobilné zariadenia, ak chcete týmto používateľom urobiť radosť, pretože nie všetci budú mať prístup na internet (t. J. Rýchly).

Tento konkrétny tip sa môže vzťahovať na celý váš web, ale je tiež dôležitý pre mobilné stránky, ktoré zobrazujú vaše formuláre. Ak sa načítanie týchto častí vášho webu trvá príliš dlho, vy stratiť konverziu a príležitosti na spojenie s vašimi návštevníkmi.

Načítanie webovej stránky by zvyčajne nemalo trvať dlhšie ako dve sekundy. Akonáhle prekonáte tento limit, miera okamžitých odchodov má tendenciu dramaticky sa zvyšovať, čo je pre vás strašná správa a vzhľadom na povahu prehliadania v mobile je najlepšie tento čas udržiavať na čo najnižšej úrovni. .

S ohľadom na túto skutočnosť existuje mnoho spôsobov, ako zlepšiť celkovú výkonnosť vašich stránok. Môžete napríklad prejsť na lepší plánubytovanie, používajte responzívnu tému optimalizovanú pre rýchlosť a skomprimujte svoje obrázky. Tieto samozrejme pomôžu všetkým používateľom, ale budú užitočné najmä pre tých, ktorí používajú menšie zariadenia.

5. Otestujte svoje formuláre pred publikovaním

Vzhľadom na to, že formuláre sú kľúčovou súčasťou väčšiny webových stránok, má zmysel si ich pred zverejnením poriadne otestovať. V prípade WordPress je tento proces veľmi jednoduchý. Môžete pokračovať v navrhovaní konkrétnych stránok tak, aby zobrazovali vaše formuláre, a až do úplného otestovania ich zverejniť.

Akýkoľvek doplnok alebo tému, ktoré chcete použiť, je samozrejme na vás (pokiaľ to môže pomôcť pri vývoji mobilných webov). Pokiaľ však ide o fázu testovania, odporúčame vám, aby ste to vždy zjednodušili a používali nástroje ako napr outils rozvoja chróm robiť prácu.

Poďme na krátky príklad. Ak používate Chrome, pokračujte v prehliadaní stránky pomocou formulára, ktorý chcete otestovať. Potom kliknite pravým tlačidlom myši kamkoľvek na tejto stránke a vyberte túto možnosť preskúmať . Chrome zobrazí sadu nástrojov, pomocou ktorých môžete skontrolovať a upraviť zdrojový kód stránky, vpravo a vľavo. Môžete si pozrieť ukážku jej vzhľadu z mobilného zariadenia:

Prehľad vývojových nástrojov prehliadača Chrome.

V hornej časti obrazovky môžete pomocou ponuky prepínať medzi rôznymi rozlíšeniami. Chrome obsahuje nastavenia pre niekoľko populárnych mobilných zariadení, môžete však tiež zadať vlastné rozlíšenie.

V tomto okamihu by ste mali skontrolovať vzhľad a správanie kontaktného formulára na viacerých zariadeniach. Vezmite si príklad uvedený nižšie - formulár funguje dobre, ale vidíte, že sa nehodí tak, ako by mal. Venujte zvláštnu pozornosť najmä textu a ikonám, ktoré sú príliš blízko k okraju obrazovky:

formulár pre mobil.png

Jedným zo spôsobov, ako zabrániť tomuto problému, je zjednodušiť formuláre, ako sme spomenuli v prvom tipe. V nasledujúcom príklade formulár používa viac rozbaľovacích zoznamov a vyžaduje iba tri polia. Vďaka tomu sa ľahko používa a čo je dôležitejšie, forma je taká jednoduchá, že sa musí perfektne hodiť pre všetky zariadenia:

Príklad formulára bez problémov so škálovaním.

Ak máte problémy s niektorým z vašich formulárov, musíte ich zjavne okamžite vyriešiť. V opačnom prípade riskujete odcudzenie svojho mobilného publika, čomu sa najskôr snažíme vyhnúť!

záver

Zaistenie, aby bol váš web kompatibilný s mobilnými zariadeniami, je kľúčom k udržaniu premávky a nie k frustrácii vašich návštevníkov. Konkrétne by vaše formuláre mali byť ľahko použiteľné na mobilných zariadeniach, ak nechcete prísť o príjem správ alebo zhromažďovanie cenných potenciálnych zákazníkov.

Pri príprave formulárov priateľských pre mobilné zariadenia je tu päť tipov na zjednodušenie života:

  1. Vymažte všetky nepotrebné časti.
  2. Ak je to možné, použite rozbaľovacie zoznamy.
  3. Uistite sa, že tlačidlá na odoslanie sú ľahko stlačiteľné.
  4. Uistite sa, že sa vaše formuláre načítavajú rýchlo.
  5. Otestujte svoje formuláre skôr, než ich zverejníte.