Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Prochain SlideShare
[心得分享] 如何把使用者經驗做出來
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

1

Partager

Télécharger pour lire hors ligne

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

Télécharger pour lire hors ligne

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

  1. 1. 原則四 送出邀約 aco
  2. 2. 德國旅行 p178 GPS + 適當的提醒 = 美好的使用體驗
  3. 3. 邀約是引導使用者進行互動的提示及線索
  4. 4. 可視線索 Affordance p179 http://goo.gl/42Z8T
  5. 5. 適當的邀約,是互動介面設計的關鍵之一
  6. 6. CH9 靜態邀約 p181
  7. 7. 為什麼需要邀約? • 要讓使用者盡可能很容易地看出可能的操作行為,否則該功能將可能 永遠不會被使用到 • 對於使用者來說,找不到的功能就是不存在的功能 (不存在的功能我們做這麼辛苦幹嘛? ><) http://goo.gl/4Z40
  8. 8. 靜態邀約 p181 • 邀約永遠顯示於頁面中,透過合適的視覺技巧邀請使用者進行互動 http://goo.gl/e3s5q
  9. 9. 採取行動邀約 Call to Action p181 邀請使用者進行主要任務 http://answers.yahoo.com/
  10. 10. p182
  11. 11. 問題探討 p183 • 視覺干擾 – 讓頁面在視覺上和資訊層面上皆能清楚明確 – 不能讓使用者迷失在頁面中 • 能見度 – 要測試才能確定是否可引起使用者的注意 Tip: 邀請使用者執行主要動作,或指出主要的步驟
  12. 12. Like.com p183 Draw a box on the item to focus your search on that area Google Image Search ?
  13. 13. 空白版面邀約 p184 Tip: 善用空白區域,邀約使用者進行互動
  14. 14. 未完成邀約 p185 Tip: 讓某個區域保持未完成的狀態,邀請使用者完成所需任務
  15. 15. 重要常規 p185 • 採取行動邀約應用於單一的主要動作,或簡單的步驟請求。 • 避免讓邀約干擾頁面上相關的元素。 • 善用空白區域。 • 運用未完成的區域,因為人類在天性上自然而然地想要「完成」懸而 未決的事物。
  16. 16. 遊覽邀約 Tour p186 邀請使用者探索新功能
  17. 17. 問題探討 p187 • 需考量是否會對系統負擔過重,也可能造成使用者動線的阻礙 • 並非權宜之計,無法讓難以使用者網站,變得容易上手 • 保持簡潔 & 介紹新互動的方式:遊覽邀約應和網站密切結合
  18. 18. 運用燈箱效果突顯新功能 p188
  19. 19. 介紹新互動方式 p188 • 使用者易將位於頁面頂端的內容當成廣告 • 遊覽與網站本身分離,難以對應
  20. 20. Cacoo 遊覽與功能分離
  21. 21. Cacoo
  22. 22. 重要常規 p189 • 推出新版時可以幫助使用者快速了解一系列新的功能 (全新的網站也適用) • 應儘可能地將遊覽邀約整合至實際的網站 • 讓使用者容易退出,且也能迅速重新啟動 • 保持遊覽的精簡和順暢 • 非權宜之計,無法讓難以使用者網站,變得容易上手
  23. 23. CH10 動態邀約 p191
  24. 24. 為何需要動態邀約? • 使用者通常不會閱讀文字 (ex: Yahoo) • 在使用者產生需求的當下提供邀約,是吸引注意力的好方式 動態邀約:使用者進行互動的位置和項目,決定邀約的出現時機 http://goo.gl/kZ8zw
  25. 25. 滑過邀約 Hover p191
  26. 26. modified
  27. 27. 互動式 v.s. 靜態式 p193
  28. 28. 靜態 v.s. 動態,兩者間的取決在於該動作的重要程度, 可最好透過使用者測式,找出最佳的解決方案 • 執行動作為關鍵動作時,且可見方式不會造成視覺上的擁擠時  靜態 • 執行動作為次要動作時,且重在可讀和簡明易懂的畫面時  動態 p195
  29. 29. 提升滑過邀約的成效 p195 • 醒目的背景 • 運用 tooltip • 游標的樣式對應該有的操作 • 提供情境內動作的預覽 click ?
  30. 30. • 以內容為主,且需保持畫面的簡潔時 • 善用游標樣式、背景顏色的改變,及 Tooltip 明確指出邀約的動作 • 可以提供預覽,讓使用者知道執行後的變化 • 透過常見的互動方式引導進入新的互動,ex: 按鈕、連結、下拉箭頭 和淺而易懂的 Icon • 運用相鄰原則,指明邀約相關的物件 重要常規 p196
  31. 31. 可視線索邀約 Affordance p196
  32. 32. Affordance Perceived Affordance http://goo.gl/j5Zxz http://goo.gl/sXBwl
  33. 33. 以常見互動方式做為通往新互動方式的橋樑 p197
  34. 34. • 看起來像按鈕 • 具備下拉式箭號 • 提供下拉式功能表 • 反轉箭號方向 多重互動方式 p198
  35. 35. 拖放邀約 Drag and Drop p200
  36. 36. 1 2 3 4 5
  37. 37. 拖曳邀約 p203 Drag Click Nothing HowStuffWorks: Dally … HowStuffWorks: Dally Stuff Feed 如何有效提供拖曳邀約: 1. 游標的提示
  38. 38. 2. 文字的提示
  39. 39. 宣導拖曳功能 p205 善用空白區域
  40. 40. ?
  41. 41. 方便刪除多筆? 置放邀約 p207
  42. 42. 有效 無效 有效 無效 新增聯絡人 有效 drag 區
  43. 43. 要讓使用者知道,該項目是可以 Drag, 或該區域是可以 Drop 的
  44. 44. 推理邀約 Inference p209
  45. 45. 更多內容邀約 More Content p210
  46. 46. 所有的內容比實際版面還多
  47. 47. Tip: 於適當的時機運用動畫效果,以說明還有更多內容 自動帶入新的內容 (每隔幾秒鐘)
  48. 48. Tip: 當有更多內容可以供呈現時,利用滑鼠 Hover 過 時顯示,或顯示內容的一小部份
  49. 49. 邀約的益處 p213 • 透過邀約讓使用者可以使用新的功能或互動,或導引使用者去使用新 的網站 (也可以導引到我們想要讓使用者到的地方,ex: 主動應徵) • 要讓使用者盡可能很容易地看出可能的操作行為,否則該功能將可能 永遠不會被使用到 • 對於使用者來說,找不到的功能就是不存在的功能 • 使用者找不到或沒有用到的功能,做再好都沒有用
  • molimora

    Aug. 6, 2014

Vues

Nombre de vues

484

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

20

Actions

Téléchargements

6

Partages

0

Commentaires

0

Mentions J'aime

1

×