The Element of User eXperience

報告人：古佳禾 2014/7/3

3

What’s the Element of User eXperience ?

• 產品目標

經營者想從網站得到什麼?

• 增加營收

• 增加產品曝光率

4

策略層

Strategy

使用者想從網站得到什麼!!!

• 使用者需求

What’s user need ?

購 物

取得資訊

聽 音 樂

看 影 片

策略層

Strategy 5

確認使用者需求

6

• 市場調查

• 焦點訪談

• 使用者測試

• 創建人物角色

How to do?

策略層

Strategy 7

• 網站的的應用範圍有很多

如：電子商務、交流論壇、網路銀行

策略層

Strategy

範圍層

Scope

8

在範圍層我們會界定出網站會有哪些特性和功能

使用者需求 產品功能規格

這樣才知道正在建設什麼

這樣才知道不需要建設什麼

購 物

取得資訊

聽 音 樂

看 影 片

9

• 不只是文字，還有音樂、圖片或是影片

• 內容的管理 → CMS

策略層

Strategy

範圍層

Scope

10

Content Requirements

策略層

Strategy

範圍層

Scope

結構層

Structure

11

• 用來設計使用者如何達到某個頁面，並且

在使用者完成事情之後能去什麼地方

• 關注如何將訊息表達給用戶的元素

-如哪些類別應該出現在哪裡

Interaction Design

• 系統如何回應使用者的請求

• 預測可能的”User Behavior”

• 錯誤處理讓使用者不要有挫敗的心情

提供從錯誤中恢復的方式

最好的錯誤處理的方法…

將系統設計成不可能犯錯的那種策略層

Strategy

範圍層

Scope

結構層

Structure

12

I want to buy…

關注流程中將影響使用者執行和完成任務的元素策略層

Strategy

範圍層

Scope

結構層

Structure

13

14

策略層

Strategy

範圍層

Scope

結構層

Structure

框架層

Skeleton

結合介面設計、資訊設計、導覽設計三者將

資訊做視覺化的呈現，協助使用者理解資訊。

用於優化設計佈局，以達到按鈕、圖片、文

本區域這些元素的最大效果和效率。

策略層

Strategy

範圍層

Scope

結構層

Structure

框架層

Skeleton

Wire Frame 框線圖

15

策略層

Strategy

範圍層

Scope

結構層

Structure

框架層

Skeleton

表現層

Surface Visual Design

• 內部一致性

• 排版、色系、字體 ex. Helvetica Neue

• 外部一致性

16

讓使用者一眼就能看到“最重要的東西”

Interface Design

17

想需要購物時，能立即找到購物的按鈕

Interface Design

18

Navigation Design

提供給使用者去某個地方的能力19

必須傳達出內容和使用者當前瀏覽頁面之間的關係

Navigation Design

20

Navigation Design

網站的全局導航 → 網頁的局部導航21

傳遞資訊給使用者，弄清楚使用者想要什麼

Information Design

22

23

Apple的官網有很好的使用者體驗的

RWD可以在不同解析

度的裝置螢幕上去調整網頁的排版

這樣RWD也可以增加

使用者體驗嗎？

24

為什麼Apple官

網不用RWD呢?

But…

25

hTc呢?

26

那我們真的需要RWD嗎?