精彩內容

round_progress_meter_preview
六月 05


圖片2

 

你一定對於進度條( Progress Bar )不陌生,它是程式的進度指示器,並且告訴你現在完成了多少%,還剩下多少尚未完成,它的歷史幾乎等同於 PC 的發明,每款複雜度高( Feature-rich )的程式軟體,它都會伴著你度過這段漫長的安裝過程。

記得以前在玩仙劍奇俠傳時,本來行雲流水的御劍殺敵,卻總會在切換地圖時出現一槓緩慢前進的進度條,這真是超級煞風景的狀況。

如果是耐不住性子的使用者,一旦安裝時間拖的越久,越會不自主地點右上角關閉視窗,但這麼一來可能就錯過了一款優質軟體。既然「快慢」是一種個人主觀感受,我們如何利用設計來幫它加速呢?我們可以運用知覺特性製造出使用者的錯覺,讓那些急性子的人以為速度變快了!

 

  •  減速、 反向移動形塑時間感錯覺

如果你身邊剛好有一台 Mac OSX 系統,請留意看看進度條每次增加的長度,是否在前半段的時候,每秒所增加的長度較長,而到了快結束的位置,長度增加則較短。

在 Harroson ( 2010 )的實驗中發現,相較於較無長度變化( Constant )的進度條,這種減速式( Decelerating )的呈現方式,可以讓使用者知覺到更短的等待時間,加上輔以條紋( Ribbing )化視覺設計,更可以加強對長度變化的感受。

progressbar

一般進度條可能都是由左到右前進,那麼由右到左的反向移動呢?, Harroson 同篇實驗中也發現,反向移動( Backward moving )同樣會製造出時間較短的錯覺,實際上,使用此種改良式進度條時,受試者所評估的等待時間,平均會比一般進度條短了 11% 

移動知覺 ( Motion perception )並沒有絕對標準,而是會隨著看到的內容變化,反向移動可創造出移動速度增加的錯覺,進而改變使用者對於進度條的時間感受,而使用有趣設計轉移使用者注意力,同樣可以減少使用者所知覺到的時間。

Simple_Progress_Bar_Template_Preview_Small1

  • 讓進度條產生脈動

使進度指示器產生脈動( Pulsation ),例如將它在兩種顏色間互換、或者增加動態圖形,都可以達到縮短知覺時間的目的。我們可以把脈動想像成歌曲的韻律( Rhythm ),聽一首快節拍的歌時,我們會感覺到它所播放的時間似乎比較短。

放射狀活動性指標( Activity indicators )就是其中一種應用,如果你是蘋果愛好者,一定對下圖非常熟悉,

Activity_indicator

其實這種放射狀的進度條已漸漸取代直式進度條,除了脈動感可讓使用者感覺速度變快,同時還存在另一個優點,一個不停運轉的圖形,會讓使用者瞭解到程式正在執行,而不會誤以為卡住而重覆按下執行鍵造成當機。這樣一來便可大幅地降低當機機率,也難怪 Apple 的 iOS 及 Mac OSX 系統總是較少出現死當情形。

好的人機互動,除了創造出良好使用者體驗外,也讓機器出錯的機會變少了!

 

  • 避免讓使用者有無法結束的感覺

若你的程式需跑較久的時間,請將緩慢的部分設計在前半段,避免在快結束的地方突然慢下來。因為相較於結尾地方,使用者在一開始的時間點忍受性較大,如果結尾遲遲不能結束,會讓他們無法忍受而關閉安裝程式。看看下圖的設計,是不是讓你比較願意等待呢?

helixbar

 

 

  • 讓使用者產生愉悅感

時間感是「相對性的主觀感受」,很少使用者會計算安裝一個程式所需要的時間,當程式複雜性越高,越需要細膩地設計你的進度條。使用者當下的情緒具有主宰力,"快樂時間總是過的特別快",心情愉悅時對時間的知覺會變得遲鈍,於是時間似乎就真的變快了!

還記得鳥山明老師筆下的精神時光屋嗎?這是一個在裡面時間一年,等於真實時間一天的獨特空間,它運用了人對環境的無力感、焦躁感,讓進去的人以為過了好長一段時間,就好比重度幽閉症患者,當被困在電梯中十分鐘時,他卻可能告訴你「我好像已經被關了好幾個小時」。

 

1342096261-210248716

設計必須架構在使用者經驗( User Experience )上,一個聰明的進度條設計,必須「技術性」的增加讀取速度,也就是降低客戶所知覺到的等待時間,知覺就是一切,成功縮短用戶「知覺到的時間」,真實時間也就真的變短了!

 

◎推薦閱讀

社會心理學專題:三種最值得學的速成說服話術

認知心理學專題:為何我們總是買一堆垃圾食物?

情緒心理學專題:為何行銷廣告總是無法引起客戶共鳴?你必須知道的情感影響力

消費者心理學專題:不確定的小確幸比較好?!行銷人一定要懂的消費者心理學

 

email追蹤第一手有趣好玩的行銷、商業點子訂閱 reBuzz

(資料來源: Harrison( 2010), Faster Progress Bars: Manipulating Perceived Duration with Visual Augmentations;圖片來源: smashmaterials.com, CC Licensed)







標籤:, , , , , , , , , ,

van

出生於屏東,目前旅居台北 喜歡分享一切新奇有趣的事物


Copyright © 2014 reBuzz 來報這 | All Rights Reserved

无觅相关文章插件,快速提升流量