＊前情提要
有天我的車在台北市南京東路兄弟飯店附近沒油了，我想找附近的加油站。
＊結果
我同時使用 google map 與 urmap 試著解決我的問題，結論是 google map 大獲全勝。
＊細節
在 google map 做這件事只需要兩個steps
1、先找到南京東路二段
2、切換到『商家』tab，鍵入『加油站』，附近所有的加油站就列出來，問題解決，感覺非常好，滿意度一百分。
接著我一時興起想說用 urmap 也試試看，結果發現整個過程意外的艱辛。
1、同樣先找到當前所在位置
2、接著就麻煩了
我先試著在 search field 鍵入『加油站』，結果回應是找不到這個地址。
然後我搜尋畫面上所有的選項，看是否有可在目前位置下查找地標的功能，沒發現。
最後，只好硬著頭便去用畫面右半段的樹狀選單。
這個樹狀選單難用的非常有特色，基本上它是一顆非常茂盛的大樹，枝葉繁多，要在裏面找出我想要的『加油站』，絕對不是一件的有趣的工作。
我的搜尋路徑 (path to information) 大略為
-進入 依資料來源分類
-向下捲動三頁，其中要仔細思考每頁中每個選項的意義
-找到基礎地標
-找到交通運輸
-找到加油站
-點一下
然後畫面上列出附近所有的加油站(下面這張圖有點大，請點選後另開新視窗看比較清楚，我是故意抓全部畫面以突顯我要表達的 point)
從上圖中也可以看出，查找過程困難也就算了，當結果顯示出來時，由於整個版面太花俏，以致於match points 也變的非常不明顯，圖中用紅色箭頭標示出來即為加油站。
＊結論
同樣的事，在 google map 做只要兩秒，在 urmap 卻要花不止十倍的心力，優勝劣敗當下立斷。
延伸來看，網站做為一個產品，求的不外乎就是滿足使用者的需求，而它的手段之一就是要方便好用，並且儘量讓使用者經驗美好，google map 在這方面的表現可說是 A++，而 urmap 則犯了下列幾個錯誤
-介面過於花俏(顏色太雜，試圖將所有的功能都塞進首頁，結果反而攤瘓了基本功能)
-樹狀結構是工程師大腦邏輯的 dump，但卻不是一般人思考與習慣的方式，那顆樹長的越大，功能性就越薄弱，基本上這是一種對 user的 punishment。
devil’s always in the details
使用與滿足，是 user 到一個網站最重要的目地，也是一個網站應當最高優先提供的服務，從這個例子，可以看出 google map 是較為優秀的。
當然，如果從服務多樣性的角度來看，urmap 也確實有用心，提供了許多 google 沒有的功能，但可惜實作與提供的方式皆不正確，導致它們沒法發揮應有的效果，甚致原本各項功能加起來應該有的綜效不但沒發威，反而被一個混亂的介面給抵消了。
這很像是買了 3000cc 的”小車” 但卻只裝13″ 的鋼圈一般，非但無法發揮該有的速度，反而更耗油。
其實這篇帶出的是一個更大、更深的主題，也就是 usability, user experience 等綜合的概念，有機會我會更詳細的說明，why usability is important, it’s everything, and everywhere.
| by admin
最近因為工作的關係，又開始變身成 interaction designer 同時兼任 information architect 的角色，要為下一個產品做介面設計，也順便把最近市面上十幾個常見軟體的使用者介面重新 survey 一遍，下面是些零碎的心得(以比例來說，大約是全部的 10%左右…)
由於我已經一兩年沒有專任 UI designer (這裏的 design 指的不是視覺設計，而是偏向在進入視覺之前的 information architect, wireframes & mockup) 的工作，因此最先做的事就是把 2005 年後新上市的幾款軟體裝起來玩玩看，我鎖定的方向有三：
-Apple 全系列產品：包含 iTune, iPhoto, iCalendar, Aperture, Page, KeyNote, Final Cut Studio(這裏面就有六套軟體)
-Adobe CS3 全系列：由於某些神奇的因素，兩個月前我收到一份 fedex 來的package，裏面是九片dvd光碟，正是那時還未上市的 CS3 Master Edition，基本上就是什麼東西都有，不過我主要是 focus 在 Flash / Fireworks / Dreamweaver / Photoshop / Illustrator 與外加的 Lightroom
-Web App: 主要看的是 Adobe Live Connect (也就是 Breeze)跟 SalesForce.com 上一些 app 軟體
在一連串頻繁的使用與測試中，最讓我眼睛一亮的就是 aperture, lightroom 與 CS3，下面分別來談談。
＊Aperture
在之前的文章裏我已經稍微講過把玩 Aperture 後發現的有趣玩意(就是它的 palette 按鈕等)，其實除了些 UI controls外，Aperture 很棒的一點是它的 UI layout 設計的非常好，很乾淨，在視覺動線上讓人很容易 follow，而不同功能模組的切換與 toolbar 的配置也讓操作變的很容易，這是一件非常不容易的事。
最近一兩年 Apple 官方推出的幾個 app 都有著這樣的特色，將複雜的功能藏在方便的位置，用漸進的方式一步步 reveal 出來，平常 user 看不到它們，但當需要時立刻就可找到並使用，而要做到這個程度同時還兼顧畫面美感與功能實用性，這真的是要下苦心研究的。
＊Lightroom
Lightroom 基本上跟 Aperture 是同類的軟體，都是讓人整理照片並做適當的後製處理，它會特別讓人注意是因為它的介面配置跟同時期出品的 CS3 suite 很不一樣，似乎是一個完全獨立的 team 做出來的東西。
它的特別之處在於採取了完全不同於 Aperture 般 palette 的設計，而是用 Sidebar 式的組件，同時它很聰明的將工作類型區分成幾大項，例如 Library, Develop, Slideshow 與 Print，當user切換到不同的項目時，就顯示該項目下的幾個 tool panels，透過這種方式，Lightroom 也達成了化繁為簡的目地，user不會被幾十個panels 給癱瘓掉，仍然能保有一個主要的視覺中心(也就是圖片編輯區)
Lightroom 讓我比較頭痛的地方就是那純黑的介面，如果可能的話，我希望能改成螢光綠(反正要wow-factor 就乾脆反差大一點bling翻天 XD) 然後程式一啟動就開始播「眉飛色舞」…總之，黑色介面如雙面刃，慎用慎用。
＊CS3
此次 survey 中最讓人印象深刻的就是 CS3 的全新介面，個人認為這大概是近十年來最棒的設計(相形之下原本穩拿2007 冠軍的 Office 2007 就立刻落馬了，不過對微軟來說開業二十年能上榜一次算不錯了，繼續加油…看看 Vista 能不能打掉重練一次？ XD )。
CS3 的新介面主要是由非常彈性的 palette 與 docks 所組成，所有的 palette 平常可以單獨漂浮(floating)在畫面上，但也可以輕易的收納到app右邊的 docks，更棒的是 docks 還分兩種狀態，一種是全開式，可以看到 palette 所有內容，另一種則是所謂的 iconic dock，此時所有的 palette / group 以 button 的方式呈現，按下 button 後就會彈出完整的 palette。
這樣的設計最大好處在於：非常節省空間。
螢幕空間對做設計的人來說是非常重要的，以往多少設計師要用雙螢幕或三螢幕，為的就是能把一堆 palette 全拖過去讓它們不會互相重疊以方便使用(然後下班回家時拔了 laptop 就走回到家才發現奇怪我的 color palette 怎麼不見了？喔 原來還在第二顆螢幕上…啦啦啦)
CS3 的設計讓有限的畫面上可以容納最多的面板，而且彼此之間完全不會互相干擾，同時也將視覺重心永遠保持在畫布上，空出最多的空間讓設計師專心工作，這才是軟體真正該有的功能不是嗎？。
由於我實在太愛這個設計，因此忍不住去找一下是何方大德的佈施，結果很幸運找到下面資料
Adobe CS3 UI team interview
這是 Photoshop senior product manager 的 blog，他訪談了 CS3 的兩位主要介面設計師問他們是從那裏得到靈感這樣設計新介面，內容非常精彩，comments 更有過之而無不及。
文中還提供了一張圖，展示了 UI team 從 2004 年起訪談的幾百個 user 的使用畫面，看完真是覺得，『做研究就是要這樣搞啊~』Orz Orz Orz
＊CS3 後話
既然談到 CS3 就順說說其它的觀察。
比較有趣的是新介面並沒有套用在所有 CS3 的產品上，目前觀察到的只有 Photoshop, Illustrator, InDesign 與 Flash 採取了這種介面，至於 Fireworks 與 Dreamweaver 則還是維持 Macromedia 時代的舊設計，在上面的 blog文中他有解釋這是因為時間不夠，沒辦法統一所有的產品線，所以我想下一版時應該就會update了吧。
另外，我也無聊裝了 Soundbooth, Premiere, After Effect 起來玩了一下，發現這三支app用的又是另一種介面組件，基本上難用的很有風格，我想大概是程式功能都快做不完了很難有時間顧到介面美不美吧，不過反正平常用不到就隨它去吧…
所以這代表光一套 CS3 suite裏，就有三種完全不同的 UI controls，這還不加上 Bridge 的介面喔…
＊關於 Prototyping
咳咳，回到正題。
基本上這次會想做 app survey 主要就是想看一下這一兩年流行的介面風格，所以當研究做完，當然就要回來幹正事準備設計產品。
這時我才想到，該用什麼工具來做設計呢？以往常用的 visio, powerpoint 或 flash 都各有缺點，適手性實在不高(通常阻擾我思考的程度都比真正的貢獻多)，而其它常見的 axure, iRise等又比較適合做一般 web app，此時才突然想起很久前似乎曾想過或許可用 Fireworks 來試試…
用Fireworks做 prototype 的好處有幾個
1、它是一個向量/點陣兼容的軟體，因此不論是要畫些簡單的 wireframe 或抓些既有的圖片來修改，都可以一站完成，感覺很順手
2、Fireworks CS3 支援 9-slice 設定，而且它的 9-slice 是在 authoring-time 就能發功，不像 Flash 要到 run-time 才能生效(有時還生不出來 :P)，所以我可以輕鬆的自製組件，設定好 9-slice 格線後放在 common library 裏隨時使用，這樣不論在設計過程中要改變 layout 多少次都很容易
3、Fireworks CS3 新增了一個 Page 面板，基本上就像 layer，可以按頁來設計，而且在每個 page 下面又可以有 nested layers，所以自由組合後威力無窮
我自已試做了幾回後發現還真是好用到一個不行，也興起上網查查是否有其它人也這樣想，結果找到一堆(前面的*代表重要程度)，看來 prototyping 本來就是 fireworks 很重要的基本教義之一啊：
**Using Fireworks CS3 to design effective, interactive website presentations
*Wireframing with Fireworks CS3
Rapid prototyping in Fireworks CS3
＊小結
所以，結論是什麼呢？
-Aperture 跟 Lightroom 在介面設計上各有擅場
-CS3 新介面下足功力用心致極實在讓人嘆為觀止
-Fireworks + 9-slice 是製作 prototype/wireframe/mockup 的好幫手
另外之前提過的 About Face 3 買回來後終於有時間看了幾章，日後有空再來寫心得，快速結論是：很值得看，你也該買一本試試(然後這裏是不是該接個書店的link 就可以賺筆 referral fee ? ccc)。
ps. 不過天瓏似乎只有兩本，其中一本沒膠套被翻過很多次，另一本我買走了…so…
ps2. 本文後來加上去的圖案全來自 google image，感謝原圖提供者。
| by admin
