1. 原則四 送出邀約
aco

2. 德國旅行 p178
GPS + 適當的提醒 = 美好的使用體驗

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

4. 可視線索 Affordance p179
http://goo.gl/42Z8T

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

6. CH9 靜態邀約
p181

7. 為什麼需要邀約?
• 要讓使用者盡可能很容易地看出可能的操作行為，否則該功能將可能
永遠不會被使用到
• 對於使用者來說，找不到的功能就是不存在的功能
(不存在的功能我們做這麼辛苦幹嘛? ><)
http://goo.gl/4Z40

8. 靜態邀約 p181
• 邀約永遠顯示於頁面中，透過合適的視覺技巧邀請使用者進行互動
http://goo.gl/e3s5q

9. 採取行動邀約 Call to Action p181
邀請使用者進行主要任務
http://answers.yahoo.com/

10. p182

12. 問題探討 p183
• 視覺干擾
– 讓頁面在視覺上和資訊層面上皆能清楚明確
– 不能讓使用者迷失在頁面中
• 能見度
– 要測試才能確定是否可引起使用者的注意
Tip: 邀請使用者執行主要動作，或指出主要的步驟

13. Like.com p183
Draw a box on the item to focus your search on that area
Google Image Search ?

14. 空白版面邀約 p184
Tip: 善用空白區域，邀約使用者進行互動

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

16. 重要常規 p185
• 採取行動邀約應用於單一的主要動作，或簡單的步驟請求。
• 避免讓邀約干擾頁面上相關的元素。
• 善用空白區域。
• 運用未完成的區域，因為人類在天性上自然而然地想要「完成」懸而
未決的事物。

17. 遊覽邀約 Tour p186
邀請使用者探索新功能

18. 問題探討 p187
• 需考量是否會對系統負擔過重，也可能造成使用者動線的阻礙
• 並非權宜之計，無法讓難以使用者網站，變得容易上手
• 保持簡潔 & 介紹新互動的方式：遊覽邀約應和網站密切結合

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

20. 介紹新互動方式 p188
• 使用者易將位於頁面頂端的內容當成廣告
• 遊覽與網站本身分離，難以對應

21. Cacoo 遊覽與功能分離

22. Cacoo

23. 重要常規 p189
• 推出新版時可以幫助使用者快速了解一系列新的功能
(全新的網站也適用)
• 應儘可能地將遊覽邀約整合至實際的網站
• 讓使用者容易退出，且也能迅速重新啟動
• 保持遊覽的精簡和順暢
• 非權宜之計，無法讓難以使用者網站，變得容易上手

24. CH10 動態邀約
p191

25. 為何需要動態邀約?
• 使用者通常不會閱讀文字 (ex: Yahoo)
• 在使用者產生需求的當下提供邀約，是吸引注意力的好方式
動態邀約：使用者進行互動的位置和項目，決定邀約的出現時機
http://goo.gl/kZ8zw

26. 滑過邀約 Hover
p191

28. modified

31. 互動式 v.s. 靜態式 p193

32. 靜態 v.s. 動態，兩者間的取決在於該動作的重要程度，
可最好透過使用者測式，找出最佳的解決方案
• 執行動作為關鍵動作時，且可見方式不會造成視覺上的擁擠時  靜態
• 執行動作為次要動作時，且重在可讀和簡明易懂的畫面時  動態
p195

33. 提升滑過邀約的成效 p195
• 醒目的背景
• 運用 tooltip
• 游標的樣式對應該有的操作
• 提供情境內動作的預覽
click
?

34. • 以內容為主，且需保持畫面的簡潔時
• 善用游標樣式、背景顏色的改變，及 Tooltip 明確指出邀約的動作
• 可以提供預覽，讓使用者知道執行後的變化
• 透過常見的互動方式引導進入新的互動，ex: 按鈕、連結、下拉箭頭
和淺而易懂的 Icon
• 運用相鄰原則，指明邀約相關的物件
重要常規 p196

35. 可視線索邀約 Affordance
p196

36. Affordance
Perceived Affordance
http://goo.gl/j5Zxz
http://goo.gl/sXBwl

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

38. • 看起來像按鈕
• 具備下拉式箭號
• 提供下拉式功能表
• 反轉箭號方向
多重互動方式 p198

39. 拖放邀約 Drag and Drop
p200

40. 1
2 3
4 5

41. 拖曳邀約 p203
Drag
Click
Nothing
HowStuffWorks: Dally …
HowStuffWorks: Dally Stuff Feed
如何有效提供拖曳邀約：
1. 游標的提示

42. 2. 文字的提示

43. 宣導拖曳功能 p205
善用空白區域

44. ?

45. 方便刪除多筆?
置放邀約 p207

46. 有效
無效
有效
無效
新增聯絡人
有效 drag 區

47. 要讓使用者知道，該項目是可以 Drag，
或該區域是可以 Drop 的

48. 推理邀約 Inference
p209

50. 更多內容邀約 More Content
p210

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

52. Tip: 於適當的時機運用動畫效果，以說明還有更多內容
自動帶入新的內容 (每隔幾秒鐘)

53. Tip: 當有更多內容可以供呈現時，利用滑鼠 Hover 過
時顯示，或顯示內容的一小部份

54. 邀約的益處 p213
• 透過邀約讓使用者可以使用新的功能或互動，或導引使用者去使用新
的網站 (也可以導引到我們想要讓使用者到的地方，ex: 主動應徵)
• 要讓使用者盡可能很容易地看出可能的操作行為，否則該功能將可能
永遠不會被使用到
• 對於使用者來說，找不到的功能就是不存在的功能
• 使用者找不到或沒有用到的功能，做再好都沒有用