微文案,是快速改進(jìn)界面的好方法

2 評(píng)論 5252 瀏覽 29 收藏 16 分鐘

在提升用戶體驗(yàn)方面,文案也是一個(gè)重要的影響因素,合適的文案可以讓用戶更加清楚、直接地了解產(chǎn)品所想傳遞出的信息,從而提高用戶的操作效率。那么,哪些文案屬于微文案?如果想對(duì)微文案進(jìn)行優(yōu)化,又可以從哪些方面入手?

文案對(duì)于用戶體驗(yàn)來(lái)說(shuō),是非常重要卻又容易被忽略的元素之一。好的文案,能給用戶帶來(lái)好的產(chǎn)品使用體驗(yàn),作為設(shè)計(jì)師的我們,一定要足夠重視。今天這篇文章,將會(huì)從常用UI元素中舉例說(shuō)明微文案的正確用法及價(jià)值,記得收藏學(xué)習(xí)起來(lái)。

根據(jù)Joshua Porter(資深設(shè)計(jì)專家,《Designing For The Social Web》的作者)的說(shuō)法:改進(jìn)界面最快方法之一是改進(jìn)其文案。

他第一次提到微文案這個(gè)術(shù)語(yǔ)是在他的文章《Writing Microcopy》中,用到了如何在確認(rèn)彈窗中添加文案的例子,其舉例的文案是“賬單地址是你卡上顯示的地址”,用清晰的文案避免了用戶遇到的許多錯(cuò)誤。
最快提升界面體驗(yàn)的方法是提升你的文案水平。

http://bokardo.com/archives/writing-microcopy/

談?wù)勎业膫€(gè)人經(jīng)驗(yàn)。有一種訂閱服務(wù)是以用戶取消訂閱時(shí)會(huì)遇到問(wèn)題而聞名。當(dāng)用戶取消訂閱時(shí),在沒(méi)有完成流程的情況下,用戶在其中一個(gè)步驟上“退出”了,他們以為取消了訂閱,但錢仍然被扣了,這種感覺(jué)特別讓人惱火。經(jīng)過(guò)分析,我們發(fā)現(xiàn)用戶通過(guò)點(diǎn)擊“取消”按鈕離開(kāi)取消訂閱彈窗,而不是為了結(jié)束他們的流程而點(diǎn)擊“繼續(xù)”按鈕。讓我們看一下下面的例子。

微文案是快速改進(jìn)界面的好方法

這是第一個(gè)糟糕的文案從而導(dǎo)致產(chǎn)品不被滿意的例子

經(jīng)過(guò)分析,我們把按鈕上的文案做了優(yōu)化,把“取消”按鈕文案改成“不取消”,把“繼續(xù)”改為“取消訂閱”,這樣就清晰易懂了。在流程上有這個(gè)彈出框本來(lái)也沒(méi)錯(cuò),這樣就避免了許多可能出現(xiàn)的誤操作。

微文案是快速改進(jìn)界面的好方法

提高用戶滿意度的方法之一

如果你有學(xué)習(xí)過(guò)尼爾森的十大可用性原則,你會(huì)發(fā)現(xiàn)10條中有4條都與文案有關(guān)。

  1. 系統(tǒng)狀態(tài) ——告訴用戶當(dāng)前正在發(fā)生什么,是卡住了還是處在loading中或是其他什么狀態(tài)。
  2. 一致性和標(biāo)準(zhǔn)化原則 ——有一些約定俗成的規(guī)則,其中有一些普遍接受的術(shù)語(yǔ),明確的操作提示,在不同界面保持統(tǒng)一等等。
  3. 防錯(cuò)原則 ——幫助用戶明白當(dāng)他們做什么操作會(huì)發(fā)生什么結(jié)果,或者清晰的解釋某個(gè)操作會(huì)有什么行為。
  4. 明確錯(cuò)誤 ——錯(cuò)誤信息應(yīng)該用人話表達(dá)(不要用代碼),較準(zhǔn)確地反映問(wèn)題所在,并且提出一個(gè)建設(shè)性的解決方案。

一、什么是微文案?

微文案(microcopy)是界面中的一些文本小片段,可以是詞語(yǔ)也可以是一句話,目的是為了幫助用戶解決問(wèn)題,會(huì)對(duì)用戶的操作體驗(yàn)帶來(lái)影響。

1. 哪些不是微文案

營(yíng)銷文案不算是微文案,任何引導(dǎo)用戶點(diǎn)擊為了售賣商品的文字內(nèi)容,還包括所有的文檔、SEO和智能文本。

2. 哪些地方會(huì)用微文案?

  • 按鈕和操作鏈接的描述中;
  • 表單中的文本,表單的標(biāo)簽和文本塊;
  • 消息、警告、提示和錯(cuò)誤,告訴用戶下一步要怎么做;
  • 確認(rèn)對(duì)話,我們要求確認(rèn)某些行為;
  • 導(dǎo)航入口。

1)按鈕

如果讓你優(yōu)化按鈕的設(shè)計(jì),你有什么想法嗎?添加一個(gè)投影?選擇一個(gè)更好的對(duì)比色?圓角?答案是——從動(dòng)詞開(kāi)始!

  • 以動(dòng)詞作為動(dòng)作開(kāi)始;
  • 描述要準(zhǔn)確清晰,要求處處易懂;
  • 行動(dòng)按鈕文案應(yīng)該足夠具體,以便用戶更容易理解。不要使用籠統(tǒng)的概念,因?yàn)樗鼈兛赡苁悄:碗y以理解的;
  • 用WYLTIWLT 提問(wèn)的方式,檢查文案命名是否更好被理解并達(dá)到想要的結(jié)果(彩云注:這個(gè)很長(zhǎng)的縮寫(xiě)其實(shí)是2個(gè)問(wèn)句,一種自查方式。WYLT=whould you like to …?你想…?)(IWLT=I would like to …我想…)

微文案是快速改進(jìn)界面的好方法

如何創(chuàng)建一個(gè)清晰的按鈕和鏈接

想象一下,應(yīng)用的創(chuàng)建者會(huì)怎樣通過(guò)網(wǎng)絡(luò)與他們的用戶交流。創(chuàng)作者問(wèn)用戶:“你需要做什么…(創(chuàng)建一個(gè)計(jì)劃)?”。用戶回復(fù)他們的行動(dòng):“我想要去做…”。

如果這個(gè)對(duì)話讓我們覺(jué)得邏輯自然,那就意味著我們的文案是沒(méi)問(wèn)題的。

微文案是快速改進(jìn)界面的好方法

WYLTIWLT 校對(duì)

比如,最好不要使用“需要幫助嗎?” 這種不帶動(dòng)詞帶問(wèn)號(hào),作為按鈕??赡芸梢宰鳛橐粋€(gè)額外的鏈接,放在屏幕的某個(gè)角落,但如果你決定使用這樣的短語(yǔ)作為按鈕,那么最好使用” 獲取幫助 “。一個(gè)類似的例子是“快速查找”。“快速查找”不是動(dòng)詞,而是名詞。如果你要設(shè)計(jì)一個(gè)行動(dòng)按鈕,最好是用“查找”或“搜索”,這樣還簡(jiǎn)單直接。

“獲取我的方向”,如果你簡(jiǎn)化掉“我的”,這個(gè)鏈接會(huì)變得更加清晰干凈。畢竟,是誰(shuí)的并不重要,但如果你使用了這個(gè)產(chǎn)品,獲取的方向就是你所需要的。

2)表格

微文案是快速改進(jìn)界面的好方法

清晰的表格

在表格中這樣做會(huì)比較好:使用簡(jiǎn)潔易懂的標(biāo)簽,寫(xiě)清楚填寫(xiě)每個(gè)項(xiàng)目的提示,以及填寫(xiě)的原因或者最好指定什么格式和什么數(shù)據(jù)。

在占位符中,建議復(fù)制標(biāo)題信息或提示填寫(xiě)要求。例如“輸入事件標(biāo)題”。

經(jīng)過(guò)測(cè)試,如果你在表單中輸入一個(gè)沒(méi)有“示例”的示例,用戶會(huì)認(rèn)為這個(gè)字段已經(jīng)被預(yù)先填寫(xiě)了,而不需要他們自己重新填。

上面的示例顯示了Title字段的名稱和一個(gè)占位符,文本為“Enter event Title”。由于我們使用了“New Event”表單的標(biāo)題,下面的所有內(nèi)容都將在視覺(jué)上引用它,因此,沒(méi)有必要在字段標(biāo)簽中重復(fù)事件標(biāo)題。

日期和時(shí)間也是如此,無(wú)需對(duì)每個(gè)字段重復(fù)文本,只需寫(xiě)“開(kāi)始”和“結(jié)束”即可。

3)消息和警告

不要忘了用人類語(yǔ)言與用戶溝通,不要用像“服務(wù)錯(cuò)誤”,錯(cuò)誤碼“404”,“403”之類的,不然用戶會(huì)迷失在操作流程中。

即使我們不能非常準(zhǔn)確的說(shuō)出發(fā)生了什么,但我們必須知道這是一個(gè)技術(shù)問(wèn)題,說(shuō)明原因 和/或 說(shuō)明是誰(shuí)的錯(cuò),是用戶還是系統(tǒng)。

此外,不要忘記你的目標(biāo)受眾。對(duì)有些人來(lái)說(shuō),說(shuō)人話對(duì)體驗(yàn)來(lái)說(shuō)是最重要的。

微文案是快速改進(jìn)界面的好方法

消息和提醒

4)確認(rèn)對(duì)話框

我們想要得到確認(rèn)的問(wèn)題最好立即在標(biāo)題中簡(jiǎn)要明確,而不是用“你確定嗎?”等等。

如果有的話,你可以在描述中添加任何可能的負(fù)面影響,把潛在風(fēng)險(xiǎn)準(zhǔn)確告知用戶。

例如,如果用戶允許谷歌位置服務(wù),那么該數(shù)據(jù)將被匿名發(fā)送到谷歌,并且希望用戶知道它。動(dòng)作按鈕是清晰具體的,與問(wèn)題緊密呼應(yīng)。在我們的案例中,我們將問(wèn)題中的“使用”和行動(dòng)按鈕中的“使用”結(jié)合起來(lái),這有助于用戶更快地做出正確的決定。

微文案是快速改進(jìn)界面的好方法確認(rèn)對(duì)話框

5)尊重用戶

這是來(lái)自系統(tǒng)的消極信息,如果用戶拒絕了它的提議,通常會(huì)受到羞辱。這種類型的微文案更多地被用作一種營(yíng)銷策略,但它也可以在簡(jiǎn)單的界面中找到。在作者看來(lái),羞辱可能是無(wú)害的,但從長(zhǎng)遠(yuǎn)來(lái)看會(huì)產(chǎn)生問(wèn)題。我們也需要明白,這更多的是內(nèi)容創(chuàng)作者道德的一面,是一種黑暗的設(shè)計(jì)模式。

(彩云注:這一段可能有點(diǎn)難理解,可能是由于國(guó)外文化的原因,我自己的理解是對(duì)于有2組需要用戶確認(rèn)的按鈕,通常會(huì)在拒絕按鈕那另外加了一句話,比如下面的幾個(gè)案例:”不,我都知道了”,“不,我很有錢”,“從不,我想要更精彩的游戲”,會(huì)有幽默有趣的成分在里面)

微文案是快速改進(jìn)界面的好方法

侮辱性確認(rèn)https://confirmshaming.tumblr.com/

現(xiàn)在有了一組確認(rèn)按鈕,它可能會(huì)導(dǎo)致一個(gè)死胡同,讓用戶哭笑不得。如果你想迷惑用戶,文字是最好的方法。

讓我們看一些例子:

  • 你想取消嗎?——取消 / 好
  • 取消后臺(tái)編譯操作并繼續(xù)?——好吧 / 取消
  • 你確定要取消此操作嗎?點(diǎn)擊“確定”取消當(dāng)前操作,或者點(diǎn)擊“取消”繼續(xù)?!冒?/ 取消
  • 我們應(yīng)該取消這些改動(dòng)嗎?如果你想離開(kāi)這個(gè)頁(yè)面,所有未保存的數(shù)據(jù)都會(huì)被取消。——取消 / 拒絕”。

如果你對(duì)書(shū)面文本的質(zhì)量不確定,多花幾分鐘/小時(shí),征求意見(jiàn),或者重寫(xiě)幾次,最后可能連你的奶奶也能理解按下按鈕會(huì)發(fā)生什么,那就沒(méi)錯(cuò)了。

微文案是快速改進(jìn)界面的好方法

混亂的確認(rèn)彈窗

6)導(dǎo)航

導(dǎo)航更多的是關(guān)于信息架構(gòu),但也有一些細(xì)微差別。

  • 直觀性——導(dǎo)航項(xiàng)在沒(méi)有點(diǎn)進(jìn)去前,應(yīng)該已經(jīng)給出了一些關(guān)于內(nèi)部?jī)?nèi)容的理解。
  • 語(yǔ)句一致性——如果我們使用一個(gè)詞性(名詞、形容詞等),那么我們?cè)谄渌麑?dǎo)航上也有同一個(gè)詞性。這通常在一級(jí)導(dǎo)航上要求做好。
  • 導(dǎo)航、標(biāo)題和面包屑的一致性。

微文案是快速改進(jìn)界面的好方法

導(dǎo)航規(guī)則

7)我的vs你的

① 我的

如果用戶創(chuàng)建了一個(gè)屬于自己的賬號(hào),那最好是用“我的”。例如,我的youtube頻道,我的照片等等。

② 你的

  • 信息發(fā)布者/服務(wù)者與用戶進(jìn)行對(duì)話。
  • 用戶使用的工具或功能,但是用戶使用它并導(dǎo)入一些東西。示例:購(gòu)買將是用戶的——我的購(gòu)買,但購(gòu)物車將是系統(tǒng)的——你的購(gòu)物車。
  • 另一個(gè)例子是——你喜歡的書(shū)。

微文案是快速改進(jìn)界面的好方法

二、如何讓微文案做的更好?

1. 了解你的用戶

  • 是用母語(yǔ)還是用第二語(yǔ)言;
  • 之前的經(jīng)驗(yàn);
  • 用戶背景。

2. 人類語(yǔ)言

  • 避免使用技術(shù)行話(但是如果你的用戶本身就是技術(shù)專家那么使用術(shù)語(yǔ)就沒(méi)啥問(wèn)題);
  • 避免使用內(nèi)部縮寫(xiě)(相同的縮寫(xiě)在不同的公司和產(chǎn)品中可能是不同的意思);
  • 使用恰當(dāng)?shù)恼Z(yǔ)氣。

3. 考慮上下文

  • 避免模棱兩可;
  • 回答可能的問(wèn)題(即使是在這里,你也必須是一個(gè)UX設(shè)計(jì)師,并理解所有用戶痛苦);
  • 指導(dǎo)用戶。

4. 從一開(kāi)始就用心

  • 考慮在第一個(gè)版本中優(yōu)化微文案(你的用戶會(huì)為此說(shuō)“謝謝”);
  • 避免使用假數(shù)據(jù)和文案進(jìn)行填充;
  • 建議和檢查(與團(tuán)隊(duì)和用戶討論可能的命名);
  • 更好地了解產(chǎn)品。

彩云注:

在平時(shí)的工作中,很多設(shè)計(jì)師非常關(guān)注視覺(jué)設(shè)計(jì),卻常常忽略文案的設(shè)計(jì),覺(jué)得那不是自己工作的內(nèi)容。但其實(shí)在產(chǎn)品界面中,一些細(xì)微的文字內(nèi)容往往能讓用戶感到放心和溫暖,好的文案能夠讓用戶在操作中不易迷失,效率倍增。所以,除了鉆研視覺(jué)元素上的細(xì)節(jié),同樣也要對(duì)文案足夠的重視,這樣才能給用戶創(chuàng)造最佳的產(chǎn)品體驗(yàn)。

原文作者:Platea Design Community(本文翻譯已獲得作者的正式授權(quán))

原文地址:https://medium.com/platea-design-community-kyiv/microcopy-as-the-great-way-to-improve-your-interface-b27ca694b40c

譯者:彩云Sky,人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級(jí)視覺(jué)設(shè)計(jì)師。

來(lái)源公眾號(hào): 騰訊ISUX(ID:tencent_isux),騰訊ISUX用戶體驗(yàn)與設(shè)計(jì)部

本文由人人都是產(chǎn)品經(jīng)理合作媒體@騰訊ISUX 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 微文案確實(shí)是一個(gè)很細(xì)的小點(diǎn),寫(xiě)得很好哦,學(xué)到了學(xué)到了,文案的視覺(jué)設(shè)計(jì)很重要

    來(lái)自湖南 回復(fù)
  2. 不錯(cuò)不錯(cuò),學(xué)到了?;畹嚼蠈W(xué)到老,我開(kāi)始對(duì)這方面感興趣了。

    來(lái)自廣西 回復(fù)