2009/04/19 UI Gathering專題演講－「偽」網站設計-Website Prototype Design的實務應用分享
Download as PPT, PDF14 likes2,020 views
悠識數位顧問有限公司是一家專注於網站設計和使用者經驗的專業服務公司，提供網站規劃、原型設計及教育訓練等服務。蔡明哲擔任首席架構師，擁有豐富的網路行銷及網站建置經驗，參與多個知名企業的網站改版專案。這家公司強調在設計過程中運用原型設計技術，以提升客戶需求滿足和使用者體驗的重要性。
2009/04/19 UI Gathering專題演講－「偽」網站設計-Website Prototype Design的實務應用分享
- 1. 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. 國內第一家以「網站建築師事務所」為定位的專業服務公司 - - 「偽」網站設計 - Website Prototype Design 的實務應用分享 蔡明哲 Richard Tsai 悠識數位首席架構師 Chief IA 「偽」 ：偽裝，假的
- 2. 蔡明哲 Richard Tsai 現在：悠識首席架構師 Chief Architect / Axure RP 產品行銷總監 11 年網路行銷經驗及網站建置經驗， 4 年軟體行銷 / 系統開發經驗。 專長 網站企劃，網路行銷 , 專案管理 , 系統分析 , 資料庫行銷。 經歷 知世網絡 6 年 ( 華文市場最頂尖的網路行銷公司 ) 網站企劃顧問 , 專案總監 , 客戶服務總監 , 技術總監 多寶格行銷 2 年 ( 台灣最早的網路廣告公司 ) 行銷企畫部經理、知識研究部經理 台灣科技大學工商設計系兼任講師 5 年 凌群電腦 4 年 軟體工程師、專案經理、產品經理
- 3. Richard 近幾年部分專案 工研院英文網站改版 天下雜誌英文網站改版 NEXCOM 英文網站改版 信義房屋網站 改版 / 工研院網站中文改版 臺灣證券交易所網站改版 / 證券櫃檯買賣中心網站改版 / 臺灣高鐵網站建置 / 光寶科技企業網站改版 / 保德信投信 (Prudential) 企業網站改版 NISSAN 企業網站年度營運及網站會員行銷 - ”NISSAN 你上了嗎？” 網路行銷活動 泛亞電信 企業網站改版 / 泛亞電信 EC 網站建置 / 泛亞電信網路客服網站建置 / 泛亞電信 EIP 網站建置 / 電子報系統導入 / 網站營運分析 金紅葉經銷商電子商務網站、金紅葉 Airforce 員工入口網站建置 - 金紅葉 GHY 為中國大陸生活用紙市佔率第一製造商，總部位於大陸蘇州 中華電信 HiB2B 網站建置 HSBC 網站改版 / HSBC 理財試算軟體 2007 2006 2004 2003 2005 2002 2001 2008 2007 年金手指網路獎年度大獎 - 最佳網站 2005 e 天下 e 時代行銷王 第三名及最佳視覺設計 2003 泛亞電信網路客服 , 上線半年創造 ROI 100% 績效 2003 入圍經濟部商業司 E21 金網獎決選 / 入圍金手指獎 EC 類
- 4. 成千上萬的公司提供 「真」 網站設計 只有一家提供 「偽」 網站設計 - 悠識數位 UserXper
- 5. 悠識數位 (UserXper) 的服務項目 以「網站使用者經驗」為核心的三項服務 網站企劃專案 / Axure RP 軟體 / 網站企劃教育訓練 Axure RP - The best rapid prototyping tool Software Website planning and UCD training Training Website Planning & Usability Testing Planning & Consulting
- 6. 天下雜誌英文網站改版 NEXCOM 全球網站改版 工研院英文網站改版
- 7. 網站架構 / 流程圖 / 線框圖 HTML 格式 prototype 體驗原型 / 互動設計 Word 格式 規格文件
- 8. 我們的客戶 台灣 電信 / 軟體業 : 趨勢科技 , 華寶通訊 網站 : Yahoo, 巴哈姆特 , 104 人力銀行 金融 : 玉山銀行 政府法人機構 : 工研院 , NII 網路行銷 : 知世網絡 / 安捷達顧問 / 米蘭數位 / 網路基因 / 富爾特 / 不來梅 / 生命樹創意 / 摩奇 e21 創意 / 多奇數位 / 喬立達數位媒體 / 阿物國際… 大陸 iResearch, 微軟亞洲研究院 , 百度 , 上海征途 試用客戶：騰訊 , 網易 , 阿里巴巴 , 淘寶網 , 當當網 , 支付寶 , Mapbar, 金蝶軟件…
- 9. 去年我們去深圳參展… User Friendly 2008 大會在深圳。過去幾屆的大會在 北京 ， 上海 ， 杭州 ， 北京 。 UPA : Usability Professional Association 可用性專業人士協會 誰來參加這個研討會 ? 大陸互聯網企業： Google, 阿里巴巴，騰訊，百度，網易，新浪 .. 知名國際品牌：微軟， HP ， Nokia ， HSBC… 軟體公司：群碩軟件，金蝶軟件 .. 產品製造商：華為，海爾， TCL ， 步步高 軟體商： Autodesk.. UX 相關領域公司： HFI ，唐碩，伊薩爾… 約 300-400 人 誰來參展 ? HP, TOBII, Smart Eye, Noldus, Hyperlink, 唐碩 , 悠識 (Axure)
- 10. 我們的網站企劃流程 Strategy 策略規劃 Stakeholder Interview Understand Business Goal Understand Marketing Strategy Website Research Website Traffic Analysis Strategy planning phase Scope 需求範疇 ----------- ----------- ----------- ----------- ----------- Requirement Definition Content Requirement Function Requirement Specification Review and Verification Requirement Definition Phase Skeleton 介面設計 Structure 架構定義 Prototype Design Phase Information Architecture Interaction Design Interface Design Navigation Design Information Design 網頁 設計 視覺設計 系統開發 Implementation Phase Visual & Page Design Phase
- 11. Card Sorting Mindmap Mental Model User Behavior Content Auditing Information Architecture Stakeholder interview Wireframe HTML Prototype Specification Traffic Analysis
- 12. 「偽」設計 重要嗎 ?
- 13. http://ohwed.youthwant.com.tw/blog/user1/CIDesigner/archives/2007/986.html 樣品屋 透視圖 http://blog.sina.com.tw/a0933448885/article.php?pbgid=52334&entryid=577267 模型屋 www.sexinsex.net/luntan/thread-1704273-1-1.html 借助「偽裝」模擬，得以低成本 / 低時間來確認顧客需求！ 並創造良好的體驗！
- 14. Prototype 重要嗎 ? 老闆 你畫的什麼東西？ 提 2-3 款網頁設計來瞧瞧吧 ! 網站企劃 我只會 PowerPoint ，我不太會做 HTML
- 15. Prototype 重要嗎 ? 工程師 不要叫我做 html prototype ，那不是我的事情，而且那等於要開發兩次耶！ 網頁設計師 HTML prototype? 啥 ? 我設計的東西叫做網頁
- 16. Benefit of Prototyping Cost of Prototyping > 我幹嘛要花這個錢跟時間呢？ 老闆
- 17. High Fidelity Prototype Low Fidelity Prototype (Sketch 手繪草稿 ) = 在網站企劃與設計的工作中 High Fidelity Prototype Low Fidelity Prototype < 設計的重要性 實作的重要性
- 18. Website High Fidelity Prototype 耗時費工 Logo
- 19. 既然如此，什麼時候 Website Design 開始流行起 Prototyping 呢？
- 26. Simunication (Web-based prototyping service)
- 27. Lucid Spec (Elegance Tech) – Windows AP
- 28. Balsmiq Mockups
- 30. 廣義 prototyping tool for Web/SW UI General Purpose – Diagram Tools VISIO PowerPoint Word Excel Pencil Project (plug-in Firefox) OmniGraffle (Mac OS X, Mac 版的 Visio) For Windows AP GUI Design Studio (Caretta) MockupScreens Graphics Tool Photoshop / Illustrator / Firework / FlashMX Developing Tool Dreamweaver, FrontPage, MS Express Web, Visual Studio
- 31. Website Prototype 的應用 實現 網站資訊架構 實現 網頁介面與動線 實現 網頁資訊設計 (partial) 實現 網站功能 (partial) 提早體驗，驗證 stakeholder 需求 提早測試，驗證 user 需求及 usability 管理變動需求，控制 Scope/Spec ，降低修改風險與開發時間，求得更好的使用者經驗
- 33. 示範模組化的 Website Prototyping by Axure RP
- 34. High Fidelity Prototype 的缺點 客戶 ( 老闆 ) 嫌醜 客戶 ( 老闆 ) 要求更細緻的介面設計 客戶 ( 老闆 ) 要求更多資訊 / 互動介面 Prototype 無法提供最終的使用者經驗 工程師嫌太難開發 網站企劃無法撇開責任
- 35. 謝謝！ 請上網搜尋 “網站企劃”或” Axure”