Use Organization Structures to Achieve Better Navigation Experiences for Users

HPX meetup Mar 2021

Transcript

1. 1 Use Organization Structures to Achieve Better Navigation Experiences for Users HPX meetup Mar 2021 謝任軒, Sean Hsieh of_alpha@hotmail.com Software engineer @ Garmin International
2. 2 Agenda •  Introduction •  1. 結構化並組織關聯性(資料庫模式) •  2. 設計階層結構 •  3. 超文件與標籤
3. 3 Introduction •  對提供資訊的網站，如何讓使用者用起來感到方便呢? •  有良好組織結構(Organization Structures)的網站可 讓使用者搜尋資訊時更有效率，常見模式有資料庫、 階層、及超文件與標籤分類三種。 •  這次分享同樣以<資訊架構學>內容檢視個人專案中的 功能或是受到啟發進而開發新功能
4. 4 1. 結構化並組織關聯性(資料庫模式)
5. 5 1. 結構化並組織關聯性(資料庫模式) •  第一種方式是結構化並組織物件間的關聯性。 •  之所以需要結構化並組織物件間的關聯性，是為了達 成關聯性的操作。 •  如依照日期排序、搜尋具有關鍵字的資料、或以關聯 性為基礎的推薦等功能。
6. 假設有一個新需求 • 我們的需求是在舊專案上讓 使用者可以用關鍵字搜尋並 以發布日期排序內容 • 你會如何進行呢? 6
7. 假設有一個新需求 • 實體關係圖是以視覺化的方式，理解模型間的關係多數 框架有提供工具或是套件用圖形化顯示Tables。 • 以Django的專案為例，可以使用pygraphviz快速產生 ERD，安裝及使用的指令如下: 7 pip install pygraphviz # or conda install pygraphviz python manage.py graph_models -a -g -o imagefile_name.png
8. 檢視實體關係圖(ERD)-2 •  文章的欄位有名稱 (title)與時間(time) •  透過SQL的基本操作 或是透過ORM可以 達成需求。 8
9. 檢視既有功能:搜尋及排序 • 透過結構化並組織資料間的關聯性，我們已經可以提供 給使用者搜尋想找的文章的功能並依日期排序結果。 • 但對很多使用者來說這樣仍是不夠的。 9
10. 10 2. 設計階層結構
11. 11 設計階層結構 •  階層結構是整體資訊空間的架構、骨幹。 •  讓使用者可以搜尋想要及排序有時候仍是不夠的。 •  也許使用者並非想要找特定內容，而只是想要瀏覽網 頁，這時導覽列就會變得很重要，那應該要怎麼分類 網站的內容比較合理呢？
12. 12 1. 階層之間應該是互斥的 •  如果不同階層的分類結果 有重疊，階層很容易失去 分類的意義。 •  模糊組織規則如主題、任 務、族群等建議以網頁為 單位分組資訊與建立結構 Source: 美國國家癌症研究院
13. 13 2. 考慮廣度與深度間的均衡 •  過於窄而深的: 使用者需 要經過多次的選擇才有辦 法找得到想找的東西 •  過於廣而淺: 首層導覽列 的選擇會過多而超過使用 者的負荷 Source: PC home
14. 14 建議做法 •  比起窄而深，建議的做法是在新專案的設計上選擇採 用廣而淺的階層架構。 •  理由是若有新內容要加入，很容易動到已經存在的階 層而改變到首頁的內容(或排版)，使用者會覺得與過去 的使用經驗不同，對開發者或產商而言時間或金錢成 本也會相對較高。
15. 檢視既有功能:導覽列切換 目前Daily Learning的階層最深到第三階。 15
16. 16 3. 超文件與標籤
17. 17 超文件與標籤 •  用超文件連結到資訊區塊，但用於導覽上很容易使使 用者迷失方向，因此僅建議作為結構性低且創意程度 高內容的補強。 •  另一種分類方式是社交分類, 常見的像是臉書或是 Twitter的hash tag，以這種方式讓使用者自由分類, 此外也讓使用者更有參與感。
18. 18 實作功能: 標籤分類 •  以文字預處理(詞幹提取、 詞法分解和去除停用詞) 處理每篇文章的標題 •  再從中萃取出每個單字的 出現次數，以頻率高的詞 作為標籤結合關鍵字搜尋。
19. 19 Thanks! Any questions? You can find me at: of_alpha@hotmail.com