Web Form Design: vitríny a řešení

Smashing Editorial

o autorovi

Smashing team miluje vysoce kvalitní obsah a stará se o malé detaily. Prostřednictvím našich online článků, rozbíjení knih, e-knih i rozbíjení … více aboutThe Smashing Editorial↬

  • 11 min read
  • uloženo pro offline čtení
  • Sdílet na Twitteru, LinkedIn

tento přehled obsahuje ručně vybraný a organizovaný výběr nejužitečnějších a nejoblíbenějších článků časopisu Smashing týkajících se designu webových formulářů a publikovaných zde po celá léta.

rychlý přehled

  • užitečné nápady a pokyny pro dobrý design webových formulářů
  • design webových formulářů: vitríny a řešení
  • design webových formulářů: moderní řešení a kreativní nápady
  • rozsáhlý průvodce použitelností webových formulářů
  • při hledání dokonalého
  • ověření webových formulářů: osvědčené postupy a návody
  • ověření pole formuláře: přístup pouze k chybám
  • vzory návrhu webových formulářů: registrační formuláře
  • vzory návrhu webových formulářů: Registrační formuláře, Část 2
  • nové přístupy k navrhování přihlašovacích formulářů
  • inovativní techniky pro zjednodušení registrací a přihlášení
  • formuláře založené na CSS: moderní řešení
  • formuláře na mobilních zařízeních: moderní řešení
  • odstranění kamenů úrazu v mobilních formulářích
  • zdarma ke stažení: tahák pro navrhování webových formulářů

užitečné nápady a pokyny pro dobrý design webových formulářů

vstupní formulář je základním prvkem téměř všech webových stránek nebo aplikací v těchto dnech. Vstup je základní metodou interakce a v mnoha případech představuje tvrdý konverzní bod mezi úspěchem a neúspěchem. S množstvím času a úsilí, které jsme vynaložili na přivedení uživatelů do našich registračních a kontaktních formulářů, je překvapivé, že nemáme tendenci trávit úměrné množství času samotnými formuláři.

 Best Practices of Web Form Design

ve webových formulářích lze použít řadu technik a prvků k jejich přeměně z naprostých selhání na úspěšné konverzní body. V tomto článku představíme několik zajímavých příkladů a užitečných pokynů pro návrh webových formulářů.

Přečtěte si více …

rozsáhlý průvodce použitelností webových formulářů

na rozdíl od toho, co si můžete přečíst, pepření formuláře pěknými tlačítky, barvou a typografií a spoustou pluginů jQuery nebude použitelné. Přitom byste řešili (nestrukturovaným způsobem) pouze jednu třetinu toho, co představuje použitelnost formy.

v tomto článku vám poskytneme praktické pokyny, které můžete snadno sledovat. Tyto pokyny byly vytvořeny z testování použitelnosti, testování v terénu, sledování webových stránek, sledování očí, webové analýzy a skutečných stížností nespokojených uživatelů na pracovníky zákaznické podpory.

Přečtěte si více …

Web Form Design: moderní řešení a kreativní nápady

webový formulář je často hlavním komunikačním kanálem mezi návštěvníky a vlastníky stránek. Zpětná vazba je vždy důležitá, a proto je nutné zajistit, aby webové formuláře byly snadno srozumitelné a intuitivní. Nicméně i ve formě designu si člověk může dovolit nějakou zdravou část kreativity.

webové formuláře nemusí být nudné a pomocí CSS nebo Flash se můžete snadno ujistit, že jsou přitažlivé a efektivní. Chcete-li si všimnout, musíte přijít s něčím jedinečným a zajímavým — symboly, ikony, barvy, pozice nebo velikost webového formuláře se často používají k dosažení zajímavých návrhových řešení. Hledali jsme nějaké příklady a našli jsme je. Kreativní, originální a neobvyklé webové formuláře.

 Screenshot

níže uvádíme více než 40 (opravdu) krásných příkladů webových formulářů, moderních řešení a kreativních nápadů souvisejících s designem webových formulářů. Některé z příkladů jsou Flash-based; nicméně, ve většině případů můžete snadno vytvořit podobné návrhy s čistým CSS a (X)HTML.

Přečtěte si více …

při hledání dokonalých

s, nebo zcela automatizované Veřejné Turingovy testy, které rozeznávají počítače a lidi od sebe, existují, aby se zajistilo, že uživatelský vstup nebyl generován počítačem. Tyto zvláštní hádanky se běžně používají na webu k ochraně registračních a komentářových formulářů před spamem. Být upřímný, mám smíšené pocity o s. při mnoha příležitostech mě naštvali, ale také jsem je implementoval jako rychlé opravy na webových stránkách.

re

tento článek sleduje hledání dokonalého řešení problému rostoucího množství spamu generovaného člověkem. Podíváme se na to, jak a proč se používají s a jejich vliv na použitelnost, abychom mohli odpovědět na klíčové otázky: Co je perfektní a jsou dokonce žádoucí?

Přečtěte si více …

ověření webového formuláře: osvědčené postupy a návody

v ideálním případě Uživatelé vyplní webový formulář potřebnými informacemi a úspěšně dokončí svou práci. Lidé však často dělají chyby. Zde přichází do hry ověření webového formuláře. Cílem ověření webového formuláře je zajistit, aby uživatel poskytl potřebné a správně naformátované informace potřebné k úspěšnému dokončení operace. V tomto článku půjdeme nad rámec samotné validace a prozkoumáme různé techniky validace a zpětné vazby od chyb, metody a přístupy.

Facebook registrační formulář

vstup uživatele lze ověřit na serveru a na klientovi (webovém prohlížeči). Máme tedy ověření na straně serveru a na straně klienta. Budeme diskutovat o výhodách a nevýhodách každého z nich. Při validaci na straně serveru jsou informace odesílány na server a ověřovány pomocí jednoho z jazyků na straně serveru. Pokud validace selže, je odpověď odeslána zpět klientovi, stránka, která obsahuje webový formulář, je obnovena a je zobrazena zpětná vazba.

Přečtěte si více …

ověření pole formuláře: Chybový přístup

chybové stránky pro ověření pole formuláře jsou hrozné. Právě jste vyplnili 20 pole formuláře, přesto dostanete stejnou nafouklou stránku hozenou zpět do tváře, protože jediné pole se nepodařilo ověřit.

jasně si vzpomínám na často hlasité vzdechy zoufalství během naší poslední studie použitelnosti pokaždé, když se testovací subjekt setkal s chybovou stránkou ověření.

také jsme si všimli, že testovací subjekty, které byly vystaveny chybám validace, začaly v následujících krocích přijímat preventivní opatření, aby se jim vyhnuly, a to tak, že do pole „Název společnosti“ napíšou věci jako „N/A“, pokud máte pochybnosti o tom, zda je pole volitelné.

chybová stránka ověření pole formuláře na BlueNile.com

v Baymard Institute jsme se zamysleli nad tímto problémem a dostali jsme nápad, že nazýváme „pouze chybová pole“ – což je přesně to, o čem je tento článek. Před prozkoumáním této myšlenky se podívejme na tři tradiční typy validačních technik: „stejná stránka znovu načíst, „“optimalizované stejné stránky znovu načíst“ a “ live inline validace.“

Přečtěte si více …

vzory návrhu webových formulářů: registrační formuláře

pokud chcete maximalizovat příjmy z vaší služby, musíte maximalizovat míru dokončení vašich webových formulářů. Pokud nemáte nějaké revoluční nápady, jak zapůsobit na své návštěvníky na první pohled, nestačí jednoduše umožnit uživatelům zaregistrovat se na vašem webu. Aby služba mohla dosáhnout maximální expozice, musíme my, designéři, poskytnout uživatelům dobrý uživatelský zážitek. Musíme je pozvat, popsat jim, jak služba funguje, vysvětlit jim, proč by měli vyplnit formulář a navrhnout výhody, které na oplátku dostanou. A samozřejmě bychom jim měli také velmi usnadnit účast.

navrhování efektivních webových formulářů však není snadné. A má to jeden jednoduchý důvod: nikdo nemá rád vyplňování formulářů-ani offline, ani online. Proto, jako designéři, musíme přijít na správná rozhodnutí o designu, aby bylo vyplnění formuláře snadné, intuitivní a bezbolestné.

 vzory návrhu webových formulářů

ale jak přesně můžeme přijít na tato rozhodnutí? Kde by měl být odkaz na formulář umístěn v rozvržení? Jak bychom to měli navrhnout? Jak bychom měli štítky zvýraznit a jak je zarovnat? Jak vypadají vzory designu webových formulářů na moderních webových stránkách? To byly přesně otázky, které jsme si položili. A abychom získali odpovědi, provedli jsme průzkum.

níže uvádíme výsledky našeho průzkumu současných vzorů návrhu webových formulářů — výsledky analýzy 100 populárních webových stránek, na kterých by webové formuláře (měly) záležet. Rozhodli jsme se nejprve začít s registračními formuláři. První část našich zjištění uvádíme níže; druhá část výsledků průzkumu bude zveřejněna příští týden.

aktualizace: druhá část výsledků průzkumu je nyní také zveřejněna: vzory designu webových formulářů: registrační formuláře Část 2.

Přečtěte si více …

Web Form Design Patterns: Registrační formuláře, Část 2

minulý týden jsme představili první zjištění našeho průzkumu webových formulářů. Hlavním cílem průzkumu bylo poskytnout návrhářům a vývojářům určitou intuici o tom, jak jsou navrženy efektivní webové formuláře; také jsme představili několik pokynů, jak lze dosáhnout efektivního a uživatelsky přívětivého webového formuláře.

 Screenshot

zaměřili jsme se na registrační formuláře, protože jsme chtěli zvážit další klíčové formuláře (např. Poté jsme prošli každou registrační formou vybraných webů a analyzovali návrhové přístupy implementované v těchto formách. Níže uvádíme druhou část našich zjištění-výsledky našeho průzkumu mezi webovými formami 100 populárních webových stránek, na kterých by webové formuláře (měly) záležet.

Upozorňujeme, že tento příspěvek není o pokladních formulářích — to je téma pro další diskusi, můžeme je zvážit samostatně v jednom z nadcházejících příspěvků. Rádi bychom poděkovali Wufoo za to, že nám poskytl rámec pro provádění našeho průzkumu.

Přečtěte si více …

nové přístupy k navrhování přihlašovacích formulářů

pro mnoho z nás je přihlášení na webové stránky součástí naší každodenní rutiny. Ve skutečnosti, pravděpodobně to děláme tak často, že jsme přestali přemýšlet o tom, jak se to dělá… to je, dokud se něco pokazí: zapomeneme naše heslo, naše uživatelské jméno, e-mailovou adresu, se kterou jsme se zaregistrovali, jak jsme se zaregistrovali, nebo i když jsme se vůbec zaregistrovali.

tyto zkušenosti nejsou pro nás jen frustrující, ale jsou špatné i pro podniky. Jak zlé? Analýza uživatelského rozhraní Engineering 1 významného online prodejce zjistila, že 45% všech zákazníků mělo v systému více registrací, 160 000 lidí každý den požádalo o své heslo a 75% těchto lidí nikdy nedokončilo nákup, který zahájili, jakmile požádali o své heslo.

Gowalla
přihlašovací formulář na Gowalla.

kromě toho návštěvníci, kteří nejsou přihlášeni, nevidí osobní pohled na obsah a doporučení webových stránek, což snižuje míru konverze a zapojení. Takže přihlášení je velký problém?—?dost velký, že některé webové stránky začaly zkoumat nové návrhy řešení pro starý problém.

Přečtěte si více …

inovativní techniky pro zjednodušení registrace a přihlášení

existuje mnoho způsobů, jak navrhnout registrační a přihlašovací formuláře. Většina návrhářů jsou obeznámeni s konvenčními způsoby. Pochopení a použití několika inovativních technik by však mohlo usnadnit a zefektivnit vyplňování formulářů. V tomto článku bychom rádi představili několik nových nápadů, které by mohly být užitečné pro vaše další návrhy. Vezměte prosím na vědomí, že před použitím těchto technik byste se měli ujistit, že mají smysl v kontextu, ve kterém je budete používat. Rádi bychom se dozvěděli o vašich případových studiích a testech použitelnosti, které potvrzují nebo odmítají návrhy navržené níže.

Přečtěte si více …

formuláře založené na CSS: moderní řešení

registrační a zpětné formuláře najdete všude. Každý start-up se snaží přilákat pozornost návštěvníků, Takže webové formuláře jsou stále důležitější pro úspěch každé společnosti. Nakonec přesně tyto webové formuláře odpovídají za první kontakt s potenciálními zákazníky. Pojďme se podívat, která moderní řešení může webový vývojář použít a navrhnout svůj další formulář založený na css. Odkazy kontrolovány: Smět / 08 2008.

Přečtěte si více …

formuláře na mobilních zařízeních: moderní řešení

mobilní formuláře mají tendenci mít podstatně více omezení než jejich bratranci na ploše: obrazovky jsou menší; připojení jsou pomalejší; zadávání textu je složitější; seznam pokračuje. Omezení počtu formulářů v mobilních aplikacích a webových stránkách je tedy obecně dobrý nápad. Pokud chcete vstup od uživatelů na mobilních zařízeních, přepínače, zaškrtávací políčka, výběr nabídek a seznamů mají tendenci fungovat mnohem lépe než otevřená textová pole.

omezení však plodí inovace a mobilní formy se neliší. Omezení mobilních zařízení přinutila vývojáře a designéry najít nové způsoby, jak uživatelům umožnit rychlejší a snadnější zadávání dat. Díky moderním řešením uvedeným v tomto článku nemusí být mobilní prostor místem, kde se vyhnout formám mnohem déle. Místo toho se může stát místem, kde je povzbudíte.

Přečtěte si více …

odstranění kamenů úrazu v mobilních formách

před několika týdny jsem byl docela překvapen, když jsem viděl, jak se chodník rychle blíží, když jsem byl na procházce. Když jsem tam byl ohromen, brzy jsem si uvědomil, co se stalo: spadl jsem. AU. B-minus. Normálně se snažím být co nejvíce pozorný, ale tentokrát mi velká trhlina v chodníku zachytila botu a zcela mě vyvedla z rovnováhy.

mobilní klopýtnutí

pokud jde o vyplňování formulářů na mobilním telefonu, pozoroval jsem mnoho uživatelů, kteří narazili na podobnou zkušenost, pouze méně bolestivou ve svém fyzickém aspektu. Mnoho prvků v mobilní podobě ovlivňuje, jak hladce se uživatelé dostanou ke službě nebo produktu, který se skrývá za formou jakéhokoli druhu.

existuje několik faktorů, které lze považovat za úskalí po celou dobu vyplňování formuláře. Konkrétně na přenosném zařízení je tato cesta komplikována skutečností, že musíme zvážit kontextové parametry, jako je čas, umístění nebo omezené možnosti vstupu, ve srovnání s pevným desktopovým zážitkem. V tomto příspěvku se podíváme na nejčastější úskalí pro mobilní zařízení. Kromě toho budu diskutovat o strategiích návrhu, abych se vyhnul úskalím a usnadnil bezpečnou a rychlou procházku formuláři pro mobilní uživatele.

Přečtěte si více …

zdarma ke stažení: Cheat Sheet pro navrhování webových formulářů

formuláře, formuláře, formuláře: tak často přehlíženy v designu. V tomto příspěvku, jsme rádi, že můžeme vydat Cheat Sheet Form Design, vytvořil Joe Leech a vydal pro Smashing Magazine a jeho čtenáře. Tento postýlka list obsahuje šablonu Omnigraffle, stejně jako Photoshop (PSD) a PDF příklady si můžete stáhnout a použít, jak si přejete. Vytiskněte list, přilepte jej na zeď, pošlete jej klientům a obecně pomozte všem formulářům o něco lépe.

 design formuláře

návrháři listu postýlky strávili roky navrhováním a testováním formulářů a rozhodli se shrnout nejčastější problémy a problémy, které se objevují v jejich projektech.

Přečtěte si více …

možná vás bude zajímat také následující výběr“ nejlepší z“:

  • prvky webového designu: příklady a osvědčené postupy
  • Navigační vitríny webového designu
  • použitelnost & uživatelská zkušenost

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.