行動裝置的網頁切換模式 PK 賽：Swipe Vs. Scroll

瀏覽器上的標籤（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.

資料來源：fourdesire