Udemy-Become a UX Designer 1-5單元

Mockup-製作模型
如果嚴格來說,是指那種3D立體的實物模型,後來也通用在程式的模擬畫面上
Wireframe
網站的草圖、流程設計
 
For iphone:
  1. iPhoneMockup
    它是一個免費的網頁程式,直接在網頁上就能用拖拉的方式把iPhone的操作畫面給畫出來,不過就只有線條而已。
  2. OmniGraffle
    OmniGraffle是一套Mac上非常有名且功能強大的流程圖、架構圖、模擬圖等…的製作軟體,它本身提供不少精美的元件,讓你能夠製作精美的畫面。它還開放API讓你也能自行開發這些元件,提供給別人使用。我在網路上找到人家開放出來的 iPhone UI元件(stencils),透過這些元件,我很輕鬆地畫出 iT邦幫忙 App 的模擬且逼真的畫面。不過 OmniGraffle 一套並不便宜,但它提供免費試用,沒有期限,只有元件個數的限制。如果畫面元件不多的話(小於20),用它來畫圖很夠用了。
UX整體都還是會參照這個流程
1) 從用戶研究 (User Research) 開始 
2) 根據研究來做出東西 
3) 測試所做的東西
4) 重複 (Repeat)

做法

Discovery & Research Phase
主要用於辨認使用者需求和為之後的設計找到靈感
Synthesizing Research & Design Strategy Phase 
主要是仔細的檢視研究結果,並從中找出趨勢和資料裡面所隱藏的線索,並對於目標用戶有更深刻的理解
Placement & Layout Phase 
主要是根據用戶研究畫出解決方案或是產品的草圖,並討論優缺點
Execution Phase
主要會下決定是否要將原型做出來,並做成可互動式的原型
Usability Testing Phase
主要會做易用性和各個功能的測試,東西是否夠容易使用
 
Attitude data- 人們怎麼說的
Behavior data-人們怎麼做的
 
相關測試方式:
  • Attitudinal Data-Interview & Focus Group
  • Behavioral Data – A/B Testing & Contextual Inquiry
*Qualitative Data- Interview & Usability Test&Contextual Inquiry
*Quantitative Data- A/B Testing, Survey & Clickstream Analysis

Qualitative Data -描述特徵

1.會直接透過觀察來蒐集像是態度上或行為上的特徵,例如:使用者是左撇子還是右撇子
2.會間接的利用工具或是調查來蒐集資料,且可以用數字來表示,例如:在美國有多少%的人是左撇子還是右撇子。
 
*Generative Data-定義問題:某潛在使用者的購物習慣
*Evaluative Data-衡量目前的設計:觀察你的顧客如何完成付費過程
Generative Data 會出現在第一階段的Discovery & Research,因為在前期,我們根本不知道要用哪種方式來解決用戶的問題 ,而 Evaluative Data 則是在後面的4個階段,都會一直不停的被衡量和檢視。

uxdesigner.png

uxthree.png
UX一開始的兩個問題:
What does it do
How does it feel
size:團隊有幾人 / 你要收集多少人的資料
culture:你和其他人的合作方式
 waterflow.png
在waterfall流程中,UX和DEV(開發、實作)被分成兩個不同的階段,由兩群不同的人來負責。當UX設計師完成設計之後,把設計文件「丟過牆」,交給開發團隊,之後UX設計師就沒什麼事,可以準備開香檳慶功。這種工作模式,和傳統純軟體開發流程中,架構師把系統架構設計完畢之後,丟給程式設計師去施工,之後就可以準備拍拍屁股走人的模式很像。

 

UX設計活動被切成幾個iteration,藉由快速得到使用者的回饋,來確定UX設計是否符合使用者需要。在這種模式當中,Agile UX的產出物還是設計文件,然後一樣「丟過牆」交給開發團隊去實作。至於開發團隊是採用waterfall還是敏捷開發,就不在規範之中。

 

《Agile Experience Design》這本書建議,UX和DEV可以分成兩個track。UX設計先偷跑一個iteration,為之後1~2個iteration的UX設計做準備。同時間,UX設計師也要與DEV一起合作,解決目前iteration中,需要UX協助的開發工作。

 

從cross-functional team的角度來看,UX設計師和開發人員應該是一起合作,所以每一個iteration都有UX與DEV的工作。所以上面這張圖所表達的觀念,反映出「Agile UX是指把UX設計活動整合至Agile框架」的看法,感覺起來比較符合敏捷方法的精神。但是,似乎又沒有凸顯出UX設計在開發專案生命週期中所扮演的重要角色。

 

Image.png
藍色代表UX,綠色代表DEV,紫色代表PO(製作產品藍圖),黑色代表業務與其他相關人員。(圖片來源:泰迪軟體)

 

敏捷開發把產品開發看成一個「持續進行與持續改善」的過程,雖然敏捷開發並沒有強調專案生命週期不同階段(phase),但大體上還是可以將每個release,如上圖所示分成「需求開發」與「實作」這兩個階段:

 

    • 需求開發階段:這部分是很多agile method比較沒有著墨的地方,以Scrum為例,它只說「只要PO準備好product backlog,就可以開始Scrum專案」。至於PO如何產生product backlog,則沒有規範。這一部分,就可以依賴UX設計師的專長,結合開發團隊、業務團隊、PO等專案有關人員,一起來建立產品願景(vision),然後以使用者為中心的觀點出發,整理出專案的product backlog。

 

需求開發階段不可過長,依據專案大小與團隊的敏捷度,時間長短從幾天、一周到數周之內。

 

    • 實作階段:有了初始的product backlog,敏捷團隊就可以開工實作這些功能。當然需求會改變,因此product backlog也不是固定不變。在實作階段,每一個iteration都可以舉辦product backlog refinement workshop,由PO、UX、DEV、業務等人一起合作,重新調整product backlog的內容。除了參與product backlog refinement workshop,UX設計師會跟PO合作,準備下一個iteration所需的需求。同時,UX設計師也會和DEV一起處理開發工作中,與UX有關的項目。

 

最後補充一點,上圖中「產品釋出」時間點,對於「敏捷戰鬥力」非常強,做到持續釋出(continuous delivery)的團隊而言,可能會覺得不適用上圖對於專案生命週期的描述。因為這樣的團隊每一個iteration的產出物可以立即上線,不同release之間的分界線可能就沒有那麼明顯。但是既使如此,通常產品還是會存在所謂「大改版release」,這時候可以將上圖中「產品釋出」時間點想像成「大改版release」,而非每一個iteration的「小改版release」。

 

5step.png
Discovery:product space/ clients – Understand the space you are working with

 

Concept: 目標/商業方向/對顧客的最終目的:要滿足顧客的____
Invent:讓所以變成prototype —- 架構
Define&Build-做出來
Deploy&Grow-產品釋出

 

Early Stage activitiesearly.png

 

重要觀念:我們要做的客戶不見得瞭解、普遍,但我們的目的是讓產品做到最好

 

*stakeholders:利益關係人(能夠影響專案的人)

 

*persona:Persona 這個詞本身有角色、形象、假面之意。你的Persona文檔(控制在2~5個)通常需要包含你的目標用戶。作為Persona中的虛構的角色,它的屬性和特徵是基於產品研究用戶定位來設定的,用作後續設計過程中所面對的「理想用戶」,本質上,它就是一個占位符。作為人物設定,其中會包含個人信息,遠不止於年齡和收入信息這麼簡單

 

Persona 文檔的目標是利用角色來驗證你的目標用戶是如何感受如何看待你的設計的。

 

確保Persona設定有效的關鍵是之前的研究:

 

正如同《可用性測試指南》中所述,這種測試通常包括定量定性測試
定性研究包括用戶訪談、實地考察,甚至包括用日記記錄,這些手段是用來了解用戶思維過程的最佳方式。

 

定量測試:也同樣包括分析測試,不過它們所針對的是更容易量化的指標,而反映出來的結果也更加抽象、直接。

 

 
參考UXPin的模板

 

照片:幾乎每個人物都應當有圖像,通常是一組照片。有照片能幫你將他們當作真實的角色拉進行思考。

 

個人資料:通常你需要將一個角色的個人基本信息補充在這個地方。

 

性格:性格的呈現形式有很多,分支也很多,你可以用一系列關鍵詞來界定一個角色的性格和屬性,也可以用過詳細的論述來界定他的心理狀態。所用平台:用戶喜歡用哪個平台,iOS還是Android?他們對於各個平台是否都很熟悉?哪些事情是他們想盡力避免的?

 

目標(動機):在這個環節你應當探討用戶的三個目標:人生目標、體驗目標和最終目標。*注意,這個地方用戶的最終目標是最重要的。

 

影響:哪些產品和品牌對這個角色有影響?其實這個因素會很大程度上影響到他對網站的期望、行為偏好、個人決策。

 

喜好:這是充實人物特徵的另外一種方式,是針對特定用戶進行設計優化的重要參考。

 

格言:這其實是一個可選的條目,有些人會受到格言的影響,它們會影響人的決策、行為和期望。

 

0Bm1QV03.jpeg
Empathy Map,我們可以稱之為移情地圖,它像是一個輕量級的Persona文檔,在資源短缺時間緊的狀況下,可以使用這個文檔。Empathy Map 將 Persona 中的角色的個性和性格部分移除了,更加專注於用戶在特定情況下的感受。

 

Tadpull 描述了製作Empathy Map的最佳過程,並且包含了一套免費的模板幫你開始製作文檔。

 

初始設定:搜集一組測試用戶,或者為你的團隊中每個成員分配一個特定角色。然後,為每個角色準備一個特定色彩的便利貼。

 

提出問題:提出一系列看起來更寬泛的問題,比如「你為什麼要使用這個網站」,這些問題應該是相對比較開放的,比如「你如何選擇要瀏覽的網站」這樣。

 

筆記地圖:隨著答案的不斷增加,選擇屬於你顏色的便利貼,將答案記錄上去,並粘貼到特定的區域。

 

簡化地圖:瀏覽所有的筆記,將最好和最有用的部分保留下來,其他的提出。 稍事休息:完成上面的部分之後,稍事休息,沉澱一下思路。記得貼紙構成的地圖最好保留在公共區域,時刻提醒。

 

界定目標:在區域的最下方有需要補完的地方,「____需要達成____的目標,因為____」,現在你應該能夠洞悉目標用戶的想法,將他們的情況補充上去。每個句子最後一個空是填寫原因的,這部分需要特別注意,因為這部分對於你的設計最能引起批判性的反思。

 

*Design concepts:這可以給visual designer做或是其他負責人 不見得是UX做

 

 bread and butter.png
*bread and butter維持生計的技能,只一個人或一個部門透過一個專業技術來維生

 

*User scenarios
用戶劇本通常是圍繞著一個特定目標來設計的。

 

 
比如說,第二天是母親節,要為母親預訂一份禮物。目標很明確,要達成目標,用戶需要點擊幾次按鈕,走哪些流程,需要多長時間,如何在過程中融入情感,貫穿始終。對整個用戶流程有了預判之後,設計師對於UI和UX的設計就有了把握。

 

 
0Bm1QV04.jpeg
構建你的劇本的時候,應當更多地考慮用戶相關的因素,而不是對你而言最好的流程和最喜歡的決策。

 

 
行為
用戶同網站交互的時候他們有哪些癖好?他們是打開網站就登錄,還是需要的時候才登錄?他們是否還同時上著其他的網站?

 

 
動機
為什麼用戶想達成這個目標?有多想?為此他們還願意忍受哪些事情?

 

 
環境
用戶在什麼地方打開網站,家裡、公司還是在路上?他們用的電腦、手機還是其他的移動設備?他們是否同時分心他用?

 

 
外部因素
網絡接入速度如何?是否有其他的限制?

 

 
還有一點特別重要,你最好嘗試將用戶想達成的目標可視化。用戶的角色構建越完整,劇本構建也就可以越準確。

 

 
對於用戶最有一個建議:不要試圖將每一個構想都細化成劇本,堅持只針對最重要的「劇情」做精準的勾畫。

 

Customer Journey Map
用戶旅圖將會涵蓋角色信息、用戶劇本和移情地圖的全部信息。這麼設定並不是要讓用戶旅圖成為一個大雜燴,而是要將用戶性格和用戶流程、交互過程結合到一起來看待問題,每個階段不同環節,都牽涉到不同的情緒和情感。

 

 
目標
他們希望在每個階段達成什麼目標?

 

 
期望
用戶認為會發生什麼?動作發生的時候用戶會感到什麼,合適還是不合適?

 

 
流程
他們想怎樣完成整個流程?他們實際操作又如何?

 

 
體驗評級
用戶對於每個階段的體驗如何評級?

 

 
優點
用戶是否喜歡這個流程?哪些部分設計優良?

 

 
缺點
用戶不喜歡這個環節的哪些部分?問題是如何發生的?

 

 
改進
根據上述所提供的信息,我們應該如何提升用戶體驗?