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