網路介面設計模式 - 原則四送出邀約
DESCRIPTION
TRANSCRIPT
原則四 送出邀約
aco
德國旅行 p178
GPS + 適當的提醒 = 美好的使用體驗
邀約是引導使用者進行互動的提示及線索
可視線索 Affordance p179
http://goo.gl/42Z8T
適當的邀約,是互動介面設計的關鍵之一
CH9 靜態邀約p181
為什麼需要邀約?
• 要讓使用者盡可能很容易地看出可能的操作行為,否則該功能將可能永遠不會被使用到
• 對於使用者來說,找不到的功能就是不存在的功能
(不存在的功能我們做這麼辛苦幹嘛? ><)
http://goo.gl/4Z40
靜態邀約 p181
• 邀約永遠顯示於頁面中,透過合適的視覺技巧邀請使用者進行互動
http://goo.gl/e3s5q
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: 主動應徵)
• 要讓使用者盡可能很容易地看出可能的操作行為,否則該功能將可能永遠不會被使用到
• 對於使用者來說,找不到的功能就是不存在的功能
• 使用者找不到或沒有用到的功能,做再好都沒有用