原則四 送出邀約

aco

德國旅行 p178

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

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

可視線索 Affordance p179

http://goo.gl/42Z8T

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

CH9 靜態邀約p181

為什麼需要邀約?

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

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

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

http://goo.gl/4Z40

靜態邀約 p181

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

http://goo.gl/e3s5q

採取行動邀約 Call to Action p181

邀請使用者進行主要任務

http://answers.yahoo.com/

p182

問題探討 p183

• 視覺干擾

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

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

• 能見度

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

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

Like.com p183

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

Google Image Search ?

空白版面邀約 p184

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

未完成邀約 p185

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

重要常規 p185

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

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

• 善用空白區域。

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

遊覽邀約 Tour p186

邀請使用者探索新功能

問題探討 p187

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

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

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

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

介紹新互動方式 p188

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

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

Cacoo 遊覽與功能分離

Cacoo

重要常規 p189

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

(全新的網站也適用)

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

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

• 保持遊覽的精簡和順暢

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

CH10 動態邀約p191

為何需要動態邀約?

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

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

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

滑過邀約 Hover

p191

modified

互動式 v.s. 靜態式 p193

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

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

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

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

p195

提升滑過邀約的成效 p195

• 醒目的背景• 運用 tooltip

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

click

?

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

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

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

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

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

重要常規 p196

可視線索邀約 Affordance

p196

Affordance

Perceived Affordance

http://goo.gl/j5Zxz

http://goo.gl/sXBwl

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

• 看起來像按鈕

• 具備下拉式箭號

• 提供下拉式功能表

• 反轉箭號方向

多重互動方式 p198

拖放邀約 Drag and Drop

p200

1

2 3

4 5

拖曳邀約 p203

Drag

Click

Nothing

HowStuffWorks: Dally …

HowStuffWorks: Dally Stuff Feed

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

2. 文字的提示

宣導拖曳功能 p205

善用空白區域

?

方便刪除多筆?

置放邀約 p207

有效

無效

有效

無效

新增聯絡人

有效 drag 區

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

或該區域是可以 Drop 的

推理邀約 Inference

p209

更多內容邀約 More Content

p210

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

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

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

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

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

邀約的益處 p213

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

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

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

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