后驗(yàn)設(shè)計(jì):用人工智能(AI)打開(kāi)UI設(shè)計(jì)新姿勢(shì)
編輯導(dǎo)語(yǔ):業(yè)務(wù)團(tuán)隊(duì)在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí),是否可以借助一定外力,實(shí)現(xiàn)設(shè)計(jì)價(jià)值的最大化?比如AI人工智能,也許就是可以助力用戶交互體驗(yàn)提升的一大利器。那么,AI人工智能可以從哪些細(xì)節(jié)入手、改善設(shè)計(jì)流程呢?不如看看作者的總結(jié)。
寫(xiě)在前面
回想一下,你在進(jìn)行 UI 設(shè)計(jì)工作中,是否會(huì)遇到下面場(chǎng)景:
- 你怎么知道用戶會(huì)喜歡這個(gè)界面設(shè)計(jì)?
- 這個(gè)界面能不能抓住用戶的注意力(眼球)?
- 有數(shù)據(jù)支撐你的設(shè)計(jì)嗎?
- 這個(gè)界面可以怎么改進(jìn)?
- 你到底行不行呀?
- 這個(gè)界面還不如原來(lái)的!
Okay,面對(duì)這些質(zhì)疑和挑戰(zhàn),你內(nèi)心的 OS 應(yīng)該也是那句:你行你上呀!
一、大數(shù)據(jù)時(shí)代的設(shè)計(jì)方式
其實(shí),在大數(shù)據(jù)時(shí)代,設(shè)計(jì)工作者也可以嘗試使用數(shù)據(jù)來(lái)為自己的設(shè)計(jì)“正名”。設(shè)計(jì)如果沒(méi)有和大數(shù)據(jù)連結(jié),就等于說(shuō)設(shè)計(jì)師憑個(gè)人經(jīng)驗(yàn)猜測(cè)。設(shè)計(jì)如果和大數(shù)據(jù)連結(jié),它其實(shí)可以看到很多的趨勢(shì)。
美國(guó)牛津大學(xué)大數(shù)據(jù)知名權(quán)威-邁爾遜伯格教授在演講中談及。過(guò)去是通過(guò)「假設(shè)→實(shí)驗(yàn)→驗(yàn)證」,看結(jié)果與假設(shè)是不是相呼應(yīng)。
- 如果是,那就對(duì)。
- 如果不是,就要重做。
過(guò)去的設(shè)計(jì)是這樣的流程?,F(xiàn)在自從有了大數(shù)據(jù)之后,你的流程不是這樣的,你會(huì)先看到一個(gè)模式(pattern)再返回去做設(shè)計(jì),意思是「你會(huì)先看到結(jié)果」。
你可以想象一下,你是電視劇「開(kāi)端」的男女主角。
你知道公交車即將遭遇爆炸,你可以回到過(guò)去找到車上的兇手,讓這個(gè)爆炸不要發(fā)生。
大數(shù)據(jù)可以讓你從結(jié)果回退思考設(shè)計(jì)應(yīng)該怎么做。
現(xiàn)在大家的行為都可以被你預(yù)先看見(jiàn),被你看見(jiàn)之后就可以先知道結(jié)果,你就可以通過(guò)改變一些因素讓事件得以發(fā)生或者避免。
從技術(shù)上來(lái)理解,就是通過(guò)大數(shù)據(jù)進(jìn)行深度學(xué)習(xí),把機(jī)器模型訓(xùn)練出具備人的瀏覽習(xí)慣。
當(dāng)你把“設(shè)計(jì)作品”給他看的時(shí)候,他可以后驗(yàn)性告訴你結(jié)果。即人們是怎么瀏覽這個(gè)“設(shè)計(jì)作品”的,你再根據(jù)這個(gè)結(jié)果來(lái)進(jìn)行設(shè)計(jì)工作。
二、Grammarly,一款在線語(yǔ)法糾正和校對(duì)工具
在寫(xiě)作領(lǐng)域,專業(yè)的學(xué)術(shù)寫(xiě)作可以讓你獲得高分,妥帖的商業(yè)郵件能夠促進(jìn)交易達(dá)成,風(fēng)格統(tǒng)一的品牌文案有助于樹(shù)立企業(yè)形象。
我們?nèi)粘J褂玫?Grammarly 已經(jīng)把后驗(yàn)性理念,通過(guò)「人工智能應(yīng)用于文字場(chǎng)景」融合在產(chǎn)品當(dāng)中。
當(dāng)你開(kāi)始進(jìn)行寫(xiě)作時(shí),Grammarly 會(huì)及時(shí)糾正你的單詞和語(yǔ)法錯(cuò)誤,根據(jù)你設(shè)定的目標(biāo)進(jìn)行評(píng)分,并根據(jù)你的寫(xiě)作內(nèi)容分析你的語(yǔ)氣、同義詞替換、以及根據(jù)受眾類型給出風(fēng)格建議,等等。
在寫(xiě)作內(nèi)容發(fā)送之前,就能發(fā)現(xiàn)內(nèi)容上的錯(cuò)誤以及不足,用技術(shù)幫助人們優(yōu)化寫(xiě)作內(nèi)容,提高寫(xiě)作生產(chǎn)力。
我們知道圖像相較于文本數(shù)據(jù)的處理,會(huì)更加復(fù)雜。文本分析可以依賴語(yǔ)法規(guī)則,那在設(shè)計(jì)創(chuàng)意領(lǐng)域,人工智能(AI)可以做些什么,幫助設(shè)計(jì)師完成如 Grammarly 這樣的工作。
三、VisualEyes,預(yù)測(cè)性的設(shè)計(jì)評(píng)估工具
最近,我發(fā)現(xiàn)了一款國(guó)外預(yù)測(cè)性的設(shè)計(jì)評(píng)估工具——VisualEyes。
它主要是通過(guò) AI 模型模擬人瀏覽的方式分析設(shè)計(jì)界面上的元素,預(yù)測(cè)用戶會(huì)關(guān)注界面哪部分元素,以及關(guān)鍵引導(dǎo)信息的清晰度,為改進(jìn)界面的視覺(jué)傳達(dá)提供參考。
1. 眼動(dòng)追蹤研究和 5 秒測(cè)試 VS 注意力圖
你試著觀察下面的餅干盒。
你會(huì)發(fā)現(xiàn)你在注視餅干盒的軌跡圖,大致會(huì)如左圖依序從 1-10 標(biāo)示的動(dòng)線。觀察的順序通常是 LOGO,產(chǎn)品名稱和圖案,你會(huì)猜測(cè)這些元素的相關(guān)性很強(qiáng)(能抓住用戶的眼球),然后通過(guò)對(duì)被試者進(jìn)行無(wú)輔助回憶度測(cè)試,驗(yàn)證這些關(guān)鍵元素。
設(shè)計(jì)界面眼動(dòng)追蹤測(cè)試,一般會(huì)涉及“實(shí)驗(yàn)設(shè)計(jì)、安裝設(shè)置、數(shù)據(jù)采集、數(shù)據(jù)處理、數(shù)據(jù)解讀” 5 個(gè)步驟,耗時(shí)長(zhǎng)且效率較低,設(shè)計(jì)研究結(jié)論因樣本數(shù)限制,有所局限。
VisualEyes 在注意力地圖上利用人工智能(AI)可以即時(shí)產(chǎn)生用戶測(cè)試數(shù)據(jù),直觀、有效、可視化地展示出關(guān)于用戶視覺(jué)行為特點(diǎn)的分布情況。
熱點(diǎn)圖是基于注視點(diǎn)的絕對(duì)注視時(shí)間長(zhǎng)度來(lái)創(chuàng)建的,最大值設(shè)置為 2.2 秒,也就是深紅色的區(qū)域,代表吸引了最多的注意力,而綠色/藍(lán)色區(qū)域代表吸引了較少的注意力。
注意力圖(Attention Map)是眼動(dòng)追蹤研究和 5 秒測(cè)試的完美替代品。
設(shè)計(jì)師可以基于設(shè)計(jì)方案熱點(diǎn)圖,如果熱點(diǎn)區(qū)域有所減少且分布面積增加,說(shuō)明用戶認(rèn)知負(fù)荷的減少、可被理解程度的提升和信息穿透力的增加。
2. 快速偏好測(cè)試 VS 清晰度得分
另外,你的界面設(shè)計(jì)與競(jìng)爭(zhēng)對(duì)手相比,誰(shuí)的設(shè)計(jì)更好呢?這也是設(shè)計(jì)師常常被挑剔的話題。
清晰度得分可以體現(xiàn)網(wǎng)站的清晰度和美觀程度。大量的 UX 研究表明,與同行業(yè)競(jìng)爭(zhēng)對(duì)手產(chǎn)品界面相比,當(dāng)用戶在瀏覽“視覺(jué)上吸引人”的界面時(shí),清晰度得分更高,他們更能容忍小的可用性問(wèn)題。
清晰度得分(Clarity Score)是快速偏好測(cè)試的完美替代品。
這個(gè)工具評(píng)分根據(jù)全球數(shù)千名測(cè)試人員的大規(guī)模研究數(shù)據(jù)預(yù)測(cè)模型生成。不管是概念階段的原型稿、視覺(jué)稿,亦或已上線的產(chǎn)品,都可以通過(guò)測(cè)試數(shù)據(jù)獲取用戶對(duì)視覺(jué)的品牌認(rèn)知及主觀感受。
Ryanair 是一家成立于 1984 年的愛(ài)爾蘭廉價(jià)航空公司,以它為例,我們來(lái)看看如何進(jìn)行同行業(yè)競(jìng)爭(zhēng)對(duì)手清晰度得分比較。
首先,將 Ryanair 網(wǎng)站界面上傳進(jìn)行清晰度評(píng)分。
接著,通過(guò)采集“美國(guó)航空公司、阿聯(lián)酋航空公司、漢莎航空公司、達(dá)美航空公司、伊比利亞航空公司和卡塔爾航空公司”的網(wǎng)站界面,分別進(jìn)行評(píng)分。
然后,把其他航空公司與 Ryanair 進(jìn)行清晰度得分比較。
從結(jié)果可以發(fā)現(xiàn)得分分布在 65-82 分,Ryanair 在同行業(yè)者是最低的,而在對(duì)比的航空公司基準(zhǔn)值大概是 75 分,Ryanair 距離基準(zhǔn)值還有不小的距離。
通過(guò)清晰度分析地圖作為診斷工具,你可以依此作為判斷參考,找出界面中雜亂無(wú)章的區(qū)域,刪除/優(yōu)化界面上冗余信息。
3. AB Test VS 興趣范圍
興趣范圍 (AOI, Areas of Interest) ,主要用于衡量用戶在設(shè)計(jì)的關(guān)鍵區(qū)域中的注意力。
AB Test 需要足夠的訪客(樣本量)來(lái)提高轉(zhuǎn)化率。如果你采用常規(guī)的 AB Test 的流程,一般需要跑 2 周才能獲得足夠的數(shù)據(jù)。使用 AI 工具,則可以縮短到 2 分鐘。
以 Spotify 的界面測(cè)試為例,在清晰度得分一致的情況下,設(shè)計(jì)團(tuán)隊(duì)希望在「綠色」和「紫色」的按鈕中進(jìn)行抉擇,究竟哪個(gè)顏色的按鈕能帶來(lái)更好的轉(zhuǎn)化率?
針對(duì)注冊(cè)按鈕(CTA)對(duì)于用戶注意力的影響,方案 B 高于平均注意力投入 2.47 倍,方案 A 則高于 3.85 倍,由此可判定方案 A 優(yōu)于方案 B。這個(gè)范圍的定義可以量化注意力并簡(jiǎn)化對(duì)于設(shè)計(jì)方案的決策過(guò)程。
四、小結(jié)
人工智能(AI)是為了更大程度地彌補(bǔ)人類不足之處,并不是以取代某項(xiàng)工作職能為目的。
目前,大多數(shù)設(shè)計(jì)師并沒(méi)有使用人工智能(AI)改善設(shè)計(jì)流程的經(jīng)驗(yàn)。真的,你可以嘗試去了解、使用它,結(jié)合人工智能(AI)更大程度地發(fā)揮設(shè)計(jì)價(jià)值。
最后,希望本文能給你一些啟發(fā)。
#專欄作家#
龍國(guó)富,公眾號(hào):龍國(guó)富,人人都是產(chǎn)品經(jīng)理專欄作家,人因工程碩士。致力于終身學(xué)習(xí)和自我提升,分享用戶研究、客戶體驗(yàn)、服務(wù)科學(xué)等領(lǐng)域資訊,觀點(diǎn)和個(gè)人見(jiàn)解。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)授權(quán),禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議。
棒
麻煩發(fā)下網(wǎng)址唄
https://www.visualeyes.design/