瀏覽器上的標籤(Tab)式分頁功能,讓我們能同時新增很多不同的網頁,並且可以輕鬆又快速的在不同的網頁間切換,而不需要開啟過多的視窗。可惜在螢幕空間狹小的行動裝置中,傳統的標籤分頁是窒礙難行的,所以我們必須發展其他的標籤切換模式,來增進使用性。

Andrew Warr 與 Ed H. Chi 於 2013 年發表的論文中,就針對行動裝置中常見的兩種模式進行了使用者測試與比較,分別是分頁式(Pages Interface)與卡片式(Card-based)的切換模式:

這兩種模式除了在排版上的差異外,最重要的不同還有使用者的操作方式。分頁模式透過 swipe 手勢來做網頁間的切換,它最大的特點就是不論使用者 swipe 的快慢與否,每次都一定會切換到下一個網頁,視覺上的排版也通常只會顯示現在的(current)、上一個(previous)與下一個(next),適用於需要清楚的現在目前物件的細節時(如圖片)。

而卡片模式則會一次顯示多個網頁,因而搭配 scroll 方式來捲動畫面,它可以根據使用者 scroll 的快慢與否來快速瀏覽不同的頁面,可以停留在任意的位置點,讓使用者保有切換的彈性,但附加的缺點就是無法一次清楚顯示物件的所有資訊與細節,只能大致瀏覽物件的重要訊息如網頁標題(Title)。

在透過使用者的實驗與測試後,這篇研究結果發現,卡片模式在選取網頁的時間方面明顯低於分頁的切換模式( F(5,78) = 86.57, p < 0.001),也就是它在選取開啟過的網頁時具有比較高的效率,其中最關鍵的原因就是卡片模式可以同時顯示 3 ~ 4 個開啟的網頁。

透過數據的分析以及測試者的評估(採用 NASA-TLX 方法),在錯誤次數方面雖然沒有達到顯著的差異性,但當同時開啟的網頁數量增加時,分頁模式更容易讓使用者感到挫折並降低辨識性。

這篇研究並提出了分頁式的最主要缺點,因為無法一次瀏覽多數的網頁,並且只能透過邊邊的視覺來判斷上一個與下一個網頁的內容,即使搭配下方圓圓小顆的分頁控制元件(Page Control),所能提供使用者判斷網頁內容的資訊仍不足,當開啟的網頁很多時,無法快速掌握網頁的位置,大大降低了切換的效率。

在綜合評估下,卡片模式在手持裝置中比起分頁模式的確有其優異之處,手機版的 Chrome 很早就採用了卡片式切換模式,在這方面具有很好的使用性。考慮到分頁模式的缺點,也許這就是 iOS 7 中 Safari 改變設計的主要考量,在新設計中同樣採用了卡片式的切換模式精髓,只是透過不同的視覺化手法來表達。

在比較之下,會發現分頁模式比較適合用於探索(Explore)未知的內容,它具有可以清楚顯示細節的優點,而卡片模式則更適合用於找尋特定的物件,因為具有較高的視野與充足的訊息,可以輕鬆判斷物件之間的相對位置,並快速捲動到目的地,應該需要考量到物件的特性與使用情境來選擇適合的方式。

參考文獻
1. Andrew Warr and Ed H. Chi. (2013). “Swipe vs. scroll: web page switching on mobile browsers,” In Proc. of CHI2013, ACM, pp. 2171-2174.

( 圖片來源: Remy Sharp)

Comments

comments