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