Jak navrhnout skvělý webový formulář

Jak navrhnout skvělý webový formulář

Potřebujete navrhnout skvělý webový formulář? Nejste si jisti, kde začít? Jessica Enders pro vás má recept na vytváření formulářů, které budou bezchybně fungovat a lidé je vyplní. A to je přece jejich účel.

Pokud chceme vytvořit opravdu dobrý formulář, musíme se ponořit přímo do detailů. Měli bychom se ptát lidí na telefonní číslo nebo nám stačí emailová adresa? Máme využít tlačítko „Odeslat“ nebo „OK“? A tak dále. Ale stejně jako při každém developerském projektu je nejlepší začít s vytvořením celkového konceptu.

Jak řekl Steven R. Covey, autor slavných Sedmi návyků vysoce efektivních lidí: „Začněte přemýšlením o konci.“ Pro formuláře je důležité jasně definovat, čeho musí dosáhnout. Je tedy dobré si ujasnit následujících šest otázek:

  • Jaké informace potřebujeme sesbírat?
  • Proč jsou tyto informace potřebné?
  • Kdo bude tyto informace používat?
  • Jak budou informace použity?
  • Kdy budeme potřebovat tyto informace?
  • Kde se budou informace uchovávat?

Vidíte, že tyto otázky vůbec nemluví o formulářích – zaměřují se na informace. Formuláře jsou jen nástrojem pro sběr informací. Z toho důvodu by jejich navrhování mělo předcházet přemýšlení o informacích. Pokud se nad výše uvedenými otázkami zamyslíte, může vám to pomoci vyvarovat se chybám, které by měly vliv na návrh formuláře. Tyto chyby by se mohly objevit v jakékoliv části procesu od vývoje (například zajištění konektivity se staršími systémy) až po shromažďování údajů v určitém formátu.

Dalším klíčovým prvkem konceptu, který potřebujete, je správné pochopení použití formuláře. V tomto bodě se stěhujeme od potřeb strany shromažďující údaje (majitele formuláře) k potřebám lidí, kteří formulář vyplňují.

Bude tento formulář vyplňován doma, v práci, ve škole nebo v dopravním prostředku? Potřebují k němu lidé informace z jiných zdrojů nebo jim bude stačit to, co mají v hlavě? Budou lidé v době vyplňování formulář roztržití, v šoku, spěchající nebo nemotivovaní? Bude vyplnění formuláře vytvářet nějaký závazek?

01

Tady opravdu není správně pochopený kontext použití. Tento formulář je pro lidi, kteří se stěhují. Ale jakou mají teď zadat adresu? Starou nebo novou?

Poznejte své publikum

Možná jste si všimli, že k porozumění kontextu využití formuláře je důležité porozumění publiku: „vyplňovačům“ formuláře. Můžete navrhnout formulář, který bude odpovídat potřebám vlastníka formuláře, ale nečekejte úspěch, pokud k němu cílovému publiku nepůjde přistoupit, pochopit, vyplnit a odeslat ho.

Jsou tady tři věci, které mohou být při vývoji formuláře, který má smysl, užitečné: segmentace, persony a scénáře.

Segmentace odkazuje k rozdílným skupinám lidí, které mohou vyplňovat formulář. Například budoucí lékař musí před nástupem do zaměstnání dokončit nějakou praxi, aby byl lékařem. Dokud ji nemá, lékařem prostě není.

02

Tady jsou správně pochopené dva klíčové segmenty: opakovaní zákazníci a jednorázoví odběratelé. A jsou zde možnosti, díky kterým formulář vyhovuje oběma skupinám.

Segmentaci lze provést v libovolném počtu rozměrů:

  • role (jako v našem zdravotním příkladu)
  • demografie (věk, pohlaví, vzdělání, příjem, umístění a tak dále)
  • úroveň angažovanosti vůči výrobku nebo službě (například nezná, zná, ale nepoužívá, používá, rozhodl se koupit/získat, již koupil/získal)
  • vnímání a názory (platí uživatel rád kreditní kartou online?)
  • preference (např. „chtěl by raději získat více přesnějších informací“ nebo „získal by raději rychlý přehled, aniž by se moc musel unavovat čtením“)

Poté, co segmentujete cílové publikum, můžete pracovat na tom, jaká pole musí formulář obsahovat a jaké pro tyto pole využít elementy.

Užitečným způsobem, jak reprezentovat různé segmenty, mohou být persony. Persona je podrobný popis osoby v rámci segmentu (například muž v domácnosti nebo analytik). Je to vlastně takový prototyp uživatele. Měla by vycházet z přímého výzkumu na reprezentativním vzorku segmentu. Jděte ven a pozorujte lidi vy jejich přirozeném prostředí. Zjistěte, jak myslí, jak se cítí a jak se chovají. Pokud tak neučiníte, pravděpodobně se přesunete ke stereotypům a budete své uživatele špatně chápat.

S personami a scénáři je zde vidět uvědomění, že mnoho lidí nepůjde ven zkontrolovat svůj elektroměr.

S personami a scénáři je zde vidět uvědomění, že mnoho lidí nepůjde ven zkontrolovat svůj elektroměr.

Segmentace nám lidi, kteří vyplňují formulář, rozdělí do skupin. Persony nám dávají hmatatelné zastoupení těchto skupin. Scénáře nám popisují chování těchto osobností, pokud jde o formuláře, popisují cílovou skupinu v souvislosti s použitím formuláře. Co udělá muž v domácnosti těsně předtím, než půjde vyplnit formulář? Co chce získat jeho vyplněním? Jaké informace má v hlavě a které bude muset někde hledat? Jaké otázky bude očekávat? Co si bude myslet, že se stane po odeslání formuláře?

A teď můžeme navrhovat?

Uf. Tolik toho máme za sebou a ještě jsme se nepropracovali k této otázce. Může se to zdát divné, ale věřte, že každý kousek tohoto úsilí stojí za to. Šest otázek v úvodu minimalizuje možnost nepříjemného překvapení. Není nic horšího, než navrhnout vícestránkový formulář závislý na aktualizacích ze serveru v reálném čase, a pak zjistit, že tyto aktualizace nejsou možné. S takovými věcmi proto musíte počítat dopředu.

Otázky týkající se tohoto pojištění vypadají spíše jako rozhovor se zákazníkem než základní datové položky.

Otázky týkající se tohoto pojištění vypadají spíše jako rozhovor se zákazníkem než základní datové položky.

Segmentace, persony a scénáře rovněž sníží pravděpodobnost toho, že vaši práci budete muset později zahodit. Ale, což je rovněž důležité, také to pomůže zajistit design, který je zaměřený na uživatele a poskytuje skvělý mechanismus pro řešení vnitřních problémů. Spíše než na důležitá rozhodnutí by se měly týmy vyvíjející formuláře zaměřit na segmentaci, persony a scénáře, aby viděly, co dává největší smysl.

Datové položky a otázky

V této fázi máme základní koncept našeho formuláře a máme také solidní znalosti o cílovém publiku. Nyní se pojďme ponořit do detailů. Za prvé musíme přijít na to, jaké datové položky využít pro náš formulář. Datová položka je každá jednotlivá informace, kterou musí formulář sbírat, jako například datum narození člověka, který formulář vyplňuje.

Před každým navrhováním není špatné sestavit si seznam datových položek. Nemusí to být nic složitého, stačí si zapsat nějaký název (např. datum narození), formát, ve kterém se položka bude ukládat (string, DD-MM-YYYY) a zda je datová položka povinná či nikoliv.

V tomto formuláři je pořadí oddílů a otázek v rámci oddílů rozděleno rozumně.

V tomto formuláři je pořadí oddílů a otázek v rámci oddílů rozděleno rozumně.

Všimněte si, že datová položka je odlišná od otázky, která se objeví ve formuláři. Datová položka může být „počáteční datum vlády“, ale otázkou může být „Kdy chcete začít se svou vládout?“ Je užitečné rozlišovat tyto dva prvky, protože datová položka zapouzdřuje potřebu majitele formuláře a překládá ji do něčeho, čemu bude rozumět ten, kdo formulář vyplní.

Obdobným způsobem může být rozlišen paměťový formát od formátu, v němž se data sbírají. Skvělým příkladem jsou telefonní čísla. Nechte „vyplňovače“ formuláře zadat číslo takovým způsobem, jak je zvyklý (včetně mezer, pomlček, závorek atd.). Pak můžete tyto data analyzovat a přeformátovat, v případě nevyhovujícího formátu například poslat uživateli zpět k ověření.

Jakmile budete mít připravené datové položky, je tedy dalším logickým krokem psaní otázek (udělat to účinně je dalším tématem samo o sobě). Měli byste se soustředit na to, aby byly jasné a stručné, a měli byste také použít jazyk, který by byl vhodný pro cílovou skupinu. Nezapomeňte, že stejně jako otázka sama jsou důležité i nápovědy a výběry odpovědi. A pro každou otázku, kterou píšete, je také dobré napsat chybovou hlášku, která se zobrazí, pokud uživatel na danou otázku neodpoví nebo ji vyplní neplatnými daty.

Špatné barevné zpracování této stránky na objednávání jízdenek vypadá jako chyba (červená je nejčastěji spojována s chybami).

Špatné barevné zpracování této stránky na objednávání jízdenek vypadá jako chyba (červená je nejčastěji spojována s chybami).

Plynulost

Otázky jsou klíčovými prvky formulářů. Existuje mnoho různých způsobů, kam je umístit. Některé způsoby jsou lepší a efektivnější než ostatní. Vzhledem k tomu, že některé otázky přirozeně tvoří logické seskupení, je lepší se podle toho řídit.

Chcete-li zajistit plynulost a návaznost formuláře, měli byste uspořádat otázky, které si jsou blízké, blízko k sobě, očekávané otázky upřednostnit před neočekávanými a jednodušší před těžšími.

Pokud je váš formulář dlouhý na několik stránek, je rovněž dobré zobrazit někde ukazatel průběhu formuláře. Nejlepší ukazatel popisuje aktuální kroky, ne procenta dokončení.

Tento eshop porušuje princip podobnosti: pole jsou někdy stylizovaná stejně jako záhlaví.

Tento eshop porušuje princip podobnosti: pole jsou někdy stylizovaná stejně jako záhlaví.

Budete také potřebovat navigační prvky jako tlačítka „Zpět“ a „Další“. Všimněte si, že je dobré používat tlačítka pro primární akce (tj. věci, které chcete, aby lidé dělali) a odkazy pro sekundární akce (například pro tlačítko „Zrušit“). Tato vizuální a strukturální odlišnost pomáhá odlišit to důležité od méně důležitého, což je pro lidi, kteří formulář vyplňují, velmi významné.

Layout

V tomto okamžiku máte klíčové prvky formuláře (otázky) a máte je strukturované tak, aby na sebe plynule navazovaly. Nyní jste připraveni na to, o čem si většina lidí myslí, že je řeč, pokud jde o návrh formuláře: layout.

Vizuální design vašeho webového formuláře by měl být založen na kombinaci estetiky, firemní značky a Gestaltových principů vnímání. Gestaltovy principy, které jsou nejvíce relevantní pro rozložení formulářů, se týkají barvy, velikosti, tvaru, pozadí, vzdálenosti a podobnosti.

Barva, velikost a tvar jsou atributy jednotlivých prvků na obrazovce. Využijte těchto atributů k tomu, abyste na něco upozornili (např. přidáním červené hvězdičky poukažte na otázky, jejichž vyplnění je povinné), k rozsahu komunikace (velikost textového pole informuje uživatele o očekávaném množství obsahu) a maximalizování pochopitelnosti (např. kolečko pro přepínače a čtvereček pro zaškrtávací políčka).

Principy pozadí, vzdálenosti a podobnosti jsou zase o vztahu mezi jednotlivými prvky. Princip pozadí nám říká, že lidé přirozeně hledají v okolí celé objekty. Pro formuláře to znamená, že lidé přednostně hledají prvky, jako jsou tlačítka a textová pole – takže tyto prvky nepotřebují být moc ozdobené.

Zásada vzdálenosti nám říká, že lidé vidí objekty, které jsou blízko u sebe, jako související. Obrovský počet formulářů, které je těžké používat, tuto zásadu zanedbává – například tím, že umístí popisek blíže k jinému popisku než spíše k poli, se kterým daný popisek souvisí. Když plánujete layout formuláře, přemýšlejte i o tom, jakým způsobem se k sobě vztahují různé prvky, a ujistěte se, že tyto vztahy odráží i umístění jednotlivých prvků.

Princip podobnosti nám říká, že lidé vidí předměty, které si jsou podobné, jako související. Princip je stejně relevantní pro celé weby jako pro webové formuláře. Na webových stránkách zjišťujeme, že styl různých prvků je konzistentní (například všechny nadpisy úrovně jedna jsou tučné a velikostí 16 px, všechny odkazy jsou modré a podtržené atd.). Podobnost mezi tím, jak se písmo H1 zobrazí na domovské stránce a potom i na stránkách nižších úrovní pomáhá uživatelům webu porozumět a rychleji se v něm zorientovat.

Tento formulář sloužící k rezervaci měl zbytečně okázalá jednotlivá pole formuláře. V přepracované verzi je tomu už jinak.

Tento formulář sloužící k rezervaci měl zbytečně okázalá jednotlivá pole formuláře. V přepracované verzi je tomu už jinak.

Podobnost je přesně stejným způsobem důležitá i u webových formulářů. Být konzistentní (stejné nadpisy jednotlivých částí, texty nápovědy, tlačítka a odkazy) pomůže lidem pochopit formulář, a ti ho pak vyplní mnohem rychleji.

Abychom upozornili na různé věci, můžeme rovněž použít nepřímou podobnost. Sekundární tlačítka ve formuláři (například ta, která se používají k ověření adresy) mohou být stylizována trochu jinak než primární tlačítka – například mohou být provedena světlejší barvou. Stejný tvar sekundárních a primárních tlačítek bude vyjadřovat, že se v obou případech jedná o tlačítka, ale různé barvy jim dají různé priority.

Testování

Pomocí zde popsaného postupu jsou dobré šance, že váš formulář bude dobře fungovat hned na první pokus. Ale každý kontext jeho použití a publikum jsou jiné, proto je nutné vyzkoušet formulář v reálném světě.

To lze ilustrovat na jednom malém příkladu. Máme formulář týkající se předmětů v domácnosti. Některé předměty v domácnosti (např. šperky nebo jízdní kola) jsou přenosné a mohou být užívány i mimo domov. Liší se od toho položky, které obecně přenosné nejsou (například kuchyňský dřez). V důsledku toho otázky ve formuláři poukazovaly na položky „uvnitř domu“ a „mimo domov“.

Teprve při testování formuláře se zjistilo, že někteří lidé si mysleli, že „mimo domov“ znamená všude kromě uvnitř budovy (např. v zahradě nebo v obchodech), zatímco jiní si mysleli, že „mimo domov“ znamená pouze prostory, které jsou na pozemku domu (na dvorku, na zahradě, ale už ne v obchodě).

V tomto registračním formuláři je možné zpozorovat hned několik chyb. Na kolik jich přijdete?

V tomto registračním formuláři je možné zpozorovat hned několik chyb. Na kolik jich přijdete?

A to byla jen jedna část otázky na vícestránkovém webovém formuláři. Můžete si představit, jaké další věci se při testování ukázaly o jiných otázkách, plynulosti a uspořádání formuláře.

Pořadí kroků

Abychom to shrnuli: identifikace cíle formuláře; omezení chyb pomocí šesti otázek – co, proč, kdo, jak, kdy a kde; detailní kontext; porozumění cílové skupině prostřednictvím segmentace, persony a scénáře; seznam datových položek; sepsání otázek (včetně možností odpovědí, textu nápovědy a chybových zpráv); konstrukční prvky plynulosti (pořadí otázek, ukazatel pokroku a navigace); layout a testování, testování a testování.

Po těchto krocích jistě zjistíte, že můžete skončit s formulářem, který splňuje potřeby obou stran – majitelů formuláře i lidí, kteří ho budou vyplňovat.

Tento článek se objevil ve 240. čísle .net magazínu – světově nejprodávanějším časopise pro webové designéry a vývojáře.

Komentáře

Nahoru