SAY討論區

標題: 填地址已經很煩了，表單還設計這麼爛會害你搶不到訂單喔 - 其他 [打印本頁]

作者: 日圓上升 時間: 2013-11-14 10:29:00 標題: 填地址已經很煩了，表單還設計這麼爛會害你搶不到訂單喔 - 其他

是否常常在國際網站下訂單時，遇到填州名 (state) ，卻不知道要填什麼的狀況？遇到要填送貨地址時，更是問題一大堆，而海外的買家在跨海購買時，常會害怕這筆交易有所變故、付了錢卻因為地址填錯而收不到，因此在不確定的狀況下，他們一定不敢貿然下訂，最後只好放棄購買。畢竟，就算有問題要客訴、問客服，還得跨過語言障礙和越洋電話費。
住址表單設計是網頁和介面設計師常常會忽略的一環，畢竟不是每個設計師都有國際購物的經驗，也很少人會對各國住址做深入的研究，但這卻是攸關賣家是否可以準確的把貨物交給海外消費者的重大關鍵。
接下來，我們將探討這個常見超級容易被忽略的問題。別小看這，魔鬼是藏在細節中的。
下圖是一般我們在網上常見的國際版 (美國) 地址格式，是以州 (state) 當作區域化分。遇到這個填空，很多人應該都不知道要填什麼。

圖 1

圖 2

在以上兩種表單的形式中，理論上圖 1 的形式會比圖 2 好，因為我們在思索地址時，是有連續性的，畢竟很少人會用斷行的方式來書寫地址。
但在圖 1 的格式中還是有個國際問題，就是編排的順序。例如在台灣，國家名稱後，填寫住址的順序，應該是居住城市 (台北市)、區 (大安區)，通常在這裏會接郵遞區號，接着才是街道名稱和號碼；但在美國，則是先寫街道名稱和號碼。

美國：街道名稱和號碼，居住城市，州，郵遞區號
台灣：居住城市，區 (郵遞區號)，街道名稱和號碼

不只台灣和美國的差異，不同的國家，因為語言或國情的關係，地址在不同的國家也有不同的結構。

圖 3

那在國際化的住址相關的表單設計，有什麼方法可以解決這個問題，追求更好的使用者經驗，避免使用者在下單時的最後一步受到挫折呢？
1. 專屬格式
假如你可以利用 IP 技術和瀏覽器記錄等方式，很準確的預估使用者的國家時，就可以打造出專屬於他們的表單格式和結構，例如下圖就是法國和意大利的版本，在「區」和「省」就有不同的呈現方式。
但你要注意一些特例，在某些狀況下，有可能是美國人在意大利上網，或是使用當地電腦時，要有清楚的切換按鈕，可以讓他們回到熟悉的模式。

圖 4

2. 可變動模式
在使用者的選擇下，給予不同的格式。例如下圖就是使用者已經選擇澳洲或是加拿大的狀況下，不同的模式。

圖 5

3. 通用模式
使用標準的地址結構和通用英文，然後用多註解的方式來處理不同國家的問題，雖然這一定不是最好的方案，但卻是一個可以兼顧多國地址問題，又能省下許多開發人員資源的方法。

圖 6

在地址設計的問題上，這邊提出了三種解決方法: 專屬格式、可變動模式、通用模式。
建議在廠商鋪貨國家不多時，可以使用專屬格式 (例如以美國為主，海外只有台灣市場)；而在全球佈局時，海外有多個據點，使用可變動模式，可減少許多不必要的困擾，初始的時候可以用國際通用語言英語；通用模式則適合在海外據點多，但開發資源不足的狀態下使用。
（資料來源：uxmatters；圖片來源：uxmatters；封面圖片來源：Wickerfurniture)

附件: [150143iq5j1rwvdjb.png] 150143iq5j1rwvdjb.png (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1Mzk5fDdiMzBmMTIwfDE3ODMwMDY1MDR8MHww

附件: [150143naz3wbfkv11.png] 150143naz3wbfkv11.png (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1Mzk4fGM3MzFhODZmfDE3ODMwMDY1MDR8MHww

附件: [150142ixg411oemdk.png] 150142ixg411oemdk.png (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1Mzk3fGMyMjA1NzllfDE3ODMwMDY1MDR8MHww

附件: [150142ymytimdcc44.png] 150142ymytimdcc44.png (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1Mzk2fDBhNzQxNDBmfDE3ODMwMDY1MDR8MHww

附件: [150141knrs2irnqlb.png] 150141knrs2irnqlb.png (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1Mzk1fDQ1NjE3Y2FifDE3ODMwMDY1MDR8MHww

附件: [150141w1kp12utjbu.png] 150141w1kp12utjbu.png (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1Mzk0fDQxMTgxMTdifDE3ODMwMDY1MDR8MHww

附件: [150141swbtm1umwid.png] 150141swbtm1umwid.png (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1MzkzfDI3MGY4ZjgxfDE3ODMwMDY1MDR8MHww

附件: [150140xvmrpwzlwr3.jpg] 150140xvmrpwzlwr3.jpg (2013-11-14 10:29:00, 0 Bytes) / 下載次數 0
http://forum.go2tutor.com/forum.php?mod=attachment&aid=NDU1MzkwfGU1MTcwODY5fDE3ODMwMDY1MDR8MHww

作者: chrity__summer 時間: 2013-11-14 14:50:45

先看看怎麼樣！

作者: junhau 時間: 2013-11-14 16:44:22

誰都不容易啊 ~~

作者: tomato_alex 時間: 2013-11-14 19:25:36

支持一下

作者: 牙`蔚 時間: 2013-11-14 21:45:47

我又來囉，應該在前幾帖吧

作者: 傻QQ 時間: 2013-11-15 01:26:22

我毫不猶豫地把樓主的這個帖子收藏了

作者: appson 時間: 2013-11-15 05:17:09

我的idea，被樓主嫖竊了！

作者: tn52003 時間: 2013-11-15 07:06:42

這論壇不錯

作者: xdxd125 時間: 2013-11-15 09:29:19

要多久才能升級啊

作者: Disy 時間: 2013-11-15 11:57:43

終於看完了~~~

作者: 小妖怪 時間: 2013-11-16 01:12:06

最有人氣的帖子

作者: freegold 時間: 2013-11-16 05:01:45

真是佩服得六體投地啊

作者: 盲搶鹽 時間: 2013-11-16 16:48:02

初來乍到，請多多關照。。。

作者: mic167 時間: 2013-11-16 20:49:07

我十目一行也還是看不懂啊

作者: kinh9999 時間: 2013-11-17 04:23:20

一樓的位置好啊.

作者: kinh9999 時間: 2013-11-17 07:58:03

看了你的帖，讓我有一種說不出的感覺

作者: vol1210 時間: 2013-11-17 16:51:50

好文章，和大家一起分享

作者: ILOVEU5 時間: 2013-11-18 03:25:21

潛水值看滿囉，回覆一下

作者: 底褲超人 時間: 2013-11-18 08:20:00

不看白不看，看也不白看

作者: freegold 時間: 2013-11-20 05:36:10

天啊，這帖子不錯，竟然沒有人回

作者: lreneMOON 時間: 2013-11-24 08:08:01

先頂後看

歡迎光臨 SAY討論區 (http://forum.go2tutor.com/)