2023-8-10 ui設(shè)計(jì)分享達(dá)人
前言自上個(gè)世紀(jì)70年代圖形化的人機(jī)界面出現(xiàn),人與機(jī)器的對(duì)話(huà)從特殊命令行交互變?yōu)橹庇^的圖形界面,到后來(lái)語(yǔ)音、視頻、動(dòng)作等多模態(tài)的發(fā)展讓人和機(jī)器的發(fā)展有了更多自然、直觀的交互場(chǎng)景。
圖形化的人機(jī)界面在當(dāng)前仍是非常主流的交互形態(tài),如何將界面信息直觀、高效的表達(dá)給用戶(hù),是我們經(jīng)常遇到的問(wèn)題,尤其是系統(tǒng)復(fù)雜、業(yè)務(wù)垂直的產(chǎn)品。
群核科技下產(chǎn)品正是這樣的特點(diǎn),以酷家樂(lè)云設(shè)計(jì)工具為例,系統(tǒng)交互結(jié)合各行業(yè)垂類(lèi)場(chǎng)景,各種命令、操作、引導(dǎo)、畫(huà)面控制等信息的表達(dá)很容易讓用戶(hù)疑惑。
舉個(gè)栗子:
“看不懂、沒(méi)明白、我還以為是...”等基礎(chǔ)信息表達(dá)的問(wèn)題掣肘了交互的基礎(chǔ)體驗(yàn)。
因此,如何提升用戶(hù)整體的「信息識(shí)別」能力,成為了我們的項(xiàng)目課題。
什么是信息識(shí)別
信息識(shí)別,可簡(jiǎn)單理解為:感知到(看到/聽(tīng)到)信息,并能夠理解它。本質(zhì)是在用戶(hù)與界面交互中,會(huì)經(jīng)歷「感知信息→認(rèn)知信息→做出決策與行動(dòng)」的歷程,從感知到認(rèn)知,是信息獲取和辨識(shí)理解的過(guò)程,即「信息識(shí)別」。
所以課題主要探索的是:如何體系化的設(shè)計(jì)「感知上簡(jiǎn)單、認(rèn)知上準(zhǔn)確」的信息,讓用戶(hù)與界面的互動(dòng)更高效、流暢。
已有設(shè)計(jì)體系不能解決這些問(wèn)題嗎?
群核UED搭建設(shè)計(jì)規(guī)范體系已有多年,即便有相對(duì)豐富和完整的設(shè)計(jì)體系,我們呈現(xiàn)給用戶(hù)交互界面仍有體驗(yàn)不一致、操作難理解、同一對(duì)象不同表達(dá)的問(wèn)題,為什么?
以組件為例,目前設(shè)計(jì)規(guī)范制定過(guò)程中,產(chǎn)出很重要一條的邏輯是“可復(fù)用單元”,如基礎(chǔ)組件、業(yè)務(wù)組件、模板等,通過(guò)將重復(fù)元素在代碼層統(tǒng)一,從而實(shí)現(xiàn)在用戶(hù)側(cè)一致的操作體驗(yàn)。
隨著產(chǎn)品功能的上線(xiàn),文案、圖標(biāo)、圖像等大量小顆粒度元素,成為了用戶(hù)最先感知、頻率最高、也是非常制約進(jìn)一步交互影響因子。
這些因子又存在多樣化、場(chǎng)景散、分布廣、規(guī)律性弱、參與定義的角色多的特點(diǎn),加之沒(méi)有規(guī)范和有效的管理,導(dǎo)致用戶(hù)側(cè)使用起來(lái)充滿(mǎn)疑惑、操作受阻、甚至客訴。
小結(jié)
因目前規(guī)范體系針對(duì)文字、圖形基礎(chǔ)的信息形式覆蓋不夠,加之此類(lèi)場(chǎng)景高頻、體驗(yàn)問(wèn)題頻發(fā)且會(huì)持續(xù)的現(xiàn)狀,參考行業(yè)大廠對(duì)此類(lèi)信息設(shè)計(jì)的重視程度。
所以,信息識(shí)別項(xiàng)目是針對(duì)產(chǎn)品界面中大量小顆粒的信息載體當(dāng)前不規(guī)范、體驗(yàn)質(zhì)量參差等問(wèn)題,來(lái)體系化解決當(dāng)前圖、文信息單元的體驗(yàn)不規(guī)范、識(shí)別效果差的問(wèn)題。
如何提升信息識(shí)別體驗(yàn)在產(chǎn)品界面中信息交互過(guò)程中,信息最為常見(jiàn)的四種載體:圖形、文字、音頻、視頻(全景圖、gif圖、動(dòng)效圖在大類(lèi)暫時(shí)可算圖形,不作細(xì)分),而圖、文占據(jù)了絕對(duì)的比重,所以需要重點(diǎn)關(guān)注圖、文信息的識(shí)別體驗(yàn)。
根據(jù)美國(guó)哈佛商學(xué)院有關(guān)研究人員的分析資料表明,人的大腦每天通過(guò)五種感官接受外部信息的比例分別為:視覺(jué)83%、聽(tīng)覺(jué)11%、嗅覺(jué)3.5%、觸覺(jué)1.5%、味覺(jué)1%(數(shù)據(jù)暫不涉及短視頻直播領(lǐng)域)在群核體系下的產(chǎn)品,圖和文分別是有哪些?
在界面中以圖形化的形式表達(dá)動(dòng)作、品牌、說(shuō)明等信息,讓用戶(hù)能直觀的感知到信息的含義,圖形的類(lèi)型有:動(dòng)作執(zhí)行類(lèi)操作、品牌示意、輔助說(shuō)明、圖例展示4大類(lèi)型;
在界面中以文字的形式表達(dá)信息,主要文案的類(lèi)型有:動(dòng)作命令、解釋說(shuō)明、專(zhuān)業(yè)名詞、標(biāo)點(diǎn)符號(hào)。
如何提升以上幾個(gè)類(lèi)型的信息識(shí)別體驗(yàn):直觀的圖形提升信息識(shí)別的準(zhǔn)度和效率、規(guī)范的文案提升信息表達(dá)的精準(zhǔn)度。
直觀的圖形提升信息識(shí)別的準(zhǔn)度和效率
以下幾個(gè)案例是項(xiàng)小組試點(diǎn)探索驗(yàn)證信息表達(dá)優(yōu)化如何對(duì)業(yè)務(wù)有效的驗(yàn)證,可以直觀理解圖形的準(zhǔn)度和效率對(duì)業(yè)務(wù)指標(biāo)有哪些影響。
案例1:工具入口的圖形化表達(dá)用戶(hù)從工作臺(tái)進(jìn)入到設(shè)計(jì)工具,純文本的表達(dá)用戶(hù)很容易產(chǎn)生疑惑,在不改變業(yè)務(wù)邏輯的情況下,進(jìn)行圖形化表達(dá)。
用戶(hù)進(jìn)入到下一步的成功率相比原版提升了10.2%,因此可以說(shuō)明圖形化信息表達(dá)更有助于用戶(hù)識(shí)別并進(jìn)行下一步?jīng)Q策。案例2:模型專(zhuān)題
群核下的設(shè)計(jì)工具,以專(zhuān)題化的形式聚類(lèi)商家、平臺(tái)推薦的模型是基本的運(yùn)營(yíng)動(dòng)作,如下圖,原本以真實(shí)效果圖的方式展示模型專(zhuān)題,用戶(hù)難以感知是方案還是模型。通過(guò)封面圖形的優(yōu)化:將核心的模型類(lèi)型展示出來(lái),用戶(hù)能夠預(yù)見(jiàn)里面的內(nèi)容。
僅改版封面后,UV環(huán)比提升120.4%,此案例可以說(shuō)明更精準(zhǔn)的信息識(shí)別體驗(yàn)?zāi)軌蛑I(yè)務(wù)指標(biāo)的增長(zhǎng)。
案例3:對(duì)象菜單鼠標(biāo)偏好設(shè)置在設(shè)計(jì)工具中,選擇對(duì)象喚出菜單,在酷家樂(lè)工具中可以設(shè)置為鼠標(biāo)左鍵點(diǎn)擊即喚出菜單(僅展示圖標(biāo)),也可以鼠標(biāo)右鍵喚出菜單(圖標(biāo)文字結(jié)合)。
用戶(hù)可以自定義偏好,但上線(xiàn)很長(zhǎng)時(shí)間很多還是不知道如何修改,在對(duì)提示進(jìn)行圖形化調(diào)整后,發(fā)現(xiàn)切換點(diǎn)擊數(shù)據(jù)提升了300%,因此可以說(shuō)明更精準(zhǔn)直觀的信息能直接影響用戶(hù)的行動(dòng)決策。
案例4:產(chǎn)出圖紙的操作
在酷家樂(lè)工具中定制用戶(hù)用戶(hù)完成設(shè)計(jì)后,可以直接自動(dòng)產(chǎn)出圖紙,但由于之前操作入口的信息過(guò)于相似,用戶(hù)難以決策點(diǎn)哪個(gè)是自己需要的,或很容易產(chǎn)生誤操作,經(jīng)過(guò)調(diào)研發(fā)現(xiàn)用戶(hù)很容易混淆圖紙類(lèi)型從而生成對(duì)自己無(wú)用的圖紙。
在新版優(yōu)化中圖形化的表達(dá)了圖紙類(lèi)型的差異,即便增加了流程步驟數(shù),最終用戶(hù)點(diǎn)擊圖紙的UV提升了15%,此案例可以說(shuō)明,更精準(zhǔn)有效的對(duì)象表達(dá)能吸引更多用戶(hù)來(lái)使用此功能,對(duì)業(yè)務(wù)產(chǎn)生直接效果。
案例5:戶(hù)型命令圖例
戶(hù)型繪制和調(diào)整是酷家樂(lè)工具的必經(jīng)之路,由于對(duì)象間用2D圖形圖例表達(dá)比較難辨識(shí)出來(lái)準(zhǔn)確意思,因此設(shè)計(jì)做了圖形信息的優(yōu)化,讓命令更為直觀,更高效的拾取命令操作。
上線(xiàn)后通過(guò)問(wèn)卷調(diào)研用戶(hù)滿(mǎn)意度相比舊版提升了21.66%,因此可以證明,更精準(zhǔn)的圖形輔助用戶(hù)更高效的使用工具操作。以上是項(xiàng)目小組在試驗(yàn)過(guò)程中的部分案例,不再一一列舉所有的試驗(yàn)案例,可以看到信息表達(dá)的精準(zhǔn)度、直觀度是能夠?qū)I(yè)務(wù)產(chǎn)生直接的正向結(jié)果,鑒于群核下的工具產(chǎn)品有大量的應(yīng)用圖標(biāo)圖例,借此我們重新排查和校準(zhǔn)了很多圖標(biāo),確保表達(dá)相對(duì)精準(zhǔn),提高用戶(hù)信息識(shí)別的精準(zhǔn)度與效率。
規(guī)范的文案提升信息表達(dá)的精準(zhǔn)度
在界面交互中,文案作為信息傳遞的載體,占據(jù)的比重是最大的,在群核的產(chǎn)品中,我們規(guī)范了文案的表達(dá)提升信息表達(dá)的精準(zhǔn)度,之前有針對(duì)工具文案做了梳理。
結(jié)合人設(shè)和語(yǔ)氣確定,以及酷家樂(lè)定義“善解人意、理想、直率”的文案原則,在工具操作中我們梳理了以下幾類(lèi)比較容易出現(xiàn)問(wèn)題的場(chǎng)景,試圖通過(guò)文案來(lái)提升信息表達(dá)的精準(zhǔn)度,從而讓用戶(hù)更流暢的進(jìn)行界面交互。
動(dòng)作命令:結(jié)合直率的文案原則,簡(jiǎn)潔高效的描述命令動(dòng)作
解釋說(shuō)明:結(jié)合理性、直率的原則,精煉的去解釋內(nèi)容
專(zhuān)業(yè)名詞:結(jié)合善解人意和直率原則,避免讓用戶(hù)產(chǎn)生多重疑惑,專(zhuān)業(yè)名稱(chēng)平民化、通用化
標(biāo)點(diǎn)符號(hào):規(guī)范的使用標(biāo)點(diǎn),以真誠(chéng)、平和的姿態(tài)與用戶(hù)進(jìn)行溝通
以上僅是幾個(gè)典型案例,在文案?jìng)?cè)我們從工具到平臺(tái)共收集100+常見(jiàn)問(wèn)題和場(chǎng)景,完成格式規(guī)范8大類(lèi)型,52+細(xì)分場(chǎng)景。通過(guò)規(guī)范和調(diào)整文案表達(dá)的精準(zhǔn)度、有效與簡(jiǎn)潔程度,助力業(yè)務(wù)更好的表達(dá)信息,為用戶(hù)提供更流暢的互動(dòng)體驗(yàn)。
總結(jié)
「信息識(shí)別」項(xiàng)目目標(biāo)是為用戶(hù)提供「感知上簡(jiǎn)單、認(rèn)知上準(zhǔn)確」的信息,讓用戶(hù)與界面的互動(dòng)更高效、流暢。
體系化解決當(dāng)前圖、文信息單元的交互體驗(yàn)不規(guī)范、識(shí)別效果差的問(wèn)題,因此這里不僅僅是定義了一些條例規(guī)范,而是從規(guī)范、度量、推廣、應(yīng)用層面全方位的發(fā)力,確保規(guī)范的合理性和可落地性,盡可能普及到核心業(yè)務(wù)線(xiàn)的落地、以及設(shè)計(jì)師最終建立產(chǎn)出優(yōu)質(zhì)信息識(shí)別體驗(yàn)的意識(shí)。
規(guī)范層:收集問(wèn)題高頻場(chǎng)景及問(wèn)題,明確語(yǔ)言特性,歸納通用場(chǎng)景與原則,產(chǎn)出信息識(shí)別的規(guī)范;
度量層:關(guān)鍵業(yè)務(wù)試點(diǎn)通過(guò)以AB對(duì)比線(xiàn)上效果、問(wèn)卷捕捉用戶(hù)偏好、設(shè)計(jì)走查度量設(shè)計(jì)產(chǎn)出合格率;
推廣層:以宣講、白皮書(shū)等形式普及規(guī)范條例,建立一致的設(shè)計(jì)意識(shí);
應(yīng)用層:以工具化、機(jī)制化形式幫助業(yè)務(wù)應(yīng)用與落地。
文案和圖標(biāo)設(shè)計(jì)看似是感性的、是零散的、難以管理的,其實(shí)是可以一直探索科學(xué)方法。從理論到實(shí)踐到規(guī)范化,是一個(gè)系統(tǒng)的工程,之后我們將在更多的業(yè)務(wù)領(lǐng)域中開(kāi)展實(shí)驗(yàn),不斷沉淀,讓再小顆粒度的設(shè)計(jì)元素都有據(jù)可依,通過(guò)標(biāo)準(zhǔn)化的方式賦能更多業(yè)務(wù)解決未來(lái)面臨的共性難題。
作者:酷家樂(lè)UED
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://yvirxh.cn