如何設(shè)計(jì)防止數(shù)據(jù)丟失的刪除按鈕?

翻譯過(guò)程中為適合我們的閱讀習(xí)慣以及個(gè)人的理解,有對(duì)原文進(jìn)行一定的內(nèi)容簡(jiǎn)化和語(yǔ)義修飾,如有不妥歡迎大家根據(jù)官網(wǎng)鏈接進(jìn)行比對(duì)并留言互動(dòng)。 

數(shù)據(jù)丟失是用戶使用計(jì)算機(jī)時(shí)可能遇到的最大意外之一。他們不僅丟失了數(shù)據(jù),還損失了投入的時(shí)間和金錢(qián)。對(duì)于企業(yè)而言,這可能意味著數(shù)百個(gè)工時(shí)和數(shù)千美元的損失。不要讓這種情況發(fā)生在您的用戶身上。 

一項(xiàng)研究發(fā)現(xiàn),人為錯(cuò)誤導(dǎo)致30%的數(shù)據(jù)丟失。這意味著良好的用戶體驗(yàn)設(shè)計(jì)可以防止這些意外發(fā)生。以下是一些預(yù)防技巧。 



在確認(rèn)操作中使用紅色警告信號(hào) 

當(dāng)用戶按下刪除按鈕時(shí),請(qǐng)勿立即執(zhí)行,有可能是用戶誤點(diǎn)擊了按鈕,您需提示用戶通過(guò)確認(rèn)頁(yè)面確認(rèn)操作。

刪除按鈕請(qǐng)勿使用如藍(lán)色等常規(guī)顏色。應(yīng)使用紅色按鈕警示用戶即將觸發(fā)危險(xiǎn)性操作。紅色具有很強(qiáng)的視覺(jué)警告提示,因其更容易吸引用戶注意力。 


1.jpg

避免正常操作使用紅色按鈕,否則即為告警用戶。保留紅色按鈕僅用作刪除操作。冷色更適合使用于正常的行為呼叫按鈕,因?yàn)槠渚咀饔幂^弱。 

雖然紅色按鈕能警示大部分用戶,但是有些用戶也許會(huì)忽視。額外的視覺(jué)提示,能增加警示作用。尤其是有助于無(wú)法區(qū)分色差的色盲和弱視用戶群。 

2.jpg

若要加強(qiáng)警告信號(hào),請(qǐng)?jiān)诖_認(rèn)屏幕上添加代表刪除操作的圖標(biāo)。例如,用戶熟悉的刪除圖標(biāo)是垃圾桶。當(dāng)用戶看到圖標(biāo)時(shí),他們會(huì)將當(dāng)前操作與刪除相關(guān)聯(lián)。 

您可以通過(guò)在屏幕頂部添加紅色條塊來(lái)加強(qiáng)警告信號(hào)?,F(xiàn)在此確認(rèn)頁(yè)面,用戶可以看到三個(gè)紅色警告信號(hào),表明他們即將進(jìn)行危險(xiǎn)性操作。這使用戶更加注意他們的行為和處境,以防按錯(cuò)按鈕。 



UX效益--打破慣性點(diǎn)擊 

用戶使用移動(dòng)應(yīng)用程序次數(shù)越多,他們?cè)接锌赡莛B(yǎng)成慣性點(diǎn)擊的習(xí)慣。無(wú)意識(shí)慣性點(diǎn)擊可以更快更容易完成任務(wù),但也更容易點(diǎn)擊刪除按鈕。 

3.jpg

紅色通常與警告和危險(xiǎn)有聯(lián)系,并且具有負(fù)面含義。我們??吹皆S多用紅色來(lái)傳達(dá)警告和危險(xiǎn)的標(biāo)志。在設(shè)計(jì)中,紅色按鈕會(huì)引起用戶對(duì)傷害或損失的恐懼,以防止錯(cuò)誤。這是人類(lèi)為了生存而躲避危險(xiǎn)的本能。 

研究表明,紅色物體會(huì)引起注意并促進(jìn)一致的運(yùn)動(dòng)反應(yīng)。這意味著,當(dāng)用戶看到紅色的刪除按鈕時(shí),他們可能會(huì)更快、更準(zhǔn)確地做出響應(yīng)。用戶對(duì)任務(wù)的關(guān)注越多,他們就會(huì)越好的執(zhí)行該任務(wù)。 



簡(jiǎn)潔的會(huì)話窗文本 

紅色警告信號(hào)可以防止刪除意外,但這不是您須考慮的唯一事項(xiàng)。您還需編寫(xiě)簡(jiǎn)潔的會(huì)話文本來(lái)確保其易于瀏覽。 

4.jpg

在會(huì)話窗標(biāo)題的末尾添加問(wèn)號(hào)來(lái)替代詢(xún)問(wèn)用戶“您確定要?jiǎng)h除嗎?”。例如,標(biāo)題為“刪除帳戶?”,用較少的字詞表示“您確定要?jiǎng)h除帳戶嗎?”。 

不僅如此,不要使用冗長(zhǎng)的句子來(lái)解釋點(diǎn)擊確認(rèn)后會(huì)發(fā)生什么。以列表格式列出他們將丟失的內(nèi)容,來(lái)替代通知用戶,“如果您刪除了自己的帳戶,則會(huì)永久丟失您的個(gè)人資料,消息和照片”,以便用戶快速閱覽。 

在該示例中,會(huì)話窗文本通過(guò)從25個(gè)單詞減少到僅9個(gè)單詞來(lái)簡(jiǎn)化。使得會(huì)話窗更容易瀏覽和理解。 



UX效益 - 更好地理解后果 

確認(rèn)對(duì)話框的目的是描述刪除操作的后果。用戶需要閱讀并理解這些,否則他們可能會(huì)得到意想不到的結(jié)果。但在冗長(zhǎng)的對(duì)話中很難做到這一點(diǎn)。 

大多數(shù)用戶會(huì)跳過(guò)冗長(zhǎng)的文字,因?yàn)殚喿x需要花費(fèi)時(shí)間和精力。簡(jiǎn)潔的文本可以防止用戶跳過(guò),幫助用戶更快地執(zhí)行任務(wù),減少錯(cuò)誤,并記住更多信息。使用簡(jiǎn)潔的對(duì)話文本,用戶可以更好地理解其行為的后果并做出正確的決定。 



居中對(duì)齊布局 

簡(jiǎn)潔的文本使其容易瀏覽。但你還可以通過(guò)中心對(duì)齊布局使整個(gè)會(huì)話窗更進(jìn)一步加強(qiáng)其易讀性。中心對(duì)齊布局將圖標(biāo)與會(huì)話窗文本對(duì)齊,以便用戶可以同時(shí)瀏覽。還使會(huì)話窗對(duì)稱(chēng),圖標(biāo)更加突出,以防遮擋。 

5.jpg



UX效益 - 減少視覺(jué)工作 

當(dāng)使用視覺(jué)追蹤圖觀察一個(gè)左對(duì)齊布局和冗長(zhǎng)的文本會(huì)話窗時(shí),會(huì)發(fā)現(xiàn)有更多的注視點(diǎn)和更長(zhǎng)的瀏覽路徑。簡(jiǎn)潔的會(huì)話窗和中心對(duì)齊的布局只需較少的視覺(jué)工作。通過(guò)更少的注視點(diǎn)和更短的瀏覽路徑,用戶可以更快地瀏覽屏幕以做出明智的決定。 

6.jpg

中心對(duì)齊布局可讓用戶以單一視覺(jué)方向(從上到下)瀏覽屏幕。他們不需要移動(dòng)眼睛來(lái)瀏覽屏幕,只需要專(zhuān)注于屏幕的中心。使用左對(duì)齊布局,用戶需要以?xún)蓚€(gè)可視方向(從左到右和從右到左)瀏覽屏幕。用戶的眼睛需要做更多的工作,從而降低任務(wù)的完成效率。



確認(rèn)保留紅色警告信號(hào) 

當(dāng)刪除按鈕出現(xiàn)在確認(rèn)頁(yè)面上時(shí),您希望用戶全神貫注。相反,當(dāng)刪除按鈕未出現(xiàn)時(shí),您不希望引起用戶對(duì)它的注意。這樣做會(huì)使用戶無(wú)意點(diǎn)擊時(shí)誤點(diǎn)刪除按鈕 

7.jpg

如果刪除按鈕不在確認(rèn)頁(yè)面上時(shí),請(qǐng)勿使用紅色警告信號(hào)。例如,設(shè)置頁(yè)面可以有一個(gè)“刪除帳戶”按鈕,但它不需像呼叫行為按鈕來(lái)吸引不必要的注意。 

最好將刪除按鈕設(shè)為僅帶有紅色文本標(biāo)簽的獨(dú)立按鈕。使用過(guò)多的紅色會(huì)導(dǎo)致用戶將其誤認(rèn)為是屏幕上的主呼叫行為按鈕。



UX效益 - 增加意外發(fā)生難度 

 用戶在確認(rèn)頁(yè)面上的停留時(shí)間越多,他們按錯(cuò)按鈕的可能性就越大。通過(guò)思考其他屏幕上的刪除按鈕,用戶不太可能意外進(jìn)入確認(rèn)頁(yè)面。這使得他們遠(yuǎn)離危險(xiǎn)。 

在其他頁(yè)面上將刪除按鈕與正常按鈕分開(kāi)也可以使用戶遠(yuǎn)離危險(xiǎn)。用戶不會(huì)將其誤認(rèn)為是正常的號(hào)召性按鈕并想按下它。 



提供撤消按鈕 

即使有確認(rèn)屏幕,意外仍然可能發(fā)生。有些用戶仍然可能誤讀了會(huì)話窗或按錯(cuò)了按鈕。在確認(rèn)屏幕之后,向用戶提供撤消按鈕,其中包含告知用戶已執(zhí)行操作的消息。 

8.jpg

將撤消按鈕和完成消息放在屏幕底部的通知橫幅中。您可以根據(jù)刪錯(cuò)操作的上下文使撤消按鈕成為臨時(shí)或持久的。 

臨時(shí)撤消將使橫幅在幾秒鐘后自動(dòng)消失。持久撤消顯示橫幅,直到用戶通過(guò)按“關(guān)閉”按鈕關(guān)閉橫幅。請(qǐng)注意,持久性撤消的技術(shù)實(shí)現(xiàn)比臨時(shí)撤消更復(fù)雜。 



UX效益 - 允許用戶從事故中恢復(fù)操作 

撤消刪除操作的選項(xiàng)允許用戶從事故中恢復(fù)操作以防止數(shù)據(jù)丟失。數(shù)據(jù)丟失對(duì)企業(yè)和人們的生活造成嚴(yán)重后果。發(fā)布確認(rèn)撤消按鈕不僅可以保存用戶的數(shù)據(jù),還可以保存用戶的工作。 



提示用戶點(diǎn)擊確認(rèn) 

如果撤消按鈕不是可選項(xiàng),則可以提示用戶在文本框中輸入刪除以確認(rèn)。提示用戶輸入確認(rèn)使他們意識(shí)到刪除行為。雖然容易意外按錯(cuò)按鈕,但是不可能輸入意外出錯(cuò),因?yàn)榇瞬僮餍枰芏嗖襟E。 

9.jpg

此方法對(duì)于用戶經(jīng)常使用刪除操作的效率不高。例如,刪除帖子是社交媒體應(yīng)用上的常見(jiàn)操作。若要求用戶每次通過(guò)輸入來(lái)確認(rèn)將大大降低用戶操作效率。僅用于類(lèi)型罕見(jiàn)的刪除操作。 



UX效益 - 確保用戶確認(rèn)意識(shí) 

無(wú)意識(shí)地按下按鈕比輸入單詞要容易得多。當(dāng)用戶輸入時(shí),他們必須考慮他們正在輸入的內(nèi)容然后點(diǎn)擊右邊的確認(rèn)按鈕。與按下按鈕相比,出錯(cuò)空間更大。這使用戶意識(shí)到他們的確認(rèn)行為,以防止意外按下按鈕。 



數(shù)據(jù)丟失意外 

當(dāng)用戶進(jìn)入確認(rèn)屏幕時(shí),他們處于意外發(fā)生的邊緣。如果您沒(méi)有采取措施防止這種情況發(fā)生,按錯(cuò)了按鈕可能會(huì)損壞數(shù)據(jù)。將這些方法應(yīng)用到您的應(yīng)用中,將避免用戶遇到數(shù)據(jù)丟失意外。 





作者:anthony 

譯者:黎沫limo

原文:https://uxmovement.com/buttons/how-to-design-destructive-actions-that-prevent-data-loss/

每天更新,
全站高品質(zhì)素材免費(fèi)下載!