如何設(shè)計(jì)刪除按鈕,防止數(shù)據(jù)丟失
本文總結(jié)了幾點(diǎn)刪除按鈕的設(shè)計(jì)技巧,以防止誤操作導(dǎo)致防止數(shù)據(jù)丟失。enjoy~
數(shù)據(jù)丟失是用戶使用計(jì)算機(jī)時可能遇到的最大意外之一。他們不僅丟失了數(shù)據(jù),還損失了投入的時間和金錢。對于企業(yè)而言,這可能意味著數(shù)百個工時和數(shù)千美元的損失。不要讓這種情況發(fā)生在您的用戶身上。
一項(xiàng)研究發(fā)現(xiàn),人為錯誤導(dǎo)致30%的數(shù)據(jù)丟失。這意味著良好的用戶體驗(yàn)設(shè)計(jì)可以防止這些意外發(fā)生。以下是一些預(yù)防技巧。
在確認(rèn)操作中使用紅色警告信號
當(dāng)用戶按下刪除按鈕時,請勿立即執(zhí)行,有可能是用戶誤點(diǎn)擊了按鈕,您需提示用戶通過確認(rèn)頁面確認(rèn)操作。
刪除按鈕請勿使用如藍(lán)色等常規(guī)顏色。應(yīng)使用紅色按鈕警示用戶即將觸發(fā)危險性操作。紅色具有很強(qiáng)的視覺警告提示,因其更容易吸引用戶注意力。
避免正常操作使用紅色按鈕,否則即為告警用戶。保留紅色按鈕僅用作刪除操作。冷色更適合使用于正常的行為呼叫按鈕,因?yàn)槠渚咀饔幂^弱。
雖然紅色按鈕能警示大部分用戶,但是有些用戶也許會忽視。額外的視覺提示,能增加警示作用。尤其是有助于無法區(qū)分色差的色盲和弱視用戶群。
若要加強(qiáng)警告信號,請?jiān)诖_認(rèn)屏幕上添加代表刪除操作的圖標(biāo)。例如,用戶熟悉的刪除圖標(biāo)是垃圾桶。當(dāng)用戶看到圖標(biāo)時,他們會將當(dāng)前操作與刪除相關(guān)聯(lián)。
您可以通過在屏幕頂部添加紅色條塊來加強(qiáng)警告信號?,F(xiàn)在此確認(rèn)頁面,用戶可以看到三個紅色警告信號,表明他們即將進(jìn)行危險性操作。這使用戶更加注意他們的行為和處境,以防按錯按鈕。
UX效益-打破慣性點(diǎn)擊
用戶使用移動應(yīng)用程序次數(shù)越多,他們越有可能養(yǎng)成慣性點(diǎn)擊的習(xí)慣。無意識慣性點(diǎn)擊可以更快更容易完成任務(wù),但也更容易點(diǎn)擊刪除按鈕。
紅色通常與警告和危險有聯(lián)系,并且具有負(fù)面含義。我們??吹皆S多用紅色來傳達(dá)警告和危險的標(biāo)志。在設(shè)計(jì)中,紅色按鈕會引起用戶對傷害或損失的恐懼,以防止錯誤。這是人類為了生存而躲避危險的本能。
研究表明,紅色物體會引起注意并促進(jìn)一致的運(yùn)動反應(yīng)。這意味著,當(dāng)用戶看到紅色的刪除按鈕時,他們可能會更快、更準(zhǔn)確地做出響應(yīng)。用戶對任務(wù)的關(guān)注越多,他們就會越好的執(zhí)行該任務(wù)。
簡潔的會話窗文本
紅色警告信號可以防止刪除意外,但這不是您須考慮的唯一事項(xiàng)。您還需編寫簡潔的會話文本來確保其易于瀏覽。
在會話窗標(biāo)題的末尾添加問號來替代詢問用戶“您確定要刪除嗎?”。例如,標(biāo)題為“刪除帳戶?”,用較少的字詞表示“您確定要刪除帳戶嗎?”。
不僅如此,不要使用冗長的句子來解釋點(diǎn)擊確認(rèn)后會發(fā)生什么。以列表格式列出他們將丟失的內(nèi)容,來替代通知用戶,“如果您刪除了自己的帳戶,則會永久丟失您的個人資料,消息和照片”,以便用戶快速閱覽。
在該示例中,會話窗文本通過從25個單詞減少到僅9個單詞來簡化。使得會話窗更容易瀏覽和理解。
UX效益–更好地理解后果
確認(rèn)對話框的目的是描述刪除操作的后果。用戶需要閱讀并理解這些,否則他們可能會得到意想不到的結(jié)果。但在冗長的對話中很難做到這一點(diǎn)。
大多數(shù)用戶會跳過冗長的文字,因?yàn)殚喿x需要花費(fèi)時間和精力。簡潔的文本可以防止用戶跳過,幫助用戶更快地執(zhí)行任務(wù),減少錯誤,并記住更多信息。使用簡潔的對話文本,用戶可以更好地理解其行為的后果并做出正確的決定。
居中對齊布局
簡潔的文本使其容易瀏覽。但你還可以通過中心對齊布局使整個會話窗更進(jìn)一步加強(qiáng)其易讀性。中心對齊布局將圖標(biāo)與會話窗文本對齊,以便用戶可以同時瀏覽。還使會話窗對稱,圖標(biāo)更加突出,以防遮擋。
UX效益-減少視覺工作
當(dāng)使用視覺追蹤圖觀察一個左對齊布局和冗長的文本會話窗時,會發(fā)現(xiàn)有更多的注視點(diǎn)和更長的瀏覽路徑。
簡潔的會話窗和中心對齊的布局只需較少的視覺工作。通過更少的注視點(diǎn)和更短的瀏覽路徑,用戶可以更快地瀏覽屏幕以做出明智的決定。
- 中心對齊布局可讓用戶以單一視覺方向(從上到下)瀏覽屏幕。他們不需要移動眼睛來瀏覽屏幕,只需要專注于屏幕的中心。
- 使用左對齊布局,用戶需要以兩個可視方向(從左到右和從右到左)瀏覽屏幕。用戶的眼睛需要做更多的工作,從而降低任務(wù)的完成效率。
確認(rèn)保留紅色警告信號
- 當(dāng)刪除按鈕出現(xiàn)在確認(rèn)頁面上時,您希望用戶全神貫注。
- 相反,當(dāng)刪除按鈕未出現(xiàn)時,您不希望引起用戶對它的注意。這樣做會使用戶無意點(diǎn)擊時誤點(diǎn)刪除按鈕。
如果刪除按鈕不在確認(rèn)頁面上時,請勿使用紅色警告信號。例如,設(shè)置頁面可以有一個“刪除帳戶”按鈕,但它不需像呼叫行為按鈕來吸引不必要的注意。
最好將刪除按鈕設(shè)為僅帶有紅色文本標(biāo)簽的獨(dú)立按鈕。使用過多的紅色會導(dǎo)致用戶將其誤認(rèn)為是屏幕上的主呼叫行為按鈕。
UX效益-增加意外發(fā)生難度
用戶在確認(rèn)頁面上的停留時間越多,他們按錯按鈕的可能性就越大。通過思考其他屏幕上的刪除按鈕,用戶不太可能意外進(jìn)入確認(rèn)頁面。這使得他們遠(yuǎn)離危險。
在其他頁面上將刪除按鈕與正常按鈕分開也可以使用戶遠(yuǎn)離危險。用戶不會將其誤認(rèn)為是正常的號召性按鈕并想按下它。
提供撤消按鈕
即使有確認(rèn)屏幕,意外仍然可能發(fā)生。有些用戶仍然可能誤讀了會話窗或按錯了按鈕。在確認(rèn)屏幕之后,向用戶提供撤消按鈕,其中包含告知用戶已執(zhí)行操作的消息。
將撤消按鈕和完成消息放在屏幕底部的通知橫幅中。您可以根據(jù)刪錯操作的上下文使撤消按鈕成為臨時或持久的。
臨時撤消將使橫幅在幾秒鐘后自動消失。持久撤消顯示橫幅,直到用戶通過按“關(guān)閉”按鈕關(guān)閉橫幅。請注意,持久性撤消的技術(shù)實(shí)現(xiàn)比臨時撤消更復(fù)雜。
UX效益-允許用戶從事故中恢復(fù)操作
撤消刪除操作的選項(xiàng)允許用戶從事故中恢復(fù)操作以防止數(shù)據(jù)丟失。數(shù)據(jù)丟失對企業(yè)和人們的生活造成嚴(yán)重后果。發(fā)布確認(rèn)撤消按鈕不僅可以保存用戶的數(shù)據(jù),還可以保存用戶的工作。
提示用戶點(diǎn)擊確認(rèn)
如果撤消按鈕不是可選項(xiàng),則可以提示用戶在文本框中輸入刪除以確認(rèn)。提示用戶輸入確認(rèn)使他們意識到刪除行為。雖然容易意外按錯按鈕,但是不可能輸入意外出錯,因?yàn)榇瞬僮餍枰芏嗖襟E。
此方法對于用戶經(jīng)常使用刪除操作的效率不高。例如,刪除帖子是社交媒體應(yīng)用上的常見操作。若要求用戶每次通過輸入來確認(rèn)將大大降低用戶操作效率。僅用于類型罕見的刪除操作。
UX效益-確保用戶確認(rèn)意識
無意識地按下按鈕比輸入單詞要容易得多。當(dāng)用戶輸入時,他們必須考慮他們正在輸入的內(nèi)容然后點(diǎn)擊右邊的確認(rèn)按鈕。與按下按鈕相比,出錯空間更大。這使用戶意識到他們的確認(rèn)行為,以防止意外按下按鈕。
數(shù)據(jù)丟失意外
當(dāng)用戶進(jìn)入確認(rèn)屏幕時,他們處于意外發(fā)生的邊緣。如果您沒有采取措施防止這種情況發(fā)生,按錯了按鈕可能會損壞數(shù)據(jù)。將這些方法應(yīng)用到您的應(yīng)用中,將避免用戶遇到數(shù)據(jù)丟失意外。
PS:翻譯過程中為適合我們的閱讀習(xí)慣以及個人的理解,有對原文進(jìn)行一定的內(nèi)容簡化和語義修飾,如有不妥歡迎大家根據(jù)官網(wǎng)鏈接進(jìn)行比對并留言互動。
(本文翻譯已獲得該網(wǎng)站的正式授權(quán))
原文鏈接:https://uxmovement.com/buttons/how-to-design-destructive-actions-that-prevent-data-loss/
原作者:anthony
譯文地址:https://www.zcool.com.cn/article/ZMTAxNzcwMA==.html
編譯作者:黎沫limo
本文由 @黎沫limo 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!