你我都有在購物網站、服務網站填寫過表單的經驗,以用戶的角度來說,填表單目的是為了使用網站服務,而站在服務商搜集資料是為了後續的應用,像是依照數據優化產品、發送會員edm等..

表單通常會有兩個重要元素(我們先排除輸入錯誤的狀態文字)
標籤(Label)
告訴用戶要在欄位填寫什麼內容。

欄位(Form field)
對應標籤輸入內容的框框。

那麼標籤跟欄位擺上去,可以填寫就好了?

人的視覺範圍有限,沒辦法一眼看見所有內容,所以要組織好欄位與標籤的元素,如果你沒辦法讓用戶短時間理解要提供什麼訊息,或流程不順暢讓用戶感到挫敗感,用戶可能會放棄填寫表單而離開。

好的表單,欄位標籤精簡易懂,表單形式越不複雜,越能激勵用戶完成表單,降低頁面跳出率。

我們先來看看不良的範例,想一下排版的動線如何影響觀看的速度,在來建議欄位較佳的作法。
下方示範我們可以看到標籤齊左後因為字數不一樣,字數較少的標籤與欄位的間距拉長,視線的流動被空白間距阻斷。

要是用戶從欄位回去檢查標題,就必須折返路徑從2回到1或是4回到3。換言之,用戶在短時間內需要花費移動視線的時間比較長,如果欄位較多的情況下有可能出現視覺疲勞,同時也會擔心提交錯誤的信息而放棄表單。

那麼欄位該怎麼做比較好?
我們先介紹欄位可以做成「浮動」跟「靜態」的設計方法,
在列出個別作法的優點及缺點。

浮動標籤欄位

當用戶點擊欄位,預設文字會在過場特效縮小後置頂於欄位內的左上方,
這作法節省了介面空間,看起來有效運用欄位的空間達到很好的效果,操作起來簡單俐落。

浮動標籤範例如下
netflix login
Netflix Login 

過場效果看似酷炫,即時互動能幫助用戶聚焦欄位訊息,但大量使用可能會引發前庭疾病(W3C相關文章),讓患者產生頭暈、嘔吐等生理反應。
建議可以用在數量不多的欄位頁面,像是上方Netflix 在登入頁面使用方式。

靜態標籤欄位

標籤與欄位顯示在表單中,後標籤與欄位之間不具有任何過場動畫。
一般常見的靜態標題欄位有三種做法:

  1. 置頂對齊標籤 Top aligned labels
  2. 內部標籤 Infield labels
  3. 內部置頂標籤 Infield Top Aligned

在UX Movement 有針對這三種作法討論,值得一提的是,第三個「內部置頂標籤」優於其它兩種欄位作法,我們來看看究竟為何?

置頂對齊標籤(Top Aligned Labels)

上方設計稿中標籤加上欄位有八個元素,我們將標籤與欄位分為一組,四組之間留白的行距也要算進視線範圍,雖然用戶不會長時間關注留白的區域,但無形中也會造成視線的阻礙。

內部標籤(Infield Labels)

標籤在欄位中,標籤文字會使用低彩度的顏色,如淺灰色
這個做法好處是注視欄位同時就能理解標籤,但是當用戶輸入訊息,內部標籤文字會消失,再次檢查必須得刪除寫好的資料,才能看到標籤文字,這做法顯然是在添加用戶的麻煩,。

內部置頂標籤(Infield Top Aligned Labels)

標籤在欄位中齊左置頂,用戶可以在一個欄位中注視著標籤並同時輸入資料,每組欄位緊密,當用戶切換到下個欄位,可以在指定區域更快掃視訊息,減少額外的視覺負擔,降低犯錯的機率。

表單提供了網格,且文字輸入的長度暗示了欄位的寬度,因此很容易查詢欄位,舉例來說,Email有後綴會預留給用戶比較寬的欄位,在表單上比較好查找(範例如右下)。

內部置頂標籤案例

credit by :https://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

總之,讓用戶高效率填寫資訊又能寫完快速檢查欄位,當您的表單同時滿足這兩個需求時,用戶完成表單的機會就很高。

本篇引用UX movement,UX Experience的文章。

文章有說明不當之處,歡迎留言或來信指正