簡報日期：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
 網站上需使用多步驟以便讓用戶完成某項
任務者，即為”流程處理”
 流程處理需站在用戶立場，設想魔法原理
 由儉入奢易，最簡單的步驟可有效提高任
務的完成度
 需提醒用戶當下的情境和未來的流程
 簡單、輕鬆的用戶體驗是最重要的流程配
置
延伸加映……
有來的有福啦