Mobilné formuláre: ako nahradiť rozbaľovacie zoznamy. Typy vstupu HTML5. Prepínače pre podobné, ale vzájomne sa vylučujúce voľby

:

príklady

姓:

姓:

Skús"

Poradenstvo: Ak chcete zabrániť tomu, aby jQuery Mobile automaticky pridával štýl do interaktívnych prvkov, použite atribút data role = "no".

Opýtajte sa ktoréhokoľvek dospelého, bez čoho nemôže vyjsť z domu, a on vám odpovie: kľúče, peňaženku, mobil. S nárastom výrobcov mobilných zariadení a s uvedením nových a vylepšených modelov je jednoducho nemožné nepodľahnúť tomuto rastúcemu trendu.

Údaje za rok 2014 ukazujú, že len v Spojených štátoch má mobilný telefón 90 % dospelých, z toho 58 % sú majitelia smartfónov. 42 % Američanov vlastní tablet. eMarketer vo svojej správe predpovedal, že do konca roka 2014 budú ľudia na celom svete používať približne 1,75 miliardy smartfónov.

Tieto čísla len potvrdzujú, že mobilné zariadenia sa dnes zmenili z luxusného tovaru na našu každodennú potrebu. Ak v minulosti boli telefóny iba nástrojom na komunikáciu, teraz sa na ne spoliehame, keď pracujeme, relaxujeme alebo ideme nakupovať.

Optimalizácia formulárov pre mobilné zariadenia

Vzostup smartfónov nie je len uľahčenie nakupovania pre nakupujúcich. Stalo sa pekný doplnok na už rastúci priemysel online nakupovania. Postupom času nielen online, ale aj offline podniky začali chápať dôležitosť mobilné telefóny, spolu s inými kanálmi propagácie, pri získavaní zákazníkov.

Formuláre spätná väzba hrajú obrovskú úlohu v online nakupovaní, sú tiež základným prvkom mobilnej platformy. Zvyčajne sa s nimi stretávame pri nákupe a stránka od nás žiada konkrétne informácie, ako je meno, adresa, telefónne číslo a informácie o kreditná karta... Pre mnohých nakupujúcich je však vypĺňanie formulárov zdĺhavá záležitosť, ktorá môže zmeniť ich záujem naprázdno. Navyše, online nakupujúci majú tendenciu čeliť problémom, ako je nedostatok času alebo slabé internetové pripojenie, čo môže negatívne ovplyvniť konverzný pomer vašej mobilnej stránky.

Nižšie je uvedených 10 spôsobov, ako zrýchliť výkon mobilných transakcií vašich zákazníkov a zároveň im spríjemniť online nakupovanie.

1. Do formulára uveďte len tie najdôležitejšie detaily

Ak nemáte trpezlivosť na vypĺňanie veľkého množstva formulárov na webovej stránke pri nakupovaní online, vaši zákazníci pravdepodobne zažívajú to isté. Je rozdiel vyplniť Full-On formulár a vyplniť jednoduchý formulár na nákup niečoho z internetového obchodu. V porovnaní s tou druhou môže byť prvá verzia formulára dosť otravná a riskujete, že o klienta prídete, keď ho vypĺňanie omrzí, najmä ak vidí, že potrebuje uviesť tri rôzne telefónne čísla.

Uľahčite si mobilné online nakupovanie tým, že svojim zákazníkom poskytnete jednoduchý, no úplný objednávkový formulár. Naozaj sa pýtajte iba používateľov dôležitá informácia ako napr celé meno, adresa Email, telefónne číslo, informácie o dodaní a informácie o kreditnej karte. Môžete tiež povoliť rozbaľovací zoznam štátov alebo krajín, do ktorých odosielate, alebo ešte lepšie, ak vaša mobilná aplikácia vyžaduje od zákazníkov geolokáciu. Ich adresu tak možno získať rýchlo a presne.

2. Použite výškové zarovnanie pre štítky a vstupné polia.

Smartfóny majú v porovnaní s počítačmi obmedzenú zobrazovaciu plochu, preto je veľmi dôležité, aby ste navrhli tvar, ktorý túto oblasť zväčší. Jedným zo spôsobov, ako to urobiť, je použiť vertikálne zarovnanie pre polia formulára. Vidíte, keď sa používa for forma horizontálne zarovnanie, existuje možnosť, že sa na obrazovku smartfónu nezmestia všetky informácie a štítok alebo vstupné pole sa môže stratiť. Objednávkové formuláre, ako sú tieto, môžu vyzerať pre kupujúcich ťažkopádne, čo môže znížiť ich záujem.

Na druhej strane, ak sú štítky a vstupné polia vertikálne, vaši zákazníci budú môcť okamžite vidieť požadované informácie vrátane tých, ktoré je potrebné vyplniť. To im pomôže uistiť sa, že obchod je bezpečný. Toto usporiadanie tiež umožní kupujúcim, aby nevynechali žiadne vstupné pole, alebo ešte horšie, aby znova vyplnili formulár.

Navyše to minimalizuje vizuálny neporiadok vo vašich formulároch. Tlačidlá "Čo je to" a "Viac" môžu byť umiestnené v mobilnej verzii vašej stránky. Ak je potrebné umiestniť tieto tlačidlá do formulára, usporiadajte ich tak, aby zákazníkov neodvádzali od nákupu.

3. Použite rozbaľovacie ponuky a rozbaľovacie zoznamy

Ďalším obmedzením spôsobeným obmedzenou oblasťou zobrazenia na mobilnom zariadení je nekonečné rolovanie ktoré musíme riešiť, aby sme si mohli pozrieť celú stránku alebo vyplniť formulár. Aj keď je rolovanie obrazovky bežné, používatelia smartfónov by ho najradšej mali rýchlymi prostriedkami nakupovanie tovaru cez internet.

Používanie rozbaľovacích ponúk a rozbaľovacích zoznamov vám môže pomôcť skrátiť čas, ktorý vaši zákazníci strávia vypĺňaním formulárov. Namiesto toho, aby ste nútili kupujúcich vyberať si obrovské množstvo možnosti, môžete jednotlivé produkty zoskupovať do kategórií. Rozbaľovacie ponuky sú tiež užitočné na prepojenie popisov kľúčových produktov na jednu stránku. Len nezabudnite, že ich nesmiete začať popisovať, keď sa ponuka rozbalí.

4. Používajte adekvátne zoznamy

V prípadoch, keď rozbaľovacie alebo rozbaľovacie ponuky nevyhovujú vašim formulárom na mobilnej lokalite, máte dve skvelé možnosti pre mobilné formuláre: prediktívne vstupné polia vyhľadávania a zatvorené rozbaľovacie zoznamy.

Vstupné polia prediktívneho vyhľadávania umožňujú vašim zákazníkom vyhľadať požadovaný produkt alebo službu Kľúčové slová a tiež uvádza všetky podobné výsledky. Tento typ formulára je ideálny v prípadoch, keď má byť vyhľadávanie dlhé, alebo keď existuje množstvo produktov, ktoré nezapadajú do samostatných kategórií. Uzavreté rozbaľovacie zoznamy na druhej strane fungujú dobre na uvádzanie konkrétnych položiek v ponukách v špecifickom poradí, napríklad v abecednom alebo chronologickom poradí.

5. Jednoduché zadávanie vstupných údajov

Pravdepodobne ste sa už stretli so vstupnými poľami vo formulároch na webe aj na mobilných stránkach. Niekedy sa delia na 2-3 časti, ako meno, adresa, telefónne číslo. Hoci to funguje na stránkach, ich mobilné verzie podobné použitie formy nie sú vždy vhodné.

Rozdelenie vstupov si častejšie vyžaduje, aby zákazníci na mobilných zariadeniach vyplnili všetky tri (alebo dve) vstupné polia, aby mohli jednoducho reagovať na jeden štítok. Ak to rovnakým spôsobom povolíte, vaši klienti môžu stratiť záujem o tento proces. Navyše oddelenie vstupných údajov môže byť klientmi vnímané nejednoznačne, alebo dokonca zmätené. Pri navrhovaní formulárov pre mobilné platformy, použite jednoduchšie vstupné polia namiesto ich oddeľovania. Napríklad namiesto dvoch oddelených polí pre meno a priezvisko použite jedno. Pomôže to vašim zákazníkom rýchlejšie vyplniť formulár.

6. Naformátujte tlačidlá formulára

Tlačidlo "Potvrdiť" je posledný krok v online nakupovaní, ako aj najviac dôležité tlačidlo v tvare. Ak áno, mali by ste to zariadiť tak, aby vaši zákazníci zostali zapojení do procesu vypĺňania formulára.

Zatraktívnite tlačidlo Overiť tak, že ho nastavíte na 1/3 šírky svojho tvaru alebo ho natriete jasnou farbou. A namiesto slov „Potvrdiť“ alebo „Odoslať“, použite výrečnejšie výzvy na akciu, ako napríklad „Zaregistrujte sa teraz“ alebo „Odošlite žiadosť“.

Vyhnite sa však aj použitiu svetlé farby alebo vytváranie príliš pohyblivých tlačidiel, pretože to odvádza pozornosť vašich zákazníkov od klikania. Môžete použiť jemnú zmenu farby alebo vznášanie sa po kliknutí na tlačidlo, aby vaši zákazníci vedeli, že transakciu ukončili.

7. Nastavte mierku pomocou metaznačky výrezu

Prehliadanie z mobilného zariadenia môže zákazníkom buď vyhovovať, alebo si musia stránku neustále zväčšovať, no ak to náhodou spravia, môžu sa na stránke stratiť. Môžete to ovládať pomocou metaznačky zobrazenia vo formulároch. To umožní vašim zákazníkom vyhnúť sa náhodnému zmenšeniu stránky, alebo čo je horšie, úplnej strate tvaru.

8. Poskytnite možnosť ukladania údajov

Nakupovanie pomocou mobilných telefónov môže byť pre niektorých zákazníkov náročné, pretože existuje riziko stlačenia tlačidla Späť alebo náhodného opätovného načítania stránky, a ak zmiznú všetky vyplnené informácie, váš kupujúci pravdepodobne od zmluvy odstúpi. Tejto možnosti sa môžete vyhnúť tak, že svojim klientom poskytnete možnosť „Otvoriť na novej karte“, keď kliknú na akýkoľvek odkaz mimo formulára.

Navyše v prípadoch, keď sa už používatelia nemôžu vrátiť predchádzajúce strany, vytvorte okno s upozornením a tlačidlami ako „Súhlasím“, „OK“ alebo „Zrušiť“. Budete tak môcť upozorniť svojich zákazníkov, či sa ich údaje uložili na webovú stránku alebo do prehliadača, a tak im pomôcť rozhodnúť sa prejsť k pokladni.

9. Pomôžte zákazníkom sledovať ich pokrok

Nie všetci kupujúci majú záujem o vyplnenie formulárov spätnej väzby. V tomto prípade sa vám bude hodiť vymyslieť spôsob, ako zákazníkom ukázať, že sú už takmer na samom konci s vypĺňaním. Môžete to urobiť umiestnením lišty načítania v hornej časti formulára alebo pomocou jednoduchej chronológie a percent, ktoré vám ukážu, kde sa nachádzajú. Nezabudnite obmedziť počet krokov, aby ste svojim zákazníkom ušetrili čas.

10. Urobte rýchle načítanie formulára

Ďalším faktorom, na ktorý by ste nemali zabúdať, je rýchlosť načítania vášho mobilného formulára. Ak sa stránka načítava chvíľu, váš klient môže byť zmätený. Samotná skutočnosť, že vaši používatelia dosiahli vyplnenie formulára, ukazuje, že sú pripravení zadať objednávku. Nesklamte ich zle načítanými stránkami. Rýchlosť načítania formulárov závisí aj od počtu prvkov, ktoré na stránku umiestnite, preto buďte opatrní pri používaní príliš veľkých obrázkov.

A ako vždy, otestujte svoje formuláre na všetkých systémoch a zariadeniach

Rozmanitosť mobilných zariadení a ich rozhraní nás dnes núti navrhovať formuláre pre každé z nich. Preto sa uistite, že ste svoje formuláre otestovali odlišné typy mobilných zariadení, berúc do úvahy rozdiely operačné systémy, veľkosti a prehliadače. Testovaním môžete nielen vylepšiť svoju formu, ale tiež sa uistiť, že funguje na všetkých dostupných zariadeniach.

Vyhľadávanie

Na vašu žiadosť formulár pre mobilnú stránku nájdené 2833 výsledky

• Vývoj dobrej navigácie pre vašu webovú stránku je jedným z kľúčových faktorov dobrý vývoj projekt a skutočnosť, že návštevníci začnú objavovať stránku, aby skontrolovali všetky zákutia a miesta (záložky, obrázky, text atď.). Sledujte a inšpirujte sa svojimi skvelými projektmi.

  Zhoda: 7

• Pri navrhovaní mobilné aplikácie developera čakajú rôzne nástrahy, ktoré môžu anulovať všetky snahy. V túto lekciu Opíšeme si 6 najzákernejších a najčastejších chýb pri práci na verziách pre mobilné zariadenia.

  Zhoda: 7

• V tomto návode zistíme, ako vytvoriť originálny formulár správy vo forme písacieho stroja. Všetky základné funkcie tejto zastaranej jednotky budú starostlivo obnovené pomocou CSS a jQuery.

  Zhoda: 7

• Tu sa dozviete celú pravdu o stránkach elektronický obchod: Podľa najnovšieho výskumu v tejto oblasti najmenej 59,8 % potenciálnych kupujúcich odmieta zaplatiť za to, čo napísali do košíka (MarketingSherpa 59,8 %, SeeWhy 83 % a MarketLive 62,14 %). Hlavná otázka: prečo zákazníci tak často opúšťajú svoje nákupy? Ide o to, že existuje niekoľko zásadných chýb, ktorých sa vývojári webových stránok elektronického obchodu dopúšťajú veľmi často. Či existuje a všeobecné zásady ktoré používateľom sťažujú nákup našich produktov? A existuje nejaký zmysluplný spôsob, ako zlepšiť predajné čísla toho, čo predávame?

  Zhoda: 7

• Najkrajšou inováciou v HTML5 je možnosť pridať predvolený text do polí formulára. Atribút zástupného symbolu umožňuje zobrazenie špecifického textu na poliach formulára, keď sú prázdne alebo rozostrené (keď je pole aktívne, je vymazané). Ide o štýlový trik, ktorý však stále nepodporujú všetky prehliadače. V tomto návode vám ukážem, ako pomocou Modernizr zistiť, či ho daný prehliadač podporuje, a ak nie, potom dynamicky vyplniť polia formulára predvoleným textom pomocou jQuery.

  Zhoda: 7

• Modulárna mriežka môže byť veľkou pomocou pri vytváraní webovej stránky. Poskytuje vizuálnu štruktúru pre prvky lokality aj médium pre obsah. Náhodou je jednoduchým spôsobom vytvoriť vyváženú a konzistentnú webovú stránku.

  Zhoda: 7

• Pri vývoji projektového rozhrania vždy chcete, aby bolo pre používateľa jednoduché a zrozumiteľné. Nezáleží na tom, čo vaša stránka ponúka, musíte nájsť rovnováhu medzi jednoduchosťou a funkčnosťou. Je veľmi dôležité zabezpečiť, aby používateľ mohol ľahko nájsť a pochopiť ktorúkoľvek z funkcií vášho projektu, ideálne bez načítania ďalších stránok.

  Zhoda: 7

• Predstavte si, akú búrku emócií zažije používateľ, keď mu na odoslanie formulára s veľkým objemom ručne vyplnených polí stačí pridať pár znakov a zrazu sa stratia všetky údaje. Strašné. Pokiaľ, samozrejme, neexistuje spôsob, ako obnoviť údaje, aby ste sa vyhli osudu Sizyfa.

V tomto článku sa pozrieme na niektoré nové vylepšenia formulára HTML5 a analyzujeme, ako prispievajú k zlepšeniu. používateľské rozhranie na mobile. Konkrétne uvidíme, ako možno formuláre rozšíriť o ďalšie typy vstupu, ktoré ponúka HTML5, a ukážeme vám, čo môžete očakávať od rôznych mobilných prehliadačov.

Typy vstupu HTML5

HTML5 má veľa nových typov vstupu pre formuláre. Tieto typy vstupov vám umožňujú lepšie kontrolovať a overovať vstupné údaje. Niektoré z nich sú obzvlášť užitočné pre mobilných používateľov ktorí majú často ťažkosti s HTML práca Vstup. Úplný zoznam typov vstupných údajov je uvedený nižšie:

• farba - výber farby
• dátum - výber dátumu
• datetime - výber dátumu a času
• email – overenie masky emailu
• číslo - vstupné číslo
• rozsah - posúvač rozsahu
• vyhľadávanie - vyhľadávacie pole
• tel - overenie masky telefónu
• čas - výber času
• url – overenie adresy URL

Samozrejme tento zoznam nekompletné. Nepatria sem typy, ktoré sú akceptované normou, no ich podstata ešte nie je jasná. V tomto článku s príkladmi zvážime najobľúbenejšie a najrelevantnejšie z vyššie uvedených typov.

1. Typ vstupu farba

Ak je tento typ vstupu podporovaný, prehliadač používateľa spustí vstavaný nástroj na výber farieb klientske zariadenie... Vybraná farba sa zobrazí v príslušnom hexadecimálnu hodnotu RGB.

< input type = "color" / >

Príklad práce:

Štýl kontextového okna bude závisieť od vášho prehliadača. Kliknutím na tlačidlo uvidíte, ako to funguje.

Vyberte si farbu:

bohužiaľ, podpora tohto typu mobilné prehliadače zanecháva veľa želaní. Zo všetkého, čo existuje správne zobrazenie možno nájsť iba v Opera Mobile a Chrome Android... Vo všetkých ostatných prehliadačoch sa zobrazí prázdne textové pole. Toto stojí za to mať na pamäti. Prípadne môžete paletu načrtnúť v JS alebo použiť pluginy.

2. Dátum typu vstupu

Ak to prehliadač podporuje, poskytuje pohodlný blok na výber dátumu.

< input type = "date" / >

Príklad práce:

Výber dátumu:

Upozorňujeme, že zadanie dátumu, ako aj miestne varianty dátumu a času a dátumu a času, ponúkajú užitočné atribúty, ako napríklad min a max, ktoré môžu obmedziť a overiť používateľský vstup. Ukážeme si to nižšie v texte.

Typ Vstup HTML Dátum je podporovaný takmer všetkými prehliadačmi. Výnimkou je Opera Mini a predvolený prehliadač Android.

3. Typ vstupu datetime a datetime-local

Tento typ vstupu umožňuje používateľovi špecifikovať dátum a čas vo vhodnom formáte. Ak je podporovaná, zobrazí sa ako pôvodný widget dátumu a času zariadenia. Rozdiel medzi špecifikované typy vstup je taký, že prvý je viazaný na svetový čas a druhý neobsahuje žiadne informácie o časovom pásme.

< input type = "datetime-local" / >

Príklad práce:

Výber dátumu a času:

Nie je podporované v IE Mobile a Opera Mini. V iných populárnych prehliadačoch (mobilných) typ funguje viac-menej správne, ale nie sú zriedkavé prípady chýb a závad. Myslite aj na to a nezabúdajte na záložné zdroje JavaScriptu.

4. Typ vstupu e-mail

Tento typ nevyžaduje zastúpenie. Používajú ho už mnohí a podporujú ho takmer všetky prehliadače.

< input type = "email" / >

Príklad práce:

Zadajte svoju emailovú adresu:

Pred odoslaním prehliadač skontroluje správnosť vyplneného poľa a v prípade neplatného vstupného formátu informuje užívateľa. Výpočet je založený na nasledujúcom výraze (text) @ (doména)

5. Zadajte číslo typu vstupu a tel

Toto je ďalší typ, ktorý si nevyžaduje veľkú diskusiu. V mobilnom prostredí je to však veľmi užitočný nástroj... Použite ho v prípadoch, keď sa používateľovi zobrazí iba množina čísel. V tejto situácii bude ponúknutý užívateľsky prívetivé rozhranie numerická klávesnica.

Príklad práce:

Výber hodnoty:

Predvolený rozsah vo väčšine prehliadačov je medzi 0 a 100. To znamená, že poloha posúvača úplne vľavo je 0 a poloha úplne vpravo je 100. Rozsah môžete zmeniť pomocou atribútov min a Max. Hodnotu kroku môžeme nastaviť aj cez atribút step. Na určenie rozsahu od 5 do 50 v prírastkoch po 5 použijeme:

< input type = "range" min = "5" max = "50" step = "5" / >

Podpora od všetkých populárne prehliadače okrem Opery Mini.

7. Overenie formulára

Je veľmi výhodné nastaviť špeciálne HTML atribút Vstup na overenie vstupných údajov. Napríklad chceme vytvoriť pole, ktoré musí byť vyplnené: