交互思考:被忽視的無網(wǎng)絡(luò)狀態(tài)

0 評論 6347 瀏覽 51 收藏 9 分鐘

編輯導(dǎo)讀:在使用產(chǎn)品的過程中,用戶有時(shí)會遇到無網(wǎng)絡(luò)的狀態(tài)。一般無網(wǎng)絡(luò)場景多且復(fù)雜,會引導(dǎo)用戶跳轉(zhuǎn)至外部場景,因此很多人會忽略無網(wǎng)絡(luò)狀態(tài)的交互體驗(yàn)。但是,根據(jù)不同的無網(wǎng)絡(luò)場景,向用戶提供反饋是非常重要的。本文將對此進(jìn)行分析,希望對你有幫助。

我們在設(shè)計(jì) App 的過程中,經(jīng)常會遇到異常場景,如無網(wǎng)絡(luò)狀態(tài)相關(guān)的情況,對許多設(shè)計(jì)師來說,這些場景往往都是“黑盒”,也很少會去注意甚至忽視這些場景。

在寫交互文檔時(shí),可能一筆帶過,比如:“無網(wǎng)絡(luò)連接”、“網(wǎng)絡(luò)出問題了”。

線上對這種場景做簡單處理的 App 很多,可能考慮到多種原因,比如無網(wǎng)絡(luò)場景比較極端,用戶不常遇到且大部分知道如何處理、無網(wǎng)絡(luò)場景較多且較復(fù)雜、會引導(dǎo)用戶跳轉(zhuǎn)至外部場景等。但我們經(jīng)常忽視的這些異常場景,往往可能是用戶在體驗(yàn)產(chǎn)品中,感到“挫敗感”比較強(qiáng)的場景。

我們可以從 3 個方面分析無網(wǎng)絡(luò):

  1. 底層邏輯:無網(wǎng)絡(luò)會有多少種狀態(tài),我們能否根據(jù)不同狀態(tài)給予用戶不同的幫助。
  2. 框架層面:根據(jù)數(shù)據(jù)加載的情況,可以分為空頁面,緩存頁面,其中緩存頁面的更需要結(jié)合產(chǎn)品屬性采用合適的提示方式。
  3. UI 層面:是否可以結(jié)合品牌特性進(jìn)行情感化的設(shè)計(jì),緩解用戶焦慮感。

首先,無網(wǎng)絡(luò)的底層邏輯可以分為 3 個維度:無網(wǎng)絡(luò)有哪些場景、如何反饋、如何引導(dǎo)操作。

常見的無網(wǎng)絡(luò)場景一般如下面幾種情況:

  1. 未連接移動網(wǎng)絡(luò)或 WLAN —— 未連接網(wǎng)絡(luò)導(dǎo)致的無網(wǎng)絡(luò)場景,較為常見。
  2. 移動網(wǎng)絡(luò)或 WLAN 網(wǎng)絡(luò)信號差 —— 經(jīng)常出現(xiàn)在路上、地鐵等場景,導(dǎo)致弱網(wǎng)情況。
  3. 開啟飛行模式 —— 打開飛行模式同時(shí)關(guān)了 WLAN,導(dǎo)致無網(wǎng)絡(luò)。
  4. 網(wǎng)絡(luò)未認(rèn)證 —— 場景出現(xiàn)在外面連錯專用網(wǎng)絡(luò),沒有認(rèn)證,導(dǎo)致無網(wǎng)絡(luò)。
  5. 未開啟移動數(shù)據(jù)權(quán)限 —— 常見于 iOS,未連接 WLAN,且用戶自己禁止使用移動數(shù)據(jù)。

無網(wǎng)絡(luò)的情況這么多,我們是否有必要區(qū)分呢?可以想想,假如只做簡單提示,大部分用戶看到的提示可能是“網(wǎng)絡(luò)斷開了”,而實(shí)際上用戶可能只是開啟了飛行模式,產(chǎn)品在信息準(zhǔn)確性方面?zhèn)鬟_(dá)本身就不到位,并且也無法提供合適的反饋及幫助,無法快速幫助用戶解決當(dāng)前面臨的實(shí)際問題,所以有必要幫助用戶區(qū)分當(dāng)前問題。

我們該如何根據(jù)不同無網(wǎng)絡(luò)場景向用戶提供反饋呢?盡管無網(wǎng)絡(luò)有多種細(xì)分情況,但是作為設(shè)計(jì)師,我們也需要考慮到普通用戶是否能像我們一樣區(qū)分不同的場景。普通用戶只需要能夠區(qū)分當(dāng)前什么問題及怎么解決即可,向用戶傳達(dá)問題時(shí),無需細(xì)致地讓用戶知道遇到的技術(shù)場景。

舉個例子:如“未連接移動網(wǎng)絡(luò)或 WLAN 無網(wǎng)絡(luò)連接”的場景,可以提示“網(wǎng)絡(luò)未連接,請?jiān)O(shè)置網(wǎng)絡(luò)”;“開啟飛行模式” 導(dǎo)致斷網(wǎng)的場景,可以提示“無網(wǎng)絡(luò)連接,請關(guān)閉飛行模式 ”。

僅僅提供反饋信息,但是沒有根據(jù)這些信息提供對應(yīng)幫助,從體驗(yàn)層面,也許做的還不到位,我們是否還能提供交互的引導(dǎo),如京東的處理方式是提供異常場景說明:

輕芒雜志的處理方式則更符合我們對引導(dǎo)體驗(yàn)的要求,通過反饋用戶當(dāng)前遇到的實(shí)際情況,并且提供正確的處理引導(dǎo)方式:

我們也可以提供按鈕引導(dǎo),比如假如用戶開啟了飛行模式,這時(shí)我們只需要引導(dǎo)用戶點(diǎn)擊【設(shè)置】跳轉(zhuǎn)設(shè)置頁,關(guān)閉飛行模式;遇到需要認(rèn)證網(wǎng)絡(luò)的情況,可以點(diǎn)擊【認(rèn)證】跳轉(zhuǎn)網(wǎng)絡(luò)認(rèn)證頁。

其實(shí)網(wǎng)絡(luò)實(shí)際情況組合比上述列舉的更復(fù)雜,但我們匯總了無網(wǎng)絡(luò)、弱網(wǎng)、飛行模式、認(rèn)證網(wǎng)絡(luò)、網(wǎng)絡(luò)權(quán)限等問題,從大的維度能幫助用戶區(qū)分問題即可。

其次,無網(wǎng)絡(luò)的展示層面,常見的主要是空頁面、緩存頁面。其中空頁面由于本身頁面無內(nèi)容,所以設(shè)計(jì)方面較為明確,常見的處理方式是引導(dǎo)圖+描述文案+引導(dǎo)按鈕。

而緩存頁面,由于產(chǎn)品屬性不一致,展示形式也較為豐富,需根據(jù)產(chǎn)品特點(diǎn)選擇適合的形式,常見的有:

長駐提醒:比如微信這種即時(shí)通訊類軟件,由于最新消息在最上方,且用戶在這里的習(xí)慣性操作而并非滑動列表向下瀏覽,所以把提示設(shè)計(jì)在頁面上方固定,好處是可以讓用戶明確注意到當(dāng)前網(wǎng)絡(luò)狀況,并提供對應(yīng)解決方式。而微博則不同,用戶使用微博最頻繁的操作就是向下瀏覽,所以無網(wǎng)絡(luò)提示會設(shè)計(jì)在信息流下方,與內(nèi)容區(qū)結(jié)合,避免類似于 toast 的一次性提醒。

toast 提示:toast 在使用場景上則更加通用,不受限于頁面內(nèi)容,但是弊端是大部分 toast 往往只提示一次,或者用戶再次拉動刷新時(shí)再次彈出。大部分 toast 未提供交互引導(dǎo)操作,也不利于引導(dǎo)用戶快速發(fā)現(xiàn)問題、解決問題。

最后,無網(wǎng)絡(luò)的?UI 設(shè)計(jì)層面,我們經(jīng)常能看到會對這些場景做情感化的插畫設(shè)計(jì)、文案設(shè)計(jì),可以結(jié)合產(chǎn)品屬性進(jìn)行設(shè)計(jì),在緩解用戶枯燥及焦慮的同時(shí),也提升產(chǎn)品趣味性及品牌特點(diǎn)。如美團(tuán)外賣和袋鼠的形象結(jié)合、B 站和 2233 娘的形象結(jié)合。

總結(jié):用戶實(shí)際使用產(chǎn)品的場景,往往都很復(fù)雜。作為交互設(shè)計(jì)師,除了考慮正常的流程之外,更應(yīng)該多考慮無網(wǎng)絡(luò)等邊界情況。對于 UI 設(shè)計(jì)師而言,可以考慮這些異常場景如何通過設(shè)計(jì),緩解用戶的焦躁情緒,思考如何能以更巧妙的方式幫助用戶。

 

本文由 @熱風(fēng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!