互動設計|如何做好操作反饋規範的設計?

2020-12-06 人人都是產品經理

互動設計中的操作反饋設計,要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值,能多大程度地優化用戶的體驗效果?

規範,意指符合邏輯,客觀、真實、全面、完整、準確、及時,達標。明文規定或約定俗成的標準, 使某一行為或活動達到或超越規定的標準。設計規範的制定都帶有很強的目的性,一份規範的制定不僅是對產品自身有利,對設計研發團隊以及用戶都是有諸多顯著的好處。

什麼是互動設計中的操作反饋?

設計規範中的操作反饋規範的制定,實則就是將用戶操作APP後的行為給出一致性的反饋,讓用戶的每一步操作都有明確的感知。

操作反饋則是指:用戶在使用產品時,產品系統對用戶操作,或因用戶的行所致的變化,系統給出用戶視覺、觸覺或聽覺感官上的反饋,它是體現人與「機」交互的關鍵場景。

那為什麼我們需要操作反饋呢?

其實道理很簡單,就是要給用戶明確的回應,試想在生活中,如果你問某人一件事情,結果對方無動於衷,毫無回應,你會不會覺得莫名其妙,甚是不爽呢?

所以,幫助用戶及時感知產品系統的狀態,告訴用戶下一步會發生什麼,接下來應該怎麼繼續操作,再或者幫助用戶做出判讀和決定,這就可以大大滿足用戶在使用APP時的控制感和存在感,同時可以消減不確定性帶給用戶的負面體驗情緒,從而提升用戶體驗。

那在多職能合作的研發團隊中,設計師給出優質的操作反饋規範就顯得更加重要了,這樣既可以幫助設計師和前端開發,亦或者是產品測試等提高工作效率,也可以提高產品品牌氣質。

互動設計中的操作反饋規範和視覺設計中的視覺設計規範的側重點是不一樣的。但是,不管是從什麼角度來制定設計規範,其目的都不是為了規範而規範,而都應該是為了用戶、產品研發團隊和產品本身去產出優質的規範文檔。

每一項的操作規範都要站在用戶和產品角度考慮,操作的反饋給用戶的體驗帶來什麼好處,給產品的品牌氣質提升帶來何種價值。

現在市面上有相當部分的產品在用戶操作行為後是無反饋的,再細緻的來說可能是設計不仔細,因為統一類型控制項中有些操作後是有反饋的。但是,有些操作後是沒有反饋的,比如:網易雲音樂iOS6.1.0版本、閱讀應用ONE的iOS4.6.2版本、搜狐旗下社交產品狐友的安卓2.6.0版本等,就存在很多控制項在用戶操作後無反饋的問題。

圖1 網易雲音樂界面截圖(iOS6.1.0)

如上圖1,黃色框標出的按鈕,是出自於網易雲音樂iOS6.1.0版本中的不同頁面的同一類型按鈕,但是一部分有操作反饋,一部分沒有。

記得在網易雲音樂iOS6.1.0版本剛發布後,我滿懷欣喜去體驗新版本,在左右滑動頂部一欄功能按鈕時,一不小心擦碰到了「私藏推薦」按鈕,然後給我彈出一個小程序……

由於非首次進入「私藏推薦」這一小程序主界面,所以再次進入時並沒有明確標題顯示,小程序主頁面也沒有標題的明顯露出。我當時就是疑惑了,思量著是我不小心點擊了上一級頁面中的哪一個功能按鈕呢?

於是,我帶著疑惑退出小程序,在我的音樂頁面又帶著疑惑情緒猜想:是不是「私藏推薦」呢?畢竟小程序頁面有「推薦」這一關鍵詞,點擊進入後發現的確是剛才所見頁面。

以此我發現:此功能按鈕點擊長按後沒有任何操作反饋,所以,我更加明確了放大了我的疑惑和猜想情緒的原因。

如果有明確的操作反饋,即使我沒能瞬間記住功能按鈕的名稱,也最起碼可以感知到誤操進入的小程序是我不小心點擊了頁面中哪個位置的按鈕才發生了頁面跳轉。從而,在我返回上一級頁面時,可能我不一定能準確的記得是點擊了哪一個按鈕進入的頁面,但是有個明確的反饋後,我可以明顯的感知到是頁面那個區域、那個位置的按鈕或控制項給予了我反饋提示。即便操作反饋微弱,也是可以給出用戶反饋提示的,從而大大消減用戶的疑惑和不確定情緒。

無論Google公司推出的Material Design,還是蘋果公司的iOS設計規範,都對用戶操作反饋做了很細緻的處理,同時國內社交應用QQ的操作反饋的情感化設計也做的極好,大家可以手勢拖拉tab按鈕或消息提示紅點細細體驗一下。

圖2 iOS控制項操作反饋

由此可見,操作反饋沒有,不影響用戶正常使用APP,但是有了操作反饋,對用戶的使用體驗卻有一定的輔助作用。那對於一個追求為用戶提供極致體驗感受的設計師來說,為用戶提供適當的操作反饋就尤為重要了,那怎麼產出一份優質的操作規範呢?

操作反饋規範設計的思路

對於解決一個問題時,我們首先就是要充分了解問題本身,怎麼充分了解對於「操作反饋」這一問題呢?

我們可以用一個簡單的辦法——擴充法,就是將語句「操作反饋」擴充成完整的一句話,將主、謂、賓補充完整。

擴充完整後的句子如:「用戶在操作APP時獲得到的反饋提示」;用戶輸入操作命令,再通過APP,結合平臺特性輸出反饋;有輸入有輸出,形成一個信息收發閉環。

圖3則為APP操作反饋規範的架構,此架構可以適用於絕大多數的APP操作反饋規範的建立了。

圖3 操作反饋規範架構

1. 輸入:用戶操作

現階段常見用戶使用APP的操作行為都基本不會逃脫觸屏類手勢操作、非觸屏類動作操作和語音操作三類。

當然對於智能設備的輸入操作不僅僅局限於以上三中輸入方式,也有VR頭戴式設備中的眼動操作,以及一些體感動作操作等。

觸屏類手勢操作比如點、按、拖、拉、拽等;非觸屏類動作操作比如搖一搖、抬臂亮屏等;語音操作更好理解就是語音控制產品等。但是,用戶對智能設備以及APP的操作行為不局限於此,根據產品功能和隨著技術的發展用戶操作類型也將更加多樣,只要視情況擴充用戶操作類型即可。

2. 媒介:系統平臺

在考慮APP反饋時,產品控制項是基於native中的iOS系統實現還是Android系統實現,亦或是在H5中實現,這是首要考慮的,因為很多產品會依據不同平臺特性對用戶操作反饋也給予了差異性設計。從而,根據不同平臺對用戶操作後應該給予用戶反饋提示的控制項做出類型的劃分。

至於控制項類型,設計師可根據具體情況去劃分,重點是要知道在APP中那些是用戶會進行操作的控制項,那同一屬性的控制項給出一致性的反饋就可以。

3. 輸出:操作反饋

智慧型手機是APP的主要載體,那基於手機的反饋方式主要分別為視覺反饋、觸覺反饋和聽覺反饋三種方式。

視覺反饋:

人類在探索和認識外部世界的過程中,80%的信息是通過視覺提供的;視覺器官在接收外界刺激候,由視覺中樞參與形成視覺感知反應和回饋的過程。視覺反饋主要是通過視覺差異來提示用戶,比如:色彩、形狀、動畫等等。

觸覺反饋:

能通過作用力、振動等一系列動作為使用者再現觸感;通過觸覺接受機器提示。智能設備給予用戶的觸覺反饋主要是震動和壓感等感覺。

聽覺反饋:

聽覺反饋是指聽覺器官聽到的聲音信息,人類大腦皮層顳橫回的聽皮層為最高的聽覺中樞,聲音聽覺反饋能力屬於人類聽覺能力的一個重要部分。智能設備給予用戶的聽覺反饋主要就是發出各種聲源。

對於一個軟體應用APP來說,它獨自能給出的反饋僅僅只有視覺反饋,而觸覺反饋和聽覺反饋都需要基於智能設備輔助完成。所以,視覺反饋也是APP最主流的反饋方式。

根據這個思路就可以分門別類的創建一份架構清晰的規範了,具體的實踐可以根據實際產品特點和實際情況增刪更改具體項。但是,對於大多數的APP的操作反饋規範創建來說,以這個思路拆分任務和創建規範表格都是夠用的,例如圖4示例,重點是要在規範中體現輸入行為、媒介平臺和輸出反饋三部分內容。

圖4 操作規範示例

總之,隨著產品的而不斷迭代更新和發展,以及研發團隊人員的不斷更替,對於用戶使用APP的操作反饋必定會出現以下遺漏、缺失或不合規的情況。

同時,由於操作反饋是個很細節的問題,難免會成為一個未被發現的「黑洞」,所以定期對產品做系統性的操作反饋提示走查和優化迭代也是極為必要的。那如何走查?上面給出的操作反饋規範思路一樣適用於此。

規範不意味著僵化

最後的最後,不得不提及《about face4》這本書中的一句話:我們應該如何對待界面指導準則?

與其問我們「是否應該遵守標準」,不如問我們「應該什麼時候打破標準」更有用。」所以,不要讓你的規範成為一塊兒「化石」。我們依然要秉持著開放和與時俱進的心態來看待操作反饋這件事情,操作反饋也要同產品不同階段的品牌氣質做協同發展。同時要明確一點,即:任何設計規範往往都是一致性原則的產物。但是,一致不是一成不變,規範也不意味著僵化。

本文由 @一隻船 原創發布於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

相關焦點

  • 互動設計 | 如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計,要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值,能多大程度地優化用戶的體驗效果?設計規範的制定都帶有很強的目的性,一份規範的制定不僅是對產品自身有利,對設計研發團隊以及用戶都是有諸多顯著的好處。什麼是互動設計中的操作反饋?設計規範中的操作反饋規範的制定,實則就是將用戶操作APP後的行為給出一致性的反饋,讓用戶的每一步操作都有明確的感知。
  • 互動設計的最後一公裡(一)——動效設計
    滿足用戶心理需求是對互動設計的完善與補充,包括引導用戶操作、對用戶的操作進行反饋等;提升產品的用戶體驗是互動設計的升華,包括減少用戶在使用過程中的不適感,增強產品的操作流暢度,提升產品的氣質。動效設計的操作功能是對用戶需求的滿足以及操作的反饋,讓用戶操作流程成為一個銜接緊密流暢的閉環。幫助引導與展示層級都有利於用戶易懂、易操作,幫助用戶快速理解頁面主次關係以及操作方式等。高效反饋是對用戶操作完成後的相應反饋,無論操作的成功與失敗,都應該給與用戶明確的結果並引導用戶接下來的操作。
  • 分析Google、微軟、蘋果設計規範的異同點
    material design 四大設計原則Material Design受物理世界及其材質的啟發,包括它們如何反射光線和投射陰影。材料表面重新想像紙張和油墨的介質。同時也分享了7個不同類型的app,是如何運用material design 保證界面設計的一致性下還能突出品牌調性,所以material design更偏向與設備界面的視覺設計規範。對於視覺設計師、互動設計師深入學習material dseign是有必要的。
  • Apple 的設計哲學:交互篇
    蘋果是一家為數不多以設計驅動的公司。如今,當我們談論起產品設計、談論起用戶體驗,總是離不開蘋果,它所堅持的設計哲學是對細節和質量的極致追求。下面,我就帶大家看看 Apple 在交互方面做的努力。
  • 關於交互Demo設計的一些建議
    為方便產品經理、設計師、開發及項目相關人員能夠看到直觀的效果,進行更有效的溝通;提供直觀的產品設想,說明用戶將如何與產品進行交互,在互動設計的過程中一定會產出各種各樣的產出物,如流程圖、思維圖、紙上的草稿、甚至高保真演示稿。這裡簡單分享下自己在項目過程中的交互Demo設計的一些心得。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    如何通過界面元素間的位置關係引起用戶注意,從而快速有效地感知並獲取目標信息是界面設計的重要方面。從設計角度來說,應當使設計內容容易被發現、容易被識別。認知摩擦闡述的是因認知的差異性導致基於產品開發的界面變得複雜,用戶難以通過界面表象理解程式設計師的意圖,執行任務過程存在困難如標籤或導航的認知不清晰、操作反饋得不明確或不及時,得不到預期效果等問題。相對於物理世界中的摩擦現象,認知摩擦則是因為信息化程度的不斷加深,由信息膨脹導致人機互動界面設計不良的一種現象。
  • 解讀交互稿模板:如何讓設計稿更規範化?
    交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?PS:本文適用於移動端,Axure軟體製作的文檔型交互稿。交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?各個界面應該如何擺放?清晰易讀的設計說明應該是怎樣的?想必作為一個新人,很難完全弄清上面的問題。
  • 譯文|如何通過聲音設計增強移動交互?
    本文主要關注交互式聲音設計,這還是一個鮮為人知的學科領域,那如何通過聲音設計增強移動交互呢?當我和別人討論聲音設計及它在Facebook所扮演的角色時,很多人一開始是看起來一臉茫然的。「聲音?Facebook?」他們問道。我個人是可以理解他們的,大多數時候,對於我們聽到的聲音,人們不會有意識地去思考其背後的意義。
  • 騰訊高級設計師:交互知識樹系列之平臺規範
    從這三點可以明顯看出 iOS10 的設計特點,它圍繞著自己的高清屏幕、毛玻璃效果以及扁平化的設計風格,制訂了核心設計原則。你不妨對照這三條原則,再去看手機裡的作業系統,你能發現蘋果的設計師們是如何嚴格遵守這些原則,從而設計出獨具特色的界面交互的。
  • 如何進行環境級AR體驗設計?
    因此,我們在設計泰山智能景區方案時,通過文字話術,加以動態圖標的引導形式,明確告知用戶如何進行操作體驗。並在識別過程中,給與識別動態反饋,使用戶有感知有心裡預期,實時了解當前處於什麼狀態。由於天氣、網絡等都一定程度的影響識別成功率,因此,我們制定策略,擁有良好的容錯性,並及時的提示用戶給與合理的引導操作。
  • 三種界面交互類型,四種隱喻設計方法
    本文作者歸納了隱喻設計類型和隱喻設計方法,與你分享,enjoy~隱喻設計是一種常用卻很少有人提及的概念,人們往往身在其中卻不知究竟為何物。簡單說,隱喻設計它可以將現實生活中用戶熟悉的事物以多種形式映射到界面中,從而使用戶不熟悉的概念、陌生且複雜的操作等變得熟悉與簡單。它不等同擬物設計,隱喻是一個大的概念,界面中充斥著不同的隱喻元素。
  • 信息維度與互動設計原理
    互動設計從注重操作界面的軟面,發展到用戶界面,再到人機互動,進而從技術轉向用戶,關注用戶體驗與服務設計的商業模式,互動設計的原理有著前世今生的發展歷程,每一次稱謂的改變,都對互動設計定義的內涵外延進行了系統深入的改變,互動設計的研究內容與範圍也得到同步的場域改變,在大數據智能資訊時代,互動設計的原理與設計方法,突破了人類智能感知、認知、行為的單向邏輯關係,在原子與比特原生數據的原點,推進了互動設計向不同的發展路徑進行重構演進
  • 互動設計原則:如何用好的設計留住你的用戶?
    視覺層次能夠呈現出頁面中不同元素之間的優先級和關係,在設計的時候,同樣需要遵循下面的幾個原則:梳理主要流程,將功能劃分出主次取捨功能操作,突出主要操作流程,弱化次級功能通過視覺表達層級關係:重要的元素需醒目;邏輯上關聯的元素,在視覺也應相關層級不能太多,三級以內較合適,四五級的層級界面會讓用戶找不到重點。
  • 設計原則總結:最全的互動設計原則和理論匯總
    設計是有原則和方法論的,鑑於網上各種文章和原則比較零碎,這次統一將互動設計的方法和理論匯總,不足之處也希望各位能夠提出,一起補全。尼爾森可用性原則尼爾森的十大可用性原則是產品設計與用戶體驗設計的重要參考標準,值得深入研究與運用。1.狀態可見原則用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。「即時」是指,頁面響應時間小於用戶能忍受的等待時間。
  • 互動設計法則——為顯性信息設計響應
    當用戶對一個界面採取手勢或全局操作時,我們應優先響應用戶操作位置上最醒目的界面暗示,並給出與界面暗示相一致的操作反饋,這樣才更符合大多數用戶的預期。·請先觀察3秒鐘,看一看你的直覺反饋是怎樣的?……按照大多數人的反饋,向左滑動頁面,都會期待新聞Tab從當前的For you,變成Video。因為這是移動端系統對於多tab非常典型的手勢操作響應,多數用戶已經被培養出來了這樣的習慣和預期。
  • 汽車人機互動設計,業內人士是怎麼看的?
    前幾天,車轍君參加了一場由汽車財經網與同濟大學"創業谷"舉辦的首屆"中國汽車互動設計(國際)論壇",非常有幸聽到了來自全球各領域專業人士對汽車互動設計在行業發展應用的看法,也大概了解到了現階段汽車互動設計的一個概況,借著這個機會,願結合自己對汽車互動設計對智能汽車影響的一點看法和大家分享一下。
  • 互動設計:網易雲音樂的抱一抱功能
    畢竟如果要有交互上的反饋的話,一種思路是再次彈一個toast說「xx收到了你的抱抱」,另一個思路就是抱抱的數目+1,這兩種反饋都能滿足我給這位用戶抱抱的一個交互的心理預期。而且雙擊+1的思路在其他應用中也曾經被教育過,這裡是否復用呢?很遺憾,也不是,這個圖案做的這麼大這麼明顯,但目前不支持任何交互。
  • 反饋型電阻的工作原理是什麼?如何設計一個電阻快速反饋電路?
    打開APP 反饋型電阻的工作原理是什麼?如何設計一個電阻快速反饋電路? 發表於 2017-06-05 17:33:50   反饋型電阻的工作原理是什麼?   在一些情況下,全差分電壓反饋型放大器的穩定性似乎受反饋電阻值很大影響—RF/RG比始終正確,這到底是因為什麼呢?
  • 老齡化產品設計(二):老年人產品的顏色、圖像、排版、交互、導航設計
    老年人群體和年輕人群體有很多的不同,在產品設計上也需要有很多區別。之前有分析過老年人的用戶群體特徵,這篇文章我們來看看如何針對老年人群體做產品設計。年輕人焦慮時間飛逝,搬不完的磚、加不完的班、學不完的Knowledge、趕不完的Deadline。聊微信刷微博玩抖音看知乎,在碎片化的時間中刷微博。
  • 建築設計消防驗收規範_2020年建築設計消防驗收規範資料下載_築龍...
    小編今日為大家整理了一份關於消防各類規範大全,分享給大家,夥伴們可以根據自己的個人需求購買相應規範學習。如有遺漏望大家留言補充。  1.建築設計防火規範 GB50016-2014(消防必備規範) 2.汽車庫、修車庫、停車場設計防火規範 GB50067-2014(常用規範) 3.人民防空工程設計防火規範 GB50098-2009 4.火災自動報警系統設計規範 GB50116-2013(常用規範) 5.火災自動報警系統施工及驗收規範 查看詳情