Level 1 height Level 2 width Height = 2, 2 levels Width = 4 Shallow tree height width Height = 5, 5 levels Max width = 2 Deep tree

Level 1 breadth = 5 Depth = 3 Maximum breadth = max{5, 4, 3} = 5

Depth = 5. This is NOT the breadth of the menu tree. Level 1 breadth = 5 Level 2 breadth = 3 Depth = 5. This is NOT the breadth of the menu tree. Maximum breadth = max{5, 3, 3, 5, 3} = 5 Mean breadth = 3.8

The menu tree here has two levels, depth = 2 The menu tree here has two levels, depth = 2. But the maximum breadth = 35 Level 1 breadth = 9 35 options This is a shallow tree.

Example of structuring a menu level with many items without increasing the depth

Summary Depth = # of levels Breadth = Can be described as average items per level or as maximum items per level. Further reading: Flat vs. Deep Website Hierarchies The depth/breadth trade-off in the design of menu-driven user interfaces Hierarchical Menu Design: Breadth, Depth, and Task Complexity More… Depth vs. Breadth of Hierarchical Menu Trees Web navigation structures in cellular phones: the depth/breadth trade-off issue