Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Use Organization Structures to Achieve Better N...
Search
Sean Hsieh
March 21, 2021
Design
0
32
Use Organization Structures to Achieve Better Navigation Experiences for Users
HPX meetup Mar 2021
Sean Hsieh
March 21, 2021
Tweet
Share
More Decks by Sean Hsieh
See All by Sean Hsieh
Use information space design principles to make web pages better understood
ofalpha
0
30
How to Set and Manage OKR for Side projects with Trello and Notion?
ofalpha
0
120
Experience to migrate JS modules to different bundler system
ofalpha
1
410
Design A Dark Traffic System With GoReplay
ofalpha
1
1.5k
Other Decks in Design
See All in Design
太田博三(@usagisan2020)
otanet
0
220
aya_murakami_portfolio
ayakaimi1101
0
1.1k
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
190
How to go from research data to insights?
mastervicedesign
0
220
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
TUNAG BOOK 2024
stmn
0
470
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
プロダクトデザインの「守破離」の「破」について
hayashirine
0
310
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.2k
Featured
See All Featured
Navigating Team Friction
lara
183
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Automating Front-end Workflow
addyosmani
1367
200k
Site-Speed That Sticks
csswizardry
3
370
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Raft: Consensus for Rubyists
vanstee
137
6.8k
It's Worth the Effort
3n
184
28k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
How GitHub (no longer) Works
holman
313
140k
Transcript
1 Use Organization Structures to Achieve Better Navigation Experiences for
Users HPX meetup Mar 2021 謝任軒, Sean Hsieh
[email protected]
Software engineer @ Garmin International
2 Agenda • Introduction • 1. 結構化並組織關聯性(資料庫模式) • 2. 設計階層結構
• 3. 超文件與標籤
3 Introduction • 對提供資訊的網站,如何讓使用者用起來感到方便呢? • 有良好組織結構(Organization Structures)的網站可 讓使用者搜尋資訊時更有效率,常見模式有資料庫、 階層、及超文件與標籤分類三種。 •
這次分享同樣以<資訊架構學>內容檢視個人專案中的 功能或是受到啟發進而開發新功能
4 1. 結構化並組織關聯性(資料庫模式)
5 1. 結構化並組織關聯性(資料庫模式) • 第一種方式是結構化並組織物件間的關聯性。 • 之所以需要結構化並組織物件間的關聯性,是為了達 成關聯性的操作。 • 如依照日期排序、搜尋具有關鍵字的資料、或以關聯
性為基礎的推薦等功能。
假設有一個新需求 • 我們的需求是在舊專案上讓 使用者可以用關鍵字搜尋並 以發布日期排序內容 • 你會如何進行呢? 6
假設有一個新需求 • 實體關係圖是以視覺化的方式,理解模型間的關係多數 框架有提供工具或是套件用圖形化顯示Tables。 • 以Django的專案為例,可以使用pygraphviz快速產生 ERD,安裝及使用的指令如下: 7 pip install pygraphviz #
or conda install pygraphviz python manage.py graph_models -a -g -o imagefile_name.png
檢視實體關係圖(ERD)-2 • 文章的欄位有名稱 (title)與時間(time) • 透過SQL的基本操作 或是透過ORM可以 達成需求。 8
檢視既有功能:搜尋及排序 • 透過結構化並組織資料間的關聯性,我們已經可以提供 給使用者搜尋想找的文章的功能並依日期排序結果。 • 但對很多使用者來說這樣仍是不夠的。 9
10 2. 設計階層結構
11 設計階層結構 • 階層結構是整體資訊空間的架構、骨幹。 • 讓使用者可以搜尋想要及排序有時候仍是不夠的。 • 也許使用者並非想要找特定內容,而只是想要瀏覽網 頁,這時導覽列就會變得很重要,那應該要怎麼分類 網站的內容比較合理呢?
12 1. 階層之間應該是互斥的 • 如果不同階層的分類結果 有重疊,階層很容易失去 分類的意義。 • 模糊組織規則如主題、任 務、族群等建議以網頁為
單位分組資訊與建立結構 Source: 美國國家癌症研究院
13 2. 考慮廣度與深度間的均衡 • 過於窄而深的: 使用者需 要經過多次的選擇才有辦 法找得到想找的東西 • 過於廣而淺:
首層導覽列 的選擇會過多而超過使用 者的負荷 Source: PC home
14 建議做法 • 比起窄而深,建議的做法是在新專案的設計上選擇採 用廣而淺的階層架構。 • 理由是若有新內容要加入,很容易動到已經存在的階 層而改變到首頁的內容(或排版),使用者會覺得與過去 的使用經驗不同,對開發者或產商而言時間或金錢成 本也會相對較高。
檢視既有功能:導覽列切換 目前Daily Learning的階層最深到第三階。 15
16 3. 超文件與標籤
17 超文件與標籤 • 用超文件連結到資訊區塊,但用於導覽上很容易使使 用者迷失方向,因此僅建議作為結構性低且創意程度 高內容的補強。 • 另一種分類方式是社交分類, 常見的像是臉書或是 Twitter的hash
tag,以這種方式讓使用者自由分類, 此外也讓使用者更有參與感。
18 實作功能: 標籤分類 • 以文字預處理(詞幹提取、 詞法分解和去除停用詞) 處理每篇文章的標題 • 再從中萃取出每個單字的 出現次數,以頻率高的詞
作為標籤結合關鍵字搜尋。
19 Thanks! Any questions? You can find me at:
[email protected]