Offline UX 注意事項

本文將介紹爲慢速網絡和離線工作打造出色體驗所需的多個設計注意事項。

網絡連接的質量會受許多因素的影響,例如:

  • 網絡提供商的覆蓋範圍很差。
  • 極端的天氣狀況。
  • 停電。
  • 用戶經過“死區”,如攔截其網絡連接的建築物。

  • 用戶正在乘坐火車和經過隧道。

  • 互聯網連接由第三方(如機場或酒店)管理,並有啓用或禁用的時間限制。

  • 在特定時段或特定日期對互聯網進行限制或不允許訪問互聯網的文化習俗。

您的目標是提供良好的體驗,從而減少網絡連接發生變化所產生的影響。

當用戶的網絡連接不佳時您想向用戶顯示什麼?

第一個必須要問的問題是:網絡連接成功和失敗分別是怎樣的? 成功的網絡連接指的是您的應用可以正常在線。 不過,連接失敗分兩種情況:您的應用處於離線狀態以及在網速慢時應用如何響應。

在考慮網絡連接是否成功時,您需要問自己以下重要的 UX 問題:

  • 爲確定連接是否成功您需要等待多長時間?
  • 在確定連接是否成功時您能做什麼?
  • 如果連接失敗,您應該怎麼做?
  • 您如何將上述情況通知給您的用戶?

通知用戶其當前狀態和狀態的變化

通知用戶在網絡連接失敗時他們仍可以進行的操作以及應用的當前狀態。 例如,可以顯示以下通知:

“You seem to have a bad network connection. [Not to worry!] Messages will be “sent when the network is restored.”

Emojoy,表情符號消息應用,當狀態發生變化時通知用戶。
當狀態發生變化時儘快清楚地通知用戶。
I/O 2016 應用,當狀態發生變化時通知用戶。
Google I/O 應用使用一個 Material Design“toast”通知用戶其處於離線狀態。

網絡連接已改善或已恢復

一個天氣應用示例。
某些應用,如這個天氣應用,需要自動更新,因爲舊數據對用戶沒有任何用。

在用戶的網絡連接改善後如何通知用戶在很大程度上取決於您的應用。 對於需要將顯示的更新信息作爲優先級的應用,如股市應用,儘快自動更新和通知用戶非常重要。

您可能還會始終在醒目位置顯示最後一次更新應用的時間。 例如,這對於貨幣轉換應用同樣非常有用

過時的 Material Money 應用 Material Money 已更新
Material Money 儘可能顯示最新貨幣,並在應用尚未更新時通知用戶。

其他應用,如新聞應用,可顯示一個簡單通知,使用一個 tap-to-update 功能通知用戶有更新的內容。 這樣做的原因是如果某個用戶目前在閱讀一篇文章,自動更新將刷新頁面,用戶將退出他們上次閱讀到的地方。

新聞應用示例,處於正常狀態的 Tailpiece 新聞應用示例,準備更新時的 Tailpiece
在線新聞應用 Tailpiece 將自動下載最新新聞,但允許用戶手動刷新,以便他們不會退出己看到的文章中的位置。

上下文狀態和瀏覽器模式

UI 的每個字節都有自己的上下文和功能,其根據否需要成功聯網而發生變化。 例如,某個電子商務網站可以通過 Buy 按鈕離線瀏覽,並在重新建立連接之前停用定價功能。

其他上下文狀態的表單可包含數據。例如,財務應用 Robinhood 允許用戶購買股票,並使用顏色和圖形通知用戶市場開盤時間。在市場收盤時,整個界面變爲白色,然後變爲灰色。 當股價上漲或下跌時,每個單隻股票小部件根據其狀態變爲綠色或紅色。

爲用戶提供指導,以便他們可以瞭解什麼是離線模式。

離線模式對每個人來說都是一個全新的心智模式。您需要告訴用戶當他們無法聯網時會發生什麼變化。 通知他們保存大型數據的位置,併爲其提供設置以更改默認行爲。 確保您使用多個 UI 設計組件,如蘊含豐富信息的語言圖標、通知、顏色和圖像,以統一傳達這些概念,而不是依靠設計設備(如設計設備自己的圖標)來描述完整信息。

默認情況下提供離線體驗

如果您的應用不需要許多數據,則默認情況下緩存該數據。如果用戶只能通過網絡連接訪問他們的數據,那麼用戶會越來越不滿。嘗試儘可能提供穩定的體驗。不穩定的網絡連接將使用戶感覺您的應用不可靠,可減少網絡失敗影響的應用會讓用戶覺得神奇。

自動下載和保存當天最新新聞內容能夠讓新聞網站受益,用戶可閱讀當天新聞,無需聯網,可能會下載不含文章圖像的文本。同時也要適應用戶的行爲,如果用戶通常瀏覽體育專欄,則可能會優先下載此類數據。

Tailpiece 使用各種設計小部件通知用戶其處於離線狀態 Tailpiece 具有一個導航視圖,其顯示哪些部分可以離線使用。
如果設備處於離線狀態,Tailpiece 將使用一個狀態消息通知用戶,讓用戶知道他們仍可以使用此應用。

當應用準備離線工作時通知用戶

當網絡應用首先加載時,您需要向用戶表明應用是否可離線工作。 使用一個小部件來執行此操作,通過在屏幕底部顯示消息提供有關操作的簡要反饋,例如,某部分已同步或數據文件已下載時。

同樣,考慮您目前使用的語言以確保它適合您的受衆。 如果使用消息傳遞,則確保在所有實例中提供相同消息。 非技術受衆往往對離線這個術語有誤解,因此,請使用基於操作的語言,以便您的受衆可以理解。

離線工作的 I/O 應用 離線工作的 Chrome Status 網站
Google I/O 2016 應用和 Chrome Status 網站在應用可離線工作時通知用戶。

對於非常耗費流量的應用,將“save for offline”置於界面的醒目位置

如果某個應用使用大量數據,則確保有一個開關或圖釘以添加要離線使用的項目,而不是自動下載項目,除非用戶通過設置菜單特意要求此行爲。確保圖釘或下載 UI 不會被其他 UI 元素遮蔽,並且用戶可以很容易看到它們。

例如,需要大型數據文件的音樂播放器。用戶瞭解相關流量費用,但也知道當他們處於離線狀態時可能需要使用此播放器。下載音樂供日後使用需要用戶提前做好計劃,因此,在安裝時需要用戶瞭解這一點。

明確可以離線訪問的資源

理解您目前提供的選項。您可能需要顯示一個展示“offline library”的標籤或設置,以便用戶可以輕鬆查看他們在手機上存儲了什麼內容,以及需要保存什麼。確保此設置簡潔,並明確存儲數據的位置以及誰可以訪問這些數據。

顯示操作的實際成本

許多用戶都將離線功能等同於“downloading”。所在國家或地區經常掉線或無法聯網的用戶有連接網絡時通常會與其他用戶共享內容,或保存內容以供離線使用。

有流量計劃的用戶因爲擔心流量費用可能避免下載大型文件,因此,您可能還需要顯示相關費用,以便用戶可以針對特定文件或任務進行有效的比較。例如,如果雲上面的音樂應用可以檢測用戶是否有流量計劃並顯示文件大小,那麼用戶就可以瞭解真實的下載文件費用。

有助於防止黑客行爲

通常,用戶會無意識地出現黑客行爲。例如,在 Google Drive 等雲共享應用出現之前,用戶通常會保存大型文件,並將它們附加到電子郵件中以便他們可以從不同設備繼續編輯。請注意,不需要深入瞭解用戶的這種黑客行爲,而是要看他們想要實現什麼目。 換言之,要解決跨多個設備共享大型文件的問題,而不是考慮如何更方便用戶附加大型附件。

支持在設備之間傳輸數據

在遇到不穩定的網絡連接時,在連接改善後尋求正確同步,以便資源是可傳輸。例如,想象一個在進行預定時掉線的旅遊應用。重新建立連接後,該應用與用戶的帳戶同步,然後,用戶可以在他們的桌面設備上繼續進行預定。 無法傳輸數據對用戶的影響越來越大。

通知用戶其數據的最新狀態,例如,應用是否已設法同步。 儘可能通知用戶,但儘量不要通過傳遞消息使其負擔過重。

打造包容性的設計體驗

打造包容性的設計時,可使用能夠指導用戶完成操作或任務而不是阻礙他們的進展的有效設計設備、單個語言、標準圖標和有效圖像。

儘可能使用簡潔語言

良好的 UX 不只是一個精心設計的界面。它還包含用戶執行的流程,以及應用中使用的語言。 在解釋應用的狀態或單個 UI 組件時,請避免使用科技術語。 我們認爲短語“app offline”可能無法向用戶傳達應用的當前狀態。

下載圖標示例就是一個很好的例子
:使用可描述此操作的語言和圖像。
服務工作線程圖標示例則是個糟糕的例子
:避免使用可能讓人無法理解的抽象術語。

使用多個設計設備打造容易理解的用戶體驗

使用語言、顏色和可視組件展示狀態變化或當前狀態。 只使用顏色展示狀態可能無法讓用戶注意到,而具有視力障礙的用戶也無法看到。另外,設計者的直覺是使用灰顯的 UI 來表示離線,但灰顯的 UI 在網絡上具有已加載的含義。灰顯的 UI 還用於表示某個元素已停用,如表單上的輸入元素。 如果您僅使用顏色描述狀態,會產生混淆。

爲防止出現誤解的情況,可採用多種方式向用戶表達不同狀態:例如,使用顏色、標籤和 UI 組件。

以下示例使用顏色和文本顯示錯誤,效果很好。
:使用混合設計元素表達含義
以下示例僅使用顏色,效果很差。
:僅使用顏色描述所進行的操作。

使用可表達含義的圖標

確保使用有意義的文本標籤和圖標正確地表達信息。 單獨使用圖標會出現問題,因爲網絡上的離線概念相對較新。 用戶可能會誤解自己使用的圖標。例如,使用一個軟盤表示保存,老一輩的人能夠理解,但對於從未見過軟盤的年輕人來說這種比喻會使其感到困惑。同樣,我們知道,顯示“漢堡包”菜單圖標時如果不帶標籤會使用戶困惑。

在引入離線圖標時應儘量與行業標準可視項(如有)保持一致,並提供文本標籤和說明。例如,保存以供離線使用可能指的是一個典型的下載圖標,如果此操作涉及同步,那麼它也可能是一個同步圖標。 某些操作可理解爲保存以供離線使用,而不是展示網絡的狀態。要考慮您嘗試表達的操作,而不是向用戶展示抽象概念。 例如,保存或下載數據應基於操作。

表示離線的各種圖標示例

根據上下文,離線可以有許多含義,如下載、導出、固定等。 想獲得更多靈感,請查看 Material Design 圖標集

通過其他反饋機制使用框架佈局

框架佈局是一個非常重要的應用框架版本,其在加載內容時顯示。 框架佈局有助於向用戶展示將要加載的內容。 同時考慮使用一個預加載程序 UI,以及一個通知用戶應用正在加載的文本標籤。 例如,使線框圖內容發生震動,從而讓應用感覺它處於活動狀態並且正在加載中。這可向用戶保證正在進行操作,並有助於防止重新提交或刷新您的應用。

框架佈局示例 已加載的文章示例
使用框架佈局之前和之後。

請勿攔截內容

在某些應用中,某個用戶可能會觸發一個操作,如創建一個新文檔。 某些應用將嘗試連接到一個服務器以同步新文檔,並通過顯示一個覆蓋整個屏幕的侵入式加載模態對話框展示此操作。如果用戶具有穩定的網絡連接,則這樣做沒什麼問題,但如果網絡不穩定,用戶將無法退出此操作,並且 UI 有效地阻止用戶執行任何其他操作。應避免攔截內容的網絡請求。允許用戶繼續瀏覽您的應用和將執行的隊列任務,並在連接改善後進行同步。

通過爲用戶提供反饋展示操作的狀態。例如,如果用戶正在編輯文檔,則考慮更改反饋設計,使它明顯不同於其在線時的狀態,但仍顯示用戶的文件已“保存”,並在具有網絡連接時同步。這將告訴用戶可用的不同狀態,並向用戶保證其任務或操作已經保存。這可讓用戶在使用您的應用時更加自信。

專爲後十億用戶設計

在許多地區,低端設備非常普遍,網絡連接不可靠,並且許多用戶承擔不起流量費用。 您需要通過提供透明度和爲用戶節省流量來爭取用戶的信任。 請思考可爲網絡不佳的用戶提供幫助的方式,並簡化界面以幫助加速處理任務。 在下載非常耗費流量的內容時,始終嘗試詢問用戶。

爲網速慢的用戶提供低帶寬選項。因此,如果網速慢,則提供少量資源。 提供可選擇高質量或低質量資源的選項。

結論

爲用戶提供通知非常關鍵,因爲用戶不熟悉這些概念。嘗試與熟悉的操作建立關聯性,例如下載以供日後使用與離線保存數據意思相同。

在爲不穩定的網絡連接進行設計時,請:

  • 考慮如何針對網絡連接成功、連接失敗和不穩定進行設計。
  • 流量費可能十分高昂,因此,請爲用戶着想。
  • 對於全球的大多數用戶而言,技術環境幾乎都是使用手機。
  • 低端設備非常普遍,這些設備的存儲、內存和處理能力都非常有限,並且顯示屏較小,觸摸屏質量也較差。 請確保在設計過程中考慮到性能問題。
  • 允許用戶在離線狀態下瀏覽您的應用。
  • 通知用戶其當前狀態和狀態的變化。
  • 如果您的應用不需要許多數據,則默認情況下嘗試提供離線服務。
  • 如果應用非常耗費流量,則告訴用戶他們應該如何下載以供離線使用。
  • 支持在設備之間傳輸數據。
  • 利用語言、圖標、圖像、字體和顏色以統一方式向用戶傳達概念。
  • 爲用戶提供保障和反饋以幫助用戶。