Scheda articolo

Rendere più efficace un form

Inserito il: 25 settembre 2009 in CSS Web Design |

Uno studio di UX Matters ha rilevato che la posizione ideale per inserire le etichette dei forms è esattamente sopra i campi di input.

In molti forms, le etichette sono posizionate a sinistra dei campi.

In questo caso anche se la creazione di un layout a due colonne sembra una buona soluzione,

invece risulta non essere il layout più semplice da usare.

Per quale motivo?

Perché i forms sono generalmente orientati verticalmente, cioè gli utenti compilano il form dall'alto verso il basso.

Gli utenti sono portati ad analizzare i form facendolo scorrere verso il basso.
E visivamente trovare il campo al di sotto dell'etichetta (label) è più facile che trovarlo alla destra.

Posizionare l'etichetta a sinistra pone anche un altro problema:

utilizzare left-align o right-align per allineare le etichette?

Con il left-align si rende il form più leggibile, ma si allontanano le etichette dai campi, il che rende difficile vedere qual'è l'etichetta associata al rispettivo campo.

Utilizzando il right-align il problema si inverte: si realizza un form più bello, ma meno leggibile.

Posizionare quindi le etichette sopra i campi è la soluzione migliore nella maggioranza dei casi.

Lo studio ha inoltre rilevato che le etichette non devono essere in grassetto, anche se questa raccomandazione non è fondamentale.

In tutti i casi si tende a non affiancare orizzontalmente più etichette con associati i relativi campi per le stesse ragioni di cui sopra.

La leggibilità e l'usabilità del form ne risulterebbe particolarmente compromessa.

In questo caso più efficace risulterebbe affiancare i campi di input ma mantenere le etichette al di sopra di essi.

Currently 2.21/5
1
2
3
4
5

Rating: 2.2/5 (42 voti)

0 Commenti

Non ci sono commenti per questo articolo.

TOP

Commenta

Categorie

Apache - (1)

Browser - (1)

Code - (2)

CSS - (3)

HTML - (1)

JQuery - (1)

Linux - (1)

PHP - (2)

Tools - (1)

Tutorials - (1)

Web Design - (2)

Web development - (1)

Web Marketing - (1)

Ultimi Post

Come creare un contatore stile Twitter

L'allineamento dei campi in un form

Rendere più efficace un form

Evidenziare un codice d'esempio

Google Maps & Phoogle Mods

Cos'è babita

BabitaMedia è un team di professionisti che sviluppa applicazioni web customatizzate per il marketing Online.
Realizziamo strumenti che consentono l'interazione degli utenti con altri utenti o con il brand.
Nello specifico si occupa dello studio e della progettazione di:

Web applications: siti dinamici, piattaforme PHP e MySQL

Database management: analisi dati, normalizzazione, pulizia dati

Grafica: web design, banner, print advertising

Scarica la presentazione
Download (.pdf 2.2MB)