2023-2-6 資深UI設(shè)計者
我們都在研究好的設(shè)計，感嘆優(yōu)秀的產(chǎn)品帶給我們的尖叫，但我們或許從未思考過，糟糕的用戶體驗設(shè)計也會給用戶帶來很大的傷害。這個產(chǎn)品體驗欄目的靈感來自于喬納森·沙利亞特的《設(shè)計的陷阱：用戶體驗設(shè)計案例透析》這本書。在本書的介紹里，有這么一句話——設(shè)計能殺人、使人憤怒、使人傷心。讀到這句話的時候，讓人驚愕，讓人不可思議，但這就是事實，這就是糟糕的用戶體驗設(shè)計會導(dǎo)致的后果?！阁w驗陷阱」的第一期，就讓我們來看看那些被忽視的文章編輯器對用戶體驗的影響有多糟糕。
文章編輯器是一個產(chǎn)品最基礎(chǔ)的構(gòu)成部分，不管是前臺還是后臺，編輯器都是一個非?；A(chǔ)的功能。比如一個產(chǎn)品需要發(fā)布新的資訊內(nèi)容，在后臺就一定需要有一個文章編輯器才能實現(xiàn)這個功能。
文章編輯器在各大網(wǎng)站、APP產(chǎn)品里都非常常見，特別對于以內(nèi)容生產(chǎn)為主的社區(qū)、平臺，比如像站酷網(wǎng)、人人都是產(chǎn)品經(jīng)理、知乎、頭條、網(wǎng)易這些平臺，文章編輯器是一個非?；A(chǔ)又必不可少的功能。
1. 有用性
文章編輯器要能實現(xiàn)內(nèi)容的發(fā)布，當(dāng)用戶從本地或在線文檔（比如騰訊文檔、飛書、石墨等）復(fù)制內(nèi)容進去時候，可以輕松實現(xiàn)二次編輯，比如插入圖片、調(diào)整標題樣式等。
2. 易用性
編輯器的界面、功能，要能滿足多數(shù)用戶的期望，比如支持多張圖片上傳、第三方音頻/視頻鏈接，以及整個操作過程中使用起來愉悅、友好。
3. 容錯性
當(dāng)用戶出現(xiàn)操作錯誤的時候，系統(tǒng)能夠及時給用戶提示，比如圖片上傳進度、圖片尺寸大小限制、必填項勾選等等。容錯性對用戶體驗的影響特別大，如果用戶在使用過程中不清楚哪個地方犯錯不能繼續(xù)操作，用戶對系統(tǒng)就會陷入焦慮。
1. 站酷
站酷網(wǎng)是全國最大的設(shè)計師平臺，吸引了國內(nèi)眾多優(yōu)秀的設(shè)計師和設(shè)計知識創(chuàng)作者，但是他們的文章編輯器，體驗下來卻非常糟糕。接下來讓我們來看看這個糟糕的文章編輯器，給用戶帶來了多大的體驗傷害。
當(dāng)我開開心心地把一篇在騰訊文檔寫好的內(nèi)容復(fù)制到站酷編輯器的時候，在對標題進行格式調(diào)整的時候，全局樣式竟然會同步更改，比如想把「標題」更改為「標題1」的樣式，整篇文章就會一起更新，這讓人摸不著頭腦。不過我沒放棄，經(jīng)過多番嘗試，才發(fā)現(xiàn)需要在標題上下各加一個Enter，這樣才能設(shè)置成功（我是一個BUG解決天才）。
當(dāng)文章篇幅撐過編輯器的默認高度以后，這個時候就會出現(xiàn)一個非常糟糕的體驗，你找不到編輯器的工具欄。比如你想上傳圖片或者修改內(nèi)容，你都不知道工具欄去哪里了，這個時候用戶徹底迷失，變得異常焦躁。解決這個問題的唯一辦法是——把編輯器全屏。
創(chuàng)過第一關(guān)以后，全屏的編輯器又出現(xiàn)一個非常糟糕的體驗。那就是當(dāng)你去調(diào)整某一段文字的時候，比如加一個換行，這個時候編輯器的光標就會像幽靈一樣跑到底部，你只能重新找到剛才的原位置，你以為是眼花再試一次之后，光標再次出現(xiàn)在底部，簡直讓你懷疑人生。
當(dāng)你從頭部開始上傳圖片的時候，和調(diào)整字段一樣，光標又會像幽靈一樣跑到底部，這個時候，你還得去找之前的位置，才能繼續(xù)上傳。不過經(jīng)過多番的嘗試，我又破解了站酷編輯器的設(shè)計密碼，原來可以從底部開始倒著傳圖片，那該死的光標，就不會跑到底部去了，這個秘訣讓我提升了很高的效率，我真感慨自己的的智商：）
從站酷的編輯器可以看出，他們違反了尼爾森十大原則的系統(tǒng)性可見原則和防錯原則。第一，在用戶的內(nèi)容高度超出編輯器默認高度以后，編輯器的工具欄消失不見，這其實是一個功能BUG，不但沒有修復(fù)也沒有提示用戶使用全屏操作，用戶徹底迷失；第二，在用戶調(diào)整內(nèi)容換行的時候，光標會像幽靈一樣跳到底部，這也屬于功能的BUG，沒有修復(fù)也沒有系統(tǒng)提示，最后導(dǎo)致用戶在內(nèi)容發(fā)布階段就變得垂頭喪氣，最終浪費了無數(shù)寶貴的時間。
拓展閱讀：
尼爾森十大可用性原則第一條，系統(tǒng)可見性原則，保持界面的狀態(tài)可見，變化可見，內(nèi)容可見。讓用戶知道發(fā)生了什么，在適當(dāng)?shù)臅r間內(nèi)做出適當(dāng)?shù)姆答仭?
尼爾森十大可用性原則第五條，防錯原則，比出現(xiàn)錯誤信息才提示更好的，是通過更用心的設(shè)計來防止這類問題發(fā)生。在用戶選擇動作發(fā)生之前，就要防止用戶混淆或者錯誤選擇。對產(chǎn)品進行不同的操作、重組或特別安排，防止用戶出錯。
2. UI中國
UI中國的文章編輯器，雖然不支持從騰訊文檔、飛書文檔直接復(fù)制過去的格式，但編輯器設(shè)計得非常清爽，給用戶的第一印象非常好。但是，就在用戶開開心心準備發(fā)布一篇精心準備的文章時候，噩夢來了。
UI中國的服務(wù)器非常不穩(wěn)定，所以當(dāng)用戶上傳圖片的時候，圖片的加載進度特別慢。其實慢一點也能接受，但是當(dāng)進度條達到100%以后，圖片始終還是無法載入，有時候需要等幾秒，有時候等10幾秒最后換回來的一串錯誤代碼——Error during file upload。這個時候用戶還有耐心，也許就是服務(wù)器偶然發(fā)生故障，于是再次重新上傳，但收到的還是同樣的結(jié)果。
為了解決這個問題，我以為是圖片的尺寸或大小出現(xiàn)了問題，但經(jīng)過查閱，并無任何問題，完全是官方的尺寸規(guī)范以內(nèi)。最后通過數(shù)次的嘗試，我總算摸到一點點規(guī)律，當(dāng)一張圖片反復(fù)上傳出現(xiàn)亂碼的時候，那就先去傳其他的圖片，最后再返回上傳這張圖片，運氣好的時候就解決了，運氣不好的話，你就休息一下再來上傳。我只能感慨自己實在太聰明了。
從UI中國的編輯器可以看出，他們和站酷一樣，違反了尼爾森十大原則的第五條原則，防錯原則。在用戶上傳圖片出現(xiàn)錯誤以后，并沒有給用戶及時的中文提示（99%的設(shè)計師看不懂Error during file upload這串英文代碼，毫無意義），導(dǎo)致用戶在使用過程中產(chǎn)生焦躁、憤怒的情緒，浪費了無數(shù)寶貴的時間。
3. 微信公眾號
微信公眾號是知識創(chuàng)作者最常用的工具了，但事實上對于新手來說，它的設(shè)計非常不友好。我還想起當(dāng)我第一次操作公眾號發(fā)布文章的時候，當(dāng)我把內(nèi)容都編輯好以后，我找不到「發(fā)布」的按鈕。我很難理解「群發(fā)」的功能，特別是當(dāng)我在下拉列表發(fā)現(xiàn)竟然還藏著一個「發(fā)布」按鈕，我以為那就是發(fā)布。但當(dāng)我開開心心準備分享我的推文時候，我在自己的公眾號卻怎么也找不到這篇文章。
最后我只能重新編輯一次，但問題還是沒有解決。群發(fā)到底是什么意思？當(dāng)我點擊以后「群發(fā)」以后，又出現(xiàn)了群發(fā)、定時群發(fā)和分組群發(fā)的按鈕，我實在難以理解這幾個按鈕有什么不同，我現(xiàn)在又應(yīng)該選擇什么。我猶豫不定，害怕犯錯，又不知道如何解決，最后只能求助朋友。
微信公眾號在「發(fā)布文章」這個環(huán)節(jié)的設(shè)計，完全違背了交互心理學(xué)上的席克定律，給用戶太多、不清晰的選擇，增加了用戶的學(xué)習(xí)和消耗成本，對于公眾號新手來說，簡直就是一次噩夢。其次也違背了尼爾森十大原則的第十條，人性化幫助原則，沒有給新手解釋清楚「群發(fā)」和「發(fā)布」的區(qū)別，也沒有對核心功能做出對應(yīng)的文字解釋，讓用戶在操作的過程中產(chǎn)生數(shù)次焦躁，最終只能求助于他人。
拓展閱讀：
席克定律是指人的信息傳遞時間與刺激的平均信息量之間呈線性關(guān)系。簡單一點我們可以理解為：人面臨越多的選擇，所要消耗的時間成本越高。
尼爾森十大原則第十條，人性化幫助原則，幫助性提示最好的方式是：①無需提示；②一次性提示；③常駐提示；④幫助文檔。
4. 脈脈
脈脈作為擁有1.1億用戶的職場社交獨角獸，為用戶提供的專欄編輯器，用戶體驗差到讓人絕望。
脈脈使用的編輯器，屬于十年前最早一批的編輯器，不管是功能還是樣式，都非常掉身價，和他們的品牌調(diào)性不匹配。它們不支持從騰訊文檔、飛書復(fù)制過去的文章（Markdown格式），所以我每次都需要調(diào)整格式才能和源文檔格式一致，極大增加了編輯成本。這也是我最后放棄脈脈更新的原因，他們流失了一個內(nèi)容創(chuàng)作者。
在用戶上傳圖片以后，他們沒有做自適應(yīng)配置，整個編輯器無法看到圖片的完整內(nèi)容，用戶根本不知道自己上傳的圖片是否正確。更糟糕的是，當(dāng)你想等比例調(diào)整圖片的大小，圖片就完全扭曲，讓用戶進一步崩潰。
點擊上傳圖片以后，還需要用戶點擊「上傳」，才能真正實現(xiàn)圖片上傳，增加了用戶的操作步驟。其次已上傳的圖片不能取消選中，如果想要取消當(dāng)前圖片，只能再次上傳一次圖片。
最糟糕的是，文章竟然不支持自動或手動保存，想象一下當(dāng)你花費了1個小時好不容易編輯好的文章，最后因為不小心關(guān)閉瀏覽器導(dǎo)致文章丟失了，這就是使人憤怒的設(shè)計，這幾乎把用戶使用的欲望徹底剿滅了，永遠不會再回來。
脈脈的編輯器設(shè)計，嚴重違反了尼爾森十大原則中的多條原則，比如撤銷重做原則、防錯原則、容錯原則等，可以說是非常糟糕的設(shè)計，這樣的編輯器幾乎可以毀滅任何一個內(nèi)容創(chuàng)作者的心情。
拓展閱讀：
尼爾森十大可用性原則第三條，撤銷重做原則，給用戶更多自主操作權(quán)，當(dāng)用戶在使用產(chǎn)品過程中產(chǎn)生錯誤的操作時，應(yīng)提供更多的解決方案，例如撤銷或重做等功能。
尼爾森十大可用性原則第九條，容錯原則，幫助用戶從錯誤中恢復(fù)，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導(dǎo)方向，而非代碼如404等。
5. 135編輯器
135編輯器作為國內(nèi)最大的編輯器頭部產(chǎn)品，他們幾乎把編輯器可能有的功能都設(shè)計了，比如導(dǎo)入文章、語音合成、模版、一鍵排版等等。但是這個功能如此豐富的編輯器給新用戶的體驗則留下糟糕的印象。
135編輯器的功能非常強大，這就像一個2003年半的Word辦公軟件，一眼望去，都是數(shù)不清的功能。這樣的設(shè)計導(dǎo)致了新手不知道如何開始，他們的按鈕權(quán)重幾乎都一樣，比如新建、關(guān)閉、導(dǎo)入、微信復(fù)制等等，沒有重點突出核心功能。
人在操作軟件時候的記憶屬于短期記憶，一般只會保留5-7秒，這便是心理學(xué)上最出名的7±2效應(yīng)。在新手首次使用該軟件的時候，面對幾十上百個的功能，根本不知道如何下手。用戶需要學(xué)習(xí)的成本非常高，甚至當(dāng)你編輯好文章以后，你都不知道如何把文章同步到微信公眾號，因為「微信復(fù)制」這個按鈕沒有重點突出，從字面意思也無法獲取真正的意思。這也違背了人類運動的預(yù)測模型費茨定律，如果你想小孩子也簡單輕松的能關(guān)掉房屋的開關(guān)，那么你的開關(guān)就應(yīng)該大一點，明顯一點。
其次過度商業(yè)化把這款編輯器的用戶體驗毀滅了，幾乎80%的功能都需要加入VIP會員，然后你需要反復(fù)關(guān)閉窗口，操作路徑變得又長又繁瑣。試問，一個新用戶在使用一款陌生的編輯器的時候，需要關(guān)閉幾十次廣告，你覺得他還有耐心去使用嗎？
拓展閱讀：
7±2效應(yīng)就是指人的短期記憶容量在7±2的數(shù)量之間浮動，也就是說，用戶最多同時處理5～9個信息。
費茨定律是人類運動的預(yù)測模型，主要用于人機交互和人體工程學(xué)。該定律預(yù)測光標或手指從一個起始位置移動到最終目標所需的時間（T）由兩個參數(shù)決定，即光標或手指到目標的距離（D）和目標的大小（W）。
6. 國內(nèi)某知名CMS系統(tǒng)
這是一個國內(nèi)非常出名的開源CMS系統(tǒng)，目前已停止更新維護，不過國內(nèi)的企業(yè)網(wǎng)站估計有50%都是基于這個系統(tǒng)搭建。做過外包設(shè)計的朋友都知道，經(jīng)常會聽見客戶說系統(tǒng)難用，那么為什么難用，我們先來看看這些商業(yè)項目中管理后臺的編輯器有多糟糕。
點擊添加內(nèi)容后，直接跳轉(zhuǎn)到一個新窗口，這個新窗口還把當(dāng)前屏幕都遮住了，這不得不讓用戶需要把這個窗口縮小才能復(fù)制內(nèi)容。這個設(shè)計最讓人頭疼的是當(dāng)你的桌面應(yīng)用打開過多時候，你根本不知道這個內(nèi)容窗口在哪里，讓人感到無比焦躁。
編輯器的的樣式、功能就幾乎可以忽略不計了，因為這畢竟是一款開源的系統(tǒng)，而且官方都已經(jīng)停止更新了。如果你從騰訊、飛書文檔直接復(fù)制內(nèi)容進去，文本格式就是錯亂的，這和脈脈一樣，這幾乎需要在編輯器里重新調(diào)整格式才行，這嚴重提升了用戶的使用成本。這對于很多兼職為公司負責(zé)更新網(wǎng)站的用戶來說，簡直就是一場災(zāi)難。過去有太多次用戶對編輯器的問題提出了很多次，包括不懂使用、增加功能等，總之，這些開源系統(tǒng)的編輯器，對很多用戶來說就是一場噩夢。
通過數(shù)款大廠產(chǎn)品的體驗總結(jié)，我們發(fā)現(xiàn)，對于文章編輯器這個非?；A(chǔ)但又必不可少的功能，其實帶給用戶的體驗非常糟糕。類似的糟糕體驗，其實還數(shù)不勝數(shù)，我們這一期就不再展開。最后我們對此次的體驗陷阱做一個簡單的總結(jié)。
我認為，造成如此糟糕的編輯器體驗的原因有兩個，第一個，大部分的產(chǎn)品團隊完全不重視編輯器這個功能。在很多產(chǎn)品、設(shè)計，包含程序工程師看來，這就是一個非常基礎(chǔ)簡單的功能，所以他們對編輯器非常輕視，也許開發(fā)出來的產(chǎn)品團隊自己都沒有親身測試發(fā)布過，才會導(dǎo)致有如此多明顯、讓人憤怒的BUG。然而他們根本不知道這樣的設(shè)計對用戶的實際體驗影響有多么糟糕。
第二個，產(chǎn)品團隊完全沒有遵循最基礎(chǔ)的設(shè)計原則意識。國內(nèi)大部分產(chǎn)品設(shè)計師對設(shè)計基礎(chǔ)原則、理論都非常忽視，甚至覺得這些純理論的指導(dǎo)原則毫無意義。這也是設(shè)計這門學(xué)科在國內(nèi)發(fā)展的真實寫照，但我們從這些體驗陷阱可以看出，一個沒有遵循設(shè)計基礎(chǔ)原則的產(chǎn)品，體驗下來，是多么的糟糕，多么的讓人絕望。
藍藍設(shè)計( yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://yvirxh.cn