54
原則四 送出邀約 aco

網路介面設計模式 - 原則四送出邀約

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: 網路介面設計模式 - 原則四送出邀約

原則四 送出邀約

aco

Page 2: 網路介面設計模式 - 原則四送出邀約

德國旅行 p178

GPS + 適當的提醒 = 美好的使用體驗

Page 3: 網路介面設計模式 - 原則四送出邀約

邀約是引導使用者進行互動的提示及線索

Page 4: 網路介面設計模式 - 原則四送出邀約

可視線索 Affordance p179

http://goo.gl/42Z8T

Page 5: 網路介面設計模式 - 原則四送出邀約

適當的邀約,是互動介面設計的關鍵之一

Page 6: 網路介面設計模式 - 原則四送出邀約

CH9 靜態邀約p181

Page 7: 網路介面設計模式 - 原則四送出邀約

為什麼需要邀約?

• 要讓使用者盡可能很容易地看出可能的操作行為,否則該功能將可能永遠不會被使用到

• 對於使用者來說,找不到的功能就是不存在的功能

(不存在的功能我們做這麼辛苦幹嘛? ><)

http://goo.gl/4Z40

Page 8: 網路介面設計模式 - 原則四送出邀約

靜態邀約 p181

• 邀約永遠顯示於頁面中,透過合適的視覺技巧邀請使用者進行互動

http://goo.gl/e3s5q

Page 9: 網路介面設計模式 - 原則四送出邀約

採取行動邀約 Call to Action p181

邀請使用者進行主要任務

http://answers.yahoo.com/

Page 10: 網路介面設計模式 - 原則四送出邀約

p182

Page 11: 網路介面設計模式 - 原則四送出邀約
Page 12: 網路介面設計模式 - 原則四送出邀約

問題探討 p183

• 視覺干擾

– 讓頁面在視覺上和資訊層面上皆能清楚明確

– 不能讓使用者迷失在頁面中

• 能見度

– 要測試才能確定是否可引起使用者的注意

Tip: 邀請使用者執行主要動作,或指出主要的步驟

Page 13: 網路介面設計模式 - 原則四送出邀約

Like.com p183

Draw a box on the item to focus your search on that area

Google Image Search ?

Page 14: 網路介面設計模式 - 原則四送出邀約

空白版面邀約 p184

Tip: 善用空白區域,邀約使用者進行互動

Page 15: 網路介面設計模式 - 原則四送出邀約

未完成邀約 p185

Tip: 讓某個區域保持未完成的狀態,邀請使用者完成所需任務

Page 16: 網路介面設計模式 - 原則四送出邀約

重要常規 p185

• 採取行動邀約應用於單一的主要動作,或簡單的步驟請求。

• 避免讓邀約干擾頁面上相關的元素。

• 善用空白區域。

• 運用未完成的區域,因為人類在天性上自然而然地想要「完成」懸而未決的事物。

Page 17: 網路介面設計模式 - 原則四送出邀約

遊覽邀約 Tour p186

邀請使用者探索新功能

Page 18: 網路介面設計模式 - 原則四送出邀約

問題探討 p187

• 需考量是否會對系統負擔過重,也可能造成使用者動線的阻礙

• 並非權宜之計,無法讓難以使用者網站,變得容易上手

• 保持簡潔 & 介紹新互動的方式:遊覽邀約應和網站密切結合

Page 19: 網路介面設計模式 - 原則四送出邀約

運用燈箱效果突顯新功能 p188

Page 20: 網路介面設計模式 - 原則四送出邀約

介紹新互動方式 p188

• 使用者易將位於頁面頂端的內容當成廣告

• 遊覽與網站本身分離,難以對應

Page 21: 網路介面設計模式 - 原則四送出邀約

Cacoo 遊覽與功能分離

Page 22: 網路介面設計模式 - 原則四送出邀約

Cacoo

Page 23: 網路介面設計模式 - 原則四送出邀約

重要常規 p189

• 推出新版時可以幫助使用者快速了解一系列新的功能

(全新的網站也適用)

• 應儘可能地將遊覽邀約整合至實際的網站

• 讓使用者容易退出,且也能迅速重新啟動

• 保持遊覽的精簡和順暢

• 非權宜之計,無法讓難以使用者網站,變得容易上手

Page 24: 網路介面設計模式 - 原則四送出邀約

CH10 動態邀約p191

Page 25: 網路介面設計模式 - 原則四送出邀約

為何需要動態邀約?

• 使用者通常不會閱讀文字 (ex: Yahoo)

• 在使用者產生需求的當下提供邀約,是吸引注意力的好方式

動態邀約:使用者進行互動的位置和項目,決定邀約的出現時機http://goo.gl/kZ8zw

Page 26: 網路介面設計模式 - 原則四送出邀約

滑過邀約 Hover

p191

Page 27: 網路介面設計模式 - 原則四送出邀約
Page 28: 網路介面設計模式 - 原則四送出邀約

modified

Page 29: 網路介面設計模式 - 原則四送出邀約
Page 30: 網路介面設計模式 - 原則四送出邀約
Page 31: 網路介面設計模式 - 原則四送出邀約

互動式 v.s. 靜態式 p193

Page 32: 網路介面設計模式 - 原則四送出邀約

靜態 v.s. 動態,兩者間的取決在於該動作的重要程度,

可最好透過使用者測式,找出最佳的解決方案

• 執行動作為關鍵動作時,且可見方式不會造成視覺上的擁擠時 靜態

• 執行動作為次要動作時,且重在可讀和簡明易懂的畫面時 動態

p195

Page 33: 網路介面設計模式 - 原則四送出邀約

提升滑過邀約的成效 p195

• 醒目的背景• 運用 tooltip

• 游標的樣式對應該有的操作• 提供情境內動作的預覽

click

?

Page 34: 網路介面設計模式 - 原則四送出邀約

• 以內容為主,且需保持畫面的簡潔時

• 善用游標樣式、背景顏色的改變,及 Tooltip 明確指出邀約的動作

• 可以提供預覽,讓使用者知道執行後的變化

• 透過常見的互動方式引導進入新的互動,ex: 按鈕、連結、下拉箭頭和淺而易懂的 Icon

• 運用相鄰原則,指明邀約相關的物件

重要常規 p196

Page 35: 網路介面設計模式 - 原則四送出邀約

可視線索邀約 Affordance

p196

Page 36: 網路介面設計模式 - 原則四送出邀約

Affordance

Perceived Affordance

http://goo.gl/j5Zxz

http://goo.gl/sXBwl

Page 37: 網路介面設計模式 - 原則四送出邀約

以常見互動方式做為通往新互動方式的橋樑 p197

Page 38: 網路介面設計模式 - 原則四送出邀約

• 看起來像按鈕

• 具備下拉式箭號

• 提供下拉式功能表

• 反轉箭號方向

多重互動方式 p198

Page 39: 網路介面設計模式 - 原則四送出邀約

拖放邀約 Drag and Drop

p200

Page 40: 網路介面設計模式 - 原則四送出邀約

1

2 3

4 5

Page 41: 網路介面設計模式 - 原則四送出邀約

拖曳邀約 p203

Drag

Click

Nothing

HowStuffWorks: Dally …

HowStuffWorks: Dally Stuff Feed

如何有效提供拖曳邀約:1. 游標的提示

Page 42: 網路介面設計模式 - 原則四送出邀約

2. 文字的提示

Page 43: 網路介面設計模式 - 原則四送出邀約

宣導拖曳功能 p205

善用空白區域

Page 44: 網路介面設計模式 - 原則四送出邀約

?

Page 45: 網路介面設計模式 - 原則四送出邀約

方便刪除多筆?

置放邀約 p207

Page 46: 網路介面設計模式 - 原則四送出邀約

有效

無效

有效

無效

新增聯絡人

有效 drag 區

Page 47: 網路介面設計模式 - 原則四送出邀約

要讓使用者知道,該項目是可以 Drag,

或該區域是可以 Drop 的

Page 48: 網路介面設計模式 - 原則四送出邀約

推理邀約 Inference

p209

Page 49: 網路介面設計模式 - 原則四送出邀約
Page 50: 網路介面設計模式 - 原則四送出邀約

更多內容邀約 More Content

p210

Page 51: 網路介面設計模式 - 原則四送出邀約

所有的內容比實際版面還多

Page 52: 網路介面設計模式 - 原則四送出邀約

Tip: 於適當的時機運用動畫效果,以說明還有更多內容

自動帶入新的內容 (每隔幾秒鐘)

Page 53: 網路介面設計模式 - 原則四送出邀約

Tip: 當有更多內容可以供呈現時,利用滑鼠 Hover 過

時顯示,或顯示內容的一小部份

Page 54: 網路介面設計模式 - 原則四送出邀約

邀約的益處 p213

• 透過邀約讓使用者可以使用新的功能或互動,或導引使用者去使用新的網站 (也可以導引到我們想要讓使用者到的地方,ex: 主動應徵)

• 要讓使用者盡可能很容易地看出可能的操作行為,否則該功能將可能永遠不會被使用到

• 對於使用者來說,找不到的功能就是不存在的功能

• 使用者找不到或沒有用到的功能,做再好都沒有用