close

交互設計和交互設計 - 網頁設計

http://webdesign.zoapcon.com

實際上,“交互設計”可以分成兩個部分:用戶使用流程的交互設計、界面呈現的交互設計(我往往叫他單頁面交互)。印象中,最早Cooper在解釋“交互設計”時,說到的也是這兩個部分。

所謂“用戶使用流程”,源于“業務邏輯”,又不同于業務邏輯。因為業務邏輯一般都更偏向于技術模型,對于實際的用戶使用來說會過于繁復,易用性很差。
這份工作,一般由產品設計師(負責功能設計、信息架構、‘交互設計’)來完成。比如,
(下面的例子,有興趣的同學可以給畫成流程圖,理解起來會更形象)

這里有一個Push Mail添加帳戶的“業務邏輯”(不包括錯誤判斷):
1》進入“系統設置” ,
2》進入“帳戶管理(帳戶列表)” ,
2.1 選擇“添加帳戶” ;
3》輸入郵箱名稱,
4》輸入郵箱地址和密碼,
5》填寫手機號和簽名,<可選擇“跳過”>
6》設置郵件服務器,
7》最后提交、完成。

評估:如果把這個流程直接作為用戶的使用流程,所有用戶要完成這個添加帳戶的過程需要7個步驟,至少8次提交。

經過“用戶使用流程的交互設計”之后,這個“業務邏輯”應該變成更合適的“用戶使用流程”。可以是:
1》進入“系統設置” ,
2》進入“帳戶管理(帳戶列表)” ,<如果現在一個帳戶沒有,直接跳過帳戶管理開始添加帳戶>
2.1 選擇“添加帳戶” ;
3》輸入郵箱地址和密碼,
3.1填寫郵箱名稱、手機號和簽名,<可選,默認郵箱名就是郵件地址,簽名就是郵箱前綴,手機號可以不填>
4》設置郵件服務器,<在第3步就判斷“該郵件后綴,服務器上是否已有配置記錄”,如果有,直接到完成界面,同時提供更改配置的入口。>
5》最后提交、完成。

評估:7個業務邏輯上的步驟在這里變成了6個。用戶的8次提交變成了最少3次。且80%以上的時候可以少于4次(數據顯示,使用量最高的10個郵件服務商擁有了80%以上的用戶)。

后,經過討論,我們考慮到“安全問題”和“商業價值”等多個因素,認為:“有必要相對犧牲一點體驗,已達到‘讓大部分用戶主動填寫手機號’的目的”。
于是最終的方案改成了:
1》進入“系統設置” ,
2》進入“帳戶管理(帳戶列表)” ,<如果現在一個帳戶沒有,直接跳過帳戶管理開始添加帳戶>
2.1 選擇“添加帳戶” ;
3》輸入郵箱地址和密碼,
4》填寫郵箱名稱、手機號和簽名,<默認郵箱名就是郵件地址,簽名就是郵箱前綴,手機號為空。可以選擇“跳過”>
5》設置郵件服務器,<在第3步就判斷“該郵件后綴,服務器上是否已有配置記錄”,如果有,直接到完成界面,同時提供更改配置的入口。>
6》最后提交、完成。

評估:7個業務邏輯上的步驟變成了6個。用戶的8次提交變成了最少3次,常規4次。

當然,這個“用戶使用流程的交互設計”提交物不只是業務流程圖,而應該是“帶界面的使用流程圖”。如圖。

.
所謂“界面呈現的交互設計(單頁面交互)”,實際上是“UI設計”(也就是,我在建議“取消用戶體驗部門”中說到的“視覺設計”)所做的工作。對于“界面呈現的交互設計”來說,“使用流程圖”的每個具體頁面的“頁面內交互”都只是“建議”,有權更改每個頁面的“交互方式”。

還是上面的例子,
“使用流程的交互設計”已經規定好了,“填寫郵箱名稱、手機號和簽名”必須“由一個單獨的頁面完成,而且默認不跳過”,但進入這個頁面后“光標默認到什么地方?”,“界面呈現的交互設計”應該思考。
在“使用流程的交互設計”時,或沒有考慮到光標默認停放的問題,或放到了“郵箱名稱”上,都是不合理的。“界面呈現的交互設計”應該在這個時候給優化成成“光標默認停留在‘手機號’的輸入框里”。

這個例子里,“界面呈現的交互設計”表現出來的作用可能并不夠強,再比如,


(圖1,Google短信提醒的手機驗證)

在這個頁面中,用戶往往輸入手機號以后不知道“驗證碼是什么? 哪里有?”
事實上,也許我們把“獲取驗證碼”作為一個更突出的內容會更合適一些。

簡單優化如下:

(圖2,Google手機驗證的簡單改進)

這樣一來,輸入手機號碼雖然還是在一個頁面中,但用戶在輸入手機號碼的時候只能有一個“獲取驗證碼”的操作,不會再疑惑。

總結:
簡單來說,“用戶使用流程的交互設計”是站在產品和體驗兩個角度,更合理的進行產品設計。即保證完整的業務邏輯和產品利益,又用最小的交互成本讓用戶完成任務;“界面呈現的交互設計”更多是站在易用性的角度優化“人機交互過程”,讓交互成本再小,易用性更強。

在成熟的團隊,或者交互更復雜的產品中,有人專門做偏向于產品的“流程交互”,有人做偏向于UI的“頁面交互”更合適些,因為你經常會發現你的產品人員不懂界面設計,你的界面設計人員不能產品流程…
還是那句話:團隊中如何分工無所謂,有什么樣的職位無所謂。不一定非得分開“流程交互”和“頁面交互”,但這些事情都是要有人做的,分不分開要看你的實際情況。

本文,只是為了解釋:“交互設計”不只是“單頁面交互”,更不只是“流程改進”。
好的視覺設計師/UI設計師應該擔負起“界面呈現的交互設計”的任務,不能只做視覺;偏產品的“用戶使用流程的交互設計師”,并非“必須具備視覺設計能力”。

 

arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜
    創作者介紹
    創作者 imarketin 的頭像
    imarketin

    imarketin的部落格

    imarketin 發表在 痞客邦 留言(0) 人氣()