前言

原本 Loading 或是 Offline 狀態，如果設計稿沒特別標示，為了從簡，我會放一個 Loading 的 animation 或是跳 Toast 告知用戶操作失敗。很幸運的，後來遇到一位重視 UX 的設計師，一起合作過後，才發現其中的魔鬼細節，開始觀察平常在使用的 APP 或是網站是怎麼處理 Loading 或是 Offline 的。

這篇 Offline UX design guidelines 是當時在搜集資料時看到的一篇文章，也許年代久遠，但裡面列出的準則或是提醒事項很值得看看！

重點

網路連線品質可能會受到以下因素影響：

• 網路覆蓋率較差
• 極端氣候影響
• 建築物室內受到牆壁、家具或是大型電器等物體阻擋訊號
• 搭乘火車穿越隧道時暫時斷訊
• 有時間限制的網路連線，例如：在機場或是飯店

身為開發者，必須考慮以上情境發生時，如何帶給用戶良好的使用體驗

決定要呈現什麽內容給使用者

處理連線失敗前，先思考以下問題：

• 要等待多久時間才能確定連線成功或是失敗
• 如果連線失敗應該做什麽
• 如何告訴用戶目前狀況

1. 告知用戶目前狀態

告知應用程式目前遇到的狀況以及使用者可以採取的動作，例如：You seem to have a bad network connection. Not to worry! Messages will be sent when the network is restored.，明確告知使用者目前無法使用網路連線，不用擔心，連線恢復時，會將訊息送出！

2. 當連線恢復時告知用戶

像是天氣或是股市這些需要取得最新資訊的 APP ，應該要即時告訴用戶目前網路連線狀態，或是在畫面上顯示最近一次更新的時間

3. 將目前狀態反映在 UI 上

每一個 UI 元素都會有負責要呈現內容以及操作行為，例如：離線狀態時，在電商平台上可以瀏覽商品，但價格或是購買按鈕的元件必須呈現 disable 狀態

包容性設計 (Inclusive design experiences)

更友善的未來：淺談包容性設計文章中這麽解釋：

包容性設計(Inclusive)是強調有意識的考量使用群體的「多樣性」，不僅是外顯條件的限制，也將不同群體外在及心理的情境納入考量，比如不同國籍、種族、語言、文化、性別認同，甚至是心理健康狀態、資訊條件以及經濟狀況。包容性設計的精神是由內而外，不斷地向外擴充設計能涵蓋的群體。

簡單、明瞭

UX 不只是設計介面，更要包含用戶操作應用程式會走到的動線。而 UI 元件或是應用程式中顯示的狀態都要避免使用技術用語，盡量保持簡單、並明確告知使用者現在應該做什麽。

使用 skeleton 排版或是其他 feedback 機制

當應用程式載入內容時，必須讓用戶知道目前應用程式正在做載入，而不是程式壞掉。同時也可以避免用戶重複提交或是做不必要的刷新。

心得

越是觀察生活周遭的大家是怎麼使用 APP ，越是深感 Offline 設計的重要性。

像是，裝置螢幕的大小、觸控靈敏度、提醒文字的可讀性、等待畫面的顯示、錯誤操作的下一步指示...等

而除了用桌/手機瀏覽網站、操作 APP 外，也可以在速食店的自助點餐機、捷運自動售票機...等裝置，觀察到廣大的用戶，會發現到不同年齡層、不同文化背景、不同資訊背景...等差異，都會有不一樣的操作行為。

例如：

• 選擇餐點後，但沒有看到下方的下一步按鈕，就一直站在畫面前等待，或是重複點擊已選擇的餐點
• 按下付款後，只看到 Loading icon ，沒有文字說明，用戶不知道當下要做的動作，就關掉網頁

參考資源

更友善的未來：淺談包容性設計