情感的設計

這幾年來，設計變成了一門顯學。不論是哪個產業，都開始強調設計的重要性。

看看這期IDEO公司的這篇文章，你會發現，設計絕對不像我們刻板印象中所想的一樣，只是視覺或美感的層次而已。

對全球設計界首屈一指的企業IDEO來說，設計是在為使用者解決背後隱藏的問題。這家公司創立十五年來，美國商業週刊的年度產品設計獎首獎，年年都由它包辦。

它把設計的重點從創造產品，擴大到創造經驗上。例如，美國一家醫院希望藉由它的協助，找出節省成本、吸引病患的方法。原來以為可能會需要改建新大樓、配備新科技設備，沒有想到，IDEO帶領醫院工作人員深入觀察病患看病流程後發現，只重新設計病人掛號流程，更新候診室，就能收到很大的成效。

因為要把設計從創造產品擴大到創造經驗，因此IDEO刻意聘用背景多元的員工，設計團隊包含設計師、工程師、心理學家、人類學家等。

在設計的過程中，IDEO所依靠的絕對不只是創意和靈感，還包含更多科學的流程和紀律。例如，它有嚴密的五個步驟，第一個步驟就是好好觀察顧客使用產品的經驗，甚至自己變成顧客。第二個步驟是腦力激盪：它嚴格要求參加的人不能說，「這點子不錯，『但是』……」；而要說「這點子不錯，『還有』……」。

某個程度來說，IDEO已經不是一家設計公司，而是一家管理顧問公司，它所做的很多事情，都是在幫助企業改變思維模式（EMBA雜誌第237期第六八頁）。

關於改變，是另外一門很大的學問。

在公司裡，不論是導入一個資訊系統，或推出一個人力資源方案，往往都會遭遇很大的抗拒。有經驗的經理人都知道，不順利是常態，能夠順利推動，才是奇怪的事情。在變革行動的中期，阻力往往也特別大，也就是當開場的鑼鼓喧天熱度降低，員工開始精神不濟、注意力渙散的時候。

要怎樣才能讓「改變」不偏離軌道，變革之火不熄滅呢？管理顧問Eric Beaudan提醒我們，這個時候，要重新思考變革的目標和期望，並且改變速度。

例如，也許你的變革速度太慢，讓人不耐，或者恰恰相反，你速度太快，讓人員跟不上。此外，也許你必須設法添加刺激，或者創造危機，讓人們重新把注意力投注在這個變革行動上（EMBA雜誌第237期第三六頁）。

畢竟，就像IDEO創辦人凱利所說：「設計代表的是產品的情感層次。」變革處理的，又何嘗不是人的感情層次？

無障礙存取網站的錯誤觀念

本文摘錄自旗標「跨平台網頁設計--使用Web標準技術」一書

錯誤觀念：無障礙存取網站必須建立兩種版本的網頁
若按照 Web 標準並遵循相關規範來開發網頁, 則毋須建立兩種版本的網頁。這也可以證明 Web 標準與無障礙存取技術具有某種程度的共通點。

使用 Macromedia Director/Shockwave 來設計網站時, 若想要符合 WAI Priority 1 或 Section 508 規範, 的確必須建立不同版本的網頁。所幸, 下一版的 Macromedia Director 可建立較為符合無障礙存取需求的 Shockwave 檔案, 但是否能符合 WAI 或其他規範, 目前不得而知。

錯誤觀念：純文字版本的網頁可符合無障礙存取的需求
有許多技術, 可以在不影響網頁原有的外觀下, 讓網頁更能符合無障礙存取的需求。事實上, 殘障人士的需求不一, 建立純文字網頁, 並不見得適合所有殘障人士。例如, 肢體殘障人士或許寧願閱讀有影像的網頁, 而不願閱讀純文字網頁。

錯誤觀念：無障礙存取技術的成本很高
建立 Skip Navigation 連結, 或是撰寫表格摘要, 其實不需要什麼成本, 為每個影像建立 alt 文字, 也花不了多少時間。事實上, 若要使網站符合 WAI Priority 1 或 Section 508 的規範, 所需的花費微乎其微。

較高層次的無障礙存取技術, 的確可能需要較高的成本。例如, 若要在 Real 或 QuickTime 影片中加入字幕, 可能需要不少經費。不過, 如果只是要符合 WAI Priority 1 基本規範, 大可不必擔心費用的問題。

對於大型網站而言, 要符合無障礙存取的規範, 只要在內容管理系統中加入一些屬性, 若是動態網頁則只需要修改範本, 即可輕易地建立無障礙存取網站。

經費不足？

有這樣一個朋友。他買了整屋子的 CD 和 DVD, 卻從來不聽也不看。他租了一間畫室, 但是已經兩年沒有動過畫筆了。他租了所有的有線電視頻道, 卻沒時間看, 因為整天泡在酒吧裏。這個奢侈浪費的傢伙, 不幸長了一顆蛀牙, 卻宣稱沒有錢去看牙醫。

好笑吧。這正是許多大型商業網站在做的事。這些網站抱怨沒有經費實作無障礙存取技術, 卻把大筆經費投入瀏覽器偵測、條件式 CSS 等無用的技術。

最近的一個例子便是 MSN.com。MSN.com 在 2003 年, 傳送不正確的 HTML 與 CSS 至 Opera 7 瀏覽器。條件式 CSS 向來只會把網頁弄得更糟糕 (http://deb.opera.com/howcome/2003/2/msn/)。不用說, MSN.com 也未能符合無障礙存取的規範。利用文字瀏覽器來測試, 或是 Watchfire 的 Bobby 無障礙存取技術線上驗證服務 (http://bobby.cast.org/bobby/bobbyServlet?URL=http%3A//www.msn.com/&gl=wcag1-aaa) 便能得知網站是否符合規範。

錯誤觀念：無障礙存取網站無法有精美的設計
只要開發人員小心使用, 所有目前網頁設計常用的技術, 皆符合 WAI Priority 1 與 U.S. Section 508, 包括影像、表格版面配置、CSS、JavaScript、PHP 等伺服器端技術, 甚至包括 Flash 與 QuickTime 等嵌入技術。

有一項需要澄清的觀念。通過線上驗證服務, 並不保證網站符合無障礙存取規範, 必須再輔以人為判斷。反之, 若無法通過線上驗證服務, 則很可能網站在某些地方未能符合無障礙存取規範。

錯誤觀念：網站在所有瀏覽器中都必須呈現一致的畫面
WAI Priority 1 與 Section 508 都沒有如此的規定。事實上, 網站本來就不可能在所有瀏覽器中都呈現一致的畫面。重點在於, 不管使用什麼瀏覽器, 例如, 螢幕閱讀器、PDA 或其他非主流瀏覽器等等, 都要讓使用者能夠存取網頁的內容。

錯誤觀念：無障礙存取技術是專為殘障人士所設計
網站若符合無障礙存取規範, 除了能夠協助殘障人士之下, 也能幫助下列使用者：

• 使用 Palm Pilots、Pocket PC、手機或其他非傳統瀏覽器的使用者。
  
• 暫時性受傷的使用者, 例如, 肘部受傷。
  
• 視力有問題的使用者。
  
• 從特殊環境上網的使用者, 例如, 從機場的公共資訊站 (Kiosk) 上網。
  
• 透過搜尋引擎來尋找網頁的使用者。
  

錯誤觀念：可利用工具軟體實作無障礙存取技術
所有無障礙存取技術的相關工具, 都無法自動將網站轉為無障礙存取空間, 開發人員仍舊需要做一些人為判斷。相關工具包括 Watchfire 的 Bobby 驗證服務、Cynthia Says 的 Portal (http://www.contentquality.com)、UseableNet 的 LIFT (http://www.usablenet.com/), 可協助開發人員測試網站是否符合 WAI 或 Section 508。LIFT 部分元件包含在 Dreamweaver MX 中, 可協助開發人員撰寫更加符合無障礙存取規範的網頁。

錯誤觀念：由客戶決定是否要實作無障礙存取技術
如果網站未符合無障礙存取規範, 設計人員需要負什麼責任, 目前尚不得而知。不過, 針對違反身心障礙者法案 (Disabilities Act) 的建築物, 美國司法部已要求建築師要負起法律責任 (即使建築師只是聽從業主的指示)。也許有朝一日, 網頁開發人員也會面臨相同的處罰。

網站互動技術的進展

CNET授權採用NYTimes文章：James Fallows‧郭文興譯　　2005/05/26

每個上網的人一定都有過這種讓人喪氣的類似經驗。

上星期我在美國明州阿坡里市，由於飛機誤點而要多等三個小時，這還不是讓人喪氣的地方。真正令人喪氣的，是我想用手提電腦連上機場提供的無線網路。要連上這個無線網路，必須要在螢幕上填寫一個註冊表單，要填上姓名、住址、電話、電子郵件、信用卡訊息，以及在網路上要使用的名稱。

我按下「送出」鍵──兩秒以後系統回應說已經有人使用這個使用者名稱，可能是其他人用了，也或許是自己上次來過這個鬼地方可是我忘了。但因為表單的所有欄位又變成空白，我必須把整個填過的表單重填一次，然後祈禱下次我選的名字可以用。

這種不便在某種程度上反映了網頁設計的怠惰與未完成。多年前程式設計者就已經知道要使用
「系統快取」或「系統暫存」功能。輸入的資訊裡面，除了那些造成問題的欄位之外，比如我選的使用者名稱，與需要保護的欄位，比如密碼或信用卡號等等之外，都應該要存到快取跟暫存裡面。不使用這種快取功能，而草率製造的網頁，數量多到令人沮喪。你一定也碰過這種要改任何輸入文字時需要整個重來的網頁。

但是在機場遇到的這個小問題，讓人聯想到使用網頁的基本概念。一直以來，網頁的使用都是網際網路的最大限制之一，但已經有很不錯的跡象顯示目前的狀況將要改變。

網站的互動功能，可以說是一種古早時代冗長流程的現代快速版本。舉例來說，如果你到公家機關或銀行辦事，你填好一張表格拿給職員或出納，最終會得到一些回應。這就是目前大多數網站的工作方式。你在網頁上輸入資料，借由按下「輸入」或「繼續」，或是按下某個連結，將資料送給遠端的電腦。最後電腦會回傳一些資訊。所送回的網頁往往像是你從職員那裡拿回的表格一樣是靜態的。如果你想要更多其他資訊-比如新的搜尋結果，或在其他日期的其他航班-你就必須要送出另一個要求，等待另一個回應。

這些浪費的時間雖然並非真的很多。但在只有幾項資料要改變，就必須要重傳整頁資料的這種情況下，的確會消磨使用者上網的動力。這種問答式的流程會讓人想到古早時期，將資料送到大型工作站等待其處理的情形。在目前的網站上，至少有一半以上放在「購物籃」裡的商品從未結帳。原因之一便是傳統的網站結帳流程十分累贅麻煩。

最近這三個月來，一些現存的相關技術，給予了網站全新感受，因而造成網路上一些騷動。要看看這些騷動所為何來，最簡單的辦法就是上Google Maps去看看。

在網站maps.google.com上，你可以看到美國境內任何一處的衛星照片。然後你可以按住地圖，往東邊或西邊捲動，也可以使用左右鍵達到同樣效果。大多數的地圖程式裡，當你捲動範圍超出原來地圖邊界時，就必須要暫停等待網站傳回該區域的資料。但如果使用Google的地圖程式，你可以持續向東或向西捲動，可以超出任何範圍，也可以在任何地點縮放。雖然該地圖的精密度依地點而異，但使用的經驗讓使用者感覺像是在登入時就已經收到所有地圖一樣的流暢。
當然該網站並不可能真的如此做。這個系統其實使用了兩個基本的技巧，讓他看起來像是你在電腦上擁有所有的地圖資訊。第一個技巧是非同步的資料更新-就是在系統等待你送出新的要求時，會將你可能要求的資料都先預存至你的電腦，比方目前地圖的邊緣部份。另一個技巧就是選擇性的更新資料，系統只更改跟目前資料不同的部分，而不是重新讀取整個網頁。

以這兩個技術作為主體，然後再與其他元件整合的網頁設計方法，在二月時，被顧問公司Adaptive Path的Jesse James Garrett命名為Ajax技術。然而該名稱本身就有極大的爭議。雖然該名稱在三月的華爾街日報上就已眾所皆知。但軟體公司Macromedia的副總David Mendels表示應該要叫「Rich Internet Applications」(多樣化網際網路應用)，而Google的專案管理總監Georges Hank認為應該要叫「Rich Web Application」。微軟平台策略部的總經理Charles Fitzgerald則表示，這樣一個聰明的工程師早已使用多年的工具，並不需要一個特定的名稱。不管名稱為何，所有相關的軟體陣營似乎都同意兩件事。

第一件事就是，「較多樣化的」網站可以提供更加滿意的使用經驗，不只限於給線上購物使用。Macromedia公司提供類似於Ajax的Flash技術，該公司的副總Mendels舉了幾個實例，比如油漆公司Serwin-Williams的網站，使用者在網頁上調出顏料的各種色調，看看這些顏料塗到他們房子的門窗上面後看起來如何。

總而言之，他強調使用這些「較多樣化的」網站的感受，會變得愈來愈像在你自己的電腦上面執行程式一樣。舉例來說，Gmail，也就是Google的電子郵件服務，現在可以執行更多複雜的郵件編輯功能，而購物網站也可以在使用者更新資料時，立即重新計算總價跟運送的費用，就好像電腦裡的試算表一樣。這個技術的關鍵就在於網頁會自動的更新，而且只有特定的部分會改變。而對在機場的我來說，若網頁使用了該種技術，便可以在我嘗試使用者名稱時立即顯示該名稱是被允許或拒絕，而不會影響到螢幕上其他欄位的資料。

大家所同意的另一點，就是瀏覽器市場的差異性──Internet Explorer，Firefox，Opera跟其他的瀏覽器，讓設置一個可以在每種瀏覽器上運作的「多樣化」工具難上加難。而Mendels認為解答就是他們公司可以在任何平台上執行的Flash技術。而微軟的Fitzgerald則表示解答是被包含在下一版視窗Longhorn的一組執行工具Avalon裡面。接下來一定會有愈來愈多關於這種競爭──不管是使用者方面或是公司方面的競爭──的新聞報導。

最後則是關於Google空照圖的相關資訊。上個月我提到有小部分的美國國土照片反常的模糊。模糊的地方並不是美國中情區的總部（中情區總部的照片清楚到可以看到停車場車輛的顏色）。也不是堤防或是電廠等等神秘的區域。地圖的有些地方比較清楚，有些地方比較模糊，是因為衛星照片的品質會依地點而有所不同。

而美國白宮與兩棟相鄰建築的屋頂，的確被使用影像軟體Photoshop處理過，以隱藏保護系統的所在位置。而州議會大廈的外觀也經過模糊處理，但整個輪廓還是相當清楚。但是如果你想看看真正的偽裝長什麼樣子，可以將華盛頓特區的Observatory Circle部分放大，那是副總統Dick Cheney的住所。