5個UX工作法 幫你的設計一開始就走對路

0

作者:Benjamin Berger
譯者:Yuming Cheung

yuming_20161104_1

當著手設計時,不管正在處理整個專案或某個功能,我習慣把電腦關掉,盡可能延後打開設計軟體的時間。這是為了確保我已經有該作品的整體樣貌。在主要概念還沒決定前,不會分心去想細節,迷失在視覺效果。

回首我還很菜的時候,會立刻打開 Photoshop,花時間研究顏色漸層效果那些東西,通常導致畫面很漂亮,卻帶著嚴重錯誤。這問題在於:如果你跟設計師之外的人合作,他們會很滿意漂亮的畫面,動不動就「哇!」出來,但對我們設計師來說,應該要做些業內人士認為「理所當然」的好作品,而不單單只是漂亮而已。

我的設計師生涯持續成長,流程中多了幾個方法,而以下是我最喜歡的:

1. 自問5個為什麼(The 5 Whys)

yuming_20161104_2

在 Atlasssian 工作,設計準則其中之一就是:必須知道我們進行設計的根本原因。

在今日,打造一個有價值的產品就相當於為人類解決一個問題。如果一個專案有太多細節要解決,那在某方面來說,很容易錯過整體樣貌。

請記得要問「為什麼」,這是要保證我們不會背離我們正在「做什麼」、「為誰而做」。連續問五次為什麼就有機會找到埋藏其中的答案。這是為了找到最初造成問題的原因,為了解決它,應該要專注在哪些方面。

儘管這個技巧還有些爭論,像是兩個人(或更多)著手解決相同的問題時,卻常常找到完全不同原因。

不過,我個人不會覺得這是缺點,反而是發現不同肇因的機會,是從來沒想到過的。事實上,這可以把原有的問題以全新、創新的角度來處理。

範例
問題:使用者總是關掉提醒功能

  • 為什麼? — 他按下「不允許」
  • 為什麼? — 他不想要收到提醒
  • 為什麼? — 他沒發覺其中的價值
  • 為什麼? — 他不曾有好印象
  • 為什麼? — 這是他第一次打開這個 app

我得說,這是個簡單的範例,但是以這個方法類推,就會想到許多解決方式:

  • 使用者第二次打開 app 時請求允許。
  • 與使用者互動時解釋打開提醒有什麼好處。
  • 在登陸頁面就闡述你的價值。

小提示
這個技巧也可以用來解決你的日常生活問題。

2. 思考時間軸:之前、當下、之後(The Time Line: Before During After)

yuming_20161104_3

我開始研究 UX 設計時,最先領悟的是:

一種超脫螢幕的經驗。不只是用你的產品做了什麼,還有使用前與使用後發生了什麼事情。

因此,我總是把這個時間軸的概念用在專案上,為的是設計一套從開始到結束的完整體驗。以「之前」與「之後」思考,是要確認 UX 是完整的。

我總是問我自己這些問題:

之前:

  • 使用者如何知道我的 app?
  • Appstore?網站?廣告?某處的 QR Code?
  • 他已經有帳號了嗎?他需要帳號才可以在 app 裡行動嗎?
  • 他在什麼情況下會打開我的 app?在舒服的沙發上隨意瀏覽,還是搭乘擁擠的地鐵時?
  • 所以他的壓力程度是?
  • 在使用 app 時是很悠閒的嗎?
  • 他的網路快嗎?

之後:

  • 如何得知使用者剛剛獲得的體驗?
  • 他需要任何從某處容易取得的某種資訊嗎?
  • 如何再次確認他期待產品有某種功能?
  • 如果我的產品是跨平台的,要如何進行資料轉移?
  • 如何找出一個月之前發生的事情?

*這些項目都在確保,沒忘記任何一個逗使用者開心的機會。

*特別聲明:逗使用者開心並非讓介面上每個物體都加入動畫、有滑順效果的彈出視窗或偷放個彩蛋就好。良好的追蹤 email、離線模式、預填好的表單和錯誤訊息等小細節會讓你的工作簡單一些。

小提示
讓你的經驗視覺化有更好的效果,可以動筆在時間軸或藍圖上畫出,或是做接下來這個方法!

3. 畫出漫畫分鏡(The Comic Strip)

yuming_20161104_4

我們身為設計師,是靠著圖像傳達想法,所以把整個體驗用草圖的方式描繪,將使用者會遇到的步驟視覺化,對我來說很有用。對於這個方式,曾經有個設計師建議我把 A4 白紙分成六塊,然後就像漫畫一樣畫出每一個動作。對我來說,這是剖析使用者生活的方式,將使用流程視覺化,就可以理解他的習慣。接著,從漫畫分鏡發覺使用過程中的痛點(pain points),就可以了解科技如何簡化生活的最佳方法。

同時,如果有可能的話,我不會以我的想像來畫草圖,而是使用者訪談的結果。

一旦了解產品如何運作,我會再一次以草稿描繪出體驗,這是為了保證我的服務能夠涵蓋每一個面向。當我認為已經達到好的體驗,而且產品允許的話,我試著將漫畫分鏡實做,這在檢查互動是否有根據某些特定情境時很好用。

額外觀點:不用完整建立一個產品,只需要用最低的成本做出產品原型(prototype)就很夠用了。

這個做法幫助我了解某些簡單的互動,事實上一點都不簡單:

  • 冬天的時候,戴著手套在大街上。
  • 在賣場,其中一隻手拿著購物袋時。
  • 在陽光強烈的地方,暗色系 UI 一點都不好。

小提示
用麥克筆將白紙分成六塊,拿去影印方便日後使用。

4. 模擬對話(The Conversation)

yuming_20161104_5

對話 UI 是當今大家都在討論的火熱話題。儘管我認為這樣的 UI 概念不適合每一種產品,但是確實很有趣。

沒錯,設計師的目標就是將科技轉換成自然的感覺,所以直覺互動的方式,像是用閒聊對話啟動某個動作也很有合理。畢竟簡訊是我們手機最古老的功能之一。

當我正在設計一套複雜的介面時,我開始想像機器是某個雇用來專門做某件事情的員工,是一個可以跟我對話的人。思考我打算問他的問題,用來收集一些資訊,例如:為了完成某件事情下的命令、想要收到什麼樣的回應等等,我寫下整個對話內容,遵循某種規則,好讓一切看起來更合理。

這幫助我整出最佳流程,了解在一個頁面上要擺放多少資訊,哪些資訊屬於同一個群組,它們在同一個群組的原因。可以執行哪些動作,還有如何設定主要的,還有機器得準備哪些資訊,用以滿足我的需求。

小提示
我不建議在安靜、開放的空間大聲模擬這個方法。

5. 條列清單(The List)

yuming_20161104_6

每當我收到新的摘要時,腦中總是擠滿了一大堆事情:靈感、視覺效果、互動、良好的 UX 原則、文案,以及市場上的相似產品等等。所以我很清楚這階段不應該專注在細節,但是又不想在設計流程中遺漏某些事情。為了確保不會把這些想法忘了,我先把所有事情都寫在便利貼上。

我把腦中閃過跟這個專案直接相關的事情寫下,不過其他有牽連的事情也會。

例如著手進行手機 app 專案時,我會寫下智慧型手機的所有功能:

  • 地理位置
  • 推播訊息
  • 水平儀
  • 相機
  • 指紋辨識

還有 UI 概念:

  • Tinder 卡片介面
  • 聊天介面
  • Snapchat
  • Yo

或是使用情境:

  • 在家裡
  • 慢跑的時候
  • 在健身房
  • 車子裡
  • 公車上
  • 其他情境

然後把這些關鍵字進行分類。

  • 這個清單給我兩個好處:把我腦中想的事情都抽出來,之後也可以知道哪裡再找出來。(專案啟動的時候通常是兵荒馬亂的,腦中塞滿一大堆想法會讓你失常。)
  • 確保沒有遺漏重點,或是之後可以用上的好點子。

小故事時間
去年我遇到新創公司 Birdly,他們的團隊正在打造手機 app,它可以讓你免於工作用收據的困擾。當時他們正進行產品 UX 的階段,還有維護兩個 app(Android + iOS),經營創業,團隊只有三個人,其中只有一個開發者,不用說他們可能已經想到許多痛點。接著,這個團隊在技術上做了很有趣的關鍵轉折(pivot),與其繼續開發手機 app,他們決定只做 Slack 機器人(bot)。這個決定帶來很多好處,例如:利用新平台的強項;更容易整合進使用者的日常生活;跟之前要維護兩個 app 相比,有機會減少技術上的負擔,還可以達到差不多甚至更好的效益⋯等。

當面傾聽他們說跟專案直接、間接有關的事情,是讓你發現新契機和保持創新的好方法。

小提示
我個人喜歡用便利貼,而你也可以用心智圖(mind-mapping)軟體達成。在你的下個專案,記得經常讓清單加一些新東西吧!

本文授權來源:Intersection設計翻譯〈5 個能穩定進行好設計的 UX 方法〉
原文出處:5 UX plays to start your design on good tracks

Share.

About Author

vide 編輯群

Leave A Reply