10 tipů pro navrhování dokonalých formulářů

Tento článek byl původně publikován na onepixelout.com

Formuláře jsou portálem mezi uživatelem a systémem a často jsou předmětem webové stránky. Přihlášení, registrace, aktualizace vašeho stavu, zadání platebních údajů a dodací adresy - to vše se provádí pomocí formulářů. Pro weby elektronického obchodu mohou dobře vytvořené formuláře změnit.

Podle mých zkušeností může zlepšení návrhu jednotné formy dokonce zdvojnásobit prodej v internetovém obchodě.

… A miluji navrhování formulářů.

Protože formuláře jsou funkčním aspektem uživatelského rozhraní, existují určitá pravidla, pokud jde o to, jak je navrhnout. Dnes se podíváme na tipy a osvědčené postupy, pokud jde o získávání formulářů, které by provedly veškerou práci, takže uživatel nemusí.

1. Začněte se vstupy

Začněte nejběžnějším prvkem formuláře: pole pro zadávání textu. Je to nejběžnější součást většiny forem, takže si to udělejte správně a už jste tam na půl cesty.

Každý vstup formuláře má 3 základní prvky: textové pole a štítek a chybová zpráva. Bez ohledu na to, jak jste se rozhodli navrhnout tento nejzákladnější stavební blok, ujistěte se, že vždy existuje způsob, jak uživatel vědět, která část informace je potřebná, a zda došlo k chybě - jak se může z této chyby zotavit. Což nás úhledně přivádí na to, kam umístit štítky.

Štítky jdou na začátek

Trendy přicházejí a odcházejí. Existuje trend, který se přiklání k použití zástupného symbolu jako štítku. Použití zástupných symbolů pro štítky není nutně nesprávné, ale představují některé problémy UX. Problém je, že pokud na něj uživatel klepne, štítek je pryč. Pokud se uživatel vrátí do tohoto formuláře a vstup je zaostřen kvůli chybě, štítek je také pryč.

Štítky musí být vždy viditelné. Z tohoto důvodu jsou štítky nahoře.

Proč horní a ne vlevo od vstupního pole?

Pokud je štítek nalevo od pole, bude třeba na mobil naskládat jeden na druhého. Nejdříve přemýšlejte o mobilu.

obrázek z giphy

Průvodce uživatele k zadávání správných informací pomocí zástupných symbolů a použití štítků pro zamýšlené použití.

Dalším argumentem pro umístění štítků nad jejich vstupní pole je to, že čtenář má lineární svislou čáru pro čtení informací, což výzkum ukázal, je rychlejší než skákání z levého sloupce do pravého sloupce. Usnadněte tak vašemu uživateli věci - čistý řádek pro čtení věcí, které musí zadat, aby se mohli pohybovat vpřed s vaším webem.

2. Stavy chyb a varování

Pro každé standardní pole pro zadávání textu budete potřebovat odpovídající chybovou zprávu. Zde je několik tipů, jak navrhnout případ chyby:

Chybová zpráva může pocházet buď z klienta nebo serveru. Klientská strana může detekovat věci jako když není vyplněno povinné pole nebo když je e-mailová adresa v nesprávném formátu. Na straně serveru bude možné zjistit, zda e-mailová adresa aktuálně existuje. Zjistěte, které z nich jsou klienty a které jsou serverem. Chyby na straně klienta by měly být uživateli dány před odesláním formuláře jako rady. Chyby na straně klienta by měly uživateli zabránit v zadávání nesprávných informací.

Buďte inteligentní s chybovými zprávami.

Když uživatel udělá chybu, poskytněte jim informace o tom, které pole způsobilo chybu. Z bezpečnostních důvodů si někteří vývojáři při přihlášení nemusí přát určit, zda je e-mail nebo heslo nesprávné a je to v pořádku. Když však uživatel jednoduše zaregistruje e-mail nebo zadá svou adresu u pokladny, sdělte mu, které pole je špatné a proč.

Při každém návrhu zadávání textu zohledněte také to, jak bude chybová zpráva vypadat před a poté, co uživatel stiskne „Odeslat“.

Zahrnout varování

Pokud určité pole vyžaduje určitá kritéria - například heslo musí mít určitý počet znaků a kombinovat čísla a písmena, informujte uživatele. Můžete zahrnout způsoby, jak ukázat, jak silné je heslo při jeho zadávání. Může být také užitečné ukázat, zda e-mail již byl zaregistrován nebo už bylo přijato uživatelské jméno.

3. Skupina jako s Like

Vizuálně bude formulář vypadat hezčí, když se budete chtít ve skupině, ale z pohledu uživatelské zkušenosti je to také lepší. Přemýšlejte o tom, jak mobilní uživatel bude s tímto formulářem komunikovat. Pokud jsou pole pro zadávání textu společně, uživatel bude muset vyplnit pole na klávesnici.

Pokud žádáte uživatele, aby přepnul z polí pro zadávání textu na rozevírací seznamy, do rádia a zpět do polí pro zadávání textu, je to ze strany uživatele více posunuto. Přemýšlejte o tom, jak uživatel drží mobilní zařízení a jak to může snížit tření seskupením podobných vstupních polí dohromady.

4. Přepínače, rozevírací seznamy a zaškrtávací políčka

Někdy může dojít k záměně, když je čas používat přepínače, rozbalovací nabídky a zaškrtávací políčka.

Přepínače jsou skvělým způsobem, jak ukázat uživateli nízký počet možných odpovědí. Jako designér si můžete předem vybrat odpověď nebo ji nechat prázdnou. Přepínače jsou nejlepší volbou, pokud lze vybrat pouze jednu možnost.

Když existuje mnoho možných odpovědí, je vhodnější rozbalovací nabídka (moje obecné pravidlo je, pokud je jich více než 5 nebo 6). Můžete předem vybrat odpověď nebo ponechat horní položku jako „Vyberte prosím“, abyste uživatele vyzvali, aby se rozhodl.

Zaškrtávací políčka jsou nejlepší volbou, pokud máte zaškrtnuté jedno políčko (například podmínky) nebo máte více než jednu možnou volbu. Pokud chcete zjistit, které marketingové e-maily poslat uživateli, skupina zaškrtávacích políček vám umožní provést více než jeden výběr.

Použití zaškrtávacích políček namísto přepínačů by vás nemělo omezovat při rozhodování o návrhu uživatelského rozhraní. Jako návrhář máte velkou flexibilitu, jak se tyto prvky uživatelského rozhraní mohou objevit na obrazovce. Pokud chcete i nadále stylizovat, aby vypadaly zajímavěji, nemělo by to mít žádný vliv na uživatelský dojem. Namísto seznamu textu vedle malého kruhu byste to mohli učinit atraktivnější vytvořením obrázků nebo ikon, které lze vybrat.

5. Pokud je to možné, odstraňte nepovinná pole

Pokud je obchodním cílem přimět uživatele, aby něco koupil z vašeho webu, vaším cílem jako návrháře je eliminovat co nejvíce tření mezi zákazníkem a systémem. Vyjmutí nepotřebných polí způsobí, že se formulář objeví na straně uživatele jako méně práce.

To je důležité vědět při navrhování jakýchkoli typů formulářů pro doručení nebo doručení. Pokud marketingové oddělení chce zjistit zájmy zákazníků, aby věděly, které marketingové e-maily odeslat, mohou existovat jiné způsoby, jak tyto informace zjistit poté, co zákazník zakoupil své položky (například na stránce, kterou navštíví, když „potvrdí jejich e-mailem").

Vždy hledejte kreativní způsoby, jak zobrazit pouze minimální počet polí. Pokud je vaším cílem optimalizovat konverzi na webu elektronického obchodu, zaměřte se na minimalizaci počtu polí ve formulářích pro dodací adresu a pokladnu. Pokud navrhujete rozhraní pro rezervace letů, ukažte uživateli minimální počet polí, které potřebuje k zobrazení dostupných letů. Jakmile váš uživatel investuje, můžete začít hledat další periferní informace, které by mohli potřebovat - například počet sáčků atd.

6. Pro delší pole použijte Auto-complete

Pole názvu ulice může v závislosti na názvu ulice zabrat mnoho času, zejména na mobilním zařízení. Může být ještě obtížnější správně psát.

Můžete přemýšlet o začlenění rozhraní Google maps API, aby se název ulice vyplnil automaticky. To znamená, že uživatel možná bude muset zadat pouze několik prvních znaků a z rozevíracího seznamu možných názvů ulic vybrat správnou ulici. Je dokonce možné automaticky doplnit poštovní směrovací číslo pouhým názvem ulice, o tom se však budeme bavit v dalším bodě.

7. Použijte podmíněnou logiku

Existuje několik způsobů, jak pomocí logiky zadat nějaké informace jménem uživatele, čímž se jejich život jen trochu zjednoduší.

  • Pokud znáte zemi uživatelů, může návrh předurčit další pole, která mohou potřebovat („stát“, pokud jsou v USA, „kraj“, pokud jsou v Irsku atd.)
  • Poštovní směrovací číslo můžete použít k naplnění názvu města, státu nebo provincie.
  • Pokud máte svou zemi založenou na IP adrese, můžete zadat kód země do pole telefonního čísla?

Pokud se chystáte naplnit pole jménem uživatele, vždy jim dejte způsob, jak tyto informace upravit. Je možné, že nemáte pravdu.

Například - můžete použít Google Maps API pro získání názvu německé ulice. Znáte-li název ulice, můžete také získat směrové číslo oblasti. Některé ulice v Německu jsou však dostatečně velké, aby překlenovaly různé kódy oblastí, takže informace budou v malém počtu okrajových případů nesprávné. Vždy dát uživateli možnost upravit data v případě potřeby.

Zkoumání podmínečné logiky pro každou jednotlivou zemi na světě by bylo obrovské množství práce - buďte proto ve svém úsilí inteligentní. Podívejte se na země, kde získáte nejvíce objednávek nebo provozu, a začněte pro ně nejprve optimalizovat. Pokud vidíte silnou návratnost, můžete pokračovat ve provádění stejné podmínečné logiky pro více zemí.

8. Získejte Smart s zástupnými symboly

Dříve jsme hovořili o tom, jak bychom neměli používat zástupné symboly jako označení textového pole, protože zmizí, když na něj uživatel klepne. Nezkoumali jsme další způsoby, jakými mohou zástupné symboly zlepšit uživatelský dojem.

Zástupné symboly nabízejí jedinečnou příležitost ukázat uživateli, jak formátovat své informace. Telefonní čísla jsou skvělým příkladem. Měl by uživatel uvést kód země? Nebo směrové číslo?

Pokud potřebujete telefonní číslo v určitém formátu nebo číslo kreditní karty, které obsahuje pomlčky, můžete o těchto informacích uživatele informovat uvedením příkladu v zástupném symbolu. To je skvělý způsob, jak minimalizovat chyby tím, že jasně uvedete, že potřebujete kódy zemí atd.

9. Jasně sdělte další krok

Aby vaše tlačítka fungovala přesčas, sdělením toho, co se bude dít dál. Pokud je třeba provést další krok, sdělte to také uživateli.

Namísto použití „Další“ nebo „Pokladna“ můžete říci „Zkontrolovat objednávku“ nebo „Zaplatit pomocí Paypal“. Přidejte další úroveň komunikace tím, že uživateli konkrétně řeknete, co se stane, když na něj klepne. Dokončí toto tlačítko svou objednávku, nebo budou mít čas jej zkontrolovat? Budou přivedeni k Paypal přihlášení?

Vždy hledejte způsoby, jak zajistit, aby se uživatel během zážitku cítil v pohodě, zejména pokud to má vliv na zůstatek banky.

Stále se bojím pokaždé, když používám pokladnu Amazon, protože mi neřeknou celou částku včetně přepravného až do posledního kroku. Buďte transparentní se svým uživatelem. Zvýšte důvěru tím, že jim poskytnete informace, které potřebují v každém kroku, a jasně vysvětlete, co mohou očekávat, když zasáhnou výzvu k akci.

10. Stále hledejte způsoby, jak optimalizovat

Jakmile spustíte svou jasnou, lesklou novou formu - sledujte analytiku. Pokud zjistíte, že velké množství lidí se odrazí, když to vidí, zjistěte proč. Proveďte testování uživatelů, abyste zjistili, kde se vaši uživatelé cítí nepříjemně, a snažte se toto tření odstranit. Jako designér není naše práce nikdy nikdy „hotová“.

Závěrem

Formuláře nejsou občas nijak zábavné, ale pokud jsou dobře, mohou výrazně změnit uživatelský dojem z webové stránky nebo aplikace. Navrhněte své formuláře tak, aby pracovaly tvrději, takže uživatel nemusí.

Jasně komunikujte o výzvách k akci, upozorněte uživatele pomocí upozornění a zástupných symbolů a nabídněte automatické dokončení. Vždy hledejte nové způsoby, jak udělat více těžkého zvedání, takže uživatel má tření-méně zážitek.