4 formuláře UX tipy, které byste měli vědět (s příklady)

Máme tendenci přemýšlet o formách jednoduše jako o prostředcích ke shromažďování uživatelských dat, ale někdy jsou to také jeden způsob jediná možnost, pro naše uživatele spojit se s námi. Je pravděpodobně bludné myslet si, že můžeme vytvořit uživatele milovat vyplňování formulářů, ale je to určitě možné najít řešení, která je příliš nenávidí, a pomáhat jim v procesu.

Při procházení sítě najdeme někdy překvapivá řešení, která jsou programově správná, ale jsou navržena tak, aby byla nejpravděpodobnější způsobuje, že mnoho uživatelů opouští web kvůli špatnému uživatelskému prostředí.

Pokud jsou naše formuláře navrženy dobře, budeme schopni nejen potěšit naše uživatele, ale také tým, který se s ním vyrovná mnohem menší vstupní chyby. Tak, v tomto článku, budeme se podívat na to, jak můžeme minimalizovat chyby zadávání uživatelů a stále udržet spokojenost našich uživatelů.

Předvídat potřeby uživatelů

Webové stránky a aplikace mají různé uživatelské základny a cíle, a dokonce stejné umístění může hostit mnoho formulářů, které sbírají různé druhy dat, jen aby jmenovaly ty nejčastější:

• Přihlašovací formuláře
• Registrační formuláře
• Formuláře profilu uživatele
• Formuláře pro registraci zpravodaje
• Formuláře služby Checkout
• Průzkumy uživatelů
• Kontaktní formuláře
• Formuláře komentářů
• Vyhledávací formuláře

Všechny tyto typy formulářů vyžadují různé věci. Při navrhování formuláře pokladny je důležité důvěryhodně ujistit uživatele o zabezpečení, zatímco v případě formulářů komentářů je to dobrý nápad přidejte emojis nebo jiné metody, které uživatelům umožní vyjádřit jejich skutečnou náladu.

Nicméně i podobné typy formulářů mohou být navrženy odlišně, protože všechny stránky mají své stránky jedinečnou uživatelskou základnu. Než se pustíte do procesu navrhování, je vždy dobré předvídat, co naši uživatelé potřebují, a odpovídajícím způsobem.

Příklad: Sociální přihlášení cílení na potřeby uživatelů

Přihlašovací formulář Codepen obsahuje tři sociální přihlášení s Githubem nahoře. Tato volba by byla pro většinu stránek nepřiměřená.

Ale je ideální pro Codepen, protože jejich uživatelská základna sestává z vývojářů, z nichž mnozí se budou chtít přihlásit pomocí svých účtů Github nebo vzájemně propojit své vývojové účty najednou.

Myslíš, že je mobilní první

Mobilní a stolní uživatelé mají různé potřeby, ale jako vyplňování formulářů je mnohem větší výzvou na mobilní obrazovce, používat gesta rukou než na fyzické klávesnici, a mobilní přístup může nás dále, když chceme navrhovat použitelné formuláře.

Navíc, mnoho vzorů UI formulářů, které fungují dobře na mobilních zařízeních, bude fungovat i na desktopu.

Příklad: Ovládání s možností stažení

Vysoce kvalitní mobilní formuláře nelze představit bez viditelné ovládací prvky na kterých mobilní uživatelé mohou snadno klepnout prsty.

Formulář pro registraci newsletteru konference Web Design Event Apart se přizpůsobuje způsobu, jakým mobilní uživatelé přistupují na obrazovku - obsahuje dvě snadno přístupná vstupní pole a tlačítko velikosti prstu.

Pole pro zadávání textu jsou vyšší, než obvykle, takže mobilní uživatelé na ně mohou snadno klepnout a velké oranžové tlačítko s ikonou zaškrtnutí dále vybízí uživatele k odeslání formuláře..

Desktop verze webu používá stejný design formuláře, také dobře vypadá a funguje na větších obrazovkách.

Příklad: Expandable Input

Při navrhování formulářů pro mobilní telefony je vždy důležité zvážit, jak můžeme minimalizujeme prostor, který používáme. postradatelný vstup UI design vzor se stal docela populární v poslední době, a to funguje velmi dobře na mobil.

Booking.com využívá tento vzor ve formuláři vyhledávání na svých mobilních stránkách. Když uživatel klepne do vyhledávacího pole, rozbalí se tak, aby ponechat více prostoru pro gesta, a výběrový seznam s doporučeními se také zobrazí pod ním.

Když uživatel klepne z pole, zmenší se a další informace zmizí.

Příklad: Morphing Button

Morphing tlačítka vezměte postranní vstupní vzorek ještě o krok dále, protože uživatelé nejprve uvidí tlačítko, které pak morfy do formy když na něj klepnou.

Níže uvedený snímek je z brilantního článku Startupu o inovativním designu formulářů, který představuje mnoho dalších kreativních řešení.

Usnadnění vstupu

Zdlouhavé formy mají tendenci odradit uživatele. To nejlepší, co můžeme udělat, je žádejte pouze o vstup, který skutečně potřebujeme. To není důležité pouze z pohledu uživatelského prostředí, ale uživatelé mohou také váhat, aby z důvodu příliš mnoho osobních údajů ochrany soukromí.

Někdy však my ještě pořád musí jít s delšími formami. V tomto případě je to dobrý nápad nakrájejte na menší kousky, a sloužit kousky jako postupné obrazovky.

Mnohé weby elektronického obchodu (např. Amazon) používají toto řešení ke snížení míry opuštění košíku.

Chceme-li usnadnit vyplňování formulářových polí, platí pravidlo omezit rozptylování a akce uživatele co nejvíce.

Příklad: Personalizovaný výběr vstupů

Různé nástroje pro výběr obsahu, například nástroje pro výběr data nebo výběr barev, usnadňují nejen přijímání správného vstupu, ale také tvoří formulář více atraktivní, a významně snížení uživatelských chyb.

Todoist seznam-brát aplikaci poskytuje personalizované rady v okamžiku, kdy uživatel přechází během dnů.

Například na obrázku níže, uživatel může vidět, že pro 31.srpna již má 2 řádné úkoly, a může vzít tyto informace do úvahy při rozhodování o správném datu úkolů. Je to skvělý nápad pro aplikaci, kde je produktivita hlavním zájmem uživatele.

Příklad: Vstup přetažení

Návrhy typu drag and drop obvykle pracují dobře s poli pro nahrávání souborů, zejména tam, kde mají uživatelé nahrávat obrázky.

Pravděpodobně nesnižují akce uživatele, které jsou ve srovnání s běžným tlačítkem Nahrát soubor, ale mnohem snazší vyberte, který soubor chce uživatel nahrát, snížení možnosti předložení nesprávného spisu.

WordPress.com nabízí elegantní a intuitivní uživatelské rozhraní pro přetažení uživatelského rozhraní ve formě editoru příspěvků. malé miniatury a vizuální reprezentace již nahraných souborů dále pomáhají uživatelům rychle provádět upload.

Příklad: Překrytí pro odstranění rozptýlení

Pokud jsou uživatelé při vyplňování našeho formuláře rušeni, jsou náchylnější k chybám a také se zlobí snadněji

Překryvy obsahu jsou skvělou alternativou k minimalistickému designu. Používají se složitější stránky zobrazovat různé druhy informací na stejné obrazovce.

Na níže uvedeném obrázku můžete vidět verzi aplikace Booking.com pro stolní počítače. Když uživatelé přejdou na vyhledávací formulář, zbytek obsahu se dostane pokryté šedavým překrytím pomoci jim zaměřit se na proces plnění formuláře.

Dejte nám zpětnou vazbu uživatelům

Dávat správná zpětná vazba ve správný čas může výrazně zlepšit uživatelský komfort.

Ve formuláři jsou dva druhy zpětných vazeb uživatelů:

1. Uvedená zpětná vazba před předložení formuláře - v následujících situacích snížení chyb a míra opuštění formy, např. sledovače průběhu, okamžité ověření vstupu, které okamžitě odmění uživatele za správný vstup, nebo popisky pomocných nástrojů
2. Uvedená zpětná vazba po předložení formuláře - aby se uživatelé dozvěděli dopustili se chyby, například chybové zprávy

Druh zpětné vazby uživatelů, kterou potřebují naši uživatelé, závisí na vlastnostech cílové skupiny a na cíli našich stránek.

Příklad: Progress Tracker

Formuláře delší než jedna stránka, například průzkumy a většina formulářů pro e-Commerce checkout, mohou využít pákový efekt sledování průběhu návrhový vzor. Sledovatelé pokroku dávají okamžitá vizuální zpětná vazba o jejich stavu, a povzbudit je, aby v tomto procesu pokračovali.

SnapSurveys průzkum tvůrce webová aplikace ukazuje malý pokrok tracker přímo nad tlačítko Odeslat, takže uživatelé mohou přirozeně ho vidí.

progresový tracker nepoužívá žádné štítky, ale způsob, jakým je navržen jeho cíl je jasný - počet kruhů udává počet kroků, již provedené kroky jsou modré a uživatelé mohou snadno zjistit, kolik kroků je ještě před nimi..

Příklad: Validace v reálném čase

Prodejna kosmetiky Body Shop používá validace v reálném čase ve formuláři svého uživatelského profilu k odstranění chyb a zlepšení UX procesu dokončení formuláře.

Vstupy jsou kontrolovány, zatímco uživatelé vyplňují formulář a správné a nesprávné odpovědi jsou okamžitě označeny snadno rozlišitelné ikony o něco dále vpravo, ale stále ve viditelné oblasti.

Příklad: Expresní popisky

Rozumná mikroskopie je také nezbytnou součástí úspěšné zpětné vazby uživatelů ve formě formuláře. Podle definice se mikroskopie webové stránky skládá z malé kousky textu používá se v různých prvcích - štítky, tlačítka, chybové zprávy, popisky nástrojů atd.

Ve svém přihlašovacím formuláři odpoví bankovní skupina Barclay na otázky, které mohou uživatelé potenciálně požádat pomocí dobře navržené tipy které zahrnují snadno srozumitelná mikroskopie.

Tipy jsou skryté za málo? ikony nepozorovat uživatele kdo ví, jak vyplnit přihlašovací formulář, ale být vždy přítomen pro uživatele, kteří si nejsou jisti.

Některé z popisků dokonce obsahují trochu vizuální debetní karty s poznámkami tak, aby uživatelé mohli snadno najít data, která musí zadat do přihlašovacího formuláře.