Kontrola povinných polí. Polia označené hviezdičkou sú povinné Podmienky používania Yandex pole je povinné
- Rozhrania
- Preklad
Webové formuláre zohrávajú veľkú úlohu pri každodennom používaní internetu. Ak vyvíjate webové stránky, s najväčšou pravdepodobnosťou sú na nich prítomné: či už ide o jednoduchý formulár spätnej väzby alebo sofistikovanú webovú aplikáciu. Tu je niekoľko tipov, ktoré vám pomôžu vytvoriť ľahko použiteľné formuláre.
1. Jasne označte povinné polia
Je nepríjemné, keď používateľ odošle vyplnený formulár a neskôr zistí, že vynechal povinné polia.Je bežnou praxou označiť povinné polia hviezdičkou (*) vedľa ich názvu. Explicitne uviesť, či je pole povinné alebo nie, je dobrý nápad.
V registračnom formulári Zappos.com sú povinné polia označené hviezdičkou (*). Nepovinné polia sú tiež jasne označené.
2. Používajte jasné a podrobné chybové hlásenia
Som si istý, že neznášate, keď sa pri nesprávnom vyplnení formulára zobrazí chybové hlásenie „Musíte vyplniť všetky povinné polia“ namiesto poskytnutia podrobnejších informácií, ako napríklad „Zabudli ste vyplniť svoju e-mailovú adresu .“Dobrým riešením je overenie zadaných údajov v reálnom čase. Napríklad hneď po vyplnení e-mailovej adresy by webový formulár mal skontrolovať správnosť zadaného formátu a ak niečo nie je v poriadku, okamžite upozorniť používateľa.
3. Použite overenie formátu údajov na strane klienta (JavaScript)
Použitie validácie údajov JavaScriptu šetrí čas používateľa a tiež znižuje zaťaženie webového servera, čím ho oslobodzuje od spracovania prichádzajúcich hodnôt polí formulára. Overenie na strane klienta umožňuje používateľom vidieť, že práve urobili chybu, a nie až po odoslaní formulára. To platí pre všetky polia, ktoré nie sú prepojené s vašou databázou. Ako je kontrola formátu e-mailovej adresy alebo počtu číslic v telefónnom čísle.
Registračný formulár SurveyGizmo vás upozorní, ak zadaná e-mailová adresa nie je v správnom formáte.
4. Vizuálne zvýraznite polia, ktoré treba vyplniť, aby sa používateľ nestratil
Uistite sa, že môžete vizuálne určiť, ktoré pole používateľ práve vypĺňa. Dá sa to dosiahnuť pomocou focus: selektor pseudotriedy v CSS.
Webový formulár Wufoo vizuálne zvýrazňuje aktívne prvky farbou pozadia.
Minimálne implementujte zvýraznené orámovanie polí – prehliadače to urobia štandardne za vás, ale uistite sa, že farba je odlišná od dizajnu stránky (pozadia).
Google Chrome zvýrazní aktívny prvok žltým rámom. Firefox svetlo modrá.
5. Ukážte výsledky postupu
Ak je váš webový formulár veľký a pozostáva z niekoľkých stránok (alebo má niekoľko krokov), uistite sa, že používateľ je neustále informovaný o priebehu vykonávaných akcií a o tom, koľko času môže ešte potrebovať na dokončenie. Toto sa často vyskytuje v prípadoch online prieskumu (výskumu) s mnohými otázkami alebo počas procesu zadávania objednávky v internetovom obchode.Všetko, čo musíte urobiť, je napísať „Krok 4 z 5“ alebo niečo podobné. Ak používatelia budú klikať na tlačidlo „pokračovať“ bez toho, aby jasne pochopili, kedy bude posledný krok, prestanú formulár vypĺňať skôr, ako by ste čakali.
Pokladňa na Amazone má 4 strany. Formulár vám povie, kde sa práve nachádzate a koľko času zostáva do dokončenia.
Samozrejme, lepšou alternatívou by bolo skrátenie vášho webového formulára – ak to nie je možné, dajte používateľovi aspoň informáciu o tom, ako blízko je k dokončeniu vykonávaných akcií.6. Pravidelne ukladajte údaje formulára (do vyrovnávacej pamäte).
Formuláre s viacerými stranami alebo krokmi môžu často robiť chyby. Aby ste predišli strate údajov, musíte implementovať spôsob ukladania informácií zadaných používateľom pre každú reláciu. Zvyšuje sa tak spoľahlivosť a percento, že sa formulár vyplní aj po situáciách, keď používateľ opustí stránku (napríklad klikne na tlačidlo späť v prehliadači). Opätovné vyplnenie všetkých polí formulára môže spôsobiť odchod používateľov.7. Nepoužívajte štandardný text „Odoslať“ (odoslať)
Namiesto tlačidla s názvom „Odoslať“ použite text, ktorý používateľovi pripomína jeho akcie. Napríklad „Registrovať sa“, alebo ešte lepšie, informovať používateľa o výhodách po vyplnení formulára.
V registračnom formulári Basecamp bol text „Odoslať“ nahradený niečím užitočnejším.
8. Tlačidlo „Zrušiť“ vás prinúti zaváhať
Predstavte si, že si v obchode kupujete novú košeľu a predavač sa vás opýta: „Naozaj chcete túto konkrétnu košeľu? Ešte si ho kúpiš? S najväčšou pravdepodobnosťou nie. Môžete mať pochybnosti, pretože si myslíte, že predajca považoval košeľu za nevhodnú.To isté sa deje s webovými formulármi: pomocou tlačidla „zrušiť“ môžu vaši používatelia dvakrát premýšľať o tom, čo vypĺňajú.
9. Zobrazte používateľom polia v správnom formáte
Ak sa používateľov spýtate na konkrétne informácie – napríklad telefónne číslo alebo kreditnú kartu – dajte im vedieť, čo očakávate. Ak heslo musí mať určitý počet znakov alebo musí obsahovať určitú sadu znakov, jasne opíšte tieto požiadavky. To znižuje nejednoznačnosť a urýchľuje proces plnenia.
Registračný formulár Geico poskytuje jasné pokyny, v akom formáte sa očakáva vstupné údaje.
10. Jednostĺpcový formulár je najlepším riešením
Podľa výskumu pohybu očí od agentúry cxpartners pre dizajn používateľských skúseností je skenovanie formulára smerom nadol vhodnejšie ako skenovanie zľava doprava. Tým sa zníži množstvo pohybu očí potrebné na dokončenie formulára.Jednostĺpcový formulár
Registračný formulár batohu je jednostĺpcový.
Formulár s viacerými stĺpcami
Vo svete vývoja softvéru existuje veľa mýtov a mylných predstáv. Aby sme napredovali a nestagnovali, je absolútne nevyhnutné ich zničiť. Dnes hovoríme o jednej z najhlbšie zakorenených mylných predstáv, ktorá je tiež dosť škodlivá, s názvom „Mýtus o povinnom sexe“.
Budeme hovoriť o takmer akomkoľvek systéme, ktorý používa formuláre na zadávanie informácií. Povinné pole je pole formulára, bez ktorého systém neprijme vaše informácie. Medzi veľkou väčšinou vývojárov softvéru existuje názor, že požadované polia by mali byť:
- Všetky polia potrebné z hľadiska subjektu (napríklad celé meno a dátum narodenia osoby, ak hovoríme o pasovom úrade);
- Všetky polia potrebné na fungovanie systému (tie, bez ktorých algoritmy nebudú fungovať - napríklad dátum, od ktorého sa služby začínajú poskytovať, aby sa im mohli časovo rozlíšiť);
- Dôležité polia sú tie, ktoré nie sú potrebné, ale prednostne vyplniť (napríklad zdôvodnenie vykonávanej zmeny) – s motiváciou, že je lepšie, aby sa používateľ zapotil, keď to nie je potrebné, ako keď je to potrebné, aby zabudol zadať hodnotu.
Programátori tradične veria, že robia zvyšku sveta láskavosť tým, že pre nich vytvoria taký skvelý produkt, akým je „náhrada akéhokoľvek názvu produktu“. Ich program je takmer platónskym eidos, čistou abstrakciou, matematickým vzorcom, vypočítateľným, samozrejme, striktne na súbore parametrov zo svojej definičnej oblasti. Z tohto pohľadu sú povinné polia nepríjemnou maličkosťou, ktorú treba vkladať, aby sme naučili hlúpych a neslušných používateľov Správny zadávať informácie do systému, s ktorým majú oprávnenie pracovať.
Tiež sa verí, že nesprávne (neúplné) údaje sú také hrozné, že ani ich uloženie do databázy už nie je správne. No, lenivosť, samozrejme - z pohľadu vývojára je jednoduchšie skontrolovať správnosť údajov vo vstupnej fáze a poslať používateľa na dvojitú kontrolu svojich údajov, ako písať spracovanie chýb, kde sa tieto údaje skutočne použijú v systéme.
Čo na to hovorí moderná veda o dizajne používateľských skúseností? Po prvé, bolo jasné (neviem komu a kedy, ale už dávno určite, pozri a), že programy sa predsa vyvíjajú pre používateľov. V tomto zmysle už programátor nediktuje podmienky, ale skromne vytvára čisto utilitárny produkt, nástroj, ktorý ľudia použijú na riešenie ichúlohy a úspechy ich Ciele. Ako žehlička – ak potrebujete niečo vyžehliť, zapnete to. Ak namiesto žehlenia modálne ponúka sťahovanie aktualizácií z internetu, je jasné, kam takáto žehlička poletí. Alan Cooper odporúča zobrazovať používateľov vášho produktu ako veľmi šikovných, ale veľmi zaneprázdnených ľudí. Hovoria, že nie sú hlúpi a pochopia, ako používať váš produkt, hlavná vec je, že im jednoducho nebudete stáť v ceste.
Vo všeobecnosti sa domnievam, že každý programátor (dizajnér, manažér, analytik) by mal robiť meditáciu, ktorú spomínal Sergej Bodrov ml.:
Stojíte na rohu rušnej ulice a predstavujete si, že tam nie ste. Alebo skôr vôbec neexistujete. Chodci chodia, autá trúbia, otvárajú sa dvere obchodov, cestujúci sa prezliekajú na zastávke. To znamená, že svet v zásade naďalej žije bez vás. Toto je bolestivé pochopiť. Ale je dôležité...Samozrejme, nechcem povedať, že byť programátorom je zbytočné povolanie, sám som programátor a vôbec si to nemyslím. Je to len nevďačné povolanie. Nikto vás nepríde pochváliť za dobre implementovaný algoritmus. Ak je program dobrý, použije sa bez ďalších otázok. Tak to má byť, len aby ste boli programátor, musíte si na to zvyknúť. A títo ľudia, ktorí chodia po ulici a striedajú sa na autobusovej zastávke, sú vašimi používateľmi. Používajú veci tak, ako ich používajú ich potrebné. Vrátane vášho produktu. Bez teba. Nič o vás nevedia, nechcú vedieť a nikdy sa to nedozvedia. Sergeja Vitalieviča, keď je v polárnej tundre a snaží sa zadať hodnoty namerané z meracieho prístroja do systému, sa vôbec nezaujíma o to, prečo mu systém hovorí, že najprv musíte uviesť nejaký typ tarifikácie, aj keď v tom čase dizajnu sa vám zdalo, že bez tarifikačného typu sa to nedá obísť. Pokiaľ ide o príklad o sťahovaní aktualizácií železa, nebol prevzatý z ničoho - venujte pozornosť tomu, ako sa prehliadač Firefox správa po zapnutí.
Bude tam vôbec niečo o povinných poliach, pýta sa Habrowser? Už sa to začína.
Ide o to, že náš skutočný svet nie je matematický model, ktorého parametre sú kedykoľvek známe. Skutočný život je charakterizovaný skôr nedostatkom informácií ako ich prítomnosťou. Osoba, ktorá vypĺňa formulár, nemusí mať požadované údaje - a nemusí ich mať vo všetkých predvídateľných hraniciach dosahu, to znamená, že nakoniec nemusí existovať. Tento problém sa nedá vyriešiť jednoduchým nastavením poľa ako povinného - hodnota nebude vytiahnutá z ničoho. Zavedením povinných polí do formulárov z dôvodu integrity a úplnosti údajov skutočne zasahujeme do používania systému. Používateľ v takejto situácii buď nevyplní formulár (a už vôbec nebude môcť so systémom pracovať), alebo doplní chýbajúce údaje rybami – fiktívnymi alebo nezmyselnými údajmi. A to neznamená, že používateľ je zlý alebo sa veľmi nesnažil, ale iba to, že vyvinutý systém nie je dostatočne flexibilný na použitie v podmienkach reálny mier. To, čo sa stalo v druhom prípade (predstavenie rýb), je totálny podvod. Vývojár systému sa môže tváriť, koľko chce, že je všetko v poriadku, no v skutočnosti je to on, kto môže za tento podvod. Navyše nie je jasné, kto vyhral a čo - používateľa bolela hlava a do systému vstúpili nesprávne údaje. Áno, dostali sa do takej situácie, že ich už nie je možné automaticky detekovať, filtrovať ani čistiť – na rozdiel od prípadu, keď používateľ jednoducho naznačil, že informácia chýba.
Čo robiť? Musíte robiť dobré programy. Totiž, áno, nedávajte do popredia integritu databázovej schémy, ale dajte tam ciele a zámery používateľov. Inými slovami, akceptovanie neúplných a v niektorých prípadoch nesprávnych údajov od používateľa, samozrejme, s možnosťou ich v budúcnosti opraviť. Na rozdiel od mylnej predstavy (áno, inej) je to možné, nie je to také ťažké a dokonca to funguje. Okrem toho treba stále nejako pomôcť, povedať používateľovi, kde, aké údaje a prečo mu chýbajú. Aby mohol vidieť a kontrolovať situáciu.
Koľko povinných polí by malo byť vo formulári? V ideálnom prípade nula. Je to vždy možné? Pre mňa je jedným z príkladov leteckej akrobacie operácia vytvorenia priečinka vo Windows. Zdalo by sa, že menej ako jedno pole tu neurobíte, ale nie, vytvorenie sa im podarilo implementovať tak, že systém sa na nič nepýta - aj keď technické obmedzenia neumožňujú systému vytvoriť priečinok bez mena. Toto je ideál, o ktorý sa treba snažiť.
Prirodzene, systém by mal byť minimálne inteligentný a pýtať sa používateľa len na to, čo je relevantné pre jeho úlohy, a nie pre potreby samotného systému. Systém je ako nástroj, pamätáte? Len o príklade s Firefoxom – Google Chrome napríklad vyriešil problém Firefoxu tak, že sa potichu aktualizoval v momente, keď ho používateľ reštartuje. Používateľ o tom vôbec nemusí vedieť – nevie. Príklad hodný nasledovania. Musím priznať, že som spočiatku ani nerozumel, prečo sa ma nikdy nespýtal, kedy by mal aktualizovať?
Vznikol tiež mýtus o dôležitých poliach (to sú tie, ktoré sú nepovinné, ale je žiaduce ich vyplniť). Tu je všetko ešte jednoduchšie - nemôžete prinútiť vyplniť pole. Preto aj keď pole označíte ako povinné, alebo ho neoznačíte, stále budú písať ryby, nezmysly, odhlasovať sa, ak ho nechcú vypĺňať. Pre tento problém neexistuje žiadne riešenie rozhrania. O dôležitosti polí treba informovať terénnych pracovníkov. A vývojár by mal označiť pole ako voliteľné. A dovoľte mi upraviť.
Literatúra:
- Alan Cooper o rozhraní. Základy interakčného dizajnu. Symbol-Plus, 2009
- Jeff Raskin. Rozhranie: nové smery v navrhovaní počítačových systémov. Symbol-Plus, 2005
UPD: V komentároch bola hlavná morálka témy formulovaná jasnejšie: hovoríme o systéme draftov, o odstránení požiadavky zadávať všetky údaje naraz a dôsledne. To znamená, že áno, urobte voliteľné aj tie polia, bez ktorých systém nebude fungovať. Prirodzene to nebude fungovať, ale aspoň to zachráni dáta.
UPD #2: Dovoľte mi objasniť ešte jednu vec, ktorú som si sám pri písaní témy jasne neuvedomoval. Nehovorím tu o vhodnosti určitých polí vo formulári (toto je dôležitá, ale predsa len trochu iná téma, než ktorú chcem sprostredkovať). Skôr navrhujem prehodnotiť samotný koncept zadávania informácií pomocou formulárov, teda tradičný prístup, keď potrebujete vyplniť celý formulár naraz a správne. Namiesto toho navrhujem, aby sa do databázy mohol uložiť aj medzistav (neúplný, nesprávny, protirečivý), výslovne označiť takýto stav za neúplný/nesprávny/nekonzistentný. Všetky situácie „teraz neviem všetko, ale možno zajtra budem“, ktoré sa tradične riešia napísaním na papier, sa dajú spracovať pomocou informačného systému. Prirodzene, takéto údaje by nemali byť vpustené do obchodného procesu kvôli ich nesprávnosti - všetko zostáva ako predtým. Jednoducho budú ležať v databáze až do lepších časov - nebudú užitočné, no, Boh im žehnaj.
Maximum informácií v minime slov.
Spôsob, akým sú polia označené, výrazne ovplyvňuje to, ako používatelia vnímajú formulár a ako ho vypĺňajú.
Z psychologického hľadiska je všetko celkom jednoduché: poukázať na pozitívne aspekty je lepšie, pretože pri rozhodovaní sa používateľ verí, že má na výber.
Na druhej strane, ak zadáte povinné polia, používateľ sa bude cítiť uväznený, obmedzený a nepohodlný.
Označte voliteľné polia, nie naopak
Väčšina návrhárov používa hviezdičky na označenie povinných polí. Ale musíte to prestať robiť. Výskum v tejto oblasti jasne ukazuje, že používanie hviezdičiek pre povinné polia je bežnou chybou.
Je lepšie označiť voliteľné polia ako povinné polia, pretože:
- Hviezdička je vám zrejmá a nie každému, verte, že vždy sa nájdu takí, ktorí nerozumejú
- Vždy je viac povinných polí ako nepovinných
- Čím menej vizuálneho šumu má váš formulár, tým je čitateľnejší, a teda rýchlejšie sa vypĺňa.
nie požadovaný vs Voliteľné
Ak píšete text v angličtine, nezabudnite, že zápory sú vo všetkých prípadoch menej jasné. Preto na popis voliteľných polí použite slovo „Voliteľné“ namiesto „Nevyžaduje sa“.
Nežiadajte používateľov, aby poskytovali zbytočné informácie. Ak máte priveľa políčok navyše (nepovinných), je to zlé a vy to viete. Ani vy, ani ja nemáme radi tvary roliek toaletného papiera.
HTML formuláre sú ovládacie prvky, ktoré sa používajú na zhromažďovanie informácií od návštevníkov webových stránok.
Webové formuláre pozostávajú z kolekcie textových polí, tlačidiel, zoznamov a iných ovládacích prvkov, ktoré sa aktivujú kliknutím myši. Z technického hľadiska formuláre prenášajú údaje od používateľa na vzdialený server.
Na príjem a spracovanie údajov z formulárov slúžia webové programovacie jazyky ako napr PHP, Perl.
Pred príchodom HTML5 boli webové formuláre súborom niekoľkých prvkov , končiace tlačidlom . Štylizácia formulárov v rôznych prehliadačoch si vyžiadala veľa úsilia. Okrem toho formuláre vyžadovali JavaScript na overenie vstupu a chýbali im špecifické typy vstupných polí na špecifikovanie každodenných informácií, ako sú dátumy, e-mailové adresy a adresy URL.
HTML5 formuláre vyriešil väčšinu týchto bežných problémov prítomnosťou nových atribútov, ktoré poskytujú možnosť meniť vzhľad prvkov formulára CSS3.
Ryža. 1. Vylepšené webové formuláre s HTML5 Vytvorenie formulára HTML5
1. Prvok
. Nevyžaduje žiadny vstup, pretože je to kontajner, ktorý drží všetky ovládacie prvky formulára pohromade - poliach. Atribúty tohto prvku obsahujú informácie, ktoré sú spoločné pre všetky polia formulára, takže polia, ktoré sa logicky kombinujú, musia byť zahrnuté v jednom formulári.2. Zoskupovanie prvkov formulára
Element
navrhnuté tak, aby zoskupovali prvky, ktoré spolu súvisia, čím sa forma rozdeľuje na logické fragmenty.Každá skupina prvkov môže byť pomenovaná pomocou prvku