UXr5_banner

UX 5: Sketching & Testing & Information Architecture

這篇文章承接之前所寫的文章,建議可以由第一篇開始閱讀,較能了解 UX 的全貌。

Sketching & Testing

Sketch 是在整個 UX 流程的第三階段 – Placement & Layout Design,去面試 UX Designer 時,很常都會被要求立刻畫出一個 Sketch,可以用下面的小範例練習一下,最後你就能完整個畫出 Visual Alphabet。

  1. 準備紙跟筆,按照我下面打的幾個項目去練習這些圖,用簡單的線條表現即可
  2. 點 (Points)、線 (Lines)、角度 (Angles)、圓弧 (Arcs)、螺旋 (Spirals) 、圈 (Loops)、橢圓 (Ovals)、眼睛 (Eyes)、三角形 (Triangles)、矩形 (Rectangles)、房屋 (Houses)、雲 (Clouds)

在 UX Design 內,你可以用這些形狀畫出任何你想要的設計,下面也是我隨意畫的啦。

Sketch

 

當你要開始畫 Sketch 的時候,記得要把 user flow 時時刻刻拿出來對照,因為它能夠幫助你專注在每一個使用者需要下決定和完成的步驟。這邊提一下 Screen Flow,和 user flow 非常類似,主要是每個步驟都透過一個最低保真度的原型 (Wireframe) 來展示。

Screen Flow

來源:UI Wireframes

 

接下來,你可以透過以下的步驟來嘗試畫畫看你的 screen flow:

  1. 準備紙筆
  2. 打開之前畫的 user flow 作為畫 sketch 的引導
  3. 每一個 user flow 都畫一個 sketch
  4. 在每個 screen下面加一小段的文字去解釋它

 

這邊有幾個在畫 sketch 時的小技巧:

  1. 給自己設定一個 10分鐘 限制,並在有效的時間盡可能的多畫 sketch
  2. 不管是行動版或是網頁版本,都要幫你的產品畫 sketch
  3. 越簡單清楚越好

 

每一個紙上的 sketch 都可以拿來做測試,而且測試越早做會越好,即 Paper Prototypes,就是你手畫的設計介面。下面這個也是我畫的範例,我用的產品是 SketchyNotebook,專門用來畫產品原型的,它有很多不同的墊板和筆記本可以畫,我覺得蠻好用的。

 

圖三

圖四

 

Paper prototypes 有幾個好處:

  1. 能夠快速的 integrate,丟棄一個你不要的 sketch 只會花你兩分鐘,而不是兩小時去改寫 code
  2. 省成本,只需紙、筆,如果以真的想要搞得很複雜,可以去買一些貼紙之類的輔助工具
  3. 能夠及早測試,還記得 UX Design Process 的流程嗎?我們現在是停留在 placement & Layout

Discovery & Research > Synthesizing Research & Design Strategy > Placement & Layout Design > Execution> Usability Test

 

畫完 paper prototypes 後,可以開始準備測試了,大致上也會跟著以下的步驟走:

  1. 招募測試的使用者
  2. 找一個安靜的地方來自己測試
  3. 重新的排列原型,並確保畫面的流暢度像真的可以使用的產品
  4. 測試過程中記得錄音或錄影
  5. 把第一個 screen flow 放在測試者的面前
  6. 請他完成這個 task

下面這是我自己畫的 paper prototype:

圖五

 

想知道更清楚過程,可以看這個 Example of Usability Test With Paper Prototypes 來更清楚知道怎麼做 paper prototypes 的 test,蠻推薦看這個影片(小女孩超可愛的),用文字說明可能沒辦法那麼清楚。

測試結束後,盡量快點重聽、做筆記和寫下 insights,insights 要包含:

  • 觀察 (Observations): 你看到聽到什麼?有什麼讓你很驚訝的?
  • 洞見 (Insights):從觀察中主要學習到什麼?
  • 建議的設計 (Design Recommendations):這些洞見要如何放到設計內?
  • 往下繼續 (Moving Forward):有什麼議題或主題是需要進一步探討的?

 

做完 test 後,應該會知道有哪些地方需要做改善,選擇能夠代表用戶痛點的 screens,並重新畫能夠針對這個痛點的 screens。如果想要讓 sketch 能夠有互動性,可以去用 Marvel app,是免費的,能夠快速利用草圖做出原型。

 

Information Architecture 

進到這個進度後,了解要如何引導使用者使用或如何呈現資訊、內容與功能,就是 Information Architecture (IA),讓使用者知道如何做可以達到他想要的目標。

而 IA 的主要呈現方式不是 wireframe 或 prototype,而是透過 spreadsheet 或 diagram,可以看下面的範例圖:

圖七

來源:Jesse Hampton

 

如果想要更好地理解 IA,可以透過更仔細的去觀察實體世界,舉機場為例子:地圖和標誌非常的重要,因為能夠幫助旅客快速的找到搭機地點或是領行李,但如果這兩者很不清楚,則會讓整個機場秩序大亂、旅客找不到地點、延遲上飛機、延遲飛行等。

Frog Design 的這個機場標誌例子,我就覺得非常的清楚,見 Wayfinding and Signing Guidelines for Airport Terminals,在過去,人們總會以為跟方向有關的設計,最好就是把所有的路徑都呈現出來;不過越是複雜的方向、路徑問題,最好用越簡單的方式呈現會更好。我舉這個例子可能看似和 UX 沒什麼關係,但是它所呈現資訊的方式,卻和 UX 的精神是不謀而合的,越好的設計,是越能夠讓人出於直覺來使用。

Guidelines for Airport

那在做 IA 的時候,有以下幾個工具會用到:

1. User flow,見 UX 3: Define Problem & Ideating 裡面之前有寫過

2. Taxonomy,是人們展示如何分級、展示資訊的,下面這個是知名 Bloom 的 taxonomy,在教育界很有名,人類運用知識從記憶到創造的一個分級。

bloom taxonomy

來源:Google Search

3. Sitemap,如何去組織和架構你的網站內容或是應用內容,也是利用 diagram 的方式,開頭總是最重要的首頁,例如,把臉書 app 打開,會發現先進入首頁,接著最下面那欄有 news feed, friends, messenger, notification, more,這些是在 homepage 底下的 subcategory。

此外,Sitemap 和 user flow 是不同的東西,Sitemap 是表達頁面之間不同分級的關係,而 user flow 是展示用戶如何在網站上完成其目標所需要的步驟、過程。再舉個例子,大家都有去逛百貨公司的經驗,通常都會有一個大型的平面圖展示哪區是賣什麼的,那種大的平面圖就是 sitemap。

sitemap

來源:Google Search

 

為什麼要做 sitemap 呢?

  1. 顯示應該要如何建構網站或 app
  2. 理解應該要創造什麼樣子的內容和這些內容應該要被放在哪裡
  3. 釐清不同頁面之間的關係
  4. 提供清楚的架構,讓你知道從哪裡開始和發展
  5. 實際得列出你之後會如何發展產品

 

知道 sitemap 如何作用和如何閱讀後,那該如何畫出 sitemap 咧?有兩個方式:

Reverse engineer an existing product

如同字面上的意思,根據現有的 sitemap 去做改善,可以參照以下的步驟來練習:

  1. 設定 5分鐘 時間
  2. 用手機去找一個網站
  3. 截圖後,自己嘗試的去畫出目前的 sitemap
  4. 重新思考,哪裏需要被改善

例如,這是我下載 BBC 的 app,自己嘗試畫出的 sitemap,簡陋版本

BBC-app-sitemap

 

Create one from scratch

至於這個方法會需要用到一種方式叫做 card sorting 的方法,這我下一篇會寫 Card Sorting & Navigation,會更清楚的細寫如何用 card sorting 做出 sitemap。

希望目前的東西對大家都有幫助哦!有任何想交流的都可以去我的臉書來交流 Ian Weng 或是 Linkedin

如果想要了解更多,可以看以下的文章:

 

本文章已獲得作者 Ian Weng 授權,原文:UX 5: Sketching & Testing & Information Architecture,出處: IANWENG9

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: