用草圖達成高效溝通+高效驗證

更新於 發佈於 閱讀時間約 7 分鐘

草圖是溝通的媒介,將腦中的想法具象化

大家對「草圖」的印象是什麼呢?白紙上俐落地畫圖,旁邊加上文字註解?還是畫得比較潦草,所以叫草圖?草圖在工業設計的流程中,通常是指發想產品時用來「溝通」的工具,透過草圖將想法呈現給他人看。

尤其在團隊合作中,總是有些想法是語言、文字上容易造成誤解的,但是表達自己的想法,難道只能用畫圖的方式嗎?今天就我們一起來透過這本經典《用戶體驗草圖設計》,拓展對草圖的想像吧!

Image by pressfoto on Freepik

Image by pressfoto on Freepik

這本書名中有「草圖設計」,然而它卻不是教我們如何把草圖畫得好看,而是告訴我們草圖為何重要、它能以什麼形式呈現,還有能如何被應用。在這本書裡,草圖不只是紙上畫畫,它可以運用各種媒材和活動來展現概念,目的是快速獲得證據,證明設計概念的可行性,推進設計的演進,擁有「草」的精神,我們先快速展現設計概念,驗證它的可行性,才能避免後續花費太多成本在旁技末節上。

這種精神將草圖的應用拓展到更大的層次,既可作為設計師與自己、與團隊的溝通媒介,幫助我們傾聽使用者的想法,這也是為什麼我們要做用戶體驗測試。這一部分也是我跟山蘇最想分享的!大家可以先想想看,你認為在專案流程中,什麼時候該做用戶體驗測試呢?

在專案流程中,什麼時候該做用戶體驗測試呢?

關於這個問題,相信大家多少聽過這個答案:「如果是開發軟體服務的話,就在做完Prototype、要進開發前先做一場『易用性測試』。」不可否認,進開發前是最後一個好時機,耗費的成本最低,但若僅此一場測試,發現問題時通常已經來不及了,而且當你發現是產品的策略出錯了(請看設計的五大層次這篇文章),打掉重練後需要的人力和時間都很大。可是一次進行太多場測試,聽起來又會耗費很多人力與時間,到底該怎麼辦呢?

別擔心,若將「草」的精神應用在用戶體驗測試上,以較低成本且有效率的方式去進行測試,就算產品尚未完善,也能透過草圖得到用戶的想法,因此,任何時候都可以是做用戶體驗測試的好時機喔!在下文中。我們列舉出幾種常見的模擬方法,可以根據每個階段想向用戶詢問的問題,來選擇使用哪種方式呈現,那我們就來看看有哪些常見的草圖吧!


常見的用戶體驗測試方法

低保真度原型 Low-fidelity Prototype

如果不確定這個產品概念是否有問題,在你製作更精美的原型前,可以先製作低保真度原型。它顧名思義就是看起來不夠真實,通常是鉛筆線稿或是現有素材拼裝而成的模型,但是正因為省下了精雕細琢的時間,我們可以在同樣的時間內提出更多的想法,拋棄提案時也不會感到太可惜XD

不過若要以低保真度原型向用戶做測試的話,也有可能會出現用戶不易理解的情況,但絕非沒救!可以輔以測試員仔細在旁解說引導,我們一樣可以用低成本的方式進行測試!

Commercial License:Further Information

Commercial License:Further Information

高保真度原型 High-fidelity Prototype

如果時間足以製作更精美的原型,可以進一步嘗試將產品概念表達的更具體。高保真度原型實作在Figma或Adobe XD等數位軟體上,成品看起來已經跟正式產品沒什麼兩樣了!畫面精緻、可以點擊,甚至可以展示在真實手機上,只差沒有給工程師開發而已。到了這個階段做用戶測試,用戶時常會難辨真假,使用此原型可以讓我們更專注的觀察用戶使用的行為與痛點。

Commercial License:Further Information

Commercial License:Further Information

故事板 Storyboard

以上兩種方法較常用於測試產品介面設計上,然而當今我們重視的體驗層面越來越廣,從使用者接觸到該產品前的情境、到購買時對服務的體驗,再到使用產品時與周遭情境的關係、使用完後的體驗等等,都可能是跨場景、跨裝置,跨任務,並且可能與不同人互動。這可以去考量與設計的。而故事板就是針對情境模擬的一種草圖設計手法,我們可以透過手繪、剪貼或線上工具來製作,就像畫漫畫一樣,可以用人、事、時、地、物這幾個面向去考慮情境的細節,也可以將做好的故事板與用戶或夥伴們分享,請他試想自己就是這個情境中的主角,藉此來獲取更多想法!

Image by Wepik on Freepik

Image by Wepik on Freepik

綠野仙蹤 Wizard of Oz

在童話《綠野仙蹤》裡,有位令大家問風喪膽的巫師,透過製造神秘氣氛和恐怖的外表,讓人們相信他擁有強大的魔法力量,殊不知他只是一位躲在屏風後面的普通阿北!

這個阿北跟設計有什麼關係?當然有!

綠野仙蹤的阿北就是用這個「以假亂真」的精神,讓我們可以在功能尚未完整開發時就能做測試。我們遊石曾經想讓使用者在線上掛號後,能收到確認簡訊,但是當時系統還沒串接簡訊功能。於是我們偷偷安排了同事躲在暗處,仔細觀察使用者的手指按下送出鍵的時機…火速人工發送簡訊給他們,到最後真到完全沒有人發現這是人為操作呢!

這個手法讓我們省下許多錢,即使面臨系統尚未整合、系統複雜、開發時程長的問題,還是可以了解使用者的想法。尤其到了現代,使用者體驗設計不再只限於視覺介面,更拓展至跨平台整合、五感體驗、無障礙設計、服務設計等等方面,若你的產品服務是跨場景、跨裝置,綠野仙蹤的手法就更為常用及重要了。大家不妨可以想想看,你所體驗的一切事物,手邊有哪些現有資源可以模擬呢?說不定會有新奇的發現喔!

試營運 Trial operation

試營運就像是服務流程的高保真度模型,運用成本較低的方式去模擬場景,讓使用者身歷其境。比如說,想測試新店面的服務流程與動線設計,我們可以用保麗龍切割出假櫃檯,再請其他分店的人員充當新店面的服務人員,最後邀請真實的顧客來體驗看看,觀察、訪問他們的心得來改善服務,藉此調整營運的策略。

要選擇哪一種用戶體驗測試方法?

除了以上分享的幾種類型,草圖的形式還有非常多種,有興趣大家可以找原書來看喔!不過,既然有這麼多種方式,要怎麼知道什麼時候該用哪一個呢?

在考慮要用哪些方法來做測試時,可以考慮以下三個面向:

  1. 專案類型:如果是要測試視覺介面是否好操作,適合採用高/低保真度模型,將介面呈現出來給使用者看;如果是要測試服務流程,則可用試營運、綠野仙蹤法來模擬跨場景、跨裝置、多個角色互動的服務場景;而若只有先構想一些產品使用情境,則可以用故事板來呈現。相信聰明的大家能夠以此類推!
  2. 使用者類型:根據受訪者的類型去做調整。像是要讓視力、聽力沒那麼好的銀髮族參與測試,研究員就需要更仔細的在旁解說;若是有障礙人士來測試,則可以透過五感的體驗來傳達訊息、幫助他們達到目標。此外,我們也可以先透過角色扮演試圖去同理不同族群所經歷的困難,透過模擬,體驗他們經歷困難的環境,以做出更友善使用者的產品。
  3. 預算多寡:這個嘛……有錢有閒就Hi-fi(高保真度模型),沒錢沒閒就Low-Fi(低保真度模型)囉XDD
raw-image



看到這裡,不知道大家是不是和我一樣,對草圖的威力更加讚嘆了呢?它不只是一種溝通的媒介,能夠將腦中的想法具象化,以更有效的方式傳達給團隊成員和用戶。它更是一種精神,以快速獲取實證為目標,讓我們在設計的過程中,及早貼近用戶與市場。

以上提到的各種草圖形式,可以根據專案類型、使用者類型和預算多寡來選擇使用。保持靈活的思維,不斷學習新工具,相信各位都可以找到合適的草圖形式,提高設計的效率和品質喔!邀請你收聽本集podcast,聽聽設計界的前輩怎麼說。


avatar-img
2會員
6內容數
此專欄會以《UXI BAR》Podcast內容為主軸,詳細介紹在節目上分享的設計策略、設計管理心法,並且討論相關書籍與案例。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
UXI Design的沙龍 的其他內容
你喜歡玩遊戲嗎?是不是會無可自拔地被吸進另一個世界中,讓你忍不住玩下去、忍不住就沈迷、忍不住就找人分享呢?遊戲究竟有什麼魔力,讓你有這樣的感受呢? 這些看似抽象難解的問題,在任天堂企劃負責人_玉樹真一郎剖析下,以經典遊戲深入淺出地帶讀者了解這些動人的遊戲體驗是如何設計的。讓我們來看看玉樹真一郎的《
企業持續投入在新科技的研發上,最後卻難逃沒落的命運,像這樣的故事屢見不鮮。在科技快速更迭的時代下,「創新」一直被企業經理人、新創公司討論著,有很多不同的說法和理論,試圖解釋創新的各個面向。
在UIUX領域的學習過程中,雖然了解每個設計階段在做些什麼,卻很難將他們整合在一起,直到遇見了這本書 - - 使用者經驗的要素。 這本書並不是為了讓你學會實作每個設計階段,也不會針對各階段做詳細的教學,而是以一個綜觀全局的角度整合設計,讓我們能抽離各個細項,進而檢視專案流程,我們現在該做什麼?下一步
「追求創新之前,如何衡量創新目標和幅度呢?」這是實務中每個開案者的靈魂拷問;衡量著「設計期待」與「口袋」,一方面希望創新能夠有所突破,卻又暗自擔憂創新轉換成本是否過大,組織承擔不起。
你喜歡玩遊戲嗎?是不是會無可自拔地被吸進另一個世界中,讓你忍不住玩下去、忍不住就沈迷、忍不住就找人分享呢?遊戲究竟有什麼魔力,讓你有這樣的感受呢? 這些看似抽象難解的問題,在任天堂企劃負責人_玉樹真一郎剖析下,以經典遊戲深入淺出地帶讀者了解這些動人的遊戲體驗是如何設計的。讓我們來看看玉樹真一郎的《
企業持續投入在新科技的研發上,最後卻難逃沒落的命運,像這樣的故事屢見不鮮。在科技快速更迭的時代下,「創新」一直被企業經理人、新創公司討論著,有很多不同的說法和理論,試圖解釋創新的各個面向。
在UIUX領域的學習過程中,雖然了解每個設計階段在做些什麼,卻很難將他們整合在一起,直到遇見了這本書 - - 使用者經驗的要素。 這本書並不是為了讓你學會實作每個設計階段,也不會針對各階段做詳細的教學,而是以一個綜觀全局的角度整合設計,讓我們能抽離各個細項,進而檢視專案流程,我們現在該做什麼?下一步
「追求創新之前,如何衡量創新目標和幅度呢?」這是實務中每個開案者的靈魂拷問;衡量著「設計期待」與「口袋」,一方面希望創新能夠有所突破,卻又暗自擔憂創新轉換成本是否過大,組織承擔不起。
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
各位伙伴早安,上回分享如何圖解具體資訊 今天來談談抽象的概念、理論等訊息要如何圖解吧~ 這也是我覺得是視覺筆記最有價值且可以發揮的地方   相比具體資訊,抽象資訊不但沒有標準答案(就算有,也不代表每個人的理解相同),因此具像化的難度與意義就更高了,而用畫圖表達抽象概念有三個主要目的,依據目的
Thumbnail
如果你能即使沒有繪畫基礎,仍然會鼓勵你養成手繪的習慣。設計師大多具備草稿繪製的能力,這項能力的功用並不是要我們變得很會畫畫,而是培養「觀察」與「表現」的能力,藉由這樣的練習,不斷累積視覺經驗及提升捕捉細節的敏銳度。
Thumbnail
今天想和大家分享的,是如何用畫畫來表達概念 這裡的概念我把它擴大為「資訊」好了, 在我們平常所接觸到的資訊,我常常把它分為兩大類 『具體』和『抽象』 具體的部分,簡單來說就是你看得見,無論是親眼所見、上網找得到圖片都算 通常也具有所謂的『標準答案』,比如說你要表達一顆蘋果,至少形狀不會畫出
Thumbnail
引言: 相信各位有興趣於設計的朋友,也會經常苦惱於毫無靈感的時候。但只要運用以下幾種方法,相信會令大家茅塞頓開,靈感湧現。 1. 研究和理解目標受眾: 研究和理解目標受眾是設計師成功的關鍵之一。透過深入了解目標受眾的偏好、需求、價值觀和使用習慣,設計師能夠創建出更具吸引力和有效的設計方案。
Thumbnail
開啟零件環境並選擇任一平面進入草圖模式 (詳Lesson 1),下圖以連續線作說明
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
雖說很多事看起來「真的是基礎」,但總是會被忽略!這些事不是擺爛覺得不用講、不需要要求、反正做得出來就不用學新的東西⋯⋯為什麼多數人寧可用錯的方法、花很多時間在那些明明有更好的方法「做得出來就好了」的工作模式裡?而不想要花多一點時間學習和溝通好工作的流程?
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
六、圖像式思考、圖像式演說很好用 跟提筆寫作一樣,演說前要立大綱,只是,這大綱是用文字敘述還是以圖像呈現? 對於我們一般人而言,一幅圖像能記得的內容,絕對比一篇文字多。把要講述的大綱用一幅幅圖像記在腦海裡,還可以在心理圖像中配上關鍵詞,就能讓人侃侃而談。依照心理圖像的放大縮小、自動生成遠、中、近
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
不論是平面設計、介面設計,都能見排版這一詞。而排版的作用,即在明確的設計目標中,將所有元素做有組織的安排,精確地傳達訊息。
Thumbnail
各位伙伴早安,上回分享如何圖解具體資訊 今天來談談抽象的概念、理論等訊息要如何圖解吧~ 這也是我覺得是視覺筆記最有價值且可以發揮的地方   相比具體資訊,抽象資訊不但沒有標準答案(就算有,也不代表每個人的理解相同),因此具像化的難度與意義就更高了,而用畫圖表達抽象概念有三個主要目的,依據目的
Thumbnail
如果你能即使沒有繪畫基礎,仍然會鼓勵你養成手繪的習慣。設計師大多具備草稿繪製的能力,這項能力的功用並不是要我們變得很會畫畫,而是培養「觀察」與「表現」的能力,藉由這樣的練習,不斷累積視覺經驗及提升捕捉細節的敏銳度。
Thumbnail
今天想和大家分享的,是如何用畫畫來表達概念 這裡的概念我把它擴大為「資訊」好了, 在我們平常所接觸到的資訊,我常常把它分為兩大類 『具體』和『抽象』 具體的部分,簡單來說就是你看得見,無論是親眼所見、上網找得到圖片都算 通常也具有所謂的『標準答案』,比如說你要表達一顆蘋果,至少形狀不會畫出
Thumbnail
引言: 相信各位有興趣於設計的朋友,也會經常苦惱於毫無靈感的時候。但只要運用以下幾種方法,相信會令大家茅塞頓開,靈感湧現。 1. 研究和理解目標受眾: 研究和理解目標受眾是設計師成功的關鍵之一。透過深入了解目標受眾的偏好、需求、價值觀和使用習慣,設計師能夠創建出更具吸引力和有效的設計方案。
Thumbnail
開啟零件環境並選擇任一平面進入草圖模式 (詳Lesson 1),下圖以連續線作說明
Thumbnail
觀察者模式透過主題訂閱/訊息通知的機制,極度增強系統的可擴展性、靈活性以及降低組件間的耦合度。概念直觀簡單,是非常實用的設計模式。
Thumbnail
雖說很多事看起來「真的是基礎」,但總是會被忽略!這些事不是擺爛覺得不用講、不需要要求、反正做得出來就不用學新的東西⋯⋯為什麼多數人寧可用錯的方法、花很多時間在那些明明有更好的方法「做得出來就好了」的工作模式裡?而不想要花多一點時間學習和溝通好工作的流程?
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
六、圖像式思考、圖像式演說很好用 跟提筆寫作一樣,演說前要立大綱,只是,這大綱是用文字敘述還是以圖像呈現? 對於我們一般人而言,一幅圖像能記得的內容,絕對比一篇文字多。把要講述的大綱用一幅幅圖像記在腦海裡,還可以在心理圖像中配上關鍵詞,就能讓人侃侃而談。依照心理圖像的放大縮小、自動生成遠、中、近