Label Left Align followed by Input Field
Posted: June 7, 2009 at 22:20:27 by Dani Iswara. Words count: 523.
Last updated: June 18, 2009 at 15:33:54.
- Label on the left. It may be left or right aligned (helped by CSS). We may find it on Blogspot classic and Joomla's default template.
<label for="author"><strong>Name</strong> (required):</label> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" /> - Label on the right, left-aligned. Most common on WordPress themes.
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" /> <label for="author"><strong>Name</strong> (required):</label> - Label on the above. More common on Blogspot-XML template and Drupal-based sites.
<label for="author"><strong>Name</strong> (required):</label><br /> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" />
Figure 1. From top to bottom: a) left label with left-aligned, b) left label with right-aligned, c) right label with left-aligned, and d) label on the above (yes, that is mine).
- Label Placement in Forms. By Matteo Penzo on July 12, 2006 at uxmatters.com
- Alignment posted on November 20, 2008 by formulate.com.au
- Web form design guidelines: an eyetracking study. By Chui Chui Tan on April 27, 2009 at cxpartners.co.uk.
Simple vertical
The usual eyetracking is from top to bottom. It is more easier to fill out a simple vertical flow. It does not make eyes to work too hard. Except we have a very limited space.
Left aligned
Related to the left-to-right-direction reading culture. I also think left-aligned label (see Figure 1: sample a, c, and d) will be more easier to read. Almost similar with the Avoid Justified Texts (in bahasa Indonesia).
Label on the left
It has a relationship with the flow and accessibility. Just like my previous post, Hearing Web Page (in bahasa Indonesia). Label, on the left (Figure 1: sample a, b, and d), will be heard first, followed by input field. They also said, better if label placed right-aligned close to its input (Figure 1: number b).
Label above input field
Placing label above input field (Figure 1: sample d) also correct based on their recommendation. It has simple vertical rule also. Be careful with the spacing of its previous input field.
Bold label
Some of their results said bold --strong semantically-- label is difficult to read. Other say, the emphasis (Figure 1: sample d) will help difable (differently-abled) users. I do agree if emphasis is used on required field only.
...Labels for most fields are positioned immediately before the field, that is, for left-to-right languages, either to the left of the field or above it, and for right-to-left languages%2Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.
Comment by nomercy on June 18, 2009 at 03:46:30
using Firefox 3.0.11 on Linux Mint 7
terus terang mas Dani, secara rasa pribadi memang saya lebih menyukai bentuk seperti 1.d atau di form komen blog ini ... secara urutan dan kebiasaan ... coba kita ingat kalau mengisi suatu formulir, entah itu form setoran di bank, pajak, atau formulir lainnya ... rasanya semua selalu meletakkan label di atas (rata kiri) dan input isiannya ada di bawah ...
saya belum pernah menemukan bentuk form lain dalam kehidupan sehari-hari *pengalaman saya sih*
dan ini juga mungkin berlaku untuk diterapkan pada form pengisian komentar ... entahlah, apakah karena kebiasaan ataukah memang berpengaruh terhadap penglihatan ... yang jelas saya lebih suka bentuk seperti di form komen ini (nanti saya juga terapkan di blog saya)
Comment by Dani Iswara on June 18, 2009 at 08:32:43
using Firefox 3.0.11 on Gentoo
nomercy,
makasi, pak. mungkin usable-nya terinspirasi dari form offline itu.
untuk yang model vertikal, kerugiannya, jadi butuh panjang halaman yang lebih.
tapi entah mengapa, wordpress umumnya memakai model c.
Comment by rismaka on June 18, 2009 at 09:11:17
using Firefox 3.0.1 on Windows XP
Wordpress sepertinya lebih melihat kepada kerapian..CMIIW.
Saya sendiri lebih suka model b untuk kebergunaannya, tapi lebih condong ke model c dg alasan lebih rapi :)
Comment by Cahya on June 18, 2009 at 10:53:24
using Firefox 3.0.11 on SuSE
Kalau saya pilih yang C (punya-nya wordpress), D oke juga, tapi kan nama depan saya pakai insial "C"..., ha ha..., bukan "D" seperti di blog ini :D
Comment by dani on June 18, 2009 at 12:09:53
using Internet Explorer 7.0 on Windows XP
rismaka,
yang b scanning-nya agak sulit. jadi ini hanya salah satu kekurangakuran aksesibilitas dan usability.
Comment by Dani Iswara on June 18, 2009 at 13:12:27
using Firefox 3.0.11 on Gentoo
Cahya,
blogspot kayaknya lebih mengedepankan usability dibanding aksesibilitas. coba blogspot juga make c. :P
Comment by basuki sutjijanto on June 19, 2009 at 09:31:32
using Firefox 3.5 on Windows XP
saya milih C.... mungkin karena saya pake wordpress...