提升移動應(yīng)用的“心理響應(yīng)速度”

2 評論 2810 瀏覽 1 收藏 9 分鐘

在移動體驗的設(shè)計當(dāng)中,界面的響應(yīng)速度是我們需要重點關(guān)注的。移動用戶所處的典型情境通常會使他們的注意力更難集中,耐心更有限。如果交互的觸發(fā)或內(nèi)容的加載需要讓用戶等上太長的時間,那么很少有人會不動聲色從容不迫的聽之任之。

怎樣使你的移動應(yīng)用變的更“快”?這個問題顯然會涉及到很多方面的因素,例如界面圖形資源及開發(fā)技術(shù)方案的合理性等等,而我們今天要探討的,是一些從“心理”角度出發(fā)的細節(jié)設(shè)計技巧在幾個典型場景中的使用方式。

圖片上傳

當(dāng)你在Instagram里發(fā)布照片時,圖片文件實際上是在你剛剛完成拍攝或是從本地選擇好之后就已經(jīng)開始悄悄上傳了。整個上傳機制充分利用了Instagram自身的照片發(fā)布流程——用戶在拍好或選擇好照片之后,還需要經(jīng)歷一段包含著若干步驟的編輯操作,例如縮放、剪裁、添加濾鏡效果、添加文字等等,而圖片文件的上傳工作就在這段時間里悄然完成。用戶不需要再焦躁的面對進度條或是上傳狀態(tài)提示信息一類的東西了。

一旦用戶完成編輯并點擊“分享”,界面會切換回到feed當(dāng)中,如下圖所示。此時feed內(nèi)容上方會短暫的出現(xiàn)一個“正在完成”(Finishing up)的提示,然后用戶剛剛發(fā)布的照片會立刻出現(xiàn)在feed當(dāng)中。整個“上傳”環(huán)節(jié)給人的感覺非常簡短而自然。

 

回顧這一流程,你會發(fā)現(xiàn)正是那些讓人覺得很有參與感的圖片編輯環(huán)節(jié)分散了用戶的注意力,文件的自動上傳工作巧妙的利用了這個時間段。良好的設(shè)計使用戶產(chǎn)生了一種“幻覺”,讓他們感到圖片的上傳似乎沒有花費任何時間(用戶可能根本就不會產(chǎn)生任何感覺,因為流程太自然了),而實際上,用來上傳圖片的時間長度從技術(shù)角度講并沒有真正被縮短。

如此一個低調(diào)到用戶可能完全不會察覺的設(shè)計方式,給產(chǎn)品體驗帶來的提升作用卻是相當(dāng)巨大的。過去,市面上的多數(shù)照片分享應(yīng)用都使用著相同的“傳統(tǒng)”方式,即在用戶完成編輯并確認分享之后再開始上傳流程;而Instagram的方式使其在“輕松”和“快捷”等方面的體驗極大超越了同類產(chǎn)品。用戶未必了解原理,也不在意原理,他們只是在潛移默化當(dāng)中選擇那些讓自己覺得“好用”的產(chǎn)品,放棄那些“不好用”的。

消息發(fā)送

這也是移動體驗設(shè)計當(dāng)中的一個典型“加速點”。

我們來對比一下Whatsapp與iMessage的實現(xiàn)方式,看看他們是怎樣告知用戶“消息已成功發(fā)送”及“對方已收到消息”的。

Whatsapp用到兩個綠色對勾圖標(biāo),其中一個代表發(fā)送成功,另一個代表對方已經(jīng)收到。

 

02-whatsapp-speed-performance-mobile-ui-interface-ux-design.png

Whatsapp的聰明之處在于,他們會在用戶確認發(fā)送消息之后立刻顯示第一個對勾。即使消息數(shù)據(jù)此時可能還沒有被完整的上傳到服務(wù)器上,他們也會假設(shè)一切都會很快的順利完成;從體驗的角度講,此時最重要的事情不是等待上傳完成,而是立刻將“正面反饋”給到用戶。這樣做一方面可以展示出產(chǎn)品對于用戶的操作具有很高的響應(yīng)性,一方面則可以讓用戶產(chǎn)生一種感覺——“Whatsapp發(fā)消息的速度真的很快啊”。

iMessage則使用了一種相當(dāng)不同的方式來創(chuàng)建正反饋循環(huán)。

 

03-imessage-speed-performance-mobile-ui-interface-ux-design.png

用戶輸入消息并點擊“發(fā)送”,消息氣泡會立刻進入內(nèi)容區(qū),這不壞;但同時,代表實際數(shù)據(jù)發(fā)送過程的進度條則會在導(dǎo)航欄底部出現(xiàn);根據(jù)網(wǎng)絡(luò)鏈接情況,進度條有時會花費一點時間才能走完。如果發(fā)送的是圖片,那么進度條的推進速度會很慢。

為什么說這是一種相對較差的體驗?因為用戶將無可避免的去觀察進度條的推進速度;在千變?nèi)f化的移動情境中,網(wǎng)速變慢是常有的事,相應(yīng)的,進度條的推進速度會有不同程度的降低,這就會使用戶時不時的產(chǎn)生對速度的負面感知;長此以往,他們就會在潛意識中認為這款消息應(yīng)用本身就是慢的、“不好”的。即使Whatsapp和iMessage發(fā)送消息所實際花費的時間完全相同,在用戶的角度看來,Whatsapp依然是那個“更快的”。

所以,對于此類產(chǎn)品來說,消息狀態(tài)的反饋方式會在很大程度上決定其在“速度”方面給用戶帶來的體驗。

相關(guān)閱讀:為用戶的成功操作提供正面反饋

內(nèi)容加載

對于正在界面當(dāng)中進行加載的內(nèi)容,我們有著很多約定俗成的設(shè)計方式。通常,我們會使用菊花轉(zhuǎn)或是進度條來告訴用戶界面中有內(nèi)容正在被加載,請等待。在各種典型的移動情境中,如果這種狀態(tài)持續(xù)的時間稍長,便很容易讓用戶感到焦躁和挫敗;這種感覺就像是逼他們無所事事的看著沙漏里的沙子一點點漏下來。

近來,有些應(yīng)用開始嘗試新的思路,試圖讓用戶從心理上感到加載速度的提升,從而減少他們的焦慮感。這些應(yīng)用(例如Facebook Paper)會在內(nèi)容完成加載之前首先在界面中展示一個“框架”,內(nèi)容加載完成之后,會很平滑和自然的在這個框架的布局當(dāng)中呈現(xiàn)出來。整個流程帶來的體驗具有很高的平滑度。

 

04-paper-speed-performance-mobile-ui-interface-ux-design.png

Pinterest在他家的應(yīng)用和網(wǎng)站上也使用了類似的做法,不過他們走的更遠些。他們會分析每篇內(nèi)容中的圖片,將其中的主要色彩識別出來,并存儲在服務(wù)器上。當(dāng)應(yīng)用要加載這些圖片時,首先會在預(yù)加載的框架當(dāng)中將每張圖片的主要色彩顯示出來;當(dāng)圖片完成加載后,便會很自然的呈現(xiàn)在以其主色彩為背景色的卡片當(dāng)中。

05-pinterest-speed-performance-mobile-ui-interface-ux-design.png

小結(jié)

作為應(yīng)用設(shè)計師,我們自然會盡一切可能去塑造更快、更流暢的移動體驗。對手機應(yīng)用是這樣,對于將來在各方面限制更加突出的可穿戴設(shè)備應(yīng)用來說則更是如此。有些時候,要提升產(chǎn)品的響應(yīng)效率,提高整體體驗的平滑度,除了技術(shù)方面的因素外,在功能流程和界面細節(jié)當(dāng)中通過設(shè)計技巧使用戶產(chǎn)生“快”的感知,這也是一種事半功倍的方法。

 

本文來自Be For Web
更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!