SPARKFUL
죄송합니다. 이 페이지는 해당 언어로 번역이 되어 있지 않습니다. 열심히 노력 중이니 조금만 기다려주시면 감사하겠습니다!

Blog

Insights from the SPARKFUL x Fourdesire teams

表單元素的排列組合,向左走還是向右走?

Wei-Fan Chenuser-interface-design
name

在現代的網站介面中,表單絕對是非常重要的一個人機互動介面元素之一。表單是由許多細小的元素所組合而成的集合體,標題和輸入框的排列方式有著重要的地位。

不過,標題要放在輸入框的左側還是上面?要靠左還是靠右?要怎麼排列才能提高表單的完成率呢?

標題和輸入框常見的排列方式有下列四種:

放在輸入框左邊,而且靠左對齊

放在輸入框左邊,但是靠右對齊

放在輸入框上面

放在輸入框裡面

到底這四種排列方式有什麼不一樣呢?

其實這些排列組合最大的影響都在於使用者視線的移動。

在第一種排列方式中,使用者的視線先看到標題,由於靠左對齊的緣故,我們可以看到表單的左側有著很整齊的虛擬標線,使用者的視線會跟隨著這條虛擬路徑前進,他們會舒服地看完所有的標題,大概的這張表單要求使用者輸入什麼資料。

但是由於標題靠左的關係,標題和輸入框之間的關係就不是這麼明顯,距離也不固定,使用者要來回在標題、輸入框之間呈現Z型(如下圖)的瀏覽路徑,所以對使用者而言輸入上會稍微產生一點障礙,當然也就增加了完成表單的時間。

第二種排列方式可以減少上面所提到的困擾,因為標題靠右對齊,標題和輸入框之間的關係既清楚又明顯,Z型路徑變短了(如下圖),輸入資料就會比較輕鬆。但是由於左側的虛擬標線也變得崎嶇,使用者對於整個表單的概念就會稍微減低,但還不致於造成障礙。

第三種排列方式是直接把標題放在輸入框上面,這個方式完全消除了讓人感到煩躁的Z型路徑,從頭到尾可以較為流暢的閱讀與完成表單,左側的虛擬標線也很整齊,所以使用者的輸入時間也比較短。唯一的缺點是表單看起來變長了,讓使用者心理上感覺好像會花最多時間。

最後一種方式最常出現在註冊或登入的表單上面,把標題直接和輸入框結合,當使用者開始輸入的時候,在輸入框裡的標題便慢慢淡出。視覺動線流暢、垂直高度短、也很容易快速瀏覽表單要求的項目。

這個方式最大的缺點大概就是當使用者開始輸入資料的時候,標題就消失了,偶爾會讓使用者產生混淆。

這四種排列組合的方式有著不同的優點與缺點,適合用在不同的地方。

設計師可以考慮各種狀況採用不同的排列組合。如果你的網站對於垂直空間很要求,那麼第三種排列方式就不能採用了;如果你需要使用者快速的完成表單,第一種排列方式可能不是很好的選項。

Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

立足在擬物與扁平之間

去年微軟發表了 Windows 8 所搭載的 Metro UI 後,就掀起了一陣扁平介面設計(Flat UI Design)的熱潮,許多網站、App、介面設計和互動設計都開始採用了這種風格。Google 在前一陣子的設計革新中也運用了許多扁平設計的元素,就連上星...Read more