Back to Question Center
0

Navrhovanie rozloženia formulára: Zarovnanie            Navrhovanie rozloženia formulára: Zarovnanie Vzťahované témy: Mobile Semalt

1 answers:
Návrh rozloženia formulára: Zarovnanie

Nasleduje stručný výňatok z našej knihy "Projektovanie UX: Forms", ktorú napísala Jessica Endersová. Je to konečný sprievodca tvorbou dizajnu, kľúčovou súčasťou efektívneho dizajnu UX. Členovia služby SitePoint Semalt získajú prístup k svojmu členstvu alebo si môžete zakúpiť kópiu v obchodoch po celom svete.

Vy a kamarát sa každý večer vydáte do reštaurácie. Obe vaše trasy idú po diaľnici s dvoma pruhmi. Diaľnice majú rovnakú dĺžku. Na vašej ceste všetky pomalé autá robia správnu vec a držia sa na jednom jazdnom pruhu, aby ste mohli v druhej pretekať. Cestou vášho kamaráta sú pomalé autá roztrúsené po obidvoch jazdných cestách, takže sa musí tkať dovnútra a von. Ktorý z vás sa dostane do reštaurácie ako prvý?

Vertikálna cesta k dokončeniu

Rovná a neobmedzená trasa je najrýchlejšia na jazdu, ako aj na plnenie formou. Takže ďalším krokom je vertikálne zoradiť všetky polia formulára a hlavné tlačidlo na stránke (nazvané hlavné tlačidlo akcie ):

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Nedávajte si na seba otázky

Vzhľadom na to, že vertikálna cesta k dokončeniu je dlhšia, môžete byť pokúšaní vytlačiť niektoré otázky vedľa seba:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

V tejto podobe boli otázky týkajúce sa bezpečnostného kódu a poštového kódexu položené vedľa iných otázok

Toto je zlé z týchto dôvodov:

  • Prerušuje plynulý tok cez formulár (ako rozbité auto vo vašom rýchlom pruhu).
  • Používatelia často nevidia otázku na pravej strane, pretože sú mimo zameranie ich vízie (je to len asi deväť znakov).
  • Zabraňuje bezproblémovému spracovaniu formulára na veľkých aj malých obrazovkách. (Viac o tomto krátko.)

Takisto, ako si môžete spomenúť z kapitoly 3, pre užívateľov je to dôležitá vnímaná dĺžka formulára, nie skutočná dĺžka. Vertikálna cesta k dokončeniu spôsobuje, že forma sa plní nielen objektívne rýchlejšie, ale robí to pocit rýchly.

Zarovnanie polí odpovedí

Jeden spôsob, ako môžete niekedy ušetriť miesto, je však s poliami odpovedí. Pozrite sa na pole odpovedí na otázku s povolením na uvedenie na trh:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Vždy, keď sú polia odpoveďa malé, môžeme ich umiestniť horizontálne. (Na tento účel definujeme "malé" ako tri alebo menej možností, všetky s krátkymi štítkami.) Formulár bude stále fungovať na dotyk a na malých obrazovkách. Súhlas na uvádzanie na trh je takouto otázkou:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

V skutočnosti je dátum narodenia tiež otázkou s malými oblasťami odpovedí. Možno ste si neuvedomili, že sme ich už zaradili do jedného riadku:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Ale pamätajte si, že môžete len dať polia odpovede vedľa seba, ak sú malé. V opačnom prípade návrh nebude fungovať v niektorých prípadoch. Napríklad sociálne siete majú pomerne veľa možností odpovedí. Pokúsime sa ich umiestniť vodorovne, budú zhora - najmä na mobilných telefónoch - a vyvolať obávaný horizontálny scrollbar:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Ak umiestnime dlhú sadu polí odpovedania horizontálne, pravdepodobne budeme vykresľovať vodorovnú posuvnú lištu aj na väčších obrazovkách

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Ak naše polia odpovede nie sú malé, je ešte pravdepodobnejšie, že horizontálna posuvná lišta sa zobrazí na mobilnom telefóne.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Vertikálne zarovnanie množín rádiových tlačidiel alebo políčok funguje aj na mobilnom telefóne.

Umiestnenie štítkov

Problém s mobilným zobrazením nášho formulára, ktorý ste si možno všimli na niektorom z vyššie uvedených obrázkov. Na malej obrazovke, keď je zaostrenie v textovom poli, príslušný štítok nie je viditeľný, rovnako ako tento príklad:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Štítky naľavo sa spočiatku zobrazujú, ale zmiznú, keď používateľ začne vyplňovať formulár.

Mohli by sme sa tomuto problému vyhnúť tým, že vždy umiestnime označenia nad polia. To však vytvára nový problém: formulár sa stáva oveľa dlhšie vizuálne.

Ako by to vyzeralo na veľkej obrazovke:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Formuláre sú dlhšie, keď sú štítky umiestnené nad políčkami.

Čo musíte urobiť, je kód formulára reagovať . Ak je obrazovka väčšia, štítky by mali ísť doľava od polí; keď je obrazovka menšia, štítky by mali ísť nad polia. Týmto spôsobom využívame priestor, ktorý máme na väčších obrazovkách, zatiaľ čo zabezpečujeme, že formulár môže byť vyplnený aj na menších obrazovkách.

Ak kód náš príklad formulára reaguje, tak by to vypadalo na mobilnom telefóne:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Na mobilných zariadeniach sú štítky umiestnené nad poliami, takže sú viditeľné, keď ich potrebujete.

Takto by to vyzeralo na väčšej obrazovke:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Tu je skutočný príklad odpovedajúcich štítkov na formulároch - najskôr verzia s väčšou obrazovkou formulára a menšia obrazovka:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Na väčších obrazovkách sú štítky vľavo od polí, takže formulár je pekný a krátky.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Na menších obrazovkách sú štítky nad políčkami, takže sú vždy viditeľné.

A čo To Štúdie?

Jeden z najpopulárnejších článkov na webovej stránke UXMatters a citovaný v knihe a článkoch Lukea Wroblewského je štúdia, ktorú vypracoval Matteo Penzo. Táto štúdia sa často používa ako dôkaz toho, že štítky by mali nikdy ísť doľava od polí, ale vždy vyššie.

Problémom je, že by ste nikdy nemali zakladať rozhodnutia o dizajne na jednej štúdii, najmä na jednej s neznámou metodikou a na veľmi malých rozdieloch vo výsledkoch! Namiesto toho je potrebné zvážiť všetky výhody a nevýhody založené na teórii a pozorovaniach z používateľského výskumu. Keď to urobíte, je jasné, že - na veľkej obrazovke - výhody, že štítky vľavo od polí prevyšujú náklady. Stojí za to veľmi malé zvýšenie očného pohybu tak, aby mala polovičnú formu.

Vyhnite sa žľabu

Okrem toho, čo už bolo povedané, existujú dva spôsoby, ako môžete zvýšiť použiteľnosť vášho formulára, keď máte štítky naľavo od polí. Tieto techniky sú dôležité, aby sa zabránilo veľkému "žľabu", ktoré sa objavuje medzi etiketami a ich poliami odpovedí:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Pri mnohých otázkach na našej príkladovej forme je štítok ďaleko od príslušných polí odpovedí.

Tieto medzery môžu pre užívateľa ťažko spojiť štítky s ich poliami odpovedí.

Ak sú štítky väčšinou krátke, môžete ich nastaviť tak, aby boli zarovnané vpravo, takže sú vedľa polí:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Štítky sú zarovnané vpravo.

Ak sú štítky väčšinou dlhšie, budú ťažko čitateľné, ak sú zarovnané správne. V tomto prípade ich nastavte doľava (podobne ako normálny text), ale pridajte do formulára strih zebra:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Zelená páska za štítkami nastavenými vľavo.

Zebra striping je slabý tieň, ktorý vidíte za každú druhú otázku. Pomáha očnému pripojeniu štítku k poľu (ako to dokazuje štúdia, ktorú som vykonal už dávno a jeho sledovanie).

(Ak sa chcete dozvedieť viac o umiestnení etikiet, napísal som podrobný článok na webovej stránke SitePoint a poskytol som aj nejaký komentár na vlastnom webe. Toto sme urobili s našim príkladom:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Ľavý okraj tlačidla primárnej akcie smeruje ľavým okrajom polí.

Viacstupňové formuláre

Ak formulár prechádza viacerými krokmi, budete musieť poskytnúť používateľom tlačidlá na presun medzi jednotlivými krokmi. Jednou z možností je umiestniť ďalšie tlačidlo v súlade s políčkami v súlade s našimi jednostupňovými formulármi:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Ďalej je našou hlavnou činnosťou, takže je vertikálne zarovnaná s políčkami.

Ďalšou možnosťou je umiestniť ďalšie tlačidlo vpravo a predchádzajúce tlačidlo vľavo (pre anglicky hovoriace publikum):

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Anglicky hovoriaci sa zvyčajne pokladajú za pravú ako dopredu a za ľavú ako späť, takže môžeme zarovnať naše gombíky týmto spôsobom.

Ukázalo sa, že oba prístupy fungujú dobre, ale môžu závisieť od kontextu. Ak si nie ste istí, čo je pre váš formulár správne, spustite testy použiteľnosti s cieľovým publikom.

(Môžete tiež dať viacstupňové formy do akordeónu, ale akordeóny majú množstvo problémov použiteľnosti, takže sa najlepšie vyhnúť.)

Tlačidlá na mobilnom telefóne

Na malých obrazovkách môžete navrhnúť, aby vaše tlačidlá reagovali tak, aby:

  • sú naskladané s primárnym pôsobením na vrch
  • zaberajú celú šírku obrazovky, s výnimkou troch medzery na každej strane (takže sú stále jasne tlačidlá).

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Kódovanie nášho formulára tak, aby zodpovedalo veľkosti obrazovky, môžeme uistiť, že tlačidlá stále fungujú dobre v mobilných zariadeniach.

V súčasnej dobe naša forma vyzerá naozaj dobre a je vysoko použiteľná na zavedenie. Existujú však ďalšie zlepšenia, ktoré môžeme urobiť, ktoré budeme vysvetľovať ďalej

February 28, 2018