Web 軟體測試 Checklist 應用系列，第 2 部分: 導航和連結

導航和連結測試包含的範疇

在 Web 開發測試中，導航和連結為使用者提供了豐富的操作體驗，使用者可以通過導航和連結實現對各類資料的訪問。導航，從基本意義上理解，就是當使用者觸發該導航操作後，使用者介面將被指向當前系統的另外一個目的頁面的過程，換句話說，導航實現了在系統內部從一個資料頁面到另外一個資料頁面的變化過程，這有助於使用者更加方便快捷的訪問關聯的資料內容。連結，在這裡我們指的是從 Web 產品內部直接連接到外部目的地址的超連結。

對於本文中提到的導航和連結，簡單來說，可以這樣理解：導航是 Web 產品內部的跳轉和移動，連結是從 Web 產品內部對外部地址的訪問。

回頁首

導航 Checklist 介紹

表 1. 導航 Checklist 總結

序號	Checklist
1.1	檢查捲軸在需要時是否能正確顯示
1.2	驗證網頁上的所有操作均可以通過鍵盤操作完成
1.3	麵包屑導航是否存在？
1.4	確保在未儲存當前頁面時離開頁面有使用者提示資訊

1.1 檢查捲軸在需要時是否能正確顯示

捲軸的顯示在網頁導航中的作用非常重要。在需要時，捲軸的恰當顯示是必要的。下面通過幾個例子來示範捲軸在網頁產品中可能遇到的一些缺陷執行個體。

圖 1. 冗餘的捲軸顯示

從圖 1 中可以看到，該網頁視窗中，當前並沒有顯示任何超出視窗顯示範圍的內容，但依然顯示了水平和垂直兩個方向的捲軸。此時，這兩條捲軸是多餘的，是產品的一個缺陷。

圖 2. 捲軸在視窗尺寸變化需相應變化

通常情況下，捲軸位於一個顯示地區的邊緣，當位於該邊緣的另外一個地區尺寸發生變化時，捲軸的位置也需要隨之發生變化。 2 中所示，當圖中下端的預覽視窗尺寸發生變化時，上端的捲軸並未跟隨相應的移動到預覽視窗的上邊界，從而出現了中間的空白地區，此問題是一個產品缺陷。

1.2 驗證網頁上的所有操作均可以通過鍵盤操作完成

考慮到軟體產品的使用者很廣泛，需要保證在僅操作鍵盤的情況下，依然可以完整的使用網頁產品的所有功能。也就是說，使用者可以僅用鍵盤上的操作，比如斷行符號、文本輸入、Tab 鍵、空格等，就可以順暢的應用產品功能。

圖 3. 鍵盤操作無法選擇下拉框內容執行個體

圖 3 所示，該頁面下，當通過鍵盤 Tab 鍵將游標移動到框體“Select One”後，當試圖通過上下鍵選擇具體下拉式清單中的內容時，沒有任何反應。應用本條目，既然挑選清單項目可以通過滑鼠完成，這裡也應該可以通過鍵盤操作完成，此問題為產品的一個缺陷。

1.3 麵包屑導航是否存在？

麵包屑導航是指使用者在訪問過程中能獲得當前位於網站中的位置，並知道如何返回。本項 checklist 需要考察頁面上顯示的位置和路徑是否是正確的、有效，並且不包含冗餘資訊。

圖 4. 麵包屑導航問題執行個體

如 4 中顯示，該產品在訪問相關資料的過程中，按照使用者需求，當使用者點擊某一個資源時，將顯示該資源的資訊，並且將其名字顯示在頂端的“麵包屑”中。但當前顯示的頁面上，當使用者快速連續多次點擊該資源時，就會出現多個重複的資源麵包屑，但其實真正顯示的資料只有一份。這些冗餘的顯示資訊是產品的一個缺陷，將會給使用者帶來困擾。

1.4 確保在未儲存當前頁面時離開頁面有使用者提示資訊

在網頁上的使用者輸入頁面，當使用者輸入了一部分資訊之後，如果需要離開當前頁面但並沒有對資料進行儲存，產品需要提示使用者當前頁面輸入的資料沒有儲存，確認是否需要儲存。從使用者使用產品的角度來考慮，當使用者在一個輸入頁面輸入了大量資訊之後，萬一出現滑鼠的誤操作，以致點擊到某個按鈕而導致離開頁面，對於使用者來說這屬於非常糟糕的體驗，在開發過程中應盡量避免此類問題的發生。

回頁首

連結 Checklist 介紹

表 2. 連結 Checklist 總結

序號	Checklist
2.1	檢查網站地圖中的所有連結並查看是否存在損壞的連結
2.2	確保所有連結的目的地址跟標題描述相符
2.3	確保沒有孤兒頁面（沒有連結指向它）
2.4	檢查所有的網路站台和郵箱地址是否添加了超連結
2.5	確保游標置於超連結之上時呈現為手形
2.6	確保所有的連結都帶底線
2.7	確保相關資訊連結出現在內容的底端或者靠近頂端位置

2.1 檢查網站地圖中的所有連結並查看是否存在損壞的連結

通常網頁中都會提供各種外部連結，以便使用者方便的擷取相關聯的網站以外的資訊。我們需要檢查所有顯示的外部連結，找出其中的損壞的連結並加以修複。

圖 5. 損壞連結執行個體

5 所示，該頁面為點擊一個外部連結以後顯示的內容，該連結已經被損壞，無法指向正確的頁面。

2.2 確保所有連結的目的地址跟標題描述相符

通常每個超連結都有屬於自己的標題描述資訊，該描述資訊應儘可能清楚簡潔的描述它指向的目的地址。我們在開發測試過程中，需要確保該描述和實際目的地址的一致性，以免出現不一致性而導致不好的使用者體驗。

超連結的標題是引導使用者點擊的第一路標，它的描述是否清楚，關係到使用者是否能清晰的理解該連結的作用和目的地址的資訊。同時，連結的標題描述中，應盡量簡潔，且包含必要的資訊提示，盡量避免使用“點擊這裡”等詞語，應使用更有意義的用詞。

2.3 確保沒有孤兒頁面（沒有連結指向它）

我們需要保證產品頁面中，不存在孤兒頁面，也就是永遠沒有連結指向它的頁面。該類頁面對使用者來說沒有價值，並且是對資源的浪費，在設計階段需加以避免。

2.4 檢查所有引用的網路站台和郵箱地址是否添加了超連結

正常情況下，所有引用到的網路站台和郵箱地址都需要增加超連結，這樣可以保證使用者輕易的知道這些網站和郵箱地址是超連結，使用者通過點擊這些超連結就可以輕易到達不同的目的地址。否則，使用者將只能通過複製這些連結和郵箱到瀏覽器中，這將大大增加操作的複雜程度，給使用者帶來不便。

2.5 確保游標置於超連結之上時呈現為手形

當游標置於超連結之上時，這時游標由原表徵圖變為手形，這樣有助於提醒使用者目前範圍為超連結的範圍，點擊可以觸發超連結跳轉。如果手形未能恰當顯示，將是產品的缺陷。此外，當游標位於可以點擊的按鈕的上方時，也應該顯示為手形圖示，以提醒使用者現在是可點擊跳轉地區。

圖 6. 超連結游標不顯示為手形執行個體 1

如 6 中所示，當游標處於紅圈標記的超連結地區時，並未顯示為手形。而使用者直接點擊滑鼠時，則會跳轉到描述中提示的目標頁面。

圖 7. 超連結游標不顯示為手形執行個體 2

圖 7 中顯示的是一個協助按鈕的頁面，當游標位於協助按鈕上方時，會出現彈出協助資訊提示“點擊協助表徵圖瞭解更多”。使用者此時確實可以通過點擊協助按鈕表徵圖跳轉到更多協助頁面，但是當游標位於協助表徵圖上方時，游標並未顯示為手形，這也是產品的缺陷。

2.6 確保所有的連結都帶底線

為了給使用者明確的提示，所有的連結都需要帶底線，這樣使用者在頁面上很清楚就可以知道哪裡是超連結的範圍，哪裡不是。當然超連結的字型顏色通常也跟周圍不同，訪問過的連結和未訪問的連結顏色也不同。具體顏色的定義各個產品不盡相同，但所有的連結都有底線這點是一致的。

2.7 確保相關資訊連結出現在內容的底端或者靠近頂端位置

通常情況下，“相關資訊”是用來協助使用者擷取對當前頁面內容更深入的瞭解的相關資訊，一般位於當前內容頁面的底端或者靠近頂端的位置。這樣最有利於使用者定位和尋找相關資訊。設想如果相關資訊連結出現在內容中間，將會跟內容中本身內建的超連結發生混淆，使用者將難以定位和尋找需要的相關連結。

回頁首

總結

導航和連結作為使用者使用網頁產品的重要工具，是使用者直接操作的對象，對使用者體驗的提升具有重要作用。兩者的設計應該力求簡練、高效，在提供給使用者提供便捷的導航和移動的同時，也力求杜絕各種冗餘的資訊。

本文分別討論了網頁產品中的導航和連結中 Checklist 的應用，並給出了實際測試工作中的一些應用執行個體，示範了具體產品缺陷出現的情境。本文的目的主要是讓網頁產品開發人員和測試人員在導航和連結兩個方面能盡量提供高效的產品，並依據本文提到的 Checklist 相關條目杜絕相關產品缺陷。