4 Formy UX Tipy, ktoré by ste mali vedieť (s príkladmi)

Máme tendenciu premýšľať o formách ako o jednoduchom prostriedku na zhromažďovanie údajov používateľov, ale sú to aj občas jediná cesta, pre našich užívateľov Spojte sa s nami. Je pravdepodobné, že si myslíme, že môžeme urobiť používateľov milovať vyplňovanie formulárov, ale je to iste možné nájsť riešenia, ktoré ich príliš neznepokojujú, a pomôcť im v procese.

Počas prehliadania sietí môžeme nájsť niekedy prekvapujúce riešenia, ktoré sú programovo správne, ale sú navrhnuté takým spôsobom, ktorý s najväčšou pravdepodobnosťou spôsobuje, že mnohí používatelia opustia web kvôli slabému používateľskému zážitku.

Ak sú naše formuláre dobre navrhnuté, budeme schopní nielen potešiť našich používateľov, ale aj tím, ktorý ich môže riešiť oveľa menej vstupných chýb používateľov. V tomto článku sa teda pozrieme na to, ako môžeme minimalizovať chyby vstupu používateľa a stále udržať našich užívateľov spokojní.

Predvídať potreby používateľa

Webové stránky a aplikácie majú rôzne užívateľské základne a ciele, a dokonca aj na tom istom mieste sa môžu nachádzať mnohé formy, ktoré zhromažďujú rôzne druhy údajov, len aby pomenovali tie najčastejšie:

• Prihlasovacie formuláre
• Registračné formuláre
• Formuláre profilu používateľa
• Formuláre na registráciu newsletteru
• Formuláre pre Checkout
• Užívateľské prieskumy
• Kontaktné formuláre
• Formuláre komentárov
• Vyhľadávacie formuláre

Všetky tieto typy formulárov vyžadujú rôzne veci. Pri navrhovaní formulára na platbu je dôležité vierohodne uistiť používateľov o bezpečnosti, zatiaľ čo v prípade formulárov pripomienok je to dobrý nápad pridať emojis alebo iné metódy, ktoré používateľom umožňujú vyjadriť ich skutočnú náladu.

Avšak aj podobné typy formulárov môže byť potrebné navrhnúť inak, ako majú všetky lokality jedinečná používateľská základňa. Pred začatím procesu návrhu je vždy dobré predvídať, čo potrebujú naši používatelia, a zodpovedajúcim spôsobom.

Príklad: Sociálne prihlásenia zacielené na potreby používateľa

Prihlasovací formulár programu Codepen obsahuje tri prihlásenia na sociálne siete s Githubom v hornej časti. Táto voľba by bola neprimeraná pre väčšinu lokalít.

ale je to ideálne pre Codepen, pretože ich používateľská základňa sa skladá z vývojárov, z ktorých mnohí sa budú chcieť prihlásiť pomocou svojich účtov Github alebo si navzájom prepojiť svoje vývojové účty.

Myslite na mobilné zariadenia

Mobilní a desktopoví užívatelia majú rôzne potreby, ale ako vyplnenie formulárov je oveľa väčšia výzva na mobilnej obrazovke, používa ručné gestá ako na fyzickej klávesnici, a mobilný prvý prístup môže nás vziať ďalej, keď chceme navrhnúť použiteľné formuláre.

Navyše, veľa vzorov UI, ktoré fungujú dobre na mobilných zariadeniach, bude fungovať aj na pracovnej ploche.

Príklad: Ovládacie prvky s otvormi

Vysokokvalitné mobilné formuláre si nemožno predstaviť bez viditeľné ovládacie prvky na ktorých mobilní používatelia môžu ľahko klepnúť s prstami.

Formulár na prihlasovanie do bulletinu webovej konferencie An Event Apart sa prispôsobuje spôsobu prístupu mobilných používateľov na obrazovku - obsahuje dve vstupné polia ľahko klepnite a a tlačidla veľkosti prsta.

Pole na zadávanie textu sú vyššie ako obvykle, takže ich mobilní používatelia môžu ľahko klepnúť na nich a veľké oranžové tlačidlo s ikonou kliešťa ďalej povzbudzuje používateľov, aby odosielali formulár.

Verzia počítača na ploche používa rovnaký dizajn formulára, ako to tiež vyzerá dobre a funguje dobre na väčších obrazovkách.

Príklad: Spotrebný vstup

Pri navrhovaní formulárov pre mobilné zariadenia je vždy dôležité zvážiť, ako môžeme minimalizujte priestor, ktorý používame. spotrebný vstup Model dizajnu používateľského rozhrania sa v poslednej dobe stal veľmi populárnym a funguje to najmä na mobilných zariadeniach.

Spoločnosť Booking.com používa tento vzor vo vyhľadávacom formulári na svojom mobilnom webe. Keď sa používateľ zapíše do vyhľadávacieho poľa, rozbalí sa ponechajte viac miesta na gestá, a pod ním sa zobrazí aj zoznam s odporúčaniami.

Keď používateľ vybočuje z poľa, zmenší sa a dodatočné informácie zmiznú.

Príklad: Morphing Button

Morphing tlačidlá vezmite spotrebiteľský vstupný vzor o krok ďalej, pretože užívatelia najskôr vidia tlačidlo, ktoré potom morphs do formy keď sa na ňu dotknú.

Nižšie uvedený obrázok obrazovky je z úžasného článku štartovacieho programu o inovatívnom dizajne formulárov, ktorý prezentuje mnoho ďalších kreatívnych riešení.

Zjednodušenie odovzdávania vstupov

Dlhé formuláre majú tendenciu odrádzať používateľov. To najlepšie, čo môžeme urobiť, je len požiadajte o vstup, ktorý skutočne potrebujeme. Toto nie je dôležité iba z perspektívy používateľov, ale používatelia môžu tiež váhavo poskytnúť príliš veľa osobných informácií kvôli záujmov o súkromie.

Niekedy však my stále musia ísť s dlhšími formami. V tomto prípade je to dobrý nápad nakrájajte ich na menšie kúsky, a servírujte kúsky ako postupné obrazovky.

Mnohé stránky elektronického obchodu (napríklad Amazon) používajú toto riešenie, aby znížili mieru opustenia košíka.

Ak chceme uľahčiť vyplnenie formulárových polí, je to pravidlo znížiť narušenia a akcie používateľov toľko, koľko sa dá.

Príklad: Personalizovaný výber vstupov

Rôzne vyberače obsahu, ako sú napríklad vyberače dátumov alebo vyberače farieb, nielenže uľahčujú prijímanie správneho vstupu, ale tiež robia formulár atraktívnejší, a významne znížiť chyby používateľov.

Aplikácia zoznamu Todoist poskytuje osobné tipy v rámci svojho výberu dátumov, keď sa používateľ počas dní pohybuje.

Napríklad na snímke na obrazovke nižšie používateľ môže vidieť, že pre 31. augusta už má 2 riadne splnené úlohy a môže brať tieto informácie do úvahy pri rozhodovaní o správnom dátume úloh. Je to skvelý nápad pre aplikáciu, kde je produktivita hlavným záujmom používateľa.

Príklad: Vkladanie a presunutie vstupu

Drag-and-drop návrhy zvyčajne fungujú dobre s políčkami na nahrávanie súborov, najmä tam, kde majú používatelia nahrať obrázky.

Pravdepodobne neredukujú akcie používateľov toľko v porovnaní s bežným tlačidlom Nahrať súbor, ale uľahčujú to vyberte súbor, ktorý chce používateľ nahrať, čo znižuje pravdepodobnosť odoslania nesprávneho súboru.

WordPress.com poskytuje elegantné a intuitívne uchopenie a pustenie užívateľského vstupného rozhrania vo formulári editora príspevkov. malé miniatúry a vizuálne zobrazenie už nahraných súborov ďalšie pomôcť používateľom rýchlo vykonať odovzdanie.

Príklad: Overlay pre odstránenie rozptýlenia

Ak sú používatelia roztržitý pri vyplňovaní nášho formulára, sú viac náchylní na chyby a ľahšie sa obťažujú

Prekrytie obsahu sú skvelou alternatívou k minimalistickému dizajnu. Používajú sa komplexnejších lokalít ktoré chcú zobrazovať rôzne druhy informácií na tej istej obrazovke.

Na snímke obrazovky nižšie môžete vidieť verziu prehliadača spoločnosti Desktop. Keď sa používatelia umiestnia na vyhľadávací formulár, zvyšok obsahu dostane pokryté šedivým prekryvom pomôcť im Zamerajte sa na proces plnenia formulárov.

Spätná väzba používateľom

Poskytovanie správnu spätnú väzbu v správny čas môže výrazne zlepšiť používateľskú skúsenosť.

Vo forme návrhu existujú dva druhy spätnej väzby používateľov:

1. Spätná väzba pred predloženie formulára - aby znížiť chyby a tvoria mieru opustenia, ako sú sledovače pokroku, okamžité overenie vstupov, ktoré okamžite odmeňuje používateľov za správny vstup alebo pomocné tipy
2. Spätná väzba po predloženie formulára - aby používatelia vedeli sa dopustili chyby, ako napríklad chybové hlásenia

Druh používateľskej spätnej väzby, ktorú potrebujú naši používatelia, závisí od charakteristík cieľového publika a od cieľov našich stránok.

Príklad: Progress Tracker

Formuláre dlhšie ako jedna strana, ako sú prieskumy a väčšina formulárov elektronického obchodu, môžu mať vplyv na sledovanie pokroku vzor dizajnu. Sledovače pokroku dávajú okamžitá vizuálna odozva používateľom o ich stave a povzbudiť ich, aby s týmto procesom pokročili.

Webová aplikácia tvorcu prieskumu SnapSurveys ukazuje malý tracker sledovania hneď nad tlačidlami odosielania, aby mohli používatelia prirodzene zachytiť zrak.

tracker nepoužíva žiadne štítky, ale spôsob, akým je navrhnutý uvádza jasný cieľ - počet kruhov označuje počet krokov, už vykonané kroky sa stávajú modrými a užívatelia môžu ľahko zistiť, koľko krokov je ešte pred nimi.

Príklad: Validácia v reálnom čase

Kozmetický predajca Body Shop používa overovanie v reálnom čase vo svojom formulári profilu používateľa na odstránenie chýb a zlepšenie UX procesu dokončenia formulára.

Vstupy sa kontrolujú, kým používatelia vyplnia formulár a správne a nesprávne odpovede sú okamžite označené ľahko rozoznateľné ikony trochu ďalej vpravo, ale stále vo viditeľnej oblasti.

Príklad: Výrazné popisy nástrojov

Pochopiteľná mikroskopia je tiež dôležitou súčasťou úspešnej spätnej väzby používateľov vo forme návrhu. Podľa definície sa mikroskop webovej stránky skladá z malé kúsky textu používané v rôznych prvkoch - štítky, tlačidlá, chybové hlášky, popisy atď.

Vo svojom prihlasovacom formulári Barclayova banková skupina odpovedá na otázky, ktoré môžu používatelia potenciálne požiadať s pomocou dobre navrhnuté popisy nástrojov ktoré zahŕňajú ľahko pochopiteľná mikroskopia.

Nástrojové tipy sú skryté za málo? ikony aby neodvrátili používateľov ktorí vedia vyplniť prihlasovací formulár, ale byť vždy prítomný pre používateľov, ktorí si nie sú istí.

Niektoré tipy dokonca obsahujú trochu vizuálne o anotovanej debetnej karte aby používatelia mohli ľahko nájsť údaje, ktoré musia vložiť do prihlasovacieho formulára.