2012年2月8日星期三

以使用者體驗為出發的交互設計項目

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

而交互設計師多半定位在「UI與互動流程設計」、「介面視覺設計」,優秀的交互設計師更會透過數字了解用戶行為,切合產品定位,對資訊架構有了解,做UI互動與介面設計,最後做部分前端圖檔、html/css與少部分js的開發。

一般依據專案性質分工,會切割成幾種角色:
  • 用戶分析小組:進行用戶體驗研究,提供資訊協助產品定位,有時由PD兼任
  • PD:producer,產品定位與資訊架構,協同SA進行流程規劃
  • UI設計:PD溝通流程以進行交互設計,協同視覺設計師共同設計製作介面UI元素
  • 前端頁面製作
  • 前端程式開發與後端開發



2012年2月2日星期四

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


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新舊版眼動追蹤


2011年10月21日星期五

生動漫畫方式講使用者經驗設計的投資報酬觀念

這個名叫「UX is the science & art」的短片,用生動的漫畫方式講解使用者經驗設計的投資報酬觀念,讓人瞭解使用者經驗設計為何要在越前期參與。




2011年6月28日星期二

中國網站設計模式

昨天在網站企劃看到「中國網站設計模式 Chinese web design patterns: how and why they're different」,簡單加上自己的觀點、做個心得筆記,當然經過我的解讀不一定正確。

一般來說,大家對內地網站認知道的特點幾乎都是:

  1. 看起來很亂很複雜很難閱讀(must look complicated)
  2. 充斥著文字型連結(must have lots od links)
  3. 連結都用另開新視窗的方式開啟(links must open new windows)
  4. 愛用flash(must use flash)
  5. 感覺很忙-塞滿大量資訊(must look busy)

 

但其實,這些一直被認為是「大陸網站設計的恐怖模式定律」,其實不一定真的是要遵守這麼糟糕的定律...

  1. 看起來很亂很複雜很難閱讀
    • 中文字本身就是個美麗又複雜的產物,華人已經習慣中文的特色,並不會覺得難以閱讀。
    • 因為中文的複雜,更需注意間距排版以利閱讀
    • 補充:其實各地域的人,版型偏好本身就不一樣,有興趣的可以參考這篇 中、美、韓用戶眼動比較



  2. 充斥著文字型連結
    • 過去被認為中文比較複雜難輸入,所以要列很多出來讓使用者點選,但其實內地是使用拼音輸入,如同英打般方便,甚至因為拼音字彙聯想的關係,整體輸入更為快速,也比台灣與香港普遍使用的倉頡、無蝦米、注音等輸入法快很多。
    • 有時候因為太多資訊了,而更偏好使用搜尋的方式尋找內容。
    • 內地網站很多文字連結,這是事實,但使用者其實並不喜歡
    • 補充:一個區塊使用全文字型連結另有一種「黃頁」感,局部適度使用是好的。



  3. 連結都用另開新視窗的方式開啟

    • 因為網路速度很慢、頻寬有限,而使用者會另開新視窗放在旁邊讓它loading,同時繼續瀏覽原先正在閱讀的頁面。然而,這幾年內地的網路速度已經大幅提昇,同時預計2013年會到100Mbps、甚至行動上網也希望在五年內達到一樣的網路速度。
    • 過去的確必須這樣做,現況也如此,但是科技環境是會影響與改變使用者行為
    • 補充:除了網路速度的提昇之外,一方面過去幾年IE6先天限制沒有開分頁瀏覽的功能, 一律使用新開視窗,而內地IE6的市占率居高不下;但根據這兩年的觀察,IE6的市占率已由超過七成降低到五成多,IE7開始已經具有分頁功能,內地使用IE8的比例在這一年增加不少。



  4. 愛用flash(其實應該要加上圖片):
    • 現在以及過去的習慣方式,flash多用在廣告上來吸引使用者的注意力、希望讓廣告更為生動而引起使用者注意。


      但其實很多使用者不喜歡這些廣告干擾(相信閃動的很可怕的廣告你一定有見過),而去加裝使用了阻擋廣告的軟體/擴充元件,反而讓這些廣告完全沒有曝光的機會。
    • 受限於字型/字體選擇,為了使用不一樣的字型/字體大小而使用flash/圖片去製作。

      網頁可以支援的中文字型實在少的可憐,而且還不是所有的字級大小都好看,有的尺寸用了還會破破的,通常簡體使用的是12px、15px,繁體是12px、13px、15px。

    • 補充:台灣過去只有標楷體、(新)細明體,這兩年多了微軟正黑體,而內地主要為宋體、微軟雅黑體。
  5. 感覺很忙-塞滿大量資訊(must look busy)
    • 過去曾被認為內地網站不喜歡極簡風格。
    • 簡報中也提到了一點:「中國人很愛面子,在乎別人對自己評斷的價值。」
      一般公司都盡量豐富網站能提供的訊息,如同請客的時候給客人很豐盛的饗宴。
    • 其實不完全是這樣,像是搜尋(搜索)引擎、部落格(微博),資訊並沒有爆炸的感覺。
    • 像是淘寶這類典型感覺很忙、塞滿大量資訊的網站,
      相對於「這網站看起來跟呈現的感覺如何」,使用者更在乎「這個網站可以給我什麼」,有時候是被迫的使用,因為沒有同樣功能的網站、具有更好使用者體驗的選擇。
    • 內地的使用者其實很在乎使用者體驗,也是設計師去改善設計的推力之一。

 

因此我們可以下個結論:其實內地人也不喜歡/不滿意現在的內地網站

 

 

UX(使用者體驗)已經在內地崛起(其實內地飛起的很快),但尚未普遍知道使用者體驗的重要度;另一方面,設計其實薪資不高(台灣還不是一樣,很可憐的被當作美工),也理所當然的希望能夠快速產生,以量大增加收入,通常藉由複製模仿其他現有的網站、或是使用模板,當然就大家越來越像、越來越像,不過,這只是過渡時期

 

ppt中也提到了一些中國人跟西方比較明顯不同的地方:

  • 很重視分享與參與,在部落格、影片以及微博等等,提供的意見回饋遠多於西方社會。
  • 很重視圖像式的表達,更偏好使用些icon、動態表情等等的。

文化習慣其實很難一篇文章解說的完或是一言以蔽之,但是也不用太放大這些文化差異、在地化的問題,因為社會文化習慣是會隨著時間而改變,時易勢移,包括使用者習慣也是會改變。

這跟上個月有參加「 東吳心理系和實踐工設系合辦的使用者經驗研究與設計研討會 」,大家分享的一些論點是不謀而合,改天勤勞的時候,我再把當時筆記的ppt整理share出來,有興趣的人可以看看其他人的心得筆記

 

延伸閱讀:[簡報]HP19 Mobile Design: 為行動使用者設計




2011年6月27日星期一

交互設計師要具備怎樣的能力?

台灣到現在,對於「交互設計」普遍的瞭解度仍然很低,幾年前轉過一篇:什麼是交互設計(Interaction Design),即使經過了幾年狀況有好些,有比較多相關文章介紹,也較多公司開始注意到,但其實現況還是很坎苛、挑戰仍舊很大

而交互設計師要具備怎樣的能力呢?這篇我怎样做交互?用很可愛質覺的漫畫方式呈現,表達了做交互設計必須要的多才,根據她的分法,我加了些說明如下:

  • 具備想像力 - 利用想像力,創造或是聯想配置、讓想像的互動具象化。
  • 善於溝通 - 瞭解引導確認需求、說服&讓他人接受設計理念
  • 軟件牛人 - 我認為稱作「電腦達人」更貼切点,除了
    溝通確認以及呈現設計的時候,使用各種軟體工具去呈現表達之外,其實也需要對於各種系統的預設設計有基本的瞭解。

    因應不同公司/專案,配合使用的軟體不盡相同,諸如細緻真實度很高的Axure、我個人偏好使用手繪風格的Balsamiq Mockups,簡單點的工具像是excel、word,搭配說明勉強也是能夠呈現作為溝通工具。
  • 邏輯能力強 - 白話點就是頭腦要清楚有條理,另外對於流程需要有一定程度的瞭解。
  • 主動性高 - 前期應用像是主動觀察使用者的狀況、發現與得到回饋,後期像是成效追蹤分析等等,主動出擊很重要。
  • 各科背景 - 要做好交互設計,要具有認知心理學、視覺設計、前端開發的一些經驗,一專多才,除了可以有更全面的評估之外,規格書才能寫的更精準問題少,進一步加速整體效能。



不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。

2010年5月31日星期一

[賞圖] CSS3做的小叮噹

友人傳給MiyaC這張圖,很可愛~
用css排的小叮噹

期待IE9對CSS 3 支援度能更高...


2010年5月14日星期五

讓整個網頁包括圖片變成灰階(黑白哀悼版)grayscaling

有時候,可能因為某些原因(通常是為了做哀悼版啦),
要讓整個網站短期間內變成黑白灰階版,
其實是有個很"瞬間"的方法!

在IE系列裡,可以從css裡面設定加一段:
elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
就瞬間變成黑白,包括圖片也一起灰階了!



但是,ie以外的瀏覽器,就不支援這種濾鏡,必須採用程式手段...

可以看下面這個連結,介紹 如何讓非IE的瀏覽器,呈現灰階黑白版的網頁

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/