這篇是承接之前所寫的文章,如果沒看過建議可以稍微瀏覽一下,會比較知道全貌。
UX 1: UX Design Process & User Research
UX 2: Competitive Analysis & Persona
UX 3: Define Problem & Ideating
UX 4: Feature Prioritization

Sketching & Testing

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

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

在UX Design內,你可以用這些形狀畫出任何你想要的設計,下面也是我隨意畫的啦。
13509556_1259326430752841_694687446_o
當你要開始畫Sketch的時候,記得要把user flow時時刻刻拿出來對照,因為它能夠幫助你專注在每一個使用者需要下決定和完成的步驟。這邊提一下Screen Flow,和user flow非常類似,主要是每個步驟都透過一個最低保真度的原型(Wireframe)來展示。

mobile-app-3-background-settings

來源: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,專門用來畫產品原型的,它有很多不同的墊板和筆記本可以畫,我覺得蠻好用的。
13493415_1259352164083601_1214802373_o
13509399_1259352160750268_1080385253_o

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
13624766_1269830396369111_2129650222_n

想知道更清楚過程,可以看這個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或prototypes,而是透過spreadsheet或diagram,可以看下面的範例圖。

螢幕快照 2016-06-26 下午9.09.41

來源:Jesse Hampton

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

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

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

1. User flow,見UX 3: Define Problem & Ideating裡面之前有寫過
2. Taxonomy,是人們展示如何分級、展示資訊的,下面這個是知名的Bloom的taxonomy,在教育界很有名,人類運用知識從記憶到創造的一個分級。

bloomtaxonomy-e1445435495371
來源:Google Search

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

此外,Sitemap和user flow是不同的東西,是表達頁面之間不同分級的關係,而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,簡陋版本
螢幕快照 2016-07-10 下午11.34.29

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

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

如果想要了解更多,可以看以下的文章:
BoxesandArrows
IA Institute
General Assembly

廣告