$30 off During Our Annual Pro Sale. View Details »

Use Organization Structures to Achieve Better Navigation Experiences for Users

Sean Hsieh
March 21, 2021

Use Organization Structures to Achieve Better Navigation Experiences for Users

HPX meetup Mar 2021

Sean Hsieh

March 21, 2021
Tweet

More Decks by Sean Hsieh

Other Decks in Design

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