2009/04/19 ui gathering專題演講－「偽」網站設計-website prototype...

UserXper Web User Experience – Planning / Training / Software -1-

悠識數位顧問有限公司UserXper Digital Consulting Co., Ltd.

國內第一家以「網站建築師事務所」為定位的專業服務公司

「偽」網站設計 -Website Prototype Design 的實務應用分享

蔡明哲 Richard Tsai悠識數位首席架構師 Chief IA

「偽」：偽裝，假的

UserXper Web User Experience – Planning / Training / Software

蔡明哲 Richard Tsai

• 現在：悠識首席架構師 Chief Architect / Axure RP 產品行銷總監• 11 年網路行銷經驗及網站建置經驗， 4 年軟體行銷 / 系統開發經驗。• 專長

– 網站企劃，網路行銷 , 專案管理 , 系統分析 , 資料庫行銷。• 經歷

– 知世網絡 6 年 ( 華文市場最頂尖的網路行銷公司 )• 網站企劃顧問 , 專案總監 , 客戶服務總監 , 技術總監

– 多寶格行銷 2 年 ( 台灣最早的網路廣告公司 )• 行銷企畫部經理、知識研究部經理

– 台灣科技大學工商設計系兼任講師 5 年– 凌群電腦 4 年

• 軟體工程師、專案經理、產品經理


Richard 近幾年部分專案工研院英文網站改版天下雜誌英文網站改版NEXCOM 英文網站改版信義房屋網站改版 / 工研院網站中文改版臺灣證券交易所網站改版 / 證券櫃檯買賣中心網站改版 / 臺灣高鐵網站建置 / 光寶科技企業網站改版 / 保德信投信 (Prudential) 企業網站改版 NISSAN 企業網站年度營運及網站會員行銷 - ”NISSAN 你上了嗎？” 網路行銷活動

泛亞電信企業網站改版 / 泛亞電信 EC 網站建置 /泛亞電信網路客服網站建置 / 泛亞電信 EIP 網站建置 / 電子報系統導入 / 網站營運分析

金紅葉經銷商電子商務網站、金紅葉 Airforce 員工入口網站建置 - 金紅葉 GHY 為中國大陸生活用紙市佔率第一製造商，總部位於大陸蘇州

中華電信 HiB2B 網站建置HSBC 網站改版 / HSBC 理財試算軟體

2007

2006

20042003

2005

2002

2001

20082007 年金手指網路獎年度大獎 - 最佳網站

2005 e 天下 e 時代行銷王第三名及最佳視覺設計

2003 泛亞電信網路客服 , 上線半年創造 ROI 100% 績效2003 入圍經濟部商業司 E21金網獎決選 / 入圍金手指獎EC 類


成千上萬的公司提供「真」網站設計

只有一家提供「偽」網站設計- 悠識數位 UserXper


悠識數位 (UserXper) 的服務項目

Axure RP -The best rapid prototyping tool

SoftwareSoftware

Website planning and UCD training

TrainingTraining

Website Planning & Usability Testing

Planning & ConsultingPlanning & Consulting

以「網站使用者經驗」為核心的三項服務– 網站企劃專案 / Axure RP 軟體 / 網站企劃教育訓練


天下雜誌英文網站改版 NEXCOM 全球網站改版

工研院英文網站改版


網站架構 /流程圖 / 線框圖

HTML 格式 prototype體驗原型 / 互動設計

Word 格式規格文件


我們的客戶• 台灣

– 電信 / 軟體業 : 趨勢科技 , 華寶通訊– 網站 : Yahoo, 巴哈姆特 , 104人力銀行– 金融 : 玉山銀行– 政府法人機構 : 工研院 , NII – 網路行銷 : 知世網絡 / 安捷達顧問 / 米蘭數位 / 網路基因 / 富爾特 / 不來梅 / 生命樹創意 / 摩奇 e21創意 / 多奇數位 / 喬立達數位媒體 / 阿物國際…

• 大陸– iResearch, 微軟亞洲研究院 , 百度 , 上海征途 – 試用客戶：騰訊 , 網易 , 阿里巴巴 , 淘寶網 , 當當網 , 支付寶 , Ma

pbar, 金蝶軟件…


去年我們去深圳參展…• User Friendly 2008大會在深圳。過去幾屆的大會在北京，上海，杭州，北京。

• UPA : Usability Professional Association 可用性專業人士協會• 誰來參加這個研討會 ?

– 大陸互聯網企業： Google, 阿里巴巴，騰訊，百度，網易，新浪 ..– 知名國際品牌：微軟， HP ， Nokia ， HSBC…– 軟體公司：群碩軟件，金蝶軟件 ..– 產品製造商：華為，海爾， TCL ，步步高 – 軟體商： Autodesk..– UX相關領域公司： HFI ，唐碩，伊薩爾…– 約 300-400 人

• 誰來參展 ?– HP, TOBII, Smart Eye, Noldus, Hyperlink, 唐碩 , 悠識 (Axure)

http://www.upachina.org/userfriendly2004/index.htm

http://www.upachina.org/userfriendly2005/index.htm

http://www.upachina.org/userfriendly2006/default.htm

http://www.upachina.org/userfriendly2007/default.htm


我們的網站企劃流程Strategy策略規劃

Stakeholder InterviewUnderstand Business GoalUnderstand Marketing StrategyWebsite ResearchWebsite Traffic Analysis

Strategyplanning

phase

Scope需求範疇

•----------- •-----------•-----------•-----------•-----------

Requirement Definition- Content Requirement- Function RequirementSpecificationReview and Verification

RequirementDefinition Phase

Skeleton介面設計

Structure架構定義

PrototypeDesign Phase

Information ArchitectureInteraction DesignInterface DesignNavigation DesignInformation Design

網頁設計視覺設計

系統開發ImplementationPhase

Visual & PageDesign Phase

Card Sorting

Mindmap

Mental Model

Refine Requirements

Find Out What OtherPeople Say

Set TechnologyRequirements Get Proposals

Find Out High-LevelInformation

Find Vendors

Get Input from Peoplewithin Company

Research CorporateNeeds

UnderstandExistingProcess

Determine theROI

Set Requirements

Set FeatureRequirements

Set ReportRequirements

Set DataStorage

Requirements

Set SecurityRequirements

Set IntegrationRequirements

Solicit End-User Input for

Features

Get Buy-Infrom KeyPlayers

Get Buy-Infrom IT

DepartmentFind Vendors

Write Requestsfor Proposals

ReadProposals

Get Input fromOther

Customers

Read VendorMarketingMaterials

DistrustMarketingMaterial

Read ReviewsAttend

Conferences

Explore Web-Based

Solutions

ExploreWirelessSolutions

RefineRequirements

Based onResearch

Research the ProductsResearch the Needs

(Improved)InteractiveDiagram

Super Demo

Product Tour

BusinessSolutions

White PaperDownload

(Improved)Product

Module Page

eBusiness IQTest

Advisor ToolsWizard (future

version)

Partner ProfilesCyber

SeminarsRegistration

CyberSeminars

PackageSolutions

Descriptions

IndustrySolutions

Descriptions

Product LineDescriptions

See HowComponents Relate to

One Another

Customer Listby Product or

Industry

ProductConfigurators


Refine Requirements

Find Out What OtherPeople Say

Set TechnologyRequirements Get Proposals

Find Out High-LevelInformation

Find Vendors

Get Input from Peoplewithin Company

Research CorporateNeeds

UnderstandExistingProcess

Determine theROI

Set Requirements

Set FeatureRequirements

Set ReportRequirements

Set DataStorage

Requirements

Set SecurityRequirements

Set IntegrationRequirements

Solicit End-User Input for

Features

Get Buy-Infrom KeyPlayers

Get Buy-Infrom IT

DepartmentFind Vendors

Write Requestsfor Proposals

ReadProposals

Get Input fromOther

Customers

Read VendorMarketingMaterials

DistrustMarketingMaterial

Read ReviewsAttend

Conferences

Explore Web-Based

Solutions

ExploreWirelessSolutions

RefineRequirements

Based onResearch

Research the ProductsResearch the Needs

(Improved)InteractiveDiagram

Super Demo

Product Tour

BusinessSolutions

White PaperDownload

(Improved)Product

Module Page

eBusiness IQTest

Advisor ToolsWizard (future

version)

Partner ProfilesCyber

SeminarsRegistration

CyberSeminars

PackageSolutions

Descriptions

IndustrySolutions

Descriptions

Product LineDescriptions

See HowComponents Relate to

One Another

Customer Listby Product or

Industry



User Behavior

Content Auditing

Information Architecture

Stakeholder interview

WireframeHTML PrototypeSpecification

Traffic Analysis


「偽」設計重要嗎 ?


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

借助「偽裝」模擬，得以低成本 / 低時間來確認顧客需求！並創造良好的體驗！


Prototype 重要嗎 ?

老闆

你畫的什麼東西？

提 2-3款網頁設計來瞧瞧吧 !

網站企劃

我只會 PowerPoint ，我不太會做 H

TML


工程師

不要叫我做 html prototype ，那不是我的事情，而且那等於要開發兩次

耶！

網頁設計師

HTML prototype? 啥 ?

我設計的東西叫做網頁

Prototype 重要嗎 ?


Benefit of Prototyping

Cost of Prototyping >

我幹嘛要花這個錢跟時間呢？老闆


High Fidelity

Prototype

Low FidelityPrototype

(Sketch手繪草稿 ) =

在網站企劃與設計的工作中

High Fidelity

Prototype

Low FidelityPrototype <

設計的重要性

實作的重要性


Website High Fidelity Prototype 耗時費工

Logo


既然如此，什麼時候 Website Design 開始流行起 Prototyping呢？


Simunication (Web-based prototyping service)


Lucid Spec (Elegance Tech) – Windows AP


Balsmiq Mockups


OmniGrafflePencil Project


廣義 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


Website Prototype 的應用•實現網站資訊架構•實現網頁介面與動線•實現網頁資訊設計 (partial)•實現網站功能 (partial)

• 提早體驗，驗證stakeholder需求

• 提早測試，驗證 user需求及usability

• 管理變動需求，控制 Scope/Spec ，降低修改風險與開發時間，求得更好的使用者經驗


看看一些Website Prototype


示範模組化的Website Prototypingby Axure RP


High Fidelity Prototype 的缺點• 客戶 (老闆 )嫌醜• 客戶 (老闆 )要求更細緻的介面設計• 客戶 (老闆 )要求更多資訊 /互動介面• Prototype無法提供最終的使用者經

驗• 工程師嫌太難開發• 網站企劃無法撇開責任


謝謝！

請上網搜尋 “網站企劃”或” Axure”