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 官方帳號,關注最新創業、科技、網路、工作訊息

好友人數

真無線藍牙耳機迎來個人化新時代!台灣聲學品牌 XROUND 打造個人化聽感及社群分享功能

近年來,真無線藍牙耳機的市場不斷推陳出新,各家耳機品牌除了提升耳機本身的硬體規格外,也逐步完善耳機專屬 APP 的功能性,讓產品使用體驗更加完美。
評論
評論

台灣聲學品牌 XROUND 在 2020 年就推出品牌無線耳機專用的 「 MyTune APP 」,讓使用者能夠自由調整 EQ 聽感設定,在不同的聆聽情境下都能擁有最優質的聽覺享受。

2021 年,XROUND 更在 APP 中增加了兩大功能:「 TailorID 」以及 「 EQ Sharing 」,除了能透過聽感測量,讓聽感更加個人化,還可在 APP 中與他人分享。未來品牌將邀請知名專業音樂人使用 MyTune APP ,讓聽感從個人擴及到社群,邀請同好一起交流。

XROUND 專屬 APP 的獨家 TailorID 聽感量測功能

每個人的聽覺,在不同頻段的聲響接受程度都不一樣,但一副耳機未進行客製優化前,在不同頻段的響應程度都是一樣的,因此無法讓每個人都有最佳的聽覺體驗。TailorID 功能只需要 3 分鐘,就能量測最適合自己的個人化聽感。

量測個人化聽感,只需要 3 分鐘就能完成。Photo Credit:XROUND
量測個人化聽感,只需要 3 分鐘就能完成。Photo Credit:XROUND

TailorID 功能會針對使用者的左右耳分別進行各頻段的聽感量測,讓使用者依照實際聽到的狀況回覆並記錄。量測完成後,就有一組使用者的專屬 EQ 配置,在播放示範音樂時,使用者再確認是否喜歡這樣的聽感。如果不喜歡,也能再自己手動調整。

TailorID 功能將會依照左右耳分別進行聽感量測。Photo Credit: XROUND

EQ 設定完成後,便會成為 APP 主畫面中的一組 EQ 設定,使用者還可繼續針對其他音樂類型再設定不同的個人化 EQ ,在聆聽時選擇使用。

使用者能夠針對不同音樂類型,設定不同的聽感。Photo Credit:XROUND

和專業音樂名人使用同樣的聽感,全新社群化 EQ Sharing 功能

XROUND 的 MyTune APP 除了可以量身客製自己的 EQ 聽感外,更可以利用「 EQ Sharing 」功能,在 APP 上和其他使用者分享聽感。

在設定好個人化 EQ 後,就能生成 QR Code 及代碼分享,與音樂同好或是親朋好友分享,也可以在社群平台和其他人交流討論。

XROUND 將舉辦 EQ 分享活動「XROUND EQ Sharing #讓你試試我的聽感」,邀請使用者在線上透過 QR Code 截圖分享自己的 EQ 設定。想知道各式聆聽情境下,不同人會有什麼樣的設定,歡迎至活動頁面了解詳情

Photo Credit:XROUND
使用者可以分享自己的聽感給好友,也能在社群上發文討論。Photo Credit:XROUND

未來 XROUND 將邀請各方藝人、專業音樂人來使用 MyTune APP,分享自己設定的專屬聽感,讓歌迷粉絲能夠與偶像擁有同樣專業級的聆聽感受。

正式迎來新時代!聆聽體驗不僅個人化,還能跟好友一起分享同樂

身為台灣在地品牌的 XROUND,不僅在耳機硬體上不斷追求進步,更在 APP 軟體上突破界限,讓真無線耳機的聽覺感受更加個人化,讓每個人都擁有最佳的聆聽體驗。

透過 TailorID 功能,設定個人化的 EQ 聽感,不需花大錢也能擁有完全客製的聽覺饗宴;而 EQ Sharing 能夠和好友分享,還能體驗到專業音樂人的聽感,讓音樂體驗更加豐富有趣。 XROUND 在真無線耳機的紅海中,帶給消費者更完整的功能,給人耳目一新的感受。

本文章內容由「 XROUND 」提供,經關鍵評論網媒體集團廣編企劃編審。