网页企划与评估.ppt

《网页企划与评估.ppt》由会员分享，可在线阅读，更多相关《网页企划与评估.ppt（63页珍藏版）》请在三一办公上搜索。

1、網頁企劃與評估,如何做一個專案企劃者,2,小測驗,還記得這個網頁嗎？http:/.tw/demo/ladder/9grade/main/index.htm做這樣一個網站，需要哪些人力？請列出來。,3,Planning,Design,Development,Publishing,Maintenance,網站企畫環節（1）,4,網站企畫與製作流程（1）,企畫須知網頁架構圖形製作程式製作建立文字內容建立多媒體資料網站管理網站行銷,5,企畫須知,網站架構等同於行銷活動、人力、經費、與消費群市場與商品優勢：網站分析推動企畫,6,網頁架構,網站架構圖符合企畫面的事務考慮程式網頁的操作過程考慮使用者操作習慣

2、與美編、程式討論可行性修正企畫案並訂出時程表,7,圖形製作,參考相似網站收集必要素材統一網頁風格配合程式調整,8,程式製作,可依企劃獨立製作與美編部分同時進行配合美編修正網頁隨時協調更改網頁,9,其他,建立文字資料建立多媒體資料網站管理網站行銷,10,網站企畫環節（2）,11,網頁企劃與製作流程（2）,定義,建構,設計,建構,執行,12,主題分析（定義）,使用者分析競爭市場分析策略內容開發工具與科技時程安排,13,使用者分析,Define your purposeDefine your target audienceGain input from potential users on the

3、content of your siteDefine your audience/user profile,14,競爭市場分析,Find out who your competitors areRate competitors sitesExamine other media presentations of your subject matter,15,策略,Define the message you want to convey.Decide how you will persuade your audience to accept your message.Select a tone.

4、Identify the depth of information or the level of detail that you will offer.Select a visual and language presentation approach that will help you meet your goals effectively.Plan site features that will help you meet your goals.Identify your capabilities and how they can be used to meet your goals.

5、,16,內容,Identify information contentPlan content that utilizes Web technology in unique and appropriate waysDesign your site so that it is accessible to a full range of usersPlan to give users content that will format correct in their browsersObtain URLs that will enable users to find your site easil

6、y,17,開發工具與科技,檢視下列工具的優缺點HTMLCSSFramesScripting Languages(CGI,VB,etc.)Java Applets,18,時程安排,Schedule development timeline,19,時程安排（續）,Plan for an iterative development and design processPlan budgetAssign a teamSchedule user involvementAssign work to content providers and expertsCommunicate your project

7、plan with your team,20,領域分析（建構）,視不同媒材，蒐集資訊。對不同媒材與資訊加以分類整理。針對各細目，擬定呈現內容與策略。詳列製作上所需的技巧。,21,選擇硬體與軟體（建構）,以下提供一軟硬體環境之範例，企劃目標為開發影像資料庫系統。系統開發工具作業系統-Windows 2000 ServerWeb Server-IIS5.0Java Servlet&JSP-Resin-2.0.1&JDK1.3.1資料庫Microsoft Access 2000Real Server 8.0,22,選擇硬體與軟體（續）,影音處理Premiere 6.0Real Producer 8.

8、0系統使用環境Web Browser-IE,NetscapeCPU-Intel 486以上同等級CPURAM-64以上,23,設計流程（設計）,涵蓋IdentityInformationInterfacePresentationInteractivity五部分，請參考訊息設計課程投影片。,24,故事板底稿範例（設計）,大概描述頁面長相,25,原型（Phototype）（執行）,原型是正式產品推出前，大致完成的作品，很多應用程式有所謂的Beta版，意義和原型很像，就網站言，如果你幫某系設計網站，當初步設計完成後，就要進入一連串的測試與評估，此時便是原型，在確認所有問題都修正後才正式上線。Conv

9、ersion Protocol和Runtime Behavior，是在原型建構前就應完成的步驟，前者進行平台或傳輸協定轉換，後者主要在於除錯。,26,評估（執行）,發展中評估Formative Evaluation通常是專家評估或是小範圍調查測試推出後評估Summative Evaluation線上回饋或大規模調查等,27,網站設計的宗派,Andrew Chak整體哲學觀點驅使設計者尋找超出Web之外的解決方案並根據顧客的需求進行設計。Alan Cooper倡導人性化和個性化的設計。Davis和Laroche提倡包容性，鼓勵將藝術、結構和內容融合進Web的設計中。Jakob Nielsen這位

10、Web設計傳教士藉以參加神聖的設計巡迴佈道大會分享他的設計理念。Jared Spool與一直在尋找但始終未找到誠實人的希臘哲人Diogenes類似，Jared Spool從來沒有發現面面俱到的好網站。,28,Andrew Chak,一個設計者需要看到一個網站的所有競爭對手。競爭不只是來自另一個網站，也來自現實生活。因此，如果網站不優於現實生活的話，人們就不會使用它。Chak的三大設計原則是：快速的頁面下載直覺的導覽精緻簡約的設計。,29,Alan Cooper,一個所謂優良的設計是建立在對廣泛的人類共通性和特殊群體的個別意向的深刻理解之上，因此它可以對適當的資訊、過程和技術進行排序，從而可以使

11、那些特殊群體達到他們的專業和個人的目的。Cooper的三大設計原則是：精簡的設計健全、快速的頁面下載無誤的除錯管理,30,Robert Davis&Paul Laroche,真正成功的使用者介面設計是經過深思熟慮並以使用者為中心的系統或經驗設計的自然擴展。Davis、Laroche設計原則是：有效（effective）和迷人（sexy）並不互相排斥。要有勇氣去重新定義所謂 酷 的含義，將成功（successful）和直覺（intuitive）這兩大因素包含進來。,31,Jakob Nielsen,它在您需要考慮的幾乎所有因素方面一直都表現得很好。當您在不同的頁面上時，您知道您要做什麼。一直在改

12、進設計，但是卻一直以使用者經驗為出發點。Jakob的三大設計原則是：精緻簡約，越少越好 支援使用者任務 不要阻礙使用者,32,Jared Spool,在設計得最好的網站上瀏覽時，網友究竟有多少時間能夠成功達到他們的目標呢？根據 Spool 的觀察，答案是42。根據Spool簡單而保守的推算，所有的網站都是失敗的。Spool的四項設計原則是：瞭解網站的目的 瞭解使用者的目的 確保所刊登的內容能達到目的確保所刊登的內容能達到目的,33,經驗設計（Experience Design）,先軀為Nathan Shedroof。經驗設計涵蓋從美學、互動、價值與意義、品牌、時間、動機、架構、控制、語言、回饋

13、、資料、個人化、商務等不下數十種元素，這些元素都可能影響到設計的結果，是否能真正符合使用者的需求。因此，我們談網站或網頁的設計，從表象上看來似乎是一種藝術、視覺的設計，但如果只著眼藝術與視覺設計的表現，絕對不會是評估一個專業網站規劃及設計公司最好的角度。雖然好的網站設計需要經驗豐富的設計者，然而經驗設計中所謂的經驗，是指使用者的經驗，而非網站設計者、擁有者的經驗。也就是說，經驗設計的精神就是，站在使用者的角度、觀點、心態來設計網站或網頁。,34,設計前之研究課題,使用者是誰？他們在網站上可能發生的經驗是什麼？這些經驗會在何處發生？在何時發生？為什麼會發生這些經驗？當這些經驗發生時，他們會有哪些

14、問題或想法？,35,經驗設計之特色,網站或網頁的經驗設計有一項特色，就是使用者的一切活動，包含感觀、動作、心靈都發生在虛擬的空間中。在虛擬的空間中，建立經驗最快的方法就是模擬實體的世界，因此如何整合實體與虛擬世界中的空間與活動，彌補虛擬世界相較實體世界的不足之處，並利用虛擬世界優於實體世界之處，則是經驗設計時的最大挑戰。,36,經驗設計七大元素,品牌資產（brand asset）資訊架構（information architecture）視覺影像（visual）文字風格（editorial）聽覺聲音（sound）動線規劃（structural）網頁技術（technology）,37,品牌資產,

15、企業識別(CI、VI)、企業文化、企業精神、廣告行銷等資產，是決定網頁設計的基礎，例如網頁所採用的顏色、基調、技術、圖片、圖示、文字風格、資訊內容等等，都應視企業的品牌為設計的依歸。尤其擁有豐富品牌資產的企業，在塑造數位世界的品牌形象時，往往比實體世界更需要斟酌考量。,38,資訊架構,內容架構是最接近網站源頭的元素，所謂源頭是指網站規劃階段包含網站設立的目的與必須達成目標，網站的內容其實是根據這些條件而產生的，產生之後如何以最適合的方式分類、群組，深深地影響後來的瀏覽介面設計與視覺的呈現。因此每家公司都會有一套Approach，運用有系統性思考與檢驗方式來建立網站的骨架，之後的文字影像內容就像

16、網站的皮肉一樣，能以最美觀的姿態出現在它們應該出現的地方，並且被使用者以最快速度找到。,39,視覺影像,圖片、影像、圖示、動畫、底圖背景、版面規劃等是網頁設計的靈魂，尤其在強調眼球數(Eyeballs)的網路媒體上，視覺的展現一直是企業、網路使用者與媒體評斷網頁設計優劣與否的第一道關卡。然而受到網路傳輸速度的限制，設計網頁不像平面那樣擁有要求超高解析品質的權利，但也能看出一個設計者的功力。視覺影像的元素通常被主觀影響，在經驗設計的精神裡，一切都應該回歸到使用者的立場，最大的判斷依據是他們連線的速度與上網的目的。,40,文字風格,設計一篇網頁或構思一則網路廣告時，小從一個按鈕的命名，大到一整篇公

17、司簡介，都必須靠專業的文案人員來處理，我們稱之為Web Writer。雖然圖片可以抓住網友的眼，文字卻能抓住他們的心。最基本的要求，Web Writer應該懂得善加命名網頁的Title，懂得善加命名圖檔名稱，懂得利用動畫在Loading時的空檔傳達一些有用的訊息。Web writer要懂得掌握網站的精神，以符合網站精神的語體與文字風格與使用者溝通網站的品牌與個性。,41,聽覺聲音,網頁與平面設計的最大不同，在於網頁是一個展現文字、圖像、影片與聲音等多媒體特色的表現空間，寬頻時代的來臨，越來越多網站都加入了聲音的元素作為提昇與使用者溝通的媒介。然而聲音元素的應用牽涉到檔案格式、長度、品質、合法性

18、與必要性，好的聲音效果能為精采的網頁設計加分，當然在使用時必須考量使用者的頻寬及電腦設備，是否造成不必要的傳輸負擔，是否因為使用者電腦設備的不足而反而變成失之交臂的創意。,42,動線規劃,網站的動線規劃不如視覺、文字、品牌、內容，是顯性的元素，他通常不被看見，卻能夠被使用者清楚的感受。動線規劃可從使用者在網站上從事互動性的活動時被檢視。如果你希望網友加入會員或訂閱電子報，動線的規劃明顯的影響他們的結果是否成功，所謂的成功不只完成與否，同時也包括順暢與否，換言之，他們花費多久的時間完成一項活動。此外，動線的設計也包括不同使用者在網站中進入的途徑是否被清楚的標示、友善的引導以及體貼的協助。,43,

19、網頁技術,前面說過網頁是一種多媒體的表現空間，因此在網站或網頁設計中如何以多媒體製作技術來呈現需要的效果或目的，例如動態DHTML、Flash、JavaScript、Rich Media、3D、Streaming Media、Virtual Reality.等等，廣泛的被運用在瀏覽系統、介面設計、前導頁面、網路廣告、網路行銷活動、商品展示介紹、下載等目的。這個部分經常會牽涉到兩部分的專業，一部份是與前端的頁面設計者，一部份是後端的資料庫設計者。而這正是經驗設計中最困難的部分，因為兩方專業人員在設計時側重的層面、所使用的設計工具、以及溝通的語言有相當大的差異，因此在分頭進行到需要整合的階段，就會

20、產生許多問題與困難，例如進度落後與效果不良。因此，了解經驗設計精髓的公司懂得如何整合這兩部分專業的人，以最有效率的方式溝通。當然，更重要的是，他們也會懂得如何運用、控制這些技術，以最優異的速度表現，呈現最精采的頁面，帶給網友最佳使用經驗。,44,四大經驗,感觀經驗（look and feel）行進經驗（entry and move）活動經驗（action and interaction）心靈經驗（mind and spirit）,45,感觀經驗,使用者在接觸到網頁的瞬間，以他的眼睛、耳朵、手指感受一切。感觀經驗著重於七項元素中的品牌、視覺、聽覺、文字、內容，因為這時候使用者對於網站還停留在觀察

21、階段，以所見到網頁來決定下一步行進的目標，或審視與自己上網目的相符的標的物。有些使用者會因為視覺設計決定想不想留下來繼續瀏覽，也會看網站提供的內容而選擇繼續參觀或離開。,46,行進經驗,使用者的感觀經驗側重於觀察、審視、形成印象、決定最高行動原則，而行進經驗側重於決策行動的目的與方向，例如決定觀看進一步資訊、參與何種活動、由何處進入，而這樣的行進過程可能會經過兩個或兩個以上的鏈結，才能抵達目的地，因此行進經驗側重視覺、文字、動線與技術等元素。在行進經驗的設計上必須利用網路互聯的鏈結特性，讓使用者的行進經驗更順暢，具體的說，就是進入直接、進行容易。,47,活動經驗,使用者在網站上的活動類型相當多

22、樣，活動經驗與行進經驗的差別在於停留的時間。以旁觀者的角度看來，行進與活動都是使用者的動作，但行進經驗是經由快速的判斷與決策抵達目的地，而活動經驗則以完成一項目的或任務，由於完成一項目的或任務必須經過多次的決策、行動、回應、決策的過程，後者所花費的時間通常較前者長。活動經驗所側重的元素為文字、動線、技術，為了節省活動所花費的時間，因此在視覺影像上的元素在此時會儘可能簡化以求速度品質的提昇。,48,心靈經驗,行進經驗與活動經驗因為可以透過觀察使用者在使用網站所設計的動線或功能時，是否成功完成，過程是否順暢無礙而了解，感觀經驗也還可以詢問使用者對於文字、內容、視覺的辨識與了解程度做出評斷，心靈經驗

23、相較於其他經驗是最不容易被觀察與描述的。使用者在歷經感觀的審視、行進的判斷、活動的執行種種經驗後，到離線或離開網頁的時刻，會產生一個整體網路經驗的評斷，我們稱之為心靈經驗，而這項經驗是必須被發掘的，因為它可能深藏在使用者的心裡、短暫地閃過使用者的腦海，如果不加以發掘，除非使用者願意主動分享，否則不容易留下實際的結果。因此許多網站在設計工作流程中，都會加入一項重要的流程：可用度測試（usability test），這項測試的目觀察使用者的使用情形，讓他們能夠快速正確地完成他們上網的目的。,49,網路可用性,根據網頁設計大師 Jakob Nielsen（2001）的定義，可用性（usability

24、）是衡量使用者和網站、應用軟體等設備互動經驗的指標。若以水龍頭為例，一個水龍頭的可用性包括使用者是否能立刻找出水龍頭的使用方式、是否能輕易開啟它？,50,系統的優劣兩大要素,實用性（utility）：該系統是否能提供消費者需要的功能？若提供的功能和消費者的需求無關或者無法解決主要的問題，那麼不管它好不好用，都是一個差勁的系統。可用性（usability）：使用者是否會用該系統，能否有效地操作該系統？即便該系統所言不虛，提供令人滿意的功能，但若使用者想不出怎麼操作，依舊是差勁的系統。,51,可用性五大特色,易學習使用者面對一個完全陌生的系統時，可以在多短的時間內學會基本操作？記憶力使用者以前碰過

25、這類系統，日後再接觸時，是否對系統有足夠的記憶力，幫助他有效完成任務？還是每次都得從頭學習一次？,52,可用性五大特色（續）,出錯頻率與嚴重性使用者操作錯誤的頻率？以及出錯的嚴重性？（例如將水泥廠付之一炬的嚴重性遠甚於記錯高爾夫球員的桿數）使用的效率一旦使用者學會操作後，可在多短時間內完成任務？主觀滿意度使用者對系統用後的滿意度？,53,注意事項,所有系統的使用性都具備上述五項特質，因此在設計產品時必須將上述五項特質納入考慮。有時候，一些特質會重於其他特質，以網路為例，易學習是最重要的一項，因為用戶鮮少在一個網站停留太久。此外，主觀滿意度也相當重要，因為用戶若覺得某個網站不夠好，只要輕鬆在滑鼠

26、點一下，就可進入其他網站。相較之下，出錯頻率就比較輕微，但商務網站仍得小心，確保客戶所訂購的產品、付款的信用卡號碼、郵寄地址正確無誤。企業內部網路的設計必須專注於系統的使用效率，因為同一個使用者免不了會重複使用它。企業對外網路的設計必須重視降低出錯率，因為常有大筆金額的交易，出錯不得。,54,網站可用性問題,點選連結很簡單，但要知道哪些連結值得點可不容易。網頁上的說明常常不清不楚的，讓網友猶如墜入五里迷霧，不知道應該點哪裡才對。現在網路上互動的技術五花八門，除了傳統藍色的超文件連結標示之外，還有Java以及動態HTML，往往讓使用者更加頭大。網路上的導覽做得很糟糕，使用者結果會迷失在浩瀚的網路

27、世界裡，找不到自己想要的網站。,55,網站可用性問題（續）,不論是平面或是舊的媒體格式，網頁內容都可以針對這些需求進行最佳化的安排，不過幾乎沒有什麼網頁內容能夠滿足上網者在線上閱讀最適化的需求。電子商務交易流程不容易讓人了解，而且也不容易完成。許多網頁雖然做得相當亮麗，但是金玉其外敗絮其內，使用者反而找不到需要的內容，也沒有想要的交易項目。網友的整體使用體驗相當不理想，儘管某些個別項目還算過得去，但是緩慢的下載過程往往令人退避三舍。,56,使用者測試,測試的對象必須具有代表性，能夠反映出你目標觀眾的看法。除非是企業內部網路，你才可以同儕作為測試對象，否則不要用你的同事或是任何了解這項專案的人。

28、不過就算是企業內部網路，也應該避免以專案團隊的成員作為測試對象。,57,使用者測試（續）,測試的時候，不要只是玩一玩網站介面而已，使用者應該實際執行某些工作：網站上到處點一點當然很簡單，真正的考驗在於網站是否能夠協助使用者解決某些特定的問題。所測試的工作也必須具有代表性。,58,使用者測試（續）,避免出面干涉，讓測試者自行感受，並且暢所欲言。測試的目的並非展現你有多聰明，也不是要協助使用者加速達成任務，而是希望從使用者解決問題的實際體驗當中獲得寶貴的意見。使用者從家裡或是辦公室造訪你的網站時，可沒有專家坐在旁邊。測試者必須自行體驗才行。,59,提昇可用性的方法,不管你覺得舊的網站有多爛，在重新

29、設計之前，可以針對舊版使用者做個小型的意見調查，說不定舊版網站裡還是有些值得保留的特色。調查當中也能夠看出來以前讓使用者感到窒礙難行的問題所在，以及使用者對於網站錯誤的看法，對此有通盤了解之後，再重新設計也會比較容易。針對競爭對手的網站進行比較性的使用者意見調查。別的公司為了打造網站耗費鉅資，透過使用者意見調查，你可以效仿他們的長處，並且避免犯和他們同樣的錯誤。,60,提昇可用性的方法（續）,針對使用者進行實際的調查field study，徹底了解他們工作環境的狀況。這個步驟對於專門支援員工或是企業夥伴的企業內部網站或是企業間網站而言尤其重要。你會發現到調查結果和經理人片面告訴你的往往總是會有

30、些出入。不相信嗎？想想呆伯特吧。建立幾個不同的設計模型，為了在最短的時間之內測試各種可能性，這些設計應該交由不同的團隊來同步進行。並且針對幾位使用者進行調查，從中找出最適合你的新設計。,61,提昇可用性的方法（續）,挑出最適合的設計之後，即可進一步開發，先以HTML做出幾個雛型頁面，即可邀請更多的使用者來進行測試，找出這個設計的美中不足之處。如果預算許可的話，反覆多試幾次：修補從測試當中發現的問題，進一步開發原型之後再進行測試。你每作一次，網站平均的可用性就可以增加38。追求盡善盡美的過程是永無止盡的：通常在達到完美的使用者介面之前，就已燒光了所有的預算。,62,提昇可用性的方法（續）,當網站

31、建構得差不多，已經具備關鍵頁面以及導航元件時，可以再做一次最後的測試，藉以調整商標、找出錯誤的訊息、以及調整互動功能的細項問題。雖然在最後的測試階段已經無法針對最基本的問題進行改變，但是依然可以大幅提升網站的可用性。推出你剛設計好的網站。與其辦個慶功派對，你不如花點心思開始規劃下一次改造的設計。蒐集使用者意見，分析記錄檔，並且蒐集其他新設計可用性有關的資料。請記住，網站永遠有改善的空間，就算是新的設計也不過是下個設計的原型罷了。,63,誌謝,本次投影片自第二十六張以下之內容，由台灣學校網（http:/www.taiwanschoolnet.org/）專案經理蔡國憲先生協助準備，特此誌謝。本節課資訊來自不同網站，不過網址多已變更，未變更的網址請參考本次課程介紹網頁。,