Transcript 易視性
以Google map和Ur map為例 指導教授 : 吳有龍 博士 學號 : 9922017G 姓名 : 朱宸笙 (峰志) 使用者行為的優使性 網站設計與一般平面設計不同，因為使用者與資 訊提供者之間多了雙向互動的考量。 因此優使性設計原則對網站設計有其參考價值。 對設計者而言，理解重要的優使性原則比遵守設 計準則(Guidelines)還要重要。 一、互動模式 互動性是網站最重要的特性。 網站是一個資訊系統 前 輸 入 中 系 統 後 輸 出 因為前向模式缺乏系統的節制與控制，於是加入了 回饋(Feedback)。加入了回饋機制，使用者才能夠 瞭解系統處理的狀況並比較輸入資訊與輸出結果之 間的關聯。 回饋 前 輸 入 中 系 統 後 輸 出 使用者使用網站的七個行動階段 階段名稱 使用者行為描述 設計目標 1. 形成目標 決定網站功能 必須讓使用者一眼看 出主要功能 2. 形成意願 6. 詮釋系統狀況 思考可在網站上進行 網站設計必須具有良 的動作 好的心理模式，讓使 認定某些動作可以與 用者決定行動的方法 及預測行動後的結果。 達成使用目標有關 執行選定的動作 網站具有穩定技術架 構 看看執行後系統反應 網站系統必須提供使 用者完整、持續、正 對系統反應進行解釋 確並容易判讀的回饋 7. 評鑑行動結果 對行動結果作出結論 3. 指定行動 4. 執行行動 5. 觀察系統狀況 二、基本互動設計原則 易視性(Visbility) 心理模式(Mental model) 回饋(Feedback) 易視性(Visbility) 介面設計必須讓使用者一眼看出使用方法。 網站設計者最常犯的 三種易視性錯誤 1.使用者會在看到介面的數秒內建構心理模式，不 要期望使用者會認真【思考】操作的方式。 2.好的設計應該讓使用者直接瞭解使用方式，而不 是【回憶】前次的使用經驗。 3.、繁雜、未經安排的內容會降低網頁的易視性。 心理模式(Mental model) 在實際操作前，使用者會依其過去經驗、受過的教育 或訓練來解釋介面的操作方法，並預測操作後的結果。 心理模式主要功能在令人類面對外界變化時，決定行 動的方法及預測行動後的結果。換言之，使用者根據 其心理模式來判斷介面該如何操作。 建構心理模式的重要元素是---- 過去的經驗。 系統設計必須與使用者心理 相互結合 系統模式 心理模式 日常生活上的經驗 使用者在使用網站時的心理模式與日常生活中的 心理模式類似。 幾乎所有的網站都是利用多媒體的形式去滿足既 有的需求，或是以既有的需求為基礎進而發展出 新的需求。 就使用者心理模式而言，看報紙 與瀏覽新聞網站並無不同。 回饋(FEEDBACK) 要讓使用者隨時瞭解系統處理的進度與當前的狀況。 一、立即反應。 二、符合使用者預期反應。 三、不要中斷動作。 回饋(FEEDBACK) 四、確認 1. 你確定要這麼做嗎? 2. 你已經完成了，接下來你可以……. 五、說明錯誤原因及修正的方法 優使性設計原則 功能增加 = 優使性降低 直接一點的設計，比較容易使用。 維持介面的一致性 圖像比文字容易記憶 導覽設計四要件 視覺動線 善用黃金區域 功能增加= 優使性降低 讓網站功能單純化，除非必要，否則不要新 增功能 依使用族群不同，提供客製化的功能組合 功能模組化 隱藏進階功能 功能模組化 隱藏進階功能 下拉後，出現功能選單 直接一點的設計比較容易使用 能快就不要慢 能秀出來就不要藏起來 能說清楚就不要玩文字遊戲 使用者已經習慣就不要改變 維持介面一致性 視覺上的一致性 重要元件一致性 圖像比文字更容易記憶 比起文字，圖像傳達訊息的速度更快，卻更 容易被誤解。 網頁出現的圖像必須有意義。 圖像配合文字說明，盡量避免單獨使用 這三個圖案令 初次使用者無法理解意思 視覺動線 焦點區 重點跟隨區 視覺動線 盲點區 流覽結束點 善用頁面的黃金區域 黃金區域出現的位置: 視覺動線的起點及重點跟隨區 頁面的第一捲軸區。 視覺動線起點 左排功能列表 視覺盲點區 上排主要功能列 重點跟隨區 導覽四要件 目前位置 1. 頁面標題 2.網站的LOGO 3.主導覽列的標示 回去的路 1. 路徑列 2.樹狀選單 3. 內容中的錨點 可以往哪裡走，前方還有哪些功能 1.清楚的次分區導覽 2.針對頁面內容提出瀏覽建議 3. 相關的功能捷徑 迷路時可以問誰? 1. 內容搜尋功能 2.常見問題或幫助 電子地圖優使性的比較基準 一、易視性 二、心理模式 三、回饋 四、優使性設計原則 比較G-map 及 Urmap的易視性 G-map 的頁面設計維持Google的一貫風格， 十分簡潔，容易理解。 Urmap 雖然畫面較為繁雜，但主要功能選 項還算明確。 G-map 及 Urmap的心理模式 一般網路使用者對於搜尋功能列非常熟悉，而兩家電 子地圖，對於搜尋功能的使用符合使用者過去的經驗 模式。 但是Urmap以台北地區為主要服務傾向非常明顯。 G-map 及 Urmap的回饋性 符合使用者 不要中斷動 預期反應 作 回饋原則 立即反應 G-map 符合 符合 Ur-map 符合 偶爾 超出預期 返回上一頁 偶有不順 順暢 確認 不需要 不需要 筆者整理 優使性原則 優使性原則 G-map Ur-map 直接一點的設 功能增加 = 優 維持介面的一 圖像比文字容 計，比較容易 使性降低 致性 易記憶 使用。 進階功能都 隱藏起來， 不影響優使 性。 設計直接 介面維持 一致性 功能繁複， 主要使用功 介面略有變 需要稍微理 能設計直接 化 解才能使用。 圖像理解 容易 圖像理解 容易 筆者整理 優使性原則2 視覺動線 善用 黃金區域 G-map 極佳。 功能列置於左侧， 地圖區域佔滿右下位置。 地圖功能單純， 地圖頁面即是黃金 區域。 Ur-map 首頁模式: 採用方塊狀，從上 首頁模式的黃金區 而下的視覺動線。 域充斥各種廣告和 地圖模式: 採用功能列位於右 加值功能。 側，地圖在左側的設計。 筆者整理 導覽設計四要件 目前位置 回去的路 可以往哪 裡走，前 方還有哪 些功能? 迷路時可 以問誰? G-map 標示明確 稍微 不明確 明確 說明清楚 Ur-map 標示明確 標示明確 明確 說明清楚 筆者整理 結論 Gmap維持GOOGLE公司一貫的簡潔設計，但地圖導 覽功能完善 : 我的定位、衛星圖層、街景等附加服務 多，且與自家提供的其他服務密切結合。 Urmap 偏於在地化服務，附加的非地圖服務非常多， 如: 旅遊、美食、社群、住宿、氣象等。 參考書目 魏澤群。(民96)。優使性2.0(Usability 2.0)-網站經驗 設計與使用者研究。台北市: 網奕。 Google map (http://maps.google.com.tw/maps) Ur map (http://www.urmap.com/)