Mobile App 七大 UX 設計經驗

圖片來源： uxpassion

投稿作者：Leon Lu（[email protected]）。新鮮活運動！喜歡研究軟體架構的美，雖然每次架構設計還是常有不足；喜歡專案管理方法論的妙，雖然每回專案時程還是常 Delay；喜歡與三五好友大談移動科技的樂，天馬行空是我們的樂趣！

產品使用的第一印象是至關重要的，因為使用者在意的是產品使用過程中是否和當初的 First Impression 一樣的令人樂不釋手。這觀念小編很是認同，因為 2012 年時我大部份時間都在進行 Mobile 相關的專案開發，當時偶然下拜讀了 Ivo Weevers 在他的 Blog 分享 Mobile UX 的設計觀點（註一），雖然已是一年多前的看法，但相較於現今的 Mobile 設計及市場發展其實大同小異。

Ivo 強調的是設計上的原則，而原則是基於團隊在開發 Mobile Product 的經驗累積，嚴格來說這些並不是 Design Guideline，但小編認為這些觀點很值得提供予 Mobile「產品開發」者自我省思，重新思考產品 UX 思維。

七大 UX 經驗法則

自過去四年來，Mobility 上發生了很大的變化（e.g. UI、Screen、Processors 和輸入模式等）。但是 Mobile 產品設計的 任務究竟是？相信就產品設計而言，建立產品與 End User 間的關聯性，從而推至對產品或品牌的支持，是大家一致認同的目標。然而最困難的就是如何滿足使用者的全部期待 ，因此確定產品特色中的 Key Driver 就顯得特別重要（E.g. Performance有助於品牌的差異化）。

讓我們來看看有著高度經驗的 Ivo 團隊，所歸納出來的這七項 UI 設計經驗，能否帶給我們一些不同的行動設計體驗。

經驗一：定義 UI 的品牌特徵（Define UI Brand Signatures）

一個 App 的 UI 應該優先反映出「品牌」，再進一步提高「忠誠度」和「滿意度」。首要工作就是確定 UI Layout 中哪些元素是最有助於品牌形象（例如：功能、視覺效果、字體或動畫）。再將這些「元素」統一收納到 UI 模組之中，將有助於後續相關 App 產品的 Reuse，延續品牌形象（例如：概念上類似軟體工程中的建構管理，進行 Configuration Item 的定義）。

但要如何定義 UI 的構成元素呢？要如何去發展產品的 UI 特徵呢？例如 Microsoft 的 Metro UI 字體、佈局和互動方式，就是一種明確的 UI 特徵。

圖片來源： Wikipedia

尋找您的 UI 特徵，有三種建議作法：

1. 發現 -- app 的獨特性：也就是著重在 app 產品的主要訢求，加強產品的獨特性，例如「Path」這個 app 兼具 Instagram 的拍照特色以及 Facebook 的訊息功能，呈現出 UI 獨特性之「照片牆/訊息牆」。 　　　　　　　　　　　　　　　　　　　　　　 圖片來源：Path
2. 呈現 -- app 的主要功能：假如您的產品是購物 app，則如何快速簡單的進行線上訂購付款，這個功能的重要性應該優於其他。
3. 設置 -- app 的 UI 語言：UI 就像是文字語言一般，會建立起使用者的品牌意識，例如：Win8 的動態磚樣式，看過後很容易記住那個形態就是 Win8 的長相，故核心的代表元素是最直覺的，因為他們將不斷的被使用者在操作過程中體驗到。

經驗二：聚焦於產品組合（Focus the Portfolio of Products）

簡單說就是在有限的開發資源及時間下，針對「優先矩陣」中最重要的部份先進行設計和優化，確定有效聚焦於這些功能上，才可以幫助我們獲得最佳回報。

圖片來源： Ivo Weevers

「優先矩陣」的設定範例如上圖，主要在表達應該優先投入的設計工作。例如您預期客戶使用 An​​droid 手機為主，而競爭對手也以他們為目標時，優先投入這個 Android 客群，以具 UI 特徵及效能的 Andr​​oid app 進入市場，將優於把開發資源平均分配在每個行動平台上更有價值。

經驗三：確定主要使用情境（Identify the Core User Stories）

每個開發團隊都面臨著同時進行多個專案的超人任務，要功能突出又要在時限內完成，這種場景應該是開發人員連做夢都會發生。但企業往往會忽視一個事實，即客戶其實只是在找尋方法，一種能幫助他們解決特殊需要的解決方案。

例如開發一個購物 app（無論是遊戲、音樂或優惠券），主要功能應該是讓使用者尋找和購買所要找的東西。雖然有著絢麗功能可以使購物更有趣，但是核心目標「尋找和購買」，千萬不能變成配角。要讓使用者能夠快速尋找和購買，是凌駕於任何功能之上。

如下範例中有兩個 Shopping app 的設計，左邊的 app 擁有進階的購物功能（如贈送、相關產品和評論），右側 app 則注重於購買行為以實現 User Story 為主軸。簡單來說在 app 的表現上並無嚴格的對錯，只在於是否已確定主要使用情境並且優化核心功能，後續改善再以不妨礙使用經驗為前提，進行功能的豐富化。

圖片來源： Ivo Weevers

經驗四：優化 UI 的流量和元素（Optimize UI Flows and Elements）

使用者最無法忍受的就是等待，所以針對各畫面、流程、UI 元素進行優化將有效減少等待時間，讓使用者不會認為他們在浪費時間（例如：在 Google UX Principle 中也提出「Every Millisecond Counts」 的想法，也就是要把優化層次思考到毫秒）。

身為產品設計人員，我們充份了解「效能表現」是無法完全控制。因為網路可能是造成緩慢的原因之一，或是某些操作需要大量的計算等。所以設計的重心在於「性能感知」（Perceived Performance），也就是盡可能的讓使用者察覺到他們沒有失去過多時間，進而對 app 產生良好的印象。但如何具備「性能感知」 的設計？

1. 第一步是識別流程中，可能會發生 Delay 的環節（例如：擷取後端資料、運行特定的計算等）
2. 第二步是引入額外的步驟，使使用者認為這些程序是必要的，進而降低延遲的強烈感（例如：顯示資料載入的動畫、顯示這個步驟的提示等）。 性能感知範例一：如下的 app 操作示意圖，是內容搜尋的步驟。

   圖片來源： Ivo Weevers

   主要情境是使用者先點擊「搜尋」按鈕，看到一個載入動畫，再顯示列表的第一部分（文字優先顯示），最後顯示列表中的全部資訊（文字和圖像，當然圖像可以被預 先儲存在 app 本身）。目的是讓使用者對於 Delay 的感受，經由少許的步驟而得到平衡，流程上將優於自「搜尋」點擊後直接跳到顯示全部列表資訊。

   性能感知範例二：當啟動 app 進行資料載入時，預先顯示 app 的佈局及圖片給使用者，將讓使用者對這個 app 有載入速度尚可或不錯的印象。若要再加快性能感知，可以思考在空白處添加簡單的進度通知。

   圖片來源： Ivo Weevers

3. 第三步是 優化個別的 UI 元素：任一個 UI 元素都有可能對性能造成影響，因此所有的 UI 元素應該一併考慮，主要方向是 在螢幕上的元素數量和類型（例如：媒體元素包括音頻、影片、地圖等影響力將大於簡單的文字元素或靜態圖像等）。而圖像元素的 Resolution 及 Image Depth 也會影響 Drawing 時間；而其次是 app 的 UI 繪製技巧，也會影響在螢幕上的載入時間（例如：繪製在螢幕的整個背景，或是分解成小的區塊等等）。

經驗五：定義 UI 縮放規則（Define UI Scaling Rules）

有些 UI 元素是極重要的，因為有助於彰顯品牌身份；而有些 UI 元素即使在某些顯示條件下被去除其影響相對小，這個原則如何拿捏可以自三個方向來思考：

1. 品牌核心：產品的 UI 品牌核心是必須被保持的（例如：應用程式的標頭，如下圖的圖示一）。
2. 替代品：有些替代性方式很實用而且不會造成性能上的負擔（例如：以不透明的元素來取代透明，如下圖的圖示二）。
3. 選項：有些 UI 元素雖然可以增強使用體驗，但卻是可以被刪除以維持效能（例如：減少列表的搜尋結果，從 25 筆降為 10 筆，如下圖的圖示三）。

圖片來源： Ivo Weevers

經驗六：使用性能儀表板（Use a Performance Dashboard）

良好的團隊溝通，對造就一個成功的產品非常重要。市場行銷人員，設計人員和開發人員對於期望的產品表現皆不盡相同。因此藉由 Performance Dashboard 來幫助衡量，監測和設置目標產品的當前狀態、期望和發展重點，是一個有用的溝通方法；而 Dashboard 內的 Key Factors 如下：

1. 核心User Story：確保認知上的 User Experience 方向是一致的
2. 比較基準：產品之主要競爭對手的比較數據
3. 現況測量數值：顯示目前產品的執行性能數據
4. 目標數值：設定產品的目標性能數據
5. 效能狀態：目前產品表現相對於目標的狀態

圖片來源： Ivo Weevers；假設3G網路正常下以秒為單位

對於 Dashboard 上的數據，開發團隊可以進行主觀上的手動測量及記錄，或是客觀上的利用工具來測量呈現（例如：Android 的 TraceView）。

經驗七：專精的 UI 工程技能（Champion Dedicated UI Engineering Skills）

優秀的 Mobile application 開發團隊，必須能編寫高性能的使用者體驗，這表示對於前端的程式開發及產品設計，要同時具備 Engineering 技能和 UI 設計的經驗，也因為要考慮的事很多，簡單提供兩個思考方向：

1. 智能負載 （ Smart Loading ） ：這個機制常見的方式是延遲載入（Lazy Loading），預載主體及輕量的內容，然後再繼續載入較佔用效能的內容。這種技術降低了使用者的等待時間，營造流暢的體驗感受。
2. 背景加載 （ Background Loading ） ：這是一個開發人員皆知的方法，重點在於應用上是否真的發揮效果。如果效能影響因子是在於一張背景圖時，那是要載入一個大的圖像，或是經由演算法去合併單獨的小圖像？其實最好的解決方法要視情況而定。

七大 UX 經驗分享，只是傳達一個設計思維，即產品設計的選擇將會影響效能表現，但不幸的是通常我們想要作產品改善時，早已造成部份使用者 UX 體驗的負面印象。小編記得 Yammer 創辦人 David Sacks 曾發表過一段話：「當我看到使用者界面上缺了東西時，會感覺像是商店地面上有垃圾。」他承認曾與一名工程師爭執，原因是畫面少了幾個像素。身為 CEO 的人卻極度重視 UX，恰好與一些產品經理們對 Mobile UX 的漠不關心，呈現出強列對比。

（註一） Seven Guidelines For Designing High-Performance Mobile User Experiences

您可能也喜歡以下文章：
行動應用趨勢：如何建立一組偉大的行動開發團隊	【年終大補帖】2010年推薦必裝的四十個iPhone Apps	iPhone App Store淘金熱：中國大陸知名開發團隊139.me傳奇	頂尖公司都在喊：手機優先（Mobile First！），您呢？	你的mobile app，也可以是這樣設計的!
无觅