巨匠電腦分享行動商務App UI設計超詳解！好評不斷

錚／

巨匠電腦分享行動商務App UI設計超詳解！
巨匠電腦評價好！

行動商務市場潛力無限

俗話說：「一機在手，希望無窮」，擁有一支智慧型手機或平版，就像擁有行動辦公室一般，不論身在何處都能快速處理工作。

而且別說是行動辦公室，在上面簡直就是一個小型生活圈：聊天、看電影、購物等等日常事物都能快速滿足，拿著智慧型手機或平版，彷彿讓你走遍天下暢行無阻。

智慧型手機和平版這麼夯，這也難怪許多電子商務網站都想砸錢投資，行動商務儼然已成為龐大的潛在市場，根據 eMarketer 統計，其在 2012 的全球成長率是 86%，且達到 250 億美元的市場（計畫能在 2016 年達到 860 億）。

行動商務是一個全新的平台，在某個程度上行動商務可說是個毫無邊界的領域。因此，這就是為什麼專門研究行動商務優化的 Baymard 機構共同創辦人，Christian Holst，投資將近一年的時間在行動商務的大規模可行性研究，以探究整個行動購物經驗，包括使用者對行動商務網路的理解、種類導航、搜尋、商品頁面、結帳程序等。

Christian Holst 的研究團隊測試了 18 個行動商務網站：1-800-Flowers、Amazoz、Avis、Best Buy、Buy.com、Coastal.com、Enterprise.com、Fandango、Foot Lockers、FTD、GAP、H&M、Macy’s、REI、Southwest Airlines、Toys　“R”Us、United Airlines、Walmart。

但儘管測試了目前為止最大型的行動網站，但在測試的過程中仍發現有許多有待改進之處。以下提供的指導方針除了適用在行動版本，也同樣適用在電腦版。但要注意的是，行動版跟電腦版兩者非常不同，對電腦版而言，這些方針能幫助電腦版大幅提升功能，但對行動版而言，卻是做好行動商務最重要的基本原則，也是設計最困難的部分。

（以下文字以 Christian Holst 的研究團隊第一人稱撰寫）

讓主頁面一目瞭然

問題：當你進入主頁面，映入眼簾的是五分八門的圖像或過於簡單的頁面設計時，你還會有意願繼續瀏覽嗎？

如果使用者無法第一時間從主頁面上得到整體概念時，很容易降低使用者對網站的信任感，甚至無法順利買到所想要的商品。

根據測試，70% 的受測者第一次登入主頁面或產品目錄頁時，儘管已知道要從何找到特定產品，仍會先大略瀏覽感興趣的區塊，或者在找到想要的產品後，瀏覽一至兩個其他種類的產品，以便下單前先看看其他選擇，或者藉此來提升對網站的好感。

（上圖，受測者即便已在目錄區找到男裝選項，仍會先大略瀏覽整個網路頁面）

由此可見，第一印象非常重要，能否讓手機用戶第一眼就能在介面上找到他們想要的，即是決定成敗的關鍵，若覺得這樣說不夠具體，那從以下反面的例子來看能讓你有更清楚的概念：

過多視覺元素

避免在主頁放置過多且需要極大專注力的圖像元素，盯著頁面看久都會感到眼花撩亂。

Macy’s 商場的手機頁面即是最壞的例子：主頁面大約有 60％的圖像內容，而且至少有八種不同的元素在裡頭，看著看著都會造成眼睛的負擔。但這並不是說放圖像不好，而是建議將圖像調整到最適當的大小，如此不但有畫龍點睛之效還能抓住使用者目光。

（多數受測者看到 Macy’s 網路頁面，明顯都露出受不了的神情。）

不要再另開一個目錄頁面

第二個容易犯的錯誤，就是不必要地隱藏目錄導航，有一些網站只會簡單設個「瀏覽目錄」選項，點選後還會再另外新開一個目錄選項頁面，此種作法會造成使用者想看其他選項，還得多一層回到主頁面的步驟。

切記，這不是桌電，沒辦法一次開很多頁面還能方便瀏覽，最好的辦法應該是直接在主頁面呈現商品目錄的清單，讓使用者能立馬檢視。

（左圖，網頁直接在主頁面顯示所有的產品選項；右圖，因為商品種類繁多，用隱藏式清單的方法反而能方便使用者閱讀）

還有一點，不要用下拉式對話框呈現商品目錄。多數受測者明確地表示，手機螢幕已經很小了，下拉式對話框更只佔了全螢幕的 50％，而且要找商品時，還得先滑完整個清單才能找到（且看以下 Best Buy 的例子）。

造成此種問題的原因，是因為手機感應操控區域（gesture area）也只有一半的大小，受測者其實很難正確地控制滑動的速度，一些受測者還會將下拉式對話框介面元素與選擇過濾器（filter selection）混淆，沒有認出那其實是主頁面上的目錄導航。

（Best Buy 非但沒有在主頁面放上目錄選項，還把選擇目錄的選項放在下拉式對話框中）

設身處地理解使用者對遺失資料的恐懼

問題：不知道到智慧型手機用戶是否都有使用觸控螢幕的困擾，很容易不小心就點到其他按鈕，造成原先打好的資料通通不見，還要重新輸入過，幾次下來後，說不氣也難。

要解決這樣的問題其實很簡單，永遠記得儲存使用者的資料，但這還需要有固態儲存技術、精細的測試、暫存資料的服務支援（大部份的手機支援 localStorage），因此看似容易，有許多網站卻都沒有真正成功處理過。

通常，使用者為了避免重蹈遺失資料的覆轍，碰到某些類別的元素時會非常小心，或者盡可能避開特定的互動，從下圖可看到，像那種要求使用者重開新的頁面這種舉動，都會讓使用者產生遺失資料的疑慮。

我們整理出以下情況出現時，使用者會產生遺失資料焦慮的傾向：

在結帳的過程中，受測者習慣都會在新的頁面點開連結，避免被無預期的頁面重載給干擾，上圖，受測者選擇「Residence type」時造成頁面重載，使得受測者慌忙的上下檢視是否有資料遺失，在測試時我們發現到這類狀況一直重複出現。

受測者很怕遇到對話系統（system dialog），即便有許多人並沒有注意裡面得文字內容，但卻下意識認為只要點選「OK」就有資料遺失的風險。上圖，受測者在想要返回某個程序選擇票券時刻時，出現畫面中的對話系統，但害怕選擇後所有程序得重新來過，因而無奈選擇取消的選項。

受測者相信只要一離開結帳程序，就會打亂原有的資料，因而拒絕返回檢視其他商品。上圖，受測者考慮要返回頁面找其他花束，但害怕還要重新輸入資料而做罷。當然，儘管許多網站有記住用戶資料的服務，但並非所有網站都有，使用者只能在每個網站選擇最安全的做法避免資料遺失。

通常在結帳時，受測者會認為按到「返回」按鈕極端危險，只有在沒得選擇時才會點選，這是可理解的，畢竟有多數網站在點選返回後都沒有儲存使用者資料。但奇特的是，使用者普遍認為，如果是點選網頁介面上的「程序步驟連結」或其他「返回」按鈕，相對起來就安全的多。

因此，在結帳時，包括「程序步驟連結」或其他「返回」按鈕都非常重要，用戶者就不用冒險點選瀏覽器上的「返回」按鈕。上圖，受測者上下搜尋卻沒能找到返回的連結或按鈕，因而選擇瀏覽器上的「返回」按鈕。

有關用戶者對遺失資料的恐懼，普遍來說，使用者通常會對曾經遺失資料的網站有負面的印象，例如，如果點選「下一頁」（next）會讓輸入的資料遺失，受測者會盡量避免按到此按鈕，受測者甚至因此在網頁的每個步驟上都小心翼翼，害怕一不小心會再度引發慘劇。

簡單來說，就是一朝被蛇咬，十年怕草繩，所以，在技術有限下，萬一無法存留用戶者資料時，要如何才能避免「遭蛇吻」？

答案是，用警告使用者的方式，讓他們能事先被通知有資料遺失的風險。

（如圖，使用者想要離開未完成的頁面，系統出現恐有資料遺失的警告）

存留資料當然是最理想的方法，但是警告用戶並在慘劇發生前讓他們能有挽回的機會也是不錯的選擇，尤其對需要花費大量時間來儲存資料的系統特別有用。此外，警告用戶的方法，也可以適用在整體網頁和行動網頁的轉換間，儲存用戶者的購物車和結帳資料的狀況。

資料的存留很顯然是個複雜的問題，特別感受到使用者對此功能的不安全感，我資料存留的處理雖然微妙，但處理的好卻至關重要。

在商品頁面的底端設立主按鈕
巨匠電腦評價好！

狀況：使用者很可能會將頁面底下的購物車按鈕誤解為「放入購物車」的按鈕，以為點選後，想要的商品就會被成功加入購物車中，殊不知網站已刪掉他購物車內的東西

大多數的受測網站在商品頁面都會有多種相似的主要動作按鈕（call-to-action buttons），例如有兩個「放入購物車」按鈕，一個在商品頁面的最上方或中間，另一個就是在底端。

而結果顯示，若在商品頁面只有一個動作按鈕，受測者容易遇到將頁面上方或底端的購物車圖示誤認成「放入購物車」按鈕，而造成商品遺失的窘境。Best Buy 和 Amazon 即是沒有讓主按鈕能立即被注意到，而致使受測者誤會的案例。

（在 Best Buy 的頁面上，受測者就誤以為底端的購物車圖示誤認為「放入購物車」按鈕）

（在 Amazon 頁面，受測者犯了同樣的錯誤）

通常，受測者都會滑至商品網頁下方尋找「放入購物車」的按鈕，因此考慮到受測者會有這樣的行為，為了減少對購物車圖式的誤解，在所有商品頁面底下加入二個「放入購物車」的按鈕。

如此一來可以讓使用者使用起來更順暢，讀完商品介紹資料後，滑到最下頁時就可以點選「放入購物車」，但如果商品頁面不長，設置一個按鈕就足夠了。

（如圖，使用者上下滑動很久才在中間找到加入購物車的選項）

密切注意動畫跑馬燈

狀況：跑馬燈上有商品打八折的訊息耶！等等 …… 不要跑得這麼快，我都還沒點到！

許多重要資訊都會在動畫跑馬燈裡出現，但光是要注意動畫跑馬燈簡直比登天還難。近一半的測試者對動畫跑馬燈都感到頭痛，對一些受測者來說，問題出在動畫跑馬燈跑太快，造成點閱的困難。

（受測者原本想點選「Mega Sale」，但因為動畫跑太快而點成「Bike Blast」）

在測試例子中，一名測試者欲點選讓他很感興趣的跑馬燈畫面，但因為跑馬燈太快速轉換到下一畫面，致使點選到錯誤的選項，有時候受測者會注意到此狀況，有時候則因為出現的頁面與想要的無關，而選擇離開網頁。

但有趣的是，在 Toys 「R」的測試案例中，儘管跑馬燈內有出現「前一頁」和「下一頁」按鈕，卻都沒有一個受測者使用（如下圖）。

類似上述兩種問題，也曾都發生在早期（現在也還有）那種佔據整個頁面的跑馬燈，但隨著近幾年跑馬燈在行動商務裡竄紅後，進化成當使用者滑鼠停在某個選項上時就會停止播放，大部分還有指標顯示跑馬燈有多少頁面，甚至當跑馬燈跑太快時，用戶者還可以跳回特定頁面。

但麻煩的是，這些功能都不適用在沒有滑鼠操控的手機介面上。

（如圖，使用者在 Toys「R」Us 試圖找 Gift Finder，但卻發現只能在頁面上方的跑馬燈內才能看到）

但最關鍵的問題其實出在，大部分的測試者僅撇一眼跑馬燈的第一頁就不看了，有些還有可能再多瞧一到兩張的畫面，會有這樣的現象是因為，大多數的使用者急著想找傳統如禮品搜尋（Gift Finder）的導航系統來搜尋特定的商品，因此有人抱怨一些網站應該要設置像禮品搜尋這樣選項。

使用者會忽略跑馬燈的原因歸咎於：

1. 跑馬燈的內容看起來很像廣告，因而產生越多「廣告視盲（banner blindness）」的現象（意即人們忽視廣告的行為），在受測者中，就有一群傾向注意文字為主的導航大於圖像為主的導航。

2. 當使用者用大型的筆電或桌電瀏覽整個網頁時，比較能看主頁上其他選項，同時也能瞥一眼跑馬燈的變化。然後在手機介面上，有鑑於螢幕太小的緣故，跑馬燈會佔據一大部份的畫面，幾乎無法同時檢視任何導航或目錄選項和注意跑馬燈的畫面（其中一個還會不分超出頁面）。因此，如果使用者想要用手機看跑馬燈內所有選項，需要像影片剪輯那樣有充分的時間可檢視。

有鑑於絕大多數的使用者完全忽視跑馬燈的存在，只注意主頁面上的目錄和搜尋專欄，你應該要密切留意太過依賴用跑馬燈顯示重要內容，千萬不要讓它成為搜尋特定物品的唯一途徑。

不要在子頁上顯示產品的資訊或圖片

狀況：能在子頁看到鉅細靡遺商品放大圖真不錯，但剛剛出現在主頁面上的介紹呢？怎麼不見了？

手機介面已經很小，要搞懂頁面範圍難上加難，手機頁面通常缺少細微但卻重要的頁面，例如一整套的導航區塊（俗稱麵包屑 Breadcrumb）、當前網頁的整體概要或是在瀏覽過程中都可看到的網址途徑，類似這種出現在整體頁面的範圍提示。

因此，有鑑於手機上缺乏頁面範圍的缺點，容易出現任何跟主頁面相關的子頁或子步驟的辨別問題，為了要察覺子頁面跟主頁面的不同，使用者要先搞動主要頁範圍才行。

（左圖，受測者想點擊圖片放大；中圖，放大圖出現在主頁面裡的子頁面；右圖，因為放大的圖示，受測者反而找不到主頁面上顯示的商品介紹等訊息。）

這樣的問題尤其在有提供圖片「放大瀏覽」選項的網站特別明顯，如上面 Amazon 的例子，將使面者引導到分開的產品子頁面，子頁面又尤其容易缺乏重要內容。

例如商品介紹、商品說明和使用者評論，沒有注意到頁面範圍改變的使用者會下意識猜測，此商品可能沒有提供這種相關資訊，繼而轉到其他產品區而與合適的商品失之交臂。

（如圖，Amazon 也用子頁面來呈現商品的細節介紹）

在手機上，尤其在分頁上，要理解當年頁面範圍著實困難。

取而代之的辦法，是直接在商品主頁面上顯示放大版的圖片、說明表格和其他相關的內容，也可以善加隱藏式的選項按鈕（點選按鈕會展開出各個內容部分），如此還可以避免太長的頁面，還有一種方法是直接在分頁上縮減附加的資訊或圖片，這不會有要另開分頁的問題。

特別在圖集裡，你可以用「疊加畫面」（overlay）的選項，例如上方的 Foot Locker 例子，用疊加畫面的方法，使用者不但可以看到下面的商品頁面，又能方便回到原本的商品畫面。

注意三個帳戶選項的設計和順序

狀況：訪客結帳（Guest Checkout）、PayPal 結帳、快速結帳？傻傻分不清楚，我只是想買個東西而已……。

在測試中，受測者在結帳時，會遇到如何使用訪客帳戶（Guest Checkout）或分不清楚結帳選項之間的關聯性的問題。

在手機上，使用者在結帳區塊有以下三種選項：「建立帳戶」、「登入帳戶」和「建立帳戶」，這三個其實是分開的步驟（不像電腦網頁上可以合併成一個選項），超過一半的受測者會在帳戶選擇的步驟中，碰到選擇訪客結帳選項的困難。

很多時候，要不要註冊是個人的選擇，但測試者常會誤以為要註冊才能使用，讓人產生網站有強迫帳號註冊的嫌疑，因此，在網路介面上設置帳戶選擇的頁面和設置訪客結帳選項一樣重要。

如以下圖示顯示，幾個不同的設計會導致一些嚴重的誤會：

在 Macy’s 頁面上（左圖），受測者以為點選「快速結帳」（Express Checkout）就能以訪客的身分結帳，但從中圖來看，很顯然是行不通的。因為「快速結帳」（Express Checkout）需要有 Macy’s 的帳戶，另一放面，右圖顯示只有一些人在頁面最下方發現「以訪客身分結帳」的選項。

在多個網站如 Amazon、Toys “R’’Us、REI、GAP、BestBuy，受測者會在帳戶介面中，填空信箱帳號等動作（如上圖），在 REI 網站上，每一個受測者都會在尋找訪客結帳的選項之前，下意識直接在信箱空白處填上信箱帳號。

多數案例中，受測者在提交表格前會發現錯誤（通常在要填寫密碼時才會開始推論他們是否是在登入帳號頁面還是成立帳戶頁面），這樣的案例中，有些網頁甚至不會出現認證錯誤的訊息來提醒類似的錯誤。

Buy.com 的狀況更糟，大多數受測者更本無法理解四個結帳方式（登入、成立帳號、訪客結帳、PayPal 結帳）、兩個表格、三個選項按鈕和兩個主要按鈕之間的關係，最後花了大半天的時間裡清整個頁面後，都選擇「以訪客身分結帳」的選項。

然後，在某些網站上可以看到一個叫做「使用我們的安全服務器登入」的按鈕，完全混淆單純想用訪客身分結帳的受測者，即便這種按鈕已被 Amazon 使用多年，甚至還被強調是最佳安全結帳方法的寫照，但怎麼會導紙如此嚴重的誤會？

原因在於用戶登入這部分，Amazon 並沒有提供訪客帳戶的選項，所以這樣的按鈕設計是成立的，但對那些只想用訪客身分結帳的受測者來說，無疑會造成誤會。

回歸到在測試中，一名受測者猜測頁面上唯一其他的選項用「PayPal 」必定能連到「以訪客身分結帳」的選項，但左等右等卻沒有任何動靜，原因出在「Enter your eMail Address」的空格不可留白，然而卻沒人發現輸入格旁出現的「必填」字樣（如上圖），通常受測者會多等一會兒看看網站是否都載入完畢，然後再重新點選一變，最後才會發現有「必填」的資訊出現在旁邊，而那些沒有發現認證錯誤的人，則會以為此網站不允許用訪客登入，所以只好另創一個帳號。

一個訪客分享他的經驗：「通常我會認為可以用『訪客結帳』登入，但是網站顯示我必須要填入信箱帳號，我根本不知道這個選項是做什麼用的，所以以防萬一，我選擇『不是，我是新客戶』的選項。」

清楚呈現帳戶選項的程序和提供訪客結帳的選擇一樣重要，以下我們提供兩個重要的設計原則，以防犯了文中所指的錯誤：

1. 將把訪客結帳選項放在最上層。如此一來，使用者就不用多增加一個填入信箱帳號的步驟，（如果有需要，你可以在下一個步驟查詢使用者是否有帳戶，而且要確認他們並不是點選訪客結帳的選項進來的)

2. 把表格和說明分成「訪客結帳」、「登入」、「新增帳戶」這三個選項。盡量讓他們可以在螢幕頁面中一目了然，省去上下滑動的必要。且外，在點選某個項目後，在選項下方展開表格和說明，清楚呈現出彼此的對應關係。

以下，可參考我們用以上兩個原則，將帳戶選項做歸類的範例。

（如圖，訪客結帳放在最上邊，右圖則用隱藏式選項提供細節內容）

字典功能差導致自動矯對大出包

狀況：我家是住在 Westheimer 街上，不是住在 Weathermen…，千萬不要把我的東西寄錯給氣象預報員呀！

通常，只要沒有出現在字典裡的縮寫、街道名、信箱帳號和同義字，都無法讓自動校對功產生功用，在受測者完成購買並提交出去時，我們發現許多這種錯誤輸入的問題存在。

（左圖，受測者在住址處填入 westheimer，卻被校訂成 weathermen；右圖，受測者沒發現錯誤提交而收到出現錯誤的通知。）

其中一個自動校對功能的問題是，受測者太過專注在正在打的資料上，根本沒注意到被校正過的部分，如果校正是正確的那就還好，但要是錯了那可就糟了，例如，在許多例子中，受測者沒注意到一個有效的住址被校對成無效的住址，就提交出去了。

一個網站沒有地址驗證的功能，除非使用者有確認訂單的習慣，否則很容易讓使用者提交錯誤的住址，畢竟，自動校對會把使用者的住址改成相似的單字，如上圖的「Westheimer」被改成「Weathermen」，正式的住址縮寫如 “Rd”則會被誤改成 “Ed”。

但千萬不要對自動校對功能失去信心，自動校對仍是輸入時的小幫手，所以不要急著解除此功能，只要審慎使用它就會有好結果，倘若真的遇到無法正確校對或碰到專有名詞如街道名等時，再考慮解除也不遲。

讓填入框有足夠的空間可以填入全部的資料（在填入框上方置入名稱）

狀況：我家住址太長，無奈填入框太短，好想戳破頁面把它拉長！

當填入框太短以至於無法填入全部的資料時，使用者通常無法輕易注意到錯誤，而選擇讓系統做校正，容易有產生錯誤的風險。

（受測者表示，填入框太窄，沒辦法看到打好的文字，只好刪掉再重新輸入一便了。）

有鑑於手機螢幕太小，文件中的填入框都太短以至於使用者無法在提交前確認資料的正確與否，而且就算可以校正，也因為看不見超出填入框的輸入資料而做罷，多數人因此會有像是「無法確認信箱是否有打對」這種抱怨聲出現。

（左圖，填入框太短，沒有好好利用旁邊的空白處；中圖，United credit-card 填入框只允許輸入 15 個字元，但大多數的信用卡號都是 16 字元呀；右圖：信箱填入框太小，就算下面再提供確認也於事無補。）

看看 Amazon 和最早 REI 的例子，左圖中可看出填入框旁還有足夠的空白出可以拉長整個填入框，但其他兩個因為填入框名稱是靠左對齊，造成另一邊沒有足夠空間給填入框，在這例子中，應該要把填入框名稱擺在填入框上方，這樣才能拉成填入框的空間，方便使用者填入全部資料，填入框名稱靠左對齊只會出現在風景模式的介面中。

填入信箱或地址須要全螢幕的空間，勢必要調整填入框的大小以便顯示出完整的資料，例如 [email protected]（通常 96% 的信箱和地址大多少於或等於 30 字左右）