UI設計的錯誤&異常狀態(上)

jielin designer
Mar 16, 2021

--

“本篇適合UI/UX設計師讀者們參考目前正在規劃&經營的產品,是否有遺漏掉的“非理想狀態下”會發生的錯誤&異常狀態,並且如何包裝這些狀態降低使用體驗上的不適感

相信各位設計師在執行UI/UX設計的過程中我們都會比較專注在“理想狀態下”用戶會怎麼使用我們的核心功能,但很多時候我們根本無法避免外在因素的干涉與用戶的誤操作所導致的其他異常狀態,舉個例:用戶坐火車剛好進入到山洞導致突然網路無法使用了。若沒有特別針對“錯誤狀態”做UI設計處理,結果就是讓用戶不知所措的卡在原地 (最慘還會閃退)。

而好的異常狀態設計可以引導用戶如何解決問題,若無法解決至少也要讓用戶知道錯誤的原因是什麼。本篇也因為內容較多所以拆分為:(上)篇-較為常見的異常狀態/(下)篇-較針對產品屬性的異常狀態

7個較為常見的異常狀態與解決辦法。

  • 尚未給予使用權限
  • 網路連線異常
  • 資料載入失敗
  • 空白狀態
  • 搜尋無結果
  • 操作錯誤
  • 伺服器異常

尚未給予使用權限

發生場景:用戶尚未給予相機、相簿、麥克風等…使用權限

這在工具類型的產品尤為常見,例如拍照類型的App,若用戶沒有允許App使用相機、相簿等…這些使用權限,那麼用戶將無法正常使用這類型產品。

建議:

  • 我們可以在用戶點擊有需要使用權限的相關功能時,先行提示此功能會需要用到哪些使用權限,讓用戶有個心理預期。
  • 當用戶不允許使用系統權限時,可透過彈窗告知用戶需要開啟權限才可正常使用,同時說明如何允許使用權限。
  • 若是用戶誤點或不允許使用,導入權線申請頁面,並提供前往設置的按鈕引導他們前往設定開啟。

2.網路連線異常

發生場景:用戶的網路連線出現異常

用戶的WiFi或網路突然不穩定導致網路連線異常的狀態,數據將無法正常的上傳&下載導致產品無法正常使用。另外可能是用戶不小心關閉了WiFi或者打開了飛航模式所造成的網路連線異常。

建議:

  • 可以使用Tips提示用戶當前的網路連線有問題,或者透過用戶點擊某些需要用到網路的功能時,跳出Toast提示目前網路異常,並引導用戶可以去使用不需網路的功能。
  • 就算網路異常,依然還是可以保留用戶最後一次的瀏覽資料內容(本地暫存),不要只有網路異常的錯誤狀態。
  • 若是因為用戶自行關閉Wi-Fi或是使用飛航模式,則可以跳出Alert引導用戶前往設定並開啟網路。

3.資料載入失敗

發生場景:用戶無法載入任何產品內容資訊

這會分為兩個狀況,一個是在App從伺服器下載數據,在載入資料的過程中如果用戶網路不穩定,則會造成載入失敗。第二個是伺服器異常導致資料無法下載,因而造成了載入失敗。

建議:

載入失敗時可以提供用戶“重試”按鈕,再次向伺服器下載數據,若還是失敗2–3次可使用Toast提示伺服器異常,請稍候再試。

4.空白狀態

發生場景:用戶尚未新增任何內容的”空白“頁面

像是影音串流平台的“我的最愛”,或是電商的“購物車”,甚至是雲端空間的“新資料夾”,在初次使用時都是尚無任何內容的空白狀態

建議:

  • 在空白頁的狀態下,我們可以透過提示性語言告知用戶如何操作
  • 我們也可以加入引導按鈕,引導用戶執行相關內容的新增操作。

5.搜尋無結果

發生場景:搜尋不到任何與關鍵字相符的內容

不同於剛提到的”空白“狀態,當用戶輸入關鍵字進行搜尋後,沒有找到任何與關鍵字相符的”無結果“狀態。

建議:

當用戶搜尋不到任何與關鍵字有關的資料,可以置入官方推薦或是站內用戶都在搜尋的內容。

6.操作錯誤

發生場景:需要按照某些步驟或規則才可完成使用的功能

最常見的操作錯誤情境,莫過於用戶註冊帳戶時,需要填寫一些必要的資料與設置符合條件的密碼,有些產品甚至會硬性規定至少要有多少字元、字數、符號、大小寫…等。

建議:

我們可以在用戶輸入完成某個欄位資料時,就立即給予訊息回饋,提示用戶目前的操作是否正確或者哪裡待改進,省掉用戶點擊確定後才發現操作錯誤,還得回頭去找哪些地方出了差錯,因而產生體驗上的挫敗感。

7.伺服器異常

發生場景:產品的伺服器發生異常,無法正常上傳/下載內容

雖然是低概率發生,但亞馬遜AWS雲端服務也發生過大當機。當發生伺服器異常時,會導致存放在伺服器上的資料內容無法被產品正常下載&讀取,以致於讓用戶無法正常瀏覽產品內容。(不需從伺服器下載數據的產品除外)

建議:

可以即時跳出Toast或Alert明確告知用戶伺服器異常,請稍後再試的系統通知。

小結

以上就是極為常見的7個錯誤&異常狀態介紹和如何應對的解決方式。建議讀者們在設計UI時一定要把以上提到的錯誤狀態也列入設計範圍內唷!

感謝你們的瀏覽閱讀,如果你覺得這篇文章寫得不錯並且有幫助到你,希望你能給我一點「拍手鼓勵」,也歡迎在下方留言讓我知道你的想法,我會持續分享更多實用&實戰的經驗方式給你們。

若想隨時掌握最新設計教學可關注我的IG:jielin.designer

拍手小秘訣: 只要將滑鼠(或手指)持續按著不放手掌的icon,就能夠連續拍手囉,試試看吧!

--

--

jielin designer
jielin designer

Written by jielin designer

J designer-UI/UX 產品設計一點通 一個專門打雜的UI/UX 產品設計經理,沒事做一下UI視覺設計、有事就規劃/優化一下產品的用戶體驗。想轉職UI/UX設計師,請關注我或追蹤我的IG:@jielin.designer,瞭解更多UI/UX設計的實用技巧與職場經驗吧!

No responses yet