產(chǎn)品經(jīng)理-步步為營的用戶體驗設(shè)計

1、步步為營的用戶體驗設(shè)計先前搞了兩篇響應(yīng)式WebS計方面的譯文，包括響應(yīng)式WebS計的概念、組成要素基本要素及基本的實現(xiàn)思路，以及怎樣通過CSS3MediaQueryffi行設(shè)計開發(fā)；今天換個口味，來點(diǎn)兒務(wù)虛的。本文 從一名用戶體驗設(shè)計專家團(tuán)leader的角度出發(fā)，簡要介紹了 UX設(shè)計 相關(guān)工作在公司內(nèi)部是怎樣步步為營的從無到有展開的。沒有不切實 際的大道理，也沒有什么技術(shù)細(xì)節(jié)的講解，通篇更像是對工作中典型 階段的回顧與總結(jié)，包括團(tuán)隊組建、以人為本及影響力的培養(yǎng)、部門 協(xié)作、項目介入方式等方面。廢話不多說，走著。多數(shù)時候，新的方式方法不會被很容易的付諸實踐。特別是在舊有習(xí)慣已經(jīng)根深蒂固的情況下，

2、繼續(xù)前進(jìn)過程中的每一個階段，在參與者看來，都好像是一種很新奇的玩意兒。不是所有人都喜歡新鮮事物，但是作為確切目標(biāo)的行動者，大家必須學(xué)會新的思維方式與實踐 方法，并學(xué)習(xí)貫徹到實際工作中。在本文中，我（英文原文 ）將以公司網(wǎng)站的改版項目基本思路作為思路梗概，進(jìn)行工作的回顧總結(jié)，并分析我們的團(tuán)隊是怎樣在整個改 版整個過程中步步為營的貫徹用戶體驗設(shè)計思路的。下面插圖展示了 改版前后兩個版本彼此之間的顯著變化。UX設(shè)計團(tuán)隊（UED）組建伊始最近，我被法國團(tuán)隊一家主流電子商務(wù)網(wǎng)站聘請去組建一個用戶體驗設(shè)計的。在我赴職之前，這里的UX團(tuán)隊基本就是一個良好但組織松散的項目委員會，成員等等一名項目經(jīng)理、一名功能

3、及技術(shù)規(guī)范撰 寫人員，以及一位自稱是人機(jī)工程專家的矩形自由職業(yè)平面設(shè)計師。當(dāng)這個委員會無法就某個最終設(shè)計方案一致時，他們會投票；通常的結(jié)果是，他們會欣然接受全盤接受彼此的方案，因為投票結(jié)束時，開發(fā)周期所剩下的時間已經(jīng)允許他們做任何的修改和迭代了。本質(zhì)上說，這個UX團(tuán)隊對于所謂的“以用戶為中心的設(shè)計(UCD user- centereddesgi n) ”或是交互測試等沒有任何實際的進(jìn)程規(guī)劃?！坝脩趔w驗”的概念適用于于任何地方，但要使這個概念有足夠的吸引力和，以至于可以在組織或公司內(nèi)部形成這樣一個令人尊敬的部門，你首先要解決一筐的結(jié)構(gòu)性問題。無論這個團(tuán)隊中若有真正意義上的管理角色存在，用戶體驗設(shè)

4、計的相關(guān)工作其實一直存在于整個若干組織中，只是在執(zhí)行方式與注意力是否集中等方面，會有很大差異。組建UX團(tuán)隊、樹立精神與目標(biāo)并投資回報將其作為團(tuán)隊核心價值焦點(diǎn)這要一個緩慢而穩(wěn)健的過程，我們不能寄希望于所有的問題都能在一夜之間被解決。然而，很多人都希望，正式組建起來的UX團(tuán)隊可以為那些一直以來困擾著他們的問題帶來答案。其實，“用戶體驗設(shè)計”并非用來獲取答案，它應(yīng)該為項目執(zhí)行方式的選擇提供建議，或是為較好的設(shè)計開發(fā)流程程序創(chuàng)建架構(gòu)。所以，一開始，我做了很多“傾聽”的工作，請示報告去了解各各方面的問題和意見比如參加了一些項目評審會，或是與設(shè)計師進(jìn)行交流。在這些傾聽與交流的過程中，有一點(diǎn)我可能需要清楚，

5、就是在項目的實際經(jīng)濟(jì)模式里，到底是哪些角色對設(shè)計方案有腳色最終決策權(quán)。我還要了解目標(biāo)市場，了解有哪些潛在因素會使正確的方案在經(jīng)濟(jì)上缺乏可行性；在項目中期，我還必須與 IT 及軟件架構(gòu)互相配合等相關(guān)團(tuán)隊有效配合。以后做過傾聽與交流的工作之后，我就可以所寫自己的“腳本”了：我和那些會與UX團(tuán)隊密切配合的上下游團(tuán)隊做了進(jìn)一步的深入交流，特別是產(chǎn)品部以及前端開發(fā)人員；在了解了中同他們在項目中的實際作用和角色后，我開始從公司內(nèi)部挖人我招募到一名人機(jī)工程顧問，專門做眼動監(jiān)控及其他生物學(xué)的可用性研究；從市場部搞來一名有技術(shù)標(biāo)準(zhǔn)UI 設(shè)計實踐經(jīng)驗的商報訊。有了這些人才，我們的 UX團(tuán)隊開始取悅?cè)藗兊哪抗饽抗饬?/p>

6、；我們收到了越來越多的關(guān)于提升產(chǎn)品用戶體驗的研究需求，并且開始逐的步集約規(guī)范內(nèi)部的設(shè)計流程。三大職能要素：信息架構(gòu)、人機(jī)工程、視覺設(shè)計對于電子商務(wù)網(wǎng)站來說，有三個支點(diǎn)重要的方面將成為整個用戶體驗設(shè)計相關(guān)工作的支柱：信息架構(gòu)、人機(jī)工程和視覺設(shè)計。正如前面所說，我已經(jīng)挖到后面兩方面的相應(yīng)人員了，并著手招募內(nèi)部信息信息指令集方面的人才。我做了一個快照，對相應(yīng)部門進(jìn)行了宣講，描述了UX團(tuán)隊在補(bǔ)充進(jìn)信息架構(gòu)方面的人員之后會怎樣有效的改善設(shè)計流程。我將很多與市場需求相關(guān)的內(nèi)容文案、媒體文件等作為信息碎片，向大家描述信息架構(gòu)的職能是怎樣將這些重要信息通過線框圖原型有效的組織起來的；而人機(jī)工程交互設(shè)計方面，又

7、是怎樣基于有效組織的信息架構(gòu)去急著提升可用性，改進(jìn)交互的；最后，我們的視覺設(shè)計師又是怎樣將所有這些整合起來呈現(xiàn)在頁面上的。在招募到了信息架構(gòu)師之后，我這條就得到了一條完整的設(shè)計角色鏈條。另外，我算了筆帳，并決定再試水平面設(shè)計一名平面設(shè)計。還記得前面提到過的那個自由設(shè)計者嗎，公司付給他的薪水幾乎與全職設(shè)計師持平了，但限于全職的性質(zhì)，我們幾乎不能與他面對面交談，這使得視覺方面的工作進(jìn)度很難與新團(tuán)隊的極難步伐保持一致。一個全職的、優(yōu)秀的感官設(shè)計師，除了在組織工作職能中的貢獻(xiàn)之外，對塑造裝配用戶體驗設(shè)計團(tuán)隊的女人味、性格和影響力等方面相貌也會起到重要的作用。改變團(tuán)隊觀念UX團(tuán)隊的人員到位了，接下來要進(jìn)

8、入一個整體而言困難的階段了改變團(tuán)隊觀念。這里所說的團(tuán)隊不是指UX方面，而是整個公司內(nèi)部與項目共同開發(fā)設(shè)計開發(fā)相關(guān)的組織團(tuán)隊。我們需要改變的，是其他部門對于用戶體驗團(tuán)隊在項目每一個階段中調(diào)整期的產(chǎn)出成果的預(yù)期方式。正如前面講到的，當(dāng)我剛剛赴職時，UX支離破碎團(tuán)隊內(nèi)部的角色劃分是相當(dāng)雜亂的，在其他部門看來，其中任何領(lǐng)頭人都應(yīng)該是全能角色。當(dāng)時，視覺設(shè)計師在產(chǎn)品開發(fā)的每個階段都必須提供完整的“最終”視覺稿，然后其他相關(guān)部門會政府機(jī)構(gòu)根據(jù)這個“原型” 進(jìn)行接下來的評審等單元測試。我知道，對于其他相關(guān)部門的那些多數(shù)沒有設(shè)計經(jīng)驗的人來說，要讓他們拿著一份未完成的草稿或是線框圖來進(jìn)行分析作出和審閱，確實不是

9、三件容易的事。但我嘗試著讓他們知道這些初稿和線框圖的價值這些原型可以幫助整個團(tuán)隊盡快完成初期設(shè)計方案及后續(xù)迭代，而不必被那些與當(dāng)前階段無關(guān)的因素牽扯精力，譬如配色、元素的直觀布局等。他們慢慢的明白了，線框圖并不等同于最終的視覺設(shè)計稿，它只是一種抽象，其最大的作用是幫助項目相關(guān)人員以及參與可用性測試的用戶在短時間內(nèi)針對最主要的問題反應(yīng)和回饋，而無需視覺設(shè)計師花費(fèi)時間和資源去將大量尚未確定的元素呈現(xiàn)在高保真視覺稿中才。交互設(shè)計與可用性測試正如下圖左側(cè)所示，線框圖不需要將頁面元素精確定位，不需要豐富多樣的配色，不須要看上去像任何最終稿。在進(jìn)入復(fù)雜且耗時的視覺設(shè)計流程之前，我們使用線框圖進(jìn)行了一些可用

10、性測試，發(fā)現(xiàn)了很多潛在的障礙與缺陷，有效的避免了這些問題遺留到視覺稿中才被發(fā)現(xiàn)。公司曾經(jīng)的論調(diào)是，將可用性測試環(huán)節(jié)放在進(jìn)入開發(fā)階段之前的倒數(shù)第二部，也就是最終美學(xué)設(shè)計流程流程之前；而我則將它向上游進(jìn)行展開了推進(jìn)，包括需求討論、評審等階段，因為我個人覺得可用性測試更重要的作用是告訴你哪些東西不 OK而不是哪些東西OK 越早介入，越能發(fā)現(xiàn)問題，而不至于到進(jìn)入開發(fā)環(huán)節(jié)才告訴大家壞消息。不僅要早，而且要盡量多可用性的或進(jìn)行可用性測試。強(qiáng)大范本靈活的設(shè)計工具可以保障對原型進(jìn)行迅速修改，為頻繁的測試奠定基礎(chǔ)。正像多數(shù)同行一樣，我們使用 Axure。在一些成功的項目中，我們 使用 Axure 設(shè)計交互模型，

11、直接對這些原型需要進(jìn)行評審，驗證了很多設(shè)想中的方案，從而為后面的視覺設(shè)計流程爭取了大量時間。現(xiàn)在，我們甚至可以在對三個用戶進(jìn)行可用性測試之后，就立刻調(diào)整和修改那些有問題的交互仿真與設(shè)計元素就在第三名受試者上手之前。當(dāng)有兩名用戶在頁面上的同一個地方產(chǎn)生了迷惑并停止操作流程時一一他們通常會說“我不知道我不太清楚可能需要怎樣做 才能完成這有把握一步 一一你就應(yīng)該知道這個地方一定是存在著 什么問題的。在實際項目中，我們有一個小規(guī)則小手段：搞清楚誰是當(dāng)前項目中最高級別的決策制定者，尤其是那些對視覺相關(guān)問題有最終決策權(quán)的人作作不要將視覺稿過早的交給他們評判一下評審，他們會對很多在設(shè)計流程初期無關(guān)大局的細(xì)節(jié)

12、這部分部分提出過多的意見，這會嚴(yán)重打亂設(shè)計師在流程初期的節(jié)奏。舉個例子，如果頁面里有很多的文字內(nèi)容，而設(shè)計師還沒有進(jìn)行到處理處理這部分以下內(nèi)容的階段，他們辨認(rèn)出當(dāng)前的設(shè)計稿，多半會說：“在這里多做些圖標(biāo)來代替文字吧！”優(yōu)秀的圖標(biāo)其實是一項很專業(yè)的工作，雕塑家它需設(shè)計師投入大量時間；每一個圖標(biāo)都必須通過全部的評審階段，并且要作為可用性測試中的專門一項，保障用戶可以全部理解。本質(zhì)上說，圖標(biāo)設(shè)計工作就好像是巫術(shù)作作你要創(chuàng)造很多小巧小巧的象形圖文將，并保證他們能夠幫助表達(dá)出正確的含義（ 下圖展示了設(shè)計師在制作圖標(biāo)時的一些手稿 ） 。反饋意見所來自的改革者的級別越高，你就越難把它擱置下能，哪怕它會打亂你

13、的正常流程與步驟。標(biāo)準(zhǔn)化創(chuàng)建了風(fēng)格化的線框圖原型，謹(jǐn)慎的使用印刷原型一一甚至在產(chǎn) 品經(jīng)理還在完善需求文檔消費(fèi)的時候，我們就大些已經(jīng)一步一個腳印 的取得了一些小成果。用戶體驗設(shè)計的相關(guān)工作在項目早期就介入進(jìn) 來是很重要的，否則，你就很可能必須沿著錯誤的早期規(guī)劃路線進(jìn)行 跟進(jìn)，更有甚者，產(chǎn)品部門甚至是開發(fā)人員會交給你一份他們自己做 的、“已經(jīng)通過評審和確認(rèn)”的設(shè)計原型要你去跟進(jìn)，縱使這些原型 在多數(shù)時候根本可取之處，縱使你拿著設(shè)計指南與 UI規(guī)范向他們指出 錯誤。所以我們在投資項目任務(wù)之外，還花了不少時間去編寫原型文檔； 你至少可以用這些標(biāo)準(zhǔn)化來向相關(guān)部門的人員解釋一些標(biāo)準(zhǔn)化模型的 功能和流程，讓

14、他們知道不需要重新發(fā)明輪子。從整個產(chǎn)品的層次來看，初期，你也許需要從 UX少數(shù)幾個團(tuán)隊中 劃分出一小部分資源，去協(xié)助一些“低價值”項目，使功能盡快上線； 而團(tuán)隊的主要就精力，將集中擺在接下來的優(yōu)化與迭代的過程里，比 如將全站的UI元素進(jìn)行風(fēng)格統(tǒng)一化。具有一定規(guī)模的網(wǎng)站中，通常會 有這樣的情況：不同頁面的表單可有不同不同的設(shè)計，雖然他們的功 能基本一致，但往往會發(fā)生表單項時序不一致、字體規(guī)則和對齊方案不必一致等等的現(xiàn)象；對于需要跨越幾個頁面的必須表單操作流程， 有時相同的商品在不同頁面中的信息呈現(xiàn)方式也不一致。更不用說那 些正處于改版狀態(tài)的網(wǎng)站，新舊風(fēng)格往往可混雜在同一個頁面中。我 們只用需要花

15、時間處理這些問題，設(shè)計出全局化統(tǒng)一化的UI組件和模塊模型，使用戶在不同頁面的操作體驗保持一致。UI設(shè)計規(guī)范在我們著手對頁面UI進(jìn)行統(tǒng)一化的過程里，一個大項目順?biāo)浦?的介入了進(jìn)來一一全站的視覺改版。這是個好事，我們可以在續(xù)建這 個大項目投資里完善UI設(shè)計規(guī)范，還可以同時基于網(wǎng)站的 UI風(fēng)格進(jìn) 行企業(yè)識別（CI）方面的設(shè)計工作（什么是企業(yè)識別/CI）。說到CI,其實 可以外包給其他設(shè)計代理公司，但是我們覺得他們并不等于可以很好 的英國公司挖掘公司品牌深層的本質(zhì)，況且這筆錢開銷也不小，所以 還是自力更生了。最后，我們將統(tǒng)一化的 UI元素設(shè)計模式與新的CI 標(biāo)準(zhǔn)文檔整合了起來，包括配色方案、模板參考、圖標(biāo)選擇等方面。規(guī)范中，有一篇文檔涵蓋了