人機交互系統(tǒng)模型應用實踐分析一、背景

我們在談用戶需求的時候往往帶出來一句，你有沒有考慮用戶場景？那什么是用戶場景呢？

用戶場景是由人物、地點、時間、動機、行為五大要素構成的。我們通過這些要素分析用戶，來辨別需求真?zhèn)危羁汤斫猱a品需求，關心理清強弱場景。

“人機交互系統(tǒng)模型”主要用于對“行為”的梳理。舉一個例子來理解“行動”元素：A打開賓館房門，屋內一片黑暗。他走進去打開了電燈。通常我們會這么理解其中“行為”：“打開房門”、“走進去”、“打開電燈”。

但是實際的狀況要簡單得多。比如“打開電燈”這個行為，實際狀況可能是：

A首先要知道電燈在什么地方；A想了想之前的閱歷，燈的開關一般放置在入口兩邊的墻上；A先伸手往左邊墻上摸了摸；運氣真好，一下子就摸到了；那這個燈應當怎么開呢，之前的燈一般是按下去就行了；按下去沒有反應，應當說根本按不下去；然后嘗試左右滑動，結果能向右滑動；燈亮了起來。可以看出一般我們對行為的理解比較粗略，沒有以小顆粒度的視角理解人的行為?！叭藱C交互系統(tǒng)模型”是著眼于以較小的顆粒度，梳理出用戶使用流程及心理活動再進行分析的工具。

二、什么是人機交互系統(tǒng)模型

人機交互系統(tǒng)中，一般的工作循環(huán)過程可由下圖所示。人在操作過程中，機器通過輸入設備（如顯示器、喇叭等）將信息傳遞給人的感知系統(tǒng)（如視覺、聽覺等），經中樞神經信息的感知處理對信息進行傳遞，思維處理器對信息進行處理和儲存后，再經反應處理器指揮人的反應系統(tǒng)（如手指、嘴等）操縱機器的輸入設備，掌握機器的信息處理，然后循環(huán)往復，直到完成目標任務。

核心：以較小的顆粒度，梳理出用戶使用流程及心理活動。

尼爾森·諾曼在《設計心理學》中提出了行動的七個階段：目標、方案、確認、執(zhí)行、感知、詮釋、對比。而《GB/T29836-2022系統(tǒng)與軟件易用性》中人機交互系統(tǒng)模型是參考了“行動的七個階段”。并對它進行了簡化，以更好地應用在實際項目中。

三、模型實踐應用

1.問題背景

映兔app中原本應當消失商家后臺上傳的圖片文字介紹部分內容，但實際顯示“上傳中”，某個地方消失了問題。

2.確定問題范圍

借助測試的關心推斷這是前端問題，后端問題還是設計問題。測試反饋，由于用戶在使用“網絡圖片”上傳圖片的時候，使用了錯誤的地址，導致無法正常得顯示圖片。這屬于設計需要解決的問題。

四、解決方案

1.人機交互系統(tǒng)模型應用

從人機交互系統(tǒng)模型中，我們可以把這一連續(xù)的過程分為“感知”、“認知”、“反應”、“反饋”四個方面。下面就從這四個方面，來分析用戶在輸入“網絡圖片”信息前后的使用流程及心理活動。

步驟一：眼睛掃瞄到“上傳圖片”、“網絡圖片”和“插入代碼”三個上傳方式（感知）

步驟二：在三個方案中比較哪一個更好（認知）

步驟三：推斷“網絡圖片”在三個里面最便利（認知）

步驟四：把鼠標移動到“網絡圖片”按鈕（反應）

步驟五：跳出Popover（反饋）

步驟六：觀察消失的Popover彈窗，觀察一個input和“插入”按鈕（感知）

步驟七：理解input要的內容，理解“插入”按鈕（認知）

步驟八：往input中輸入內容（反應）

步驟九：輸入完后，點擊“插入”按鈕（反應）

步驟十：下方消失圖片內容（反饋）

步驟十一：看到下面的網絡圖片內容（感知）

步驟十二：認知下面的網絡圖片內容是否符合需求（認知）

步驟十三：完成確認后，點擊“提交”按鈕（反應）

步驟十四：顯示創(chuàng)建勝利（反饋）

2.問題分析

用戶可能在什么地方出了問題，導致輸入了“非圖片地址”？從“感知”、“認知”、“反應”三個元素分析。只需要考慮步驟五到步驟十四，由于用戶既然使用了“網絡圖片”上傳，肯定已經進行到步驟五了。

3.感知

1）觀察消失的Popover彈窗，觀察一個輸入框和“插入”按鈕（感知）

看法：能明顯觀察，即使看不見也不會導致輸入錯誤圖片地址狀況。非相關。

2）看到下面的網絡圖片內容（感知）

看法：出錯的狀況下，可能不簡單觀察“非正?！钡膱D標。弱相關，可以進一步分析。

4.認知

1）理解input要的內容，理解“插入”按鈕（認知）

看法：用戶可能不理解要輸入的內容。強相關，可以進一步分析。

2）認知下面的網絡圖片內容是否符合需求（認知）

看法：用戶對現有圖片的“非正?！狈答?，認為是正確的。需要更明確告知用戶，現在是錯誤的。強相關，可以進一步分析。

5.反應

1）輸入完后，點擊“插入”按鈕（反應）

看法：點擊錯誤可能造成效率上的問題，和填寫錯誤的鏈接無關。非相關。

2）完成確認后，點擊“提交”按鈕（反應）

看法：同上。

6.再分析

1）針對認知1，要讓用戶理解輸入的內容是什么。

2）針對認知2，當消失錯誤的時候，要更明確告知用戶上傳出錯。

3）針對感知2，可以把非正常上傳的圖標明顯化。

五、方案供應

從易用性的角度理解，認知對應的是“易理解性”，感知對應的是“易發(fā)覺性”。我們可以用對應的方式來增加易理解性和易發(fā)覺性來解決問題。以下方案僅從易用性的角度考慮，不考慮視覺效果以及開發(fā)實現。

針對認知1

方案一：

給出更多的提示內容。下面是在“商品詳情”下使用了線索說明，提示用戶網絡圖片的錯誤狀況。

方案二：

給出更多的提示內容。下面是在“網絡圖片”下使用了線索說明。相比于方案一，與上傳“網絡圖片”的操作區(qū)域更加靠近。

針對認知2

方案三：

從“頁面實際掃瞄效果”的文案來提示用戶，現在的是非正常上傳。并且信息所在的尺寸更像手機上掃瞄的效果，進一步強化這種感覺。

方案四：

從技術上推斷所填寫的圖片鏈接是不是“可用的”。假如檢測到不行用，就使用message/error提示用戶上傳鏈接錯誤。

針對感知2

方案五：

也可以強調非正常上傳的圖標，甚至到一個離奇的尺寸。用戶不得不看到它，然后意識到現在上傳的狀況不對。哈哈。

六、總結

人機交互系統(tǒng)模型作為思索問題的模型，能夠關心我們從認知心理學的角度對問題進行細致地拆解。在使用的