Hierarchy is a principle that organizes complex relationships into simple and visual structures. When information is grouped together and related, several ways to visualize these relationships is through tree, nest, and stair structures. This allows the user to understand the structure of a system by seeing the relationship between the parent element and children elements. Tree structures represent high-level views of relationships. Nest structures show information grouped by function and hierarchy. Stair structures reveal hierarchies in systems that are growing and unpredictable (Lidwell, Holden, & Butler, n.d., p. 122).
Example 1: Tree, Nest, and Stair Structures
The Universal Principles of Design illustrates the 3 structures of hierarchy. Source: Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler
Example 2: Mac OS Nested File Structure
Mac OSX does nested file a different way. You can see the hierarchy between parent and child in a horizontal fashion. Source: Mac OS
Example 3: Hand drawn hierarchy
I drew another representation of how I organized different files for Project 1. I had little blurbs written as documents and I put them in a folder with the images I wanted to attach.
Resources:
Lidwell, W., Holden, K., & Butler, J. (n.d.). Universal Principles of Design. Rockport.
An interesting example of nested hierarchy can be found in the Google Play Store on Android. The Play Store uses a top row of categories describing different media items (e.g., Movies & TV). Selecting one of these items reveal the nested children categories (e.g., Top Selling, New Releases,…). Furthermore selecting one of these children categories further reveals even more nested children. A single movie might be seen as a child with no children. However, this is not the case with the Play Store design. A movie has “Similar movies” nested within. This nesting system creates an infinite nesting of items. This infinite nesting system is continued throughout this particular interface.
https://drive.google.com/open?id=1MxQoLc_VcYtqZuuRSBNkXsde1Z3Jhv79