How Fenway Park Taught A Lesson in Application Navigation
This weekend I was in Boston to run Spartan Races at historic Fenway Park. The stadium is 104 years old and the oldest stadium in major league facility. Boston has been around for several centuries. The streets and highways still follow the paths laid out back in the early 1700s, when horses and carts ruled the roads. This means traffic patterns are confusing and to a tourist, like me, frustrating.
If you ever visit the US Northeast and have become accustomed to more 'modern' roads and signage you can quickly find yourself lost. That is where I found myself both Saturday and Sunday locating and leaving the stadium. Boston is not unique, you can visit just about any new city and get lost. For example Coral Gables Florida does not have street signs on poles. Instead they are pillars on the ground. I have seen this in other towns too, causing me to get confused.
Sunday was particularly frustrating as I followed signs from the Massachusetts turnpike to Fenway. I saw a sign on the highway, directing me to take exit 18. From there another sign indicated a turn, then a stop light, with no sign. It happened to be a five way intersection, what should I do? I chose to go straight and to the right, which was the right choice. However, this was still confusing because I was on a new highway, for a couple of miles. I could see the stadium to the right, as I passed right by, trapped without an exit. About a half mile later I decided to take an exist, despite no sign pointing to the stadium. I was greeted with more signs, one clearly stating Fenway to the left. Despite that being away from the stadium I had just seen I followed. And of course found myself going farther and farther away as I followed Boylston, a one way street at that point. Time for a u-turn!
After 10 more minutes of retracing my path, all the way back to the fateful wrong turn where the sign said to go left. This time, trusting my instincts, I turned right. This time I found the stadium!
As I was suffering through this navigation experience I kept thinking about application design. There are two features customers want, fast experience and easy navigation. How often do you find yourself getting lost in a new application? As a developer what affordances do you provide users to find content and features in your sites?
Key Points to Designing Web Navigation
Remind People Where They Are
As customers navigate through a site you should make sure they know where they are. This could be a document title, a section icon or color. The point is you should employ a consistent queue for the customer to know where they are. This is extra important on smaller screens. You may not have the browser affordances we enjoy on larger screens. There might not be a back button or title bar available. Finding a subtle waypoint could be the difference between a customer staying & returning or leaving and never engaging.
Put Navigation in Standard Locations
Don't listen to that creative side of your brain, use standard locations. This means 'desktop' layouts should use either horizontal navigation across the top or vertical navigation along the left-hand side of the screen. This gets trickier on smaller screens due to real estate limitations.
Today the standard small screen technique is to use either a hamburger or vertical dots to indicate the application menu. I know I wrote a few years ago, questioning the hamburger icon. Since then it seems to have become an accepted standard. Microsoft even adopted the hamburger as a standard menu toggle, but with some guidance.
The hamburger is often used as a consistent navigation element that’s the “home” for an app, always there, helping you go where you want to go. It’s less effective when the items listed in it don’t have a clear hierarchy, or when you need to access it frequently to accomplish your task. Sometimes the app bar, tabs, pivot, or a combination could be better controls for the job.
The hamburger is not the only accepted convention. Google introduced 3 vertical dots and later advanced this to a 3x3 grid.
The general consensus is the hamburger is about navigation in your current context, where the grid is about navigating to a new context. For example the grid often exposes a 'navigation shelf' containing links to other 'apps'. Google and Microsoft use this convention to allow users to switch between applications within a suite, like Office 365.
Additionally you may want to employ an application bar across the bottom or tabs just below the application header. My advice is to study design language style guides produced by Google, Microsoft, Apple and others that have the time and budget to do broad research. Apply their recommendations to your applications.
Think Like a Tourist
Finally, design your navigation as if every visit is unprimed. As we build our applications and design the interfaces we build muscle memory to know where everything is. But what if you used your application for the very first time, could you find how to accomplish even the simplest tasks? I guarantee you have been in this situation more often than you would care to admit. Opening a new application, trying to figure out how to accomplish something 'obvious'.
Maybe you were just trying to evaluate a new application, deciding if you wanted to keep the app or maybe even buy something from the company. That first impression or engagement probably came down to how easy you found the navigation to the goal to be. The easier it was the happier you were. The less obvious it was the more frustrated you were and most likely 'gave up'. Don't let your navigation be a reason potential customers give up on your brand.