如何設計操作反饋
本文的由來是我在體驗自家產品后,產品體驗很差,認為需要有操作反饋的設計;所以在學習參考了相關知識后,我借由寫文章總結下操作反饋的相關設計,希望對大家有幫助~
引言
最近在使用自家產品的時候出現了一個令人很尷尬的事情。
我們做的是一款給培訓機構進行招生營銷、教務管理和家校溝通的產品。那天體驗充值課程的時候,遇到一個問題,我給學生充值課程,顯示操作成功了,但是該學生的課時和課時費均沒有發生變化,我以為是遇到bug了,又試了幾次,還是一樣的效果。
于是我問了一下技術,原來在基礎設置中設置了課時變更需要審核,只有審核之后才能變更成功。我又問他,為什么不給一個提示;他回答說:原來產品就是這么設計的。
由此可見,有一個合理的操作反饋是如此的重要,不然會令用戶感到莫名其妙,明明操作成功了,為什么數據還沒有發生變化,體驗非常不好。因此,學習總結了一下操作反饋的相關設計,分享一下。
一、什么是操作反饋
操作反饋”,是指在使用產品時,系統對用戶的操作,或因戶的行為導致的變化,給出的反饋,它是體現人與“機”交互的關鍵場景。
二、為什么需要操作反饋
幫助用戶隨時感知系統的狀態,能夠告訴用戶下一步應該操作什么或者幫助用戶做出判讀和決定,幫助滿足用戶的控制感,消減不確定性給用戶帶來的負面情緒,提升用戶體驗。
三、哪些操作場景需要反饋
1. 操作確認
對于一些具有“破壞性”或不可逆的操作,在用戶操作前,我們應當讓用戶“再次確認”。除了要讓用戶二次確認,更重要的是要告知用戶當前操作可能帶來的“危害”、對其他模塊或未來的使用帶來的影響,引導用戶慎重決定自己的操作,從而減少用戶犯錯的可能。
常見的操作場景有:刪除、修改、支付、退出、提交……
2. 操作結果
當用戶通過點擊按鈕、填寫表格等一系列行為并完成最終任務時,設計師需要明確的告知用戶任務的結果:失敗還是成功,后續需要做什么。這可以讓用戶對自己的操作有更多的信心,對當前任務有更多的“掌控感”。
常用場景有:提交、增加、保存、收藏、點贊……
3. 任務進程
當用戶進行一些不會馬上完成的任務時,系統需要有一個加載、校驗、查詢或計算的過程。在這個過程中,我們必須讓用戶的操作得到恰當的反饋,能讓用戶能感知到現在的進程是否成功或者進度是什么樣的,增加用戶的掌控感,消除用戶的焦慮感。
常見的場景有:上傳、下載、更新……
4. 表單校驗
用戶在填寫表單后,點擊“保存”、“提交”等操作時,我們需要對用戶輸入的內容進行校驗。這樣做除了避免或減少用戶錯誤,也可以規范用戶的操作,使系統存儲的信息可控、規范化、結構化。
常見場景:字符的合規性、手機號碼的校驗、字符長度……
四、有哪些反饋方式
1、彈框
彈框分為模態彈框和非模態彈框,它們最大的區別就在于是否強制用戶交互。
模態彈框會打斷用戶當前的操作流程,用戶不在彈框上操作的話,其余功能都使用不了。所以設計師在構建反饋體系的時候,模態彈框都是用于展示優先級最高的信息。一般都會出現在用戶在進行有風險性,不可逆的操作。如操作確認場景中,用來使用戶再次確認。
非模態彈框相比來說就顯得“溫和”多了,出現2-3秒之后就會自動消失,不會對用戶造成干擾。屬于輕量型的反饋。如在顯示操作結果場景中,用來告訴用戶操作結果。
2、頁面
用頁面來完成反饋也很常見。
與彈框相比,頁面反饋的更傾向于是一個流程的終點站。如我們在淘寶中完成訂單之后會跳轉到訂單詳情頁,頁面包含的信息更多。所以,對于頁面和彈框,我們可以做出以下總結:頁面反饋的主體是操作流程,而彈框反饋的主體是操作行為。也主要是在操作結果場景中使用。
3. 標簽
標簽在反饋體系中同樣占據一席位置,不過它的使用場景比較單一:主要用于表單,用戶錄入信息的過程可以提供逐行報錯提示。標簽能給予更有指向性的提示,而不需要用戶去查找是哪里出錯。
4. 動畫
動畫的合理使用可以吸引用戶的注意力,因為人類都是視覺動物,用動畫反饋更能吸引用戶的注意力,在用戶等待的時候不至于時刻關注時間,使用戶不會產生等待太長的焦慮。主要應用在任務進程等場景中。
5. 聲音
聲音是我們最常見的反饋方式,iOS下載的時候會叮咚的一聲,表示開始下載。聽到這樣的聲音用戶就覺得很爽,提升了用戶體驗。操作確認和操作結果場景中都可用到。
6. 反饋原則
首先我們需要找出所有需要反饋的場景,然后進行優先級的排布,將重要的信息優先使用頁面和(模態)彈框來展示,然后依次使用(非模態)彈框,標簽和動效來展示。我們盡量能盡可能完全的向用戶展示信息又做到不過分打擾用戶,站在用戶的角度提升用戶體驗。
總結
在工作中我們會遇到很多體驗不好的地方,要在工作中思考總結學習才能提升自己的產品能力。
這篇文章借鑒總結了一些大神的佳作并自己總結了一下;思考之后還需要經常把玩各種產品,體驗各個產品的不同之處和相同之處,細細體會,慢慢學習,逐步成長。
本文由 @酒歌 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
- 目前還沒評論,等你發揮!