最近開始應用自學的程式能力尋找新的金源機會，打算逐步將一些工具做開放，以賺取微薄的津貼。然而寫了許多種程式卻沒什麼碰最熱門的JavaScript，對於CSS也一樣不時很能行。網頁的黃金三角我只摸了Html而已，但也僅僅是摸了...說有多少能力，我是不敢說。就因為這樣，開發的時程就是久，因為凡事不熟，每需要一種小功能就要再上網找答案。好不容易勉強做完一個專案，就連自己都嫌棄不好用，所以就再重新做一個。
而今天這篇要講的就是第一版與第二版的設計想法及改善。目前第一版的網頁已經被我下架了，或許哪天第二版也會被我下架，這邊是目前的速巨資訊官網與連結，反正重點是在使用介面與使用體驗，不是我的網站。
閱讀者需要的先期知識
這是幫助農友整理作物與農藥的服務申請系統，因此會請農友提出作物及藥劑資訊。而比對時作物會有不同等級的階層，例如：蔬菜-豆菜類-豆科豆菜類-豌豆；藥劑也有對應的規格資料，包含：製劑類型、濃度、政府規定的普通名稱、廠商樹立識別性的商品名稱等。這些資料若無法理解下方影片介紹也會有介紹。
第一版的影片介紹
第一版的功能設計
當時心想作物與藥劑如果都在相同位置搜尋，那對使用者體驗一定是一個不錯的幫助，因此使用單一搜尋列進行搜尋時，我就下指令讓他找所有作物與所有藥劑，過程當中還要排除沒有推薦藥劑的作物(已事先整理過)，來增加使用者體驗，與促進使用介面的簡潔。
另外搜尋過後為增加使用者體驗，搜尋功能更增加下列幾點優點：
1.自動清除搜尋列：與一般搜尋習慣不同，這邊的搜尋只會執行一次，就會改變名稱找下一項作物或藥劑，考量使用者手動刪除的重複操作，加入功能自動刪除搜尋文字，來提升使用者體驗。
2.優先顯示未查詢到的資訊：因為有些時候查到的資料太多，當往下閱讀後才發現沒有資料會有白忙一場的感覺，所以就先讓使用者知道，沒了!別找了!
3.提供單字元搜尋功能：因為在眾多資料中不能避免有生難字出現，我如果要求查詢資料完全一致，那肯定會導致體驗下降。
4.提供跳躍功能：有些單字，如：「菜」，可以把一堆資料挖出來，但是看完作物列表太久了，所以在作物表格前、藥劑表格後、及兩表中間都製作跳躍功能。使用者可以快速回到希望抵達的區段。
申請表單規劃也是以簡單明瞭的方式進行，在一頁式的頁面下就可以看到所有的項目，可減少對於表單填寫的未知感，提升使用好感度。
而使用Google Site服務的限制，使得使用者介面受限，影響如下：
1.Google Site網頁框架固定，不能因應網頁調整大小，所以查詢作物或藥劑遇到資料很多時，電腦版就不容易使用了，而在手機板又更難使用。
2.申請表單部分，就算使用拉到Google Site提示的12欄顯示，bootstrap功能一樣不會視為大螢幕，導致原本電腦版的橫向排版變成手機板的直向排版。但不嵌入Google Site就可以正常顯示。
3.申請表單因為設定doPost有頁面轉跳，在Google Site下被限制，導致無法送出form submit的Post請求。
在原本的設計之下，查詢及申請是不同的頁面，但在使用者體驗的情況發現，要記住編號是非常困難的，因為不是大家隨手可以寫筆記(不管紙本或慣用程式)，最終因為：1.要記編號再填表單、2.使用者介面分離導致使用體驗不順，兩大主因下，重新規劃一體頁面，也就是現在的第二版。
第二版功能設計
1.編號對使用者來說不是必要資訊，因此利用JS功能將搜尋結果寫出互動式按鍵，不僅省下介面空間，還增加使用者體驗。
2.互動加入按鈕使用後，清空當下搜尋結果。
不論是作物或是藥劑，有相同用字的機會較沒有相同用字的機會小很多，因此在加入完成後，自動清空搜尋結果有助於維持頁面簡潔，也可以讓使用者更精確地把焦點放在特定位置上，加速完成表單，提升使用者體驗。協助我測試的朋友都希望我將搜尋結果留下，但我也實際測試過留下後的感覺，使用上確實不是非常順手，因為我協助登打農友的藥劑清單時沒有幾個字是重複的。而列表有時長度較長，加入藥劑後藥再回到搜尋列非常不便利。所以最後依然決定清除搜尋結果。
3.焦點式設計：將申請表單分為4區段，每次填寫只可顯示其中一個區段，讓使用者介面更清晰簡明。
4.選擇區段時可自動引導至搜尋欄位，減少滑鼠點擊，加強使用者體驗。
5.搜尋資料時，使用Enter鍵可自動搜尋，不用滑鼠點擊搜尋，提升體驗。
6.藥劑新增利用政府證號搜尋，因打數字比國字來的容易，新增數字搜尋功能可以提升使用意願。
實際經驗：在協助親友使用時，發現打數字真的快很多，尤其當需要登打10支藥以上時，煩躁感就會迎面而來，改用數字確實可以減少不良體驗，未來影片介紹也會請農友以這種輸入模式為主。同時這還會有一項優點，假的藥劑證號是沒辦法找到符合的藥劑，直接協助不會判斷偽藥的農友篩出不合格用藥。
7.避免作物及藥劑選擇錯誤，提供刪除功能。如果選擇兩種以上可顯示全部刪除按鍵，促進快速處理。
原本設計單點滑鼠刪除，後來覺得容易誤刪改成連點刪除，但在手機版本測時時發現，有手機連點兩下時會觸發手機功能，而非網頁功能。因次再改回單點刪除。但改回後就新增了下面一點的設計，新增提示鍵少誤觸。
8.游標滑過按鍵可顯示刪除提示，減少誤按機會。
9.刪除作物或藥劑時後面資料會向前遞補，維持介面完整性。
10.離開焦點區段後，隱藏所有無關緊要的資訊，以促進版面簡潔明確，提升使用者介面舒適性。同時移除按鍵的刪除功能，避免誤觸，提升使用者體驗。
11.協助了解服務的親友認為A4成品只有8號字太小了，因此新增選項可選擇A2、A3、A4三種紙張規格，讓申請人可以決定怎樣的大小適合自己使用。而計價也因規格不同自動用JS調整。申請者可在確認價錢後才下訂單。
12.原第一版信件內容僅有訂單序號、匯款帳號、匯款金額。後來認為如果農友選錯資料，卻說我做錯整理，那也有點尷尬。因此將完整訂單作物、訂單藥劑都明確寄到信箱中，這樣可以讓農友發現下錯訂單時不要對該筆訂單編號匯款，如還是未注意有申請資訊錯誤，那也可以減少誤會。
13.CSS優化當然要比第一版好一些，顏色樸素但不像第一版表格的死板，滑鼠移動還有指示框，可以引導焦點。
--------------
訂單後續資料處理就不是使用GAS了，因為她也是JS系統的語言，還沒駕輕就熟，所以就拿下Excel VBA處理了，比較省事也熟練。
上面大概是一些改版的演進資訊吧，小弟功力尚淺，分享的資訊主是給自己留參，也給壽命不久的第一版一個留念，算是小小作品集。分享的資訊不期待可以嘉惠多方，但如果有收穫覺得值得鼓勵的話，可以幫我把這個客製化服務推廣出去，這樣我就感恩了，謝謝!!
沒有留言:
張貼留言
有任何問題可以詢問，我們會盡量回答