Stripe 如何設計付款流程動畫

看似無聊的結帳付款流程其實是使用者體驗乃至於生意做不做得成的重要環節,本文帶大家看看明星金流公司 Stripe 如何設計付款流程的動畫以利增進消費者的使用體驗,同時參考一下其他公司的作法。
評論
評論

昨天我們 介紹了 Stripe 這家雖然年輕卻備受矚目的線上金流公司 ,提到在技術之外他們也非常重視設計,創辦人兼執行長 Patrick Collison 還會跟設計師合作,寫程式微調網站上 demo 結帳流程的動畫。另一位 Stripe 設計師 Michaël Villar 則是在 〈 Improve the payment experience with animations 〉 談如何處理結帳流程中填寫付款表單的動畫,以及背後的用意。

Michaël Villar 認為,如果使用者已經走到結帳流程、開始填寫付款的表單,那麼等於是決定信任這個網站、信任你的公司,因此整個體驗當然要盡可能地做到最好。動畫的功能在此不是為了要用娛樂效果取悅客戶,相反的,動畫是要幫助他們更容易了解你的產品。如果拿掉動畫整個流程也不受影響,那麼這個動畫就是多餘的。

Stripe 負責設計結帳的團隊決定從一開始就要使用動畫,他們相信動畫可以強化整個核心體驗。

影片連結

這個動畫是要告訴使用者,電話號碼就是「記住我」這個步驟所需要的資訊,而且是在使用者勾選「記住我」選項之後才會隨之出現。

搖啊搖

影片連結

表單設計者很容易就可以告訴使用者所填寫的資訊在內容或是格式上是否有誤,但如果直接在每個欄位對使用者說:「嘿,你填錯囉。」不僅會讓使用者感到挫折,還可能因此提高使用者放棄結帳的機率,所以透過這個小動畫,不僅可以減輕使用者的挫折感,還可以告訴他們可能哪裡出了問題——基本上就是這張表單在對你搖頭 XD

魔術

動畫版本

Stripe 的機制是會寄送驗證碼到使用者的手機,然後要求使用者在這份表單中填入收到的號碼。其他像是 LINE 帳號註冊、Google 帳號兩步驟驗證等等,都會採類似的方式。只是我們也都知道,等待的時間會突然變得很長,因此如何讓使用者感覺時間過得快一點很重要,這時動畫的目的就是要製造錯覺——即便實際上時間一點也沒縮短 (其實也沒變長),那怕我們也不知道簡訊何時會寄到,就像我們不知道張無忌何時會到大都

按鍵轉換

動畫版本

這個在「付款資訊(Payment Info)」與「支付 25 美元(Pay $25.00)」之間切換的動畫就是在告訴使用者在填完付款資訊後會進入下一個階段,檢視完自己填寫的資料後按下付款,並透過第三個動畫告訴使用者付款完成。Michaël Villar 說自己最喜歡第三個打勾的動畫,這會讓使用者有一種自己輕易地圓滿完成某種任務的感覺。

加分

動畫版本

Well,上面這個動畫似乎違反了 Michaël Villar 自己文章的主旨,看起來有點多餘。不過呢,他說自己跟大多數人一樣,比較不信任「看起來很老舊」的網站,殊不知台灣這邊很多 IE Only、看起來像是 Google 還沒上市時那個年代的設計 。所以他認為先進一點的動畫有助於增進使用者的信任,使得整體的體驗更加完善。

Nest 的結帳設計細節

不只 Stripe,「結帳」過程中各種細微之處顯然是網站必須非常重視的環節。Amazon 的一鍵付款即是一例。而 Facebook 的產品經理 Dirk Stoop 上個月曾經在自己的 Facebook 上分享了一個 Nest 網站結帳設計的小細節。

通常,網站的表格會長這樣:

在欄位中告訴使用者要填入哪一項資訊。但是一旦使用者開始輸入資料後,原本的文字(placeholder)通常就會消失,於是 Nest 的設計師做出以下的設計,告訴使用者正在填寫的欄位是什麼:

如果使用者忘了填寫某些欄位,當然表單也會告訴你:

Square 的萬能輸入框

另一家 以重視設計聞名的 Square,曾經為了使用者在手機上輸入的方便,設計出單一輸入框即可完成信用卡類型、卡號、有效期限、CVV(卡片背後的 3 位數字)和郵遞區號的填寫。我們在 〈 Square 的巧妙設計——單一文字框搞定信用卡訊息輸入 〉 一文中介紹過:

輸入框當中的最左端是一個代表信用卡的圖示,主要內容部分用於輸入卡號,格式限制是典型的四位分隔。隨著使用者輸入數字,系統會根據卡號判斷卡片的類別,例如 VISA 或 MasterCard,並且配合改變左側的信用卡圖示。這種方式幫使用者省掉一個選擇卡片類型的步驟,而且是一種很積極的訊息回應方式,讓使用者能夠感受到系統對他們的操作產生反應。

當使用者正確完成 16 碼卡號填寫後,文字框會自動改變顯示模式,之前輸入的卡號只會顯示出最後的四位,節省出的三個段落就分配給有效期限、CVV 和郵遞區號。使用者在鍵入這些內容的時候同樣會得到格式限制的輔助,例如格式、日期有效性的判定、自動加入斜線、自動切換到下一段文字等。

這裡有一個很棒的細節,當使用者在輸入 CVV 時,左側的圖示會發生變化(如上圖所示),提示使用者所謂的 CVV 就是卡片背後的 3 位數字;非常貼心。

下方是 Zachary Forrest 利用網頁前端技術模擬出來的示範影片:

或是您也可以到 這個網頁 試試看。

歡迎加入「Inside」Line 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

精選熱門好工作

產品經理 (PM, PO)

VeryBuy非常勸敗
臺北市.台灣

獎勵 NT$20,000

品牌行銷 Brand Marketing

Hahow 思哈股份有限公司
臺北市.台灣

獎勵 NT$20,000

高階 SRE 專家 / Sr. SRE

奔騰網路科技有限公司
臺北市.台灣

獎勵 NT$20,000

評論