2013年7月3日 星期三

從「周哈理窗理論」(Johari Window ) 看研究員與使用者的互動進退



最近看了一本書,叫不生氣的技術。
剛開始只是單純想思考自己在EQ上或生活中需要改進的地方,內容也確實提到很多關於情緒控制的方法與一些心理學的研究,對於事情的看法與觀點。

當中蠻有趣的理論是由一位心理學家提出的:「周哈理窗理論」(Johari Window ) 。

所謂「周哈理窗理論」,wiki 解釋是說「由美國社會心理學家Joseph LuftHarry Ingham在1955年提出,由兩人名字的前兩個字母命名。周哈里窗理論在企業領域裡的組織動力學中起了很大的作用,它很好的展示了自我認知和他人認知之間的差異,通過調整和改善自我與他人之間的互動關係進而改善工作氣氛提高工作效率。

簡單地說:
他將人分為四種個性取向(如下圖)

1. open : 開放的自己,大家知道,自己也知道的自己
2. unknown : 未知的自己,大家不知道,自己也不知道的自己
3. blind : 盲目的自己,大家知道,自己不知道的自己
4. hidden : 隱藏的自己,大家不知道,自己知道的自己

這一張圖解釋我們每個人個性開放自我的程度,有些人個性外向,什麼事情都會讓別人知道。有些人可能俱備著四種面向,有些人可能喜歡隱藏自己,有些人不知道內心深處的自己。且這四種面向也依據著「情境」的不同而有不一樣的改變。
例如:當我們面對剛認識的同事,我們可以會「隱藏」自己,展現自己優秀的一面,隱藏自己不好的面向。
此外,這種面向會隨著「時間」而有所變化,
例如說,
我們跟剛交往的對象,會習慣的展現自己最好的一面,這時候就是「Hidden」,交往久了我們開始會變成「Open」的面向,吐露一些真心話,這其中也有可能會有「Blind」的面向展示出來,有些人不一定知道自己會有什麼樣的情緒,所以會在這時候展現出來。

所以,依據這理論的說法,Researcher 在與user溝通的成功與否,有一部分取決於配合User對於陌生人的窗戶開放隱藏而定。
一個好的Researcher不僅要達到研究的目的,也要視user的個性來調整對話的步調與氣氛。
例如說,當這次是要做一個焦點團體「Focus Group」的訪談時,主持人(moderator) 可能需要注意在這group中每個人的個性取向,因為焦點團體必需涉及到「人」,每個人都需有機會分享心得,而若團體之中有人特別的害羞,此時,researcher必須特別注意,並適切的分配發言的權利,以利研究的進行。

參與者有時候可能是第一次參與研究實驗,一個好的moderator or researcher 應該扮演好中介的角色,引導訪談順利進行。



2013年6月11日 星期二

互動設計看iOS7

WWDC 一發表得隔天,相關文章果然排山倒海而來。我當然也不放過這個機會好好鑒賞一般,並立即把iOS 轉換成iOS 7 beta版本實際使用一番。整體而言,好壞參半,蘋果有膽識做不一樣的嘗試(如同Phil Schiller 在WWDC針對 mac pro 說的一句話: "Can't innovate any more my ass."),但有些許的互動細節則是令我相當困惑。

在此之前我們先看看 iOS 7 video 



影片中我們可以看到 iOS7確實是近年來變化幅度最大的一次,包括iOS7 所有App重新扁平設計、配色大幅翻修(果凍色色系)、加入control center、mail weather message map app.....全都不一樣了,safari 更有點chrome app的味道、multitasking則有點android app的味道,這樣看下來,這次真的做了很大的修改,廣度遍集視覺、設計、互動性、介面配置、使用經驗、功能等等,但這些修改的細節我們怎麼看?

評價上很兩極,大家喜歡把這次的設計跟android 或 windows metro比較,
這像有人說「這不是android嗎?」,我不太同意這種觀點。也有人說「感覺超像windows的。」我們若是從純視覺或是功能面,當然很容易表象的連結到android 的 multitasking 或是 windows的flat design ,但我認為,一個設計不能單就表象的視覺評測去評估他的創新或是價值,應該就他實際的互動行為或是使用性去評測iOS7想給予使用者什麼樣的創新體驗!



互動設計評測

Slide unlock 之互動困惑

可以告訴我,當apple在unlock 畫面中,同時有著control center 、 notification center 、 camera button 、 slide to unlock 這些訊息,我該做怎麼樣的一個動作? 
就consistency來說,我身為一個apple heavy user,我遲疑了一下,但我使用刪除法則去操作這個動作,我知道slide up是control center,slide down是notification center,那原本的camera 的互動是slide up,但slide up 已經被control center給取代了,所以我思考camera可能已經變成純粹的button行為,最後slide to unlock代表著我只能往左亦或是往右slide (因為上下已經被取用走了),所以我身為的一個apple heavy user,我知道我鍾愛的apple以為的一致性unlock行為是slide right!!好,我這樣操作了,果然, 我答對了。
BUT,前提是我是一個heavy user。
試想,
若一個媽媽、阿婆、阿公突然使用到這個畫面,他們知道怎麼去操作嗎?
以往我鍾愛的apple,他們標榜的著最好用的介面就是一個不需學習的介面,那一個需要使用刪除法的介面,使否意味著這還有改進的空間?


創新的轉場設計與桌面3D視差效果

在此次的設計中,我蠻喜歡立體空間的3D視差設計,充分地將手機的特性與互動與介面結合,讓其更有互動性也更加智慧的感覺。icon的動態展示,我想也是另一項iOS7的革新,尤其實Clock App 的 icon design ,讓我不免俗地將他從群組中拖拉置桌面,以便隨時觀賞~
但困惑得是,當我沈浸在唯美轉場的過程中,開始覺得有點浪費時間,是的,因為太優美太柔和與ease In的轉場,久了我會覺得有點久,甚至有點想念原本的開閘河道的效果。


 這些icon 整體來說非常好看非常果凍...but
此篇文章清楚的表明,這次的icon設計上,顯得不這麼"APPLE"的原因!!
我同意,動態化的表示顯得iOS7 icon 的創新,但一致性在這邊好像沒有這回事兒~
What's happened?!
gradient 可以由上到下,也可以由下到上~?
camera icon果真也與control center的長得不太一樣!?
你們出自不同母親的手嗎?
既然此次已icon的方式為主呈現,但顏色與icon的一致性也是很重要的....

 我找了很久的seach 功能
我同意,當我有著七八個八九個頁面還要滑到最左邊去搜尋是件很累人的事情。
所以此次apple針對這個的互動性,修正了其搜尋方式。
使用者只需在畫面中slide down,就是呼叫出search 介面。
相當直覺,也很快速。
但是,
需要學習。
一如我所說,這是一個給heavy user的介面。


 safari app
整個清爽乾淨少了厚實的感覺,我喜歡,
使用上也較為簡單清楚。新版safari 整合iCloud Keychain密碼管理採用統一搜尋、網址列的設計,user可以直接在網址列輸入關鍵字搜尋,設計上較為直覺。
比較大的革新是如資料夾般選擇切換頁面的方式,
另外則是分享與書籤的編輯上更加清楚簡單。


接電話困擾 
當手機響時,heavy user會習慣slide right,但是,我發現這感覺不是一個slide right的一個模式?當我閱讀後"Slide to answer",我才知道我需要slide ,但是是往哪個方向?一大困惑!!!


千呼萬喚的control center
很多人常常覺得apple怎麼不像android有control widget,好希望有~
恩,沒錯,這次有了。
但大家有發現什麼地方怪怪的嗎?
沒錯,所有的control都在裡面了,感覺像是cosco ~
分類清楚,但不知道原理....
感覺只是把該用的功能都放在control center再一一分類,恩~音樂icon一類、wifi相關一類、調整亮度好像很重要也分一類、其他小功能我就設計幾個icon組在一起,不知其所以的相關性置底囉.....


整體而言,我並不是覺得這真的有多不好,只是一些小細節感覺不是我所認識的Apple,剛開始看到也有耳目一新的感覺,但實機測試後,效能,bug等等這些我都不列入觀察重點,還是耐心地等待當機後重開....
我認為,此次是一個很大且具有爆發力的創新,勇敢的使用gesture去操作各種動作,突破過去我們所認識的iOS,但學習上可以真的需要再三思考...這些種種都不太像我所認識的Apple,甚至有人特地制Apple的一篇文章「Save the iOS:An open letter to Apple, inc. & Sir Jonathan Ive」,清楚表明對於這次iOS變革的困惑:「What happened to iOS?」。

後記:從創新看 iOS 7 

而若以創新程度來說,有人覺得真是多年以來最興奮的變革。也有人覺得這是一個早已被預測到的Flat design。但經我時機測試後的觀點來看,這並不是一個flat design這麼簡單,Apple也不是為了追逐潮流為了扁平而扁平,為了拋棄擬真而扁平,為了擺脫賈伯斯而扁平,沒錯,上面幾句都是大家的預測與iOS7推出後的評語,但在我來看,Apple不只是這麼簡單,John Ive這位天才設計師也不是只有一把刷子,Apple 重視的不只是視覺上的變革,不只是追逐潮流,而是一家懂得去蕪存菁給予使用者完美體驗的公司,我想,既google glass之後,Apple不再綁在click的互動設計,而是認為,在未來加入gesture對於user來說是一項未來的互動行為,甚至是現在普遍的互動行為,而Apple則大膽嘗試了這件事。
我依然相信,beta版後的iOS7會給予使用者更順暢的使用者體驗。



所謂「視覺只是表象 經驗是核心 完美搭配才是王道 」。
Apple雖然在這次革新中有些許不足,但地位屹立不搖~



2013年1月22日 星期二

菜單的聯想:簡易表單設計原則 web/mobile forms design pattern

XX Zhang 菜單
相信大家都遇過一種情況:「就是你看完菜單後你以為的價錢卻不是你所以為的欄位。」

這時,我們來做一個情境聯想 ~ 就來想像一下我們是一位來台灣度假的米國背包客:
  1. 魯肉飯是2塊還是33塊?
  2. 如果外國人看到這個菜單會不會以為是美金2塊?
  3. 小魯A & 小魯B是一個248一個249嗎?
  4. 紅字看似標示了重要資訊,但若是使用者沒有注意到頂部那兩個小小的"單價"會知道那是單價嗎?
  5. 編號如此不規則的排序方式是從哪一個公式算出來的我也很困惑?

What ever.....
這讓我思考到一件事情:
即使這不是另人生氣的登入頁面(sign up page),顧客只需選擇一個自己想要的食物就好。
但對於使用者來說一個"明瞭簡單"的表單與頁面設計其實是很重要的。而登入表單這件事情又是一門大學問,光是不同device的表單設計就是一件令人頭痛的事情。

這邊我舉出一些簡單的設計原則供各位參考:


Web forms

  • 簡易的表單頁面設計,頁面無須增添無謂的廣告或是資訊最好。


  • 93% 的表單偏向於單頁式註冊形式,而非setup wizard 一步驟一步驟的感覺,因為我們知道使用者不會有耐心去一步步設定完註冊程序,且還有一個例外情況,當使用者乖乖的在註冊的道路上時,不小心被中斷或是失敗,他會在註冊程序中迷失方向。


  • 若以標籤對齊來說,靠右對齊的表單相對於靠左對齊的表單更易觀看。這件事可參考文字編排的原則,當我們把表單齊右會有一種把文字框與title緊連在一起的群體性(上圖),但是但我們齊左的時候,會感覺title與文字框有段似有非有的距離感,像是一個分房的夫妻一般(下圖),較不易閱讀。
title齊右
title齊左

Mobile forms
而在手機上的表單設計基本上依循著web的設計原則,但必須注意的是:使用者在手機操作,不是用鍵盤操作,那是不是有更快更直覺的設計模式或互動方式用手機填寫表單呢?


  • Geo-location 的使用:加入手機的優勢,可以隨時隨地偵測使用者的方位這塊我們將它應用在填寫表單的時候,自動填入區域碼與地址就是一個很好的應用形式。例如一個簡易的訂票系統表單,手機自動在使用者填寫標單的同時偵測到起始位置,對於急迫訂票使用者來說就是一個很好的互動介面。

高鐵T-EX app 

  • user account : 當使用者使用手機進行sign up的動作,我們可以考慮抓取使用者在google or apple 的帳號資料,讓手機自動填入號碼、性別、email等等資訊,減少使用者的sign up effort 。
  • 創新表單設計Typeform 


總之,把我們當作使用者來思考,不想在小小螢幕輸入一堆資訊還要滑來滑去這件事情一直是使用者最厭煩的,把表單的輸入與device的優勢結合在一起,就可以設計出最直覺的表單了。

POINT : 沒有人喜歡也沒有耐心把所有表單填完,我們應該設計出一個  直覺、快速、簡單 的表單,並刪除干擾用戶的所有動作。

Reference


Will Hacker (2012, December 19). Boost Your Mobile E-Commerce Sales With Mobile Design Patterns. Message posted to http://uxdesign.smashingmagazine.com/2012/12/19/boost-your-mobile-e-commerce-sales-with-mobile-design-patterns/

Vitaly Friedman (2008, July 04). Web Form Design Patterns: Sign-Up Forms. Message posted to http://uxdesign.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/


Written By Rice Tseng