兩步搞定,app斷網提醒設計

4 評論 25147 瀏覽 214 收藏 9 分鐘

斷網是一種影響用戶使用的不良狀態,Harris Interactive為Tealeaf做的一份調查顯示,23%的用戶承認咒罵過自己的手機,11%沖自己手機大喊過,而且4%的用戶在網絡出問題時扔過手機。斷網就屬于這類問題之一。

斷網的情況下,我們應該盡量采用合理的提醒方式,降低用戶焦慮。

舉一個反面例子:

斷網后下拉刷新,清空了緩存內容

測試時用的iOS系統,版本為1.5.6。我是先打開了app,瀏覽了一會首頁然后開啟飛行模式,下拉刷新,結果連本來加載好的信息都沒有了,而且沒有明確告訴用戶該怎么刷新。最怪異的是,我以為斷網后也是下拉刷新,結果這一頁居然是點擊刷新。。。一個頁面居然在不同情況下用了兩種刷新方式。

ps:這里無意黑,該軟件的核心業務不在app,并且網絡超時設計屬于優先級比較低的需求。

正面例子很多,可以參考上千萬用戶量的app。可問題在于斷網的提醒樣式有很多種,適用于不同的場景。經驗豐富的用戶體驗產品經理或者交互設計師,了解各種各樣的提示樣式,可以憑借自己的經驗選擇最適合的提示樣式。但如果經驗不夠豐富,可能會費時費力。所以,本篇的目的是幫助產品新人用最短的時間完成斷網設計。附上本文思維導圖:

第一步:明確前提

前提是做網絡超時設計之前,要明確下面這兩個問題。

  1. 用戶需不需要查看緩存內容?緩存內容還可以降低用戶的斷網時焦慮,有些內容對用戶有價值的,比如微信聊天記錄。
  2. 什么時候檢查網絡狀態?有的時候需要實時檢查網絡狀態,比如微信的消息列表、還有一些手游等等,大多數APP其實不需要實時檢查。斷網設計更多是在優化現有產品的用戶體驗,這時需要和技術多溝通,搞清楚你的產品在什么時候檢查網絡狀態。

第二步:根據場景選擇樣式

斷網的提醒樣式有很多種,適用于不同的場景。這里我把場景分為了四大類,可以先選擇對應的一類場景,再選擇該場景下常見的提醒樣式。

1.有必要立即并打斷用戶提醒

這一類場景頁面(區域)功能全部無法使用,且沒有本地緩存可查看時。不聯網啥也不能用啥也看不了,要把用戶的關注焦點在網絡問題上,所以采用整頁提示或內容區按鈕,明確告訴用戶現在的網絡狀況,讓用戶獲得掌控感,引導用戶解決網絡問題,幫助用戶恢復到網絡正常狀態。最好說明下一步用戶該做什么,而不是冷冰冰的只告知用戶“加載失敗”。除此以上兩種,彈窗也可以打斷用戶操作,以提醒用戶。

總結:這類場景下,可用的提醒樣式有整頁提示、內容區按鈕、彈窗。

2.有必要提醒,但不要打斷用戶

這一類場景頁面部分本地功能可用,或有本地緩存可查看。這時候app又不是不能用了,所以不應該打斷用戶思緒,要輕提醒,達到讓用戶“了解、知道”的目的即可。常見的提醒樣式有以下幾種。

Notice bar:見微信消息列表截圖,較常見,持續性的提醒,一般出現在標題欄下方或列表頂端,點擊可以獲取解決網絡問題的幫助;

toast:見支付寶截圖、一般顯示少量文字,幾秒內消失,容易被忽略,提醒但不打斷的;

頁面內提示:見墨跡天氣,不打斷用戶,起到了讓用戶知道的目的。

總結:這類場景下,常見的提示樣式有Notice bar、toast、頁面內提示。

3.需要提醒用戶,但不是立即

這一類場景,我把它總結為用戶會持續操作的場景,可能不太貼切,舉例子說明吧。比如新浪發送微博,假設用戶在編輯內容時,字還沒打完呢,就提示用戶網絡超時,這是想不想讓用戶打字了?這時常見的提醒樣式有以下幾種。

重試按鈕:見微信聊天,發送失敗會提醒用戶,點擊即可重新發送。

彈窗:見淘寶截圖,在用戶操作時不打斷,完成后會彈窗提示失敗,并保存操作,彈窗里的內容一般比較重要,有時內容較長也會用彈窗。

toast:見知乎,斷網時打開首頁,已經有緩存好的內容(沒有緩存內容時需立即提醒),沒有立即提醒,隨便點擊一篇內容時會提醒。

結合使用也很常見:如上圖微博,用了重試按鈕,方便恢復網絡時重新發送;Notice bar點擊可進入草稿箱;同時還用了toast提醒。

總結:這類場景下,常見的提示樣式有重試按鈕、彈窗、toast。

4.不需要提醒

這一類場景,斷網了也沒什么影響。比如微信閱讀,讀一本本地書籍,內容都緩存好了,不需要提醒用戶。

總結

一般的app會根據需求和場景使用多種斷網提示方式,而不是單純的一種。比如微信,斷網下消息列表用Notice bar、設置頁面用彈窗、聊天框用重試按鈕、朋友圈斷網時不提醒。

現在試著用這樣的方法來優化app的斷網提醒。

第一步,用戶需不需要看緩存內容?個人覺得,截圖的那頁的核心就是展示內容,所以沒有理由在斷網后清空頁面緩存。什么時候檢查網絡狀況?這個比較明顯,下拉刷新時檢查網絡狀態。那么結論是,用戶需要看緩存內容,下拉刷新時檢查網絡狀態。

第二步,根據場景選樣式。這一塊需要立即打斷用戶并提示嗎?如果沒有緩存內容時,啥也看不了,需要,用整頁提示。但如果有緩存內容時就不需要了,在點擊開一篇文章時再提醒就好,可以參考知乎,用toast。

總結改動為:斷網情況下,有緩存內容時下拉刷新不清空緩存內容,用toast提示。(PS:整頁提示的文案也可以改一下,改為“加載失敗 ?請點擊重試”)

最后感謝看到這里的朋友,之前自己在梳理自己產品的斷網規則,想看看網上相關的文章,但是沒有找到。所以把自己的思路整理了一下發出來,不一定靠譜。希望可以拋磚引玉,歡迎批評,歡迎交流。

 

本文由 @Cc丶 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 很棒的分享,很容易理解

    來自浙江 回復
  2. 謝謝分享

    來自北京 回復
  3. 好棒的分析 ??

    來自浙江 回復
    1. ??

      來自北京 回復