Navigating the Grocery Store:
An introduction to Information Architecture
Imagine this scenario.
You just got home from a trip and need to restock your fridge. While away, a new grocery store opened that’s closer to your house, so you write a quick list of must-haves and walk, bike or drive to get what you need to make dinner.
Once you grab your basket and walk in the front door, you realize you have no idea how to find the eggs, bread and jelly you need. The store didn’t bother to put up a single sign to tell you what each aisle contains. You look around for something recognizable to help orient yourself, and walk down the aisle closest to you since you see what looks like jars of peanut butter and think jelly might be close by.
But this isn’t any normal store. You find a few jars of one brand of peanut butter next to tortillas and olives. Across the aisle are fresh pears and coffee beans. It only takes a minute before you give up on this new place and head to the farther, but much easier to navigate, grocery store.
Grocery Stores & Information Architecture
Information architecture (IA) is the backbone we use to build simple and complex websites, programs and organize ideas. It’s the means to an asynchronous conversation that can be repeated over and over by any number of people. When building a website, it’s the structure of content, the menus and the actual information on the page. At your grocery store, it’s the signs and systems that help you find exactly what you’re looking for.
Web users might not write a list, but they’re typically trying to accomplish specific goals.
While grocery stores and websites might not appear to have a lot in common, both are places people go when they’re looking for something. Web users might not write a list when they visit a website, but they’re typically trying to accomplish specific goals. Trade buying eggs for sharing a picture on Facebook, and you start to see that the grocery store is like a physical website with features and ways to accomplish your tasks.
Think about how you navigate a brand new store. Most don’t hand you a detailed map outlining where every item in the store is located. Although that might appear nice, it would likely look more like a phone book than a map and constantly change as new items are sold and old items are phased out. Instead of a map, grocery stores typically use signs with general categories to indicate what’s in each aisle. These signs serve the same purpose as main navigation items on websites. Both represent what things you’ll find if you navigate down them.
Web developers and designers call these signs information architecture. Websites use menus, headers, animation and interaction to visually show users where they are and how to find what they’re looking for. For example, a university website’s menu might include Academics, Applying and Campus Life. If a user wanted to learn about the university’s English program, they can find what they’re looking through via elimination, since each topic of the menu makes it clear what information each section contains.
Go back to our original example of the grocery store with no signs. By including waypoints and grouping items by category, a brand new store suddenly becomes accessible without knowing where everything is first. With a quick glance at each aisle (or menu item on a website), we can find almost any item thanks to a logical organization by category and clearly labeled signs. By applying a top level information architecture with categorization, we have the basis from which to organize everything else in the store. Once you say jelly is in aisle nine, customers expect to find all of the jelly together, instead of finding it spread across multiple aisles.
On the web, it’s the difference between engaging a user and chasing them back to Google.
Designing a store around customer expectations makes the difference between a repeat customer and someone who can’t find what they’re looking for. On the web, it’s the difference between engaging a user and chasing them back to Google to find what they’re looking for.
Signage and categorization is just the most visible example of how information architecture intersects with grocery stores. There’s a lot to be learned from your local grocery store. The next time you need to grab a few things, take an extra minute to note the ways the store guides you from the entrance to the items you’re looking for, and chances are you’re notice a principle of information architecture that can be translated to better serve your web users.
Shout out to How to Make Sense of Any Mess by Abby Covert for inspiring this article. If you’re looking for an intro to the many intricacies of IA, definitely check it out.
