Hierarchy (noun.)
Definition: A classification method that applies successive ranks and levels.
Also referenced as: Hierarchical (adjective) Hierarchy diagram (noun) Hierarchically (adverb) Hierarchies (noun) Hierarchy Diagram (noun)
Related to: Broad, Deep, Heterarchy, Narrow, Pattern, Relationship, Shallow, Sitemap, Structure, Taxonomy
Chapter 3: Face Reality | Page 72
7. Hierarchy Diagram
A hierarchy diagram depicts how objects, concepts, people, and places relate to each other. In website design, hierarchy diagrams are often called sitemaps.
L-brackets, as seen below, tend to be easiest to read, but you may also see hierarchical relationships depicted as trees or pyramids.
Chapter 3: Face Reality | Page 73
8. Mind Map
A mind map illustrates the connections between concepts, objects, ideas, channels, people, and places within a particular context.
These concepts don’t necessarily live under an established hierarchy or sequence. For example, in the diagram above, I’ve outlined the various aspects of running a pizza parlor as the owner (me!) might think about them.
Chapter 3: Face Reality | Page 76
Try diagramming.
- Make a block diagram that shows how the pieces of a concept interrelate.
- Demystify a process by making a flow diagram.
- Break your latest project down into its individual tasks and make a Gantt chart.
- Compare a group of restaurants in your neighborhood in a quadrant diagram.
- Explore what happens when concepts or objects overlap using a Venn diagram.
- Break any multi-user process into a list of tasks per user with a swim lane diagram.
- Depict the content and organization of your favorite website in a hierarchy diagram.
- Unload all of the cool ideas in your mind right now in a mind map.
- Explain how to make your favorite food with a simple schematic. Bonus point for exploding it!
- Make a journey map of a day in your life.
Chapter 6: Play with Structure | Page 137
Taxonomies can be hierarchical or heterarchical.
When taxonomies are arranged hierarchically, it means that successive categories, ranks, grades, or interrelated levels are being used. In a hierarchy, a user would have to select a labeled grouping to find things within it. A hierarchy of movies might look like this:
- Comedies
- Romantic comedies
- Classic comedies
- Slap-stick comedies
Hierarchies tend to follow two patterns. First, a broad and shallow hierarchy gives the user more choices up front so they can get to everything in a few steps. As an example, in a grocery store, you choose an aisle, and each aisle has certain arrangement of products, but that’s as deep as you can go.
A narrow and deep hierarchy gives the user fewer choices at once. On a large website, like usa.gov, a few high level options point users to more specific items with each click.
When individual pieces exist on one level without further categorization, the taxonomy is heterarchical. For example, each lettered box in the arrangement in this illustration is heterarchical.
Chapter 6: Play with Structure | Page 141
Hypertexts bridge taxonomies.
We use hypertext to connect things without necessarily placing them together.
Hypertexts are fundamentally different from hierarchical, heterarchical, and sequential taxonomies, because they don’t change where things are located, just how they’re found.
We use hyperlinks to allow users to jump between taxonomies instead of duplicating or moving content. For example, we might hyperlink the bolded words throughout this book. If a user clicks on one of them, we could take them to a definition in the lexicon. We’re moving the user to the content instead of repeating it.
A signpost directing you to a store around the corner is also hypertextual, because it sends you to a specific location without changing the location of the store.
Similarly, websites use hypertext to link to content without needing to repeat it.
Chapter 6: Play with Structure | Page 142
Most things need a mix of taxonomic approaches.
The world is organized in seemingly endless ways, but in reality, every form can be broken down into some taxonomic patterns.
Hierarchy, heterarchy, sequence, and hypertext are just a few common patterns. Most forms involve more than one of these.
A typical website has a hierarchical navigation system, a sequence for signing up or interacting with content, and hypertext links to related content.
A typical grocery store has a hierarchical aisle system, a heterarchical database for the clerk to retrieve product information by scanning a barcode, and sequences for checking out and other basic customer service tasks. I was even in a grocery store recently where each cart had a list of the aisle locations of the 25 most common products. A great use of hypertext.
A typical book has a sequence-based narrative, a hierarchical table of contents, and a set of facets allowing it to be retrieved with either the Dewey Decimal system at a library, or within a genre-based hierarchical system used in bookstores and websites like Amazon.com.
Chapter 6: Play with Structure | Page 144
Play with Structure
Because your structure may change a hundred times before you finish making it, you can save time and frustration by thinking with boxes and arrows before making real changes. Boxes and arrows are easier to move around than the other materials we work with, so start there.
Try structuring the mess with common patterns of boxes and arrows as shown on the next page. Remember that you’ll probably need to combine more than one pattern to find a structure that works.
- Assess the content and facets that are useful for what you’re trying to convey.
- Play with broad and shallow versus narrow and deep hierarchies. Consider the right place to use heterarchies, sequences, and hypertext arrangements.
- Arrange things one way and then come up with another way. Compare and contrast them. Ask other people for input.
- Think about the appropriate level of ambiguity or exactitude for classifying and labeling things within the structure you’re pursuing.
Chapter 7: Prepare to Adjust | Page 149
The sum is greater than its parts.
We need to understand the sum of a lot of pieces to make sense of what we have.
For example, let’s say we’re working on bringing a product to the market. To support this process, we might create:
- A hierarchical diagram of how the product is structured and labeled for users
- A flow diagram of the sequence users experience in the product
- A lexicon of terms the product will use, vetted to make sense to our audience
These are all important pieces individually, but we need to look at them together to answer questions about the whole such as:
