iT邦幫忙

1

前端User Friendly設計開發part 1:checkbox

所有的HTML元件的使用方式,大多可以由w3school習得 ;
但是,w3school沒告訴我們的是為什麼要用這個元件?
或者什麼時候用這個元件?更或者怎樣使用這個元件使用者才會覺得好操作?
因此,小弟本月來分享一下這5年來,前端 User Friendly 的一些開發心得!
也期待板上的高手大大能產生共鳴,分享一些 User Friendly 的開發心得!
(畢竟,工作上一定會遇到奧客完美魔人/images/emoticon/emoticon02.gif)

就先從checkbox開始吧!
https://ithelp.ithome.com.tw/upload/images/20181001/20109107xJqX1J3y7R.png
假設有一份簡單的金拱門訂餐頁面,源碼如下:

<!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>

先看看當我們選好餐點按下送出訂單後會有什麼效果:https://ithelp.ithome.com.tw/upload/images/20181001/20109107rRdttjXFoG.png
大致上就是告知點餐者點的餐點跟歡迎下次光臨的客套話
而要達到此一目的的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 完全無關/images/emoticon/emoticon01.gif

「重點來了,當使用者按下修改訂單取消訂單要做什麼事呢?」

(不然就強迫使用者棋手無回,下面加註法律標語,流單就告他/images/emoticon/emoticon39.gif)
以我這邊的設計,修改訂單時,就是把所有的勾選取消讓使用的重新選!
因為使用者都意識到要修改了,之前的勾選就是選錯了沒有保留的必要!
這部分的 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經驗,在此提出分享!/images/emoticon/emoticon12.gif

ps. 其實上面這個案例的checkbox建議用個class屬性來操作,JS會少寫一些!


2 則留言

0
小魚
iT邦高手 1 級 ‧ 2018-10-01 12:11:03

所以所謂 User Friendly 其實就是使用者體驗吧!
btw, 以我的觀點 取消訂單 應該是回到前一頁吧...

主要是我偷懶/images/emoticon/emoticon01.gif,因為我設計的範例只有一頁,所以回主頁就是重刷!如果設計有主頁是可以回到主頁或前一頁,這也是比較普遍的做法沒錯!

1
tacodrem
iT邦新手 5 級 ‧ 2018-10-01 14:01:24

個人認為在"修改選單"這一個步驟就一次把所有原本選取的全部取消掉...
應該不會是個太好的體驗喔~
因為大多時候不會是"全部都選錯", 而是只有其中一兩個要取消, 或是增加一兩個的情況
尤其以點餐這個使用情境來說更容易是這方面的取向
所以如果使用者一按修改...結果變成原本選好的三五個以上的選項都沒了....
嗯...XDDD

個人淺見, 歡迎不吝指教

一般這樣的情境下, 我會習慣"修改"就是直接回到編輯模式或是開放讓user針對原本的選項做更動, 也就是不會有清空的動作
但會另外做一個類似"clean all"的按鈕給user清除所有選項用

小弟提一下自己的看法,因為tacodrem大大提出的論點正是當初與PM意見相左之處。其實是否全部取消,在於勾選這個動作是否對於使用者困難達成。如果是使用者打字輸入的欄位,原則上修改訂單時確實要喚回使用者之前打的文字內容;然而對於勾選或者下拉選單這類的元件,如果選項夠多,反而保留使用者之前選項,更容易造成使用者重複選錯!試著想想如果我把每個超值餐點再拆成薯條、漢堡、可樂(大、中)後,當選項變成50幾樣的狀況(也許就莫名其妙多了一個蘋果派)!再者,只是點一下勾選並不像打字動作複雜,換個角度也是去訓練使用者習慣元件的操作方式。哪個方式才是正確的並沒有一定的答案,不過本篇就是希望激起大家的使用觀點,來談談user friendly的部分!以上是小弟見解,也歡迎大大們指教。

我要留言

立即登入留言