DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 交互設計方法:工具型產品用戶體驗的要素
交互設計方法:工具型產品用戶體驗的要素
編輯:關於網頁技巧     

什麼是工具型產品? 

工作的這段時間以來,我主要參與了一些電子商務類產品的交互設計,我發現這類產品的設計思路和門戶、頻道等產品有較大的差異,它們更關注於完成任務及操作,而非內容的分類與展示。之前我通常稱這類產品為功能型產品。在去年廣州舉行的交互設計體驗日上,通過和其他交互設計師交流,發現在業內這類產品似乎也沒有一個固定的稱謂,有的交互設計師稱之為“工具型產品”,我覺得倒也很貼切。

為什麼要單獨定義它?

如果看過《用戶體驗的要素》,大家一定記得其中講到的有關用戶體驗的五個層級。根據產品戰略的不同,需要設計師采用不同的設計思維。下圖左邊代表的是工具型產品(比如電子商務類產品的支付部分),右邊代表的是內容型產品(比如門戶、部分頻道等)。從圖中可以看出,左右兩邊在不同的層級上有明顯的差異。

 

工具型產品與內容型產品的區別

工具型產品關注的是任務——所有的操作都被納入一個過程,去思考人們如何完成這個過程。在這裡,我們把網站看成用戶用於完成一個或多個任務的一個或一組工具。

內容型產品關注的是信息——網站應該提供哪些信息,這些信息對用戶的意義是什麼。在這裡,我們把網站看成一個“用戶可以穿越的信息空間”。

工具型產品的設計師把每一個問題看成是“應用軟件”的設計問題,然後從傳統的桌面和客戶端軟件的角度來考慮解決方案。   內容型產品的設計師以信息的發布和檢索的角度來看待網站,然後從傳統出版、媒體和信息技術的角度來考慮問題的解決方案。   在五個層級上的區別:   結構層的區別示意圖:   表現層的區別示意圖:   ——————————————————————————————————————————

到底什麼是交互設計?

關於這個問題的答案,我想很多專業的交互設計師也未必能說的很清楚。

從《用戶體驗的要素》上,可以找到“交互設計”所處的位置。這是從客觀的角度來定義“交互設計”的概念。

如圖所示,工具型產品的結構層即為“交互設計”,這一部分的產出物主要為任務流程圖。然而實際上並不存在絕對的工具型產品或是絕對的內容型產品,在每一個層面中,這些要素必須相互作用才能完成該層面的目標。因此也可認為一般產品的結構層為“交互設計”。那麼“交互設計”可理解為:主要通過功能規格(業務邏輯)設計任務流程,最後制作出頁面原型的過程

在網上找到了其他比較受認同的解釋,這是從交互設計積累的經驗得到的:幫助用戶高效的完成產品所設想的任務,同時在這個過程中,能讓用戶感覺到愉悅和不受打擾。但是,到底如何才能高效的完成產品所設想的任務?如何才能讓用戶感覺到愉悅和不受打擾?如何去衡量和評判?卻不好界定。

把這兩者相結合,可得到一個更具體的關於交互設計的定義:所謂交互設計,就是通過分析用戶心理模型、設計任務流程、運用交互知識,把業務邏輯以用戶能理解的方式表達給用戶,最終實現產品戰略(公司需求和用戶需求的最佳平衡點)的過程。

交互設計的四要素

從新的定義中可提煉出交互設計的幾點要素:

•業務邏輯是考慮一切問題的關鍵點。要想做出好的設計,不管在任何一個層面上都不能忽略業務邏輯。

•在業務邏輯正確的基礎上,只要任務流程設計的正確,一般來說產品就是可用的;忽視了任務流程的設計(尤其是大型產品),產品將是不可用的。

•分析心理模型對於理解業務邏輯、優化任務流程、提升用戶體驗都有重要的作用。

•熟悉交互規范可以避免在框架層出現錯誤

業務邏輯、任務流程、心理模型、交互規范在設計的不同階段中都起著重要作用。這就意味著對於一個交互設計師來說,只懂交互知識對於做好一個產品的設計是遠遠不夠的。

交互設計四要素的運用 

例1:網易寶支付流程

  

當余額不足時,就會在余額下面再次出現其他付款方式的選項,以補足余額。 

1.業務邏輯:除余額可以和其他方式組合外,其余tab下的支付方式是各自獨立的。但在第一層tab上,所有的支付方式都是並列的,這顯然和業務邏輯不完全對應。

2.心理模型:如果把這個比做用戶的錢包,那麼用戶的錢包裡絕對不會出現除余額外其他付款方式的“重影”。

3.任務流程:沒發現大問題(所以對用戶來說依然是可用的)。

4.交互規范:每個tab下應該都是不同的內容,但目前有大量重復。

綜上就能判斷出網易寶的支付頁面確實有很大問題(也許對用戶影響不大,但代碼負擔重、拓展性差)。再用這四要素去判斷支付寶的設計,就會發現好了很多(但也不是沒問題)。

例2:支付寶默認勾選余額 

 當余額不足時,用戶會使用余額嗎?(和用戶心理有關) 

心理模型:余額可比作現實生活中的現金,當現金不足時,大部分人會選擇通過銀行卡等方式支付,而不會選擇全部現金加銀行卡的方式。所以大部分用戶在余額不足時,不會選擇使用余額支付。

例3:支付寶紅包

1.業務邏輯:紅包的支付優先級高於余額,正如同余額的支付優先級高於網銀一樣。但從界面上看,紅包和余額的關系比余額和網銀的關系要密切很多。

2.心理模型:和現實生活類比,紅包好比優惠券,余額好比現金。那麼如果讓用戶把優惠券、現金和網銀支付做個分類的話,很顯然現金和銀行卡是一類,優惠券是另一類。所以這裡把紅包和余額放在一起是不符合用戶心理模型的,余額和網銀的關系反而應該更近一些。

3.任務流程:無大問題(對用戶來說可用)

4.交互規范:同一個界面上出現兩個同等分量的提交按鈕不妥;在該頁面上,“下一步”表示的是對於紅包和網銀信息的提交,所以應該在最外面,而不是從屬於網銀的區域內。

——————————————————————————————————————————

總結:

設計一個產品就像蓋房子一樣,要在戰略層的基礎上一級一級向上壘。對於設計師來說,不管是設計什麼類型的產品,不僅要對產品整體有大概的認識,還要特別熟悉下一層級的內容,才能做出符合產品要求的設計。每一個層級的負責人都有權利和義務對上一個層級的不合理之處提出意見和建議。   根據產品的戰略不同,可以在理論上將產品分為工具型產品和內容型產品,設計時需要采取不同的思維和方法。但產品多有交叉,也需要綜合考慮。

交互設計,就是通過分析用戶心理模型、設計任務流程、運用交互知識,把業務邏輯以用戶能理解的方式表達給用戶,最終實現產品戰略(公司需求和用戶需求的最佳平衡點)的過程。

業務邏輯、心理模型、任務流程、交互規范是交互設計的四要素,可以通過這四要素快速找出設計中的問題所在。

——————————————————————————————————————————

由於篇幅所限,不得不在原文基礎上做了大量刪減。如感興趣請在服務器中查看《工具型產品的設計感想》ppt。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved