設(shè)計(jì)思維,提升B端產(chǎn)品的信息獲取效率
編輯導(dǎo)語(yǔ):在B端產(chǎn)品設(shè)計(jì)過(guò)程中,很多時(shí)候都面臨著輸入數(shù)量多而種類又豐富的信息的情況,因此會(huì)出現(xiàn)信息填寫邏輯混亂、資料收集不全等問(wèn)題,從而影響用戶的瀏覽和操作的體驗(yàn)感。因此,如何將信息高效的傳達(dá)給用戶,提升用戶獲取信息的效率成為了設(shè)計(jì)過(guò)程中很重要的一件事。
在《Web表單設(shè)計(jì):點(diǎn)石成金的藝術(shù)》這本書中,提到過(guò)兩個(gè)概念「Inside Out 由內(nèi)而外」和「Outside In 由外而內(nèi)」,簡(jiǎn)單說(shuō)就是兩個(gè)看待事物的視角?!窱nside Out」是從系統(tǒng)角度出發(fā),向用戶要求提供系統(tǒng)需要的信息;「Outside In」則是從用戶角度出發(fā),向系統(tǒng)要求高效獲取信息和操作交互。
尤其是在B端產(chǎn)品設(shè)計(jì)中,「Outside In」用戶視角適用范圍更廣。如何讓信息本身直觀、高效、優(yōu)雅地傳達(dá)給用戶,提升用戶獲取信息的效率就變得格外重要。
一、為什么要提升信息獲取效率?
在我們?cè)O(shè)計(jì)B端產(chǎn)品的過(guò)程中,尤其是涉及到企業(yè)信息的收集和維護(hù)時(shí),由于需要輸入的信息種類和數(shù)量眾多,總會(huì)遇到企業(yè)信息填寫邏輯混亂、資料收集不全的情況,導(dǎo)致用戶在瀏覽和編輯時(shí)的操作體驗(yàn)大打折扣。
反映在日常界面設(shè)計(jì)中往往突出展現(xiàn)在以下幾點(diǎn):
- 用戶瀏覽信息的順序混亂,造成信息流的邏輯性不強(qiáng)。
- 不同元素間的對(duì)齊方式有差異,使整體頁(yè)面信息流缺失穩(wěn)定感。
- 大量信息集中于一塊區(qū)域,信息之間的層次模糊,邊界感缺失。
- 所有信息都要展示,缺失重點(diǎn),使得信息展現(xiàn)無(wú)法聚焦。
二、如何提升信息獲取效率?
B端產(chǎn)品一般具有行業(yè)領(lǐng)域垂直、層級(jí)結(jié)構(gòu)復(fù)雜、信息顆粒度細(xì)等特點(diǎn)。在最近的企業(yè)中心頁(yè)面改版中,我們也面臨了以上四個(gè)問(wèn)題所帶來(lái)的挑戰(zhàn),舊版本在排版、布局、間距等方面無(wú)法做到信息有效展現(xiàn),用戶的編輯效率、閱讀效率都待提升。
因此在對(duì)目標(biāo)進(jìn)行功能梳理和信息分析后,我們采用平鋪直敘、始終對(duì)齊、層次明確、化繁為簡(jiǎn)等四個(gè)原則,對(duì)相關(guān)頁(yè)面進(jìn)行重構(gòu)。目的是讓用戶快速、清晰地理解產(chǎn)品傳遞的信息,輔助用戶快速?zèng)Q策。
1. 平鋪直敘
用戶在進(jìn)行瀏覽、輸入等行為時(shí),應(yīng)該當(dāng)盡量減少阻斷,信息盡量平鋪展示,如果沒有特殊需求,不要做大量隱藏、折疊等操作。
企業(yè)中心界面的信息具有一定的順序性和結(jié)構(gòu)性,因此根據(jù)企業(yè)的名稱、領(lǐng)域、logo、介紹等順序,對(duì)板塊進(jìn)行了垂直化信息梳理,用戶視線移動(dòng)路徑從原本的Z字形簡(jiǎn)化為1字形,從而實(shí)現(xiàn)效率提升。
同時(shí)也對(duì)信息回顯進(jìn)行了結(jié)構(gòu)性平鋪,用戶輸入的信息會(huì)實(shí)時(shí)在右側(cè)手機(jī)Demo顯示出來(lái),和線上實(shí)際效果保持一致,提高信息觸達(dá)成功率。
界面示例圖
2. 始終對(duì)齊
在界面設(shè)計(jì)中,始終將元素進(jìn)行對(duì)齊,既符合用戶的認(rèn)知特性,也能引導(dǎo)視覺流向,讓用戶更流暢地接收信息。尤其是在面對(duì)大量信息匯總在一個(gè)頁(yè)面區(qū)域的情況下,對(duì)齊是一種最基本也是最經(jīng)濟(jì)適用的設(shè)計(jì)手段。
在項(xiàng)目中,我們?yōu)椴煌愋偷脑匦畔⒃O(shè)定了統(tǒng)一的左右對(duì)齊方式及邊距,讓不同板塊的信息能夠更加標(biāo)準(zhǔn)、規(guī)律地顯示,從而提高用戶填寫效率。
界面示例圖
3. 層次分明
任何時(shí)候都需要對(duì)信息進(jìn)行層級(jí)劃分,尤其是在處理大量數(shù)據(jù)的場(chǎng)景中,靠的越近的元素更容易被看成一個(gè)整體,這就是我們經(jīng)常所說(shuō)的設(shè)計(jì)鄰近性原則。
鄰近性是格式塔原則中的一個(gè)部分,是簡(jiǎn)潔法則的一種具體的表現(xiàn)場(chǎng)景。在《寫給大家看的設(shè)計(jì)書》中,作者Robin Williams 將鄰近性原則稱為「親密性」,雖然稱呼不一樣,但表達(dá)的是同一個(gè)意思。
親密性原則是這樣定義的:如果信息之間關(guān)聯(lián)性越高,它們之間的距離就應(yīng)該越接近,也越像一個(gè)視覺單元。要求對(duì)信息進(jìn)行分層、分組展示,降低單個(gè)頁(yè)面內(nèi)信息復(fù)雜度。
因此我們將各個(gè)模塊之間通過(guò)字體大小、顏色、間距、圖標(biāo)等設(shè)計(jì)手段使得信息層級(jí)能夠拉開。同時(shí)以8px為基礎(chǔ)間距,通過(guò)加減“基礎(chǔ)間距”的倍數(shù),拉開層次關(guān)系,讓用戶可以從復(fù)雜的數(shù)據(jù)展現(xiàn)中快速區(qū)分每個(gè)板塊的信息,進(jìn)而提高操作效率。
界面示例圖
4. 化繁為簡(jiǎn)
減少?gòu)?fù)雜層級(jí),盡量使用相似結(jié)構(gòu)和模塊,降低結(jié)構(gòu)差異對(duì)用戶的干擾,讓用戶更聚焦于信息本身。用更簡(jiǎn)潔的文字表述則為:如無(wú)必要,勿增實(shí)體。
這就是奧卡姆剃刀原理,其本身是一種哲學(xué)思想,由十三到十四世紀(jì)英國(guó)學(xué)者、邏輯學(xué)家 William of Ockham 提出,如他在《箴言書注》中所寫:「切勿浪費(fèi)較多的東西去做用較少的東西同樣可以做好的事情」。
奧卡姆剃刀原理對(duì)現(xiàn)今的很多領(lǐng)域都具有廣泛且深遠(yuǎn)的影響,正因?yàn)樗且环N普適的哲學(xué)世界觀和方法論,所以在設(shè)計(jì)領(lǐng)域也被大家經(jīng)常拿來(lái)使用,能夠有效地指導(dǎo)我們進(jìn)行設(shè)計(jì)工作和決策。
在化繁為簡(jiǎn)思想的指導(dǎo)下,我們將原先較為混亂的板塊布局重新進(jìn)行了功能梳理,減少了不同板塊之間的比例、位置、順序差異,讓信息的展現(xiàn)更加有條理。
界面示例圖
三、總結(jié):提升信息獲取效率的意義
通過(guò)「Outside In」用戶視角,我們?yōu)閺?fù)雜的企業(yè)中心頁(yè)面信息進(jìn)行了深度梳理,讓信息展示從結(jié)構(gòu)上、樣式上、邏輯上變得更加科學(xué)、合理。
1. 對(duì)于用戶
最直接地就是提升在對(duì)應(yīng)頁(yè)面場(chǎng)景下的信息獲取效率,可以快速的找到需要填寫和修改信息的操作途徑,節(jié)約操作成本,更有利于簡(jiǎn)單便捷地管理賬戶。
2. 對(duì)于產(chǎn)品
有效地提升了對(duì)用戶和企業(yè)信息獲取的效率,優(yōu)化企業(yè)信息結(jié)構(gòu),提升企業(yè)主頁(yè)信息豐富度,提升優(yōu)質(zhì)信息占比。同時(shí)也對(duì)研究用戶操作喜歡和用戶行為心理做了一個(gè)實(shí)踐的奠基。
3. 對(duì)于設(shè)計(jì)
我們能看出通過(guò)有效的設(shè)計(jì)方式,提升B端產(chǎn)品信息獲取效率是非常有必要的,以上設(shè)計(jì)原則和驗(yàn)證方式同樣也可以適用于類似的項(xiàng)目,在遵循簡(jiǎn)單設(shè)計(jì)原則的基礎(chǔ)上,我們?cè)O(shè)計(jì)師還有無(wú)限探索不同方式的空間。
作者:郭夢(mèng)雲(yún),UI設(shè)計(jì)師
本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心(微信公眾號(hào)@58UXD),作者@郭夢(mèng)雲(yún)
題圖來(lái)自Unsplash,基于CC0協(xié)議
- 目前還沒評(píng)論,等你發(fā)揮!