提升介面細節之寫好說明文案
感謝「海鹽社」的小夥伴:@小溜Epik @菠蘿蓋兒 對於這篇分享整理總結給予的幫助,希望對大家會有一些幫助。感謝你們。
今天的分享要從最近工作中的一個案例說起。新開發的一款產品在註冊完成後,會有一個身份選擇的介面,如下圖,左邊是根據產品經理給的原型圖輸出的,而右邊是我提出的修改建議。顯而易見,兩者最大的差別就是少了下方的行為召喚(CTA)按鈕,我的初衷是為了減少操作,讓使用者直接點選角色就進入下一步,但是產品經理提醒我,如果使用者對角色理解不清楚而誤操作呢?從下個頁面返回來反而增加了操作成本,增加一個二次確認的按鈕,可以讓使用者在選擇時更加謹慎。而我則認為增加一步操作對正常操作的使用者來講是不公平的,但是確實又不能忽視誤操作的使用者,那麼有沒有更優的解決方案呢?
我帶著這個疑問開始尋找其他產品是如何解決這個問題的。下面是我找到的其中一個案例:有道精品課。
從圖中可以發現,有道精品課在選擇關注領域的介面也是沒有二次確認按鈕的。但是,與我的設計方案不同的是,他在每個領域標題的下方有一段文案,可以幫助使用者更準確地理解標題。那麼回到我們的產品,是不是也可以在角色下方加上一段角色描述的文案呢,以幫助使用者更好地理解角色,減少角色認知不準確所帶來的誤操作。並且,對理解無誤的使用者也沒有增加操作負擔。
此外,還有兩個地方值得我們注意:1、在問題下方同樣有一段簡單的描述,告訴使用者他們這麼做的原因是什麼;2、在介面的最下方也有一段提示文案,示意使用者放心選擇,後期可更改。這兩點大大降低了使用者在選擇時的恐懼感,既知道了這麼做的目的,也不用擔心選錯會造成什麼未知的嚴重後果。
最終,我們的介面改成了以下的樣子。
那麼通過這個案例是想說明,文案對於使用者體驗的影響,也是我們作為設計師不可忽略的一環。下面就從三個大方面來講講如何優化我們介面中的文案。
目錄
1、統一性
2、精準性
3、情感性
4、總結
統一性又可以分為詞語統一、句式統一、跳轉前後名稱統一以及時間/數字/標點等格式統一這四個小方面,我們逐一來說明。
1.1 詞語統一
由於漢語的博大精深,造成我們在對同一件事物的表達中可能換很多詞都說得通。這就很容易造成詞語的前後不一致,從而讓使用者產生困惑——這到底指的是不是同一件事物呢?那麼我們在無法定奪哪個詞語表達更精準的時候,至少應該保證只使用其中一個,這也就是詞語的統一性。如下圖,
網易雲音樂的朋友介面,在標題欄下方有兩個按鈕“發動態”和“釋出視訊”,一般人的理解這裡的“發”和“釋出”應該是同一個意思,但是用了不同的詞語,又會讓使用者覺得它倆背後是否還有其他區別,從而增加了使用者的理解成本。
1.2 句式統一
句式統一是指上下文的語法、語種以及語序要保持統一。比如下圖是網易易盾的直播場景解決方案,我們可以發現都是名詞+動詞的組合。如果把這些組合順序顛倒一下,“民族語言識別”變成“識別民族語言”、“直播電視牆巡檢”變成“巡檢直播電視牆”,對語意的理解其實影響不大,但是整體的統一性就會受到影響,讓人覺得這個產品不夠嚴謹,從而影響使用者選擇品牌時的決定。
1.3 跳轉前後名稱統一
這一點比較容易理解,就是跳轉前的按鈕名稱與跳轉後的頁面標題保持一致。由於在原型設計中頁面可能會反覆增刪改查,難免會發生入口與目標標題不一致的情況,最常見的就是遺漏字首或者寫了多餘的字首:“編輯精選”跳轉到了“精選”、“我的動態”跳轉到了“動態”、“關於XX”跳轉到了“關於我們”、“設定”跳轉到了“系統設定”等等。這種情況對理解並無大礙,但是與前面講到的“句式不統一”類似,會讓使用者覺得產品不嚴謹。另外還有一種情況,就是跳轉前後的偏差會造成理解不一致,如下圖,
在平安好車主的首頁點選“年檢代辦”,跳到的卻是“年審代辦”。我們都知道在行政服務中,有很多名字相近卻內容天差地別的事項,因此這裡的不統一對於第一次辦理年檢的小白車主來說產生了極大的困擾,他無法確定這到底是不是他需要辦理的業務。因此,這種情況我們要儘量避免。
1.4 時間數字標點格式統一
在時間的表達上,常見的有絕對時間、相對時間+絕對時間這兩種方式。前者常用於資料記錄、進度查詢等場景下,而後者常用於訊息列表。
而數字就是阿拉伯數字和漢字的差別。阿拉伯數字常用於資料統計等場景,在一段漢字中間加入差異化的阿拉伯數字可以讓使用者感知更快更強,因此在需要突出數字的地方使用阿拉伯數字表述會更加有效。而有些需要突出時間痕跡或者歷史感的場景下,使用漢字數字表達更符合意境,比如“八月”、“第十六回”等。
標點主要是中英文和半全形的一些區別,這裡不多贅述。下圖是採自螞蟻金服設計規範中的基本標點規範,重點列出了設計中需要注意的幾點。
精準性主要是指用詞精準、不累贅&不缺失、不模糊&不絕對這三個方面,下面一點點來看。
2.1 用詞精準
用詞精準可以算是文案最基本的要求了。用詞不精準,或者不符合使用者習慣的用詞,容易增加使用者的理解成本,給使用者留下不專業的印象。如下圖,電信營業廳的簡訊驗證碼登入介面。
我們都知道,現在簡訊驗證登入的方式已經是移動端登入的標配方式之一,使用者對“驗證碼”的概念也已經相當熟悉了。而電信營業廳的登入頁中卻將其稱為“隨機密碼”,隨機密碼這個叫法本身沒有問題,這本就是由一串隨機數字或字母組成的密碼,但驗證碼這個概念在使用者的認知裡早已成為習慣,突如其來的“標準而新穎”的名詞反而對使用者的認知造成了障礙。
2.2 不累贅&不缺失
不累贅是指結合頁面的場景以及上下文關係,使用者可以完全理解的資訊就無需再重複表達了。儘量提供簡短、易於快速獲取的內容,將那些累贅的文字去掉,避免增加使用者的認知負擔。如下圖,
在懂球帝的掃一掃介面中,掃碼框的上方寫了兩行文案“開啟網頁版懂球帝登入頁面,掃描二維碼登入”和“掃描懂球號二維碼,關注懂球號”,介紹了懂球帝裡掃碼的兩個場景。而實際上使用者在開啟掃一掃之前,絕大多數情況是已經處於這兩種場景下的一種了。先有掃碼的場景了,才會進入掃一掃的功能,而不是先進入掃一掃的功能,再去找碼掃。因此,在這裡,這兩句提示就顯得多餘了。
與不累贅相對的是不缺失,不缺失指的是在那些使用者可能會產生困惑的地方進行資訊補全,比如文章開頭的角色描述就是補全資訊的典型案例。另外,輸入框的提示文字、異常流之後的解決方案等等也都是不缺失的表現。
淘票票在搜尋欄的提示佔位符中清晰的告知使用者可以搜尋哪些資料型別。
2.3 不模糊&不絕對
不模糊是指避免使用“可能”、“大概”、“也許”這些模凌兩可的詞,給使用者造成“到底是還是不是”的困擾。
當然在一些異常流中,技術確實無法判斷問題的情況下,用“可能原因”反而顯得更謹慎,比如下圖中的阿里雲官網404頁面。
情感性的要求相比前兩者有所提高,要求我們需要更懂使用者。主要有以下幾個方面:使用恰當的語氣、站在使用者的角度、營造熟悉的場景以及給出合理的解釋。
3.1 使用恰當的語氣
在文案中常用“我”、“你”來和使用者對話,與使用者建立親密的關係。“我”更能讓使用者感受到自己在產品體驗過程中的主導地位,而“你”對使用者用來講更具親和力和自由平等的感覺。“您”在大部分時候會讓使用者覺得太過疏遠,但在一些產品的VIP場景下,“您”與線下那種“賓至如歸”的感覺就更契合了,此時用“您”更合適。另外,也要注意不要在同一句話中混用“我”和“你”,比如“在‘我的賬號’中設定你的暱稱”,這種指代混亂會讓使用者十分困擾。
此外,多給使用者支援與鼓勵,不要命令和強迫使用者。當用戶出錯的時候就不要責怪他,專注於解決問題,而不是指責。
3.2 站在使用者的角度
在表述內容時,應該從使用者的角度來描述他們這麼做能產生什麼價值、達到什麼目的,從而讓使用者自發地去執行,而不是我們需要使用者為我們做什麼,幫我們達到什麼目的。如下圖,
網易嚴選會希望使用者完善一些身材資料的基本資料,這對產品來說是很有價值的資料收集。但是在文案中,網易嚴選向用戶傳達了完善資料對於他自身的價值(資訊越完整,對您選擇服飾時越有幫助),從而讓使用者自發地去執行。
另一邊愛彼迎,同樣是希望使用者完善資料,“我的”頁面中資料完善進度條的提示文案是這麼寫的——“我們要求每一位愛彼迎使用者在旅行或出租之前提供一些具體資訊,現在就來完善這一步吧”。難以想象使用者在看到這句文案時是什麼心情,態度如此強硬,難免會造成反感。
3.3 營造熟悉的場景
為使用者創造一個真實、熟悉的場景,可以激發情感共鳴,提升他們的參與度。如下圖,
鬥魚將興趣群的名稱定義為“車隊”,通過這種詼諧幽默的方式表明了該功能的使用者群體是一群志同道合的老司機,讓使用者忍不住上車。而虎撲的評論區,普通的點贊變成了“亮了”,更貼合用戶對有趣評論贊賞認同的真實場景。
3.4 給出合理的解釋
讓使用者在體驗中感覺到不可控制是非常危險的,我們應該儘可能保證使用者在產品體驗中擁有選擇、修改等權利。如果確實不允許使用者自主選擇修改時,我們應該給出合理的解釋,告訴他們“不可以”的原因。如下圖,
手機淘寶不允許使用者修改會員名,因為淘寶的會員名是可以作為登入名的,登入名當然是不可修改的,這很好理解(相當於QQ的QQ號)。而京東的使用者名稱同樣不可修改,但是在提示文案中卻沒有說明是因為作為登入名,雖然使用者名稱作為登入名幾乎是常識,但是對於非頻繁登入的使用者來講,這樣的提示還是會產生些許困擾的。
在介面的說明文案中,統一、精準的語言會讓使用者更容易理解,恰當的語氣以及豐富的情感會讓使用者更容易建立信任感。因此,在設計介面時文案也應當被重視。
最後,也是最重要的一點: 任何文案中都不要出現錯別字!
參考
螞蟻設計平臺——Web設計指引——文案
ofollow,noindex" target="_blank">http://design.alipay.com/design/web/writing
文案指引規範
https://www.jianshu.com/p/472b55316081
關於情感化設計還有你不瞭解的?
https://www.ui.cn/detail/416976.html
情感設計不止一個 IP 形象
https://www.ui.cn/detail/408933.html
本文由 @海舟Ocean 原創釋出於公眾號「海鹽社」,未經許可,禁止轉載哦。
原文連結: http://t.cn/E20ez1n