提升高校官網(wǎng)用戶體驗的參與式設(shè)計研究

季燁　吳劍鋒　錢美竹

關(guān)鍵詞：高校官網(wǎng) 參與式設(shè)計 用戶體驗 網(wǎng)站設(shè)計 設(shè)計研究

中圖分類號：TP393.092 文獻(xiàn)標(biāo)識碼：A

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

引言

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

一、參與式設(shè)計

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

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

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

參與式設(shè)計在高校官網(wǎng)設(shè)計中優(yōu)勢主要體現(xiàn)在以下幾個方面：

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

二、高校官網(wǎng)的參與式設(shè)計研究

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

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

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

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

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

三、高校官網(wǎng)的參與式設(shè)計實踐

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

匯總優(yōu)缺點，并以頻次進(jìn)行排序，選擇頻次排名前五的要素作為設(shè)計重點，整理得到高校官網(wǎng)中優(yōu)缺點總結(jié)表，如表1。括號里面的數(shù)字表示為次數(shù)。

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

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

根據(jù)以上分析，通過焦點小組討論將用戶反饋轉(zhuǎn)化為提升高校官網(wǎng)用戶體驗的設(shè)計要素，分別從布局、色彩、風(fēng)格、交互、內(nèi)容等方面展開構(gòu)思。

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

（三）參與式設(shè)計

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

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

第一階段為官網(wǎng)結(jié)構(gòu)圖設(shè)計。成員根據(jù)設(shè)計要求自行繪制官網(wǎng)結(jié)構(gòu)，對各自設(shè)計進(jìn)行講解后，以投票方式確定網(wǎng)站功能及其具體內(nèi)容，并進(jìn)行官網(wǎng)結(jié)構(gòu)圖設(shè)計。第二階段為低保真原型圖設(shè)計。成員根據(jù)官網(wǎng)結(jié)構(gòu)圖自行設(shè)計網(wǎng)站布局，對各自設(shè)計進(jìn)行講解后，以投票方式確定每塊內(nèi)容的呈現(xiàn)方式，并進(jìn)行低保真原型圖設(shè)計。第三階段為高保真原型圖設(shè)計。每位成員在統(tǒng)一設(shè)計風(fēng)格和設(shè)計規(guī)范后，分模塊設(shè)計頁面樣式。設(shè)計完成后，小組成員對每個模塊設(shè)計提出修改意見并優(yōu)化，再進(jìn)行整合和細(xì)節(jié)調(diào)整，最終完成高保真原型圖。

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

2.設(shè)計產(chǎn)出：本文的參與式設(shè)計前三個階段，共完成了3個設(shè)計任務(wù)，得到的設(shè)計產(chǎn)出包括：官網(wǎng)結(jié)構(gòu)圖（如圖4）;低保真原型圖（如圖5）;高保真原型圖（如圖6）。

官網(wǎng)結(jié)構(gòu)圖設(shè)計主要體現(xiàn)在內(nèi)容方面。以實用性和宣傳性為出發(fā)點，成員分析討論共得到9個模塊，包括標(biāo)題欄、導(dǎo)航欄、輪播圖、新聞欄目、網(wǎng)站信息、學(xué)生活動、學(xué)校數(shù)據(jù)、招生就業(yè)和其他鏈接。

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

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

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

設(shè)計總評分為3.8125分，可以看出用戶對本版設(shè)計較為滿意。在高校官網(wǎng)布局和內(nèi)容部分評分雖然較高，但是存在著部分欄目占比過大、整體內(nèi)容較少等問題;在高校官網(wǎng)色彩和風(fēng)格部分，用戶評分較低，主要體現(xiàn)在配色過于突兀且占比過大、設(shè)計細(xì)節(jié)比較粗糙等方面，在后續(xù)設(shè)計中需要重點關(guān)注。

將評價結(jié)果交給參與式設(shè)計第三階段的參與者，由他們對官網(wǎng)進(jìn)行再一次迭代。完善后的高保真原型圖，如圖7。

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

結(jié)論

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

3785501908288