這份指南旨在針對速度緩慢及離線的網路環境設計網路體驗。
本文將提供設計指南,說明如何在較慢的網路和離線狀態下打造絕佳體驗。
網路連線品質可能會受到多種因素影響,例如:
- 供應商涵蓋範圍不佳。
- 極端天氣狀況。
- 停電。
- 進入永久的「死區」,例如禁止網路連線的建築物。
- 進入暫時性的「死路」,例如搭火車和通過隧道時。
- 附計時器的網際網路連線 (例如機場或飯店的網路連線)。
- 在特定時間或日期下,使人僅能透過網際網路或幾乎沒有網際網路連線的文化環境。
您的目標是提供優質的體驗,並降低連線狀態改變的影響。
決定當使用者的網路連線品質不佳時,要向使用者顯示什麼內容
我們必須先詢問第一個問題是網路連線的成功和失敗情形。連線成功就是應用程式的正常線上體驗,不過,連線失敗可能是應用程式的離線狀態,以及在網路延遲時應用程式的行為。
思考網路連線是否成功時,您需要思考以下重要的使用者體驗問題:
- 您等待多久才能判定連線成功或失敗?
- 如系統判定成功或失敗情形,您可以採取哪些行動?
- 萬一發生故障,您該怎麼做?
- Google 如何通知使用者上述事項?
通知使用者目前的狀態和狀態變更
告知使用者網路故障,以及應用程式的目前狀態時,他們仍可執行的操作。舉例來說,通知可能有以下內容:
網路連線似乎不佳。請放心!系統會在恢復網路時傳送訊息。
在網路連線改善或恢復時通知使用者
該如何通知使用者其網路連線已經改善,取決於您的應用程式。優先提供最新資訊的應用程式 (例如股市應用程式) 應盡快自動更新並通知使用者。
建議您使用視覺提示 (例如質感設計浮動式元素) 告知使用者網頁應用程式已更新至「在背景」。這包括偵測 Service Worker 是否存在,以及更新其代管內容。您可以前往這個網頁,查看這個函式的程式碼範例。
舉例來說,Chrome Platform Status 就是其中一例。應用程式更新時,系統會向使用者發布附註。
您也可以在醒目空間中顯示應用程式上次更新的時間。舉例來說,這對於貨幣換算工具應用程式來說非常實用。
新聞應用程式等應用程式可以顯示簡單的輕觸更新通知,告知使用者新內容。自動更新功能會導致使用者失去位置資訊。
更新 UI 以反映目前情境狀態
每個 UI 的部分可能各有專屬的結構定義和功能,實際情況將視是否需要成功連線而定。例如可以離線瀏覽的電子商務網站。重新建立連線之前,系統會停用「購買」按鈕和定價功能。
其他形式的情境狀態也可能包含資料。舉例來說,金融應用程式 Robinhood 讓使用者購買股票,並使用顏色和圖形在市場開放時通知使用者。整個介面會變成白色,並在市場打烊後顯示為灰色。當庫存值的增減時,每個股票小工具會根據狀態變為綠色或紅色。
向使用者說明離線模型
離線學習是適合每個人的全新心理模式。您必須讓使用者瞭解在離線狀態下會發生哪些變更。告知使用者大型資料的儲存位置,並為其設定變更預設行為。請務必使用多種 UI 設計元件 (例如資訊性語言、圖示、通知、顏色和圖像) 來統整這些想法,而不是只依賴圖示等單一設計項目來呈現全貌。
預設提供離線體驗
如果您的應用程式不需要太多資料,建議您預設快取該資料。如果只能透過網路連線存取資料,使用者可能會感到不滿。請盡可能提供穩定的體驗。不穩定的連線會使應用程式感到不可信任,如果應用程式能減輕網路故障的影響,使用者將會覺得不可思議。
新聞網站可利用自動下載及自動儲存最新消息,因此就算沒有網路連線,使用者也能閱讀今天的新聞,也許不用下載文章圖片也能下載文字。並根據使用者的行為進行調整,舉例來說,如果運動專區是他們通常會瀏覽的內容,請將該部分設為優先下載。
在應用程式可供離線使用時通知使用者
網頁應用程式首次載入時,您必須告知使用者應用程式可供離線使用。請使用畫面底部的訊息 (例如已同步處理區段或已下載資料檔案),使用提供簡短意見回饋的小工具來提供有關作業的簡短意見回饋。
回想一下自己使用的是什麼語言,確保該語言適合您的觀眾。請確保使用訊息的所有執行個體都顯示相同的訊息。非技術目標對象通常會誤解這個詞,因此請使用觀眾能產生共鳴且以動作為基礎的用語。
在資料密集型應用程式介面中,醒目顯示「儲存以供離線使用」
如果應用程式使用大量資料,除非使用者透過設定選單明確要求,否則請務必使用切換按鈕或圖釘新增項目供離線使用,而非自動下載。請確認圖釘或下載 UI 未被其他 UI 元素遮蓋,且使用者明確知道該功能。
舉例來說,需要大型資料檔案的音樂播放器就屬於其中一個例子。使用者瞭解相關的資料費用,但也可能想離線使用玩家。如要下載音樂供日後使用,使用者需事先規劃,因此在新手上路流程中,您可能需要先瞭解相關資訊。
清楚說明可離線使用的內容
請清楚說明所提供的選項。您可能需要顯示顯示「離線媒體庫」或內容索引的分頁或設定,讓使用者輕鬆查看儲存在手機中的內容,以及需要儲存的內容。請確認設定正確無誤,且清楚儲存資料的位置和存取權。
顯示動作的實際費用
許多使用者都仰賴「下載」的離線功能。如果使用者位於網路連線會定期失敗或無法分享內容的國家/地區,或經常與其他使用者分享內容,或是先儲存內容供離線使用,他們就能利用這些國家/地區。
數據方案的使用者可能會避免下載大型檔案導致費用過高,因此建議您顯示相關費用,讓使用者可以主動比較特定檔案或工作。舉例來說,如果上述音樂應用程式可以偵測使用者是否採用行動數據方案,並顯示檔案大小,方便使用者查看檔案費用。
防範遭入侵體驗
通常使用者在未意識到自己正在創作體驗的情況下,例如,在採用雲端式檔案分享網頁應用程式之前,使用者很常儲存大型檔案並附加到電子郵件中,以便透過其他裝置進行編輯。重要的是,不要採用入侵網站的體驗,而是應檢視他們試圖達成的目標。換句話說,與其思考如何使附加大型檔案更容易使用,更能解決跨多裝置共用大型檔案的問題。
讓體驗在不同裝置間轉移
建構不穩定的網路時,請在連線改善後盡快同步處理,以便轉移體驗。舉例來說,假設某個旅遊應用程式在預訂過程中中斷網路連線。重新建立連線後,應用程式會與使用者的帳戶同步處理,讓使用者在電腦裝置上繼續預訂。無法轉移體驗,可能會對使用者造成極為困擾。
通知使用者資料目前的狀態。舉例來說,您可以顯示應用程式是否已同步處理。請盡可能向使用者說明,但不要傳送訊息,以免造成他們的負擔。
打造多元包容的設計體驗
設計時應提供有意義的設計裝置、簡單語言、標準圖像和有意義的圖像,引導使用者完成特定動作或工作,而非阻礙進度,進而打造多元包容的環境。
使用簡單扼要的用語
良好的使用者體驗不只是設計完善的介面。其中包含使用者在應用程式中採用的路徑,以及應用程式中使用的字詞。說明應用程式的狀態或個別 UI 元件時,請避免使用技術術語。請考慮「應用程式離線」這個詞組可能無法向使用者傳達應用程式的目前狀態。
使用多種設計裝置打造無障礙的使用者體驗
使用語言、顏色和視覺元件來呈現狀態或目前狀態的變化。以單色顯示使用者可能未註意到的狀態,而視障使用者可能也無法順利存取。此外,設計人員的想法是使用灰色 UI 表示離線,但這可能會在網路上載入意義。灰色 UI (例如表單上的輸入元素) 也代表元素已停用。如果只使用顏色來呈現狀態,這可能會造成混淆。
為防止誤解,請以多種方式向使用者顯示不同的狀態,例如使用顏色、標籤和 UI 元件。
使用能傳達代表意義的圖示
務必使用有意義的文字標籤和圖示,正確傳達資訊。由於網路離線的概念相對新穎,因此單獨使用圖示可能會發生問題。使用者可能會誤解自己使用的圖示,舉例來說,對年紀較小的使用來說,使用摺疊式圓盤儲存是比較合理的做法,但這個現象會讓年幼的年輕使用者從不見識到的磁碟片造成混淆。同樣地,我們也知道「漢堡」選單圖示在沒有標籤的情況下,會讓使用者感到困惑。
導入離線圖示時,請設法維持與業界標準的視覺呈現 (如果有的話),並提供文字標籤和說明。舉例來說,您可以將檔案儲存至離線觀看清單,這可能是一般的下載圖示,或者這項操作可能是同步處理圖示。部分動作可能被解讀為儲存至離線觀看,而非展示網路的狀態。請思考您希望傳達的動作,而非以抽象概念呈現使用者。例如儲存或下載資料。
離線狀態下可代表不同內容,例如下載、匯出、固定等。如需更多靈感,請查看 Material Design 圖示集。
使用骨架版面配置搭配其他意見回饋機制
骨架版面配置本質上是應用程式線框版本,會在載入內容時顯示。這有助於使用者瞭解內容即將載入。您也可以考慮使用預載器 UI,並附上文字標籤,告知使用者應用程式正在載入。例如,閃爍電線畫面內容,讓應用程式感覺本身正在運作且正在載入。這樣可以讓使用者放心進行特定操作,有助於避免重新提交或重新整理應用程式。
不要封鎖內容
在某些應用程式中,使用者可能會觸發特定動作,例如建立新文件。部分應用程式會嘗試連線至伺服器以同步新文件,並示範此對話方塊會顯示覆蓋整個螢幕的干擾載入互動對話方塊。如果使用者擁有穩定的網路連線,這種做法可能就沒有問題,但如果網路不穩定,使用者就無法從這項動作逸出,UI 實際上也無法執行其他作業。因此,我們應避免使用會封鎖內容的網路要求。允許使用者繼續瀏覽您的應用程式,並將工作排入佇列,工作會在連線改善後執行並同步處理。
為使用者提供意見回饋,藉此展示動作狀態。舉例來說,如果使用者正在編輯文件,請考慮變更意見回饋設計,以便與上線時有明顯的不同,但仍顯示其檔案已「已儲存」,並在使用者連上網路時進行同步處理。這樣做會向使用者說明不同的可用狀態,並讓使用者保證系統已儲存他們的工作或動作。這麼做的好處是使用者越來越能使用您的應用程式。
瞄準十億名新使用者的設計
在許多地區,低階裝置是常見的連線場所,連線不穩定,許多使用者的資料也較不經濟實惠。您必須秉持資訊公開透明的原則,讓使用者對資料產生信任感,才能贏得使用者信任。因此,您可以思考如何協助使用者遇到連線品質不佳的狀況,並簡化介面,以便加快工作速度。下載大量資料前,應一律先詢問使用者。
為連線速度緩慢的使用者提供低頻寬選項。因此,如果網路連線速度緩慢,請提供小型素材資源提供選擇高品質或低品質的素材資源。
結語
教育是離線使用者體驗的關鍵,因為使用者並不熟悉這些概念。建議您與熟悉的內容建立關聯,例如下載以供日後使用,就和離線資料相同。
為不穩定的網路連線設計時,請注意下列幾點:
- 設計時應考量網路連線的成功、失敗和不穩定性。
- 資料可能所費不貲,因此請考量使用者。
- 對全球多數使用者來說,科技環境幾乎僅是行動裝置。
- 低階裝置是常見場所,儲存空間、記憶體和處理能力有限,且螢幕較小,觸控螢幕品質也較低。確保效能是設計過程中的一環。
- 允許使用者在離線時瀏覽您的應用程式。
- 通知使用者目前的狀態和狀態異動。
- 如果您的應用程式不需要太多資料,建議您預設提供離線內容。
- 如果應用程式需要大量資料,請教導使用者如何下載以供離線使用。
- 讓體驗在裝置之間轉移。
- 藉由使用語言、圖示、圖像、字體排版和顏色,向使用者表達想法。
- 提供資訊保證和意見回饋,協助使用者。