【產品互動與體驗設計-單元 3】人機互動設計入門

ux.3toryu
UX 三刀流
Published in
25 min readOct 31, 2022

這裡是 UX 三刀流,我們透過分享系統化的知識與大家交流 UX。

在這邊你可以獲得與 hahow 課程相同的文字版內容;並且我們不定期舉辦免費的講座、AMA、共學讀書會。關注 UX三刀流 Telegram 才不會錯過最新的消息和學習資源,並和其他 Uxer 交流!

這是一門結合用戶需求設計的先見、商業思維以及數據分析的產品設計課程。在這個單元會和各位介紹使用者體驗設計最需要知道的理論基礎,人機互動設計,分為兩個重點:

1. HCI — 架構人與電腦的對話
2.
人機互動設計的範疇及應用

讓我們在開始前看一段小情境:

人與機器的對話

學了一系列產品相關的設計課程後,產品菜雞已經對於同理心有一定信心的掌握了,説道:「我們用同理心方法掌握了用戶需求,但即便如此,要怎麼把這些需求用到產品的設計上呢?」總監回答:「其實,了解使用者體驗的設計需求只是產品設計的其中一部分,還需要另一端的產品能夠符合人們的期待,兩部分一起形成才能夠讓產品順利的跟使用者進行溝通。」「溝通??但軟體是機器又不是人,也不會說話該怎麼跟用戶溝通呢?」菜雞進而追問。
「我們平常透過鍵盤上的按鈕跟機器互動,機器也透過螢幕上的顯示內容與我們溝通,此時就在進行一個人跟機器之間的對話了!」總監回應了菜雞的疑問。

產品上的顯示與輸入的裝置確實幫助我們順利的與機器溝通,此過程即人跟電腦的互動,我們溝通的橋樑為使用者介面,而不同形式的溝通為互動的設計,介面跟互動設計其實就是在架構人與機器溝通的橋樑。

一、HCI — 架構人與電腦的對話

Human-Computer Interaction (HCI)

人機互動 Human-Computer Interaction (HCI) 是一門研究人與電腦互動的科學,因現在的體驗設計多探討電腦相關的應用,因此 HCI 便是使用者體驗設計者必學知識之一。人機互動是一門跨領域的科學,包含電腦科學、人因工程跟認知心理學等等幾大範疇。
由於關係到電腦產品以及電腦上的互動裝置研究及設計,所以電腦科學在此為要角之一,而因人與機器互動有另外一個重點即使用者,所以認知科學心理學在人機互動的架構裡扮演了另一個要角。人因工程則架構著使用者體驗設計,包括人、互動的事物以及人造物之間的整體關係,因此,在人機互動的架構裡,人因工程是一個不可缺少的重要元素。

大學科系中包含資訊工程、資訊科學系、工業工程系以及心理系等都會有人機互動相關的課程,而還沒有使用者體驗設計這一說法前,人機互動大概為整個體驗設計最早的知識範疇,因此我們會認為使用者體驗設計是一路從人機互動設計所演化而來的,但由於電腦科學、人因工程以及認知科學在切入人機互動的視角並不相同,大家對於 HCI 以及使用者體驗設計的理解也就有重點之分,常見的人機互動多用 HCI 這個名詞來代表,各位有時候也會看到 CHI(Computer-Human Interaction)唸法為〔 kai 〕,CHI 是由馬里蘭大學教授且為知名的人機互動設計專家 Ben Shneiderman 於 1982 年召集了一系列電腦科學、人因工程的研究者所舉辦的一個研討會,稱為人因工程在電腦系統應用的研討會,而 1982 年迄今,每年 CHI 的研討會幾乎聚集了全世界在人機互動設計上最頂尖的研究者,大家在研討會上分享彼此的所見以及最新的想法。

互動循環

我們可以用 Don Norman 所提出的互動循環解釋 HCI 的核心思想,如上圖,當人們因特定意圖開始執行特定任務且需要透過電腦系統來幫忙完成時,使用者透過電腦系統下指令使系統執行特定任務,而系統在執行任務之後,會對使用者提出反饋以讓使用者了解並且評估系統是否達到當初所預期的任務。

此循環可以有非常多次,而這一個互動循環也代表人跟機器的互動是透過人有了意圖跟動機,執行特定的任務所驅動整個人機互動的過程。

Don Norman 所提出行動七原則

以 Norman 所提到的行動七原則來看:

> 執行階段組成元素
1. 確認目標 > 2. 形成意圖 > 3. 將執行順序具體化 > 4. 執行動作

人們因有了欲達成的目標而在其心裡形成想達成的行動意圖,接下來開始拆解達成目標的具體所需程序,再開始透過執行動作一步一步完成此程序。

> 評估階段組成元素
1. 感知系統狀態 > 2. 解析系統狀態 > 3. 評估系統狀態

每個動作執行的過程中,系統自然會提供不同訊息回饋,而對於這些訊息的狀態、訊息的內容、結果的回饋,人們則用自己的感官來進行接收、解釋以及評估系統的狀態決定是否繼續往下執行下一個動作。

Don Norman 所提出行動七原則

而當這個互動循環被建立在電腦上,我們常用人機介面作為使用者與機器之間的互動橋樑,在上述例子,人們為了讓系統幫忙達成自己期待被執行的任務而對系統下達指令,此指令下達於介面之上,介面就會將人們所傳達的命令轉變成對於系統控制的指令或者是程式,這時人們可以判斷系統是否符合當初期待控制的表現是否符合操作上的預期。

系統接收到人們的指令後,開始依照程式所設定的邏輯、判斷以及回饋方式提供不同的結果呈現,而這個結果的呈現又再一次顯示於介面之上,介面呈現了結果的產出,而人們再透過自己的感官觀察介面上結果的產出。

再舉個例子:
夏天時,剛回到家覺得空氣非常悶熱,希望能夠有一個涼爽的室內空氣,於是決定要啟動冷氣。
>> 覺得天氣熱以及想要啟動冷氣是你的動機與目標,為了啟動冷氣要透過遙控器來控制冷氣。

在遙控器上,你按下了電源按鈕,
>> 你對遙控器輸入了打開電源,此意圖透過遙控器的輸入介面傳達,執行了希望冷氣打開的命令,當遙控器收到你的指令後,會透過紅外線或者是電波對於冷氣進行溝通進而打開冷氣。

在這時候發現冷氣似乎沒有動靜,
>> 你判斷了遙控器是否運作正常,例如:方向沒有對準或者是電量不足以致無法順利打開冷氣。

冷氣在你調整之後成功啟動,可以開始享受涼爽的室內空氣了。
>> 當冷氣接收到來自遙控器的輸入指令正式啟動後,會將結果呈現到介面上,讓你感受到冷氣已經啟動的狀態與事實,通常,我們會觀察冷氣的儀表板燈號,從未顯示到綠燈或紅燈的時候,你會知道冷氣已經透過遙控器被你打開了。

我們在設計介面跟人的互動時,也會為了避免人們取得系統狀態的難度或是偏誤的產生,進而設計了多種呈現方式,例如:當遙控器打開冷氣時,除了看到燈號亮起外,是否也會聽到嗶 — 的一聲,這也是系統狀態結果的一種轉換,透過了聽覺的介面在冷氣機裡面的喇叭蜂鳴器發出了聲音,讓你知道現在冷氣已經被打開了。此外,也可以從物理性質的特性來看,例如:冷氣開啟時的風扇、壓縮機的運轉聲音都一樣代表系統告訴你冷氣已經打開的事實。
可透過你的眼睛或者是耳朵觀察剛剛由系統所提供的不同介面訊號,幫助你評估先前所發起的行動方針以及執行系統的目標是否有順利完成。
你透過觀察整個環境以及介面上呈現的結果對於操作任務進行了一個評估來決定下一個動作,這裡就是一個完整的互動循環,

從人們起心動念到對於介面上的輸入裝置;系統對於介面提供的訊息傳遞到介面的顯示裝置,對於使用者之間的訊息提供,串起一連串的人機互動流程。

此時,你發覺開了冷氣後,溫度似乎依然還有點高,
>> 你希望進一步的降低空氣裡面的溫度,所以想把冷氣設定的溫度再往下調低,此時你會展開第二輪的行動操作,而這次你的意圖是降低冷氣的溫度設定。

於是再次拿起遙控器調降溫度,為了一定要享受涼爽的室內空氣。
>> 所以你再次拿起了遙控器,對於遙控器上輸入的介面,可能是數字鍵、上下調整溫度的方向鍵等,而按壓按鈕對冷氣機下達了調節溫度的指令,此時遙控器上顯示的數字及冷氣上的溫度數字,以及每一次你按壓按鈕所聽到的嗶嗶聲都一再傳遞著系統的回饋讓你知道,而你也透過這些系統的回饋觀察操作結果再來決定下一步的互動。

Don Norman 所提出行動七原則

現在各位可以知道人跟機器的互動即使如此單純卻又能被拆解的非常細膩、細微,當中包括了心理面層次、人與電腦互動面層次以及訊息傳遞層次,以上都是我們在設計電腦互動產品時必須要考慮到的使用者體驗設計元素。

雖然我們號稱能直接與電腦溝通,實際上卻並未與電腦直接連線,也沒有將腦波直接傳遞到電腦的處理器中心,而是透過自身感官與電腦的感知器進行互動,所謂的感官就是眼睛、耳朵、鼻子、手、嘴巴或是皮膚的感受,而電腦能夠接受你的訊號是因電腦有滑鼠、鍵盤、搖桿或者語音輸入等等,不論觸覺壓力、燈光、聲音或者是觸控的感知裝置等來接收人們想對於機器執行的指令,所以各位可以了解人機互動其實是由人的意圖所主導,因為我們要去執行特定的任務對於系統進行互動,所以意圖決定了整個人機互動的操作架構,人們因為有了操作意圖所以大腦就對擁有控制能力的器官傳遞指令,例如:聲控是透過嘴巴發出聲音來控制;按鈕是透過手指來進行控制。而擁有控制能力的器官就能對系統的輸入介面進行指令的傳遞,同樣,當電腦提供狀態的回饋時,若狀態顯示在螢幕上,你是用眼睛看到的;若是如剛剛冷氣所發出的嗶嗶聲,你是用耳朵聽到的;又或者是系統透過手機震動傳遞給你,你是透過手來感受到震動的訊號而了解系統的狀態等等,這些都是察覺外界訊息變化的能力,也都是人的根本能力。

這也是為什麼有一些產品設計在顧慮高齡者時,特別需要考慮到介面的設計,因問題不在於介面本身而是高齡者本身在肢體感官的察覺能力相對衰退,既然我們無法有效的提升高齡者的感官能力,就可從透過調整介面的設計讓訊息接收可以更順利,這也是有些訊號需要特別大聲的緣故,為了讓人順利聽到,至於為什麼介面上有些顯示的內容要閃爍或者是用高度的對比,是在緊急的時候希望人們能夠用眼睛順利看到的原因。

綜上所述,這也即是各位在學習人因工程時,要花時間了解人的根本能力之背後原因,以上敘述完人機互動“人的部分”,還有另外一段“機器的部分”。

雖然生活上有各種不同的操作與控制的裝置扮演著轉化人們命令的角色,來告訴電腦你所想執行的事情。例如:在玩電腦遊戲的時候,按鍵按下了跑步的按鈕,電腦端的角色就進行跑步,這是因為你期待產生的意圖跟念頭希望遊戲裡面的角色能夠進行跑步,所以你透過了指令的傳達,將這個指令的傳達透過搖桿上面的輸入裝置傳遞給遊戲器,而遊戲軟體則接收了你所傳遞的資訊進行反饋,你所看到畫面上的角色就會開始跑步。

反饋器除了常見的螢幕之外,像是,語音智能音箱(一個能夠與你對談的喇叭),也能夠透過喇叭傳遞聲音給你;手機的震動或者是 VR 眼鏡所構成的虛擬實境都是透過不同系統將訊息傳遞給反饋器,這些反饋器能夠用人們的感官接受與處理的顯示方式讓人們了解系統想要對人傳遞的狀態跟訊息。

在人機互動設計上存在著兩種落差:

> 使用者規劃的行動跟系統接受之間的落差
當使用者規劃行動互動的操作到系統接收端產生的落差,舉例來說:使用者透過網站想執行一個預訂餐點的動作,但在網站上遇到了功能不會操作、資訊找不到、註冊無法順利完成等等的問題,造成他雖然有行動的意圖也進行了執行,但執行的成效表現卻無法滿足他原來規劃的執行目標,這樣的情況稱為使用者規劃的行動跟系統接受之間的落差。此落差是易用性評估的一個議題,同時反映我們在設計服務介面互動流程的時候,需要考慮到使用者的互動流程、介面呈現方式需要提供引導來幫助使用者順利找到其所需的功能,操作要能順利才能夠正確的執行他們的意志,讓系統接收到來自於使用者的指令。

> 系統表現和使用者期待之間的落差
這一種介面設計的問題則是,系統的表現與使用者對於系統呈現之間存在著差異,舉例來說,當人們對於系統進行輸入時你會期待系統提供相對應的反饋,例如:輸入完密碼按下按鈕時,你會期待系統告訴你密碼是正確或者是錯誤請你重新輸入,而當你按下確認密碼的按鈕,系統卻沒有任何的反應,這時系統的反應並不符合原來使用其他輸入密碼時的系統所做出的對應反應,因此你會對於這種系統的表現存在著期待的差距。

而這兩者不管是使用者對於系統,或者是系統的表現為了幫助使用者理解,其實都在我們前面討論人跟系統之間心智模型的配適程度,也就是不管操作面或者是系統顯示面,都應該要符合使用者的需求與期待,這樣就可創造系統跟使用者之間在互動任務執行時避免落差的產生。

這裡提到的介面,白話而言就是人與機器溝通的橋樑,因此,介於使用者跟系統之間協助人和機器溝通的設計都可以稱之為使用者介面,所以使用者介面不再只是螢幕裡面的圖、文字、按鈕、下拉式選單、 Pop-up、選單等等才叫做介面,包括了各位透過手輸入的鍵盤,鍵盤是輸入的介面;透過滑鼠來傳遞對於電腦的指令,滑鼠是介面;滑鼠上的按鈕接收來自你手所提供的指令,所以滑鼠是一個輸入的介面;觸控式螢幕透過你的手指傳遞與電腦之間的互動指令,因此觸控螢幕、手機上的實體按鈕都是介面,不僅僅扮演輸入的角色,這些顯示的螢幕也同樣呈現來自於機器所對使用者提供的訊息進行顯示上的展現。除此之外,人們對於智能音箱透過語音的方式進行溝通;透過耳朵來接受源於智能音箱訊息的反饋等,都是介面跟人互動的形式,因此智能音箱是透過語音介面與使用者進行互動。

在過去,我們通常是透過複雜的指令與電腦互動,人們需要記憶指令的意義,因此它是透過命令式的介面傳達人對於系統的指令,例如:過去的 DOS 系統即透過指令輸入的方式與電腦溝通。
後來,漸漸有了圖形化的使用者介面,人們跟電腦溝通時可以透過滑鼠移動,通過滑鼠移動圖像,而圖像上同樣也提供各種不同的隱喻,這些隱喻舉例而言:剪刀、垃圾桶、印表機等等的 icon 都提供了內容的線索幫助人們加快理解按鈕背後代表的指令,讓使用者透過滑鼠的指標並點擊按鈕就能夠跟電腦進行互動。
最後,直到直覺式的使用者介面則應用了人們的手勢、聲音,甚至是眼神的傳遞等等皆運用更高的科技、更聰明的技術來理解人們想對於機器傳達的命令,讓人跟機器之間的溝通可以更自然的就像人與人溝通一樣,因此才稱之為一種自然的使用者介面。

所以介面設計在學什麼呢?

我們設計的是人透過控制器對於電腦互動,透過電腦提供反饋進入到人腦之內進行消化跟判斷再進行第二次的控制決策,再透過控制裝置對於電腦進行指令的下達,這樣一連串重複不斷的操作就是我們日常生活中使用電腦認知作業層次的拆解,而介面設計師、互動設計師正是在了解此人機互動的機制,透過設計更好的控制、更好的資訊呈現方式、更好的資訊架構等等讓人跟電腦之間的溝通可以更順遂。

介與界

不知道各位看了上面的許多內容後有沒有發現使用者介面的“介”到底有什麼樣的意義呢?(開始往上抓錯字🫢)我們用的介是左邊的這個介!

介是中介的意思有著連結的藴意,人機介面或者是使用者介面是一座橋樑的概念,而分界則是分隔兩者,我們的介面設計並不是為了把人和電腦分開而存在。因此,未來如果有機會,當你使用到使用者介面這個字時,請你記得一定使用上圖左邊的此字(UX 三刀流的堅持😤)。

所以在人機互動的範疇,所謂設計工作是在做什麼呢?

各位在理解使用者體驗設計的名詞時包括的資訊架構,其目的是為了要幫助人們對於系統進行下達指令時,系統可以用一種人們特別能夠理解的知識與架構來幫助人們快速的消化。

而介面的佈局、內容的引導則是扮演著互動引導的角色,讓人們對於系統下達指令時,不容易迷路甚至能更有效率的進行操作;而各種不同的控制介面控制器則是扮演著人們的指令傳遞給電腦中間的過程,因此你可以在介面上設計各種不同操作的控件,透過這些控件符合人們對於操作電腦的期待,讓人們的指令可以透過控件傳遞到電腦身上。

另一方面,因系統有不同的訊號透過介面呈現回饋給使用者,而這些回饋的訊號該怎麼呈現?其邏輯為何?需要用視覺還是用聲音的?或是視覺與聲音並行使用?呈現的內容應該要包括哪些?要在哪些地方呈現?…等等。
這些都是系統對於使用者反饋內容的設計,有助於幫助使用者了解系統目前的狀態,以上也都是在介面設計過程中非常重要的一個主題,當然在視覺介面設計上有很多種不同的顯示元件可以讓你來進行介面狀態的表現,例如:彈出式的視窗,通常用在警告、需要使用者立即輸入命令的對話過程,由此介面設計師必須要熟悉系統這時候應該要如何跟使用者對話進而選擇最合適的不同顯示介面,幫助系統的狀態跟使用者的理解之間可快速轉譯,讓使用者透過介面上的內容快速掌握來自於系統的回饋以及狀態。

上述所提到的這些人跟電腦之間的互動溝通、錯誤的排除、互動的優化等,大概都是在人因工程所重點的人機介面研究範疇,來自於資訊領域的人機互動設計師也更會投入各種不同的創新,應用網路資訊通訊設備結合更聰明的人工智慧技術讓人跟電腦之間的溝通有更多未來可期的互動。
這大概是以人因工程為主的人機互動設計師與以資訊工程為背景的人機互動設計師他們所著重的人機互動研究主題上最大的差異點了。

二、人機互動設計的範疇及應用

人機互動的四大範疇其實為整個產品所存的的使用情境,以情境的宏觀角度來看 UX 的設計,而 HCI 的任務為考慮使用者還有使用的系統機器本身,以及使用者所操作的任務等三者組成下的設計與研究。

> 第一部分:使用者
在 HCI 中,我們會研究包括人類的資訊處理(H1),此為一種心理學的模式,了解人和資訊如何溝通,因包括了所有機器所提供的訊息都是以訊號訊息的形式與使用者的感官以及認知的系統進行溝通,因此我們必須要了解人是如何處理資訊的。
人有習慣的語言邏輯(H2)溝通方式以及互動的方式,這是在 HCI 的討論範疇,再來當使用者與電腦要開始進行互動時,人因工程人體工學(H3)就是主要研究人機互動範疇裡的科學。

> 第二部分:電腦
除了上述使用者與系統溝通所需要的輸入(譬如滑鼠、鍵盤)以及輸出(譬如螢幕、喇叭)的裝置(C1)。
再者為電腦應該要如何處理跟使用者溝通的訊息、應該要用哪一些的對話的技術(C2),像是介面應該使用哪些元件是適合用來跟使用者溝通的,而這些跟使用者溝通的對話元件該用哪些風格,考慮到視覺美感顏色紋理等等,當然電腦裡的圖像設計(C3)以及電腦跟使用者對話的資訊架構跟邏輯(C4)也都是在人機互動設計的範疇。

> 第三部分:人與機器的溝通場域
當我們探討了人跟電腦的溝通以及互動外,還要去思考這樣的一個溝通是在什麼樣的場域(U2),是一個人對於電腦或者是電視遙控器、冷氣遙控器進行控制嗎?又或者是此應用的場域在如教室裡學習大家共用一個資訊看板的多人場合呢?因此,在社會組織以及工作的場域人機互動在多人以及個人的應用場域其思考的主軸可能也會有所不同,因加入了社群社會的變數讓整個的使用情境需要考慮的變因又更多元了,也會討論到人跟機器如何協同機器跟人之間的溝通互動,如何能夠更友善、更合理、更自動化的調和等等(U3),這些都是在考慮到人機互動的場域發生在哪些地方,為了使用者滿足哪些操作目的,而存在的人機互動的應用和研究領域。

> 第四部分:發展的流程
包括了我們如何洞察使用者需求,有哪些需求的洞察分析的技術支持我們在設計過程掌握使用者的需求?人機的系統如何實做?有哪些技術以及工具?當我們的系統完成雛形的規劃或者是已經上線的系統要了解是否存在跟使用者溝通之間的鴻溝?
我們需要的是使用者評估、易用性評估相關的技術幫我們找到系統的缺點,使其變成系統優化的方向。對於人機互動進行案例的分析、系統應用的雛形開發也都在人機互動的研究跟發展範疇之中,因此各位需要了解人機互動在特定的場域,支持因為特定工作任務目標,可能是單人、多人或整個設計與研究的團隊所負責,包括在設計的不同階段介入,以進行設計規劃、系統執行與實現、評估、改善跟優化以及製作系統雛型案例等等各種不同的任務。

另外一種了解人機互動範疇的方式為從 HCI 大師們所主導的人機互動主題進而了解,過去心理學是心理學的領域、工程學是工程學的領域,而上圖的三位知名學者皆為人機互動設計領域成就之高的大神們。

Stuard Card 在全錄的帕羅奧圖研究中心,他是應用人因工程於人機互動領域的先驅之一,有多項的介面設計與可視化分析的專利。

Thomas Moran 為 IBM 的傑出工程師,是人機互動設計領域的專家。

Allen Newell 卡內基梅隆大學的教授,同時待過電腦學院、商學院跟心理學院,研究領域包括了電腦科學跟認知心理學,也是圖靈獎的得主。

以上三位作者在 1983 年的時候合著了一本人機互動的心理學,這是所有體驗設計者、人機互動的研究人員必讀的一本書。

而在學校學習也會應用人機互動的教科書,Ben Shneiderman 的著作《設計使用者介面創造更高效的人機互動策略》,這本書包括了四個主要的單元,除了介紹互動設計基本的方針、原則跟理論之外,也講述了系統介面軟體的開發流程,並針對介面部分包含了直接操作虛擬環境選單的設計、對話視窗命令跟自然語言的處理互動跟協調社群媒體等等的議題,分別有不同章節進行討論,最後也會針對設計的議題在服務品質文件、資料搜尋和資料視覺化各有獨立的章節,進行人機互動的規劃跟介紹。

對於剛踏入使用者體驗設計的各位,會特別推薦此書,而這也是在大學學習和上課時所使用的互動設計教科書,同時此書也是由在資訊跟互動領域非常知名的三位教授合著的一本書。

在這本書中講述了互動設計還有人跟互動之間的基本概念,並且從人們的認知、社會情感層次這些較心理面的主題來探討互動設計。除此之外,介面的設計數據分析、呈現解釋這中間包括研究方法、資料分析的觀念以及設計的流程、需求訪談模型的建立還有介面及系統評估及使用者研究的基本觀念,是本非常適合新手入門,且以更宏觀角度了解 HCI 的經典著作。

*大陸喜歡稱之為交互設計,各位可稱交互設計、互動設計兩說法。

了解了以上 HCI 的知識可以幫助我們做什麼呢?

以上介紹的教科書或前人、大師的智慧可能會讓各位覺得是好幾十年前的老東西了,但要知道的是,這些前人累積下來的心理科學資訊理論或者是研究的成果其實真正代表著人跟系統互動的原理跟邏輯,能夠幫助我們更了解人們是如何跟系統互動的,能夠理解這些理論跟邏輯才能夠了解人類對資訊處理跟消化的流程。

為了要幫助各位能夠更快應用與上手,學者們也分別提出了許多類型的設計原則,這些設計原則比理論更容易理解,並且指向不同的設計方向、設計目標,將這些理論歸納成概念化可被應用的設計原則,而我們也常常喜歡透過這些設計原則來幫忙釐清不同維度的設計方向,是設計過程裡非常好參考且提醒自己的材料。

最後,你會有機會接觸到設計的規範,而針對這些規範的特定主題有不同的設計規格,譬如:網頁的設計規範、行動電話介面的設計規範、與安全有關的介面設計規範等等,分別來自於不同的公司、不同的組織,為了不同目的制定具體的設計規格,其目的是幫助所有設計師能符合設計目標的一致性來進行介面的設計跟軟體的設計,以免太多設計師的主觀意見摻雜在設計的過程之中造成設計不一致的問題,反而影響到原先設計目標的效能。

文章最後,各位可以看到上圖為兩個大師的經典 HCI 設計原則,第一設計原則是大家熟悉的 Don Norman 所提出的七個設計原則,以此幫助人與機器的溝通能更順利; Ben Shneiderman 也提出了八大黃金設計原則,目標也是在人與機器溝通的過程中可以更順暢。

設計原則本身並不與特定的系統相依,也因此它是一種概念化的指引,表述的是人跟系統溝通的基本原則,大部分都能在我們當前的系統持續被使用。

接下來我們從人跟系統互動的基本架構來看 Norman 和 Shneiderman 所提出的設計原則分別是在描述人跟系統溝通的哪一部分及代表什麼意義。

如上圖橘色字樣部分,當人們想要跟系統進行溝通時,對於操作有了操作的目標,因此 Norman 提到應該要簡化任務的結構讓使用者在其操作流程不會太過複雜,除此之外,這些讓人們控制的介面或者是讓人們理解的介面中,應該要多多利用人們本來就已經知道的知識,例如:我們在使用電腦時,看到的印表機、剪刀這些 icon 都是跟實體生活有所對應的,因此人們就可以用自己腦內的知識對應到介面上的操作元素,不需要再重新記憶以此省下使用者操作過程裡的認知負荷,整個介面的設計和互動的設計是追求正確的匹配度,也就是使用者對系統的印象應該跟系統印象能夠相應,用戶的心智模型才能夠等於設計的概念模型,包括在操作面、互動面,除了系統跟人認知的一致性之外,整個系統也要能夠有一致性的設計才不會在不同的選單有不同的控制方式,讓使用者能夠依循既有理解的操作與互動形式使用整個系統。

除此之外,當人們開始對系統進行操作的時候,難免會有錯誤的問題產生,我們在設計的過程應該要合理的利用一些自然與人為的限制因素避免使用者犯錯,或是當使用者犯錯時能夠讓他輕鬆的回上一步重新再執行一次任務的操作,人為的限制因素像是:設定鬧鐘的時候透過轉盤式的介面設定,當時間到達 24 點時,沒有辦法再往上滑動變成 25 點,因自然界並沒有 25 點鐘。所以我們透過自然的限制讓使用者在介面上避免發生不可預期的錯誤,此為一種避免錯誤的應用;又或者是在使用者填寫密碼的介面上,只提供對應到密碼位數的格子,譬如:常常有四位數或六位數的密碼只提供了四個或六個格子,如此就可以避免使用者輸入數字的時候,沒有對應到設計系統的目標所產生的錯誤。

其實,這些看似簡單的應用都可以避免使用者在回想密碼位數時的錯誤產生,當然當使用者操作過很多次系統之後,或者是針對特定的系統有新手與老手等產生區別。

因此 Shneiderman 就提出了應該要讓操作的可行性上是一種通用化的概念,也就是新手及老手在操作時,也許新手重視的是避免錯誤而老手更在意的是操作的效率,所以我們可以針對專業的老手提供多一點快捷鍵組合的指令,讓他們能用相對複雜但較為快速的方式來操作系統,這就是一種通用性的可使用性的觀念。

當系統接收到使用者的指令要對於系統進行消化之後,提出反饋到顯示介面供使用者所了解,如果系統已經知道使用者的操作錯誤了,也許我們應該考慮容錯的設計,例如:在電腦介面常提供搜尋的功能,且通常具有自動完成 (auto complete) 的功能,這是為了要讓使用者在輸入搜尋的關鍵字時,可以更直接的對應到系統所能夠提供的關鍵字主題,而這個對應可以避免使用者在操作上的失誤,以自動為使用者操作的錯誤進行補充就是一種容錯的設計,又或者是電腦系統瀏覽器能夠自動記憶使用者的住址或者是帳號、Email、密碼等等,這些都是便利的功能也相對可防止使用者在填寫過程產生錯誤輸入,以上皆為容錯設計的應用。

當系統在顯示介面上對於使用者進行反饋訊息的呈現時,務必確保這些訊息是明確的且讓使用者能夠易於了解,同時,訊息要跟使用者之間是一種對話的型態,例如:要使用者進行確認以確保重要的訊息使用者有看到,且有進行相對應的反應,此常常在一些重要的操作流程中能看到,以刪除所有的檔案為例,系統會用對話的方式跟使用者再三確認,因此操作的重要性很高,我們可以透過多一次的對話來避免使用者犯錯。

Norman 也提到應該讓訊息可視化即看得見、看得懂、能夠理解,因這些資訊才可幫使用者在駕馭整個系統時,降低不論是在執行面抑或是狀態評估面的鴻溝所帶來之影響,唯有如此,才能讓使用者掌握對於整個系統的控制權,而使用者們的類型多樣,以致在系統的操作上無法針對每個議題因人而異,因此當設計的變數過多時,我們也考慮用標準化的方式讓所有的介面系統統一,透過這種標準化的方式來減少設計流程以及操作流程的不一致以及避免不必要的錯誤產生。

希望上圖的設計原則能幫助各位理解,兩位大師在人機互動過程裡的定位,了解後可幫助各位在未來進行設計服務時更有底氣,因為你能夠掌握人機互動設計的不同流程需要有一些設計原則幫助你特別思考跟提醒才能在設計過程能夠更順利。

結語

在這個單元我們介紹了人機互動設計的入門,包括了講解人跟電腦溝通對話的基本邏輯並且講述了人機互動設計的範疇,我們也從大師身上學習到了人機互動的設計原則,希望能夠對你的設計工作有所幫助。看完這篇文章,你有什麼想法或疑問呢?

看了這麼多大師在領域上的貢獻,在你的經驗或是學習過程中,什麼令你印象深刻且經常被你所用呢❓

我們下篇見:)
by 助教 Janel

註:
加入UX三刀流 Telegram,獲得更多免費學習資源。
若你想收藏影音版的內容,或是重複收看的需求,可以參考 hahow 的「用戶x商業x數據 | UX‧三刀流產品體驗設計」版本!
持續關注 medium文章,不錯過文字版內容。

--

--