网页企划与评估.ppt

網頁企劃與評估 如何做一個專案企劃者 小測驗 還記得這個網頁嗎 tw demo ladder 9grade main index htm做這樣一個網站 需要哪些人力 請列出來 Planning Design Development Publishing Maintenance 網站企畫環節 1 網站企畫與製作流程 1 企畫須知網頁架構圖形製作程式製作建立文字內容建立多媒體資料網站管理網站行銷 企畫須知 網站架構等同於行銷活動 人力 經費 與消費群市場與商品優勢 網站分析推動企畫 網頁架構 網站架構圖符合企畫面的事務考慮程式網頁的操作過程考慮使用者操作習慣與美編 程式討論可行性修正企畫案並訂出時程表 圖形製作 參考相似網站收集必要素材統一網頁風格配合程式調整 程式製作 可依企劃獨立製作與美編部分同時進行配合美編修正網頁隨時協調更改網頁 其他 建立文字資料建立多媒體資料網站管理網站行銷 網站企畫環節 2 網頁企劃與製作流程 2 定義 建構 設計 建構 執行 主題分析 定義 使用者分析競爭市場分析策略內容開發工具與科技時程安排 使用者分析 DefineyourpurposeDefineyourtargetaudienceGaininputfrompotentialusersonthecontentofyoursiteDefineyouraudience userprofile 競爭市場分析 FindoutwhoyourcompetitorsareRatecompetitors sitesExamineothermediapresentationsofyoursubjectmatter 策略 Definethemessageyouwanttoconvey Decidehowyouwillpersuadeyouraudiencetoacceptyourmessage Selectatone Identifythedepthofinformationorthelevelofdetailthatyouwilloffer Selectavisualandlanguagepresentationapproachthatwillhelpyoumeetyourgoalseffectively Plansitefeaturesthatwillhelpyoumeetyourgoals Identifyyourcapabilitiesandhowtheycanbeusedtomeetyourgoals 內容 IdentifyinformationcontentPlancontentthatutilizesWebtechnologyinuniqueandappropriatewaysDesignyoursitesothatitisaccessibletoafullrangeofusersPlantogiveuserscontentthatwillformatcorrectintheirbrowsersObtainURLsthatwillenableuserstofindyoursiteeasily 開發工具與科技 檢視下列工具的優缺點HTMLCSSFramesScriptingLanguages CGI VB etc JavaApplets 時程安排 Scheduledevelopmenttimeline 時程安排 續 PlanforaniterativedevelopmentanddesignprocessPlanbudgetAssignateamScheduleuserinvolvementAssignworktocontentprovidersandexpertsCommunicateyourprojectplanwithyourteam 領域分析 建構 視不同媒材 蒐集資訊 對不同媒材與資訊加以分類整理 針對各細目 擬定呈現內容與策略 詳列製作上所需的技巧 選擇硬體與軟體 建構 以下提供一軟硬體環境之範例 企劃目標為開發影像資料庫系統 系統開發工具作業系統 Windows2000ServerWebServer IIS5 0JavaServlet JSP Resin 2 0 1 JDK1 3 1資料庫MicrosoftAccess2000RealServer8 0 選擇硬體與軟體 續 影音處理Premiere6 0RealProducer8 0系統使用環境WebBrowser IE NetscapeCPU Intel486以上同等級CPURAM 64以上 設計流程 設計 涵蓋IdentityInformationInterfacePresentationInteractivity五部分 請參考訊息設計課程投影片 故事板底稿範例 設計 大概描述頁面長相 原型 Phototype 執行 原型是正式產品推出前 大致完成的作品 很多應用程式有所謂的Beta版 意義和原型很像 就網站言 如果你幫某系設計網站 當初步設計完成後 就要進入一連串的測試與評估 此時便是原型 在確認所有問題都修正後才正式上線 ConversionProtocol和RuntimeBehavior 是在原型建構前就應完成的步驟 前者進行平台或傳輸協定轉換 後者主要在於除錯 評估 執行 發展中評估FormativeEvaluation通常是專家評估或是小範圍調查測試推出後評估SummativeEvaluation線上回饋或大規模調查等 網站設計的宗派 AndrewChak整體哲學觀點驅使設計者尋找超出Web之外的解決方案並根據顧客的需求進行設計 AlanCooper倡導人性化和個性化的設計 Davis和Laroche提倡包容性 鼓勵將藝術 結構和內容融合進Web的設計中 JakobNielsen這位Web設計傳教士藉以參加神聖的設計巡迴佈道大會分享他的設計理念 JaredSpool與一直在尋找但始終未找到誠實人的希臘哲人Diogenes類似 JaredSpool從來沒有發現面面俱到的好網站 AndrewChak 一個設計者需要看到一個網站的所有競爭對手 競爭不只是來自另一個網站 也來自現實生活 因此 如果網站不優於現實生活的話 人們就不會使用它 Chak的三大設計原則是 快速的頁面下載直覺的導覽精緻簡約的設計 AlanCooper 一個所謂優良的設計是建立在對廣泛的人類共通性和特殊群體的個別意向的深刻理解之上 因此它可以對適當的資訊 過程和技術進行排序 從而可以使那些特殊群體達到他們的專業和個人的目的 Cooper的三大設計原則是 精簡的設計健全 快速的頁面下載無誤的除錯管理 RobertDavis PaulLaroche 真正成功的使用者介面設計是經過深思熟慮並以使用者為中心的系統或經驗設計的自然擴展 Davis Laroche設計原則是 有效 effective 和迷人 sexy 並不互相排斥 要有勇氣去重新定義所謂 酷 的含義 將成功 successful 和直覺 intuitive 這兩大因素包含進來 JakobNielsen 它在您需要考慮的幾乎所有因素方面一直都表現得很好 當您在不同的頁面上時 您知道您要做什麼 一直在改進設計 但是卻一直以使用者經驗為出發點 Jakob的三大設計原則是 精緻簡約 越少越好支援使用者任務不要阻礙使用者 JaredSpool 在設計得最好的網站上瀏覽時 網友究竟有多少時間能夠成功達到他們的目標呢 根據Spool的觀察 答案是42 根據Spool簡單而保守的推算 所有的網站都是失敗的 Spool的四項設計原則是 瞭解網站的目的瞭解使用者的目的確保所刊登的內容能達到目的確保所刊登的內容能達到目的 經驗設計 ExperienceDesign 先軀為NathanShedroof 經驗設計涵蓋從美學 互動 價值與意義 品牌 時間 動機 架構 控制 語言 回饋 資料 個人化 商務等不下數十種元素 這些元素都可能影響到設計的結果 是否能真正符合使用者的需求 因此 我們談網站或網頁的設計 從表象上看來似乎是一種藝術 視覺的設計 但如果只著眼藝術與視覺設計的表現 絕對不會是評估一個專業網站規劃及設計公司最好的角度 雖然好的網站設計需要經驗豐富的設計者 然而經驗設計中所謂的 經驗 是指 使用者 的經驗 而非網站 設計者 擁有者 的經驗 也就是說 經驗設計的精神就是 站在使用者的角度 觀點 心態來設計網站或網頁 設計前之研究課題 使用者是誰 他們在網站上可能發生的經驗是什麼 這些經驗會在何處發生 在何時發生 為什麼會發生這些經驗 當這些經驗發生時 他們會有哪些問題或想法 經驗設計之特色 網站或網頁的經驗設計有一項特色 就是使用者的一切活動 包含感觀 動作 心靈都發生在虛擬的空間中 在虛擬的空間中 建立經驗最快的方法就是模擬實體的世界 因此如何整合實體與虛擬世界中的空間與活動 彌補虛擬世界相較實體世界的不足之處 並利用虛擬世界優於實體世界之處 則是經驗設計時的最大挑戰 經驗設計七大元素 品牌資產 brandasset 資訊架構 informationarchitecture 視覺影像 visual 文字風格 editorial 聽覺聲音 sound 動線規劃 structural 網頁技術 technology 品牌資產 企業識別 CI VI 企業文化 企業精神 廣告行銷等資產 是決定網頁設計的基礎 例如網頁所採用的顏色 基調 技術 圖片 圖示 文字風格 資訊內容等等 都應視企業的品牌為設計的依歸 尤其擁有豐富品牌資產的企業 在塑造數位世界的品牌形象時 往往比實體世界更需要斟酌考量 資訊架構 內容架構是最接近網站源頭的元素 所謂源頭是指網站規劃階段包含網站設立的目的與必須達成目標 網站的內容其實是根據這些條件而產生的 產生之後如何以最適合的方式分類 群組 深深地影響後來的瀏覽介面設計與視覺的呈現 因此每家公司都會有一套Approach 運用有系統性思考與檢驗方式來建立網站的骨架 之後的文字影像內容就像網站的皮肉一樣 能以最美觀的姿態出現在它們應該出現的地方 並且被使用者以最快速度找到 視覺影像 圖片 影像 圖示 動畫 底圖背景 版面規劃等是網頁設計的靈魂 尤其在強調眼球數 Eyeballs 的網路媒體上 視覺的展現一直是企業 網路使用者與媒體評斷網頁設計優劣與否的第一道關卡 然而受到網路傳輸速度的限制 設計網頁不像平面那樣擁有要求超高解析品質的權利 但也能看出一個設計者的功力 視覺影像的元素通常被主觀影響 在經驗設計的精神裡 一切都應該回歸到使用者的立場 最大的判斷依據是他們連線的速度與上網的目的 文字風格 設計一篇網頁或構思一則網路廣告時 小從一個按鈕的命名 大到一整篇公司簡介 都必須靠專業的文案人員來處理 我們稱之為WebWriter 雖然圖片可以抓住網友的眼 文字卻能抓住他們的心 最基本的要求 WebWriter應該懂得善加命名網頁的Title 懂得善加命名圖檔名稱 懂得利用動畫在Loading時的空檔傳達一些有用的訊息 Webwriter要懂得掌握網站的精神 以符合網站精神的語體與文字風格與使用者溝通網站的品牌與個性 聽覺聲音 網頁與平面設計的最大不同 在於網頁是一個展現文字 圖像 影片與聲音等多媒體特色的表現空間 寬頻時代的來臨 越來越多網站都加入了聲音的元素作為提昇與使用者溝通的媒介 然而聲音元素的應用牽涉到檔案格式 長度 品質 合法性與必要性 好的聲音效果能為精采的網頁設計加分 當然在使用時必須考量使用者的頻寬及電腦設備 是否造成不必要的傳輸負擔 是否因為使用者電腦設備的不足而反而變成失之交臂的創意 動線規劃 網站的動線規劃不如視覺 文字 品牌 內容 是顯性的元素 他通常不被看見 卻能夠被使用者清楚的感受 動線規劃可從使用者在網站上從事互動性的活動時被檢視 如果你希望網友加入會員或訂閱電子報 動線的規劃明顯的影響他們的結果是否成功 所謂的成功不只完成與否 同時也包括順暢與否 換言之 他們花費多久的時間完成一項活動 此外 動線的設計也包括不同使用者在網站中進入的途徑是否被清楚的標示 友善的引導以及體貼的協助 網頁技術 前面說過網頁是一種多媒體的表現空間 因此在網站或網頁設計中如何以多媒體製作技術來呈現需要的效果或目的 例如動態DHTML Flash JavaScript RichMedia 3D StreamingMedia VirtualReality 等等 廣泛的被運用在瀏覽系統 介面設計 前導頁面 網路廣告 網路行銷活動 商品展示介紹 下載等目的 這個部分經常會牽涉到兩部分的專業 一部份是與前端的頁面設計者 一部份是後端的資料庫設計者 而這正是經驗設計中最困難的部分 因為兩方專業人員在設計時側重的層面 所使用的設計工具 以及溝通的語言有相當大的差異 因此在分頭進行到需要整合的階段 就會產生許多問題與困難 例如進度落後與效果不良 因此 了解經驗設計精髓的公司懂得如何整合這兩部分專業的人 以最有效率的方式溝通 當然 更重要的是 他們也會懂得如何運用 控制這些技術 以最優異的速度表現 呈現最精采的頁面 帶給網友最佳使用經驗 四大經驗 感觀經驗 lookandfeel 行進經驗 entryandmove 活動經驗 actionandinteraction 心靈經驗 mindandspirit 感觀經驗 使用者在接觸到網頁的瞬間 以他的眼睛 耳朵 手指感受一切 感觀經驗著重於七項元素中的品牌 視覺 聽覺 文字 內容 因為這時候使用者對於網站還停留在觀察階段 以所見到網頁來決定下一步行進的目標 或審視與自己上網目的相符的標的物 有些使用者會因為視覺設計決定想不想留下來繼續瀏覽 也會看網站提供的內容而選擇繼續參觀或離開 行進經驗 使用者的感觀經驗側重於觀察 審視 形成印象 決定最高行動原則 而行進經驗側重於決策行動的目的與方向 例如決定觀看進一步資訊 參與何種活動 由何處進入 而這樣的行進過程可能會經過兩個或兩個以上的鏈結 才能抵達目的地 因此行進經驗側重視覺 文字 動線與技術等元素 在行進經驗的設計上必須利用網路互聯的鏈結特性 讓使用者的行進經驗更順暢 具體的說 就是進入直接 進行容易 活動經驗 使用者在網站上的活動類型相當多樣 活動經驗與行進經驗的差別在於停留的時間 以旁觀者的角度看來 行進與活動都是使用者的動作 但行進經驗是經由快速的判斷與決策抵達目的地 而活動經驗則以完成一項目的或任務 由於完成一項目的或任務必須經過多次的決策 行動 回應 決策的過程 後者所花費的時間通常較前者長 活動經驗所側重的元素為文字 動線 技術 為了節省活動所花費的時間 因此在視覺影像上的元素在此時會儘可能簡化以求速度品質的提昇 心靈經驗 行進經驗與活動經驗因為可以透過觀察使用者在使用網站所設計的動線或功能時 是否成功完成 過程是否順暢無礙而了解 感觀經驗也還可以詢問使用者對於文字 內容 視覺的辨識與了解程度做出評斷 心靈經驗相較於其他經驗是最不容易被觀察與描述的 使用者在歷經感觀的審視 行進的判斷 活動的執行種種經驗後 到離線或離開網頁的時刻 會產生一個整體網路經驗的評斷 我們稱之為心靈經驗 而這項經驗是必須被發掘的 因為它可能深藏在使用者的心裡 短暫地閃過使用者的腦海 如果不加以發掘 除非使用者願意主動分享 否則不容易留下實際的結果 因此許多網站在設計工作流程中 都會加入一項重要的流程 可用度測試 usabilitytest 這項測試的目觀察使用者的使用情形 讓他們能夠快速正確地完成他們上網的目的 網路可用性 根據網頁設計大師JakobNielsen 2001 的定義 可用性 usability 是衡量使用者和網站 應用軟體等設備互動經驗的指標 若以水龍頭為例 一個水龍頭的可用性包括使用者是否能立刻找出水龍頭的使用方式 是否能輕易開啟它 系統的優劣兩大要素 實用性 utility 該系統是否能提供消費者需要的功能 若提供的功能和消費者的需求無關或者無法解決主要的問題 那麼不管它好不好用 都是一個差勁的系統 可用性 usability 使用者是否會用該系統 能否有效地操作該系統 即便該系統所言不虛 提供令人滿意的功能 但若使用者想不出怎麼操作 依舊是差勁的系統 可用性五大特色 易學習使用者面對一個完全陌生的系統時 可以在多短的時間內學會基本操作 記憶力使用者以前碰過這類系統 日後再接觸時 是否對系統有足夠的記憶力 幫助他有效完成任務 還是每次都得從頭學習一次 可用性五大特色 續 出錯頻率與嚴重性使用者操作錯誤的頻率 以及出錯的嚴重性 例如將水泥廠付之一炬的嚴重性遠甚於記錯高爾夫球員的桿數 使用的效率一旦使用者學會操作後 可在多短時間內完成任務 主觀滿意度使用者對系統用後的滿意度 注意事項 所有系統的使用性都具備上述五項特質 因此在設計產品時必須將上述五項特質納入考慮 有時候 一些特質會重於其他特質 以網路為例 易學習是最重要的一項 因為用戶鮮少在一個網站停留太久 此外 主觀滿意度也相當重要 因為用戶若覺得某個網站不夠好 只要輕鬆在滑鼠點一下 就可進入其他網站 相較之下 出錯頻率就比較輕微 但商務網站仍得小心 確保客戶所訂購的產品 付款的信用卡號碼 郵寄地址正確無誤 企業內部網路的設計必須專注於系統的使用效率 因為同一個使用者免不了會重複使用它 企業對外網路的設計必須重視降低出錯率 因為常有大筆金額的交易 出錯不得 網站可用性問題 點選連結很簡單 但要知道哪些連結值得點可不容易 網頁上的說明常常不清不楚的 讓網友猶如墜入五里迷霧 不知道應該點哪裡才對 現在網路上互動的技術五花八門 除了傳統藍色的超文件連結標示之外 還有Java以及動態HTML 往往讓使用者更加頭大 網路上的導覽做得很糟糕 使用者結果會迷失在浩瀚的網路世界裡 找不到自己想要的網站 網站可用性問題 續 不論是平面或是舊的媒體格式 網頁內容都可以針對這些需求進行最佳化的安排 不過幾乎沒有什麼網頁內容能夠滿足上網者在線上閱讀最適化的需求 電子商務交易流程不容易讓人了解 而且也不容易完成 許多網頁雖然做得相當亮麗 但是金玉其外敗絮其內 使用者反而找不到需要的內容 也沒有想要的交易項目 網友的整體使用體驗相當不理想 儘管某些個別項目還算過得去 但是緩慢的下載過程往往令人退避三舍 使用者測試 測試的對象必須具有代表性 能夠反映出你目標觀眾的看法 除非是企業內部網路 你才可以同儕作為測試對象 否則不要用你的同事或是任何了解這項專案的人 不過就算是企業內部網路 也應該避免以專案團隊的成員作為測試對象 使用者測試 續 測試的時候 不要只是玩一玩網站介面而已 使用者應該實際執行某些工作 網站上到處點一點當然很簡單 真正的考驗在於網站是否能夠協助使用者解決某些特定的問題 所測試的工作也必須具有代表性 使用者測試 續 避免出面干涉 讓測試者自行感受 並且暢所欲言 測試的目的並非展現你有多聰明 也不是要協助使用者加速達成任務 而是希望從使用者解決問題的實際體驗當中獲得寶貴的意見 使用者從家裡或是辦公室造訪你的網站時 可沒有專家坐在旁邊 測試者必須自行體驗才行 提昇可用性的方法 不管你覺得舊的網站有多爛 在重新設計之前 可以針對舊版使用者做個小型的意見調查 說不定