Základné zhrnutie oo tom, ako rozdeliť a rozložiť formuláre na webe, princípy a príklady.

1. Formuláre na webe
Ako ich rozdeliť a rozložiť tak, aby boli použiteľné
Gabriela Véghová, UX designer @ Solarwinds

2. Disclaimer na začiatok - musí to fungovať
práve pre váš prípad
● Ak si to otestujete a funguje to, je to v poriadku, aj keď to porušuje všetky dizajnové
princípy*
● Ak si to otestujete a nefunguje to, nie je to v poriadku, ani keď to spĺňa všetky
dizajnové princípy*
● Ak sa to otestovať nedá**, použite čo najviac štandardný a konzervatívny prístup
* v správnom kontexte, so správnou cieľovkou, spoľahlivo a štatisticky významne;
rule of thumb: použite aspoň 5 ľudí
** otestovať sa to dá vždy, otázka je cena a spoľahlivosť

3. Najjednoduchší prípad - niekoľko málo
vstupných hodnôt, jedna možnosť, ako ich
uložiť (alebo automatické ukladanie)
● typicky kontaktný formulár, jednoduché nastavenia, zadávanie adresy
● údaje sa zadávajú (typicky) lineárne, je možné sa vrátiť k predchádzajúcim poliam,
skontrolovať množstvo a typ nasledujúcich polí
➔ lineárna štruktúra zhora dole

4. Lineárna štruktúra zhora dole - príklady

5. Lineárna štruktúra zhora dole - výhody
● jednoduchá na pochopenie
● jednoznačná
● intuitívna (v našom kultúrnom kontexte čítame zhora dole)
● je jednoduché sa vrátiť a opraviť predchádzajúce polia, skontrolovať nasledujúce
polia (aký dlhý a zložitý ešte bude ten formulár?)
● funguje univerzálne na všetkých zariadeniach (desktop, tablet, mobil, hodinky)

6. Lineárna štruktúra zhora dole - ako na to
Label
Additional info to fill the field
Possible placeholder text
!
Possible validation
Additional action
Submit

7. Lineárna štruktúra zhora dole - príklady

8. Lineárna štruktúra zhora dole - zlé príklady

9. Lineárna štruktúra zhora dole - limity a
nevýhody
● obmedzená možnosť členenia na logické celky - nadpisy, sekcie
● ľudská pozornosť je obmedzená, ako ukladať medzikroky?
● a čo ak máme viacero možných akcií?
- Jeff Johnson, Designing with the mind in mind
➔ pridajme štruktúru zľava doprava

10. Pridajme štruktúru zľava doprava
● väčšie množstvo vstupných polí
● polia sú organizované do logických celkov
● postupujeme stále (prevažne) lineárne, máme (väčšinou) možnosť vrátiť sa naspäť
a opraviť chyby v predchádzajúcich poliach
● typicky dotazníky

11. Pridajme štruktúru zľava doprava - príklady

12. Pridajme štruktúru zľava doprava - výhody,
limity, ako na to
● väčšia možnosť členenia dlhších dotazníkov
● užívateľ nemusí udržiavať pozornosť príliš dlho naraz a môže vypustiť z pamäti
obsah práve odoslanej sekcie
● ak chceme umožniť opravu predchádzajúcich polí, späť a ďalej musia byť intuitívne
● zobraziť dopredu, ako komplexný ten formulár je
● začať zaujímavými otázkami

13. Pridajme štruktúru zľava doprava - zlé
príklady

14. Pridajme štruktúru zľava doprava - zlé
príklady

15. Wizard
● komplexnejšia verzia predchádzajúceho prístupu
● umožňuje obmedziť kroky, ktoré sa dajú navštíviť
● dáva lepší prehľad o tom, čo na nasledujúcich stránkach bude
● typicky dlhšie, napríklad objednávkové, formuláre

16. Wizard - príklady

17. Wizard - ako na to
● jednotlivé kroky - sú klikateľné? sú tam obmedzenia?
● sú názvy krokov dostatočne popisné?
● Ako sa dostať naspäť a ďalej? Sú tam obmedzenia? Je tam validácia?

18. Wizard - zlé príklady

19. Animácie, netradičné riešenia

20. Zhrnutie
● Musí to fungovať práve pre váš prípad
● Polia ukladajte za sebou, zhora dole
● Ak je ich viac, môžete ich zoskupiť do sekcií pomocou nadpisov
● Ak je ich ešte viac, pridajte stránkovanie zľava doprava
● Ak je ich ešte viac, alebo ide o zložitejšiu štruktúru, použite wizard
● (Ak je ich ešte viac, formulár pravdepodobne nie je dobré riešenie)
● Pri animáciách a netradičných riešeniach sa uistite, že slúžia svojmu účelu
Otázky?

21. Animácie, netradičné riešenia

22. Wizard - príklady
Menu item Menu item Menu item Menu item
label field
label field
label field
label field
label field
label field
label field
label field