← Zpět na blog

    Jak nenavrhovat webové formuláře

    Formuláře jsou srdcem produktového designu a často nejdůležitější částí stránky. Přesto je po 25 letech pořád navrhujeme špatně.

    Peter Bennár
    Peter BennárCEO / designér prezentací
    Jak nenavrhovat webové formuláře

    Ve zkratce: Dobré webové formuláře stojí na jasné komunikaci a jednoduchosti. Nechte popisky polí viditelné, nabídněte přihlášení přes sociální síť i e-mail, pište chybové hlášky, které vysvětlí, co chcete, a pravidla (například pro heslo) řekněte předem, ne až po odeslání.

    Webové formuláře. Jsou srdcem produktového designu (většina produktů je z pohledu uživatele jen hromada formulářů) a obvykle nejdůležitější částí každé stránky, na které se objeví. Vzhledem k této důležitosti byste si mysleli, že po 25 letech jejich tvorby už formuláře máme v malíčku.

    Ale vůbec nemáme.

    Nebo spíš: formuláře máme docela dobře vyřešené, ale dobrá zpráva se zřejmě šíří trochu… nerovnoměrně. Podívejme se tedy na některé z nejčastějších problémů, které nám webové formuláře přinášejí, a na to, jak to dělat lépe.

    Všechny popisky dejte do pole

    Víte, co zbožňuju? Popisky polí, které zmizí, když do pole kliknu. Protože si úplně pamatuju, na co se mě to ptalo.

    Jistě, popisky uvnitř pole působí jako elegantní řešení problémů designu formulářů. Formuláře jsou často nejdůležitější věcí na stránce. Ale protože mají k estetické kráse daleko, není těžké pochopit, proč byste chtěli na stránce ušetřit trochu místa.

    Vlastně se vsadím, že první designér, který přesunul popisky do pole, se na jeden den cítil jako zatracený génius. A upřímně doufám, že se tak cítil.

    Ale jako mnoho zdánlivě geniálních nápadů uvedených do praxe i tenhle selhává. Přináší výrazné problémy s přístupností pro lidi s kognitivním znevýhodněním, a upřímně, i pro nás ostatní. Protože většinu času, když vyplňujeme formuláře, jedeme na autopilota. Nevěnujeme pozornost popisku každého pole ani tomu, co do něj zadáváme.

    Takže mít popisek viditelný, aby mi připomínal, co právě dělám, je velmi praktické. Pomáhá mi rychleji dosáhnout cíle a zaručí, že nemusím mazat nebo vystřihovat už zadané údaje, jen abych si ověřil, že jsem do pole dal správný obsah.

    To ale neznamená, že musíte zůstat u standardních postupů designu formulářů. Je v pořádku, pokud chcete popisek po kliknutí kouzelně vytáhnout z pole a usadit ho nad ním. Pokud máte pocit, že je to dobré využití vašeho času, směle do toho, kámo.

    Já osobně se o to upřímně nestarám.

    Animace popisků ve formuláři, které se po kliknutí přesunou nad pole a zůstanou viditelné

    Pokud chcete používat popisky uvnitř pole, zajistěte, aby nějakým způsobem zůstaly viditelné.

    Rozhodně mi nedovolte přihlásit se přes sociální síť

    Protože vážně, kdo by chtěl něco tak pohodlného jako přihlášení jedním kliknutím?

    Dobře, asi bych neměl tak snadno rozdávat své přihlašovací údaje ze sociálních sítí každé aplikaci, která o ně stojí. A souhlasím, že to není nejudržitelnější možnost. Jak by nám všem měl připomenout nedávný konec jedné sociální sítě, tyhle „sítě“, na kterých prakticky žijeme, mohou zmizet ze dne na den.

    Ale je to zatraceně příjemné. Přihlášení přes sociální síť mi dává pocit, že mám klíč od celého internetu. Stačí vám ho dovolit použít, a bum! Jsem uvnitř. Mnohem lepší než vyplňovat hromadu polí.

    Přihlašovací formulář s možností přihlášení přes sociální sítě i e-mail a vysvětlením, co služba s přístupem udělá

    Všimněte si, jak mi jedna blogovací platforma nabízí přihlášení přes sociální síť i přes e-mail a zároveň mi řekne, co udělá s přístupem k mému účtu, pokud jí ho dám.

    Pravda, existuje spousta důvodů, proč přihlášení přes sociální síť nepoužít, takže za tento bod moc nestrhávám. Ale doufám, že jste aspoň zvážili, že mi to takhle usnadníte.

    A ještě, pokud přihlášení přes sociální síť používáte, nezapomeňte také:

    • Dát mi možnost přihlásit se místo toho e-mailem, pokud se mi nechce dávat vám klíče k mým datům ze sociálních sítí
    • Přímo říct, co s přístupem k mému účtu (účtům) uděláte a co ne, přičemž nejdůležitější je samozřejmě to, zda budete na můj účet něco zveřejňovat bez mého výslovného souhlasu

    Klidně v chybových hláškách používejte slova jako „neplatný“

    Jistě, klidně buďte arbitrem platnosti. Určitě jste si ověřili, jaké „speciální“ znaky lidé ve jménech opravdu používají, že?

    Chybová hláška ve formuláři, která odmítá skutečné příjmení jako neplatné jméno

    Nebudu se tu do toho pouštět příliš hluboko. Při psaní chybových hlášek je však důležité být informativní a nápomocný. Říct mi, že zadaný údaj je „neplatný“, je nejen potenciálně urážlivé, ale ani to nepomůže, protože to nevysvětlí, jak vypadá „platný“ údaj. Tak mi už konečně řekněte, co chcete.

    Říct mi, že zadaný údaj je „neplatný“, je nejen potenciálně urážlivé, ale ani to nepomůže, protože to nevysvětlí, jak vypadá „platný“ údaj.

    Ano, chtějte po mně „uživatelské jméno“

    Protože si určitě chci pamatovat ještě něco dalšího, kromě e-mailů a hesel ke 120 jiným webům, na které jsem se zaregistroval.

    Co, jsme v 90. letech nebo co?

    Novinka: přitažlivost anonymního internetu už byla prozkoumána a vyhodnocena jako zanedbatelná, takže pokud váš web nepotřebuje nějakou vrstvu mezi mým avatarem a mou identitou, zbavte se prosím této abstrakce. Jen přidává zbytečnou kognitivní zátěž a dramaticky zvyšuje mou potřebu kliknout na tlačítko „pomozte mi přihlásit se“.

    Registrační formulář jedné e-mailingové služby, který chce uživatelské jméno

    Jedna e-mailingová služba chce uživatelské jméno, ale v jejím případě to dává dokonalý smysl. Koneckonců jeden hacker ve vašem účtu by mohl zničit celý byznys.

    Pravda, existují weby, kde je anonymita (nebo její lákavá možnost) jednoznačně součástí hodnoty. Vy si jen klidně pokračujte. A umím si představit i bezpečnostní důvody pro vyžadování uživatelského jména, protože je to další vrstva mezi hackerem a mým účtem.

    Ale pro většinu webů a formulářů je to jen zbytečná otrava. A pro ty weby, které ho potřebují, krátké vysvětlení jako…

    Vytvoření uživatelského jména pomáhá lépe chránit váš účet, protože je těžší ho zjistit než e-mailovou adresu.

    …může výrazně zmírnit můj pocit, že mi jen komplikujete život. Pamatujte: vaši zákazníci nevědí, co děláte, ani proč to děláte. Tak co vám brání jim to říct?

    Hlavně přede mnou skryjte informace, které potřebuji vědět

    Stalo se vám někdy, že jste vyplnili formulář, klikli na odeslat a až potom na vás vyskočil důležitý detail o tom, jak vytvořit heslo pro tento konkrétní web, který jste pokazili, protože vám ho vůbec neřekli?

    Protože ano, opravdu chci zjistit, že jsem s heslem udělal něco špatně, až poté, co jsem si byl jistý, že jsem uvnitř. Skvělý plán.

    Jak jsem zmínil výše, chápu přitažlivost štíhlejšího, ostřejšího a čistšího designu formulářů. Ale pokud moje heslo nezbytně musí obsahovat jedno velké písmeno, jedno malé písmeno a jeden „speciální“ znak, neměli byste mi to, víte, prostě říct?

    Netýká se to jen designu přihlašovacích formulářů: všude, kde potřebujete konkrétní informace zadané určitým způsobem, dejte lidem vědět předem. Zjednodušíte jim práci a snížíte frustraci.

    Nedovolte mi vidět, co píšu

    Chápu. Tečky jsou tam místo znaků, které píšu, aby nikdo nemohl použít nejstarší hack v knize: podívat se mi přes rameno.

    Ale určitě byste mi mohli dát možnost to riskovat, ne? Vždyť tu sedím v kanceláři, v pohodlném křesle, nikdo se nade mnou nenaklání. Můžu jen nakouknout?

    Jak zlepšit naše webové formuláře

    Když projdu všechny své stížnosti na formuláře, jedna věc je naprosto jasná: výborné formuláře vyžadují výbornou komunikaci.

    Nechat popisky viditelné a nenechat je zmizet po kliknutí: to je jasná komunikace. Vyhýbat se slovům jako „neplatný“? Přesně tak, komunikace. Prozradit mi informace, které potřebuji vědět, dřív, než udělám chybu? Ano, uhodli jste.

    Komunikace hraje roli i u bezpečnostních otázek, které jsem zmínil. Bez toho, abych věděl, že tyto věci slouží k mé ochraně, působí jen zbytečně otravně. Ale kdyby si tyto weby našly chvilku a vysvětlily mi jejich účel… no, mohl by to být opravdu pozitivní moment pro můj vztah se značkou, ne?

    Druhou klíčovou ingrediencí je samozřejmě zjednodušování: snížit mou kognitivní zátěž tím, že mi umožníte přihlásit se přes sociální síť, nabídnete užitečné chybové hlášky a podobně. Takže nezapomínejte hledat způsoby, jak formuláře zjednodušit, včetně omezení otázek jen na to, co opravdu potřebujete vědět.

    Otázky a odpovědi

    Mají být popisky polí uvnitř formulářového pole?

    Jen pokud po kliknutí zůstanou viditelné, například se přesunou nad pole. Popisky, které zmizí, zhoršují přístupnost a způsobují chyby při vyplňování.

    Jak napsat dobrou chybovou hlášku ve formuláři?

    Místo slova „neplatný“ vysvětlete, jaký údaj očekáváte a v jakém formátu. Hláška má pomoci chybu opravit, ne uživatele obviňovat.

    Kdy chtít uživatelské jméno?

    Jen když ho web opravdu potřebuje, například kvůli anonymitě nebo bezpečnosti. Pak jednou větou vysvětlete proč; jinak stačí e-mail.

    Kdy zobrazit pravidla pro heslo?

    Vždy před vyplněním, přímo u pole. Uživatel by se o požadavcích neměl dozvědět až z chybové hlášky po odeslání formuláře.

    Formuláře a weby, které lidé opravdu vyplní, vám navrhneme v PeknéWeby.

    Vaše další úspěšná prezentace začíná tady.

    Řekněte nám více o vaší prezentaci

    a připravíme vám takovou, na kterou

    nikdo dlouho nezapomene.

    Domluvit video-hovor
    Domluvit video-hovor

    Pojďme si popovídat o vaší prezentaci na 30 min. video-hovoru, kde vám vysvětlíme, jak probíhá vytvoření prezentace na míru.

    Prezentace
    SOUVISEJÍCÍ ČLÁNKY

    Mohlo by vás zajímat i toto

    Wow, došli jste na konec našeho webu.

    To je už dnes rarita doscrollovat se na konec nějakého webu.

    Za odměnu můžete jít zpátky