logo-claimlogo-white_stickylogo-claimlogo-claim
  • hello@sharkani.com
  • +421 915 105 575
  • English
✕
SPÄŤ

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou

Máte radi vypĺňanie rôznych formulárov? Vieme, že nie. Chcete nakúpiť na eshope, rezervovať si letenku alebo si len kúpiť lístok do kina. Vypĺňanie zložitých formulárov berieme ako nutné zlo, s ktorým sa musíme vyrovnať. Prečo ale nenávidime samotné vyplňovanie formulárov?

  • Sú zdĺhave a zaberajú veľa času
  • Zložité formuláre sú často ťažko zrozumiteľné
  • Vyžadujú od nás osobné údaje a nevyzerajú dvakrát dôveryhodne

V tomto článku sa bližšie pozrieme na to, ako navrhnúť formulár, ktorý budú vaši zákazníci vyplňovať s radosťou. Prezradíme vám tiež, ako jednoducho môžete zvýšiť percento odoslaných formulárov.

Klasická otázka, jednostĺpcové alebo dvojstĺpcové?

Na základe štúdie, kedy sledovali chovanie používateľov na stránke môžeme povedať, že jednostĺpcové formuláre sú lepšie než viacstĺpcové. Prečo tomu tak je? Na stránke sa bežne posúvame zhora nadol, preto sú pre nás jednostĺpcové formuláre prirodzenejšie a vypĺňajú sa nám jednoduchšie. Výnimka potvrdzuje pravidlo, preto polia, ktoré spolu súvisia môžete umiestniť do riadku (meno a priezvisko, PSČ a mesto).

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Rozdelenie podľa súvislosti

Ak navrhujete formulár so zložitou štruktúrou (napr. objednávkový proces alebo žiadosť o pôžičku), vizuálne ho môžete rozdeliť do viacerých skupín podľa ich súvislosti. Takéto rozdelenie robíme pomocou väčšej medzery medzi poliami alebo nadpismi pre konkrétne skupiny. Používateľ tak výraznejšie vníma pokrok vo formulári.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Popis poľa – kde ho najlepšie umiestniť?

Nedá sa jednoznačne povedať, ktorý z umiestnenia popisov poľa je najlepší. Záleží prípad od prípadu, poďme sa ale bližšie pozrieť, kedy by ste mali použiť ktorý.

Popis nad poľom

Ide o najpoužívanejšie umiestnenie. Jeho najväčšou výhodou je schopnosť sa jednoducho prispôsobiť smartfónom, kedy sa zobrazujú rovnako ako na počítači. Tento spôsob zobrazovania sa hodí pre väčšinu formulárov.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Popis vľavo od poľa

Túto možnosť použijte keď potrebujete zobraziť väčšie polia pre zadávanie údajov. Popis tak získa väčšiu pozornosť a samotný formulár zaberie menej miesta na výšku. Takýto formulár sa zobrazuje dobre iba na počítači, na smartfónoch to väčšinou spôsobuje problémy, kedy nie je viditeľný celý popis, poprípade je polka poľa schovaná za obrázovkou. Preto budete musieť pre takýto formulár vytvoriť ďalšie prototypy zobrazovania na mobilných zariadeniach.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Interaktívny popis poľa

Modernou vychytávkou posledných rokov je interaktívny popis poľa. Ide v podstate o placeholder (popis vo vnútri poľa), ktorý sa po kliknutí na pole presunie animáciou nad samotné pole. Tento spôsob zobrazovania šetrí miesto na stránke a používatelia dokážu animáciu jednoducho pochopiť. Takýto formulár je pre používateľov príjemnejší a navyše pôsobí moderne.

Odporúčame používať pri zložitejších formulároch s viacerými sekciami, pri jednoduchých formulároch môže mať opačný účinok.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Placeholder vo formulári

Hlavnou výhodou, prečo weby využívajú placeholder je značné ušetrenie miesta a zjednodušenie formuláru po vizuálnej stránke. Štúdie ale ukázali, že vo väčšine prípadov placeholder znižuje používateľskú skúsenosť (UX). Komplikujú samotný proces vyplňovania formulára, hlavne ak obsahuje viacero polí. Ľudia si preto nemôžu skontrolovať, aké údaje majú zadať do daného poľa a opraviť možné chyby. Preto ak navrhujete formulár, ktorý bude mať viac ako 3 polia, placeholder by ste zvažovať určite nemali.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou

Napriek jeho značným nevýhodám, môžete placeholder použiť pri prihlásovaní k odberu newsletteru, kedy stačí používateľovi vyplniť iba políčko s emailom.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Tipy pre zlepšenie vášho formuláru
Nebojte sa prázdneho miesta

Popis poľa a samotné pole by mali byť vizuálne zoskupené tak, aby používateľa nemiatli a aby bolo na prvý pohľad jasné, ktoré pole patrí ku ktorému popisu. Taktiež nepoužívajte pre popis a pole rovnakú medzeru ako medzi samotnými poľami.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Vypnite si Caps Lock

Text písaný veľkými písmenami je ťažko čitateľný. Tiež ak v rozsiahlejšom formulári použijete iba veľké písmena, používateľ nadobudne dojem, že naňho kričíte a formulár nevyplní.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Tlačítko s jasným významom

Pomenujte tlačítko vo formulári tak, aby bolo hneď jasné, aká akcia nasleduje po jeho stlačení. Namiesto „Pokračovať“ pomenujte tlačítko „Prejsť na výber dopravy a platby“. BettingExpert dosiahli takmer 32% viac registrácií len vďaka tomu, že správne pomenovali tlačítko. Pamätajte na to, že vaše CTA (call-to-action, tlačítko na ktoré chcete aby používateľ klikol) by malo odrážať zámer používateľa. V registrácií preto použijte tlačítko „Registrovať sa“, pri odosielaní objednávky to je tlačítko „Záväzne objednať“ atď.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Rozlišujte tlačítka na primárne a sekundárne

Primárna akcia je tá, ktorú chcete aby používateľ vo formulári spravil (dokončiť objednávku). Sekundárna akcia je tá, ktorú používateľovi ponúkate, no nemusí ju využiť (použitie zľavového kupónu). Obe tlačítka by mali byť preto vizuálne odlišné. Primárne tlačítko by malo byť vždy výraznejšie, pričom pri sekundárnom je možné použiť iba text.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Tlačítko neaktívne až do vyplnenia formulára

Zaujímavá vychytávka, ktorú môžete využiť aj vo vašom formulári. Spravte tlačítko neaktívne až do momentu, kým používateľ nevyplní všetky polia formulára. Týmto umožníte používateľovi vizuálne skontrolovať údaje pred odoslaním.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Ako uľahčiť vyplnenie formulára?
Automaticke vyplnenie formulára

Vďaka automatickému vyplneniu polí vo formulári znížujete šancu, že používateľ spraví chybu. Podľa výskumu spoločnosti Google, vďaka automatickému vyplňovaniu používatelia vyplnia formulár až o 30% rýchlejšie. Napr. ak je používateľ zaregistrovaný na eshope, tak mu automaticky pri objednávke vyplníte údaje, ktoré o ňom už viete (meno, email, adresa...). Nezabudnite nechať tieto polia editovateľné pre prípad, ak by používateľ potreboval akýkoľvek údaj zmeniť.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Dajte používateľovi vedieť, v akom formáte má pole vyplniť

Predstavte si prípad, že eshop chce od vás telefónnne číslo. V akom formáte pole vyplníte? Pôjdete na to klasicky 09xxx alebo univerzálne +421xxx? A čo dať používateľovi jasne vedieť, v akom formáte má dané pole vyplniť? Vďaka tejto jednoduchej funkcií uľahčíte používateľovi samotné vyplňovanie formulára. Ten už nebude klásť žiadne ďalšie otázky, keďže mu bude všetko jasné.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Overenie správnosti zadaných údajov

Overenie zadaných údajov vo formulári je veľmi dôležité. Najdite polia s chybami a vysvetlíte používateľovi, kde spravil chybu. Vieme napríklad, že email má vždy formát nieco@nieco.domena, telefónne číslo neobsahuje písmena atď. Takto viete jednoducho nastaviť overenie jednotlivých polí formulára.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou

Tento bod ide ruka v ruke s predošlým bodom. Vysvetlíte používateľom všetky požiadavky na údaje a ich formát. Ak má heslo obsahovať šesť symbolov a z toho aspoň jedno číslo, uveďte to. Nenechajte používateľov hádať. Spravte proces vyplňovania formulára jednoduchý a zrozumiteľný.

Drop-down s 2 možnosťami? Nezmysel!

Nepoužívajte dropdown ak dáte používateľovi na výber iba z dvoch alebo troch možností. V takom prípade radšej použite radio button (prepínacie tlačitká). Do troch ponúkaných možností by ich mal používateľ všetky vidieť. Bez ďalších kliknutí.

UX: Formuláre, ktoré budú používatelia vypĺňať s radosťou
Zhrnutie

Ako môžete vidieť, navrhnúť dokonalý formulár nie je jednoduché. UX dizajn hrá v tomto veľkú rolu. Aby ste vylepšili UX vášho formuláru, musíte sa vžiť do kože vášho používateľa. Nechcete predsa, aby používatelia strácali svoj drahocenný čas a ostali sklamaný iba kvôli tomu, že máte zle navrhnutý formulár. Od začiatku ho navrhujte s tým, aby bol čo najviac prehľadný a jednoduchý na vyplnenie. Formuláre su totiž dôležitou časťou mnohých konverzných cieľov (dokončenie objednávky, registrácia, prihlásenie na odber newsletteru...), preto sa uistite, že ich používatelia môžu vyplniť rýchlo a bez chýb.

Zdroj: https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

Máte radi vypĺňanie rôznych formulárov? Vieme, že nie. Chcete nakúpiť na eshope, rezervovať si letenku alebo si len kúpiť lístok do kina. Vypĺňanie zložitých formulárov berieme ako nutné zlo, s ktorým sa musíme vyrovnať. Prečo ale nenávidime samotné vyplňovanie formulárov?

Zdieľať

Neprestávajte čítať

WebP
5. decembra 2022

WEBP – ŠETRNÝ OBRÁZKOVÝ FORMÁT


čítaj viac >
3. októbra 2022

SÚHLAS SO SPRACOVANÍM SÚBOROV COOKIE


čítaj viac >
14. septembra 2022

VIDEO AKO POZADIE NA WEBSTRÁNKE


čítaj viac >

režim čítania

moon moon

SLEDUJTE NÁS AJ NA FACEBOOKU

Najnovšie články

  • ÚLOHA SOCIÁLNYCH SIETÍ PRI VAŠOM PODNIKANÍ
  • WEBP – ŠETRNÝ OBRÁZKOVÝ FORMÁT
  • SÚHLAS SO SPRACOVANÍM SÚBOROV COOKIE
  • VIDEO AKO POZADIE NA WEBSTRÁNKE
  • Moja stáž v SHARKANI
© 2023 Betheme by Muffin group | All Rights Reserved | Powered by WordPress
    • No translations available for this page
      SHARKANI
      Spravujte súhlas so súbormi cookie
      Na poskytovanie tých najlepších skúseností používame technológie, ako sú súbory cookie na ukladanie a/alebo prístup k informáciám o zariadení. Súhlas s týmito technológiami nám umožní spracovávať údaje, ako je správanie pri prehliadaní alebo jedinečné ID na tejto stránke. Nesúhlas alebo odvolanie súhlasu môže nepriaznivo ovplyvniť určité vlastnosti a funkcie.
      Funkčné Vždy aktívny
      Technické uloženie alebo prístup sú nevyhnutne potrebné na legitímny účel umožnenia použitia konkrétnej služby, ktorú si účastník alebo používateľ výslovne vyžiadal, alebo na jediný účel vykonania prenosu komunikácie cez elektronickú komunikačnú sieť.
      Nastavenia
      Technické uloženie alebo prístup je potrebný na legitímny účel ukladania preferencií, ktoré si účastník alebo používateľ nepožaduje.
      Štatistiky
      Technické úložisko alebo prístup, ktorý sa používa výlučne na štatistické účely. Technické úložisko alebo prístup, ktorý sa používa výlučne na anonymné štatistické účely. Bez predvolania, dobrovoľného plnenia zo strany vášho poskytovateľa internetových služieb alebo dodatočných záznamov od tretej strany, informácie uložené alebo získané len na tento účel sa zvyčajne nedajú použiť na vašu identifikáciu.
      Marketing
      Technické úložisko alebo prístup sú potrebné na vytvorenie používateľských profilov na odosielanie reklamy alebo sledovanie používateľa na webovej stránke alebo na viacerých webových stránkach na podobné marketingové účely.
      Spravovať možnosti Správa služieb Spravovať predajcov Prečítajte si viac o týchto účeloch
      Nastavenia
      {title} {title} {title}
      Send me my password
      Your password has been sent by email
      Make a payment
      Total to pay :
      $5
      Powered by Stripe

      Payment could not be made
      Pay now

      Poďme na to

      0$

      Ďakujeme. Kalkulácia aj so sprievodnými informáciami už je vo vašej emailovej schránke.

      Sharkulačka

      Cenová kalkulačka tvorby webovej stránky

      Uvažujete o novej webstránke, no nemáte predstavu aký rozpočet na to budete potrebovať? Využite našu intuitívnu šesťkrokovú kalkulačku, ktorá Vás prevedie výberom podstatných parametrov, na základe, ktorých získate orientačnú cenovú kalkuláciu.
      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      Aký rozsah webovej stránky
      potrebujete?

      Označte 1 možnosť

      onepage

      Jedna stránka (bez podstránok)

      Do 5 podstránok

      6 a viac podstránok

      Musíte vybrať aspoň jednu možnosť
      Ďalej

      Kde sa bude primárne
      webová stránka prezentovať?

      Označiť môžete viacero možností

      Mobil

      Laptop / desktop

      Veľké obrazovky

      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      Aké funkcie na webovej stránke
      potrebujete?

      Označiť môžete viacero možností

      Kontaktný formulár

      Newsletter

      Online chat

      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      Budete potrebovať tvorbu
      obsahových podkladov?

      Označiť môžete viacero možností

      Copywriting

      Fotografie na mieru

      Jazykové mutácie

      Musíte vybrať aspoň jednu možnosť
      Ďalej
      Späť

      To je všetko!

      Orientačnú cenu tvorby vašej novej webstránky na mieru si nájdete na:


      *podmienky spracovania a ochrany osobných údajov

      Summary

      Popis Informácie Množstvo Cena
      Discount :
      Spolu :
      Odoslať
      Späť

      MILÍ ČITATELIA,

      do našich blogových článkov sme pridali novú funkcionalitu, vďaka ktorej si jednoducho zmeníte režim čítania zo svetlého do tmavého režimu a naopak. Stačí kliknúť vpravo na ikonu.

      • Služby
        • Grafika
        • Web
        • Marketing
        • Programovanie
      • Blog
      • Referencie
      • O nás
        • Filozofia
        • Tím
        • História
      • Kontakt
      • English