空狀態-用戶體驗常被忽視的頁面

2020-12-12 騰訊網

本文章簡單的介紹了一些空狀態設計原則和規範,幫助更多的設計小白更加深入的理解空狀態頁面,更好的完成設計。

正文

在互動設計、用戶體驗設計中,每一個細小環節都至關重要。比如說,空狀態 ( The Empty State ) 是許多應用程式設計開發過程中忽略的一點,卻也有著優化用戶體驗、改善應用程式的潛力。

一、什麼是空狀態?

空狀態:顧名思義就是空白的狀態,空狀態是對沒有數據頁面的補充,一種對零數據的設計形式(如下圖所示:無網絡、訂單為空、沒有關注的人以及無法連接網絡等等這些頁面就是所謂的「空狀態」。)

空狀態是APP設計中不可或缺的一部分,特別是新用戶初次接觸到產品APP時,必然會面對很多空狀態。

二、空狀態的分類

第一:根據空狀態產生的路徑,可以將空狀態分為3類:

系統層:本地請求異常;如:無網絡、伺服器異常等;

信息層:請求成功,數據異常;如內容已刪除、已下架等;

空白層:請求成功,無數據;最常見的空頁面或空狀態。

第二:根據空狀態的出現場景又可以將其分為4大類:

初體驗:初次註冊登錄的用戶很多功能都沒有熟悉;

無信息/無結果:某些功能還未使用過;

完成任務:完成某項功能後反饋的結果;

出錯:因為各種原因導致的錯誤頁面。

初體驗時,根據不同的產品,我們可以為用戶提供不同的引導

· 創作平臺引導用戶創造內容、推薦相關內容、開啟權限……

· 工具類app介紹相關功能、添加相關人、相關功能……

· 學習類app收集用戶目標、推薦相關課……

無信息/無結果時,告知用戶該如何解決問題,或者給用戶其他選擇

· 購物車為空時讓用戶購買或者給用戶推薦商品

· 無收藏時應到用戶去收藏

· 搜索為空時告知用戶換一個詞試一試

· 無評論時讓用戶搶個沙發

任務完成後,鼓勵或獎勵用戶

· 郵件全部回復完祝用戶擁有美好的一天

· 書看完時讓眼睛放鬆一下

· 打卡成功獎勵用戶勳章等等

程序出錯後,緩解用戶情緒,告知用戶解決辦法

· 網絡出錯檢查網絡/刷新頁面

· 404頁面讓用戶反饋情況到後臺、報錯等

三、設計空狀態頁面的好處

據調查顯示:「平均下來,APP在被下載之後的前3天時間裡,日活躍用戶(DAU)數量下降了77個百分點。30天內,下降比例達到80%」。用戶會嘗試多個同類APP,然後在接下來的3到7天內決定其中的哪些不合適。這時候就需要通過更多好的設計和體驗來留住用戶。

當然一個產品的好與壞不能全靠空狀態,但是空狀態對於新用戶的留存是很重要的。

Spotify的用戶體驗專家Tamara Hilmes提醒設計師們時說,空狀態是一個展示產品個性化的機會,因此,在進行空狀態設計時,需要認真考慮品牌和用戶的目標和背景。

四、空狀態設計原則

4.1、基本原則

準確:空狀態需要清晰明確地將當前系統狀態傳達給用戶

直觀:簡言之就是畫面要「小而美」簡單

高效:提供用戶快速有效地擺脫空狀態的方法

準確

準確原則要求在文字描述上做到清晰地闡述系統當前的狀態。

下圖為例,如果僅以「獲取不到數據」作為收件箱空狀態提示文字,用戶不清楚是系統異常、網絡異常還是僅僅因為收件箱沒有郵件而出現當前狀態。準確地將系統狀態及操作結果告知用戶是空狀態設計中十分重要的目標。

特殊原因導致的空狀態,也可以在附加文字中告知用戶其原因,例如郵箱帳號未登錄而導致收件箱為空的情況。

直觀

空狀態不僅要講究視覺的美感,還要講究體驗的「美感」,要讓用戶在不用思考的情況下, 獲得最大的價值。

高效

若空狀態在系統中可以通過觸發操作離開,建議在空狀態的文字或操作上進行展現。

以站內信空狀態為例,系統存在用戶可執行的解決方案,在設計上也要體現。上面提到的帳號未登錄導致站內信為空時,考慮附加文字提示『登錄帳號即可開始』。若系統存在直接觸發操作的方案,可通過連結或按鈕的形式提供入口給用戶,便於用戶快速有效地回到功能主流程中。

4.2、進階原則

有趣:有趣又易用,符合用戶的心理預期

品牌:介紹並強化品牌元素,通過恰當的方式、形式呈現

記憶:有創意或幽默色彩,呈現形式新穎,體現專業同時創造正面情緒

有趣

空狀態的設計在滿足了基本的設計原則後,還可根據產品的品牌特徵進行優化。一般對空狀態的圖片、文案來著手進行品牌化設計。

採用含著關懷情感的文案「哎呀,網絡好像出了點問題」代替「網絡未連接」這樣冰冷無感情的提示文字,同樣達到告知用戶系統狀態的目的,但修改後的文案明顯更能貼合服務工具型軟體的品牌形象。

同時結合文案主題,用有趣的插畫吸引用戶,達到緩解用戶焦慮、負面情緒的目的。例如下圖的刷新一下試試,企業IP作為粉刷匠在刷新Wi-Fi,比起一個失聯的行星就更有意思。

品牌

當空狀態滿足了用戶的基本需求後,就可以考慮如何樹立品牌形象了!

目前最簡單且有效的辦法是——企業IP+插畫+文案,雖然被很多人吐槽套路、片面,但是作為剛起步的創業類的app,這不失為一種好辦法。

設計專屬吉祥物形象,對產品進行擬人化表達,避免極其複雜的插畫,保障界面簡潔明快;

由於插畫不可交互,儘量與背景融合為一部分,避免使用明亮的色彩,誤導用戶點擊。

記憶

文章的開頭講過,空狀態對留住新用戶有著很關鍵的作用,那麼空狀態在用戶使用的幾秒鐘內一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶,所以空狀態一定要有新意,甚至是要給用戶出其不意的視覺感受,這個階段考慮的問題要更多一些,受眾人群的特點、品牌的調性、想要達到的效果、解決問題的手法、還要注意對用戶而言是否直接有效並且準確。

阿里旗下「躺平」app的空狀態打破常規,非常優秀的抓住了用戶人群的特性,解決了用戶的需求的同時,還給用戶樹立了非常深刻的品牌印象。

產品所有能傳遞情緒的場景都應該與品牌情緒一致。採用負面情緒的空狀態有一定風險,可能會起到消極作用。

用戶更容易代入場景化的故事,產生情感共鳴。構思場景,需研究產品目標用戶群的特質,設計他們的共同回憶,將有關的場景、片段、元素進行拼貼、組合、關聯,再找到最能勾起情緒衝動的突破口,豐滿場景。

避免正面刻板的形象(一眼就能看到底的設計),儘可能簡單有趣、不落俗套,讓用戶看到這個畫面後可以有更多想像的空間,從而吸引用戶,驅動用戶的好奇心。

五、總結

囉嗦了很多,作為設計師,簡單總結了一些設計空狀態時整體的設計流程,如下:

1、功能入口:提供相關功能的入口和動作按鈕,解釋服務的功能和優點,引導用戶到其他頁面查看內容;

2、標題文案:說明當前狀態,解釋當前問題出現原因,介紹功能概要;

3、解說文案:如何走出當前狀態,如何解決當前問題,補充說明功能的屬性;

4、推薦數據:提供熱門數據、個性化推薦數據讓用戶選擇;如電商搜索無結果、購物車等頁面,推 薦用戶感興趣的商品,能有效地提升購買轉化率;

5、操作引導:提供相關操作的示意和引導,讓用戶能刪除或替換內容;

6、完成指導:送上任務達成的祝賀語,鞏固用戶的成就。

細節備註:

文字和圖形一樣,也是一種情緒的載體,注意文字的魅力,加注重文字的情緒表達,更易調動觀者的心。

1、避免命令的、指使的語氣,儘量使用輕快的、戲謔的、娛樂式的語氣,婉轉傳達用戶可以去做什麼;

2、避免傻瓜式的敘述、空洞的鋪陳,描述詞風格應該匹配產品調性;

3、如果出錯了,提供一個解決辦法。

4、反問開場,可以調動用戶情緒,嘗試錯愕驚訝、誇張的口吻,會使情感更生動。

相關焦點

  • APP設計中空頁面的設計
    在用戶界面中,產品內的購物車為空、某界面出錯或不存在以及斷網等狀況時,都可以成為空狀態。表面上看,空狀態給人的感覺是臨時性的且微不足道的,但實際上,空狀態在界面操作的引導性、用戶體驗的愉悅性,以及保留用戶等方面有著不可忽視的作用。
  • 「圖」Windows 10 Build 18956發布:重新設計「網絡狀態」頁面
    作為20H1開發分支的最新預覽版,新版本的改動幅度並不大,主要是在設置應用中引入了重新設計的「網絡狀態」頁面,計算器應用新增窗口始終最前選項,並邀請更多Insider用戶體驗全新的Cortana和通知設置。
  • 在進入網易後,我對用戶體驗界限的思考
    在我日常的反思中,比較天馬行空,並沒有特定的線索,也許是頁面上一個按鈕的使用方式,也許是當前業務的商業化路線。而本文的這個題目是今年最常思考的一個問題,主要關於自己對於界限的理解。先說背景,進入網易始於電商產品,在剛接觸到電商時,我根據自己的理解,畫了這樣一張用戶體驗地圖。在當時的理解中,用戶與平臺的接觸始於用戶打開app/網站,終於離開app/平臺。
  • 騰訊2020-2021 設計趨勢報告 · 用戶體驗篇
    2019年國內外手機廠商的發布大會上,LG手機G8 ThinQ以及華為發布Mate30系列推出的隔空手勢,可實現一些簡單的諸如滑動、切歌、截屏等效果。Android Q 隔空手勢LG隔空手勢除此以外,隔空手勢支持更加細微的手勢,如旋轉、揉搓等,可以更直觀、更靈活的方式操控界面,讓用戶獲得一種像魔術師用意念控制事物運作的快感。
  • 寵物小程序製作開發頁面設計從哪裡入手
    寵物小程序開發頁面設計從哪裡入手1.登錄頁面帳號登錄:用戶通過帳號密碼登錄註冊帳號:新用戶註冊方法簡單快速.第三方登錄:無需註冊帳號,通過第三方軟體快速登錄2.首頁頁面全局搜索:頂端使用全局搜索方式,方便用戶搜索需要的東西為你推薦:為用戶提供相關用戶推薦用戶動態:提供用戶動態的瀏覽,吸引用戶關注3.發布頁面添加寵物:添加寵物的信息添加照片:發布照片動態添加視頻:發布視頻動態
  • 如何打造讓用戶更投入的「心流式體驗」?
    當你全神貫注的沉浸在某一個事物是,完全忽視時間、空間,甚至自己的存在,這種狀態在心理學上就稱之為心流。文章從心流理論的角度出發,通過分析心流體驗產生的條件、過程、結果,探索心流理論在產品設計中的應用,提煉出有利於用戶產生心流體驗的產品設計要素。
  • 實習僧產品體驗報告:尊重用戶體驗,才能取得用戶尊重
    尊重用戶體驗,才能取得用戶尊重。2.2、基礎功能職位搜索、簡歷維護、簡歷投遞、投遞狀態同步和溝通、收藏職位、客服聯繫。4、框架層(重要頁面)4.1簡歷投遞頁面整體信息結構合理,關鍵的職位描述用了大面積展示,公司規模等信息用了小面積展示,讓用戶快速提取到終點內容。投遞簡歷按鈕做得特別大,對學生有一種投遞的暗示效果
  • 平安好醫生App用戶體驗:「一站式」的高效服務體驗
    下載後打開APP,呈現醒目的橙色開屏頁面,多位醫師頭像圖片躍然於屏,作為醫藥行業的研究角度來看,展示醫生信息能夠增強安全感,這個小細節提升了用戶體驗。隨後,平安好醫生APP進入主要的功能界面:與其他APP不同的是,平安好醫生APP擁有兩個不同的首頁,分別是「醫療」和「健康」首頁,分別針對目標人群不同時期的不同需求。
  • 社會化分享按鈕 = 糟糕的用戶體驗
    可是為什麼社交分享連結在用戶體驗上讓人如此不悅? 回顧幾年前的設計,會發現分享按鈕在社交媒體市場上扮演者很重要的角色。它們被視為允許用戶在點擊按鈕時分享內容的簡單方法。不出意外,這些按鈕會頻繁的被使用。你甚至可以在網站聯繫頁面的頁腳中發現它的存在,但問題是:「為什麼人們會覺得需要分享聯繫方式?」 用戶都會去分享嗎?
  • 一文了解頁面數據加載
    這時為了保持較好的用戶體驗,需要給到前端一個加載佔位圖和加載失敗的狀態提示。在解決這些問題的過程中,對於數據加載有了更多的認識,並整理了出來。(3)頁面內事件觸發加載:用戶手動加載、系統自動加載用戶手動加載,一般通過下拉或者點擊操作刷新頁面,加載新數據;系統自動加載的方式一般為,當前內容已經展示完畢後隨即加載並刷新出新的內容。(4)定時數據刷新一些排行榜或者限時活動,需要在特定時間進行頁面刷新和數據加載。
  • 乾貨貼:Web 後臺設計易被忽視的組件技巧
    那麼在 Web 端產品設計中,是不是存在一些容易被我們忽視的技巧呢?後臺系統的設計原則和前臺系統的設計原則幾乎一致,雖然頁面的動效、配色方面可能不必像前臺那般精益求精。產品的前端由於直接展示給用戶,因此往往對於圖片質量、頁面配色等都經過 UI 的仔細打磨,後臺產品則由於圖片少、文字多;內容展示少、表格多而在界面上慘不忍睹。
  • 關注商旅用戶出行健康,空鐵管家在機場開展趣味活動
    原標題:關注商旅用戶出行健康,空鐵管家在機場開展趣味活動齊魯晚報濟南10月24日訊:空鐵管家是國內最大機場及高鐵站綜合貴賓服務平臺,作為中高端商旅用戶出行的全程服務管家,致力於打造基於出行服務、機場高鐵站現場服務為一體的出行服務平臺,網絡覆蓋71個城市,全國133個機場高鐵站貴賓廳服務網點,為商旅出行用戶提供代辦登機手續、行李快速協辦、快速安檢通道、貴賓廳休息
  • 丟機者要哭:蘋果移除了 iCloud 激活鎖狀態查詢頁面
    最近,雷鋒網(公眾號:雷鋒網)了解到,蘋果公司移除了網站的 iCloud 激活鎖狀態查詢頁面蘋果支持文檔顯示 iCloud 激活鎖狀態查詢頁面上次更新是 1月24日。系統狀態頁面可以讓用戶輸入 IMEI 碼或序列號。激活鎖是 iOS 7 系統的功能之一,最近登陸了 watchOS 2。開啟激活鎖後,iOS 設備以及 Apple Watch 被偷後將無法正常使用,只有輸入正確的 Apple ID 密碼才能解鎖。
  • 用戶體驗設計:商品詳情頁
    對於在線購物一事,所有用戶都期望能夠得到快速、流暢的體驗。因此,在購物過程的每一個階段,即使付之最小的努力都有可能利於用戶的整個體驗過程(我們也應該以利於用戶為目標)。在一個應用程式中,沒有任何其他地方能夠像產品詳情頁一樣對提升購買率如此關鍵,因為用戶在購買之前往往需要充足的商品信息來了解商品。
  • 抽獎實例:如何做活動策劃才能提高用戶體驗?
    ;「頁面設計類」是指活動已經足夠吸引用戶進來、頁面得到曝光後可以做的視覺展示上的優化項。在這部分,總結了一個小心得:用戶最常在什麼環境下活躍,就要第一時間做支持這個環境的活動閉環。在抽獎活動剛上線時,僅支持APP環境下去參與活動,而對於除了在上課/提交作業的場景下才會打開APP的家長來說,能夠知曉這個活動的便是在微信環境下,班主任把宣傳海報發圈或是私聊。
  • 用戶體驗設計師最易犯的8類錯誤
    答:性能也許是用戶體驗中最重要的方面,但不幸的是,它在很大程度上被忽略了很大程度上被忽略是因為它是不可見的。團隊花了大量的時間打磨了審美體驗,享受使用了最新的開發工具,但最終忽略了加載速度的體驗和表現形式。這取決於我們在項目中是否優先考慮產品的性能,以便更好地為我們的用戶服務。
  • 頁面加載功能設計總結
    狹義上的「前進」指的是用戶觸發某個交互動作進入一個新頁面。如何在進入一個新頁面的過程中給予用戶良好的體驗呢?我們可以從以下三個方面進行分析:指示器、方向和順序。指示器的作用就是填補用戶等待的時間,減少用戶因等待而產生的焦慮情緒。1. 告訴用戶系統當前的狀態防止用戶焦慮首先我們要告訴用戶頁面加載的過程正在進行。如果我們不提示用戶,那麼用戶看到的就是一塵不變的白屏。就像下圖的酷我音樂一樣,用戶點擊進入「直播頁」,沒有任何元素提示用戶頁面內容正在加載中。
  • 網站用戶體驗設計與優化指南
    什麼是用戶體驗?用戶體驗涉及那些方面?用戶體驗(User Experience,簡稱:UE/UX)是一種在用戶使用一個產品(服務)的過程中建立起來的純主觀的心理感受。從系統上講,它是一個全方位的概念,在 產品不同的階段,不同的渠道,每一個可能和產品、服務,以及企業本身接觸的地方都能產生用戶體驗。有許多因素可以影響用戶實際使用的體驗。
  • 怎麼用html5新增元素製作用戶註冊頁面?這個例子告訴你!
    表單數據提交是網站中比較常見的用戶交互行為,在html頁面中常見的是註冊表單,提交數據前,會檢查表單數據的完整性,是否出現漏填、誤填)。如果出現漏填、誤填會提示用戶提示用戶,確保填寫數據準確有效。在檢查表單數據數據一般都是使用php或者JavaScript,今天為大家介紹怎麼使用html5新增元素製作用戶註冊頁面並進行檢查的數據檢查。
  • 眼皮底下溜走的用戶體驗:淺談產品設計可用性原則
    在產品設計中需要關注哪些要素,才能讓用戶感知更友好?做產品的人張口閉口就是用戶體驗,但當真正提到用戶體驗時,你第一個瞬間想到的是什麼?網際網路上有許多關於用戶體驗和產品設計的研究,寫的都很值得學習,如產品體驗要素中的五大層級的方法論、劃分需求類型的KANO模型等。