No.007 產品經理要知道的用戶體驗與交互設計原則

用戶體驗這個詞也許是產品經理提到的最多的一個詞,影響用戶體驗的因素有很多,其中顯性易判斷的有2個:視覺設計和交互設計。其中交互設計對用戶體驗的影響更甚。

本文結構如下:

No.007 用戶體驗與交互設計.png

一、用戶體驗設計

用戶體驗設計(User Experience Design,UED) 。UED的通常理解,就是“我們做的一切都是為了呈現在您眼前的產品”。UED是針對用戶心靈,眼睛,耳朵,觸感的設計。用戶體驗就是用戶在使用一款互聯網產品的整體感受度。

1、UED的相關概念

  • UE(User Experience)

  • UCD(User-Centered Design)以用戶為中心的設計-強調以用戶體驗有限的產品設計理念

  • HCI(Human-Computer Interaction)人機交互

  • GUI(Graphical User Interface)圖形化用戶界面

  • WR(Web Rebuild)網站重構

UED的相關概念.png

2、UED團隊的輸出物與工作職責

產品經理:

輸出:用研文檔;競品分析文檔;產品需求與需求分級文檔

配合工作:協助UED相關人員對產品的調性進行把控;協助UED相關人員進行測試與組織管理。

交互設計師

輸出:完整產品原型圖含交互設計;用戶使用流程;產品信息結構圖

配合工作:交互測試,測試交互還原度

工作職責:為產品設計具體的行為、界面設計,組織良好的產品信息結構,提高產品的可用性與易用性

視覺設計交互設計師

輸出:對產品的界面視覺設計稿;競品風格調研;設計規范;概念設計說明;產品流程中界面還原度全程評估審核。

配合工作:視覺測試,測試視覺還原度

職責:界面呈現,美觀度,體驗,品牌形象設計負責

頁面重構師

輸出:靜態網頁;靜態頁面規范說明(CSS,復用,性能,兼容性等)

配合工作:頁面測試工作,測試頁面還原度;兼容性測試;頁面性能優化

職責:界面呈現,美觀度,體驗,品牌形象設計負責

3、用戶體驗的要素

用戶體驗要素模型.png

戰略層:

明確商業目標和用戶目標,重點是解決兩者之間的沖突,找到平衡點。例如,通常的商業目標是賺錢,而用戶是要省錢,這種最底層的沖突沒法通過產品設計解決,而要靠商業上找準價值的切入點。作為PD,通常早些年接觸不到戰略制定的過程,但仍然要深刻理解公司戰略并盡可能的去發揮自己的影響力。

范圍層:

做好需求采集工作,確定功能范圍和需求優先級。這時候先要盡可能多的收集,通過各種市場研究、用戶研究的方法收集,不要遺漏;再盡可能多的放棄,因為我們的資源有限,只能做最有價值的。先做的收集不是為了放棄,而是為了不漏掉任何“最有價值的”。

結構層:

完成信息架構與交互設計。上一步相當于把菜都選好了,現在開始考慮具體是蒸是煮是炒是炸了,這一步可以產出產品的功能結構關系,網站地圖等。一般來說,技術部門在這個層面開始全面介入。

框架層:

界面設計、導航設計、信息設計,到了這一步,才出現用戶真正能看到的東西。常見錯誤是從以為這里才開始算設計,忽略了上面的幾層,這樣在大前提不正確的情況下做出來的產品必然會成為一個悲劇。

表現層:

包含了視覺設計和內容優化。這部分是最有意思的,但設計師一定要理解好商業和用戶的目標才能做出正確的設計,畢竟我們不是藝術家,這里的表現是最終產品氣質的體現。

五層整體是抽象到具體的過程,時間上是順序的,但每步的界限模糊,彼此交叉,而且必須反復迭代的,又有一點從商業到產品到技術的感覺。

套用咨詢思維的經典結束(意譯):事情來了不要撲上去做,也不是先訂計劃,而是先想清楚意義、目的、目標等等。

4、用戶體驗的五個層次

(1)有用

“有用”其實就是對用戶首先要有價值“即有使用他的價值”,這里要注意一點,這里的“有用”是針對“用戶體驗而言”,而非之前說的Kano模型里面正對需求而言的那幾項(必備,期望,魅力,不要搞混了)。

我們拿微信來舉例,我們使用他最重要的價值就在于它能語音傳輸,這就是他對于用戶來說,最基本的“有用(基本價值)”的地方。

(2)能用

在對用戶“有用(有使用價值)”的基礎上面,還需要強調,這個東西是能夠正常使用的,例如:

  • 圖片上傳不允許出現丟失

  • 交互設計應該按照最基礎的IOS系統交互規則來進行設計

(3)可用

可用,即可用性,就是在有用,能用的基礎上面,我們應該考慮如何讓用戶更好,更方便的使用產品,例如:

  • 注冊填寫郵箱的時候,自動補全后面的“@qq.com,@163.com等等”

(4)用的爽

用的爽,就是在 有用,能用,可用的基礎上面,還能讓用戶感覺使用產品暢快淋漓,有一種爽的感覺,爽這個字很難形容,我們可以具象一下:

  • 超出用戶預期的產品服務與功能

  • 流暢的操作體驗(隊列,補全,規避用戶錯誤等)

  • 文案優美

  • 視覺設計符合產品調性與目標人群喜好

(5)形成品牌效應

好的產品,日積月累,就會形成品牌,例如:

  • 小米手機口口相傳的品牌效果

用戶體驗層次讓我們在規劃用戶體驗的時候,有明確的指向,以及有明確的邊界。

1有用>2能用>3可用>4用的爽>5品牌效應

  • 初期一定要保證,1,2,3,因為資源、時間、成本有限

  • 能力強的團隊,初期可保證到1,2,3,4

5、用戶體驗的度量

我們把用戶體驗分成了7個大類,這7個大類里面又有若干個小類,每個小類又有可考核的依據。于是乎,原本感覺不太好的考評的用戶體驗,現在的就變得相對可考評了。考評方式是什么呢?——專家團隊考評

5.1 價值體驗

呈現給用戶心理上的體驗,強調友好性以及與用戶關系的維系,一般包括但不限于:基本型價值;期望型價值;魅力型價值。

5.2 感官體驗

精準定位:調性風格是什么樣子的,是否匹配目標人群的喜好特征。

呈現給用戶視聽上面的體驗,強調舒適性,一般包括但不限于:

  • 設計風格(極簡風格的;前衛;女性化;男性化;復古;后現代)

  • 網站LOGO

  • 頁面布局(平面設計;板式設計;主次分明;視覺引導)

  • 頁面色彩表現

  • 性能穩定(響應速度快;系統不崩潰)

  • 兼容適配(兼容不同手機操作系統、手機型號、屏幕適配性)

  • 動畫效果

  • 頁面導航

  • 廣告位

  • 背景音樂

5.3 交互體驗

呈現給用戶操作上的體驗,強調易用/可用性,一般包括但不限于:

  • 表單填寫

  • 表單提交

  • 按鈕設置

  • 點擊提示

  • 錯誤提示

  • 意見反饋

交互原則

導航清晰:讓用戶指導自己在哪,退路在哪,可以去哪兒,怎么去,附近有什么

搜索便捷:符合用戶心理模型(心理預期)

扁平任務

用戶完成一個預期行為的過程越簡單耗時越短越好

容錯性

通過設計:突出正確操作;避免容易引發的錯誤操作;對錯誤操作要有包容性(隊列技術的使用等等)

主次原則

主次分明,色彩,內容,板式,功能。

直接原則

不要出現過多的行為,能在當前頁面完成的行為,不要去過多跳轉。

統一原則

產品價值,文案,功能,內容,樣式,設計風格等都保持統一:一方面降低用戶學習使用難度;一方面可以提高產品的整體性與專業性,還能降低產品開發的成本

少做原則

讓用戶少做:補全;記憶;聯想;直接給出預期結果等等..

反饋原則

用戶的每一個操作,都能有有效的反饋給用戶,讓用戶明白自己操作的:過程;狀態;結果等等...

對稱原則

對稱原則是一種思考方式,即需要交互設計的時候去思考當一個狀態出現的時候,會不會有相反或者想對應的狀態。

瀏覽器的刷新和停止(合并);前進與后退;Axure的導入和導出;論壇的發布與編輯

簡潔原則

產品表現,功能使用,文案等等,簡潔易懂。

合并原則

合并原則就是對一些具有相同屬性的交互元素與內容進行合并,從而有效的減少用戶學習成本與使用難度。瀏覽器停止刷新按鈕的合并。

5.4 瀏覽體驗

呈現給用戶瀏覽上的體驗,強調吸引性,一般包括但不限于:

  • 欄目的命名

  • 欄目的層級

  • 內容的分類

  • 內容的豐富性

  • 相關內容的推薦

  • 信息的搜索

  • 文字排列與字體

  • 分頁瀏覽

瀏覽體驗原則

信息架構合理

主要看:是否符合用戶心智模型、

心智模型:汽車發動

用戶心智模型:鑰匙扭一下

工程師眼里:鑰匙觸動電動打火裝置-打火裝置點燃XX-XX帶動XX-后發動起啟動

內容呈現符合產品定位

大方向要正確。小方向:欄目設定;主題推薦;精華內容

產品兼容性良好

移動客戶端android系統,就要兼容很多廠商很多機型。

web端,需要兼容瀏覽器火狐、chrome、opera

pc客戶端:xp、win7、win8

相關內容表現合理

圖片,視頻,文字,色彩,排版等等表現合理,符合目標用戶的獲取信息的習慣。

5.5 情感體驗

呈現給用戶心理上的體驗,強調友好性以及與用戶關系的維系,一般包括但不限于:

  • 友好提示

  • 售后反饋

  • 會員優惠

  • 鼓勵用戶參與

情感體驗原則

尊重(主人,你的電腦快掛了!;主公,微臣已經幫您清洗了電腦垃圾!);驚喜;友好;滿意;共鳴(小米的微博:七夕感慨!);人文關懷(qq登錄節日問候,提醒啊等等)

5.6 信任體驗

呈現給用戶的信任體驗,強調可靠性,包含但不限于:

  • 公司介紹

  • 投資者關系-

  • 服務保障

  • 文章來源

  • 聯系方式or服務熱線

  • 有效的投訴途徑

  • 安全及隱私條款

  • 法律聲明

  • 網站備案

  • 幫助中心

  • 隱私保護

  • 權威推薦

  • 成功案例

6、如何提高用戶體驗

1.新手上路提示

對于復雜的產品或者上線了重大改版功能時,提供新手引導是有必要的。

2.適當引導用戶

在該引導用戶的地方引導用戶,不要過度引導從而引起用戶的反感。

3.貫穿生命周期

用戶體驗是整個產品周期中,所有部門和團隊成員都必須要關心的重點要點,不僅僅是產品部門的事情,更不是產品經理一個人的事情,整個團隊從上至下尊重用戶,貫穿用戶體驗,才有可能做出優秀的產品。

4.超出用戶預期

提供超出用戶預期的功能,有時可以讓用戶暫時忽略產品的不足之處。

5.正確對待反饋

要傾聽,不要照著去做。

6.可用性測試

產品上線之前先進行可用性測試,減少用戶體驗的盲點。

7.數據分析和挖掘

通過對用戶行為數據的分析,挖掘對用戶體驗影響更大的因素。

8.多用和多研究

產品經理要自己多用多體驗,才能感受用戶在使用產品過程中的挫折點。

二、交互設計

交互設計是人工制品、環境和系統的行為,以及傳達這種行為的外形元素的設計與定義。

不像傳統的設計學科主要關注形式,最近則是關注內容和內涵,而交互設計首先旨在規劃和描述事物的行為方式,然后描述傳達這種行為的最有效形式。

交互設計借鑒了傳統設計、可用性及工程學科的理論和技術。它是一個具有獨特方法和實踐的綜合體,而不只是部分的疊加。它也是一門工程學科,具有不同于其它科學和工程學科的方法。交互設計,是用戶體驗的重要組成部分。

1、互聯網交互設計

是指用戶使用產品過程中行為輸入產品再到產品輸出信息的全過程,拿iphone解鎖舉例:

iPhone解鎖.png

2、幾個要區分的概念

產品設計

關注的是功能、結構、人因、形態、色彩,環境等設計要素以及采用的技術、方法和功能的實現手段等,是間接影響產品最終用戶的設計

以用戶為中心的設計

是在設計過程中以用戶體驗為設計決策的中心,強調用戶優先的設計模式。

用戶體驗

目標,即我們努力應該去為用戶創造良好的感受

交互設計

注重產品和使用者行為上的交互以及交互的過程,強調的是設計理念和方法。側重的是交互雙方信息表達方式和情感,是直接影響產品最終用戶的設計

人機交互

人與計算機的交互,交互的對象特指計算機,是交互設計里面的一種。

界面設計

主要指人和機器交互界面的設計。

可用性

評測用戶體驗的標準。

3、如何更好的學習交互設計

首先要明確,交互設計對PM的要求必須是:實戰經驗;要求知識面廣。

我們如何更好的學習交互設計,建議練習方式如下:

–找到一些常見的任務,例如注冊,登陸,發布微博等

–仔細分析用戶的特征后,明確目標以后,自己開始手繪交互的流程(手繪比工具快)

–反復修改,直到你認為已經達到了最簡單,最好體驗

–對比你的設計與真正的現有的優秀產品

4、交互設計的特性

識別性:形狀,布局,尺寸,色彩等..

感知性:文案,色彩感受,版式,關系,層級

可衡量性:流程,點擊次數,移動距離,姿態,完成時間

5、交互設計的原則

  • 反饋:返回與活動相關的信息,以便用戶能夠繼續下一步操作

反饋:返回與活動相關的信息,以便用戶能夠繼續下一步操作

  • 限制:在特定時刻顯示用戶操作,以防誤操作

  • 映射:準確表達控制及其效果之間的關系

  • 一致性:保證同一系統的同一功能的表現及操作一致

  • 啟發性:充分準確的操作提示

1)直接和間接操作

直接操作

對一個可以操作的對象進行:移動;旋轉;拖拽;改變色彩等等

以上的操作就被稱作直接操作,直接操作可以理解為為用戶提供了現實世界中與模仿現實世界中的各種操作。

直接操作容易學習,因為直接操作能映射到我們的現實生活中的實際經驗上面。

間接操作

間接操作是指我們用命令行,菜單,語音等控制方式去操作一個對象,尤其是很古老的DOS操作,就是明顯的間接操作。例如菜單中的“反選”“全選”

2)預設用途

生活經驗會告訴我們,事物本身存在的外表(形狀,色彩等)會暗示給我們他的用途(久而久之約定俗成)。

  • 紅色(緊張,警告)

  • 一把鎖(安全,可靠)

  • 搜索圖標的放大鏡代表搜索

為什么我們會知道?這就是預設用途。

交互設計的到了某個階段(尤其是細化階段),交互設計可以看作是在為用戶提供預設用途,以便產品的功能特征易于被用戶識別與察覺。

3)反饋與前饋

人與機器對話,類似人和人對話,試想你一個人說話,這個人總是不理你或者心不在焉,你會不會很生氣呢?

人們需要反饋,反饋意味著提示,意味著某件事情發生過。

給用戶的反饋應該頻繁,而且靈敏的,舉例:

有可能出現錯誤的操作(誤以為沒有操作成功,多次點擊)

常見的反饋方式:

  • 提示燈,操作后,燈會閃亮(遙控器上面)

  • 聲音(手機按鍵的嗒嗒聲,銀行ATM機器難聽的咚咚聲音)

  • 直接在操作位置的反饋(按鈕的幾種狀態)

  • 進度條

數字產品的反饋是一種響應的過程,由開始動作和產品做出反應的時間(延時)來決定,存在4個基本層次:

  • 及時響應:0.1秒內呈現結果,快到用戶忽略響應時間,例如你輸入一個字母,屏幕上面不存在延遲,立刻顯示出來。

  • 延遲響應:同樣的操作如果存在在遠程登錄控制的電腦面,就有可能出現在本地輸入,但是1秒鐘后,才在遠程的電腦上面顯示出來,0.1-1秒的時間才響應,用戶會注意到延遲,如果重復出現用戶會覺得遲鈍,會變得沮喪。

  • 中斷:中斷就是機器沒有反應用戶的操作,用戶會覺得他們的工作被打斷了,這個時候你的產品已經開始在干擾要用戶的工作了。

  • 異常終止:超過十秒以上的延遲,用戶會覺得工作徹底中斷了,提供進度條或者沙漏能比較好的減輕用戶中斷憂慮,菊花,進度條,文字提示請稍后,都是如此。

此時要注意,中斷和異常終止,有可能是用戶的心理模型,盡管現實模型還在順暢的運行,所以必備的提示與反饋非常的重要。

前饋,是指執行一個動作之前就知道將要發生什么,相對反饋更難,但是更有效。

例如一個連接地址為:點這里 與 點擊訪問百度 ,后者就存在明顯的前饋,讓用戶明白自己的操作將會有什么可預測的結果。

4)心智模型

心智模型通常由設計師提供的信息來建立,這些信息可能以預設用途、反饋、前饋以上原則來呈現,以便用戶更好的知道他們的操作目標,操作狀態,預期結果。

5)標準化設計

標準是一種可供用戶參考和按規律可循的操作依據。

微軟和蘋果都提供了基于自己系統下的設計標準,基于這樣的設計標準,可以讓設計師們事半功倍。

除非你能創造出基于設計環境下(Mac,windows,iOS,android等環境)更好的操作方式,否則請按照標準來設計。

不要試圖去挑戰用戶累計的操作經驗,除非你的產品具有革命性或讓用戶明顯受益,否則懶惰的用戶遲早會放棄你的產品。

熟能生巧,建議大家先按照標準化設計,運用自如以后,再考慮優化與強化。

6)菲茨定律

觸屏操作按鈕的觸感面積設計往往應該大于實際按鈕,但是可以更大(前提是不會被誤操作到),這樣的設計讓用戶賞心悅目,感覺到產品的靈動快速。

出現在操作焦點旁邊的選項,往往也比用戶移動鼠標去點擊屏幕頂部的菜單來的更快捷更舒服。

7)希克定律

希克.海曼定律,表述為:用戶做決定所需的時間由備選項的數量決定

用戶不會對所有備選項挨個思考考慮,而是把備選項細分為類,每一個決策步驟,會排除大約一半的剩余選項。

比起兩個菜單,每個菜單五個選項,用戶會更快的從有十個選項的一個菜單中做決策。

這個定律雖然暗示了用戶思考判斷問題的規律,但如果按照這個思路去設計將會是恐怖之極的,想想屏幕上面放滿了各種選項。

希克定律說明了做決策需要的時間被兩個因素的影響:

  • 用戶對選項的熟悉程度:根據提示能很好的判斷這個選項下的子類別,例如:插入菜單...

  • 用戶對選項的表現形式:聲音,文字,視頻,還是按鈕...例如:mindjet就通過類似office 的菜單形式為用戶提供明確的操作反饋與表現,讓用戶易于理解和快速進行到下一個任務。

8)神奇的數字“7”

用戶的暫時記憶通常會記得5-9個信息塊,綜合來看,就是7 ,5-9的中間數。

9)特斯勒“復雜守恒定律”

每個過程都有固有的復雜程度(或簡單或復雜),這些過程被簡化到一定程度后,將不再可能被簡化(除非過程的本質被顛覆),我們只有把固有的復雜性從一個地方移動到另一個地方來實現簡化的目標。

發送郵件時候必須要的兩個選項:發件人地址、收件人地址。

如果沒有以上兩個選項,郵件無法被成功發送,因此現在的操作是將這樣的復雜性轉嫁給郵件工具。

自動記錄和提示,補全收件人地址等等。

這里想要表述的是:

  • 產品經理要承認,無論多么完善,所有的過程都有一些不能再簡化的元素。

  • 產品經理需要想辦法來轉化這些無法完善的元素,是否可以用其它流程來優化或者承擔等等。

10)防止錯誤原則

幫助用戶避免發生錯誤的幾率,是交互設計中重要的原則,日本傳奇工程師,品質專家鄉新重夫在1961年為豐田工作的時候創造了防止錯誤原則:為用戶避免無心的錯誤

產品經理在產品設計中使用這種原則,迫使用戶調節他們的行為,正確執行操作。

出現錯誤后,及時的反饋錯誤信息并提示正確操作。

高危選項,在執行后,通常灰化或者出現獨占模塊需要再次確認(導彈發射按鈕,甚至需要兩個艇長同時扭動鑰匙)

11)錯誤

出現錯誤消息是差勁的設計,好的設計應該能幫助用戶規避錯誤。

如果出現錯誤,僅僅提示錯誤消息是不夠的,還應提供解決方案,或者發生錯誤的原因。

最惡心的錯誤提示:你遇到了錯誤678,請重試(我想摔電腦!)

三、Axure原型設計

我們不會講Axure的使用,這里只簡單提一下用Axure進行原型設計時的注意事項。

1、原型設計的思路

開始一個Axure頁面設計的時候

  • 該頁面所在流程中的位置,前后頁面關系是什么

  • 該頁面的主要功能是什么

  • 該頁面次要功能點有什么

  • 基于草圖的頁面設計是否已經通過,還有優化的空間嗎

  • 該頁面有那些元素是可以直接從其它頁面復制過來的

  • 哪些元素可以來自母版:經常使用;使用量相對較多;可能不太確定,需要有修改的地方

  • 交互設計中,哪些交互元素是可以復用的(保持統一)

  • 你可以把PRD的一些需求直接寫在Axure里面,不掉價,高手都這么干!

  • 如果一些功能不太能說清楚,可以在旁邊標注流程圖等,重點在于說清楚,不在于方法

2、Axure使用的tips

  • 多使用Ctrl+G對元素進行編組方便操作

  • 多使用母版降低工作量

  • 按照Ctrl左鍵拖動復制,Shift是平移,Ctrl+C和Ctrl+V要多使用

  • 養成隨手Ctrl+S的習慣,永遠不要試圖去挑戰這個習慣

  • 動態面板和中繼器是重點,可節省大量精力

小結

我們在上篇文章中有一個《交互自查表》,它就是根據交互設計的一些原則進行制定的,大家可以去對比體會一下。

今天講的內容比較枯燥,都是理論上的東西,實際應用是需要我們在工作中去摸索與研究的。

預告:下一篇將會講《項目管理與敏捷開發》

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容