如何透過動畫效果,讓使用者獲得更佳的操作體驗

作者 | 發布日期 2014 年 05 月 28 日 10:33 | 分類 軟體、系統
c41ffd42730823c572c3712a988d1022

本文編譯自 Stripe 的 UI 設計師 Michaël Villar 發表在 Medium 的文章。 Stripe 是一家線上支付公司,能夠幫助開發者通過其 API 快速搭建支付系統,今年1月獲得了 8,000 萬美元融資,估值達 17.5 億美元 。



設計支付表單看似一件簡單的事情,但是如果仔細考慮一下,支付表單實際上是用戶線上購買的關鍵一環,填寫支付表單意味著消費者認可你的服務。 這個過程的使用者體驗應該做得盡可能好,而正確地使用動畫效果可以顯著提升支付體驗。動畫效果不應該僅僅為了好看,而是應該幫助使用者更好地了解發生了什麼,以及如何高效地使用產品。

判斷動畫效果好壞的一個原則是:如果你取消動畫效果,支付過程應該看起來是不完整的,否則,你的動畫效果就是多餘的。這是 Stripe 團隊對這個問題的一致看法,也是為什麼我們花費巨大的精力來改善支付流程的原因。 我們從第一天開始就關注於動畫效果的使用,因為我們相信這會大幅提升使用者支付體驗。

接下來我將通過幾個例子來展示如何通過動畫效果改善網站的支付體驗。

 

通過動畫效果輸入內容

d18d3a87cf9d44a0669ef770090b2533 這個變換效果非常實用。 在使用者選擇「記住我」時需要輸入手機號,這時會自動彈出輸入框。

 

搖動效果

3ab7427a76f2c7c01b6233f539a89fe1 使用者在填寫表單時很可能出現輸入錯誤的情況,這時,如果只是對他們說他輸入的訊息有問題,那麼使用者可能會感到很沮喪(進而可能離開支付界面)。 而通過搖動效果,看起來像是表單在向你搖頭,既可以告知使用者輸入內容有誤,又能夠盡可能減少使用者的不快。

 

讓使用者感覺速度快的小技巧

1*LiK-p-xTCMzz1Sly-1t65A 人們在等某件事時,時間過得非常慢。 這個動畫效果能夠讓使用者在實際接收短信時間沒有變化的情況下,感覺上快很多。

 

按鈕變換

f885f0b04a0cd7efae2b897158e22640根據填寫訊息步驟,按鈕從「付款訊息」(Payment Info)滑動到「支付 25 美元」(Pay $25.00)。 當使用者點擊「支付」(Pay)時,出現一個對勾,表明支付已經成功。 這個勾能夠讓使用者感到購買過程非常簡單,充滿成就感。

 

錦上添花的動畫

6d9652f79ded74a1b33d8f447b9ff98b

這個動畫效果有點多餘,就像上面說的,去掉它也不影響整個支付流程。 但是,我認為它對於提升使用者體驗還是有一定的效果的。 我不太信任樣式設計是 10 年前風格的網站。 這個動畫效果看起來很炫,讓使用者感到開發者追求完美並關注細節,情不自禁的會更加相信這家網站。

動畫效果的應用場景遠遠不僅限於音樂、照片和天氣應用。 上面這些例子展現了在 UI 設計時加入一些動畫效果對於提升使用者體驗的效果。 不論你做什麼樣的產品,添加合適的動畫效果可以讓界面更加明了,促進使用者的瀏覽轉化為購買,改變他們的對等待時間的感覺,讓使用者享受到更好的服務。

[本文編譯自: medium.com ]

 

發表迴響