UI Gathering 2009 四月聚會: 原型製作(Prototyping)

我的工作主要在規劃網站。但作網站也需要Prototyping嗎?當然需要,但視狀況斟酌進行原型製作設計的完成度。

目前我的工作中,如果是大型的新網站開發,涉及較為複雜的功能與操作流程,我們會建議客戶在專案項目中,包含「原型製作」這一個工作項目。一剛開始,並不是所有客戶都理解(或接受)網站規劃需要有原型製作這一個階段。的確,許多的客戶都只要求看「首頁」,而且是做到視覺接近完成的首頁。稍微有一些網路操作經驗的客戶懂得看網站架構(website structure),用來釐清整體網站建製專案的規劃架構。

網站架構圖是一種常常被使用的網站規劃文件,也絕對有存在的必要性。但是就目前的網站設計技術而言,我們有各種的內容管理系統、社會網路媒體平台、互動多媒體設計、有多重分類架構的電子商務網站、使用者參與社群、甚至可以自由連結的「Wiki-like」網站,這許許多多不同的網際網路環境規劃與設計,恐怕也絕非靠網站架構圖就可以規劃釐清的。

換言之,當代的網站,已經慢慢的由「超文本」,轉而成為「工具服務」了。所以我們需要的,不僅僅只是滿足於「草稿大綱」,而更需要完整的「設計藍圖」。

兩個月一次的UI Gathering聚會又將在4月份展開,本次主題為原型製作(Prototyping)。原型製作(Prototyping)是設計溝通與解決複雜問題不可或缺的方法。使用製作原型方式驗證設計,能即早發現問題,節省開發成本、加速開發效率。本次聚會我們邀請到三位專家,針對實體裝置、網站與軟體等三種不同領域的原型製作分享他們多年來的經驗。

活動時間: 2009/4/19(日) 13:00-17:00

地點: 伯朗咖啡南京店 台北市中山區南京東路二段218號3樓 (南京東路建國北路口)

報名時間: 2009/4/6 (一) 22:00 到 4/10 (五) 22:00 (額滿為止)

人數: 60人

報名方式及費用:
請上 http://registrano.com/events/uigathering041909 報名,並完成付款程序(線上刷卡或者ATM匯
款),本次活動費用含場地費及蛋糕1塊、熱咖啡冰紅茶無限暢飲,共400元。(注意:不接受現場報名)

議程:
12:40 報到
13:00 開場
13:10 主題演講: 媒材、設計與適應性思考 唐聖凱
14:00 Coffee Break
14:10 主題演講:「偽」網站設計-Website Prototype Design的實務應用分享 蔡明哲
15:00 Coffee Break
15:10 主題演講: UI prototype實作經驗分享 林秉舒
16:00 Coffee Break
16:10 Lighting Talk: Prototyping經驗交流
17:00 閉幕

主講者:
華碩電腦 使用者經驗設計師 唐聖凱(Tony Tang)
從建築、運算到人機互動,近十年來研究與學習的累積,在華碩設計團隊作為落腳。目前從事創新性介面設計與研究,希望藉由帶入使用者經驗研究、互動原型術
以及適應性運算,來產生高使用度的人機介面設計。

悠識數位 行銷總監 蔡明哲(Richard Tsai)
悠識(UserXper) 首席架構師,Axure RP快速原型工具專家,熱愛網站原型設計,致力於推廣UCD觀念及Prototyping方法。更多介紹請參閱:http://userxper.com/services/training/consultants#richard

前華碩手機互動介面設計師 林秉舒(Maso Lin)
從事Flash、動態介面設計相關工作約8年時間,曾於Asus、BenQ等公司擔任互動介面開發工作。更多介紹請參閱:http://masolin.blogspot.com/2007/07/about-maso-lin.html

Lighting Talk:

聚會最後一小時的時間,我們保留給大家發聲。 如果你也願意分享你製作原型的方法,請確認報名成功後,寫信給本次活動策畫阿修(lis168@gmail.com)報名,每人發表時間7分鐘。

關於活動內容或者報名方式有任何的問題,歡迎來信給予UI Gathing活動小組(uigathering@gmail.com)
本次活動策劃人 – UI Gathering活動小組 – 阿修

.

25 個過時的與嶄新的SEO思維

原文:25 Outdated SEO Terms & Tactics vs Their Modern Alternatives | SEOptimise

當然有一些在台灣不適用。至少這一點就有明顯差距:在美國SEO的目標是無人力介入的Google PageRank演算法,在台灣SEO的目標是有人工參與的Yahoo排名。[No.12]台灣很多部落格服務都沒有提供Trackback功能。[No.16]在台灣的情況,可能是在無名小站製作行銷用主題佈景。[No.17, 25]台灣沒有很多主題目錄或DMOZ,中文網路書籤服務的效果也仍待觀察。但是,仍然還是有許多借鏡之處。以下是摘譯的標題,內文請詳見原文

  1. (舊)努力提高關鍵字密度  — (新)創作一篇殺手級內容文章
  2. (舊)PageRank 優化 — (新)權威性的連結
  3. (舊)metatag 優化 — (新)標籤(tagging)與群眾分類法(folksonomy)
  4. (舊)為搜尋引擎機器人製作SEO文案 — (新)為讀者製作SEO文案
  5. (舊)文章行銷 — (新)企業網誌
  6. (舊)將網站到搜尋引擎上登錄 — (新)提供 XML sitemaps與pinging服務
  7. (舊)檢查搜尋引擎上的排名 — (新)檢查33項其他的測量指標
  8. (舊)交換互惠連結 — (新)不吝提供對外連結
  9. (舊)付費連結/文字廣告連結 — (新)贊助慈善公益
  10. (舊)討論區簽名檔 — (新)在社會性網路媒體中的活動帳號中提供網站連結
  11. (舊)在頁尾提供連結 — (新)在內容中提供連結
  12. (舊)到別人部落格留言 — 在自己部落格回應,利用引用通知(trackbacks)
  13. (舊)錨點文字 — (新)主題性頁面或段落
  14. (舊)在noscript中插入連結語法 — (新)提供無flash 或無ajax 的版本
  15. (舊)隱藏點閱數連結 — (新)使用有“more”連結的widgets
  16. (舊)製作免費的WordPress樣板主題 — (新)製作Firefox外掛
  17. (舊)到各處的主題目錄登錄網址 — (新)經營口碑
  18. (舊)HTML 3.2 — (新)XHTML 1+
  19. (舊)保證排名 — (新)ROI 與討論數
  20. (舊)建立連結 — (新)贏得連結
  21. (舊)雕塑PageRank — (新)讓每個頁面豐富且有用
  22. (舊)論壇 — (新)社群
  23. (舊)出色的首頁設計 — (新)出色的次首頁,與易用的功能
  24. (舊)把網頁搞得像入口網站一樣複雜 — (新)留白與聚焦
  25. (舊)DMOZ — (新)網路書籤

Prototyping (原型製作)簡介

近日在公司分享「原型製作(Prototyping)」。我所工作的地方,專案團隊中的每個人都知道並實際使用 Wireframe 作為設計工作的溝通與規格文件。姑且不論「線框」本身的隱喻,可能為視覺設計人員所帶來的不當影響;在越來越趨複雜與互動的網站應用或系統中,單單只透過 Wireframe,是有一定的限制的。因此,我希望透過介紹「原型製作(Prototyping)」的概念,能讓大家重新發現各種「適時適用」的設計溝通工具與方法。

內容基本上我是照著"Effective Prototyping for software makers“這本書來講的,有點像是快速導讀吧。另外也補充了一些最近的資訊與工具,如Pencil與神奇的Denim。除此外,我目前常用的還有Axure PR,因為這套在我工作的地方是每個人都知道的軟體,所以在講義中就不多加描述了。

Intro: Prototyping

View SlideShare presentation or Upload your own. (tags: ucd design)

AIDA 的頁面編排原則

我有個從事銷售業務的朋友,從他身上我學到「話術」這個詞。話術,就我所理解的,是一套「說服圍觀的觀眾採取購買行動」的一套溝通策略。除了在路邊攤、夜 市、大賣場以外,現在電視購物頻道上也的推銷技巧,我也認為是一種「話術」。如果把原本話術定義中的「觀眾的購買行動」,擴大為「使用者的行動」的話, 「話術」也能說是一種,引導使用者的溝通技巧。

我原先完全沒有想到,網頁的版面編排(layout)也會應用上這種道理。我是看到 Smashing magazin 介紹了 Traffik 的首頁,並根據AIDA分析其版面編排的原則。也許,也可以這樣看,AIDA是一種廣告上使用的行銷技巧(話術)。這使得傳統靜態的版面編排設計,開始有了時間的概念,因為這四項是有次序的:

  1. A – Attention (Awareness): 吸引顧客的注意
  2. I – Interest: 引發顧客興趣:透過展示特點、優點、好處等等。
  3. D – Desire: 說服顧客,只要他購買這個產品,他的需求就會被滿足。
  4. A – Action: 引導顧客進行購買行動

繼續閱讀 “AIDA 的頁面編排原則"

a fieldnote about prototyping

延續與 acer, asker 對prototype的討論。我現在的工作,IA(資訊架構師),需要配合不同的PM、不同的企劃人員、不同的視覺設計人員、不同的程式設計人員、以及不同產業的業主。而且都是同時平行進行的!! A wonderful job!!

一些專案偏重視覺表現,一些則偏重資訊系統功能;有些專案允許有探索與訪談的時間,有些專案要「馬上看到」;
有的合作夥伴願意傾聽,有的則是本位主義;有的天馬行空,有的保守務實。

我的一個發現是,每個人對於「wireframe」、「prototype」、「moch-upmock-up」的定義與用法都不太一樣。該要去整合這些不同的看法,提出一種標準的定義嗎?我也不知道能不能,或這樣作對不對。我現在的態度是,先摸索每個人的認識基礎,與認知需求。然後試著丟出一些專案內大家都「可能」接受的溝通方式(但是也還是常常會有溝通不良)。我認為,原意上 prototype
應該是以「驗證(evaluation)」為主,但是實際上真的不常常有餘裕去作「開發測試」,而是在開發以及設計過程中,prototype
成為將設計概念呈現出來,以作為溝通以及輔助設計決定的工具。

目前我粗淺的觀察是:

  • PM 需要掌握工作分配、進度、報價。基本上,所有的溝通與文件PM都應該要知道裡面在講些什麼東西。
  • 企劃需要將他的想法表達出來。
  • 視覺設計需要知道他設計工作的資訊材料與規格、也許也要知道頁面編排的要求,需要產出能跟客戶溝通或確認的文件。
  • 程式設計需要知道功能需求以及邏輯動線,所有會使用到以即將會產生的資訊數量、更新頻率以及規格。
  • 業主會執行他們所擁有的「否決權」,假設你的努力並沒有打動或說服他的時候。

不同的專案生態

  • 有些專案生態中,只會有「一個語彙」用來作設計上的規格確認、測試與溝通。因此,這種專案中,不管叫做 「wireframe/prototype/mock-up」什麼的,反正都是同義詞。
  • 有的專案生態會分兩階段,一份是由由企劃或PM,為了作為專案規格文件之用,另一份是視覺設計為了與客戶確認視覺表現風格的。這會區分為兩個詞彙,可能會是「wireframe/prototype」、「prototype/mock-up」、「storyboard/A-copy」等等。這些詞彙受到專案參與人員各自固有文化領域的影響,會試著沿用或挪用以往的某種概念。
  • 應該也會有三階段的專案生態?不過我目前還沒碰到。

而我現在在不同的專案、不同的階段、不同的對象,分別都使用了:紙與筆,白板,Axura RP, PowerPoint, Visio, Excel, HTML 等等不同的工具。這個工具嘗試的清單我想還會持續下去,我一直想試試不同的工具在不同的情境下溝通,有什麼好處跟壞處。而我現在可能正好有這個機會可以讓我進行這項行動研究

其實我處理的個案經歷也有限,所以也還沒有什麼確定的心得可以分享的。只不過,看來台灣的網頁開發專案可能跟這塊土地一樣:都是「荒溪型」的居多:要嘛枯乾的要死,要嘛暴漲個幾天。恐怕是沒有什麼機會像國外那樣,有個「整個夏天的原型開發」這類奢華享受。

Everything is miscellaneous

秋聲 Blog: 混雜資訊的組織 提到的這本書,Everything is miscellaneous: The Power of the New Digital Disorder

Everything is miscellaneous: The Power of the New Digital Disorder

已經出中文版了:「亂是一種新商機:數位行為改寫的消費習慣」。

Image of 亂是一種新商機

雖然很想推薦所有圖書館相關專業工作者,如果沒法看到原文本,都應該去中文本找來看看。或是圖資學生應該拿來當成通論課的教材。但是,這本中文譯本真是一場災難:

  • 首先,書名就糟蹋掉了。明明是一本討論知識、分類、與數位時代的新秩序法則的新穎著作,被操作成一本過時的廉價商業教戰手冊。ilya翻的《一切都是混雜》都比這個書名層次境界高多了。難道這樣操作會賣得比較好嗎?
  • 第二個令人吐血的是版面設計:文字排列得缺乏質感又塞入了一些沒有用的設計細節,頁碼安置在奇怪的地方,難以閱讀的註釋排版。設計者可能受到那糟糕的中文書名所感昭嗎?
  • 第三,這本書中有許多圖書館學或各種學科的專業術語,但是譯者有許多顯然只是「照字面直譯」翻錯了許多。例如:information architecture 應該翻成「資訊架構」卻翻成「資訊建築」,social construction 應該翻為「社會建構」卻翻為「社會結構」。這些都是已經有許多譯本的通用譯法了。

雖然整本書中文書洋溢著一種廉價的感覺,這是我少數讓我有一股衝動看完就想脫手的書,但是偏偏明明內容又值得反覆玩味,真是教人為難。以下是Weinberger 本人在Google所進行的演講:

回應秋聲之前的介紹,這本書確實與知識有關。但是我認為Wienberger 的知識觀,不像是「資料->資訊->知識」的這種加值實在論。而是更接近Bateson 在《心智與自然》(Mind and Nature)一書中的主張。簡單的說,Bateson 的知識論,認為人的心智是由於感知到「差異」,並且在無所不在的差異中,發現萬物相互連結的模式,因此而獲得認識的能力。

Image of 心智與自然

10 Tools for Managing a Creative Environment

Bryan Mason (Adaptive Path), Sarah Nelson (Adaptive Path) 在 Web2.0 Expo 2008 – Design and User Experience上的演講 10 Tools for Managing a Creative Environment Presentation[PDF]。

摘要:由其他產業可以學習到很多如何管理創意專家的方法。劇場經理每天周旋於導演、設計師、與演員之間。編輯追殺作者於截稿日前。樂隊指揮調和一群各懷鬼胎的音樂家並達到理想的演出水準。這些領域都為我們示範了,如何建立並維護一個創新性的環境,並且能及時且在預算內完成偉大的工作。

Adaptive Path 的 Brvan Mason & Sarah Nelson 為我們介紹了,在這些藝術工作者中,十種(實際上有11條)創意管理的技巧。

  1. Cross-train the entire team / 每個人都要什麼都做(舞台劇團)
  2. Rotate creative leadership / 輪流當創意頭子(舞台劇團)
  3. Actively turn the corner / 積極的轉換思考
  4. Know your roles / 知道自己的角色 (樂團)
  5. Practice as a team / 全隊練習 (樂團, 劇團)
  6. Make your mission explicit / 將使命具體化
  7. Kill your darlings softly / (??)
  8. Leadership is a service / 以服務的態度領導
  9. Generate projects around creative interests / 根據興趣產生未來的專案計畫 (樂團, 劇團)
  10. Remember your audience / 勿忘觀眾 (想收到錢的創作者必備, 孤高的藝術家適用於Forget your audience)
  11. Celebrate failure / 慶祝失敗 (失敗有時候表示觀眾水準不夠…..藝術家通常會這樣想)

在()括弧中,是我的註解。

有些技巧不是放諸四海皆準。如交響樂團就不可能"Cross-train the entire team"。"Actively turn the corner" 對所有創作者來說,也是可遇不可求的神奇時刻。"Leadership is a service"對某些成功的藝術藝術團體來說,是諷刺。

這些項目是啟發性的,是借鏡。沒有做到也不表示不好。但是可以用來作為一種另類思考。

設計與美學 (HCI: Design & Aesthetics )

美學似乎是我應該拿手的題目,因為我唸了四年的美術系,加上三年的高中美術班。但是這一回其實我是講的最心虛的部份。畢竟美學是個太過深奧的主題,怎麼講都不完整。但我嘗試著用簡單的方法,跟台下的同學分享這方面的資訊。

在西方美術史來說,「理性」與「浪漫」一直被視為不斷激盪美感創意的二元對立風格。這種風格區分可以從希臘時代的Doric與Ironic這兩種柱頭的形式開始說起,一直延續到當代的種種藝術思潮。先不論創作者自己是不是有這樣的意圖,但是用這種兩軍對抗的觀點,倒是很容易記住許許多多美術史上風格的變化歷程。而我這次的講法,主要是沿著這種敘事模式,把「合理的設計」與「熱情的設計」對立起來。

設計小訣(HCI: Design tips)

其實準備投影片還蠻辛苦的…常常要在心中模擬聽眾的反應,確定內容大家都能理解,並且感興趣。並且要拿捏份量,不能講得太多。最近,Presentation Zen就介紹了Michael Alley的說法,主講者必許在演講的深度與廣度間,做出一個取捨。

由於第三次分享前一週,已經請Max來介紹Usability(使用性/優使性)的實務經驗。我也樂得輕鬆,只要講一些瑣碎而且管用的小東西就好了。因為我想大部分的學生都會作網頁,或是會開始裝扮自己的Blog等等,所以我覺得由一些網頁設計的實際案例與小訣竅與設計,會比較容易讓學生們理解。這些都是一些入門級的概念,看到這篇文章的行家們請多多包涵。

繼續閱讀 “設計小訣(HCI: Design tips)"

設計程序(HCI: Design process)

第一次介紹了在設計工作中,研究的重要性。第二次的分享則著重在設計工作的過程與方法上。

「以使用者為中心」是大多人都能認同,甚至常常掛在口中的目標。但實際工作的時候,通常只是動動嘴皮的高調而已。沒有方法的「使用者中心」設計,往往都會變成「大老闆中心設計」,考驗著設計師與工程師揣摩上意的能力而已。我覺得,設計程序是個非常實務導向的議題,有設計工作經驗的比較能真的學習到一些東西。但是這些學生將來可能有一天也會接觸到相關的工作,因此若能掌握一兩個重要的工具或概念,進而留下些印象,也許能有些幫助。另一方面,我自己的實務經驗也不夠講出太深入的細節。

所以我主要只分享了幾個重要概念:

繼續閱讀 “設計程序(HCI: Design process)"