高校圖書館易用網頁模型設計優(yōu)化

原源 殷子由

（北京師范大學-香港浸會大學聯(lián)合國際學院 文化與創(chuàng)意學部，廣東 珠海 519000）

一、引言

互聯(lián)網及其相關技術的迅速發(fā)展，推動著信息存儲和傳輸向自動化及數字化方向發(fā)展，出現(xiàn)了大量的電子書和其他數字化閱讀材料，這也引起了人們對社會圖書館網站或數字圖書館以及高校圖書館網站的建設和現(xiàn)存問題的關注[1]。雖然它們的服務對象及涵蓋內容可能不盡相同，但一般都以網站形式存在，且其目的都是提供信息和服務用戶。同時，通過使用線上圖書館網站，人們可以訪問他們想要的大部分資源，而不必親自踏入圖書館，因此人們關心的不僅僅是這些數字圖書館或圖書館網站的功能性，還有它們的易用性（或“可用性”），這意味著人們傾向于使用那些能以令人滿意的方式高效地實現(xiàn)他們的目標的圖書館網站[2]。

盡管近年來移動設備的使用率有了很大地提高，但根據艾瑞網站在2017年通過社區(qū)調查獲得的數據報告顯示，人們在電腦端上瀏覽、搜索、收集和整理信息的行為卻越來越多且明顯高于移動終端，分別占81.8%、78.6%、52.3%和49.8%[3]。因此，大多數人，包括學校的學生和教師，大部分時間會通過電腦端登錄圖書館網站，以便搜索、瀏覽和下載各種資源。然而，許多學校圖書館的電腦端網站在易用性方面并不十分令人滿意。學校圖書館網站的用戶界面優(yōu)化有助于提高網站的易用性，使用戶（學生和教師）更快地獲取信息，使網站的運行更加順暢。本研究選取北京師范大學-香港浸會大學聯(lián)合國際學院（以下簡稱“北師港浸大”）學習資源中心的網頁界面作為主要研究對象，研究目標定為總結出一套適用于圖書館網頁界面優(yōu)化的設計原則，并針對北師港浸大學習資源中心網頁界面設計一套易于使用的網頁設計模型。

二、網頁界面設計

網頁的易用性涉及人機交互（HCI）、網頁設計、用戶界面（UI）設計或用戶體驗（UX）等領域，從網頁界面設計與易用性、網頁界面設計原則兩個方面做文獻綜述。關于網頁界面設計的一些闡述和解釋，以及對易用性有重大影響的網頁界面設計的設計指南或規(guī)范，都在所回顧的研究中被提出并證明是可靠的。這些內容對于提出一套合理的設計原則并設計一個實用的圖書館網頁界面原型都有一定的參考價值。

1.網頁界面設計與易用性

Lee和Koubek曾提到：“網站是一組相互連接的界面和功能的屬性 ”[4]。而用戶界面（UI）則是一個交互系統(tǒng)中為用戶完成特定任務提供信息和控制的所有組件，包括所有的軟件和硬件。網頁界面設計實際上是一個網站的UI設計，是針對網站中所有頁面組件（或“頁面元素”）進行的設計。這就意味著，用戶是網頁界面設計中首要考慮的對象，也就是說，設計網頁界面的目的是使網站對用戶而言更易用。

易用性是評估網站質量的重要因素。Nielsen將網站的易用性定義為“用戶能夠學會操作使用系統(tǒng)和記憶基本功能的容易程度、網站的操作效率、避免錯誤的能力和用戶的總體滿意度”[5]。網站的易用性是一個決定用戶與網頁界面交互的容易程度的關鍵因素[6]。此外，中國學者 Liu等人根據對國內網站的研究，提出網站主頁的美學設計已成為影響用戶滿意度、激發(fā)積極情感、增強網站易用性的關鍵因素[7]。因此，將易用性的概念運用到網頁界面的美學設計中，從而為用戶提供更好的使用體驗，對該領域的研究者和設計師而言都非常重要。

為了提高網頁界面的易用性，在網頁界面的早期設計階段就要注意界面元素的設計。在設計人們認為是好的或有用的網頁界面時，應考慮多種交互元素，包括布局、菜單、搜索框、圖標、按鈕、選項卡、文本等[8][9]。Kuo和Chen的研究指出，在用戶界面設計方面，廣告的展示、字體大小、字體顏色、簡易功能鍵、界面布局，以及頁面顏色組合與網站的易用性有關，最重要的一個因素是簡單的功能鍵，而網頁界面布局和菜單欄的工具圖標化是影響功能鍵質量的因素[8]。在這些元素中，圖標和按鈕及選項卡的交互方式類似[9]，它們都可以作為功能鍵跳轉到其他頁面或彈出窗口。

網頁界面的布局，即所謂的網頁元素的放置，如果能夠最大限度地展示主要信息，便有助于用戶定位目標[10][11]。Thorngate和Hoden的研究提出欄數、導航菜單的位置和視覺集成三個關鍵的界面布局對網站的易用性有影響[12]。Manzoor等人在2019年提出的“六個屬性度量標準”中，頁面布局是評估大學網站易用性的六個因素之一，因為它可以在一定程度上決定用戶的使用表現(xiàn)[9]。Salman、Cheng和Patterson研究指出，當圖標設計得當時，它們有助于降低界面的復雜性，從而減少用戶在最終操作時的精神負荷[13]，Arledge2014年的研究證實了這一觀點，“圖標的形式對其易用性的影響大于圖標樣式或顏色的影響作用”[13]。Islam和Bonwman研究認為，圖標也可以被定義為“界面標識”，設計直觀的界面標識對于提高界面易用性至關重要[14]。視覺上令人愉悅的界面布局可以提高系統(tǒng)的整體易用性和滿意度[9][10]。

2.網頁界面設計原則

許多學者、設計師甚至企業(yè)在其研究報告或官方網站中，提出了滿足特定網頁界面設計易用性要求的布局排版和圖標的設計原則或準則。

為使網頁視覺清晰，在設計網頁布局時，設計師應考慮欄目數、導航和核心內容的位置以及空白區(qū)域（負空間）的比例。一是欄數，網頁的兩欄布局比單欄或三欄布局在易用性上稍有優(yōu)勢，因為兩欄的設計使得主次內容的區(qū)分更加清晰[12]。二是導航菜單的位置，Kalbach和Bosenick的研究表明，用戶會希望網站的導航主菜單放置在屏幕的頂部或左側[15]。Thorngate和Hoden的實驗發(fā)現(xiàn)，用戶認為將導航菜單放置在頁面左側比將其放置在頂部更為顯眼[12]，將核心且常用的內容放在網頁視覺的中心，可以提高用戶的操作速度，使用戶更快地完成任務，這一點在Liu等人的研究中也得到了證明[7]。三是背景的相對面積，人們常說的“空白區(qū)域”“負空間”在布局排版設計中也起到了很重要的影響作用，因為文本和空白區(qū)域的比例會影響用戶的瀏覽，一般來說，當白色部分占據頁面總面積的40%-60%時，觀眾會認為頁面整潔。他們的研究還表明，15—60歲的人群更喜歡50%以上的空白區(qū)域[16][17]。

為使網頁易用，設計網頁界面的圖標，最重要的是要使圖標能正確地傳達出它們所要表達的意思，并確保圖標的可讀性和清晰度。正如Arledge在其研究中得出的結論，圖標的形式會對易用性產生重要影響，即圖標的外觀是圖標設計的關鍵[13]。圖標應該設計為簡單、直觀且現(xiàn)代的樣式[14]。這就意味著，每個圖標都應該被設計為極簡的樣子，從而表達其基本特征，因為太多的細節(jié)會使圖標顯得粗糙或辨識度不強[18][19]。根據蘋果、谷歌及騰訊等公司公布的圖標設計規(guī)則，所有圖標在大小、細節(jié)層次、視角和筆畫粗細等方面都應該相同，這意味著它們應該保持一致的風格[18][20]。圖標中最好不包含所有直觀的文字設計，如果需要解釋圖標，可以在圖標下方顯示標簽并相應調整其位置[14][18][21]。

以往的研究表明了網頁元素在提高網頁易用性方面的重要性，并證明了布局和圖標的設計有利于提高用戶使用網站的性能，提升網頁易用性，優(yōu)化網頁界面，關鍵是優(yōu)化網頁界面中的交互元素。

三、研究設計

為設計一個易于使用的圖書館網頁界面模型，根據所總結的設計原則，針對網頁界面布局和功能圖標進行優(yōu)化，增強學校圖書館的電腦端網站的易用性，讓用戶在這類網站的電腦端有更好的檢索體驗，對高校來說至關重要。本研究選取北師港浸大學習資源中心的網頁界面作為研究主體，針對其存在的問題，通過實驗法，在參考以往學者的研究總結出相關的設計原則后，對其進行優(yōu)化，并設計一個新的網頁界面模型，為北師港浸大學習資源中心網站的首頁及大部分常用的二級界面建設一套易用性強的界面模型。

為查明北師港浸大學習資源中心網頁界面現(xiàn)存的問題，并評估研究的可行性，在正式研究開始之前進行了一項試驗性研究。根據網絡易用性大師Jakob Nielsen的分析[22]，一個系統(tǒng)中大約80%的問題可以通過5-6個測試用戶的操作來發(fā)現(xiàn)。因此，本試驗性研究前期，研究員對6位北師港浸大的師生進行了采訪，以了解學習資源中心網站的常用功能。結果表明，用戶經常使用學習資源中心網站依次是尋找可連接到學校VPN的鏈接、查單詞、使用多組關鍵字搜索所有可獲得的文獻、訪問數據庫、查詢他們的借閱記錄。

在五個常用功能的基礎上，研究員設計了如下五個實驗任務：1）找到可訪問學校VPN的鏈接；2）使用專業(yè)詞典進行詞匯定義查詢；3）用幾組關鍵詞進行文獻檢索；4）訪問數據庫；5）查詢個人借閱記錄并找到具體書籍。隨后，受訪的六名師生被邀請完成這五項任務，并被要求說出他們對實時遇到的界面的看法。根據實驗對象的陳述，從簡單的任務和觀察中發(fā)現(xiàn)了網站界面現(xiàn)存的兩組突出問題。

第一組問題與界面布局相關。在本研究中，界面布局可以理解為網頁元素在界面中的放置。首先，在首頁中沒有用于定位首頁中每個區(qū)塊的標題，首頁中不同的兩個區(qū)塊內容沒有對齊（圖1），首頁中每個區(qū)塊的功能圖標的劃分與頂部導航欄中的不一致。其次，在二級界面中，部分頁面由于側方導航菜單太寬，主要內容占據了相對較小的比例，而有些頁面甚至沒有側方導航（圖2）。

第二組問題與功能圖標相關。在本研究中，功能圖示可以定義為帶有符號的互動功能鍵或功能按鈕。發(fā)現(xiàn)的問題包括：首頁和二級頁面，都沒有一個懸浮的固定圖標可以讓用戶快速鏈接到頁面頂部，首頁中出現(xiàn)了一些沒有實際交互功能的、帶有一定誤導性的圖標（圖3），如果沒有圖標下方的文字說明，一些功能圖標的識別是困難的。

圖1 北師港浸大學習資源中心首頁 圖標區(qū)域

圖2 北師港浸大學習資源中心E-resources頁面

圖3 北師港浸大學習資源中心首頁 誤導性的圖標

四、實驗：模型設計

通過試驗性研究的結果可知，頁面布局和功能圖標的設計對師生使用學習資源中心的影響很大。因此本研究的方向確定為學習資源中心網頁界面布局和功能圖標設計的易用性優(yōu)化，網頁界面原型的開發(fā)需要將其核心用戶放在開發(fā)過程的中心。基于研究綜述中的設計原則，研究設計了與五種最常用功能相關的一、二級界面。

圖4 北師港浸大學習資源中心常用功能網站導覽圖

圖5 北師港浸大學習資源中心界面模型 首頁 頂部

圖6 北師港浸大學習資源中心界面模型 首頁 中部

1.構建網站導覽流程圖

在進行具體的頁面設計之前，首先要明確頁面間的關系，以及每個功能對應的用戶操作流程，從而更好地進行后續(xù)的設計。研究首先對北師港浸大學習資源中心網站導覽流程進行了梳理，構建了網站導覽流程圖（圖4）。

2.設計闡述

在明確了流程框架后，根據前期試驗性研究結果，對首頁和各二級界面的UI進行了模型優(yōu)化設計，主要針對的是頁面布局和功能圖標設計這兩部分。

首先，調整主頁布局。主頁保留了原來的單欄瀑布式布局，導航欄仍然設計在頁面頂部的標題下方，但圖標及其他內容的對齊進行了調整，使其在視覺上更整齊。頁面中空白區(qū)域的面積也進行了調整，在調整頁面兩側邊距為各112px的同時，增加了每個分區(qū)之間的縱向間隔，使每個區(qū)域的劃分更明確。按菜單欄的分類整理了首頁中部功能圖標之余，刪除了不常用的功能圖標，使界面看起來更加統(tǒng)一、整潔和清晰。將搜索欄和一些常用功能的標簽等核心內容適當調整后放在首頁中間最顯眼的位置，使其更便于使用。為了更好地導航用戶，在首頁中還為每個分區(qū)添加了標題。

其次，調整二級頁面的布局。每個二級界面的布局都設計為兩欄的模式，每頁中都設計了二級導航菜單，并且都放在了頁面的左側，將左側菜單的位置做了移動，占用的寬度也調整為稍窄一些。此外，頁眉、頂部主菜單和頁腳被保留以便與首頁保持一致。頁面的邊距也被設計為便與首頁相同，這樣每個二級界面中的核心內容便更集中在頁面的中心。

圖7 北師港浸大學習資源中心界面模型 首頁 尾部

圖10 北師港浸大學習資源中心界面模型 Summon頁面 中部

圖8 北師港浸大學習資源中心界面模型 Remote Access to E-resources頁面 頂部

圖11 北師港浸大學習資源中心界面模型 Advanced Search頁面 頂部

圖9 北師港浸大學習資源中心界面模型E-resources頁面 中部

圖12 北師港浸大學習資源中心界面模型 OPACLoan History頁面 中部

最后，對圖標設計進行優(yōu)化。學習資源中心網站中的圖標有兩大類，一類是系統(tǒng)圖標，另一類是專為學習資源中心提供的功能設計的圖標，即谷歌官方定義的 “定制圖標”。系統(tǒng)圖標和定制圖標首要的是重新設計或修改不易理解和識別的圖標形式，如“圖書借還、續(xù)借及預約”“課程參考書”“我的圖書館賬戶”等。同時，通過對每個圖標進行一致的規(guī)范化處理，實現(xiàn)圖標統(tǒng)一的視覺效果，例如將圖標中的圓角調整為相同的弧度，統(tǒng)一每個圖標在水平和垂直方向的比例以及位置，等等。除此之外，用于解釋圖標的文本與菜單欄中的描述統(tǒng)一后放置在圖標下面，在首頁和各二級頁面中還添加了可定位回到頁面頂部的固定懸浮圖標。

3.效果展示

通過設計成果可以看出，網頁界面設計的一些闡述和解釋，對易用性有重大影響的網頁界面設計的設計指南或規(guī)范，以及基于先前學者研究的結果和各公司提供的設計規(guī)則總結得到的設計規(guī)則，這些內容對于提出一套合理的設計原則，并設計一個實用的圖書館網頁界面原型都有一定的參考價值，可以適用于優(yōu)化北師港浸大學習資源中心的網站，并為其進行易于使用的界面模型設計。

五、總結

高校圖書館網站的出現(xiàn)，使得人們學習及查閱資料變得更為便利，更是方便了高校師生進行學術研究工作。但是，不易于使用的圖書館網頁界面會影響到師生的使用體驗，給研究工作帶來不便。本文通過對人機交互、網頁設計、用戶界面設計或用戶體驗等領域的研究進行回顧，通過實驗性調研，針對北師港浸大學習資源中心現(xiàn)存的頁面布局和功能圖標識別兩大主要問題，總結出了一系列優(yōu)化設計原則，并最終設計出一套界面交互模型。設計結果在一定程度上體現(xiàn)了從以往研究結果中總結出來的設計原則的可靠性。在后續(xù)研究中，可以更充分地了解用戶的使用習慣，進一步優(yōu)化模型，并對設計好的界面模型進行易用性檢測，從而得到更完善的模型用于實際發(fā)布。