毫無反應,就只是一張很陽春的表單

表單不單純—深究button&input&form

前幾天幫朋友的研究專題做了小小的設計,他給了我一份html,我負責編寫一份css(必須說少了css的html就像素顏的女生啊)專題內容是一張表單,後來我發現即使只是一張表單,裡面也有不少元素。剛好利用這個機會來好好研究一下button、input、form。


button

W3school上關於button的介紹:button tagbutton CSS
Buttons Guidelines:
iOS Human Interface GuidelinesMaterial Design
按鈕在交互設計中具有舉足輕重的地位,它集結了三大要素—顏色(Color)、字體(Typography)、圖標(Iconography)。

作者在文章中介紹各種按鈕的形式和狀態。以下擷取文章重點:
1. 把按鈕做得像個按鈕妥善運用尺寸、形狀、顏色
2. 注意按鈕的位置和順序。
3. 為按鈕選擇一個適當的標籤(label),說明這個按鈕按下去之後會執行的動作(刪除、送出⋯⋯),或者指向的頁面(更多商品⋯⋯)。

錯用標籤(label)的範例。使用者無法預期點下「你可靠的戰略夥伴」按鈕時會發生的事參考網站

4. 若要將按鈕作為「Call to Action」,更要特別注意設計。

延伸閱讀:
什麼是 Call To Action?優化轉換率的基礎知識。
如何提高 Call to Action的效能?
Call to Action 按鈕的最佳實踐與技巧。

文章提到的按鈕形式:

1. Raised Button
2. Flat Button
3. Toggle Button
4. Ghost Button
5. Floating Action Button

作者建議將Ghost Button作為次要按鈕,以凸顯作為CTA的主要按鈕參考網站
延伸閱讀:
Ghost Buttons in UX Design
Radio Buttons in UX Design
Icons as Part of an Awesome User Experience

文章提到的按鈕狀態:
1. Normal State
2. Focused State
3. Pressed State
4. Inactive State

使用者移入按鈕時獲得良好的視覺回饋參考網站

主要/次要按鈕

下列文章提出設計主要和次要(和其他按鈕時)應注意的要點和技巧。

在Sketch中靈活設計按鈕

下列文章提供很多在Sketch中設計按鈕的技巧,以及如何巧妙運用Symbol特性,製作出一套按鈕。

延伸閱讀:
Sketch symbol best practices

input

W3school上關於input的介紹:input taginput typesinput attributes

這篇文章著重於input的樣式設計,以下擷取文章重點:

1. input需要有清楚的輸入區域。
2. input的寬度要配合內容做調整。
3. input的結構要配合內容做調整。

作者另外特別提到placeholder的使用。為了不要造成使用者混淆,要避免以下三種情況:

1. 把placeholder作為標籤。
2. 把placeholder作為輸入範例。
3. 把placeholder作為提示文字。

作者最後的結論是希望大家在表單設計中可以減少placeholder的使用,文中的參考文章也早在2014年就提到,錯誤的placeholder使用會降低表單的易用性。

錯用placeholder的範例。若使用者需再次確認輸入內容性質必須先刪除輸入的資訊參考網站
延伸閱讀:
Alternatives to Placeholder Text

form

W3school上關於form的介紹:form tagformsform elements
表單是使用者和你的網站/app的對話方式

作者提出表單的五個主要組成要素,以下擷取文章重點:

1. 表單結構(form structure)
− 問題的必要性。
− 問題的順序是否符合邏輯。
− 將相同性質的問題做群組化。
− 單欄式設計你的表單。

2. 輸入區域(input fields)
− 簡化輸入區域的數量。
− 清楚區分必填和選填問題。
− 注意設立的預設值是否為大多數人會選填的選項。
(電腦版限定)讓使用者可以只利用鍵盤的tab鍵就完成一份表單。
(電腦版限定)滑鼠點擊輸入區域時有提示性的視覺效果。
(手機版限定)鍵盤配合輸入區域性質做變化(輸入號碼時變換為數字鍵盤)。

滑鼠點擊輸入區域時,左側的圖標會變色參考網站

3. 區域標籤(field labels)
− 簡短敘述輸入區域的內容性質(「您的姓名是」可以簡化為「姓名」即可)。
− 不要都用大寫英文(「PASSWORD」跟「Password」相比,前者難以閱讀)。
− 區域標籤對齊方式(建議放置在輸入區域上方或是靠左側對齊)。
− 不要將所有的區域標籤以placeholder的方式呈現。

左側表單區域標籤放置在輸入區域上方。右側表單區域標籤在輸入區域左側靠左側對齊。參考網站
延伸閱讀:
Label Placement on Forms

4. 功能按鈕(action buttons)
− 請回到文章開頭參照button的部分。

5. 回饋(feedback)
− 向使用者說明表單有成功提交,或是提交失敗。

針對以上的五個主要組成要素,下列文章提供正確和錯誤的實例分享:

若表單有不少提示性文字或訊息(額外補充資訊),可以參照這篇文章:

若是要設計國際化表單,格式該如何做變換,可以參照這篇文章:


以上是我對button、input、form的相關資訊做的整理,希望可以幫助大家設計出一份能和使用者進行良好溝通的表單。有任何想法都歡迎跟我分享噢!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.