Mobilné formuláre: ako nahradiť rozbaľovacie zoznamy. Poskytnite možnosť ukladania údajov. Prečo je zarovnanie názvov polí doľava pre mobilné zariadenia zlé

  • 20.04.2019

JQuery Mobile automaticky automaticky pridá štýl do formulárov HTML, čím ich urobí atraktívnejšími a príjemnejšími na dotyk.

Štruktúra formulára JQuery Mobile

JQuery Mobile na použitie CSS na štýl prvkov HTML formulár aby boli atraktívnejšie a jednoduchšie na používanie.

V jQuery Mobile môžete použiť nasledujúce položky formy:

  • pole na zadávanie textu
  • Vyhľadajte vstupné pole
  • tlačítko na Rádiu
  • začiarkavacie políčko
  • Vyberte Menu
  • posúvač
  • Otočný prepínač

o pomocou jQuery Mobilný formulár, mali by ste vedieť:

  • <Форма>prvok musí mať atribút way a action
  • Každý prvok formulára musí mať jedinečný atribút „ID“. ID musí byť jedinečné na všetkých stránkach v rámci lokality. To je preto, že Jquery Mobile jednostránkový navigačný mechanizmus je prezentovaný tak, že súbor rôzne stránky súčasne
  • Každý prvok formulára musí mať označenie. Karta Nastavenia pre vlastnosti, aby sa zhodovali s ID prvku

príklady

method = "post" action = "demoform.html" >




Skús"

Ak chcete štítok skryť, použite triedu UI-Hidden Accessible. Toto sa často používa, keď pripisujete prvku ako zástupnú značku:

príklady






Skús"

Poradenstvo: Pomocou atribútu net-BTN = "true" môžeme pridať tlačidlo na vymazanie obsahu vstupného poľa (X napravo od vstupného poľa):

príklady

<Ярлык = "имя_файла">Názov:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">


Skús"

Ikona formulárov JQuery Mobile

Štandardný kód HTML tlačidla formulára<вход>položka (tlačidlo, reset, odoslať). Automaticky vykreslia štýly a automaticky sa prispôsobia mobilné zariadenia na plochu:

príklady


<Тип входного = "Сброс" значение = "кнопка сброса">


Skús"

Ak potrebujete pridať ďalšie štýly<вход>môžete použiť nasledujúce údaje tabuľky- * atribúty:

Tlačidlo na pridanie ikony:


<Тип входного = "Сброс" значение = "кнопка сброса">


Skús"

kontajnerové pole

Aby štítky a prvky formulára vyzerali vhodnejšie širokouhlou obrazovkou prosím, príp

prvok obklopujúci prvok štítku / formulára sa používa s triedou "UI-fields include".
:

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".

UX dizajnér v IBM Zoltan Collin.

Do záložiek

Zoltan Collin

Rozbaľovacie formuláre sa zdajú byť jasným návrhovým rozhodnutím: ich vytváranie je jednoduché a lacné, nezaberajú príliš veľa miesta, automaticky overujú zadané informácie, podporujú ich všetky prehliadače a platformy a používatelia sú už na ne zvyknutí. .

Dizajnéri najčastejšie používajú rozbaľovacie zoznamy na mieste, ale podľa názoru riaditeľa produkt Google Luke Wroblewski, tento vzor by sa mal používať len ako posledná možnosť.

Pozrime sa na niektoré obmedzenia:

  • Rozbaľovacie možnosti sú neviditeľné, kým používateľ neklikne na formulár alebo sa ho nedotkne. Navyše sa na prvý pohľad nedá predpovedať, koľko riadkov bude v zozname – dva alebo päťdesiat.
  • Výber možnosti z rozbaľovacieho zoznamu je proces pozostávajúci z viacerých krokov, najmä na mobilných zariadeniach: najprv sa musí používateľ dotknúť formulára a otvoriť možnosti, posunúť sa nadol, aby našiel tú, ktorú chce, vybrať ju a zatvoriť zoznam. .
  • Rozbaľovacie zoznamy robia dizajnérov lenivými, je tak jednoduché pridať všetko možné možnosti do jedného zoznamu bez akejkoľvek priority. Z tohto dôvodu je rozbaľovacia ponuka veľmi podobná inej šablóne, ponuke hamburgerov.
  • Listovanie v dlhých zoznamoch, ako napríklad výber krajiny, je nočnou morou. Najmä na mobilných zariadeniach, kde vyhľadávanie pomocou klávesnice zvyčajne nie je dostupné.
  • Na niektorých zariadeniach je pole na zobrazenie možností veľmi malé, takže potiahnutie prstom môže byť nočnou morou.

množstvo viditeľné možnosti zoznam v systéme iOS sa môže zdať mimoriadne bezvýznamný

Dobrou správou je, že existuje veľké množstvo alternatívne prvky na zadávanie údajov, ktoré budú v mnohých prípadoch fungovať lepšie ako rozbaľovacie zoznamy.

Ohodnoťte počet možností

Nepoužívajte rozbaľovacie zoznamy pre riešenia, kde si musíte vybrať jednu z dvoch možností. Skúste namiesto toho začiarkavacie políčko alebo prepínač.

Pre malý počet sa vzájomne vylučujú možnosti urobia vo forme prepínačov alebo tlačidiel Segmented Control. Používateľ okamžite uvidí všetky dostupné možnosti a nebude musieť rozširovať zoznam.

Príklad použitia tlačidiel segmentovaného ovládania

Počet viditeľných možností závisí od šírky obrazovky a dĺžky textu. Nepoužívajte však viac ako päť možností.

Použite filtrovaný rozbaľovací vstupný formulár pre veľké množstvo dobre definovaných možností, keď používateľ presne vie, čo má nájsť.

Aby používatelia neprechádzali celým zoznamom, môžu zadať prvé písmená a vybrať filtrované možnosti

V prípade veľkých a rôznorodých zoznamov je najlepšie použiť existujúce používateľské údaje, aby sa do zoznamu zahrnuli obľúbené odpovede. V tomto prípade si 90 % používateľov bude môcť okamžite vybrať požadovanú možnosť a zvyšných 10 % klikne na možnosť „Iné“, ktorá bude špecifikovaná v ďalšej otázke.

Aj keď Iné nie je najelegantnejším riešením, uprednostnenie môže zlepšiť UX pre väčšinu používateľov.

Ohodnoťte svoj preferovaný vstupný formulár

Jednou z výhod rozbaľovacieho zoznamu je, že používatelia nemusia veľa písať. Ak však potrebujete tlačiť málo a údaje sa vyžadujú pomerne často (napr. osobné informácie), potom je pohodlnejšie ich zadať, ako vyberať zo zoznamu.

Na mobile je najjednoduchšie zadať rok narodenia numerická klávesnica namiesto rozbaľovacieho zoznamu

Všeobecne povedané, numerická klávesnica- väčšina efektívna metóda zadajte číselnú hodnotu.

Aj keď sú hodnoty zoznamu zoradené v poradí, pre používateľov môže byť jednoduchšie ich zadávať ručne, než ich listovať.

Ak je pre vás dôležité potvrdiť údaje, ktoré osoba zadáva, použite vstupný formulár s filtrovaným rozbaľovacím zoznamom.

Napríklad, keď používateľ potrebuje špecifikovať stav, filtrujte zoznam dostupné možnosti možno len jedno písmeno

Je to dôležité najmä vtedy, ak poradie zoradenia položiek zoznamu nie je úplne jasné.

Používatelia napríklad nerozumejú tomu, ako sa triedia meny. Urobte to tak, aby mohli hľadať podľa názvu aj podľa skratky

To isté platí pre zoznam krajín.

Pre celé čísla, ako je počet cestujúcich alebo položiek vo vozíku, je najlepšie použiť stepper. Umožní používateľom zvýšiť alebo znížiť hodnotu jedným kliknutím.

Pre zlomkové čísla alebo premenné umiestnené na stupnici, najlepšie je použiť posuvník.

Ľudia, ktorí používajú vaše mobilná aplikácia alebo webovú stránku, ktorá má konkrétny účel. Zvyčajne to, čo stojí medzi používateľom a jeho cieľom, je forma. V skutočnosti sa formuláre považujú za posledný krok v procese dosahovania cieľov používateľov. Preto je také dôležité, aby používateľ vyplnil formulár čo najrýchlejšie a bez akýchkoľvek prekážok.

Pri vytváraní jednoduchých a priamočiarych formulárov postupujte podľa týchto siedmich pravidiel:

Pravidlo č. 1: Formuláre musia byť v súlade s tým, ako používateľ zadáva svoje údaje

Uistite sa, že polia formulára nie sú prekryté prvkami rozhrania (ako je klávesnica). Keď používateľ vyplní polia formulára, polia sa automaticky presunú nahor.

Pravidlo č. 2: Minimalizujte počet vstupných polí a potrebu používateľa písať

Čím dlhší a zložitejší formulár vyzerá, tým je menej pravdepodobné, že používatelia budú chcieť vyplniť prázdne miesta, najmä na malých obrazovkách. Znížením počtu vstupných polí znížite zaneprázdnenosť formulára, najmä ak požadujete od používateľa veľa informácií.

Udržujte svoj formulár čo najjednoduchší a najkratší

Zníženie počtu polí však nestačí. Mali by ste tiež venovať pozornosť množstvu úsilia, ktoré používateľ vynakladá pri zadávaní údajov. Tlač vyžaduje vysoký stupeň interakcie; je vysoká pravdepodobnosť chyby aj pri zadávaní z plnoformátovej klávesnice (najmä na dotykovej obrazovke).

Preto sa snažte minimalizovať potrebu písania a chyby používateľa.

Inteligentné predvolené nastavenia

Inteligentné predvolené nastavenia pomáhajú používateľom rýchlejšie a presnejšie vyplniť všetky polia formulárov. Môžete napríklad vykonať predbežný výber krajiny pobytu používateľa na základe údajov o jeho geolokácii.

Automatická detekcia umiestnenie ušetrí používateľovi čas na hľadanie hotelovej izby

Prepínače pre podobné, ale vzájomne sa vylučujúce voľby

Keď má používateľ na výber zo zoznamu možností, zvážte použitie horizontálneho zoznamu značiek. To umožňuje efektívnejšie využitie dostupné miesto obrazovke.

Posuvníky pre minimálnu / maximálnu cenu alebo rozpočtový rozsah

Zvážte použitie posúvačov pre polia, ktoré obsahujú ceny alebo rozpočty. Takže používateľ môže posúvať posúvač na minimálnu / maximálnu hodnotu. Posúvač sa dá ľahko horizontálne posúvať a túto akciu si môžete jednoducho prispôsobiť pomocou vizuálnych podnetov. Pamätajte však, že čísla by sa pri interakcii s posúvačom nemali skrývať (najmä pri používaní palcov).

AirBnB tvarovaný posuvník pre výber ceny

Pravidlo č. 3: Hlavičky formulárov musia byť buď nad samotnými poľami, alebo musia byť plávajúce

Nadpisy informujú používateľa o hlavnom účele poľa a čistý text je jedným z hlavných spôsobov, ako sprístupniť používateľské rozhranie.

Prečo by ste nikdy nemali používať textové nadpisy vo vnútri poľa

Hlavičky vo vnútri poľa (alebo zástupný symbol) sú text, ktorý sa nachádza v poli formulára, ktorý zmizne hneď, ako používateľ začne zadávať svoje údaje.

Nadpisy v rámci poľa
Aj keď nadpisy v schránke vyzerajú esteticky dobre, táto výhoda sa často preceňuje. Hlavnou chybou je strata kontextu. Keď používateľ klikne na pole, označenie zmizne. A preto nemôže overiť, či napísal presne to, čo bolo potrebné.

Text vo vnútri poľa nie je najlepšou náhradou vizuálneho názvu

Niektorí používatelia, ktorí vidia, že v poli už bolo niečo napísané, si môžu myslieť, že pole už bolo vyplnené a nemusia zadávať nič iné a môžu vyplnenie ignorovať.

Prečo je zarovnanie názvov polí doľava pre mobilné zariadenia zlé

Hlavné veci, ktoré treba zvážiť pri používaní titulkov zarovnaných doľava na mobilnom zariadení, sú veľkosť obrazovky a pomer strán. Ak je nadpis vľavo oproti poľu, potom pri vertikálnej orientácii obrazovky budete mať veľmi málo miesta pre samotné pole. To vytvára určitú zložitosť pri používaní, pretože nezostáva dostatok miesta na zobrazenie toho, čo používateľ zadá. Neschopnosť vidieť zadaný text spôsobuje používateľom problém, pretože neposkytuje príležitosť rýchlo si všimnúť chybu pri písaní pred odoslaním formulára.

Ak údaje nie sú úplne viditeľné, je veľmi ťažké odhaliť chybu.

Nadpis navrchu alebo responzívny nadpis

Názvy formulárov by mali byť navrchu polí formulára, aby používatelia videli, čo a ako vypĺňajú. Hlavnou výhodou umiestnenia nadpisov formulárov nad formulárom je, že formulár môžete roztiahnuť po celej šírke obrazovky a urobiť ho dostatočne veľkým na zadávanie údajov (napríklad s veľkosťou písma 16 pixelov). Ďalšia výhoda bude možné písať jasné a zrozumiteľné nadpisy (neobmedzené na 1-2 slová).

Hlavnou nevýhodou umiestnenia hlavičiek nad polia je, že zaberá celý formulár viac priestoru vertikálne, čo znamená, že používateľ musí posúvať obrazovku. To však nie je veľmi vážny problém- dnes je každý zvyknutý na rolovanie.

Prípadne môžete použiť responzívne nadpisy, aby ste pochopili, že používatelia vyplnili pole správne. Zástupný text sa predvolene zobrazuje, ale po ťuknutí na pole a zadaní textu sa zástupný text presunie do hornej časti poľa, ako je znázornené nižšie.

Pravidlo č. 4: Overenie poľa formulára sa musí vykonať v reálnom čase

V dokonalom svete by používatelia vyplnili formulár potrebné informácie a úspešne dokončiť túto úlohu. V skutočnom svete používatelia často robia chyby. Používateľom sa zároveň nepáči, že po celom procese vypĺňania polí sa dostanú k tlačidlu „odoslať“ a zistia, že urobili chybu. O úspechu / chybe v poli bude správne informovať užívateľa ihneď po vyplnení. Overovacia správa okamžite informuje užívateľa o správnosti zadaných údajov. Tento prístup umožňuje používateľom opraviť chyby rýchlejšie a bez toho, aby museli čakať na zobrazenie chýb po stlačení tlačidla Odoslať.

Ak očakávate konkrétne odpovede na otázky, musíte okamžite ukázať, čo potrebujete zadať a v akej forme.

Ako riešenie môže poslúžiť aj inline validácia. V príklade nižšie môžete vidieť dobrý príklad ako opraviť prípadnú chybu.

Pravidlo č. 5: Zobrazenie rozloženia klávesnice podľa vstupných údajov

Používatelia uprednostňujú vhodné rozloženie klávesnice v aplikácii. Napríklad, keď používateľ potrebuje zadať číslo kreditná karta, zobraziť iba číselné zadávanie, takže používateľ zadáva namiesto symbolov čísla. Tým sa zvýši rýchlosť plnenia a zníži sa množstvo možné chyby vstup.

Musíte sa o tom presvedčiť daná príležitosť implementované v celej aplikácii, nie v jej jednotlivých častiach.

Pravidlo č. 6: Poskytujte užitočné informácie v kontexte

Niekedy je potrebné poskytnúť relevantné a užitočná informácia zjednodušiť proces odovzdávania formulára používateľom. Takýto sprievodný text by sa však mal používať iba tam, kde je to skutočne potrebné:

  • Pri plánovaní dátumov používatelia oceňujú kontext, ako je napríklad vstavaný kalendár na určenie dní v týždni. Znižuje sa tak nutnosť odhlásenia sa z aplikácie kvôli prezeraniu kalendára, čím sa znižuje riziko odpútania pozornosti používateľa od jeho hlavnej úlohy.

  • Ľudia môžu mať obavy o bezpečnosť svojich údajov, takže im musíte ukázať, že ich údaje nebudú zdieľané s tretími stranami.

Pravidlom dobrej formy je, že výklad nenaťahujte na viac ako 100 znakov.

Pravidlo č. 7: Použite flexibilný formát

Niektoré úlohy vyžadujú od používateľa veľmi presné informácie. Zároveň však požiadavka, aby používateľ poskytol informácie v konkrétnej forme, môže byť v rozpore so zásadami dobrej použiteľnosti. Ak žiadate používateľa, aby do formulára zadal digitálne informácie (napríklad telefónne číslo), buďte flexibilní a vytvorte obrazovky, ktoré podporujú rôzne formáty zadávať a zobrazovať informácie v užívateľsky najprívetivejšej forme, aby sa predišlo chybám.

Nepoužívajte pevný formát zadávania údajov

Výkon

Používateľ môže mať pri vypĺňaní formulára najrôznejšie pochybnosti, preto by ste sa mali snažiť tento proces čo najviac zjednodušiť. Všetky tipy v tomto článku môžu výrazne zlepšiť použiteľnosť vašich formulárov.

Platí pre: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Microsoft Dynamics 365 for Express Phones používa formulár, ktorý je optimalizovaný na použitie s telefónom. Pri úprave formulára si vyberáte, ktoré polia sa majú zobraziť a v akom poradí. Niektoré polia môžete nastaviť len na čítanie, ale nemôžete použiť formulárové skripty vo formulároch CRM pre telefóny Express.

CRM pre expresné telefóny je predošlá verzia telefónnu aplikáciu pre Microsoft Dynamics 365 Najnovšia verzia telefónna aplikácia - Microsoft Dynamics 365 pre telefóny - poskytuje všetky rovnaké funkcie ako aplikácia Microsoft Dynamics 365 pre tablety. Informácie o nastavení Dynamics 365 pre telefóny a tablety nájdete v téme Nastavenie Dynamics 365 pre telefóny a tablety.

Ak máte viacero formulárov, musíte zmeniť poradie formulárov a priradiť im príslušné roly zabezpečenia, aby používatelia videli formuláre, ktoré potrebujú na splnenie svojich úloh.

V tejto časti

Zobraziť mobilný expresný formulár

Vytvorenie mobilného expresného formulára

Zobraziť mobilný expresný formulár

Prvým krokom pri nastavovaní mobilného formulára je pochopiť, ako vyzerá. Spustite na svojom telefóne aplikáciu CRM for Express Phones a prihláste sa do svojej organizácie.

Odtiaľ nájdite entitu, ktorá má formulár, ktorý potrebujete na úpravu a otvorte existujúci záznam alebo vytvorte nový.

Ako vidíte, formulár je zoznam polí.

Poznámka

Zobrazia sa iba polia, ktoré obsahujú údaje.

Kliknutím na ikonu upravíte údaje. Zmeniť v spodnej časti formulára. Označenia polí sú posunuté, aby poskytli viac priestoru na úpravy. Teraz sú zobrazené všetky polia. Ak rolujete nadol, môžete vidieť zoznam všetkých súvisiacich entít, ako sú definované v ich príslušných definíciách vzťahu entít.

Vytvorenie mobilného expresného formulára

Ak niekoľko mobilné formuláre, vytvorte nový, rovnako ako by ste vytvorili akýkoľvek iný typ formulára. Pri vytváraní viacerých formulárov musíte nastaviť poradie formulárov a roly zabezpečenia pre formulár. Používatelia môžu prechádzať medzi formulármi v aplikácii CRM pre telefóny Express; vidia prvú formu v poradí foriem, ktoré im umožňujú ich bezpečnostné roly vidieť. Príklad nájdete v časti Viaceré formuláre.

Prejdite do sekcie možnosti > nastavenie... Prosím vyber Nakonfigurujte systém.

Rozbaľte uzol entity a vyberte entitu, pre ktorú chcete vytvoriť nový mobilný formulár.

Rozbaľte entitu a vyberte uzol Formuláre.

Prosím vyber Vytvorte a Mobil - Express.

Ak sa tento príkaz nezobrazí, entita nemá povolenú podporu CRM pre expresné telefóny. Pre niektoré entity to možno zmeniť. Ďalšie informácie pozrite si časť Povolenie alebo zakázanie možností entity.

Názvy formulárov Mobile Express nemusia byť jedinečné, ale musia byť zmysluplné, aby sa odlíšili od iných formulárov Mobile Express v zozname. Toto je dôležité pri nastavovaní poradia formulárov.

Teraz môžete zmeniť tvar alebo vybrať Uložiť a zavrieťĎalšie informácie: Upravte formulár Mobile Express

Nastavenie poradia formulárov

    V zozname tvarov entity vyberte Formulár objednávky a vyberte Mobil - Express.

    V dialógovom okne Formulár objednávky vyberte tvar a pomocou zelených šípok posuňte tvar nahor alebo nadol v poradí tvarov.

    Zároveň bude vhodné, aby každá mobilná forma mala svoj vlastný zmysluplný názov.

    Prosím vyber OK zatvorte dialógové okno Formulár objednávky.

Poznámka

Vy, ako nositeľ role" Systémový administrátor"alebo" System Customizer ", máte prístup ku všetkým formulárom. Jediná cesta Zobrazte prispôsobenia použité na formuláre Mobile Express v aplikácii Express Phone CRM – slúži na usporiadanie formulárov tak, aby bol novovytvorený formulár navrchu.

Úprava formulára Mobile Express

Na rozdiel od iných formulárov entít nemôžete v editore formulárov Mobile Express vytvoriť nové atribúty vzťahu entít. Formulár Mobile Express však môžete vždy zmeniť v predvolenom riešení.

    V predvolenom riešení rozbaľte pomocou Prieskumníka riešení entity a vyberte entitu s mobilným formulárom, ktorú chcete upraviť.

    V zozname formulárov vyberte formulár, v ktorom v stĺpci Typ formulára existuje hodnota Mobil - Express.

Otvorí sa editor mobilných formulárov.

Pri takomto jednoduchom formulári sú úlohy nastavenia nasledovné.

    Vyberte polia, ktoré chcete zahrnúť do formulára.

    Výber umiestnenia polí.

    Rozhodnutie udeliť prístup len na čítanie k niektorým poliam.

    Po dokončení zverejnite nastavenia. Ďalšie informácie nájdete v téme Publikovanie prispôsobení.

Vo formulári sú štandardne zahrnuté všetky polia požadované podnikom alebo systémom a nemožno ich odstrániť. Ak nastavíte povinné pole len na čítanie, používatelia nebudú môcť toto pole upravovať. Pri tvorbe nový vstup pole len na čítanie sa nezobrazí, ale používateľ môže záznam aj bez týchto údajov uložiť. Ak zmeníte rovnaký záznam na webe alebo v aplikácii Dynamics 365 pre telefóny a tablety, používateľ bude musieť pred uložením zmien zadať túto hodnotu.

pozri tiež

Copyright © 2017 Microsoft Corporation. Všetky práva vyhradené.