當卡片式UI不再流行，列表式UI將是王牌

作為設計師，雖然我們都喜歡最新的流行趨勢，額外的白色空間和大圖像，但對于新聞和數據，列表式是更好地解決基本的用戶目標的方法。

隨著Material Design的流行， 卡片式UI 已經成為現代web設計的一部分。尤其是在你在提供一個匯總歸檔信息的界面時。

卡片是提供詳細信息的入口。——來源： Google Material Design

我們的用戶體驗設計團隊最近重新設計基于卡片的模式。本文將進行簡單地總結，你會明顯得得到更多的信息。然而，當涉及到新聞，尤其是家庭和歸檔的頁面時，會發現我們遠遠超過了使用這種模式。

基于卡片式UI設計的app截圖

文章排版設計的反饋

在重新設計后，經常用戶群會有及時的負面反應。緊隨其后的是大量的投訴和電子郵件，要求你撤回到舊的UI界面。

我們計劃重新設計Goal News 和Live Scores這兩款app，這兩個app都沒有受到變化的影響。所以考慮到這一點，我們要對策略進行一些改變。聽從批評，然后建立共同的模式。

我們第一次接觸卡片問題是在Goal News發布之后 – 見圖。屏幕上可以看見少量的抱怨的文章。例如：

用戶關于卡片得反饋截圖

太多的圖片而且需要不停地滾動。我只是想快速的瀏覽新聞。

為了看所有的新聞我必須滾動大圖。而且不能夠一次查看加載的新聞。

從用戶的反饋得到：反饋是很重要的。這不僅僅是抱怨一個性能，而是花時間解釋引起的問題。通過這個我們確定了一個共同的用戶目標，需要快速閱讀，只得到最新新聞的概述就夠了。

進一步需要研究一下現在問什么沒有實現這一目標。下面是我們得一些研究。

更深入的挖掘

通過使用HotJar分析其他網站上的點擊和滾動距離，我們注意到類似的問題。Spox.com的主頁最近被重新設計，新的設計側重于新聞列表，從其他的分離開來。

Spox.com – 重新設計

舊主頁如上所示。 您可以在“Spox電視季后賽”橫幅上方的小圖片上看到大量的可點擊事件。 這些點擊會使導航輪播。 他們在此頁面上的被點擊次數為43％。 這可能會吸引大量點擊，因為單個用戶可能在同一會話期間點擊多個卡。

22％的總點擊次數是通過“Themen des tages”的列表。 這個列表實際上只出現在第一個輪播項目！ 于是通過分離“Themen des tages”重新設計和旋轉木馬導航的方法來解決這個問題，如下：

Spox.com – 重新設計

結果令人難以置信，“Themen des tages”的點擊次數增加了三倍，達到了點擊總數的59％。

有趣的是，旋轉木馬導航的列表方法有相反的效果。 通過刪除圖像，我們幾乎失去了與該區域的所有交互。 現在只占總點擊次數的1％。 與以前相比有巨大的差異，其中43％的點擊在導航轉盤。

這可能表示用戶正在使用導航，以找到剛剛消失的新聞列表。 記住它只出現在第一張幻燈片，這個導航啟用了自動播放。

移動模式

當我們研究在移動設備上的行為時， 我們訪問了一個基于列表的UI網站（下面，左）和兩個基于卡片的UI網站（下面，中，右）。 我們承認存在偏見，我們不是像上面做的比較同一個網站 ，但仍能總結出一些結論。

移動單擊并滾動地圖。來自：HotJar

卡片式增加了漢堡菜單的使用

比較菜單圖標的使用。我們可以看到一個基于卡片式的網站的更大的用途。統計數據的分析如下：

• 左 ：Voetbalzone – 0.48％ – 列表UI
• 中 ：Spox – 17.43％ – 卡片UI
• 右 ：Goal – 4.93％ – 卡片UI

這可能是因為用戶對有限的可見標題會感到不耐煩，并且已經訴諸使用菜單來找到與其需要相匹配的內容。

卡片式增加了滾動的深度

在Goal（最右邊）上使用卡片鼓勵用戶向下滾動頁面。這不是常見的，因為每個卡片相比于Voetbalzone（最左邊）占用高出38％的高度。雖然用戶滾動更多，他們仍然看到較少的內容，比較左側網站少了3篇文章。

可閱讀的文章數

很明顯，列表的好處是你可以在視圖中放更多的新聞文章，從而更快地掃描標題。為了理解這種差異，我們需要研究基于卡的設計所需的額外空間。我們已將研究擴展到競爭對手的新聞網站。將3個依靠卡片式的網站與3個喜歡列表的網站進行比較。

只考慮主頁，我們已經看了2種情況。一是在折疊，二是向下滾動到“最好”的位置 – 最可能是新聞標題的地方。為了使測試公平：

• 只計算標題100％可見的新聞報道
• 確保瀏覽器設置為最大寬度/高度為Macbook 13″
• 使用相同的瀏覽器：Google Chrome
• 縮放級別設置為100％。
• 屏蔽廣告，因為廣告橫幅的高度可能有所不同

首先讓我們來看看折疊效果：

折疊效果。 頂行是卡片式網站。 底部是列表式網站。

下面是“最好的”案例 – 你可以看到最多的新聞。

最好的位置看到最多的新聞。 頂行是卡片式。 底部是列表式。

分析這些結果表明，通過使用列表，您可以將新聞的數量增加一倍。 當比較最壞的情況和最好的情況，OneFootball（卡片式）最多只能放6篇文章的標題。 其中Voetbalzone（列表式）在類似位置有19個標題。

列表與卡片的其他示例

我相信我們不是唯一來解決這個問題的人。 例如，Google已經對其搜索結果頁進行AB測試。

Google搜索的AB測試。

Google的搜索結果可能會更加豐富多彩，但每頁提供的信息較少。

Material Design的建議

什么時候適合使用列表？ Material Design建議的是列表是“可快速掃描”，適合顯示類似的重復的內容。

當用戶不直接比較圖像或文本時，不推薦使用卡片式。新聞網站的用戶經常想比較新聞標題，特別是在首頁上以獲得對當前故事的概述并決定對哪些文章再進一步探索。

Google Material Design團隊的一些關于卡片式的建議。

總結

這兩種模式都有各自明顯的好處。 這不奇怪的是，列表式更緊湊，因此你可以看到更多的新聞文章，更容易的瀏覽標題。

雖然卡片式有更大的影響。 圖片是抓住用戶的注意。 附加信息如摘錄和標簽，也可以出現在卡上。 在用戶提交請求之前給他們更多的信息。

作為設計師，雖然我們都喜歡最新的流行趨勢，額外的白色空間和大圖像，但對于新聞和數據，列表式是更好地解決基本的用戶目標的方法。 快速的瀏覽以查找相關內容。希望你會從我們的錯誤中學習，在設計下一個主頁或歸檔頁面時打破嚴格的卡片模式。

 

來自：http://www.woshipm.com/ucd/517844.html