當(dāng)我們使用APP或者瀏覽網(wǎng)站時,總會有的時候需要進(jìn)行一些操作。而在APP開發(fā)、產(chǎn)品開發(fā)或者廣州網(wǎng)站建設(shè)時都需考慮到用戶操作失當(dāng)時的反饋。當(dāng)用戶操作失誤時,網(wǎng)頁設(shè)計師會設(shè)置一個反饋頁面告知用戶操作失誤的信息,指引用戶進(jìn)行正確的操作。而通常網(wǎng)頁設(shè)計師在反饋信息的表現(xiàn)形式是很多種的,例如警示框,又或者toast等等。今天,訊博網(wǎng)絡(luò)的網(wǎng)頁設(shè)計師就通過幾個例子給大家推敲一下再反饋信息樣式的使用背后的一些設(shè)計邏輯。
微信給對方發(fā)送圖片時,微信限制只能發(fā)送九張。當(dāng)用戶選擇了九張時,用戶再次選擇時,會提示用戶最多只能選擇九張。對此iOS版使用的是警示框,Android版使用的是toast。
關(guān)于為什么iOS 版本用警示框,Android 版本用toast的背后設(shè)計邏輯?這里有我的一個猜測:①微信iOS版,當(dāng)用戶選擇了 9 張時,再次選擇第 10 張,給出強(qiáng)阻斷的警示框,用戶需要點(diǎn)擊警示框中的按鈕操作。這個過程加強(qiáng)了用戶的記憶和操作成本,有了之前的強(qiáng)提示,用戶下次選擇超過 9 張有印象,避免用戶再次犯錯。②微信Android版,當(dāng)用戶選擇了 9 張時,再次選擇第 10 張,給出較輕量的toast。這個過程是在減輕用戶犯錯的成本。方便了用戶當(dāng)前操作,卻沒有防止用戶以后犯錯。
針對iOS 和Android版微信的選擇圖片場景,打一個不恰當(dāng)?shù)谋确剑杭议L針對自己的小孩(用戶)犯錯。iOS版的家長選擇在犯錯的時,進(jìn)行比較重的教育,讓孩子記憶和影響加深,使其改正行為,防止以后再次犯錯誤。而Android版的家長進(jìn)行比較輕的教育僅僅提供提示,用戶的犯錯成本較低,無強(qiáng)烈感知,未起到以后的防錯的作用。
至于微信為什么限定只能最多選擇九張。我猜測是為了遵從朋友圈動態(tài)九張圖。因?yàn)榕笥讶θ绻幌薅ǖ脑?,用戶惡意平鋪很多張,對別人瀏覽朋友圈的話是一種信息噪音。同時九宮格是一種和諧的視圖模式。同理微信對話發(fā)圖片也統(tǒng)一了規(guī)則,這樣也同時避免對方惡意大批量的發(fā)圖片。
以登錄賬號密碼不匹配為例,進(jìn)一步分析設(shè)計背后的邏輯與意圖
用戶使用App進(jìn)行登錄時,當(dāng)賬號密碼不匹配,會出現(xiàn)錯誤提示。目前市面上的提示有三種。分別為警示框、toast和對象內(nèi)嵌。
首先說下使用場景,登錄賬號屬于超低頻的操作?,F(xiàn)在app都將退出賬號的路徑做的比較深,以此減少用戶退出賬號。這樣的好處是可以讓用戶更方便的體驗(yàn)產(chǎn)品,增加產(chǎn)品的使用時長和使用深度。而且現(xiàn)在絕大部分用戶已經(jīng)沒有退出賬號的習(xí)慣了。
1.警示框
微信、QQ、Instagram在登錄賬號密碼不匹配時,使用的都是警示框。需要用戶點(diǎn)擊警示框按鈕才可以再次輸入。強(qiáng)制性操作。
我之前想過這樣做的作用是否為了安全,通過點(diǎn)擊警示框按鈕,提高操作門檻使得盜號者大規(guī)模破解運(yùn)算猜密碼。再仔細(xì)一想這個猜測不合理。設(shè)計者可以通過限制登錄來保證安全性。例如用戶輸入密碼錯誤五次開始限制五分鐘后再輸入。
那么為什么微信、QQ、Instagram體量龐大的App使用彈框提示呢?可能原因有兩點(diǎn):
1.登陸是超低頻操作,一年都登陸不了兩次,所以警示框這個組件對用戶來說影響基本可以忽略。
2.toast
toast為短暫的提示性組件,當(dāng)用戶點(diǎn)擊登錄時,提交給系統(tǒng),系統(tǒng)發(fā)現(xiàn)賬號密碼不匹配,通過toast提示告知用戶,一般停留1-2s,之后消失。屬于輕量級提示。
2.賬號密碼不匹配對于用戶來說是一件很重要的事情,所以使用警示框去強(qiáng)烈提示用戶。
警示框?yàn)樽钄嗍讲僮?,屬于?qiáng)提示。告知用戶賬號密碼不匹配,用戶需要點(diǎn)擊警示框上的按鈕才能重新輸入賬號或密碼。
京東、UC瀏覽器、貓眼在登錄賬號密碼不匹配時,使用的都是toast提示。通過一個輕量的反饋?zhàn)層脩糁赖卿浭〉脑?。用戶不需要任何操作,可以繼續(xù)在輸入框里填寫。方便用戶當(dāng)前操作。
那么為什么京東、QQ、UC瀏覽器、貓眼等App使用toast呢?因?yàn)樵谔崾居脩翦e誤反饋的同時也方便用戶去操作。所以使用toast看似是一個很好的選擇。
3.對象內(nèi)嵌
當(dāng)用戶點(diǎn)擊登錄時,提交給系統(tǒng),發(fā)現(xiàn)賬號密碼不匹配,系統(tǒng)通過在界面中內(nèi)嵌文字提示告知用戶,此提示一般提示為帶警惕性顏色(紅色)的醒目文字。屬于更輕量級提示。
用戶輸入賬號密碼時,點(diǎn)擊登錄,數(shù)據(jù)返回到服務(wù)器。服務(wù)器可以做以下兩種判斷:
1.賬號不存在的話,給出對應(yīng)賬號不存在提示。
2.賬號存在的話,賬號是否和密碼匹配。如果不匹配的話,給出對應(yīng)提示。
Chrome瀏覽器、百度網(wǎng)盤在登錄賬號密碼不匹配時,使用的都是對象內(nèi)嵌的方式。通過界面中的文字反饋?zhàn)層脩糁赖卿浭〉脑?。用戶可以繼續(xù)在輸入框里填寫。對象內(nèi)嵌強(qiáng)烈程度更低,對用戶的干擾更弱同時拓展性更好,可以在界面內(nèi)添加大量的信息。
對象內(nèi)嵌適用于信息小布局簡單的界面。例如Chrome瀏覽器、百度網(wǎng)盤的登錄界面就信息小布局簡單。信息量大的布局復(fù)雜的界面不適合使用對象內(nèi)嵌,如果使用對象內(nèi)嵌的話,提示更弱化,不利于用戶發(fā)現(xiàn)同時原本界面變得更復(fù)雜了。
分析與總結(jié)
以上三個提示類型強(qiáng)烈程度分別為:警示框 > toast > 對象內(nèi)嵌。那么作為設(shè)計師,讓你設(shè)計一些錯誤的提示,你會選擇哪種呢?無論選擇哪種提示,首先說明這里沒有對與錯,只有是否適合你的自我產(chǎn)品的定位和你的設(shè)計觀。如果整個產(chǎn)品考慮更深的是產(chǎn)品邏輯與防錯,可以選擇強(qiáng)制性的警示框。有的設(shè)計者/產(chǎn)品經(jīng)理覺得警示框太強(qiáng)制了。為什么還要用戶去點(diǎn)擊一下,才能再輸入呢。就喜歡采取toast而導(dǎo)致整個產(chǎn)品很多都是toast,過多的toast,用戶習(xí)慣之后很容易忽略掉toast的提示語,未起到真正的防錯和提示,有時候適度顯得更重要。而對象內(nèi)嵌,則更為輕量。而且擴(kuò)展性強(qiáng),可以承載更多的信息。對于需要考慮拓展性和免打擾用戶來說是不錯的設(shè)計選擇。