網頁設計：加入購物車按鈕設計與可用性

“加入購物車”按鈕非常小，但每個在線購物網站都離不開它。按鈕上的文字通常直接呈現在長方形的按鈕控件上，有時五彩繽紛的可點擊元素會將產品和購物車相聯繫起來，並有延伸品牌的功效。因此在購物車按鈕的設計中，很重要的一點就是將你的一些想法代入到你所設計的產品中。 我們自2006起，從各個頂級在線零售網站已經收集了超過100個“加入購物車”按鈕，這些按鈕會帶給你一些設計的靈感。此外，我們也總結了一些針對“加入購物車”設計的可用性指南共設計者參考。好吧，實際上是111個按鈕，其中的107的看上去更酷。 以下是一些統計，百分比看上去更直觀。 按鈕文字： 加入購物車 58.0% 加入背包 9.8% 加入到購物袋 9.8% 加入到購物籃 6.3% 加入到消費購物車 4.5% 購買 2.7% 現在購買 1.8% 將商品加入到購物車 1.8% 將商品加入到背包 0.9% 加入我的背包 0.9% 加入我的便當 0.9% 加入我的消費購物車 0.9% 現在預訂 0.9% 按鈕圖片 沒有 48.2% 箭頭 17.9% 購物車 14.3% 消費背包 7.1% 加入符號 5.4% 組合 4.5% 獨特的設計 1.8% “加入購物車”按鈕如何增強你的品牌 首先，“加入購物車”按鈕看似是一個小細節，但它包含用戶和品牌之間潛在的情感聯繫。你所選擇的按鈕樣式、色彩和按鈕文字都會影響這一情感聯繫的結果。 Urban Outfitters的手寫字體按鈕與其前衛和街頭的風格相匹配（這有可能有損于按鈕的可尋性，因為這無助于使按鈕在屏幕上脫穎而出）。Northerntool的加入符號（plus sign）型圖標酷似螺絲刀頭。Petsmart的紅色小圓球有趣且活潑，能即刻被認出。Bloomingdale的“big brown bag”圖標闡述了它品牌的威望。而Polo永恆的深色海軍藍色按鈕給線上和線下的品牌標識都帶來了和諧的一致。 按鈕文字也非常重要。“加入到購物袋”相對“加入購物車”聽上去似乎更適合高端百貨店，而後者可能更適合WalMart或Target。“現在預訂”一致很適合目錄推廣品牌，但現在也適合用於在線訂購。在英國，“加入購物籃”是更為普遍的術語。 按鈕設計與可用性 按鈕文字 網站文案強調高可看性（scannabliity），網站文案的黃金準則是：用儘量少的文字（don’t use 5 words when three will do）。這條準則如何應用到這樣一個小按鈕中呢？儘管如此，我們發現15%的按鈕文字比較長。Harry and David的“加入我的消費購物車”，更個人化和口語化。 “現在購買”相比“加入購物車”表達方式更有力，但可能更多的是建議用戶完成購物或作出一個購買的承諾，而不是再去檢查一下訂單。“加入購物車”的美感在於沒有強制並假設用戶還要繼續隨便看看。如果你是一個很好的電子商務銷售人員，那麼你正在展示推薦購買的商品和一個“歡迎繼續購物”的鏈接（或者你正在使用一個以Ajax實現的內嵌購物車）。 文字樣式 一般的網頁可用性設計指南推薦使用有高色彩對比度的sans-serif字體（高對比度的白字黑底或白字暗藍底，而不是像Chadwick低對比度的藍字藍底）。 全大寫字體在網站文案中基本不被推薦。大小寫混合更有利於閱讀，全小寫也具有同樣的可讀性。我們發現45%的“加入購物車”按鈕使用全大寫。Walgreen的白色全大寫文字，包含在含有一個帶有小圖標的弧度按鈕上，這種設計可以吸引部分用戶的視線。 按鈕的放置佈局 如果在你的產品頁面提供一些有用的功能，如：收藏夾（wishlists）、放大圖片、色彩轉換、其他可選產品預覽、發送給好友、查看購物車或結帳按鈕等等，請確認“加入購物車”按鈕保持醒目、明亮和對比顯著。次要功能按鈕在色彩上需弱化或文字上簡化。 文字疊加（譯者注：文字分兩行顯示） 文字疊加對鏈接和導航按鈕設計來說並不是一個好主意。同樣，也不適合“加入購物車”按鈕。用戶期望看到某種形式的矩形按鈕，這樣可以快速掃視文字頁面。文字疊加需要花費用戶更多的時間來辨認按鈕，甚至可能造成用戶的困惑。我們沒有必要去重新發明輪子，堅持簡單便捷的方式就好。 如何使用按鈕模板？ 即使不為購物車功能設計定制一個“加入購物車”按鈕，你也需要選擇一個符合網站主題的按鈕（並不意味著必須是完全相同的顏色）。請確認選擇一個設計後持續使用它。電子商務的蓬勃發展由信用驅動的，不停的變化按鈕會損害用戶對你的信任。