Animated UI Transitions and Perception of Time – a User Study on Animated Effects on a Mobile Screen

source: Huhtala, J., Sarjanoja, A., Mäntyjärvi, J., Isomursu, M., and Häkkilä, J. 2010. Animated UI transitions and perception of time: a user study on animated effects on a mobile screen. In Proceedings of the 28th international Conference on Human Factors in Computing Systems (Atlanta, Georgia, USA, April 10 – 15, 2010). CHI ’10. ACM, New York, NY, 1339-1342. DOI= http://doi.acm.org/10.1145/1753326.1753527

與傳統的電腦相比,行動裝置的效能較為受限,但成功的設計可以透過動畫的轉場效果來隱藏系統的延遲且讓使用者經驗感覺更為順暢。在這篇文章中,作者透過使用者研究來測試多種不同的操作模式,得到在兩張圖片緩換得過程中,快速地將第二張先呈現出來這種轉場過程與其他方式相比會讓使用者覺得較為順暢。

(老師,對不起,這真的要兩張圖>"<)

作者在筆記型電腦上,使用flash程式來同時模擬兩台 nokia N95 手機畫面。使用者按下開始鍵,左右兩個模擬器會同時開始轉場效果,效果結束後螢幕會呈現黑色。接著使用者決定那一個效果讓他感覺比較快。為了避免圖片特性帶來的干擾,作者從Flickr中取出了96張不同主題的照片隨機播放。此研究的自變數有:

  1. 轉換時間點
  2. 不同轉場效果運行時間
  3. 放大效果

作者共列出了24種組合(如上圖四),組合中混雜了各種狀況、像是單純的切換時間點(如圖二所描述)、轉場動畫時間長短、以及混用放大效果的狀況。受測者則是有二十六名,年齡從二十三歲到五十二歲,其中有十六名受測者有矯正過視力。圖四則列出了實驗的結果。

從這個結果看來,第一張圖片很快地消失,使用者會覺得這整個轉場特效的速度較快。第二重要因素則是下一張圖片淡入的速度。而根據實驗結果,放大的功能啟用與否並不會影響使用者對於速度的感受。最後作者根據實驗結果得出兩個建議:

  • 新的內容應該要越快出現越好,不論是怎樣的過場動畫。
  • 使用者並不容易被愚弄,使用者很容易注意到內容出現的速度。

作者最後提到了他們的研究的一般性目前並不是很足夠,主要是因為測試的組合數量不足(這點是因為太多的測試組合長時間下來會讓使用者無法集中精神)。但作者認為此研究還是很有象徵性,且對於移動裝置上的使用者介面設計很有幫助。

    One thought on “Animated UI Transitions and Perception of Time – a User Study on Animated Effects on a Mobile Screen

    1. 把流暢度限定在一個這麼窄的範圍, 然後做出實驗假設, 實在是高招啊, 值得我們學習!

    發表迴響

    在下方填入你的資料或按右方圖示以社群網站登入:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / 變更 )

    Twitter picture

    You are commenting using your Twitter account. Log Out / 變更 )

    Facebook照片

    You are commenting using your Facebook account. Log Out / 變更 )

    Google+ photo

    You are commenting using your Google+ account. Log Out / 變更 )

    連結到 %s