所有的HTML元件的使用方式，大多可以由w3school習得 ;
但是，w3school沒告訴我們的是為什麼要用這個元件？
或者什麼時候用這個元件？更或者怎樣使用這個元件使用者才會覺得好操作？
因此，小弟本月來分享一下這5年來，前端 User Friendly 的一些開發心得！
也期待板上的高手大大能產生共鳴，分享一些 User Friendly 的開發心得！
(畢竟，工作上一定會遇到奧客完美魔人
)
就先從checkbox開始吧！
假設有一份簡單的金拱門訂餐頁面，源碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<p><center>歡迎光臨金拱門,請勾選您要的餐點點餐：</center></p>
<input type="checkbox" id="menu1" name="menu1" value="1">超值全餐1號餐
<input type="checkbox" id="menu2" name="menu2" value="2">超值全餐2號餐
<input type="checkbox" id="menu3" name="menu3" value="3">超值全餐3號餐
<input type="checkbox" id="menu4" name="menu4" value="4">超值全餐4號餐
<input type="checkbox" id="menu5" name="menu5" value="5">超值全餐5號餐
<p></p>
<input type="checkbox" id="menu6" name="menu6" value="6">超值全餐6號餐
<input type="checkbox" id="menu7" name="menu7" value="7">超值全餐7號餐
<input type="checkbox" id="menu8" name="menu8" value="8">超值全餐8號餐
<input type="checkbox" id="menu9" name="menu9" value="9">超值全餐9號餐
<input type="checkbox" id="menu10" name="men105" value="10">超值全餐10號餐
<p>
<center>
<input type="button" name="order" id="order"
value="送出訂單" onClick="doOrder();">
<input type="button" name="modify" id="modify"
value="修改訂單" onClick="changeOrder();">
<input type="button" name="cancel" id="cancel"
value="取消訂單" onClick="cancelOrder();">
</center>
</p>
</body>
</html>
先看看當我們選好餐點按下送出訂單後會有什麼效果：
大致上就是告知點餐者點的餐點跟歡迎下次光臨的客套話！
而要達到此一目的的JS源碼如下：
function doOrder() {
var msg4Order = '您點的是\n';
if ($('#menu1').prop('checked'))
msg4Order += $('#menu1').val() + '號餐\n';
if ($('#menu2').prop('checked'))
msg4Order += $('#menu2').val() + '號餐\n';
if ($('#menu3').prop('checked'))
msg4Order += $('#menu3').val() + '號餐\n';
if ($('#menu4').prop('checked'))
msg4Order += $('#menu4').val() + '號餐\n';
if ($('#menu5').prop('checked'))
msg4Order += $('#menu5').val() + '號餐\n';
if ($('#menu6').prop('checked'))
msg4Order += $('#menu6').val() + '號餐\n';
if ($('#menu7').prop('checked'))
msg4Order += $('#menu7').val() + '號餐\n';
if ($('#menu8').prop('checked'))
msg4Order += $('#menu8').val() + '號餐\n';
if ($('#menu9').prop('checked'))
msg4Order += $('#menu9').val() + '號餐\n';
if ($('#menu10').prop('checked'))
msg4Order += $('#menu10').val() + '號餐\n';
alert(msg4Order + "感謝您的惠顧,歡迎下次光臨！");
}
因為以上是必備功能，所以基本上與 User Friendly 完全無關
「重點來了，當使用者按下修改訂單或取消訂單要做什麼事呢？」
(不然就強迫使用者棋手無回，下面加註法律標語，流單就告他
)
以我這邊的設計，修改訂單時，就是把所有的勾選取消讓使用的重新選！
因為使用者都意識到要修改了，之前的勾選就是選錯了沒有保留的必要！
這部分的 JS源碼如下：
function changeOrder() {
$('#menu1').prop('checked', false);
$('#menu2').prop('checked', false);
$('#menu3').prop('checked', false);
$('#menu4').prop('checked', false);
$('#menu5').prop('checked', false);
$('#menu6').prop('checked', false);
$('#menu7').prop('checked', false);
$('#menu8').prop('checked', false);
$('#menu9').prop('checked', false);
$('#menu10').prop('checked', false);
}
至於最後的取消訂單，以貼在JS Bin上的案例可能看不太出來跟修改訂單的差異！
具體來說就想像成經過得來速點餐車道時，服務員詢問點餐的當下，
而你回答「我只是要開車迴轉！」的這種情形！
大致上就是讓頁面refresh()重刷，準備迎接下一個客人。
由於重刷的動作就是重新載入頁面，原來的勾選紀錄也會被洗掉。
以上就是小弟的分享，歡迎版上大大及高手們針對Checkbox在使用上還有什麼相關的
user friendly經驗，在此提出分享！
ps. 其實上面這個案例的checkbox建議用個class屬性來操作，JS會少寫一些！
所以所謂 User Friendly 其實就是使用者體驗吧!
btw, 以我的觀點 取消訂單 應該是回到前一頁吧...
主要是我偷懶,因為我設計的範例只有一頁,所以回主頁就是重刷!如果設計有主頁是可以回到主頁或前一頁,這也是比較普遍的做法沒錯！
個人認為在"修改選單"這一個步驟就一次把所有原本選取的全部取消掉...
應該不會是個太好的體驗喔~
因為大多時候不會是"全部都選錯", 而是只有其中一兩個要取消, 或是增加一兩個的情況
尤其以點餐這個使用情境來說更容易是這方面的取向
所以如果使用者一按修改...結果變成原本選好的三五個以上的選項都沒了....
嗯...XDDD
個人淺見, 歡迎不吝指教
一般這樣的情境下, 我會習慣"修改"就是直接回到編輯模式或是開放讓user針對原本的選項做更動, 也就是不會有清空的動作
但會另外做一個類似"clean all"的按鈕給user清除所有選項用
小弟提一下自己的看法,因為tacodrem大大提出的論點正是當初與PM意見相左之處。其實是否全部取消,在於勾選這個動作是否對於使用者困難達成。如果是使用者打字輸入的欄位,原則上修改訂單時確實要喚回使用者之前打的文字內容;然而對於勾選或者下拉選單這類的元件,如果選項夠多,反而保留使用者之前選項,更容易造成使用者重複選錯！試著想想如果我把每個超值餐點再拆成薯條、漢堡、可樂(大、中)後,當選項變成50幾樣的狀況(也許就莫名其妙多了一個蘋果派)！再者,只是點一下勾選並不像打字動作複雜,換個角度也是去訓練使用者習慣元件的操作方式。哪個方式才是正確的並沒有一定的答案,不過本篇就是希望激起大家的使用觀點,來談談user friendly的部分！以上是小弟見解,也歡迎大大們指教。
iThome鐵人賽
看影片追技術