前車之鑒:一個視覺交互設計失敗的案例

14 評論 39074 瀏覽 356 收藏 8 分鐘

最近在做產品設計時,遇到了一個非常典型的設計失敗案例。這個案例反應了一些老生常談的問題,我覺得非常有意思。

好看的設計未必好用

我負責的是一款秀場類產品,近期要在移動端中添加一個模塊,模塊主要的功能是展示主播的錄播視頻。下面展示一下原型圖和效果圖的對比。

1

2

我的原型圖中,采用了最簡單常用的布局方式,而UI設計師拿到需求以后,覺得這樣做實在死板,想做一些和其他競品的差異化。所以,將視頻封面放在了右邊,視頻標題、主播名稱、點贊數放在了左邊。當效果圖出來時,我第一眼感覺是漂亮,精致,整體效果非常不錯。領導看了以后,也覺得視覺效果很棒。于是,效果圖一稿便通過審核,步入開發。

然而,在開發完成以后,我看著手機上的測試版,效果并不盡如人意。首先,成品并沒有效果圖那么漂亮。在仔細對比后才發現,原來效果圖漂亮的原因,很大程度上是因為擺放的圖片非常漂亮。而實際產品中的主播,并沒有那么好看。這導致了看到實際產品后,有較大的落差感。

所以,建議UI設計師在出效果圖的時候,盡量擺放產品真實的內容圖片。效果圖并不需要做得有多漂亮,而是需要在產品開發前,模擬產品的真實樣子,保證產品內容在最差的情況時,依然能有良好的視覺體驗。

除了視覺落差感以外,我在深度體驗產品時感覺到有些別扭。所有該顯示的信息都顯示出來了,那別扭的問題一定是出現在布局上面。我開始翻看競品,想尋找問題所在。

拿YY神曲的頁面來說,雖然信息比較多,顯得有些雜亂,但是并沒有別扭的感覺。那為什么信息左右調換位置,就會產生別扭的感覺呢?

3

我開始尋找將圖片右置的相關產品,比如:今日頭條、ZAKER、一點資訊、央視新聞、騰訊新聞等??赐暌院螅l現采用這種布局方式的,大多是新聞類的APP。

4

于是,我第一次開始深入地分析頁面布局問題。

首先分析:為什么新聞類的APP的圖片要放在右邊?

5

如上圖所示,每條信息的元素有:新聞標題、新聞來源、點擊次數、熱度以及新聞圖片。

那這些元素對于用戶來說,優先級是什么樣的呢?首先,拿新聞來說,標題的優先級是非常高的,用戶判斷是否看這個新聞的第一元素通常都是標題。這是很早以前用戶閱讀報紙時就養成的習慣?;谶@個原因,新聞類APP標題的優先級大于圖片的優先級是沒有問題的。

那現在回過頭來再看看我自己的APP,分析一下用戶的閱讀順序。

6

首先要說的是對于秀場類產品,圖片絕對是第一視覺焦點。用戶篩選信息,絕不會逐字逐句瀏覽,而是大腦進行關鍵信息檢索,過濾次要信息。用戶“第一視覺區域”是沒有問題的,用戶第一眼看這個頁面肯定是被此區域吸引。接著用戶掃視“①版塊分類”的標題欄后,下面重點來了。

7

用戶視線會掃描整塊信息條,圖片肯定是第一優先級的信息,用戶通過圖片來判斷:

  • 足夠吸引,點擊進入;
  • 有點吸引,需要查看此視頻的其他信息來判斷;
  • 完全不吸引,跳轉下一條信息。

8

拋開第一種情況,當用戶覺得此視頻封面是自己稍微感興趣的東西,那么用戶需要閱讀其他信息來確定自己是否喜歡。此時用戶的視線由“②視頻封面”跳轉到“③視頻標題”然后向下掃視其他“④次要信息”。如果在判斷此視頻自己沒興趣后,用戶會繼續向下掃視,焦點又會跳到下一條信息的“⑤視頻封面”。然后重復以上路徑,循環掃視。

最后導致的結果就是:用戶以從右往左的一種順序瀏覽內容,違反從左往右的閱讀習慣。

總結:

其實,在產品設計中,追求創新、追求差異化是非常值得鼓勵的事情。但有時候為了尋找差異化,而導致用戶使用成本增加是需要產品經理細細斟酌的事情。在某一行業尚未成熟時,創新一款APP是比較簡單的,因為行業內并沒有一個大致的標準,也沒有太多用戶習慣的需要注意。但當行業趨于成熟,眾多產品涌現時,任何一點點微創新都難能可貴。

在這里還想說一個問題,就是大家在效果圖審核時,常常會說:我感覺這個頁面有點別扭,我覺得這個交互動畫有點不舒服。這到底是為什么呢?這種別扭到底是怎么產生的呢?我想這種別扭一定是視覺或交互傳達出的信息有悖于個人的日常感知。如果有一個頁面,很多人都覺得別扭的話,那很可能是某個地方設計有問題。也許有些問題是顯而易見的,也許有些問題是深層次的問題。如果是深層次問題就需要產品、UI設計師或者交互設計師細致地去尋找問題。存在的問題并不可怕,最可怕的是問題隱藏起來,而產品經理卻毫無感知。

 

本文由 @臻龍?原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 個人見解:因為閱讀習慣是從右往左,其二黃金分割原理,剛好視頻圖片所在位置,所以視頻圖片放右邊優先級比較高,也比較符合直播軟件的特點。

    來自美國 回復
  2. 好的交互真的能讓一款產品有氣質

    來自北京 回復
  3. 1、實際圖片沒有視覺圖美觀,這點更應該從運營層出發,優化用戶的圖片展示,這個鍋設計師不應該背,文中的觀點也沒有解決實際用戶圖片丑的問題;
    2、產品設計布局沒有絕對,更要考慮目標用戶群,視覺順序代表了優先級,對于視頻類美女圖片優先級更高,新聞類通常是標題包含的內容;
    3、感謝分享!

    來自廣東 回復
  4. 站在用戶角度來說,主播類APP首先看的是主播是否是我喜歡的類型,然后再看標題。而新聞類app主要是看標題,然后才會根據喜歡與否選擇查看或者不看。具體事情具體對待,不僅僅為了美觀。

    來自北京 回復
  5. 因為視頻類APP是圖片信息比較重要吧,文字要弱化,新聞類標題優先級較高,所以放左邊,字較深較粗。與作者所說的觀點一致,所以確定信息優先級很重要啊

    來自江蘇 回復
  6. 這種主打視頻類App的閱讀習慣我不懂,不過以我個人的經驗來說,我看新聞類App時,我會看標題多于圖片。
    你說的那種圖片優先級比文字高,我認為是在圖片最夠大的前提下才成立(當然只是我憑感覺而已)。

    因為手機端新聞類app的圖片很小,很多細節都看不到,必須點開才能看到清晰的大圖。所以這時我面對 (圖片-標題-簡要 )這樣的信息排列界面,看文字(標題)對于我來說才是最高效的瀏覽方式,而這里的圖片起到一個修飾的作用-填充界面,和降低閱讀疲勞的作用。

    然后,還是認同圖片應該放在文字信息的左邊,因為人的閱讀習慣確實是由左向右然后向下,如果圖片放在右邊,在人快速瀏覽時,會被一張張看不清的圖片打斷了瀏覽的連貫性,降低了瀏覽的效率。而放在左邊,會下意識地忽略了圖片,但為什么放在右邊為什么不會忽略呢?我認為是”閱讀慣性“造成的,所謂慣性就是在快速瀏覽文字時突然有圖片跟在文字尾端,形成一種文字和圖片的視覺沖突,而把圖片放在左邊,那么圖片一列就會形成獨立的板塊,這時候可以選擇性忽略它,直接閱讀文字,如果當閱讀者被某標題吸引,再把視線左移瞄一下圖片,就打開連接了。

    對于新聞這類app的圖文排布我是這么認為的,視頻類的我也認可你那種解釋。

    來自廣東 回復
  7. 分析得很到位,做了兩年的策劃,從來沒有像樓主這樣去分析過問題,太受益了!!謝謝 ??

    來自廣東 回復
  8. 不知道您有無工程類產品app的設計經驗,這一類產品和時尚類app很不同個,非常注重實用,。能否給我講些經驗嫩

    來自四川 回復
  9. 著眼于細處,確實是干貨,不由地點贊 ??

    來自四川 回復
  10. 喜歡看這種實例~比大道理干貨多了

    來自北京 回復
  11. 作者有認真分析,不錯!

    來自北京 回復
  12. 寫的挺好,雖然是個小問題,但是值得思考。

    來自北京 回復
  13. 謝謝分享

    來自廣東 回復