網頁介面設計模式 - 送出邀約

2013-02-22 網頁介面設計模式讀書會簡報 - 送出邀約

Transcript

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: 主動應徵) • 要讓使用者盡可能很容易地看出可能的操作行為，否則該功能將可能 永遠不會被使用到 • 對於使用者來說，找不到的功能就是不存在的功能 • 使用者找不到或沒有用到的功能，做再好都沒有用