提升高校官網用戶體驗的參與式設計研究

季燁　吳劍鋒　錢美竹

關鍵詞：高校官網 參與式設計 用戶體驗 網站設計 設計研究

中圖分類號：TP393.092 文獻標識碼：A

文章編號：1003-0069（2022）01-0038-03

引言

隨著信息時代的發展，高校官網逐漸成為對內信息交流，對外展示學校能力與特色的重要窗口。但有些高校官網建設存在著布局不合理、交互不流暢、色彩不統一等諸多體驗問題，給用戶使用帶來極大不便。針對這個問題，現有研究指出高校官網建設應堅持師生的主體性，切實關注用戶訪問習慣。這個問題解決的核心就是“以用戶為中心”。參與式設計正是對這一設計方法的豐富和提升。因此本文針對參與式設計進行研究，開展高校官網參與式設計實踐，總結實踐經驗，以期對官網參與式設計提出新思考。

一、參與式設計

（一）參與式設計概念：“參與式設計”的概念源于20世紀60年代的斯堪的納維亞半島的北歐民主化思潮，最初是為了貫徹民主原則，讓工人有權參與到設計工作系統的活動中。后來參與式設計從強調設計中的社會因素逐漸發展為以用戶為中心，建立在溝通、合作、分享、協調上的設計方法。在傳統的設計方法中，使用者只是作為訪問和回答的對象，而在參與式設計中，使用者從被動研究變為主動參與。使用者扮演設計師的角色，直接參與設計活動。這意味著參與式設計模糊了設計者和使用者的關系界限，使用者不僅在爭取主動權，更是在賦予產品意義[5] 。目前，已有部分學者對參與式設計的應用進行了研究。有些學者從用戶角度分析了參與式設計的方法。許曉云對兒童用戶類別進行分類，并以問卷調研獲取兒童與父母在購買兒童智能產品時的決策權重比，進行兒童

智能產品設計研究[6] 。奧萊·塞杰（Ole Sejer）等對青少年的動機和動機進行分析，提出文化歷史活動理論方法[7] 。維斯瓦夫·科佩奇（Kope W）等探討了關于老年用戶使用VR和AR等新興技術的參與式設計方案[8] 。有些學者則從不同領域探索了參與式設計的應用。杜彥基于參與理念探究人、家具、環境三者關系[9] 。蕾切爾·勒克（RachaelLuck）追溯了二十世紀中葉的建筑參與式設計的歷史，提出了對建筑參與的理解[10] 。上述的研究幫我們了解了不同用戶的參與式設計需求，豐富了參與式設計使用范圍。但是鮮少有研究在具體應用上，對參與流程的設計、設計模式的探索、參與用戶的選取以及設計過程的管理進行分析總結。

（二）高校官網功能與參與式設計優勢：高校官網作為網站設計，其用戶體驗的質量優劣取決于該網站是否能滿足用戶在使用過程中的體驗需求。官網設計應針對不同用戶，提供不同的服務功能，例如：（1）培養教育功能。高校官網使信息資源得以溝通，有利于教師與學生互動交流，以促進學生的成長與進步;（2）便利服務功能。高校官網設計應適應高校師生的生活學習習慣，服務學生，便利教師;（3）形象宣傳功能。高校借助互聯網平臺，展示學校概況、教學管理、辦學理念、科研成果、教師隊伍、校園生活等相關內容，樹立良好的對外形象。這些功能的設計需要設計師“以用戶為中心”，提升官網用戶體驗。

參與式設計在高校官網設計中優勢主要體現在以下幾個方面：

（1）從使用者角度看，師生以設計師的身份參與高校官網設計，有效提高網站的實用性;（2）以學校管理者角度而言，師生的集群智慧有利于提升官網信息傳遞的高效性、資源利用的有效性和辦學效益的全面性;（3）在設計領域角度，參與式設計為傳統高校官網設計提供一種新的方法和思路。因此本研究通過邀請某高校師生及校網站管理人員針對某綜合類大學高校官網進行設計來探索參與式設計的應用模式。

二、高校官網的參與式設計研究

（一）參與式設計流程研究：用戶參與式設計的概念模型映射和流程是設計方法研究的重點。參與式設計沒有一個固定的設計模式，和嚴格的設計規程，因此研究人員需結合具體情況，制訂相應的用戶參與式設計流程。雷迪（A Reddy）建議藥房干預系統參與式設計過程包括問題識別、解決方案生成、收斂、原型設計、初始評估、形成性評估。清華大學李嘉懿基于雙鉆設計模型，將互聯平臺的參與性設計流程分為發現（互聯平臺收集）、定義（確定優先級）、開發（原始創意，評價反饋，新創意）、交付（可行性產品測試）。甘為對用戶參與式設計概念進行研究，提出汽車人機交互用戶參與式設計方法流程為用戶分析、實地研究、數據處理、參與式設計、知識獲取、評價與優化6個步驟。綜上所述，筆者結合高校官網的特點將參與式設計實踐流程分為網站設計元素研究、需求分析、參與式設計和評價與優化。如圖1所示。首先，通過網站設計元素研究歸納出不同高校官網的設計優缺點;其次，通過需求分析總結高校官網設計要素;再次，進行參與式設計實踐，得到官網結構圖、低保真原型圖、高保真原型圖三個設計產出。最后，通過設計評價給出改進意見來進一步優化官網設計。

（二）參與對象的選擇-多方用戶的參與：高校官網在信息傳遞效率、資源利用效益和用戶滿意度等方面建設的都可歸根于用戶參與程度的高低。從用戶角度看，高校官網用戶類型可分為申請者、教師、校網站管理人員、學生、家長、校友、游客、媒體這七個類型。其中教師、學生和校網站管理人員是高校官網主要服務對象。高校官網的參與對象應有多方用戶的參與。他們的積極參與能使他們在設計中發揮關鍵作用，并且保證參與設計高校官網的方法能夠有較高的使用性和可推廣性。

（三）參與模式的設計-“從我到我們”設計新模式：設計過程采取“從我到我們”模式 ，如圖2。原模式強調參與的社交化，把參與式體驗過程產生的設計空間看成是一個社交樞紐，通過尋找每個個體的共同點，以此加強彼此聯系。而本模式是在其基礎上提出的新的模式。這個模式是指成員通過個人思考形成個人思想，通過分享、討論的方式傳遞信息以形成集體思想，并在交流過程中構建知識的過程。這個模式不僅有利于參與者信息交換，更是在構建知識和相互學習。它為參與者創造了一個相互的空間，讓他們在這個空間里面探索設計的可能性。相比于原模式，本模式更強調從“個體思想”到“集體思想”的雙向互動的過程。這兩個模式的核心都是從個人（我）體驗不斷疊加構成集體（我們）參與。

（四）設計過程的管理-真正、平等的參與決策：參與式設計過程中可設置一名組長，但是他不是作為領導者的身份存在，而是承擔解決成員糾紛、整合設計方案和推進設計流程進行的角色。弱化組長的職能以保證每一個人在參與設計時都有均等的權利。

對于部分沒有設計經驗的參與者，為了降低他們的設計難度，設計過程中可采用模板選擇的方式或者以文字的形式來表達他們的需求和愿景。它需要參與者在觀點、知識和技能上的差異保持理解和尊重，以開放的態度來對待所有人提出的意見和想法，不對他人的設計做評價。這樣的設計模式讓每個人都能真正參與決策。

三、高校官網的參與式設計實踐

（一）網站設計元素研究：本研究借助觀察法來收集用戶對官網的體驗感受，以獲取用戶更多隱形需求。首先以文獻調研和與設計學院教師討論的方式，將官網設計的主要層次分為布局、色彩、風格、交互和內容5個類別。然后邀請30名用戶（藝術專業學生16名、計算機專業學生8名、老師3名、網站管理人員3名）觀察10個能代表綜合類大學信息化建設水平的國內外高校官網，包括浙江大學、南京大學、上海交通大學、復旦大學、北京大學、中國科學技術大學、清華大學、英國曼徹斯特大學、麻省理工學院、英國倫敦大學學院，并就官網設計的5個主要層次發表看法，指出高校官網在使用過程中優缺點。

匯總優缺點，并以頻次進行排序，選擇頻次排名前五的要素作為設計重點，整理得到高校官網中優缺點總結表，如表1。括號里面的數字表示為次數。

（二）需求分析：從表1中可知，用戶對不同要素之間存在關注度差異。用戶對交互的關注度高，是因為交互部分產生的問題較多。交互關注的是用戶與產品的有效交流，不流暢交流體驗直接影響用戶使用體驗。用戶對色彩和風格方面關注度其次，是由于個人審美的不同，不同用戶表達出自己對官網不同的喜好。在布局和內容方面關注度最低的原因是，布局和內容的設計往往需要用戶進行深入分析思考才能得出結論。

用戶對官網優點的看法趨向統一，包括：內容分類清晰、色彩主次分明、頁面簡潔大方、有良好的交互體驗、內容設置滿足宣傳性和實用性等。而對官網缺點，正好與之相反，包括布局不合理、配色不好看、設計風格有年代感、交互不流暢、內容信息混雜等。用戶對官網優缺點的看法的相對性，為后續提取設計要素提供有效參考。

根據以上分析，通過焦點小組討論將用戶反饋轉化為提升高校官網用戶體驗的設計要素，分別從布局、色彩、風格、交互、內容等方面展開構思。

（1）合理清晰的網站布局。網站布局是網頁設計的基礎，合理化的布局是功能美和形式美的有機結合。可采用對官網信息分類的方式梳理網站結構。具體方式有：第一，減少一級欄目數量。使一級欄目盡量涵蓋所有內容，并且欄目分類清晰。第二，整合外部網站。高校官網外部網站繁多，如果所有外部鏈接堆疊在一起，會對學生信息搜尋造成負擔。（2）鮮明獨特的色彩表達。網頁最初的視覺感受是色彩帶來的。能迅速吸引用戶注意的高校官網的配色應該鮮明又個性，例如使用鮮艷明快的顏色、合理運用學校標識色等。主色與輔色之間也應當配色協調，比例得當。（3）大氣簡潔的風格選擇。風格最能傳遞高校文化信息，是高校官網設計重點關注對象。可通過大氣簡潔的設計風格，配合具有學校獨特設計感的細節，豐富官網設計風格。（4）流暢清晰的交互運用。高校官網交互是用戶接受和回饋信息的互動過程，是最影響網站用戶體驗的部分。好的交互能提高能提高網站易用性和瀏覽流暢性。借助為每個操作設定期望的反饋、為錯誤的交互提供糾錯支持、網站鏈接指明其含義等方式提升官網交互體驗。（5）實用性和宣傳性結合的內容設計。網站的內容是留住用戶的關鍵。內容的好壞對高校招生及學生的信息傳遞工作有重要影響。因此在內容設置上應以服務用戶為中心，針對用戶需求充實網站內容。

（三）參與式設計

1.設計過程：根據上文需求分析的結論，確定本次設計要求包括：布局合理清晰、色彩鮮明而獨特、風格大氣簡潔、內容有實用性和宣傳性等等。因為交互在靜態的網頁設計中難以體現，所以本次設計中不作考慮。

綜合類高校官網參與式設計三階段，如圖3所示。每個階段時長為2-3小時。

第一階段為官網結構圖設計。成員根據設計要求自行繪制官網結構，對各自設計進行講解后，以投票方式確定網站功能及其具體內容，并進行官網結構圖設計。第二階段為低保真原型圖設計。成員根據官網結構圖自行設計網站布局，對各自設計進行講解后，以投票方式確定每塊內容的呈現方式，并進行低保真原型圖設計。第三階段為高保真原型圖設計。每位成員在統一設計風格和設計規范后，分模塊設計頁面樣式。設計完成后，小組成員對每個模塊設計提出修改意見并優化，再進行整合和細節調整，最終完成高保真原型圖。

每一階段設置6名參與過前期網站設計元素研究參與者，以此來保證參與者在參與過程中搭建好高校官網框架并擁有足夠多的話語權。參與式設計前兩個階段中的人員配置相同，均包括藝術專業學生、計算機專業學生、老師和網站管理人員，這樣的分組有利于官網設計滿足更多的人群需求。而第三部分的設計專業要求較高，因此參與人員均為設計專業學生。

2.設計產出：本文的參與式設計前三個階段，共完成了3個設計任務，得到的設計產出包括：官網結構圖（如圖4）;低保真原型圖（如圖5）;高保真原型圖（如圖6）。

官網結構圖設計主要體現在內容方面。以實用性和宣傳性為出發點，成員分析討論共得到9個模塊，包括標題欄、導航欄、輪播圖、新聞欄目、網站信息、學生活動、學校數據、招生就業和其他鏈接。

低保真原型圖重點考慮布局方面。采用結構充實緊湊的“國”字型布局、控制一級欄目數量為7個、整合外部鏈接等方式以提高網站可用性，合理網站布局。

高保真原型圖的設計重點在色彩和風格方面。選擇大家都認可的清新舒適的藍綠色作為主色，并且配合鮮艷明快的紅、橙、綠作為輔色，以滿足色彩鮮明和獨特的需求。通過移除設計中的不必要元素來簡化網站，并以增加可視化圖標和英文標題的方式豐富網站層次。

（四）設計評價：將設計出的官網高保真交給剩余12位參與過網站設計元素研究而沒參與設計的用戶進行體驗，并采用量表評價法來評價設計。滿分為5分，5個評價等級，從5分滿意到1分不滿意。評價者從布局、色彩、風格和內容這4個方面對網站進行打分，并給出理由和改進意見，設計評價表，如表2。

設計總評分為3.8125分，可以看出用戶對本版設計較為滿意。在高校官網布局和內容部分評分雖然較高，但是存在著部分欄目占比過大、整體內容較少等問題;在高校官網色彩和風格部分，用戶評分較低，主要體現在配色過于突兀且占比過大、設計細節比較粗糙等方面，在后續設計中需要重點關注。

將評價結果交給參與式設計第三階段的參與者，由他們對官網進行再一次迭代。完善后的高保真原型圖，如圖7。

由圖所示，新版高校官網高保真在原版的基礎上進行的主要調整包括。（1）為了促進布局合理化，將各模塊占比做一定的調整，如減少實用性相對較低的其他鏈接模塊比重、增大具有宣傳性的校園風光模塊比重、將底部導航欄再分級等。（2）考慮到配色過于突兀的問題，降低了輔色的飽和度、加大主色在官網配色中的占比，使色彩在位置和比例上更加平衡。（3）針對設計細節比較粗糙的問題，通過改變“學校生活”“學校招生”等模塊呈現方式，優化圖片展示和調整模塊間距等方式，讓整體設計更加具有系統性、大氣感。（4）就豐富網站宣傳性角度考慮，增加“學校人物”模塊，以突出展示學校優秀人物。

結論

本研究從參與流程、設計模式、參與用戶以及過程管理四個方面對參與式設計進行研究，其研究成果如下：（1）將提升高校官網用戶體驗的參與式設計流程歸納為網站設計元素研究、需求分析、參與式設計、評價與優化四個階段;（2）對參與人員進行分析;（3）提出“從我到我們”設計新模式;（4）探索參與式設計管理過程。并通過實例對提升高校官網參與式設計過程進行了詳細的描述。借助“從我們到我們”的參與式設計模式，從布局、色彩、風格內容四個要素設計高校官網，形成高校官網參與式設計方案，并且通過設計評價證明其能有效提高官網的用戶體驗。該研究為傳統高校官網設計的用戶體驗問題提供了新的方向和思路，同時也擴大了參與式設計的應用范圍。

3785501908288