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

新主機測試中...

Your posts match “ UI ” 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 發生一樣古怪的情況。像桃園縣桃園市已經變成桃園市桃園區了,那打卡的時候...


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


10 個資訊產品圖示的小故事

現代人每天或多或少都會接觸到一些資訊產品,裡面都有許多的圖示與符號,那可曾想過,這些符號是從哪裡來的? 為什麼這個功能要用這個符號? 還有這些符號是什麼意思呢?

1.分享符號
就是在手機或網站上看到,用來分享內容的那個,它長這樣:


所以這個圖案有什麼含意嗎? 為什麼長得像樹狀圖,還有 3 個點的連線呢?

Co.Design 推測這是一個類似把愛傳出去的畫面,一個人推廣給其他人,然後其他人又再傳給更多的人。

ShareThis 是一個為開發者提供社群分享工具的網站,ShareThis 的網站上寫說他們在 2006 年有了這個符號的概念,從網頁時光機的紀錄中,則是從 2007/7 月開始在網站上看到這個符號,而如今他們還以此符號作為公司的 logo。而且他們的 user guides 並倡導希望大家都可以使用這個圖案,而不是只被少數產業或服務獨佔。

但這個符號被大量散播則被認為是在 Google Android 上面,早期的 android 分享圖案是一個 Y 字型,採用節點、向外傳播的概念,Android 在 2012 年提出了 Action bar 的 UI,並提供 Action bar 用的 Icon pack 素材與規範,現在常見的分享圖案也在那時候出現,並一直沿用至今。

如果大家都用同一個符號來表示分享,並不是壞事,只是永遠不會這麼簡單,事實上許多公司的產品都有自己的分享符號,功能的出發點是相同的,但是圖像上則呈現出截然不同的成品與設計理念。舉 Open Share Icon 的分享符號來說(見下圖最右側),他的概念是一隻手拿東西給另一隻手。微軟近代的產品則是使用一個類似 Ubuntu logo 的節點圓圈來當作分享的圖示。

若習慣使用 Apple 的產品,分享圖示則通常是一個方框,然後一個往外指向的箭頭,是把文件夾裡的資訊散播到全世界的含意,但一般被詬病容易與上傳的圖示搞混。上述的三節點樹枝狀分享圖示,則被認為第一眼無法理解,需要經由學習與經驗才能得知那顆按鈕的用途。

圖案沒有誰對誰錯,這場大戰看來是沒有統一的一天,但我們暫時是無法離開這個符號了。

2.播放符號


這符號隨處可見,但他究竟代表什麼意思? 它是一個很棒的符號,具有高度的辨識性,簡潔、純粹,並具有很大的延伸性,可以融入任何你想要的設計風格與趨勢裡面 (如水晶按鈕風格、扁平式設計風格)。

播放符號是從哪裡來的呢?
簡單來說,沒有人知道。Gizmodo 認為這是來自60年代,當時音訊的意象就是兩顆滾動的碟盤,而在當時三角形的意思是箭頭,箭頭可以讓人們看出碟盤現在是往哪邊轉,但這只是推測而已。實際上這顆播放符號可以這麼有名,要歸功於全球化的消費性電子產品工業的技術發展,讓全世界知道這個符號代表什麼,而且它可以做什麼。

以前通常採用具象化的直線式思考邏輯 (像 Gmail 用信封當 logo),但那個時代已經過去了。現在只要大家認同「是的,這個符號代表播放」就可以了,是一個抽象化思考的時代。如果一個三角形表示「播放」,那兩個三角形一定代表「播放得快點」;如果一個指向右邊的箭頭代表「前進」,那反方向的箭頭就代表「後退」。概念雖然簡單,但全都是延續播放按鈕的概念,全都是抽象的。

3.藍牙符號


在十世紀左右,丹麥國王 Harald Blåtand ( 英文名: Harold Bluetooth ) 很喜歡吃藍莓,吃到牙齒常常都藍藍的。該國王也統一了整個斯堪地那維亞,跟藍牙的概念一樣「允許不同的產品與行業之間的連結和協作」,但這就是藍牙命名的由來。

藍牙的符號是從哪裡來的呢?
在聽過剛剛的故事之後,藍牙的符號來自盧恩字母 (Runes) 的 H 和 B 兩個字母,國王姓名的開頭字母。

藍牙是藍牙技術聯盟 (Bluetooth SIG) 的專利技術,而且是註冊商標,所以一般都用這個圖案代表藍牙。另外從這個故事知道他是「藍牙」,不是「藍芽」,中文譯名也是有規定的,以後不要再打錯了。

4.USB (Universal Serial Bus)


USB 埠是個有魔力的東西,通常一定要插三次才插得進去,一直到 USB3.1 Type-C 才訂定出正反都能插的 USB 接頭規格,那這個符號的設計理念是什麼呢? 稻草人嗎?

這個圖案代表羅馬神話中,海神尼普頓(海神波賽頓是希臘神話)的三叉戟,三叉戟擁有強大的能量,被叉住的圓形、方形、正方形代表世界上各種不同的裝置,都可以經由 USB 連接起來。

USB 跟藍牙差不多都是在 1994 年開始發展的,都是由一些大公司組成的組織,訂定規範而發展。

5.電源開關圖案
在二戰期間,就有用 I 跟 O 來表示裝置的電路是否接通。1906 年成立的國際電工協會 (IEC) ,則訂定出標準,每種符號分別有不同的規範圖像與狀態說明。


同樣是圓圈內有一條線,線在圈內(IEC 5010)或是突破圈外(IEC 5009),在一開始其實是不同的狀態與功能,前者表示開與關的切換,後者表示開機待命。那你是否有注意過,現在一般的開關,那一槓是在圈內還是圈外呢?

後來 IEEE 為了簡化,把突破圈外那顆符號重新定義為「電源開關」,就是現在一般電子產品使用的電源符號。

6.MAC 鍵盤的 Command 圖案 ⌘

在 MAC 標準鍵盤的 Command 鍵上面,有一個像花的圖案,到底是什麼呢? 難道 Jobs 喜歡中國結?

Command 鍵是一個特殊的組合功能鍵,最早是使用一個 Apple 圖案,但是 Jobs 覺得太氾濫,到處都有 Apple 圖案,但每一個都代表不同的功能,容易造成混淆。於是被下令做新的。Susan Kare 從國際符號標誌辭典中選中了「⌘」花形符號,源自瑞典的野營或露營地符號,提醒人們注意和關注,同時還具有無限循環、統一標準等含義。

*7.舊款 MAC 鍵盤的 Alt 圖案 ⌥ *


較舊型的 MAC 鍵盤,沒有 Option 這個按鍵,只有 Alt 與一個像手扶梯的圖案。
那個圖案是什麼意思呢? 其實就是電路開關的意象,也就代表 Alt 鍵的功能,非常淺顯易懂。

8.選單圖案


近幾年有很多行動裝置 App 或是網頁,使用了這個三條線的圖案作為「選單」按鈕,
這圖案算是行動裝置時代的一個介面元素,甚至被列為 2015 年的網頁設計趨勢,
因為連一些 for pc 的網頁都用那個三條線的圖案來代替選單,
到底為什麼要用三條線呢? 是散熱孔? 中文的三,還是代表上尉? 還是代表八卦中的乾卦?


這三條黑色的 bar 在國外稱為 "hamburger icon",因為它長得像一個漢堡。這圖案目前公認最早是出現在 1981 年,一段早期的個人電腦的產品展示影片中出現的,在當時的確是用於觸發顯示選單的用途。而且這圖案的意義在於,它有視覺上的獨特性,不容易與其他常見的圖案重複,而且不論在各種解析度高低、各種大小的螢幕,都能顯示出統一一致的圖案。

事實上這個圖案一直有爭議,理由在於它看起來可能不像是選單,或是可以點的東西就要擺在使用者眼前,而不是藏在一個不知所云的圖案裡面,所以對於選單按鈕有各種折衷與配套方案。但隨著行動裝置的普及,後來使用者也就逐漸習慣了,知道那個圖案是可以點的,畫面上找不到的東西,就要點那個漢堡圖案去找。

9.「存檔」功能的磁片圖案


有人可能可能嗤之以鼻,連磁片都不認得嗎? 但就像有些前輩覺得沒用過磁帶機、打孔機寫程式,沒用過倚天中文打報告,就是菜逼八一樣。事實上比較這些一點意義也沒有,有以前的經驗當然很好,但資訊業著重的是「解決當下的問題」。


你曾好奇過為什麼電腦是從 C 槽開始? 因為以前的電腦 A 槽跟 B 槽是用來裝軟碟機的。磁片是 1990 年代火紅的產品,當時網路頻寬有限,而且多是以量計費,而燒光碟也不便宜,甚至還沒有 USB 隨身碟、記憶卡這種東西,於是磁片就成了攜帶檔案的好夥伴,也成了表現「存檔」的主要圖案。但隨著時代演進,各種記憶卡、隨身碟普及,2011 年已經停產軟碟機與 3.5 吋軟碟片,新的主機板上也不再有軟碟機的插槽。現今除了一些專業或特殊用途用途,已經很少在使用這種磁片作為儲存媒介。

由於三螢一雲的行動裝置時代來臨,多裝置之間檔案複製來複製去不免有些麻煩,於是開始朝雲端儲存、雲端同步的方向去發展。比如說編輯到一半的文件可以在電腦上存檔,然後在平板上繼續編輯,於是很多有許多現代的 App ,存檔的圖案不再是磁片,而是一朵雲+上傳的圖案。

10.@ 符號
@ 符號,一般念作"at",在台灣一般稱做「小老鼠」,在其他國家則有蝸牛、象鼻、貓尾巴之類的稱呼,最常見的是用在 email,用以區隔使用者名稱與域名。現在常見用於一些社群網站,如 Facebook, 微博 要 tag 別人的時候,就用 @+人名或粉絲團的名稱。那這個符號是從哪裡來的呢?


關於該符號的起源有很多說法,但不是哪個語言的古字,也不是某種組織設計的標示,它從 15 世紀就出現在商業文書或會計場合,一般認為是速記或書寫時,產生的變形或標記用途。它從 1889 年出現在打字機上面,然後就一直到現在的電腦鍵盤。

1971年左右,Ray Tomlinson 將 @ 選為電子郵件地址的分隔符號,從此之後使這個符號在網際網路上造成無可動搖的地位。在許多現代的程式語言,它也作為一些功能字串或前綴字元使用。


以符號學的角度來說,一個符號或圖案,不可能是憑空生出來的,一定有些文化或故事,或是使用者族群的共同印象在裡面。

以介面設計的角度來說,如果一個多國語言的介面,能通通用 icon 取代文字是一件很棒的事,這樣就不用怕不同語言文字長度不一,版面難以設計編排的問題,而且看起來很潮。

以使用者經驗設計的角度來說,只用 icon 是一件不好的事,因為占有面積小、容易忽略,或是不知道那個可以點。而且有些功能用文字寫出來人家還不一定知道是什麼東西,更何況是用一個抽象的圖案來表示? 再者有研究指出,操作介面的學習流程,第一步是「文字」,觀察選項的文字,然後根據以往的經驗,去預測點擊之後可能會出現他預期的東西,熟悉了之後,則會記憶該功能在整個介面中的「順序」,最後才是「圖示」的認知。但是一個介面如果都完全由文字等太具象的東西構成,看起來會很冰冷生硬,所以需要圖像配合。

用不同的角度去看,都會得到不同的東西。


參考資料
- Who Designed the Hamburger Icon?
- The Secret Histories of Those @#$%ing Computer Symbols
- What Is the Origin of the Mac's "Option Key" Symbol (⌥)? - Quora
- 标志的源起(二)⌘ Command
- Power symbol - Wikipedia, the free encyclopedia
- 「分享」、「上傳」分不清?談圖示設計哲學 - Inside 硬塞的網路趨勢觀察
- Share: The Icon No One Agrees On - BOLD by Pixelapse
- 5 Confusing Icons and Their History | Placeit Blog


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


行動裝置的水平滾動選單,是個好設計嗎?

行動裝置幾乎已經成為生活必需品,在一些流行產業或生活消費行業,要思考的已經不是「網站要不要做行動版」,而是「網站的行動版要做到多好用」,商品沒有亮點,操作也不人性化,在電商的起跑點就輸給競爭對手了。

行動裝置的介面設計是門學問,如何把滿坑滿谷的資訊顯示在有限的小螢幕上,如何讓畫面上的元素適合點擊,如何減少使用者輸入資料時的痛苦,如何避免完成一個目標流程需要一直、一直換頁,這些都是價值所在。

近來發現一種行動裝置的選單模式,應該沒有什麼學名,姑且稱為「水平滾動選單(scroll overflow menu, or horizonal overflow menu)」吧,操作模式就是畫面上會顯示一個選單列,可以透過水平滑動瀏覽更多項目。

舉幾個例子,請見各圖綠色箭頭處:

究竟是怎麼的時代背景與設計情境下產生水平捲動選單呢? 通常有四種條件:
一、選單項目相當重要,直接顯示出來更好,不要藏起來。
二、選單項目很多,一行顯示不完,但不適合分成好幾行顯示,也不適合占據太大的面積。
三、使用者抱怨找不到某功能,所以把元素擺在畫面上。
四、看了「把項目連結藏起來」會降低項目點閱率的研究報告,所以會把東西放在頁面上。

不乏一些國內外知名的網站或 App 都採用這種水平捲動選單的選單設計,算是個很常見的設計模式,使用者不需要學習任何新符號,也不需要去猜測符號的含意,只要感覺好像有東西被吃掉了,去滑看看,就會發現後面還有東西。對使用者而言,學習成本相當低。

但就像代表選單的漢堡圖示(hamburger icon)的爭議一樣,一般對資訊很熟悉的使用者都知道,網頁上找不到的東西,就要點擊那個三條線的漢堡圖示,叫出主選單,但是卻有許多人質疑這個漢堡圖示跟分享圖示一樣,都需要經過「學習」才會使用,對一些不熟悉資訊產品的使用者,無疑是一大考驗。

那麼網頁的水平滾動選單有什麼問題呢?

一、文字或圖案切一半,可能造成觀感不佳
每個裝置的寬度不一,使用者還會自己調整瀏覽器字型的大小,所以使用這種選單設計會產生「文字或圖案被切掉」的特色。不明究理的驗收人員,馬上就會質疑,為什麼文字被切一半? 是不是沒做好?

這時候就要舉上述的那些網頁案例,「你看,人家 Yahoo!奇摩也是切一半。」但這行業通常是外行領導內行,標準答案就是讓花錢的人主觀意識感到爽、可以結案比較重要,什麼設計定理、規範只是拿來說服客戶不要亂改的工具而已。

就很容易出現一種現象,一堆明明大型網站都有的功能,但反而小型網站的設計師不被允許那樣做,一定要把使用者當白痴,做一些像幼兒軟體的介面、每個元素都要有說明文字,每個元素都超大,色彩要很繽紛,反而產品或內容本體完全不明顯。

二、使用者不知道那個地方可以捲動
切一半不好,但完整切掉也不好。容易讓人以為後面沒有東西了,不會想去滑他。

其實這種說法都是憑感覺,使用者不點擊後面的項目,是因為不知道可以往右捲,還是後面的項目都不吸引人,就算看了也不想點? 應該是透過使用者行為的紀錄軟體,去研究是否真有這種可能。

但是一般廉價 SOHO/網頁外包公司的流程,就是照合約做完功能,網站上線,就把客戶放生了,接著是每年主機續約時才會再想起客戶。竟然還想進行「網站上線後,去記錄使用者行為,再提出網站調整建議報告」,一個不想多花錢,一個不想多花時間,簡直是天方夜譚,而且訪客太少,記錄到的使用者行為連「數據」都稱不上,只能稱為「個案」。

但根據「可能有使用者不知道可以捲動」的情況,還是有人提出了解決方法,讓我們看一下案例:

比如說自由時報行動版網頁的案例,不但做出了左右箭頭,而且那行字還會自己滾動喔! 用起來就跟雜亂的新聞台畫面一樣熟悉。

Google 的前端框架 Material Design Lite ,一樣是做出箭頭,在一開始的地方會出現往右箭頭,捲到尾巴之後則會顯示往左的箭頭。

個人製作的案例,產生一塊有陰影或箭頭的區塊,用 JS 判斷捲動距離大於一定數值後,陰影區塊會消失。但這是不完美的案例。如果能再做到點擊陰影或箭頭時,區塊會自動滾動一段距離的話會更好。

個人製作的另一個案例,概念跟 Yahoo 奇摩! 差不多。使用者不知道可以捲動、懶得捲動,沒關係,留一個「更多」讓使用者按,點擊後會顯示產品搜尋框與所有商品分類。

結論
水平滾動選單是個挺常見的設計,對設計者而言,容易做、製作成本低,對使用者而言,不需要太多的學習成本,也算是個好設計。但究竟它是不是個完美的設計? 就有待討論。

文中範例有提到 Apple 網頁曾經也使用水平滾動選單,但是他們後來也改掉啦,變成全螢幕選單了!

是不是 Apple 發現太後面的選單沒人點,或是根本沒人去捲動,才改版的不得而知,搞不好是賈伯斯托夢也不一定。我前幾天才看一篇 為什麼我從來不分析別人的案例 | Circle ,所以不要隨便分析其他人的案例。


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


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

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

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

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

目標聽起來很好理解,就是表單的格子少一點嘛!
但網站的目的之一就是促進線上的商業行為,
隨著案件進展,與網站上線之後的消費者反應,最後常常離目標越來越遠。
例如會有:
「台灣外島的運費跟本島不一樣,而且要先收到錢才出貨」
「中國大陸客人的運費我要另外再報,不可以讓他直接刷卡付款」
「南部的顧客,請送到台南分店的 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 個格子,就可能造成完全不同的表單填寫達成率,這是很神奇的一件事。


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


淘寶新手賣家懶人包

身為企業主,對於對岸十幾億人口的電商市場有著美好的想像,想知道在淘寶開店方不方便? 有哪些困難點? 在淘寶開一個店,請一個工讀生,就可以等著數錢了嗎?
身為電商的工程師或規劃人員,想知道淘寶的後台系統有何特別之處,一個系統是如何應付各種運費規則? 想大概知道淘寶的商城系統跟台灣的商城系統差異在哪?
本文作一些初步的介紹。

目錄:

  • 阿里巴巴集團購物網站/導購或廣告服務介紹
  • 淘寶開店的費用
  • 寶貝上架流程
  • 淘寶上架規定
  • 處理訂單
  • 賣家工具與賣家市場
  • 從搜尋找到你的商品有多難?

上面有一個 ppt,如果看不到 ppt 請點此連結。精美的封面圖片來自於 Alibaba Defined | Alibaba Annual Report 2015

內容摘要:

一、一般人對淘寶的印象:

  • 馬雲語錄與他的創業故事
  • 技術團隊的研究心得與數據
  • 大陸電商神蹟
  • 台灣人要先看教學,才知道怎麼購物的購物網站(直運、集貨、大陸段運費+台灣段運費,代儲...)

二、阿里巴巴的購物商城/導購網/批發銷售網站業務介紹
淘寶、天貓,還有其他隸屬於阿里巴巴集團,看起來也是購物網站的網站,彼此之間到底有什麼差別呢?

(一)、阿里巴巴的B2C/C2C購物商城
資料不互通,各自開店、各自上架。

(二)、淘寶的子網站/導購網/阿里巴巴廣告服務
商品上架、結帳流程還是在淘寶網站進行。只是讓淘寶/天貓店家的商品增加曝光機會。

  • 全球購 - 探索全球美好生活:販賣港/澳/台/海外的原產/直送商品,或海外代購商品。
  • 閒魚 - 讓你的閒置游起來:二手商品交易市場。
  • 聚划算 - 無所不能聚:官方團購優惠平台,提供團購相關功能。並提供淘寶/天貓/阿里旅遊等網站的商品競標、限時搶購、品牌搶購活動商品。
  • 淘寶達人 - 跟著達人一起淘:(舊名為淘寶優站) 從淘寶或是天貓中,尋找自己喜愛的商品加入到自己的優站。消費者透過你的優站去買東西,你就可以獲得分潤收益。
  • 一淘網 - 買什麼問一淘:中國各大電商購物搜尋引擎,追蹤優惠資訊、使用心得文、購物討論、精選淘寶商品。
  • 阿里媽媽 - 阿里媽媽 贏在實效:網路廣告交易平台、CPM/CPA 等廣告申請,淘寶店家推廣,可刊登廣告,也可去申請把廣告放在自己的部落格。

(三)、阿里巴巴的 B2B 線上批發銷售服務

三、在淘寶旺鋪開店的費用
(一)、準備資料

  • 中國大陸的銀行帳戶
  • 中國大陸的手機號碼,簡訊驗證,與一些APP或數字證書的安全認證操作時會用到。
  • 個人開店(俗稱C店): 身分證明 (大陸身分證/台胞證)
  • 企業開店(俗稱B店): 中國大陸的營業執照

(二)、開店費用

  • 旺舖基礎(扶植)版: 免費,功能較少,限新手賣家與一鑽以下店家使用。
  • 旺舖標準版: 30 RMB/月
  • 消費者保障: 1000 RMB 起跳,有些商品分類,店家需要先繳交保障金才能上架。 (必须缴纳消保保证金的商品类目有哪些?。)

(三)、交易服務費(成交手續費):

  • 貨到付款/信用卡支付 須至淘寶後台申請開通。
  • 店家需要支付信用卡交易金额的1%作为交易服务费。
  • 支付宝账户余额支付、红包、积分(淘宝商城)、购物券等不计算服务费。 (淘宝交易是否有服务费之类的费用?。)

四、上架流程
(一)、上架流程-前置作業

  • 創建運費模板(物流、運費資訊)。
  • 設定店鋪商品類目(寶貝在店鋪內的分類)。
  • 設定商店資訊。
  • 設定消費者可用的付款方式。
  • 把商品圖片處理好,放在圖片空間。

(二)、運費模板設定介面範例

  • 運費模板(依件數/依重量/依體積)設定畫面。
  • 免運費(包郵)設定畫面。
  • 省份與地區選擇畫面。
  • 物流服務商畫面。
  • 消費者在台灣淘寶購物,會多出黑貓與超商的配送選項。

(三)上架流程-新增寶貝
1.選擇商品販售類型(一口價/拍賣/閒置商品)
2.三種方法選擇全站商品分類,不用像台灣的購物商城一個一個點來看。

  • 在類目搜索直接輸入產品名稱,系統自動列出建議的類目。
  • 使用您最近使用過的類目。
  • 從分類列表中逐層點選。

3.選擇品牌(必填):

  • 從下拉選單中選擇或搜尋您的品牌,若找不到,請輸入 other ,然後選擇「other/其他」,僅有少數的商品類目可直接輸入品牌名稱。
  • 如您的品牌不在清單中,可向淘寶提交該品牌的相關營業資料。申請品牌
  • 產品資料欄位,依上一步驟的分類,顯示完全不同的資料欄位與程式功能。

4.填寫寶貝信息

  • 商品名稱
  • 商品售價
  • 單一售價/多規格售價
  • 商品圖片:直接上傳/從圖片空間中選擇/上傳影片(正方形,9秒內)
  • 可銷售的商品數量:請如實填寫,付款後72小時未發貨,可能被投訴與扣分。
  • 產品說明編輯畫面:電腦端/手機端內容分開輸入
    • 原始碼/所見即所得/預覽模式。
    • 常輸入的資訊可使用「詳情模塊」。
    • 系統會自動保存近10次編輯紀錄。
    • 手機端務必輸入,否則用手機上淘寶會沒有商品資料。
    • 手機端資料與圖片格式限制請見手机版详情页发布功能上线
  • 設定商品運費,淘寶的每個商品都可獨立設定運費規則
  • 填寫售後保障信息/ 何時扣庫存
  • 上架時間: 立刻上架/預約時間上架/放入倉庫
  • 送出商品資訊,直接上架,可以直接輸入網址看到商品,10~15 分鐘後可在淘寶搜尋得到。一般商品不須經由業務審核才能上架。
  • 放入倉庫的寶貝不會顯示在商店中,但是直接打網址還是可以看到價錢、名稱、照片, 可用於活動促銷用。但若商品有問題,要用刪除的,不然消費者還是有可能看到問題商品。
  • 賣家工具–淘寶助理,電腦端的 Windows 應用程式,可以進行產品批量編輯、csv匯入匯出等操作。

五、什麼都有,什麼都賣? 各種淘寶上架規定
一般店家通常不會主動查閱規範,都是等違規之後,才知道平台有那項規定。但淘寶採扣分制度,違規累積扣分,可能導致商品搜尋排序被降級,店鋪屏蔽、店鋪關閉等後果。

1.字詞規定:

  • 禁止濫用品牌名稱或關鍵字,如台灣網拍常見的「媲美LV的 XX 包包…」,或「拉拉熊行動電源 非小米阿楞龍貓小小兵史迪奇蘋果平板手機ipad屁桃三星藍芽耳機htc」這種是禁止使用的。
  • 封鎖關鍵字,如治療。商品說明中若有「沾到眼睛時請以清水沖洗,並送醫治療」也是會被擋住,無法送出。
  • 搜索作弊行為(新增案例) 一覽

2.賣書: 須先申請书籍/音像卖家特种经营凭证,否則無法上架書籍。
3.以前常常有人說網拍沒有庫存壓力,接到訂單再去叫貨就好,但是淘寶有庫存數量與出貨規定。
4.防色 : 可以上架情趣商品,但是規定很多。已登入的情況下,直接搜尋波多野結衣也無法顯示。
5.中國新廣告法對極限用語的規定

六、處理訂單

  • 相關功能 : 已賣出的寶貝(訂單管理) / 物流功能模塊 / 評價管理 / 金流
  • 已賣出的寶貝(訂單管理)操作介面。
  • 賣家工具 : 阿里旺旺 - 为淘宝和阿里巴巴交易所量身打造的即时沟通交易工具。

七、賣家服務平台
淘寶賣家可至賣家服務市場購買所需要使用的額外功能,如ERP,排班系統,客服工具,流量分析工具...,或是一些額外服務,如商品攝影、商店版面客製化...。
第三方廠商也可透過API,開發淘寶的應用程式供賣家使用並獲利。
解決以往商城系統「無法擴充或客製化功能」,「想要某功能,但有錢也買不到」的問題。

  • 辦優惠活動需要付費,如限時打折功能是 10 RMB/月,滿額贈功能是 8 RMB/月。不定時會有套餐價。
  • 改 CSS 需要額外付費。
  • 不會改版面怎麼辦? 找裝修市場買模板/客製化需求。
  • 不會做網拍怎麼辦? 上淘寶大學。淘寶大學是一個線上教學平台,提供淘寶系統教學,還有一些網拍與銷售技巧,第三方廠商也可以錄製教學在淘寶大學販售。

八、淘寶真的這麼美好?
(一)、淘寶的真相, 看過的人都震驚了

(二)、各種排外

  • 商店主導覽列放置外部官網連結 -> 不行
  • 放置外連的 QR code (如微信服務號、APP 下載連結) -> 不行
  • 產品說明、一般頁面插入土豆網等第三方網站影片 -> 淘寶付費加值服務(订购视频服务怎么收费?)
  • 產品圖、產品說明圖放在淘寶以外的圖片空間 -> 送出後該圖會被自動清除。

(三)、用搜尋找到您的商品有多難?
上千種商品分類,關鍵字隨便一搜都是「共 XX 万件宝贝」你的商品在哪裡?
1.上架時填寫的越不詳細,越難被看到

  • 上架時沒鈎選產品細項,難以使用篩選器篩選。
  • 填寫以下信息的商品有機會優先展現給買家,不填的話更沒機會。

2.常常在改的商品搜尋排名機制

  • 人民幣戰士 (直通車 / 優惠活動/ 刷單洗評價…)
  • 店家信譽等級 (購物評價累積分數,與其他各項評比)
  • 開店時間 / 銷售量 / 付款數量排序。
  • 櫥窗推薦 (每家店依表現與開店時間不同,可得到筆數不等的推薦商品功能)
  • 違規/作弊被降序。

3.你的目標客群會用淘寶的搜尋嗎?
明確目標型消費者 : 你的客戶會在淘寶用分類/用關鍵字搜尋商品嗎? 你的商品是否容易被搜尋到?
閒逛型消費者 : 只會從淘寶首頁點活動商品 / 逛導購網。那你的店家有在辦活動、爭取曝光嗎?

4.圖片、內文、價錢是否吸引人點擊?
淘寶搜尋結果頁面的視覺重點: 商品圖、價錢、各種店家認證與優惠活動標章,您的商品跟別人比起來有競爭力嗎?


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


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

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

上面有一個 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)的重要性。


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