當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候

2 評論 7304 瀏覽 14 收藏 8 分鐘

編輯導語:設(shè)計師在與產(chǎn)品溝通的時候總會遇到一些問題,比如設(shè)計師對于功能的設(shè)計優(yōu)化想要更簡潔,但是產(chǎn)品想要完整的設(shè)計稿,這時候設(shè)計師應(yīng)該如何調(diào)節(jié)和實施呢?本文作者分享了關(guān)于設(shè)計師對于此現(xiàn)象的分析,我們一起來了解一下。

不知道大家做設(shè)計的時候是不是經(jīng)常會遇到一種情況就是,當我們想從簡設(shè)計優(yōu)化信息層級的時候,產(chǎn)品們恨不得把所有的文案說明都加到設(shè)計稿里,類似一種老媽子怕娃吃不飽穿不暖的操心,就擔心用戶會看不懂,因為看不懂功能而失去他們最重要的點擊率和kpi。

其實這種主觀擔憂有時雖無數(shù)據(jù)支撐,但是作為一個深入了解用戶的設(shè)計師還是可以理解的,因為有些用戶群體確實額那個啥,對智能設(shè)備和新興事物不是很了解,所以有些我們主觀覺得他們能懂的設(shè)計,他們還真就是不那么懂。

但是很顯然如果我們對產(chǎn)品這種“老媽子式擔憂”不加以轉(zhuǎn)化控制的話,整個UI出來就會因為信息過載而顯得非常臃腫。

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

所以我們除了用A、B 測試的方式獲取實際用戶數(shù)據(jù)來衡量是否可以對設(shè)計降噪以外,也可以嘗試“絞盡腦汁”去想一個方案達到兩者平衡。而至于為什么我推薦大家還是努力“絞盡腦汁”,因為實際項目開發(fā)中根本沒有那么多資源來讓你搞A/B。

這里我們來看第一個案例:

這是一個社交類群聊頁面改版前的列表樣式。

先撇開其他的信息分布問題和視覺優(yōu)化,我們單純的關(guān)注下右邊的按鈕。

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

產(chǎn)品使用這個按鈕的初衷是為了讓用戶通過這個按鈕點擊去參與群聊。所以產(chǎn)品角度理解就是這個按鈕越明顯越好,越直白越好。

所以這個按鈕對于產(chǎn)品來說是非常OK的,但是對于有職業(yè)操守的我們來說,可能就不是那么OK了。

1)是因為它的引導性并不一定就最強,因為無法一眼識別(文字比圖形的識別速度永遠是慢的)。舉個有點味道的例子昂:大家回憶下是不是90%的公廁都會貼個超大的性別圖標,而不是只寫3個大字“男廁所”or“女廁所”?

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

2)這種樣式帶來的信息量相對較大,鋪開來看列表全局的時候就容易出現(xiàn)信息過載帶來的信息干擾。

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

那么作為niubility的設(shè)計師,在改版的時候我們的首選肯定是要對信息進行降噪,也就是說視覺表達簡化、符號化。

那么我們就獲得了以下的幾個方案:

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

but轉(zhuǎn)念一想就猜到了,產(chǎn)品接下來要說的話,“能不能把這個圖標改回加入聊天四個字,不然用戶可能看不懂”。所以又有了下面的設(shè)計方案:

右側(cè)短文案可以自定義,輔助理解。

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

這樣一來的話可以通過符號化的視覺提升引導效率,也可以用短輔助信息來輔助用戶理解,同時轉(zhuǎn)線為面,減少視覺模塊的分散與割裂感。

最后來看上加上左側(cè)信息優(yōu)化的整體效果對比圖。

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

然后,我們再看一個案例。

一個社交類產(chǎn)品改版前的首頁列表樣式,先撇開別的,我們重點關(guān)注下“已認證”和“在線”標簽的視覺樣式。

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

這里的標簽存在2個問題:

  • 占用了名字行比較大的空間,如果之后再拓展標簽形式,就放不下任何別的標簽了。
  • 信息過載,要用戶閱讀的文字信息過多,影響識別效率。

所以如果按照最簡化的邏輯,我們完全可以把在線和已認證完全符號化達到一舉兩得的效果,很多app也確實都是這么做的。

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

但回歸到特定的用戶群,普通的信息簡化表達無法滿足的情況下我們還可以通過哪些方式提升這些標簽的說明和存在感呢?

  • 可以通過簡化文案、甚至更換文案都提升表意同時減少占用空間;
  • 變換布局與位置來重組信息結(jié)構(gòu),提升存在感與理解;
  • 增加新手引導浮層來進行強制說明。

接下來來看下整體列表優(yōu)化后的效果:

當產(chǎn)品說要把聊天氣泡圖標改成“加入聊天”四個字的時候...

而這里“已認證”其實想表達的就是這個用戶是真實的人,認證過照片和本人的匹配度的那種,所以我們可以通過變化文案和位置來更好的進行視覺說明,另外也空出了名字旁的位置留給未來更多的權(quán)益標簽比如會員和貴族等。

在線的綠點可以通過調(diào)整整體大小和位置提升存在感的同時不占用重要的一級信息位置,如果還有表意不明確的顧慮可以采用和“搭訕”按鈕一樣的引導模式進行新手引導。

以上就是今天實戰(zhàn)小case的內(nèi)容,希望對各位能有億點點幫助~

#專欄作家#

柒爺,微信公眾號:Nana的設(shè)計錦囊,人人都是產(chǎn)品經(jīng)理專欄作家。云音樂資深設(shè)計師,關(guān)注交互、UI設(shè)計和社交直播。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 不錯~

    來自廣東 回復(fù)
  2. 不需要那么多理論分析,直接拿AB測試結(jié)果來決定用文字還是圖片

    來自浙江 回復(fù)