Web design — Use Organization Structures to Achieve Better Navigation Experiences for Users

Jen-Hsuan Hsieh (Sean)
A Layman
Published in
7 min readMar 20, 2021

Introduction

對提供資訊的網站來說,如何讓使用者用起來感到方便呢?

有著良好組織結構的網站可以讓使用者搜尋所需資訊時更有效率,常見的組織架構模式有資料庫、階層、及超文件與標籤分類三種模式。

前一篇文章我們利用空間設計原則改善了排版的設計,本篇文章同樣試著以<資訊架構學>內容檢視個人專案中的功能或是受到啟發進而開發新功能,這次要討論的主題是組織結構(Organization Structures)。

1. 結構化並組織關聯性(資料庫模式)

第一種方式是結構化並組織物件間的關聯性並用資料庫儲存資料。

之所以需要結構化並組織物件間的關聯性,是為了達成關聯性的操作,如依照日期排序、搜尋具有關鍵字的資料、或以關聯性為基礎的推薦等功能。

檢視實體關係圖(Entity Relationship Diagram, ERD)

實體關係圖是以視覺化的方式,理解既有專案資料庫中模型間的關係,多數的開發框架多半有提供工具或是套件用圖形化的方式顯示Table

以手上的Django的專案(Daily Learning)為例,可以嘗試使用pygraphviz快速產生ERD,安裝及使用的指令如下:

pip install pygraphviz # or conda install pygraphviz
python manage.py graph_models -a -g -o imagefile_name.png

下圖為擷取部分的輸出結果。

假設有一個需求是依照文章名稱的關鍵字搜尋並以發布日期排序. 從圖中得知文章的欄位有名稱(title)與時間(time),透過SQL的基本操作或是透過ORM可以達成需求。

檢視既有功能:搜尋及排序

透過結構化並組織資料間的關聯性,我們已經可以提供給使用者搜尋想找的文章的功能並依日期排序結果,但對很多使用者來說這樣仍是不夠的。

2. 設計階層結構

階層結構是整體資訊空間的架構、骨幹。

除了讓使用者可以搜尋想要及排序有時候仍是不夠的,原因在於使用者也許並非想要找特定內容而只是想要瀏覽網頁,這時導覽列就會變得很重要,那應該要怎麼分類網站的內容比較合理呢?

<資訊架構學>書中有提到幾個在設計階層時候的原則。

1. 階層之間應該是互斥的

  • 如果不同階層的分類結果有重疊(稱為多重階層或是模糊的組織規則),那階層很容易失去分類的意義。模糊組織規則例如主題、任務、族群等
  • 建議以網頁為單位分組資訊與建立結構

2. 考慮廣度與深度間的均衡

  • 如果階層是過於窄而深的,使用者需要經過多次的選擇才有辦法找得到想找的東西
  • 如果階層是過於廣而淺的,首層導覽列的選擇會過多而超過使用者的負荷

建議做法

比起窄而深,建議的做法是在新專案的設計上選擇採用廣而淺的階層架構.理由是若有新內容要加入,很容易動到已經存在的階層而改變到首頁的內容(或排版),使用者會覺得與過去的使用經驗不同,對開發者或產商而言時間或金錢成本也會相對較高。

檢視功能:導覽列

目前Daily Learning的階層最深到第三階。

3. 超文件與標籤

最後一種方式用超文件(Hypertext)連結到資訊區塊,但用於導覽上很容易使使用者迷失方向,因此僅建議作為結構性低且創意程度高內容的補強。另一種分類方式是社交分類, 常見的像是臉書或是Twitter的hash tag,以這種方式讓使用者自由分類, 此外也讓使用者更有參與感。

實作功能: 標籤分類

參考social media的社交分類,在網站實作以標籤為基礎的導覽功能,可以讓使用者更容易找到類似的主題,也不需要輸入關鍵字。

實作方式可以利用先以文字預處理(詞幹提取、詞法分解和去除停用詞)處理ˊ每篇文章的標題,再從中萃取出每個單字的出現次數,以頻率高的詞作為標籤結合關鍵字搜尋。

--

--

Jen-Hsuan Hsieh (Sean)
A Layman

Frontend Developer🚀 Angular • React • Nest • Electron • Micro-frontend • Monorepo Architecture • https://daily-learning.herokuapp.com/