2012/02/08

以使用者體驗為出發的交互設計,交互設計師的位置與任務

2008年時,整理節錄了一篇什麼是交互設計(Interaction Design)交互設計師要具備怎樣的能力,而實際上,以使用者體驗為出發的交互設計,應該包括哪些項目呢?我想是:
  • 用戶體驗研究,事前調研提供資料、後續需求細化、事後分析確保品質
  • 產品定位與明確需求
  • 訊息架構
  • UI與互動流程設計
  • 介面視覺設計
  • 前端開發
  • 後端開發



良好的開發規劃流程中,交互設計師往往在分工細緻的大型團隊、或是專案型公司出現負責:參與需求分析、負責框架與原型設計、協助UI設計、製作交互設計說明

這個重要的角色,目前大部分的公司分工仍然依據專案性質不同,而由不同人員負責該任務。例如:前台呈現由網站設計師、網站企劃主導;後台系統由工程系統背景的SA、SD主導,設計師為輔。如果有專職的交互設計師,多半定位在「UI與互動流程設計」、「介面視覺設計」。



---------------------------------------------------------------------------------------------------------------------------------


以下資訊來源自:互連網的那點事


Ⅰ. 先了解一下交互設計的基本概念:
交互設計是一種目標導向設計,所有的工作內容都是在圍繞著用戶行為去設計的。交互設計師通過設計用戶的行為,讓用戶更方便更有效率的去完成產品業務目標,獲得愉快的用戶體驗。
Ⅱ.交互設計在項目流程中的位置和任務:
項目前期的流程和節點:
職能的細化就是為了讓產品在每個專業環節都做到極致,提高競爭力。如果是為了走流程,每個環節都是任務式的交付,臃腫的分工除了增加成本和拖慢項目進度,沒有實際意義。所以交互設計需要做的足夠好,才能將這份工作做的有意義。

Ⅲ.交互設計的具體職能:
從上圖中可以看出,交互設計主要負責三件事:
①定義部分需求      ②定義信息架構和操作流程      ③ 組織頁面元素,制作原型demo

①定義部分需求
以前的慣性思維是需求應該由產品人員負責,設計人員只是實現和改善界面體驗。而產品的真正需求不僅僅來源於業務,還包括使用者的情感需求。在情感分析方面,交互專業是具有優勢的,舉個例子:
一個增值服務的宣傳模塊,業務模型可能是這樣子:
考慮到情感因素後,需求模型會不斷完善:
上圖僅僅是舉個例子,真正的產品人員不會將業務模型想的如此簡單。舉這個例子就是想說明一下產品的需求設計不僅僅是業務模型,還需要考慮用戶情感、用戶行為和運營數據。當產品人員考慮不周全的時候,交互設計師有責任對需求進行修訂和完善,這樣的目標導向設計才是完整的。

②定義框架
屬於交互設計師的核心工作內容,也就是框架設計階段。這個階段的產出品質直接影響到業務目標和轉化率。如果框架混亂,接下來的 界面怎麼優化都是無效的。這好比大型超市的走道設計,如果路線規劃的不好,再多再大的指引圖標都是低效的。交互設計做什麼?讓用戶快速完成目標,提升操作 效率,這才是框架設計的意義所在。
什麼是框架設計呢?這要分成兩部分內容:
1.關於結構導覽的設計
把我們的產品想象成一個巨大的圖書館,我們需要幫助用戶(有目的性的、目的不明確的,無目的性的)尋找他們感興趣的圖書,怎麼幫助用戶准確的尋找完成目標任務,這就是導航設計。導航的設計任務一般在新項目或重構項目。
導航大概可以分為三種類型:結構導覽關聯導覽、可用性導覽

在框架設計的階段,交互設計師主要關注於結構導覽的設計
結構導航分兩種:全局導覽局部導覽。全局導覽一般是指無聯系的訊息結構做的一級大分類,方便用戶以最快速的方式了解整個網站有什麼大概內容。而局部導覽則關注於用戶最方便的快捷操作和業務引導操作。
交互設計師的首要任務就是將業務內容訊息組織分類,劃分出主次關系,根據業務目的和用戶習慣定義規劃全局導航和局部導航的設計。

回到第一個增值服務頁面的例子(虛擬案例,非真實案例):
將需求梳理後(怎麼梳理,請google抽屜整理法),我們可以確認全局導覽:
再詳細規劃局部導航:
局部導覽的層級可以不斷往下延伸,通過樹形目錄或面包屑的方法幫助用戶瀏覽時不至於迷路。

關於流程的設計
之前的案例我們已經基本上確認了模塊需求有哪些頁面,頁面大概會放什麼內容。但真實的用戶任務並不是在一個頁面上完成的,這時候我們就需要通過流程的方式把任務變得清晰和包容用戶的各種誤操作。
虛擬案例:
在流程的規劃設計中要遵循:1.以業務目的為主要導向;2.兼容到用戶的習慣;3.盡量讓流程做減法,多一個流程就會丟一部分用戶;4.任務是連貫和清晰的;5.考慮實現方式的復雜程度;歡迎補充…
③組織頁面元素,制作原型demo
經 過了需求的完善和框架的設計,之前的這些工作還是停留在抽象的想法階段,怎麼把想法轉達給項目組的其他人員呢?交互還需要把想法和規劃表達出來,那麼最好 的方式就是制作原型Demo。把Demo做出來,讓產品,開發,測試直觀的看到產品的雛形, 再廣泛的接受意見,對原型進行不斷的修正,改進,做簡單的用戶測試繼續挖掘情感需求。

2012/02/02

社群網站 個人首頁的眼動研究情況


EyeTrackShop 在2011/12/01 發佈一份分析報告,顯示各大社交網站中,個人資訊頁(Profile Page)被瀏覽時的熱點分佈情況。
研究對象:
Facebook,Google+,LinkedIn,Flickr,Youtube,Klout,Reddit,Digg,Tumblr,Twitter,StumbleUpon和Pinterest。

---------------------------------------------------------------------------------------------------------------------------------

【名詞解釋】
  • 平均停留時間    average dwell time
  • 首次注視時間    time to first fixation
  • 停留率                percentage fixed




透過EyeTrackShop的研究結果有幾項發現:
  1. 產品圖、個人照片,特別吸引使用者的目光。
  2. 網站內容、介面的不同潛藏著不同的瀏覽習慣
    如google+的使用者,關注「內容」多於頭像與朋友
    Klout提供你評估自己網路影響力指標的網站,右下內容的小數字,關注度大於左上角的總體數字, 瀏覽者更在乎影響力數據的「變動」
  3. 如何將想傳遞的訊息放置在最合適的位置,創造最大的效益
    以文章內容來看,放置在越上方的內容越能吸引使用者的目光。





>> 延伸閱讀:
社群網站改版前後的瀏覽行為差異 « indec plus
Facebook新舊版眼動追蹤