B端體驗細節(jié)(二)通用性圖標統(tǒng)一的秘訣

1 評論 3327 瀏覽 9 收藏 10 分鐘

編輯導(dǎo)語:通用性圖標的統(tǒng)一對于B端體驗來說是很重要的,本本作者為我們分享了“上傳、下載、導(dǎo)入、導(dǎo)出”這四種圖標按鈕如何統(tǒng)一,希望對你有幫助。

在企業(yè)級設(shè)計規(guī)范建設(shè)中,我們會遇到相同功能的操作,不同設(shè)計師用了不同的圖標按鈕去設(shè)計,如下所示。這會導(dǎo)致用戶在操作時產(chǎn)生疑問,同時會降低用戶對產(chǎn)品的信任程度。

B端體驗細節(jié)(二)-通用性圖標統(tǒng)一的秘訣

如果我們只是告訴產(chǎn)品負責(zé)人,我們要統(tǒng)一這些圖標按鈕,這個操作圖標按鈕長這樣,那個操作圖標按鈕長那樣,產(chǎn)品負責(zé)人是很難接受的。

一方面,每個人對于同一個圖標的理解是不同的;另一方面,如果冒然替換圖標,可能會導(dǎo)致用戶學(xué)習(xí)成本上升,引起用戶反感。那我們是如何讓這項工作順利推行下去的呢?我們進行了圖標按鈕的認知測試。

本次我們選出了界面上最常用且分歧最大的四種圖標按鈕進行統(tǒng)一,分別是“上傳、下載、導(dǎo)入、導(dǎo)出”。實施的步驟為:

  1. 設(shè)計調(diào)研題目
  2. 招募參與人員
  3. 進行測試
  4. 處理數(shù)據(jù)與設(shè)計方案
  5. 推動落地

一、設(shè)計調(diào)研題目

在我們的企業(yè)級圖標庫中,有6種認知較為相近的圖標按鈕已經(jīng)提供給設(shè)計師使用很長一段時間了,也即在產(chǎn)品上已經(jīng)廣泛使用起來。由于當(dāng)時沒有約定哪種圖標在什么場景下使用,導(dǎo)致現(xiàn)在這6種圖標野蠻生長,因此現(xiàn)在要去規(guī)范它們,不可以改動太大,避免大幅動到客戶習(xí)慣。

我們先收集了產(chǎn)品使用的情況,如下圖。從圖中可知,產(chǎn)品認為1號圖標是導(dǎo)出含義的最多,認為2號圖標是導(dǎo)入的最多;產(chǎn)品認為3號圖標是下載的最多,認為4號圖標是上傳的最多。5號圖標和6號圖標產(chǎn)品選用的概率非常低。

B端體驗細節(jié)(二)-通用性圖標統(tǒng)一的秘訣

但產(chǎn)品使用只帶代表產(chǎn)品設(shè)計師在圖標的選取上,傾向以上圖中的方案結(jié)果,并不代表用戶對圖標的原始認知。由此筆者提出通過調(diào)研來整體看下用戶在這些圖標上會怎么選擇,他們傾向于哪種結(jié)果。我們設(shè)計了“現(xiàn)場答題”和“線上問卷”的方式,來收集用戶的認知反饋。

“現(xiàn)場答題”我們采取了用戶在圖紙上直接連線的方式,雖然方式很古老,但這種方式可以很直觀的感受到用戶的操作過程?!熬€上問卷”采用的是騰訊問卷的方式進行。由于目標很明確,因此調(diào)研題目設(shè)計上非常直白,用戶直接進入就答題,沒有過多其他基本信息填寫的干擾。

B端體驗細節(jié)(二)-通用性圖標統(tǒng)一的秘訣

二、招募參與人員

確定了調(diào)研題目和調(diào)研方式后,我們就開始招募用戶了,這次招募的用戶主要分為測試工程師、開發(fā)工程師、設(shè)計師、產(chǎn)品使用者,共計51人。

這里和大家插播一個招募用戶的心得。對于做B端用戶調(diào)研來說,招募用戶是較為困難的,一是相關(guān)用戶不好找,二是找到了也不方便約他們的時間。原本筆者這次調(diào)研也遇到了這個情況,第一是真正的用戶遠在全國各地,第二是如何找到他們。

于是筆者聯(lián)系了在現(xiàn)場開發(fā)的若干工程師,邀請他們協(xié)助我和現(xiàn)場用戶溝通,并說明我們調(diào)研的原由,于是很多用戶都很樂意參與到調(diào)研中來。同時筆者在公司內(nèi)部找了一些相對較為合適的參與者,一一溝通,邀請他們參與此次調(diào)研。

現(xiàn)在互聯(lián)網(wǎng)調(diào)研工具越來越多,以往只能通過現(xiàn)場訪談記錄、電話訪談的調(diào)研方式已不再是唯一的調(diào)研方式了,更多調(diào)研的方式有待大家去挖掘,只要能達成結(jié)果的調(diào)研方式,就是可以使用的調(diào)研方式。

三、進行測試

在用戶現(xiàn)場答題中,我站在一旁觀察發(fā)現(xiàn),用戶完成連線大約都在30秒左右,同時用戶沒有出現(xiàn)兩個圖標連到同一個文字的情況。

這說明用戶在認知圖標與文字的匹配中,還是需要時間思考的,進而佐證了一個設(shè)計原則,即在B端界面的按鈕中,我們需要為較為難以理解的圖標添加hint提示,從而清晰地說明該按鈕的操作指向?!坝脩魶]有出現(xiàn)兩個圖標連到同一個文字的情況”說明了每個圖標在用戶心目中都是唯一解,只是這個唯一解由于不同的人經(jīng)驗差異等情況,認知是不同的。

使用線上問卷參與的用戶,由于筆者沒有辦法親眼看到他們的答題過程,因此只能通過收集回來的數(shù)據(jù)進行分析。

四、處理數(shù)據(jù)與設(shè)計方案

筆者將“現(xiàn)場答題”和“線上問卷”的結(jié)果進行了匯總,結(jié)果如下。

B端體驗細節(jié)(二)-通用性圖標統(tǒng)一的秘訣

從匯總表中我們可以發(fā)現(xiàn),“圖標1和圖標2”、“圖標5和圖標6”被認為是導(dǎo)入和導(dǎo)出的情況差別較小,“圖標3和圖標4”被認為是下載和上傳的人數(shù)最多。由此,下載和上傳對應(yīng)的圖標已經(jīng)可以確定,但導(dǎo)入和導(dǎo)出的圖標還沒有辦法完全確定。

于是筆者隨意選取了幾位用戶進行了一對一訪談,選圖標1和圖標2為導(dǎo)入導(dǎo)出的用戶,問他們?yōu)槭裁床贿x擇圖標5和圖標6為導(dǎo)入導(dǎo)出;選圖標5和圖標6為導(dǎo)入導(dǎo)出的用戶,問他們?yōu)槭裁床贿x擇圖標1和圖標2為導(dǎo)入導(dǎo)出。

選圖標1和圖標2為導(dǎo)入導(dǎo)出的用戶是這么回答的:圖標5和圖標6放在一起時候,一下子很難看出哪個是導(dǎo)入,哪個是導(dǎo)出,要仔細看才能發(fā)現(xiàn),建議可以把圖標5和圖標6在設(shè)計上做一下區(qū)分。

而選擇選圖標5和圖標6為導(dǎo)入導(dǎo)出的用戶是這么回答的:圖標1和圖標2也像導(dǎo)入導(dǎo)出,但是看到彎彎的圖標就選了彎彎的圖標。

于是,最終我們選了圖標1和圖標2為導(dǎo)入導(dǎo)出,圖標3和圖標4為下載上傳,同時為了避免有小部分用戶會對圖標按鈕產(chǎn)生歧義,我們加了hint提示上去,來規(guī)避識圖發(fā)生歧義的問題,如下圖。

B端體驗細節(jié)(二)-通用性圖標統(tǒng)一的秘訣

其實,每個人看到同一個圖標,認知不一致是常見的事情,那是因為每個人的成長環(huán)境、工作環(huán)境、學(xué)習(xí)環(huán)境等皆不同,這就導(dǎo)致每個人的心智模型是不同的,所以為了規(guī)避這些差異,我們需要采用其他方式去填補。

五、推動落地

設(shè)計方案出來后,我們拿到產(chǎn)品部進行對接,通過調(diào)研方式獲得的結(jié)果,及采取了hint提示方式,產(chǎn)品部順利接受了我們推薦的方案,并逐步在落地中。

我們可以發(fā)現(xiàn),設(shè)計方案不是好不好看,或選擇哪個的問題,而是我們是否有理有據(jù)地闡述了我們?nèi)绾未_定的該方案,該方案的優(yōu)勢在哪里,為什么選擇這個方案,而不是其他方案。

六、總結(jié)

在設(shè)計B端產(chǎn)品中,調(diào)研永遠是一個可以被使用的方式,同時不論多大的設(shè)計方案,都可以采取調(diào)研的方法。

通過調(diào)研,不僅可以讓自己的設(shè)計更加有信服力,也會讓自己在調(diào)研中,逐步去掉”我認為我覺得、我的經(jīng)驗是這樣子的”這些平時常用的術(shù)語 ,而改為“通過調(diào)研和分析,blabla…”。

 

作者:知果;公眾號:知果日記

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

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

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

    來自浙江 回復(fù)