Anda di halaman 1dari 20

簡報日期:2011/03/01

簡報者:Phoebe

第六組--Web界面設計讀書報告
 簡化 建置/發表
 範例:未簡化評論刪除
 舉例:新版的文件..需使用ctrl+滑鼠右鍵 或
shift才可選取,無法利用一個“全部” 或“多
篇”管理設定
※參考>>天空部落格的功能改善

P157~158
 Alan Cooper:Interaction Design Practicum
※擺脫技術驅動手段,同時揭示用戶潛在的心理模型
※問自己問題:能否透過通過某種魔法幫助用戶完成任
務?
範例.相片上傳步驟:8步簡化為3步 →Wifi
範例.亞馬遜購物流程是典型的多頁過程添亂
舉例>>FB地標打卡&上傳相片
舉例>> 機場check-in(out)
在郵輪上checkin&送行李→目的機場收行李
《化繁為簡,便利用戶》

P158~160
 Laws of Simplicity :通過巧妙設計的機制
或小顯示視窗隱藏複雜性,是一種公開的
欺騙方式,但如果欺騙讓人感覺不到惡意,
隱藏複雜性就是一種有意無害的好事
 採用一點魔法,去掉頁面變換的麻煩,提
供更好的體驗
 5種流程處理模式:交互式單頁、崁入式部
件、配置程序、對話框覆蓋層、靜態單頁

P158~160
 消費類商品購物:樣式、尺碼、質地、顏
色……等,需以一個個條件篩選,再由多頁
的工作流程,還未必能完成網路購物
 範例:GAP購物、GAP QuickView、亞馬遜
search suggestions(in book/in Kindle store)

※參考: Online Shopping Basket and


Checkout Process
? TOP 50
 注意事項
‧如果無貨則該顯示無貨/無效
‧避免用戶左右為難
‧消費者口味偏好放第一
 敏感信息披露
‧讓用戶一步步完成的複雜UI操作應該是用戶不熟
悉電腦、步驟太長、不易完成,但不想逼著用戶每
次都開新頁面,而是要把整個界面放在一個頁面中
 為用戶提供參照
範例:Broadmoor Hotel 每一個頁面內容都對應前
一個頁面選項。
<<優點:專注購物,增加交易機會>>
P161~P164
 購物車(Add toBag):GAP、亞馬遜
不視為與購物過程有關,而是當做一輛真
正的購物車,只是界面中的對象

P164
 簡易:GAP在四家商店都使用相同的下拉
覆蓋層提供購物車,期許增加銷售量
 附加步驟:亞馬遜則推出相關商品推薦,
通過打開新頁面,能推廣更多的商品
 確保用戶完成操作的過程容易,且在需要
吸引用戶興趣時,可使用附加步驟
 混合<簡易>與<附加步驟>
Netflix:利用覆蓋層的方式提供建議&可
加入購物流程
P165~167
 利用這兩個模式簡化用戶操作流程
 利用這兩個模式增加交易機會
 在上下文中顯示預覽
 實時顯示無效選項。可以提醒用戶注意自
己的選擇結果
 儘可能以崁入方式顯示購物車
 把購物車視為一類界面元素,而不是額外
過程
 如果推薦建議與用戶有關且重要,可以展
示附加步驟
P168
 頁面切換會打斷用戶意識流
 上下文切換也會讓用戶離開網站
 需要減少打斷用戶思考的方式使用步進式
流程
 覆蓋層是可以保持當前上下文,同時又能
開闢一處虛擬空間延伸與用戶的交流(CH5)
 範例:discover.com

P168~169
 GAP清單 快選結帳
 讓人覺得輕鬆:用色 &填入資訊的顯示
‧亮盒效果有助於集中用戶焦點
‧技巧性活潑化第一個頁面&提供簡單輸入
的感受
‧前四個步驟都相當簡單,甚至有一個頁
面是為了讓用戶選擇付款日期,持續性簡
化用戶繁複的感受
‧清晰的狀態,提供整個過程步驟提示
<< 由儉入奢易>>
P169~170
 使用對話框覆蓋層將多個步驟匯集到頁面
上下文
 使用對話框覆蓋層簡化整個流程,讓用戶
感覺比使用多個頁面輕鬆
 使用亮盒效果把用戶注意力集中在當前任
務上
 在用戶進入過程後,對當前位置給出明顯
提示(麵包屑)

P171
 有時流程處理是希望引起興趣,流程安排
就成為吸引用戶參與的最重要因素
 Web上的各種配置程序界面就是這種情況,
常見於選擇汽車配置
 範例:保時捷>>打造你的保時捷
 舉例:芭比娃娃遊戲>>烤個蛋糕吧、婚禮
設計
 即時反饋:用戶點選一個要素時,畫面需
呈現最即時擬真效果(photorealistic)
 保時捷網頁是多頁過程=單頁過程可委身於
多頁過程中
 視窗外訊息:Apple提供另一種Macintosh的
配置程序
 配置程序本身具有動態特性

P172~173
 把所有的處理過程放在一個靜態頁面上,
用戶可以看到完成一個任務的所有步驟。
 需避免太長或太複雜,若導致用戶放棄就
不是好例子
 範例:APPLE、ebay(Customize ur listings/
靜態單頁)

P174~175
 讓人覺得簡單
‧採取預設值
‧明確的邊框和大大的步驟編號
‧顏色有效區隔,給人四個步驟印象
 多頁不一定不好
‧明確表達這一部已完成,要進入下一步
‧範例:問題舉報~確定問題所在是整個過
程核心,不須參考其他問題

P176~177
 過程比較複雜,建議使用多頁流程
 想隱藏之前或之後的上下文,同時把用戶注意力集
中在多步中的一個任務上,可使用多頁流程
 若步驟較少,且不想讓用戶因頁面跳轉退出,可使
用靜態單頁
 利用視覺處理技巧減少用戶心理上的步驟數
 多步操作中,對用戶當前位置及所剩步驟給出提示
 儘可能匯集預設值選項,簡化流程
 運用參照信息、顏色提示、互動手法極簡單的視覺
樣式達到簡化步驟的效果
 把最簡單的操作放在多步流程的最前面

P177
 網站上需使用多步驟以便讓用戶完成某項
任務者,即為”流程處理”
 流程處理需站在用戶立場,設想魔法原理
 由儉入奢易,最簡單的步驟可有效提高任
務的完成度
 需提醒用戶當下的情境和未來的流程
 簡單、輕鬆的用戶體驗是最重要的流程配

延伸加映……
有來的有福啦