這是一次內部分享,新部門的同學們希望我聊聊我過去從事的交互設計,做個了面對入門者等級的PPT,和各位簡單聊了聊。發到微博上,也敦促自己對交互設計從業經歷做個簡單總結。——類似的文章,貌似自己在三年前也寫過……
一. 什么是交互設計
要談什么是交互設計,先要了解這幾個概念。
網頁設計年代,大概是從2004年開始熱起來了,等到我畢業的2006年,滿大街都已經是電腦培訓機構,記得當時北大青鳥的百日千才培訓就在我每日下班必經的十字路口。
網頁設計年代重視的是特效,說白了就是特效背后的技術,君不見當時的網頁是讓人看得眼花繚亂啊,這里bling bling閃閃的,漂浮框亂跳的。然后就是套各種網頁設計模版,做出很多復雜的類似于右邊這種典型的政府網站出來。
美工時代:
網頁設計時代,大批的“美工”涌現。顯然人們有了更高的追求,光是bling bling的眼花繚亂的動畫效果已經看厭了,網頁也是需要裝飾美化的。雖然網頁設計論壇(www.68design.net)當時很火,但是網頁設計師這個頭銜仍然是一廂情愿的叫法。大多數時候,仍然是老板和客戶嘴里的“美工”。
美工時代重視的是:視覺效果。并且,原來對網頁設計一竅不通的老板們紛紛成了資深的視覺鑒賞家。美工時代“美工”很痛苦——單純靠視覺效果去評價作品好壞,太主觀,太隨意。于是他們通常會做N個版本,反復修改,直至美工崩潰或者老板崩潰。
歷史邁入了偉大的UI年代。
大概是在2005年,我崇拜的網絡名人從擅長鼠繪的小非變成了圖標達人Rokey(時光倒流到2005年,我正在看這篇文章:靈感來源于生活-微軟亞洲工程院移動設備組UI設計師張偉)。也自學了關于UI的若干知識,開始迷戀起PS像素級的奇妙世界。
UI=User Interface. 已經將User即用戶納入界面設計考慮的重要要素。但是對于精致、質感的無極限的追求,依然會讓人顧此失彼,忘記了從用戶的視角去審視一個UI的作品。于是,經常會看到雖然很精致,但是很難用的軟件界面。
用戶看到的部份,無可挑剔。但是實際上,使用的感受并不好。而感受部份,可以從幾個角度去闡釋:
他們知道不知道這個是什么東西?他們感覺到迷惑嗎?
他們是否清楚能夠通過此物做什么?
是否清楚如何做到?
當他們有興趣去嘗試時,他們知道如何開始嗎?
當他們開始后,知道如何進行下一步嗎?
當不想要使用時,能夠快速明白如何退出嗎?
當他們退出后,下次來用,是否需要重新去學習掌握如何操作?
每一步操作時,他們心理會感覺到愉悅還是枯燥乏味?
當然,我們崇尚軟件操作過程中的效率,但是若用戶感覺到愉悅,也許就不會覺得效率太低,其實,效率是個相對的說法。歸根結底,這就是用戶體驗。
UED時代——用戶體驗制勝
我們不缺技術,我們不缺另人震撼的視覺,這些雖然過去是我們孜孜追求的東西,如今已經不足為奇。但是我們缺用戶來用,我們缺用戶持續來關注,我們缺用戶體驗。用戶體驗過去一直在產生影響,但是未能得到足夠的重視。
2007年,開始關注www.ucdchina.com. UED是套方法論,UCD是指導思想——User-centered Design. 不再是BCD-Boss-Centered Design.老板說了算,除非老板能夠代表目標客戶。這和市場營銷學發展的歷程有點像,從生產主導到市場主導。
以下是我在用戶體驗設計?——是什么不是什么里用到的圖片。WEB2.0后,用戶的參與度越來越高,用戶從被動的接受者變成了主筆,主編,攝影師,作家……他們是主角,使用中遇到問題,當然不可能靠網站的客服電話或幫助教程搞定,他們需要自助,所以,降低使用門檻,消除使用障礙,吸引他們重復使用,是每個網站致力的方向。
以下是在用戶體驗設計答疑對話(半吊子和純外行)一文中的配圖。從廣義來講,一個網站的任何部門都是在為用戶體驗服務,從戰略層的布局開始,用戶體驗已經開始。而狹義的用戶體驗設計,也就是UED部門做的事情,大部分是圍繞到結構、框架以及表面層。
UED部門的組織架構基本如下,解決用戶易用(交互、文案),以及想用(視覺,交互)的問題。而用戶研究是幫我們看清用戶特征、洞察及挖掘用戶需求,前端是偉大的實現者。
那么,交互設計到底是什么呢?
我突然打了一下你,你肯定會有一定的反應。首先,你的表現會吃驚或者生氣,你的吃驚或者生氣的程度也會受我下手的輕重和方式影響。我對你的反應會有一定的預期,下手的時候,沒有期望你會突然哈哈大笑。這就是人與人之間的交互。
人和物也是一樣,我按下電視的開關鍵,我預期電視會打開。電視如期望發生運轉。若我按下電視的開關鍵,突然電視成了靜音,這就是非期望的交互行為。
二. 為什么需要交互設計?
人可以經由訓練,改變自己對于行為的反饋,比如,媽媽教育嬰兒對于他人的禮物回報以“謝謝”和微笑,不要跟著陌生叔叔走等。如果你送一個小孩子禮物,他卻對于大罵,你會覺得這個小子怎么這么沒教養。
機器、系統沒有生命力,則需要被賦予對于各種行為的反饋機制。將用戶的期望賦予給它,讓它給出合理的反饋行為。
然而不幸的是,我們的生活里,沒有教養的產品實在太多太多……
上圖左側是一個杯子。我讓現場的同學猜這個杯子的成本價,答案集中在10元左右。但是不幸的是,我為這個杯子花費了不下600元。原因正在于不良交互。
杯子的把手處僅容兩個手指塞入,當倒入熱茶后,我端起此杯,把手上部是光滑無比的玻璃,而手指又被杯壁燙了一下,結果杯子傾斜,將熱茶倒入了筆記本電腦鍵盤里——修鍵盤花費了580元。
考慮到這里,設計杯子的設計師可以考慮把把手做成磨砂玻璃,增加賣點。
上圖是公司內部的門。基本上去個衛生間都要從此門經過,那么基本上每個員工每天進出此門不下6次吧。在場的同學聲稱每次都很緊張——為什么?怕被撞啊。你看不到對面有沒有人,怕推門撞別人。自己也擔心被人撞。所以,途徑此門,瞳孔會不會由于緊張放大呢?還有,此門推也可拉也可,上面的“拉”字其實形同虛設。
每天反復扇動,座位靠近此門的同學們夏天感覺到熱,冬天感覺到冷。嚴重不低碳環保。
原因也是不良交互設計。
改進此門,可以設置透明的玻璃窗。或者用自動開啟的推拉門代替。
上面是一個電梯事件。要知道電梯是個最講究習慣統一的地方。你要經常在不同的大樓用不同的電梯。若A電梯用這種按鍵,B電梯用那種按鍵,基本上你都要重新適應。然而這個適應你又無法持續,因為你到了C電梯,仍然要重新學習。所以電梯的按鍵設計,基本上要有行業標準的。
然而華星路的創業大廈就是特立獨行的。大多數電梯將開門、關門的按鍵放到了數字鍵的上部。而創業大廈則是將報警按鍵放到此處,開門關門則放到了數字鍵的最下方。
我2008年到阿里巴巴上班(當時公司就在創業大廈),覺得這里的同事很不友好。好幾次晚到一步,電梯門即將合上,我大步向前,邊跑邊叫等一下。里面的人面帶笑容,靠門的MM伸手一按鍵,電梯門無情地關上了。
這里的人都太不友好了——直到有一次我上了電梯,電梯門即將關閉時,有幾個遲到的同事飛奔過來,我二話不說,直接按開門鍵——叮呤呤,居然響起了鈴聲,有個聲音問:什么事?我定睛一看,原來本以為是開門鍵的地方,是個報警的按鍵!原來如此!
上圖右下方我寫了一個HISTORY, 歷史。這是開個玩笑。假設某人暗戀已久的人向TA飛奔過來,希望電梯等一下,結果由于此不良設計,讓這個暗戀的人心存糾結,錯過美好姻緣。本來兩個人結合有可能生出一個能夠改變歷史的天才,結果錯失了。
原因正是不良交互設計。
上圖是今年去千島湖outting拍的酒店里的門以及開關。酒店的門打開貌似是在教我們做肢體協調操,需要兩個手同時按指示操作才能打開。試問門的安全性在于防止外面的人破門而入,不是為了防止屋內的人出門。不曉得這個過度設計有何作用。總之,媽媽不再敢把小孩子留在房間自己不帶房卡出門。因為一個8歲以下的孩子,基本上不會開此門。
右下角是大部份酒店都有的變態的燈。你不知道什么狀態是開,什么狀態是關。當然,由于酒店系統,某處燈光是由多個按鍵控制,無法用統一的交互解決。但是這是系統的問題,不是用戶的問題。
網頁上的無教養的表現更多了……
某日我看到一封郵件。我大概一瞄,我就看到幾個關鍵詞:免費,即可獲得,10元,立即領取。
(我和大部分用戶一樣,不會逐字去閱讀什么什么介紹,基本上都是在抓關鍵詞,要提高效率,請精簡網頁文案,強調文案重點)。
但是,當我點擊立即領取之后,直接給我一個添堵的頁面:我沒有資格。(文案的重要性!)
我不知道是不是不登陸造成的,當時的設計應該考慮各種風險給出周全的解決方案。
從數據上去看,也許會看到活動的轉化率很低很低,也許活動方會認為是投放人群不對,頁面不夠吸引人,或者10元的力度不夠等等。但是只要認真去找問題,也許會發現不良交互產生了嚴重影響。
當然,我還搞不明白,像UIGARDEN這種盈利模式單一急需用戶注冊的網站為何會在注冊頁面和用戶過不去。
你鏈接不上GMAIL的服務器是你的不對,別說用戶的EMAIL是無效的好不?
所以,我們需要交互設計去做什么呢?
1. 發現并解決問題
上面的那些交互的問題,交互設計師需要發現并有一套方法去解決。
2. 平衡——引入用戶視角和方法。
3. 控制成本,降低風險
交互的系統方法,讓交互的輸出物快速迭代呈現,并且低成本。不需要開發,不需要視覺,就能夠將抽象的想法具像呈現原型,方便的且低成本的工作方法,方便項目組進行多種可能性的探索。
在一輪輪的評審和討論中讓決策人和參與方根據項目的階段逐步聚焦。最終輸出一個最終版的原型。
4. 術業有專攻
當然,產品經理和視覺設計師若有可能多做一些,也可以不需要交互設計師。事實上,大多數創業型的公司,確實是沒有交互設計師的。但這不意味著交互設計缺失,有可能是產品經理或者視覺承擔了此階段的工作。但是,產品經理在平衡商業和用戶的點上,往往會更多站在老板或者KPI的角度,而視覺設計師感性大于理性,更加糾結于各種視覺細節,會不自覺在項目前期就引入太多視覺元素,讓項目組在討論中偏離核心方向。
總歸來說,他們的專攻方向是不一樣的。
1. 需求階段參與討論,了解并挖掘需求。進行用戶需求分析(也會與BI部門以及用研配合,走訪用戶,做用戶調研等),任務分析,提供網站架構圖(site map), 網頁流程圖(page flow)等,協助產品經理細化需求,從BRD(商業需求文檔)到PRD(產品需求文檔).2. 原型階段同步PRD進程,輸出各階段所需的產品原型,也即線框圖(Wireframe). 探索滿足需求的各種解決方案(包括任務流以及單頁面交互),并組織評審和討論會,在評審和討論后,輸出一個確認版的線框圖以及交互說明文檔。此階段若有必要,也會配合用研進行可用性測試,以便提前發現問題。3. 視覺-前端以及開發階段演變成為UED內部項目經理,對UED整體時間進度負責,講解需求,答疑,驗收視覺以及前端、開發成果。根據他們的反饋,改進交互設計,并與產品經理協調。4. 優化階段觀測核心數據變化,進行可用性測試和用戶調研,以便優化下個版本。先到這里,下一篇分享下交互常用的工具和方法。繼續關注哦~