輯導(dǎo)語:在產(chǎn)品設(shè)計中,不論是產(chǎn)品經(jīng)理,還是交互設(shè)計師,在向用戶傳遞信息時,都需要盡量清晰簡潔地進行傳遞,并致力于提升用戶在使用產(chǎn)品時的使用體驗。那么,如何寫出優(yōu)秀的UX文案,讓用戶可以感知到產(chǎn)品所想傳達的信息?本文作者進行了總結(jié),一起來看。

在框架層除了界面設(shè)計和導(dǎo)航設(shè)計,還有一個非常重要的模塊——信息設(shè)計。經(jīng)常有設(shè)計師問我,信息設(shè)計屬于交互或UI的設(shè)計范疇嗎?我都會回答是的,因為我們每個設(shè)計師都肩負著信息傳達設(shè)計的責(zé)任。

圖1 信息設(shè)計與用戶體驗設(shè)計的關(guān)系

我將信息設(shè)計拆分為信息形式和信息內(nèi)容,產(chǎn)品中所有可感知的元素都是信息內(nèi)容,包括可見的文本、圖片、視頻,不可見的振動、聲音……

圖2 信息設(shè)計的分類

而這些內(nèi)容被用戶感知到的狀態(tài)就是其形式,比如文本的字體、字號、顏色……圖片的大小、清晰度、動靜……聲音的音量、音色、音調(diào)等。

今天我們要聊的UX文案,則隸屬于文本信息設(shè)計,除了標(biāo)簽系統(tǒng)和數(shù)據(jù)內(nèi)容之外,其他所有告知、引導(dǎo)、解釋、說明性的文案都屬于UX文案。

圖3 UX文案與信息設(shè)計的關(guān)系

以瀏覽器為例:

圖4 各類文本信息舉例示意

• 標(biāo)簽系統(tǒng)包括底部導(dǎo)航、各個設(shè)置項名稱、各個站點的名稱等。

• 數(shù)據(jù)內(nèi)容包括框內(nèi)的熱詞、新聞的標(biāo)題、來源、時間、評論等。

• UX文案則包括系統(tǒng)/功能當(dāng)下所處的狀態(tài)、操作前后的說明、狀態(tài)、引導(dǎo)文案等。

在項目流程中,并沒有明確規(guī)定UX文案的具體責(zé)任人(除了少數(shù)大廠有UX writer的角色),所以往往會出現(xiàn)產(chǎn)品、交互、視覺都以為是他人在負責(zé),導(dǎo)致結(jié)果沒人真正為文案負責(zé)的情況,所以我才倡導(dǎo)每一個設(shè)計師都要將其視為己任,以提升整體的產(chǎn)品體驗。

一、WHAT | 什么是UX文案

1. UX文案的起源

UX文案,又稱微文案(microcopy),由Joshua Porter在2009年在“Writing Microcopy”一文中提出。

圖5 UX文案的案例

他在文章中介紹了一個電子商務(wù)網(wǎng)站。用戶在該網(wǎng)站的購買流程中需要填寫付款表單,但5%-10%的交易由于地址填寫錯誤而意外終止,導(dǎo)致了一部分轉(zhuǎn)化的流失。

當(dāng)時Porter提供了一個修改方案是在地址欄下方增加了一行提示語:“請務(wù)必輸入與您信用卡相關(guān)聯(lián)的地址”。這個提示不僅為用戶提供了正確的引導(dǎo)信息,改善了網(wǎng)站的轉(zhuǎn)化率,也為網(wǎng)站帶來了可觀的收入。UX文案由此誕生并取得了行業(yè)的重視。

2. UX文案的類型

Google曾將UX文案總結(jié)為8大類:

圖6 Google歸納的微文案類型

分別是:行動按鈕、簡介、導(dǎo)航按鈕、確認信息、錯誤信息、隱私條款、加載頁面、404錯誤。也就是把標(biāo)簽系統(tǒng)和內(nèi)容數(shù)據(jù)之外的信息都可以看做是UX文案(國內(nèi)大廠的隱私條款是由法務(wù)撰寫的,不屬于UX文案的范疇)。

8種類型不太好記憶,所以我將其歸納為2大類:

圖5 悅姐歸納的微文案類型

1. 名稱類:主要包括按鈕名稱和鏈接名稱;

2. 說明類:包括操作前的規(guī)則、引導(dǎo)、預(yù)期說明,操作時的狀態(tài)、進度、預(yù)期說明、操作后的(成功/失敗)狀態(tài)、結(jié)果、下一步引導(dǎo)說明等。

二、How | 如何撰寫UX文案?

Google曾介紹過撰寫優(yōu)秀UX文案的模型,我也是比較認同的,所以跟大家一起分享一下:

圖6 Google的文案寫作模型

在文案撰寫之前,我們先要想清楚我們到底想通過文案傳達什么信息?讓這些文案符合寫作的3個基本原則,然后再結(jié)合我們的品牌基調(diào),看看以什么口吻和語氣來傳達這些信息與產(chǎn)品氣質(zhì)更一致。

1. UX文案寫作3原則

UX文案不同于營銷文案,不是為了銷售,吸引用戶,追求讓用戶過目難忘。

圖7 UX文案與營銷文案的差異

而是以產(chǎn)品體驗為目標(biāo),以簡短的文字幫助用戶在每個與產(chǎn)品交互的瞬間提供自然的對話,輔助用戶快速準(zhǔn)確地達成目標(biāo)。

基于此,Google設(shè)計師歸納了UX協(xié)作的3個原則,我調(diào)整了其順序?qū)⑵湔砣缦?

圖8 UX文案寫作3原則

① 實用性

結(jié)合奧卡姆剃刀原理:如無必要勿增實體。這個原理普適于所有功能、信息和元素,文案也不例外。任何一句文案,都要先考慮其價值。如果能通過形式明確傳達信息的,就不應(yīng)該增加文案徒增干擾。

圖9 不重復(fù)顯示文案

如很多表單,都會顯示標(biāo)簽名,然后再在輸入框內(nèi)重復(fù)顯示與標(biāo)簽名相同的引導(dǎo)提示(如左上圖),這就屬于顯示了沒有提供增量價值的文案,這種情況下輸入框內(nèi)不必顯示引導(dǎo)文案。

相比上圖中規(guī)中矩的表達方案,我更喜歡Google靈動的解決方案:

圖10 Google關(guān)于輸入框的提示方案

默認在輸入框內(nèi)顯示引導(dǎo)提示,無標(biāo)簽名稱,當(dāng)用戶開始輸入后,引導(dǎo)提示上移變成標(biāo)簽名,框內(nèi)顯示輸入的手機號。這個設(shè)計讓默認界面簡潔,輸入過程也一直能知道應(yīng)該輸入什么內(nèi)容。

文案除了有用以外,還要貼合場景,讓用戶能夠通過文案預(yù)知下一步的行為或反饋。

圖11 為下一步的行為提供預(yù)期

比如上圖中,如果按鈕是【下一步】用戶就只能點擊后才能從下一個界面上知道反饋,而【獲取短信驗證碼】則提前告知了用戶系統(tǒng)接下來的行為,讓用戶可以馬上準(zhǔn)備接收和輸入驗證碼,增加了用戶對系統(tǒng)和自身行為的掌控感。

② 清晰性

清晰性側(cè)重文案要以用戶視角出發(fā),準(zhǔn)確無歧義,易于用戶理解。

比如要盡量避免技術(shù)術(shù)語:

圖12 避免技術(shù)術(shù)語

這種研發(fā)術(shù)語自從設(shè)計師介入后,基本不會再出現(xiàn)了,研發(fā)同學(xué)每次遇到這些提示都會找產(chǎn)品或設(shè)計師要提示語(如果研發(fā)同學(xué)喜歡自己發(fā)揮,那用戶就很有可能還會遇到上述的技術(shù)術(shù)語提示)。

再比如設(shè)計中比較常見的CTA按鈕舉例,為什么要用行動召喚按鈕,也是因為行動召喚按鈕更清晰,用戶甚至可以忽略提示語,直接根據(jù)按鈕的名稱就做出選擇:

圖13 行動召喚按鈕更清晰

多數(shù)行動選擇我們都可以這么處理,但是當(dāng)用戶的召喚行動本身具有取消涵義時,則不能再套用這個形式,否則又會出現(xiàn)歧義:

圖14 行動召喚按鈕具有取消涵義時的設(shè)計

比如,當(dāng)詢問用戶是否要撤銷輸入時,如果同時用撤銷和取消就會有些混淆,這個時候就建議將取消按鈕,直接改為不撤銷,讓按鈕涵義更清晰。

清晰的按鈕不僅可以傳遞更有價值的信息,而且還可以促進功能的轉(zhuǎn)化,帶來巨大的業(yè)務(wù)價值,給大家舉兩個案例:

圖14 UX文案的價值

第一個來自Google。當(dāng)Google把文案【Book a room】改成【Check availability】后,減輕了用戶點擊的壓力,訂單的轉(zhuǎn)化率提升了17%。

第二個來自滴滴。當(dāng)?shù)蔚伟涯：摹静榭丛斍椤堪粹o改為清晰的【點擊領(lǐng)取】按鈕后,點擊率提升了287%。

這都屬于改變文案,讓文案的下一步行為更清晰,操作更明確所帶來的價值提升。

③ 簡潔性

在表達清晰的基礎(chǔ)上,還要力求簡潔,減少用戶的閱讀成本。

圖15 力求簡潔

這就需要設(shè)計師惜字如金,不僅要去掉重復(fù)的提示,而且還要把提示中不影響信息傳達的修飾語都去掉。甚至可以回到第一步,思考是否需要用提示語。比如iphone登錄時,如果密碼輸入錯誤,并不會顯示提示,而是左右搖晃然后刪除密碼,讓用戶重新輸入。

最后我們再以一個密碼輸入的案例,來串聯(lián)UX文案協(xié)作的3原則:

圖15 力求簡潔

首先要確保文案的有用性,然后力求清晰、簡潔、最后再加入下一步的引導(dǎo)說明,一個合格的UX文案就誕生了。

2. UX品牌文案

UX文案的本質(zhì)是產(chǎn)品與用戶之間的對話。

我們需要考慮產(chǎn)品的定位(自己)、用戶的畫像(對方),以及當(dāng)下的場景,才能輸出合適的UX文案,構(gòu)建一場愉快的對話。

UX文案的3原則,可以指導(dǎo)設(shè)計師完成一些工具型產(chǎn)品的文案,幫助用戶快速完成任務(wù)。但對于希望通過文案來鞏固其品牌認知的產(chǎn)品而言,UX文案更重要的是符合其品牌信念,強化其品牌個性。

先給大家舉2個有品牌感的文案案例:

圖15 夸克的品牌文案

1)夸克。在一堆中規(guī)中矩工具化/平臺化的瀏覽器類產(chǎn)品中,夸克的文案就明顯獨樹一幟,其語言風(fēng)格與其產(chǎn)品定位、用戶畫像更加契合。

圖15 躺平的品牌文案

2)躺平。在一大批積極陽光正能量的產(chǎn)品中,躺平以其獨特的形象切入用戶的視野,文案充滿了對現(xiàn)實生活中年輕人生活狀態(tài)和心態(tài)的洞察,戳中了很多年輕用戶的心聲,讓人過目難忘。

從這個角度來看,品牌文案其實有點類似于前面的營銷文案,除了傳達準(zhǔn)確的信息之外,還致力于給用戶打造特定的品牌印象。這一趴我們在基礎(chǔ)課程中不再展開。

最后在小結(jié)一下UX文案的寫作清單:

1. 用戶導(dǎo)向:以用戶視角撰寫文案,而非產(chǎn)品開發(fā)視角。

2. 實用:確保每一句文案都有價值,能夠引導(dǎo)用戶的下一步行為。

3. 清晰:去掉專業(yè)術(shù)語,準(zhǔn)確無歧義,

4. 簡潔:惜字如金,沒有冗余的字詞,把關(guān)鍵信息放在最前面。

5. 品牌一致性:根據(jù)品牌基調(diào)定義語言風(fēng)格,使UX文案助力品牌形象的建設(shè)。

好了,到這里UX文案的設(shè)計就介紹完畢了。