本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ ux ” tag:

縣市升格與網站地址表單雜談

2014年年底的桃園,有什麼變革? 除了吳志揚選輸了,還有一個,縣市升格。

縣市升格,不只是桃園人的事,而是全台灣網頁設計公司、資訊軟體服務公司的事。大家在趕聖誕節檔期、年終檔期、元旦檔期、新年檔期、之餘,還要花心思處理這些事情。
為什麼? 只要網站內有會員資料的,勢必都要做一番更新,除非是黑心公司。

由於行動裝置的發展,網路的發展,電子商務的發展,東西不只是「能動」就好,還要「好用」。有人說 21 世紀是使用者體驗的世紀,就像這年頭的家電產品都會掛個「省電、節能」當宣傳文案,那對於資訊產品而言,最夯的名詞絕對是「使用者體驗」,一個購物網站,如何在茫茫網海中脫穎而出,除了價格戰、行銷戰之外,就是要完美的使用者體驗規劃,滿足各種裝置、各種螢幕尺寸、各種語言、各種地區、各種不同的刁民,讓客人用得高興,覺得爽。

在一些會員制網站、購物網站、抽獎網站、活動網站,通常都有一個填寫地址的表單,用途是為了讓瀏覽者留下地址,然後拿來做各種用途,資料當然是要讓使用者輸入的,不會憑空得來,所以在使用者體驗設計的領域,地址表單也是一個大學問。

一、地址輸入表單是否符合國情?
也許您常聽說某個國外的開放原始碼購物車程式多好多棒,但這就是一個要注意的地方。

為了減少使用者敲鍵盤的時間,或是利用使用者選擇的選項,做一些程式上的判斷(例如切換幣值或網站語系、判斷台灣本島外島),現代網站的地址表單,不會是很長的一大條讓人自由輸入,通常會讓人先選擇區域、縣市,然後使用者只要輸入最後一段街道名即可。

但是對於一些中文化的西方 CMS 或購物車程式,雖然介面是中文的,但是通常還保留著一些原有的設計邏輯與使用習慣,例如姓/名分開,甚至還有中間名欄位,地址輸入欄位也很國際化,選擇國家(Country)、區/州/城市(Region, State, City )、5碼郵遞區號(zip code),地址行1(Address line 1)、地址行2(Address line 2),一個網站的地址輸入欄位,是否符合國情與當地瀏覽者的使用習慣 ?

二、選國家只能用下拉式選單?
國籍的輸入欄位通常是顯示成下拉選單(如下圖),


通常以國家名稱做排序,或是有的會將常見的國家順序排比較前面。
這種方式雖然不需要鍵盤輸入,甚至妳可以按鍵盤的字母,它會跳到那個字母開頭的國家,但有時候還是很難找,例如 台灣有時候在 P 開頭的 (Province of China),有時候在 T 開頭的 (Taiwan, Province of China),有時候在 C 開頭的 (China, Taiwan),後來由於網頁 AJAX 技術平民化,於是有了所謂「自動完成」的輸入表單,只要輸入其中幾個字,系統會列出條件讓你選(如下圖),讓使用者可以少打幾個字。

但是有些敏感地區,有敏感的使用者,在選擇國家時,台灣 變成 China 的一省,這是大部分的台灣人會覺得不爽的,這是國籍認同的問題,但這種事通常也不是工程師能決定的,有時候是公司高層的政策擺明要吃某些國家的豆腐,有時候只是剛好用「網路上的大大」或是「前人傳承」下來做好的地址套件,而且很久沒更新了。

有時候是知識不足,像有些台灣人也分不出華盛頓/華盛頓特區/摩洛哥/摩納哥/利智/智利,你又怎麼會去要求一個老外知道一個世界地圖上一個鼻屎大的小國,明明一樣是講中文,卻跟隔壁那幾個同樣講中文的是不同國家? 但是小國家裡面有些人又覺得兩岸是同一個國家?

三、地址是會更新的,比如縣市升格
接下來是縣市行政區的問題,出於政治上的考量,政策會變更,所以會有縣市升格這種事,要是如果地址沒更新,一般人對於填寫資料時還要選台中縣/台北縣/台南縣/高雄縣這種事通常是覺得有點疙瘩,你不會覺得不爽,大概是因為你不是這些縣市的人。除非網站的產品真的很棒,可以瑕不掩瑜,利大於弊。

除了台中縣/台北縣/台南縣/高雄縣,2014年12月底之後又要多一個了,就是桃園縣。
你家的網站地址表單還有台中縣/台北縣/台南縣/高雄縣嗎?
各大網站、網頁公司的勞工們,已經準備好接受客戶的抱怨了嗎? 準備好裝死了嗎?
對於行政區域名稱的變更細節,可以至中華民國內政部【縣市改制直轄市相關資訊】 或是 中華郵政全球資訊網-中文地址英譯 查詢。

你看淘寶團隊多聰明,對縣市改制不用愁,他根本就沒寫縣市啊 !

地址表單的發展就這樣走到盡頭了嗎? 當然沒有!

比如現在講求智慧、全自動,能少打就少打,於是就把腦筋動到郵遞區號上面。像 The ZIP Code Finder for Taiwan ,使用者只要像平常一樣輸入地址,系統會自動顯示郵遞區號。但是「使用者輸入」這個變因實在太多,比如說會有使用者直接輸入「新竹科學園區」或是「台灣大道」的情況,雖然這種情況也只是個案,但還是不夠完美。

四、超商取貨對地址表單設計的影響?
現在許多購物網站都有提供超商取貨的服務,基本上不管界接哪家物流商系統,「輸入地址的介面」都是由界接的物流服務提供商負責的,由一貫的介面去操作(如下圖為7-11交貨便的門市選擇介面),購物網站不用自己管地址表單要如何設計,只要管資料可以存進會員與訂單的資料表就好了。

超商取貨這件事,對地址表單的變革在哪裡呢 ? 基本上選擇超商取貨、超商取貨付款,會員根本不會在網站上遇到「輸入地址」的情境了,搭配 Facebook 快速註冊,結帳時直接使用 Facebook 帳號內的電話+姓名,甚至一個字都不用打就可以完成購物,實在是懶人到極點。

在購物網站唯一需要輸入地址的場合,只剩填寫退/換貨收件地址的時候,不過有些網購商家都有 7-11 退貨便的服務了,還是一樣不用填家裡地址。也許以後「人妻勾引快遞員」的片子會少一點吧。

五、HTML5 API 的應用
隨著舊瀏覽器的淘汰,HTML5 技術的崛起,許多新網站會使用瀏覽器的 Geolocation API ,去判讀使用者的位置,然後自動選擇地址。例如開啟監理服務網時,瀏覽器會出現一個提示訊息


當使用者按下允許之後,右邊「查詢監理所位置」的下拉選單就會自動變更至您所在的位置,十分方便。

update: Google Chrome 版本 50 之後,必須要有 https:// 的網站才可向使用者要求位置。

六、為使用者著想,就是對設計師與工程師殘忍
但有時候,為使用者著想而多做的功能,在某些時候反而會成為累贅,

比如一般常見的,準備輸入生日時,網頁會跳出小日曆,讓使用者可以用點選的,這也避免後端接收到的使用者輸入資料格式不一的問題。或者是前段提過的「自動完成」功能,使用者只要打一部份的字,系統會列出符合結果,只要直接點選符合的結果就好。

上述兩個功能是很常見的,但是在手機的輸入情境下:


點選輸入框,鍵盤會如上圖那樣彈出來,並觸發 orientation:landspace 的 media query,在這時候如果輸入欄位旁邊還會跳出小日曆,這畫面是難以顯示與操作的。同此概念,「自動完成」功能顯示的符合結果,也會被鍵盤擋住大半,根本選不到搜尋結果,於是又要額外多做控制。

在手機上,如果輸入框太多,會有輸入流程一直被打斷的感覺,使用者要一直重複的點擊輸入框→彈出鍵盤→輸入文字→完成輸入→點選其他輸入框→彈出鍵盤→輸入文字→完成輸入→點選下拉選單,彈出選項(全螢幕)→點選選項→完成選取→點選空白處(讓鍵盤收起來)→點擊送出。更別提送出之後才提示有欄位填寫錯誤,又要回去重填的情況。

七、信用卡號輸入介面,能讓鍵盤少彈出幾次嗎?
在行動裝置遇到鍵盤彈來彈去這種情況,尤其在輸入一些姓/名欄位分開,地址可以選到鄉鎮村里的,或是線上刷卡介面很常見,一個卡號有4個欄位,光輸入信用用卡號就要看 4 次鍵盤彈出來又縮起來的情況,有時候會覺得輸入框就做一條就好了,為什麼要分這麼多條? 於是針對這種東西,又還有更高科技的作法,真的只有一條輸入框,然後自動分段。例如 skeuocardSingle-Field Credit Card Input Pattern | Brad Frost


當然上述這種情況,可以按鍵盤的 next 或是 go 直接跳到下個輸入框,或是執行動作,來減少鍵盤收合/彈出,但是有時候表單中會出現一些特殊改造過的輸入元件(如 taglist input 或 mega drop down select),常常造成按 next 時會跳過那些欄位,或是在最新型的行動裝置上顯示跑版之類的情況。

就跟說謊一樣,說了一個謊,就要說更多的謊來圓這個謊,
多做了一個功能,就要做更多功能來彌補這個功能不足的地方哇 !

八、縣市改制只對地址輸入表單有影響嗎?
縣市改制只對購物網站、會員制網站的地址輸入表單有影響嗎? 當然沒有這麼簡單 !

一些房屋仲介、房屋出租、實體物件租用的網站,網站上面有登陸物件資料,再搭配強大的搜尋功能,讓使用者可以快速尋找到需要的物件。通常會有依照縣市區域來搜尋的功能。如果我們只是將地址取代掉,沒有特殊處理,使用者搜尋「台中縣」,查詢結果會是「查無結果」,而不會直接列出縣市合併後「台中市」的物件名稱。

還有一些地理位置相關功能的資訊服務,比如 LBS、打卡、團購、O2O、黃頁類、產業聯盟資料平台,勢必也要對縣市改制做一些程式上的修正,不然就會跟 Facebook 發生一樣古怪的情況。像桃園縣桃園市已經變成桃園市桃園區了,那打卡的時候...


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


為什麼網站註冊或購物時要填這麼多資料呢?

這年頭一走進電器行,家電都貼上「節能」「環保」「省電」,
一打開電視,選舉都要「拚經濟」「公平正義」。那資訊軟體的口號是什麼呢?
毫無疑問,絕對是「好用」「方便」,
預算比較高的會喊「行動」、「雲端」、「大數據」。

口號的用意是什麼呢? 就是把一大串理念與想做的事濃縮成一句話,
喊口號很輕鬆,但實行起來不簡單。

對於專業人士而言,「好用」「方便」的定義可能有上千種,
從心理學上,從視覺介面設計,從使用者操作流程上各有不同的解讀方式。
但一般人對於「好用、方便」的其中一個定義就是:
「不要填這麼多資料」「越方便註冊越好」「按一個鍵就可以完成某事」。

目標聽起來很好理解,就是表單的格子少一點嘛!
但網站的目的之一就是促進線上的商業行為,
隨著案件進展,與網站上線之後的消費者反應,最後常常離目標越來越遠。
例如會有:
「台灣外島的運費跟本島不一樣,而且要先收到錢才出貨」
「中國大陸客人的運費我要另外再報,不可以讓他直接刷卡付款」
「南部的顧客,請送到台南分店的 email,不能讓其他分店的看到。」
「某個東西的利潤很低,不可以讓外島客人再套用其他優惠活動」
「這個東西的材積很大,運費很貴,不可以讓某些客人再套用其他優惠活動」
「有很多客人反應不小心按到就送出了,這邊可以再加一個步驟嗎?」
...
許多看似冗餘的網站表單欄位,就是在種種的需求中產生的,
基本上就是
「依法律規定」
「不想虧本賣」
「大家都這麼做」
「加一個格子,比加自動判斷機制便宜」。
「避免有人搞破壞,把表單做得難用一點,比做自動防護機制便宜。」

好,讓我們接下來分析一下,網站註冊或購物時填寫的格子,
背後可能會牽涉那些已知的功能,甚至你不知道的用途?

1.必須填寫真實姓名:

  • 方便客服聯絡時稱呼用。
  • 方便系統建檔客戶資料,不然很多人的姓名會是 卐乂Oo 煞气a屁雞oO乂卍 、「因為愛」、"Lydia Chang"之類的。
  • 作為購物時的收件人姓名。 如「超商純取貨」這種先付款再拿貨的交易流程,包裹上的收件人與領取人證件姓名不符,通常會很麻煩。

2.複雜的密碼格式限制
如下面這個影片,常常有人吐槽網站的密碼規定太囉嗦,那為什麼要有這麼多規定呢?

此影片的中文翻譯可以看 好色龍的網路生活觀察日誌: [翻譯] 密碼規定爛透了

現代網站的密碼資料,通常會經過加密後儲存在資料庫中,例如你的密碼是 12345,但是在資料表的欄位內紀錄的不會是12345,會經過加密後再存進資料庫,例如 12345 經過加密會變成 827ccb0eea8a706c4c34a16891f84e7b。那網站登入程式如何知道你打的密碼是否正確? 最基本的方式,就是將登入時輸入的密碼加密,再與資料庫紀錄的密碼字串比對,如果兩者相等,表示密碼正確。

資料加密的用意,通常是避免內部人員監守自盜,把資料表撈出來,讓資料通通被看光光。也避免資料庫被外部入侵時,看到的資料至少是加密過的,要經過一番解密才能變成一般人看得懂的文字,而不會直接被看光光。但其實還有些網站程式還是紀錄未加密的密碼,可見 我的密碼沒加密

其他各種複雜的密碼格式要求,通常都是為了避免密碼太快被解出來,例如:

  • 限制必須要8個字以上,並包含英文或數字:
    密碼長度越長,通常解密的時間就越久。如果網站出事,至少還可以先拖一陣子,趕快通知會員改密碼。

  • 密碼強度規則,有時候很長的密碼強度不一定比較高?
    密碼強度判定有很多機制,其中一個機制是「人類常用的單字」,有些暴力破解的字典檔會優先嘗試一些「人類常用的密碼組合(如12345,或是鍵盤上相連的鍵)」,或簡單的單字,如果密碼都使用字典檔裡的詞彙,機器會太快把密碼算出來。通常密碼的字數越多,有意義的單字越少,密碼強度就可以判定為強。

  • 使用奇怪的規則:
    避免密碼太好破解,或是不要讓使用者在所有網站都使用同一組密碼。避免造成一個網站的帳密外流,連累到其他使用相同帳號密碼的網站。

3.密碼提示問題
為什麼要有密碼提示問題? 主要是為了多一層保護。
第一種情況,忘記密碼的時候,有些系統會直接把新密碼寄到信箱。但避免閒雜人等知道別人的 E-mail 或會員帳號,整天隨便幫別人重設密碼。所以要先回答出正確答案,才能重設密碼。
第二種情況,忘記密碼的時候,有些系統會直接把以前用的密碼寄到信箱去,如果信箱被盜,有心人士就可以看到你的密碼,或是幫你收信,使用重新設定密碼的連結幫你換密碼,然後幫你登入、亂下單。

但資安問題有時候不在系統,而在使用者身上。就怕有人的答案太好猜,或是公眾人物,大家都知道答案,或是像電影「出神入化」中,有一個假借讀心術失效,巧妙引誘出富翁說出密碼提示問題的答案的橋段。

至於為什麼密碼提示問題都是一些古怪的問題,如媽媽娘家的姓氏、寵物的名字、第一份職業、最喜歡的老師、出生時住的第一條街、讀哪一間小學? 因為密碼提示問題的設計有一些準則:

  • 不能問有標準答案的東西,如「誰提出牛頓第一定律?」
  • 要各國的使用者都有的經驗,所以不能問「第一次買槍是在哪一間店?」
  • 問題要有答案,答案自己知道,不能是「學說話時,講出來的第一個單字是?」
  • 要問每個人都可能有不同答案的生活經驗,不能問「幾歲上小學一年級」
  • 問題的答案不能太簡單,不能問「如暑假作業寫了沒?」
  • 答案必須要能持久不改變,所以不能問「上次考試考幾分?」
  • 做系統的人懶得想問題,直接參考別人的。

還有系統連密碼提示問題也可以自己輸入,這下可好了,連密碼提示問題的「答案」都會忘記了,現在會被忘記的東西又多了一個! 不知道是在整客戶還是在整客服。

4.人機驗證碼
上述第二點,複雜的密碼規則是想辦法增加 827ccb0eea8a706c4c34a16891f84e7b 的原文被解出來的情況。還有另一種情況是已經知道某組帳號確實存在,要避免有人用機器去嘗試登入的情況,那就需要驗證碼了!

  • 聯絡表單的人機驗證碼,通常是避免有機器自動持續發送內容,讓客服的信箱被灌爆,或是避免 SMTP 超出寄信量上限。
  • 註冊或申請表單的人機驗證碼,則是避免有人大量註冊或大量申請,做為不法用途,甚至有些網站有簡訊發送功能,還可以惡意把簡訊發送點數用完呢。
  • 登入區的的驗證碼,用意是測試你是不是一個只會在表單欄位填入資料的機器人。

至於那種「某帳號+某IP,X分鐘內登入錯誤三次就鎖定」的機制,常常只能鎖到忘記密碼的使用者而已,系統還必須比對與記錄這個 IP 來源或使用者帳號已經錯幾次了,還要定期去清掉錯誤紀錄。總之還是人機驗證碼的效果快,工法少。

有人會說,工程師應該要把他的工作做好,不要讓我的使用者資料被偷走呀? 或是使用一個不會被破解的方式來加密? 怎麼可以因為這些理由,造成我輸入密碼的麻煩呢?

其實這真是個好問題,那不禁要問一下,馬路沒有平,常常鋪好之後沒幾天又來挖,
該怪瀝青跟石頭撒在地上後不會自己變平坦(科技的限制)?
還是鋪路的外籍勞工該負責任(執行人員的問題)?
還是行政區域首長的責任(主管的問題)?
還是採購制度的問題(制度問題)?
還是都市計畫的管線配置沒規劃好(流程問題)?

5.必須填寫暱稱:

  • 用來顯示一些「某某某您好」之類的歡迎訊息。
  • 在網頁的公開區塊顯示,如商品問與答、商品評價、留言板、討論區。

6.必須填寫地址:

  • 購物收件地址。
  • 發票地址。
  • 商品退貨取件地址。
  • 商品換貨取件地址。
  • 活動獎品寄送地址。
  • 戶籍地址,常見於一些政府機關或學校的申請表單,因為目前沒有 API 可以讓使用者輸入身分證字號就代入所有戶籍資料,所以必須讓使用者自己輸入。
  • 到府服務地址,常見於家電產品的線上註冊表單。
  • 廣告 DM 的寄送地址。
  • 統計會員所在區域,用於決定廣告投放的地區...等用途。

7.必須選擇國家、地區、縣市

  • 購物車依照所選擇的國家來直接計算國家運費。
  • 依照所選擇的區域計算區域運費(如美國各州,或中國大陸各省、自治區、直轄市、台灣本島外島)。
  • 用來設定網站所顯示的語言。
  • 網站有針對特定地理區域顯示的內容。

通常是使用下拉選單讓使用者選擇,程式再依照下拉選單選擇的值作為程式執行的依據。如果改用讓使用者自行輸入,程式直接判斷使用者輸入的資訊,就有可能在使用者輸入「台中市甘肅路」「帝寶A棟」「XX園區」「台 灣大 道」之類的造成判斷錯誤。

有人可能又想到啦,現在 GPS、打卡、導航什麼的這麼方便,為什麼網頁不能有個按鈕,按了直接顯示我現在的地址? 非得要人每次打一堆地址,在一長串國家、地區表單中選地區?

以技術來說,一般所謂的地點偵測有三種,基本上都是先取得經緯度,再把經緯度轉換成地址:
第一種是用目前裝置上網的 IP 網段資料,或基地台位置資料,得出經緯度,再對照這經緯度是哪個地區,或是某經緯度範圍屬於哪個縣市,因為地區的劃分通常是不規則的形狀,不是圓形或正方形這麼簡單。所以這個對照的機制很重要,有些是獨家秘方,例如用 Google 搜尋,或是用 Facebook 的時候,偶爾最下面或旁邊會問「您的位置是 XXX 縣 XXX 市嗎?」這種通常就是經由使用者的回報,來修正系統的地理區域對照機制。

第二種是沒有網路的情況下,使用裝置的 GPS 定位,取得經緯度,再用經緯度對照地區,但使用 GPS 的前提是要看得到天空,而且大樓不要太多的地方。不過裝置有各種限制,像桌電沒有 GPS,低階的行動裝置會定位很久,偷料的便宜大陸平板甚至沒有 gps,網路關掉就無法定位。

FB 打卡是根據當下的經緯度,列出附近的地標,或是附近前人打卡過的地點,看似好像什麼都定位得到,但如果到附近完全沒地標的地區,並且把手機 GPS、WiFi 關掉,這時候定位出來的通常是基地台座標,別說正確的地址,還可能與人類實際的位置與偏差許多。


HTML5 有一個 Geolocation API 功能,一些比較新穎的網頁,或是持續有在更新的 JS 地址套件都開始使用,此 API 可以讓瀏覽器經由上述的方法一取得經緯度,但是若遇到使用者按「不同意」,或是隱私安全程度設定太高,甚至遇到根本不支援 HTML5 功能的瀏覽器,是完全不能用的。[Chrome 50 之後,只有 https:// 的網頁可以使用 Geolocation API]

Geo API 取得的資料值是經度與緯度值,如 21.941592°,111.22256010000001°,要再想辦法將經緯度轉為一般人認知的「地址」(通常使用Google Map API),基本上可以得到「台灣 XX 縣 YY 區 ZZ 路」就算不錯了,幾巷幾號幾樓幾室基本上是不太可能。另外還有許多地方是 Google 地圖無法正確列出的呢!

所以呢? 講這麼多,還是乖乖的自己輸入地址吧!

8.必須填寫生日:

  • 做為生日優惠活動使用,而且為了怕有人每個月去改生日,讓自己每個月參加壽星活動,通常會員資料的生日設定之後,就不能更改。
  • 網站提供的服務必須有年齡限制,例如候選人的小額捐款網站有未滿20歲不能捐款給候選人的規定,不然在選後容易被對手找碴。
  • 網站提供的商品在法律上有年齡限制,如酒精類、成人用品、暴力遊戲或電影...等,所以必須限制或提醒瀏覽者。但是血腥的社會新聞都沒有設限,很有趣。
  • 有些網站限定使用 Facebook 帳號註冊會員或投票,但 Facebook 跟 Google 都有未滿 13 歲禁止註冊帳號的限制,算是變相的限制使用者年齡。(謊報生日不在討論範圍內。) Google 帳戶的申請年齡限制 - Google 帳戶說明
  • 用於統計使用者年齡。
  • 資料驗證用,如有人填寫星座為處女座,但是生日寫 1 月份,可能判定此為無效會員。
  • 人力銀行或求職類服務。
  • 訂票、訂房類服務。
  • 保險、理財類服務。
  • 命理占卜類網站,必須填寫生辰八字,西曆生日或國曆生日,甚至還要填出生時間。

9.必須填寫身分證字號:
通常用於「一個人只能註冊一個帳號」的線上服務。

  • 通常用於網站會辦活動,或是新會員註冊有優惠...等原因,避免會員重複註冊,會以身分證字號做判斷。但有可能會遇到消費者的身分證字號已被「身份證字號產生器」的使用者註冊過的情況,必須還有確認個人身分的相關流程。
  • 人力銀行或求職類服務。
  • 捐款,或特殊組織型會員。
  • 訂票、訂房類服務。
  • 保險、理財類服務。
  • 政府機關或學校相關申請表單。

10.必須填寫性別

  • 程式依此選項來決定顯示「XXX先生」或「XXX小姐」,有些跨國的服務還會有「拒絕透露性別」「其他」的選項。如看到購物通知信會顯示「 XXX (先生/小姐)您好的」,通常就是網站沒有/沒做性別選項的判斷程式。
  • 依會員性別推薦不同的商品類別。

11.必須填寫手機、電話

  • 方便聯絡,或是快速對話溝通。畢竟 email 是不夠即時,而且很不穩定的通訊方式,可能因為 email 填錯、軟體擋信、伺服器擋信、公司防火牆擋信、信箱滿了、沒在收信、寄到垃圾郵件匣、使用者的信件過濾機制設定有誤......等原因收不到信。
  • 用來寄送廣告簡訊。
  • 用來寄送購物進度通知簡訊。
  • 簡訊/語音認證用,用來確認此號碼有效。
  • 二階段驗證之類的功能用途,除了帳號密碼,再多加一道登入防護。通常需搭配簡訊驗證。
  • 供貨運宅配聯絡用。

12.必須填寫家庭狀況或家人資料

  • 通常親子或家庭相關的網站需要填寫,程式可根據此欄位顯示相關的內容。
  • 作為統計會員資料的依據
  • 保險理財金融相關
  • 台灣的求職網站

13.必須填寫職業

  • 徵婚或交友相關的網站需要填寫,程式可根據此欄位顯示相關的內容。
  • 人力銀行或求職類服務。
  • 作為統計會員資料的依據。

14.必須填寫信用卡資料

  • 一些必須刷卡付費的服務,如 Uber。
  • 留存使用者資訊,方便付款時直接代入使用。
  • 詐騙網站,編出各種理由讓你留下卡號,竊取資料。

15.不能直接用 email 或手機當帳號,要另外取一個東西當帳號
對登入系統來說,帳號需要是一個獨一無二的東西,不能跟別人重複。所有的會員資料都依存在「帳號」的短短幾個字母裡面。

  • 使用者的 email 被盜帳號等原因,導致 email 無法使用,或是不想用的時候,還可以透過變更 email,繼續使用該帳號,不需要重瓣,也不需要找客服改 email。
  • 避免使用者更換手機號碼後,帳號無法使用。甚至該門號又被別人申請走,那個「別人」到網站註冊時,會顯示號碼已重複。

- 會員卡制度,帳號是會員卡編號,而不是手機號碼/email。

結論:
使用者永遠都想要方便,但最方便的大概就是用手機掃一下指紋,但不見得每個人的手機都能掃指紋,最普遍、最通用的情況就是輸入身分證字號,祖宗八代生辰八字就通通列出來,半個資料都不用填,但是,沒有一個「公開的」資訊系統有這麼方便的權限,如果真的有,大概就跟電影的奧創、終極警探4、關鍵報告、鷹眼一樣危險。

最接近此理想的大概是 OAuth 開放授權機制,如 Facebook OAuth, Google+ OAuth,OpenID,只要先在 FB、Google+ 註冊好帳號,在有支援 OAuth 登入的網站直接按一下,就可使用帳號裡的資料直接註冊或登入,自動填寫大半的資料,省去不少時間。

但是這個的壞處呢,就是 API 改版,或是政策更新,或是使用者將資料設為「只限本人」,或是 Facebook 維修,將導致無法正常登入網站或正確帶入資料。


另外有些軟體或設備則是朝「自動填入」與「自動記憶」發展,如 iCloud 鑰匙圈,或是 Chrome 的同步處理,把表單資訊存在雲端,在下次填寫其他表單時可以直接帶入使用,減少輸入時間。

另外「一鍵完成購物並付款」也真的有人做出來,並做實際的商業應用了,但這可不是人人都能辦到的,唯有 Amazon Dash button!

雖然資訊系統的終極目標是指紋掃一下、條碼掃一下,甚至語音輸入,就完成所有步驟。但是在那一天到來之前,還有很大一段路要走。在現階段,只能想辦法盡量減少痛苦的輸入流程。

大家應該都聽過「朝三暮四」的成語故事,其實人類也跟猴子差不多,一個步驟要填完 8 個格子,跟拆成三個步驟,分別填 2 個格子、3 個格子、3 個格子,就可能造成完全不同的表單填寫達成率,這是很神奇的一件事。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


Google Analytics 網頁分析可以做的事

Google Analytics 網頁分析做不到的事 一文中已經介紹了Google Analytics (Google分析,簡稱GA)的種種限制,以及報表可能產生誤差的情況。

本文則介紹 GA 網頁分析,可以幫我們解決哪些基本的網站製作方向,或銷售策略問題。

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:
何謂Google 網頁分析?
使用 Google 分析或其他觸發事件技術,讓資料顯示在對應的 GA 報表內。經由時間,與各種維度與指標的搭配,整合出需要的數據與報表。

Google Analytics 網頁分析可以做到的事:

一、杜絕瞎子摸象

在這些場合:
1.網站改版需求會議。
2.業主說:「 XX行銷」或「XX大師」說我們的網站哪裡設計得不好…。
3.業主覺得銷量不符預期時。

或許您有聽過以下這些話:

現代版瞎子摸象第一集:「我覺得…」

「沒人知道那個三條線的圖案是選單啦。都沒有人知道那個可以點。」
「使用者不知道可以往下捲,要加個箭頭,還要加個提示,最好還會自動往下捲。」
「網頁太長了,沒有人會捲到下面,我們應該把網頁分成很多頁。」
「輪播圖放幾十張也沒關係,我覺得客人都會一張一張仔細看。」
「我也是使用者,我不會用的,大家也不會用」

可使用以下 GA 功能,輔助進行使用者的行為記錄 :

  • 事件紀錄追蹤:使用 GA Event tracking,用 JS 記錄觸發事件,在GA報表內依維度或區隔查看結果。
  • 目標設定功能:設定某事件為目標,在GA報表內依維度或區隔查看轉換率與目標流程。
  • 實驗功能 (A/B testing):製作兩個不同的網頁,由 GA 自動平均分配瀏覽者,並在 GA 報表內取得調查結果。 或是其他第三方使用者行為記錄工具。 GA 報表範例: 可是有人點啊。還可以用訪客來源或年齡、性別作為維度,得知哪些人比較會點。

現代版瞎子摸象第二集:「我的觀察啦!」

「在頁面上放了影片之後,來電的變多了,所以以後要多放影片。」
「我的客人都是從 Yahoo 搜尋來的,所以台灣人都不用 Google 吧?」
「我買了FB廣告之後,訂單變多了,所以買FB廣告比較有效」
「之前網購的客戶大部分都是大學生,所以我們這次活動的目標族群以年輕人為主。」
「我們網站的消費者都是一見鍾情,所以我們要針對新客戶做優惠,老客戶已經很會買了,比較不用管他們」

先釐清問題:

  • 訂單或流量成長,與網站做了某些更新有關? 還是只是搭上新聞事件的順風車?
  • 客人看似都從 Yahoo 搜尋進來,有可能是網站在 Google 搜尋的排名很差,根本找不到網站,或是網站在 Google 的 SRP 顯示得不佳,沒有人願意點進來。
  • 善用 GA 的報表工具與事件追蹤,查看現有訪客的相關瀏覽行為與資訊,瞭解正確的功勞歸屬。
  • 使用 GA 的客戶開發相關報表工具,釐清網站根本沒有其他族群的訪客、還是現有內容無法打動其他族群的訪客 (跳出率高、停留時間短、結帳流程流失)?

可使用以下 GA 功能,輔助得知現有網站訪客的客群與行為 :

  • GA 報表日期比較功能
  • GA 目標對象相關報表:查看頁面瀏覽、使用者數量、跳出率、停留時間、新/舊/活躍訪客比例…等。
  • GA 客戶開發相關報表:查看訪客的推薦連結來源、媒介、搜尋引擎、裝置資訊…等。
  • GA 電子商務追蹤:記錄消費行為,從而得知最後完成購物行為的訪客來源,訪客媒介、裝置資訊等…
  • 網址產生器:將網址加入utm參數,讓QRcode掃描等特殊流量歸類為可見的媒介。
  • Google Search Console 與 Bing Webmaster Tools。使用站長工具查看自然排序的來源關鍵字、與關鍵字排名。有些網站架構是用到達頁面猜不了的!
  • GA 報表範例1: 報表顯示查會看某頁面的使用者都是 Google 關鍵字廣告來的喔。
  • GA 報表範例2: 報表顯示 Yahoo 廣告的達成率比較高喔。

現代版瞎子摸象第三集:「經營者 != 消費者」

「先用ATM轉帳付款就好了,反正超商付款或貨到付款沒人在用。」
網站改版:「我們的企業理念很重要,至於優惠專區最後再放就好。」
「現在沒人在用小螢幕,也沒人用 IE8 啦,我們的新版面要做得超寬,而且 IE8 的使用者禁止進入。」
「電腦版的問題比較大,先改電腦版了,行動版的以後再說。」
「我的網站上放了許多社群分享按鈕,怎麼沒有爆紅呢」

  • GA 網站內容/目標對象相關報表: 運用維度與篩選器工具,交叉比對,對於各種瀏覽器、作業系統、螢幕解析度、裝置類型的使用者,網站真正重要的頁面,以及訪客真正愛看與不愛看的內容。
  • GA 事件追蹤+目標相關設定:追蹤某目標的行為流程與流失量。
  • GA 事件紀錄追蹤 + 社交相關報表。
  • 釐清問題 :
    • 網站的分享按鈕有人點嗎? 是否有分享出去?
    • 分享了之後,有沒有人從 FB 點進來?
    • 從 FB 點進來的訪客在網站裡做了什麼事?
  • GA 報表範例1: 不對啊! 電腦使用者比例頗低,而且跳出率不高呀! 電腦版不用改版。
  • GA 報表範例2: 不行啊! 近兩個月的報表,有一半的使用者還是都用IE,而且這一半的使用者裡面,超過八成使用 IE6-8。

二、評估成效

  • 網站做了好幾年,真的有人來看?
  • 在 FB 粉絲團 PO 了一篇文章導流到網站,幾點的時候進來網站的人最多?
  • 同時購買 FB 廣告,也有在 FB粉絲團 PO 貼文/照片/回文,何者造成的成交率比較高?
  • 同時投放 Yahoo / Google / FB 廣告,今天如果有 10 筆訂單,能否知道人從哪來的?
  • 從電子報、eDM,點進來的訪客究竟有多少? 網站的註冊信、歡迎信…等各種信裡面放了廣告,能否判斷流量是從哪封信來的?
  • 在產品包裝、車子、名片、網站、活動現場各放了一個 QR code ,真的有人去掃嗎?
  • 我在網站上放了影片與媒體報導,那在網站上看影片,或是從搜尋引擎找我的人有變多嗎?
  • 用FB註冊的人多,還是一般註冊,還是結帳時順便註冊的人多?
  • 網站上放的型錄/菜單下載,有人下載過嗎?
  • 這個月訂單量比較少,是因為網站比較少人看嗎?
  • 這個月買了廣告,那有買廣告跟沒買廣告,流量差了多少?
  • GA 報表範例1: 比較新舊訪客與菜單下載位置的關係。
  • GA 報表範例2: 比較各種來源/媒介的某個目標轉換率。

三、發掘需求

  • 用舊瀏覽器的訪客多嗎? 用大螢幕的人多嗎?
  • 用行動裝置的人多嗎? 用行動上網的人多嗎? 行動裝置的使用者喜歡看我們網站嗎?
  • 國外的客人多嗎? 網站需要作多語系嗎?
  • 多語系增加維護成本,真的有人來看嗎? 還是放個連絡窗口就好?
  • 大家都在站內搜尋框裡面查什麼? 我的網站內有大家都想搜尋的東西嗎?
  • 主機公司說他們測中國大陸那邊 ping 過來很快,是客人電腦有問題。所以中國大陸的訪客,是否網站開啟速度比較慢?
  • 行動裝置訪客與電腦訪客,瀏覽行為與內容是否有差異?
  • 哪一支產品最不受歡迎? 哪一支產品很多人看卻很少人買?
  • 哪種客戶族群的消費能力最高? 哪種族群的成效不好?
  • GA報表範例1: 今年同時期的行動裝置使用者變多了。
  • GA報表範例2: 抽樣中國地區使用者,載入速度真的有差 。
  • GA報表範例2: 看來大家對出版品比較有興趣。

四、情報快訊與自訂報表
網站不像金融產品這麼有價值,不想花太多時間關心「大盤走勢」.
情報快訊功能與自訂報表功能可以 :

  • 在網站爆紅時通知您。
  • 在網站人氣突然一落千丈時通知您。
  • 網站被牆(被和諧)時通知您。
  • 定期寄送自訂報表。

常見問與答
Q1:Google Analytics 不是免費的嗎? 為什麼跟網頁公司說要看XX跟XX項目的報表,會有費用呢? 或是找XX公司做網路行銷,報價單上會有 GA 報表的費用呢?
Ans1:GA 並不是完全免費的,只是一般網站用不到他的付費版功能。
Ans2:許多人對網路的誤解:

  • 網路上的東西都是免費的。
  • 網站做好放在那邊,我只要等著收錢就好,都不用管理或更新。
  • 我也是使用者,我不會用的東西,大家也不會用。
  • 這年頭的網頁系統就是要方便,可以幫助我解決以往的問題,但是我不想花錢。
  • 不是聽說HTML5功能很多,為什麼大家都不做XX功能呢?
  • 這不是聽說很簡單嗎?要不是我很忙,我就自己弄了!

自己的網站自己救?
若您有以下其中之一的情況,可能不適合自己來:

  • 沒有網頁前端的知識與技能(看不懂 HTML 與 JS 程式碼) 。
  • 您沒有權限,或是網站不允許置入外部程式碼。
  • 對於網路資訊或行銷的專業名詞不熟悉。
  • 不是要看報表,而是要一個答案或結論,或是想預測未來。

這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


網頁的平面設計稿要注意哪些事?

常常被團隊的工程師說你的平面設計稿無法做成網頁? 設計師和工程師常常吵架?
一個要做成網頁的平面設計稿有哪些要注意的呢? 請看此文的概略介紹。

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:
一、請使用 RGB 色彩模式
1.色彩模式: 不管原始稿件是什麼,通通要轉成 RGB
2.網頁色彩表示法:

  • 規範的英文名稱(如 Green, Lime)
  • HEX 16 進位 (如#000000)
  • RGB/RGBA (如rgba(255,255,255,.5))
  • C60 Y50 不要報 CMYK 色碼
  • Pantone 600 號 不要報色票號碼
  • 馬卡龍綠、Tiffany 藍、珍珠白、土豪金 請講色碼,不是形容詞!

3.印刷會有色差,電子產品螢幕一樣會有色差

  • 使用者螢幕沒校色
  • 使用者色盲
  • 濾藍光模式
  • 校對時都用投影機討論
  • 戶外背光情境

二、網頁常用的圖片檔案格式

  • JPG
  • PNG
  • GIF
  • SVG

大原則: 色彩鮮豔度、壓縮品質降個10%,不一定每個人都看得出來,
但是檔案太大,載入很久,每個人都看得出來!

三、請同時考慮內容超長與沒有內容(empty state)的情況

  • 因狀態變更,或是不同情境、不同語系、特別多的金額或數字長度…會讓同一個區塊裡的內容長度不一,造成內容超出背景圖,跑版…等情況。
  • 標題超長時如何呈現?
  • 內容超長/超寬時如何呈現?
  • 你畫的輸入框可以容納幾個字? 輸入 email 時會被畫面切掉嗎?
  • 超寬的東西(如表格、頁籤),在不同寬度的螢幕會如何顯示?
  • 沒有資料時如何呈現?

範例1: 空的購物車表格
這種情況也是很多新手工程師易犯的錯誤,沒有內容時,畫面上也會顯示空的表頭、頁數、不能點的下一頁按鈕、空的麵包屑箭頭…
範例2: 多語系文字長度問題
同樣的字型大小,因為英文的字數較多,所以文字會超出原來的底圖。
範例3:不要拿著平面稿說「請設定寬度在可以剛好斷在一行的地方」,隨語系、使用者瀏覽器設定,每個裝置剛好能顯示一行的寬度可能大不同。

四、網頁中文字型
1.如果目標客戶都用Windows,而且頁面都是中文字…

  • 只能用 Windows 內建的字體,一般的網頁中文字體: 新細明體、標楷體
  • Windows Vista, 7, 8, 8.1, 10 才有的微軟正黑體

2.繁體中文與簡體中文 Windows 的內建字體:

  • zh-cn: 宋体(simsun/nsimsun)、黑体(simhei)、楷体(simkai)、仿宋(simfang)
  • zh-tw: 細明體/新細明體 (Mingliu/PMingliu)、標楷體(DFKai-sb)、simsun、simhei

3.要用其他字型呢?
解法A: 使用 Webfont
付費

免費(連圖庫費/設計費都不想出的客戶,還想叫他花錢買字體?)

  • Google Fonts (FREE,英文字型為主)
  • Adobe Edge Web Fonts (FREE,英文字型為主)

解法B: 通通做成圖片

  • SEO: 差,現階段搜尋引擎不會辨識圖片內的文字是何種語言,更不會把圖片中的文字建立索引供人搜尋。
  • 高解析度裝置: 圖片看起來是糊的。除非出好幾套圖用 srcset 來切換。
  • 行動裝置: 圖片縮得很小,需要一直縮放滑動看內容?

五、想想其他螢幕尺寸的使用者
1.第一屏(First Screen) 概念
2.不要只依螢幕尺寸來決定操作行為與畫面,還要依裝置的特性。

  • 12.9 吋的平板 : 還是以觸控操作為主,不能有「滑鼠移入」才會顯示的東西。
  • 10 吋非觸控型小筆電 : 以滑鼠操作為主,不一定要像行動版一樣間距與按鈕做很大。

3.想想電腦

  • 排列組合: (常見螢幕比例 4:3、16:10、10:9) X (常見電腦螢幕尺寸 13吋~27吋)
  • 視窗沒放到最大,Mac 的工具列很高,瀏覽器灌一堆工具列…

4.想想行動裝置

  • 尺寸 4 吋手機 ~ 13 吋平板 都有
  • 考慮「滑鼠移過去才會…./ 滑鼠移過去才知道….」的內容在行動裝置會如何顯示?

範例1-太寬的東西在行動裝置上會變怎樣?
範例2-高100%滿版圖片在實務製作上常發生的問題?
範例3-圖片上字很多的廣告圖遇到 fit screen 規則的 RWD 網頁。淘寶網,或是一些國內的商城/開店平台的商品介紹圖文,已採用電腦版與行動版分開建置的方式,讓載入速度最佳化,編排最簡易化。
範例4-responsive-background bad example

六、想想各種狀態的視覺樣式
1.介面操作元件狀態

  • 作用中
  • 已停用
  • 不能點的
  • 可以點的
  • 載入中
  • 處理中
  • 可選取
  • 已選取
  • 單選
  • 複選

2.超連結

  • 已訪問過
  • 一般連結
  • 強調連結
  • 滑鼠移入
  • 按下連結

3.其他

  • 登入前/非會員/登入後
  • 操作步驟/操作未完成
  • 正常運作
  • 發生錯誤
  • 無資料狀態
  • 指引

範例: 未登入/登入前會顯示不同內容,原來的底圖就放不下了

七、避免做出難以切割的版面
1.版面是由一塊一塊的平面矩形區域構成,然後再依各種屬性去控制矩形區域。
2.對一塊一塊的東西可以控制:

  • 內容置中、置左、置右、外部置中、置左、置右
  • 絕對位置/相對位置/水平位置/垂直位置
  • 背景圖延伸、背景圖位置
  • 外框線/圓角/陰影
  • 寬度/最小寬度/最大寬度
  • 高度/最小高度/最大高度
  • 上下左右向外留白/向內留白
  • 2D 變形(旋轉、扭曲…)、3D變形
  • 使用其他元素(SVG, Canvas),做出不同的形狀。

範例1: 做一些特殊形狀時請先想想…
範例2: 只是字打一打放上去嗎? 用 Outline/Border all Elements of Site for Quick Development & Debugging 看看蘋果的產品宣傳網頁...

八、不食人間煙火
1.提案的設計稿太美好,實際使用上…

  • 與實際產品或網站形象落差太大
  • 後續難以維護
  • 預算或科技無法實現的功能
  • 合約上沒有的功能

2.有時候是溝通問題

  • 設計師不夠了解客戶
  • 設計師不夠了解團隊成員的能力/產品功能
  • 有人沒那個屁股,硬要吃...

範例1:圖片比重佔很大的版面範例
範例2:特殊形狀的版面範例
範例3:特殊媒材(如影片背景)
範例4:維護成本高

九、不要做合約上沒有的功能
範例1.以登入畫面為例
範例2.以線上刷卡畫面為例
1.資訊流概念,以新聞列表為例,它的資訊流與程式設計流程要考慮那些東西呢…?

  • 資訊: 日期、時間、標題、內文、新聞分類、封面圖、作者資訊、社群分享、點閱數
  • 如果標題很長,會變兩行,還是超過多少字變點點點? 標題字數上限是?
  • 封面圖是另外上架,還是直接抓取內文的圖,大小比例是?
  • 沒有封面圖時,要顯示網站 logo,還是暫無圖片,還是有另外的編排?
  • 新聞摘要是新聞內文過濾掉 HTML 的前 XXX 個字,還是摘要與內文分開建置? 新聞摘要要取幾個字?
  • 點擊 more 會發生什麼事? 換頁? 原頁展開內容? 動畫效果?
  • 點閱數計算方式? F5 就算一次/ 30 分鐘內重複 IP 的不計算/ 自動 Double 制? / 後台可以改每則的點閱數?
  • 一頁顯示幾筆新聞? 排序方式是? 依發布時間? 依人氣? 依分類? 置頂功能?

2.時間/預算是否足夠?
「就跟 FB / Google / 淘寶 / XX 商城一樣的功能啊,滿常見的,套一套就好,應該不難吧!」

  • 超炫效果……但是在某些裝置/瀏覽器看不到,或是花許多功夫做 fallback。
  • 加入最愛/追蹤清單/商品比較/線上即時通知/即時留言
  • Infinite scroll, SPA… Ajax 載入的東西常常要對 SEO 多做很多處理。
  • 邊打邊列出搜尋結果/ 自動列出建議搜尋結果 / 全站全文模糊比對搜尋 / 搜尋圖片內的文字
  • 自動列出相似建議項目 / 推薦項目…推薦機制或算法會自己生出來嗎?
  • 更動第三方串接系統的流程與畫面…你簽約的系統有提供此功能嗎?
  • 系統自動顯示即時運送進度、付款狀態…沒串接任何金物流,系統要怎麼知道貨啥時到了,啥時有進帳?

你的預算跟 FB 或 Google 一樣高嗎?

  • 所以說,那個伺服器效能 / 資料庫效能 / 瀏覽器效能 / 載入時間 / 伺服器負載 / 人力成本呢?
  • 讓瀏覽者可以自己上傳 / 想讓使用者保存任何資訊/ 想保存使用者的任何資訊前,請考慮資安/系統負載/空間問題,對一些不成熟的系統或技術團隊來說是非常可怕的。
  • 口袋夠不夠深,找不找得到對的團隊?

十、團隊忌諱: 換了位子就換了腦袋

  • 情境1
    (視覺設計師常聽到的)…客戶:「交給你專業的! 怎樣做都可以」
    (前端/後端工程師常聽到的)…美工: 「code 你寫的,你決定就好!」
    結果做出來之後改東改西。

  • 情境2
    (視覺設計師常聽到的)…客戶:「每種顏色跟字體都配一版讓我挑!」
    (前端/後端工程師常聽到的)…美工: 「通通做成可以在後台開關設定控制、模組化、熱插拔就好啦!」

  • 情境3
    (視覺設計師常聽到的)…客戶:「我把照片跟文案都零散的貼在Line上面了,你再排成專刊就好,應該很快吧?」
    (前端/後端工程師常聽到的)…美工:「我圖都做給你了,照著做就好,應該很快吧?」

  • 情境4
    (視覺設計師常聽到的)…客戶:「先排版面,文案跟圖片以後再補給你。」
    (前端/後端工程師常聽到的)…美工:「先寫程式,版面出來了再做調整。」

十一、其他網路文章
如何讓公司的平面設計師交出可以用的 Web 圖? « 嫁給RD的 UI Designer
解放吧!設計圖應該跟Web實作是一致的
平面設計和網頁設計的區別 - ㄇㄞˋ點子靈感創意誌


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


從三姊弟布丁事件論購物系統流程優化

三姊弟布丁事件成為本週末熱門討論話題,究竟,是本來就很有錢,還是那些奢侈的形象都是好心人贊助? 這是命運無情的捉弄..還是貪婪的慾望在作祟,又或者是非善惡的因果循環? 讓我們繼續看下去...(盛竹如口吻)

瀏覽了一些歷史新聞,了解該店家是在網路上做生意的,使用所謂的「傳說偉大超夯雲端大數據社群行銷線上網路創業訂購單系統2.0」來接訂單,而且有一定的訂單量,不存在「網站沒人來」「有流量沒訂單」之類的問題。從該店家的歷次事件中,都透露出許多電子商務系統流程中常見的問題。

接下來逐一討論,升堂~~~
一、網站被山寨?
二、惡意訂購,數萬元的假訂單?
三、對帳的人力問題
四、訂購表單介面設計問題?
五、該出貨的日期卻尚未出貨?
六、字數過多的備註

一、網站被山寨?
首先是這篇新聞 莫名有山寨網!三姊弟布丁無奈想哭:難怪訂單常對不起來 | ETtoday,一個網路商店會鬧出山寨風波,首先該店家一定要先有個網路商店(真是精闢的廢話...),還要具有仿冒價值的商品或是名氣,常見的目的則有 5 種:

  • 用真品的價錢賣假貨。
  • 騙取、蒐集使用者個資。
  • 騙取不知情的使用者訂購、付款。
  • 惡搞店家,增加店家的困擾。
  • 抄襲視覺設計。

但後來發現是以上皆非,所謂的山寨網站竟然只是熱心粉絲架設的,因為沒在管理,資料沒有更新,所以純粹只是CASE常見八十一難之「網站做好卻沒人在用」。另一個網站的匯款帳號跟品項也都跟正版的一模一樣,結果根本沒人在亂搞店家,這新聞純屬一場鬧劇。

以消費者的角度來說,來到一個購物網站,要如何知道這網站是不是山寨的呢?

1.從網站視覺設計的完整度與整體感,來「感覺」哪個比較像真的?

糟糕! 怎麼假的比真的還漂亮?

2.從社群網站上找出真正的連結?
有些店家跟風創立 Facebook 粉絲專頁之後,根本沒在經營,看起來就像假的。而且從 提防臉書帳號釣魚網站 - 黑暗執行緒 一文中可以見到,Facebook 粉絲專頁也可以創假的,甚至還可以用更好的文案或關鍵字來為 FB 粉絲專頁命名,讓假的比真的還容易找到。

既然 FB 粉絲專頁可能也有假的,還有可能自己在封面圖偷合成藍勾勾,那上面附的購物連結怎麼會是真的呢? 所以此判斷法也有風險。

3.檢查網站內的資訊是否正確?
如果山寨網站的創立目的是要騙取、蒐集個資。騙取不知情者訂購、付款,那網頁上的公司聯絡資訊、商品資訊是真是假根本無所謂,放真的也沒關係,反正只是要吸引不知情的人輸入會員帳號、密碼、或是輸入訂購時必填的個人資訊或信用卡號,按下送出,這些山寨釣魚網站就幫你把寶貴的個資「異地備份」了。 人什麼時候會死? 被世人遺忘的時候? 以這時代而言,是你的個資完全消失在行銷名單當中的時候。

這年頭連來電顯示號碼都可以改成跟正牌的一模一樣,還有什麼不能改的?

4.購買一些認證、協定?
比如在 Google 搜尋到台灣某大型黑心企業的購物網站,用手機瀏覽時,竟然還要一直手指縮放,在 2016 年竟然還沒有適合行動裝置瀏覽的版面? 合理懷疑這是個山寨網站。

但仔細一看,發現這網站有 Https 的綠鎖頭,而且網頁最下面有個 SSL 伺服器安全憑證的標章,點了會顯示公司登記資訊,看起來是真的,那就當成是大公司不怕沒訂單,改版腳步緩慢吧,這就是財大氣粗的傲慢。

像此例的 SSL 就是一種認證,表示網頁伺服器和使用者的瀏覽器之間,以加密方式溝通。隨憑證商的不同,認證畫面也不一定長得像上面那樣,依網站的性質,會有企業登記資訊/機關團體/個人...的基本資料。

申請 SSL,網站要先放自己的伺服器上,痞客邦或是本案例的這種線上報名平台是無法申請的。申請時還需要提交一些相關資料,而且在某些系統架構上每年要繳的費用相當高,一般業主通常是為了申請線上刷卡,銀行說網站必須要有 SSL,業主才會去申請。不然沒事不會想申請。

但對於一些有會員資料的網站,SSL 可以增加一丁點安全性,還可以提升網站在 Google 的搜尋排名,不失為一種「官方認證」的好手段。

以店家的角度來說,如何避免有人在山寨網站下訂,消費者認為下訂成功,店家卻沒接到單,導致各種爭議的困擾情況?

店家可能需要定時派人使用瀏覽器無痕模式,上網搜尋一下自己企業在網路上的動態,是否會找到一些不認識的山寨網站? 搜尋到壞話或差評,是否可以補救?

網路行銷還有一種所謂 SERP 優化,就是追求 Search Engine Results Page (搜尋引擎的搜尋結果頁)的內容,是否顯示正確健康、對企業有利的形象內容?

二、惡意訂購,數萬元的假訂單?
這是另一則新聞 母逝三姊弟賣布丁 竟有人亂訂6萬元貨 | 20151116 | 蘋果日報

此例中的布丁店家提供 ATM 轉帳、貨到付款、自取三種方式,訂購須知上有一句

再我們還未跟您電話聯繫確認訂單、金額、出貨日期時間前,請先不要匯款,避免造成漏單或作業上的疏失,感謝您的配合

有錯字...不重要。這大概是在假訂單事件後才加入的規則。ATM 轉帳或是到店自取,基本上可以想辦法先拿到錢再出貨,但貨到付款就無法避免店家做白工的情況,甚至還有消費者因故無法收件,造成店家產生逆物流成本的狀況。

那麼現代的訂購系統,可以如何避免這種惡意洗單的情況產生呢?

1.購物表單欄位驗證
在訂購表單增加各種基本驗證手續,讓想做怪的人無法輕易送出訂單。

  • 在必要的表單欄位增加必填提示,但要避免有人使用瀏覽器工具移除或改寫驗證,必須在伺服器端再次驗證。

  • 驗證電話號碼格式、字數
    但現實狀況是有人的電話會填日夜、住家、公司、手機1、手機2、分機、飯店房間號碼、幾點到幾點不要打,或是有人不想填。

  • 驗證電子郵件格式
    但現實狀況是輸入 123456@gmail.com 也可以通過驗證,
    或是有些目標客群年齡層較大的訂購表單,Email 欄位設必填,經常會被客訴。
    或是有人覺得留 email 一定又會收到一堆廣告信,壓根兒不想填,表單設計上只能增加一些「Email用途為通知訂單進度,保證不會用於寄送促銷訊息...」的文字,降低消費者疑慮。

  • 輸入驗證碼,避免使用網頁腳本或按鍵精靈大量持續下單,網頁上產生一段隨機亂碼,要輸入正確的文字才能送出表單。此布丁店家的系統也有驗證碼,大寫英文+數字混合共 4 位數,略有歪斜跟噪點,用機器辨識應該沒什麼問題。

2.表單送出後的二次驗證
避免有人留假資料下訂單,增加一些外部的驗證程序。

  • 簡訊驗證,例如送出訂單後,系統寄送確認簡訊至剛剛留的手機,消費者必須在網頁某處輸入簡訊內的驗證碼,才算完成訂購。
    但現實狀況是網頁簡訊系統通常需按封數收費,這套簡訊驗證系統流程的建置也是一筆費用,這些都會增加額外的銷售成本。
    還有些客人以前有向電信商申請,或是在 APP 設定封鎖廣告簡訊,所以認證簡訊根本都收不到。只要看過簡訊系統的錯誤代碼文件,就知道會有各種千奇百怪的理由,造成使用者收不到簡訊。

  • 電子郵件驗證,功能與上一點類似,只是透過電子郵件來發送驗證碼,消費者必須在網頁某處輸入收到的驗證碼,才算完成訂購。
    電子郵件不用錢? 現實狀況 1 是Gmail 免費版一天只能寄 500 封信,如果超過限額,又不知道去換一組帳號密碼,那可是連訂單通知信都寄不出去,所以大量發送勢必還是得另外找郵件系統。
    現實狀況 2 是 Email 一樣是有各種收不到信的可能,如信件只出現在 Webmail 的垃圾郵件匣,從 Outlook 收不到。或是設自動轉寄,但 Gmail 不會把垃圾郵件匣的信轉寄出去,或是限制 30 分鐘內輸入驗證碼,但信件過了一小時之後才收到?

  • 電話確認,用電話語音系統發送驗證碼,或是「確認訂購請按 1,沒有訂購請按 2,轉客服人員請按 3...」這個太高端,而且語音確認如果撥到公司總機系統,沒有撥到分機,常常接起來就只能聽到一半。
    那就用傳統方法,針對高額訂單進行人工電話確認呢? 訂單管理系統是否可以直接查詢出「訂單價錢大於某數」與「訂單狀態為新訂單」的訂單? 否則的話,光是查訂單就曠日廢時,打電話、接電話更是花時間,機器一分鐘可以接數百筆確認驗證碼,一個人一分鐘可以講幾通電話? 三姊弟應該都是學生兼職貼補家用,不是全職員工,也不是把賣布丁當成一生的志業吧。

不管怎樣驗證,都不可能十全十美。如電子郵件驗證,還是可以留假資料,再用所謂的 10 Minute Mail 來驗證。目前聽過最先進的案例是用 machine learning,做為驗證碼系統,或是防止下單洗評價,只要有重複的下訂動作,或是異於正常人類的行為,就祭出封鎖機制。

三、對帳的人力問題
此例中的布丁店家,購物須知有寫:

匯款完成務必〝來電告知帳號後五碼〞或〝收據上蓋章處的局號〞或〝拍匯款收據傳至我們的FB私訊〞,以方便我們核對款項,謝謝。

這是屬於成本最低的付款方式,消費者付完款之後必須自行通知店家,店家也只能依金額或匯款備註去查帳,對於缺乏人力的店家,真是累死人的任務。甚至有時候店家一時忙碌或是偷懶,接收到消費者通知已匯款的資訊,沒仔細查核帳目就出貨...。

前陣子才看到一個案例,某 FB 店家老闆的小孩生病,才一兩天疏於回 FB 的已匯款通知私訊留言,出貨也慢了點,就被一堆不明究理的消費者講得像捲款潛逃一樣。還有好幾個要退款的。

在台灣近代的付款流程,如線上刷卡、虛擬帳號 ATM 轉帳(每筆訂單產生一組獨一無二的 ATM 帳號)、WebATM(插晶片讀卡機轉帳)、超商取貨、超商機台付款(ibon, FamiPort),都已經可以透過系統串接做到自動對帳、網站自動更改訂單付款狀態。

但是對店家來說,節省對帳的人力成本與時間,但需要付出系統建置成本、交易手續費,甚至款項要先被銀行或金流服務商扣住數十天才能撥款之類的限制。

究竟是請工讀生便宜,還是用機器來做人要做的事比較便宜? 就由店家取捨。有人說用「工人智慧」的處置方式,這樣消費者可以聽到真人的聲音,感受人情味。有人說這樣店家可以「裝忙」,營造出好像訂單很多的公開形象。或是有些店家會有志工,但志工的素質可能參差不齊,會不會改天又因為志工的個人行為讓店家上了新聞? 這也是一個問題。

四、訂購表單介面設計問題?
再來是這篇報導 三姊弟布丁疏忽延誤送貨被大學教授退回 損失宅配費PO文討拍挨轟 | 快點TV。大意是說有一位大學教授下了訂單想買布丁給同學吃,但是商品無法如期送達,要求退款反而被店家嗆,店家還把消費者 PO 到粉絲團講乎全台灣知。教授上網澄清,公開對話紀錄與訂單後,全台灣人都震驚了...

1/1下單,1/4匯款,1/7 下午必須送達,但任務卻失敗了。為什麼呢? 尚未到物流大爆炸期間,店家的製作工期應該也趕得上。難道是訂購表單的設計問題?

從當事人在批踢踢的發文關於三姊弟布丁的事情,我們可以找到當事人的訂購單畫面截圖(如下圖)。

所以此案例是拿線上報名系統當訂購表單,系統在實際使用時超乎當初設計的用途,這很常見,不是問題。

表單內有填寫地址的欄位,長度不限,教室名稱其實可以一起打在地址上,這樣比較好作業,該表單也可以選擇宅配時段,共有五個選項「上午、下午、晚上、不指定時段」,還有一個文字輸入欄位,算是滿足基本需求了。

當事人已經確實的填寫希望送達時間,也在匯款時與店家再次確認送達時間,但最後店家卻 Miss 了,那以系統設計與使用者體驗的角度來說,有什麼可以改進的呢?

五、該出貨的日期卻尚未出貨?
一個訂單管理系統,可以輕鬆寫意的找出應該要出貨,卻還沒出貨的訂單嗎? 減低店家失誤與被客訴的機率?

先定義何謂應出貨而未出貨? 以食品而言,可能有以下狀況:

  • 訂單遺失/漏單/誤刪...等原因,未將該訂單排入製作。
  • 停電/沒瓦斯/器具毀損/工作人員有事...等原因,無法完成商品的製作。
  • 冰箱壞掉/颱風...等原因,製作或包裝好的貨品因故毀損,需重新製作。
  • 外部資訊系統故障,無法進行訂單狀態變更/庫存變更,人工作業將增長工作時間。
  • 封箱檢查時發現不良品,或品項錯誤。
  • 錯過物流發貨時間,要等到下一批的配送時間。
  • 未在客人希望收到的日期前一日,甚至前兩三日安排出貨程序。

其他還有商品已出貨,但是因為運輸途中掉件之類的狀況,讓消費者來不及收到東西......總之情況多而複雜,我們先以 1/5 應該要拿去寄件的東西,卻被遺漏了的情況來做討論。

以下圖這三種,經過千錘百鍊的大型商城系統後台為例:


理論上可以用預計配送日期、等待發貨、出貨日期...之類的顯示或是篩選/查詢功能,知道今天有哪些單的貨要出。

但是以實際情況,也就是此布丁店家的情況,肯定是做不到的

1.預算不足
此店家連棉被都要用徵的,預算想必也不足以使用專業好用的管理系統。除非店家在後續有使用其他資訊系統,或是把訂單印出來釘在月曆格子上之類的方式,不然相當容易會有應出貨而未出貨的狀況。延遲出貨就算了,也不要嗆消費者嘛...。

一般店家如果延遲出貨,可能就等著在搜尋引擎留下汙點,但這個是賣愛心的,消費者的容忍度超高。罵愛心店家只會讓別人覺得你是個沒愛心的人。

2.格式難以判讀
本案例中使用者輸入的預期配送日期資料是

[其他]1/7(四)16:00~17:00之間(為配合上課時間,請務必要求宅配廠商於該時間內送達)

要能從這段全形數字+符號+中文字中,透過程式查詢得知這筆訂單必須在 2016/1/7 之前出貨,這程式肯定是神人寫的。

不然就是工作人員得手動在額外的欄位註記「預計出貨時間」,或是調整線上訂購表單(如下圖),有機會為到貨日期建立統一格式,方便日後程式做處理。

六、字數過多的備註
以此教授的訂單為例,備註打了許多內容,但是工作人員能否快速瀏覽備註內寫的內容,並做適當的處理? 許多系統的訂單備註必須要訂單一筆一筆點進去才看得到,許多網拍基層工作人員的工作場所,都到處貼滿了便利貼,以免整天失誤被客訴。

備註打太多的問題還可能有哪些?

宅配寄東西通常要寫宅配單(託運單)。每一家貨運各有自己的託運單格式,最簡易的就是用手抄,不然就要在電腦上做許多複製貼上的重複動作再印出來。有些黑心貓之類的可以在契客系統用 excel 檔大量匯入,然後直接印好宅配單。甚至透過購物網站後台串接,來減少中間的出貨步驟。

但有可能備註太長、字數太多,託運單上面的備註在作業時被遺漏了,或是未經處理,列印時直接字被切掉了,貨運人員難道會通靈之術,看得到消失的備註嗎? 當然看不到。

還有另一種情況:
訂購時寫了一堆備註
沒有用標點符號
一句話打一行
就像我現在這樣
但送出訂單之後
換行卻通通消失了
工作人員只

看到一長串
增加解
讀時間的文
字。
就算換行可以保留,我也還沒遇過哪家託運單的備註可以放這麼多行字的。

「消費者訂購時留的備註」還有另一個常見的問題,因為這是一個消費者跟店家都看得到的東西。但如果店家為了一些列印方便之類的理由,去修改消費者的備註,容易讓消費者覺得不受尊重。而且在前幾年電子商務剛起步的階段,常發生店家工作人員在消費者備註寫「客人很機車又龜毛,出貨時要小心」之類的話,結果在會給消費者看的網頁或單據上被看到,鬧上新聞。主因可能是訓練不足,但訂單處理時難免會有一些不能給消費者看到的訊息,做一個只有店家可以寫,而且只有店家自己才看到的「店家備註」功能,在一般的訂單系統裡,也已經是標準配備了。

講了這麼多,該店家使用的系統到底長得是圓是扁? 我也去註冊了一個帳號試用一下,該系統其實是線上報名系統,訂單在管理後台還是叫「報名資料」,但是該系統看到了很多人拿線上表單當訂購單的需求,所以有一些購物訂單的範本功能可供使用。

檢視模式的操作上分為「簡列/詳細檢視/Excel檔匯出」三種模式,簡列模式只能看到 IP、時間、姓名,還可以幫訂單增加管理員備註,但完全看不到消費者填寫的配送時間。如要看配送時間,需要切換到詳細檢視模式(如上圖),然後再把網頁向右捲到底才能看到。

最便宜的精進方案建議,大概是用瀏覽器的 stylish 擴充套件調整系統後台樣式,或是買一台21:9 的電腦螢幕吧!

結論:
小生意,大學問。一個系統不是越便宜越好,店家覺得別人都用幾萬元的系統做生意,我只用免費的就賺大錢我超強,但人力的訓練、交接、使用的時間成本都不是錢?

系統也不是越貴越好,更不是看起來酷炫漂亮又潮就好,以購物系統來說,消費者是使用者,店家的工作人員也是使用者,必須要能減少消費者的糾紛,降低店家工作流程的失誤,才能稱為一個好的系統,這就是使用者體驗(UX)的重要性。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助