On Basketball Reference, we’ve redesigned our in-page navigation system (we call it the “inner navigation”) that you use to access supplemental content (such as Game Logs and Splits) as well as the “On This Page” section (which serves as the page’s table of contents). While the content is all the same, we have changed the presentation on desktop from a horizontal bar to a vertical sidebar. The interaction is click/tap based instead of hover-based. The inner navigation is also now the same on desktop and mobile. This is an incremental design update and not part of an extensive design overhaul. This change is live on Basketball Reference, but will be coming to the other Reference sites in the coming weeks.
Because this is the most extensive change we’ve made to the design of our sites in quite some time, so I’d like to walk you through the process. First, here’s what it looks like:
At Sports Reference, we describe our design philosophy as “aggressively functional.” We provide an extensive repository of sports data on a platform optimized for speed, accessibility, and ease of navigation, inviting all users to delve deeper into the statistics. We take a measured and user-focused approach to design updates. We recognize that our sites are a core utility, so any change must be rigorously vetted and purpose-driven to ensure it enhances the experience without disrupting the familiarity and stability you rely on.
Our current site design dates all the way back to February of 2017. We’ve done a lot since then. We’ve added another sport with FBref. We relaunched the Play Index tools as Stathead. We acquired and relaunched Immaculate Grid. We’ve added new features and greatly expanded our data coverage across sports. We’ve done a ton of infrastructure work behind the scenes. We’ve started building our next generation of products. Through all this, the design of the Reference sites pretty much stayed the same.
While the current site design has served us well, there are opportunities for improvement. But don’t worry, you’re not going to open the site one day and find that everything has changed. We’re taking an incremental approach, focusing on specific areas that are relative pain points for our users. It’s an evolution rather than a revolution.
First, we’re focusing on the inner navigation. This is obviously a very important interface pattern since it is one of the key entry points to the rabbit hole our users so affectionately refer to. Here are some areas for improvement we identified through user feedback and usage analytics:
- The desktop inner navigation could be difficult to use due to the hover-based interaction. The wide width (full-screen) combined with the short height meant you needed to be quite precise with your mouse movements to click the link you wanted.
- The inner navigation was easy to ignore on both desktop and mobile. Far too often, users write in to us asking for features that we already have. Often, these features are on supplemental pages that are accessed through the inner navigation. Many links were hidden behind drop-downs and the links in the inner navigation were dark gray rather than our usual blue link color.
- The inner navigation experience was completely different on desktop than it is on mobile. On desktop, it was presented in a horizontal bar of links and drop-down menus. On mobile, it was presented as a single vertical drop-down menu.
Here’s how the new design addresses each of these areas:
- The inner navigation no longer relies on hover interactions to navigate. It is click and tap based. Additionally, because the content is presented in a sidebar, the line widths are much shorter for easier scanning.
- The inner navigation is now presented as a sidebar on desktop—a pattern that users found much more intuitive in our multiple rounds of testing. Links are presented as blue and underlined, like other links on our sites. Additionally, the “On this page” section is expanded by default and presented vertically. Now it behaves much more like a table of contents that you might see on a site like Wikipedia. Additionally, the sidebar stays in place as the page scrolls, making it much easier to quickly navigate to different sections of the page.
- Since the inner navigation is now the same on desktop and mobile, it should increase familiarity for users who switch between different devices. Additionally, if you wish to hide the sidebar, you can close it just like on the mobile site.
Some other considerations:
- To make room for the sidebar, we increased the maximum width of our layout from 1450 pixels to 1600. More and more users are using mobile devices, but people are still using larger screens. As those screens are getting larger, we’re utilizing more of that space.
- At this time, the desktop experience has only changed from a horizontal layout to a vertical one. All content is the same. We’ll be looking at ways to optimize the inner navigation content for a vertical layout rather than a horizontal one. For example, we now have more room to move more links to the top level so fewer are hidden in expanding and collapsing sections.
- At this time, this new inner navigation is only on Basketball Reference but it will be coming to other Reference sites in the coming weeks.
We received feedback from hundreds of users along the way. Back in March, my colleague Freddy and I presented some in progress design concepts at the SABR Analytics Conference in Phoenix. In that talk, we shared some design concepts we were considering and asked audience members to vote for the ones they thought we should explore and gave them space to provide feedback. The inner navigation changes were one of two concepts that we received a very strong signal about from hundreds of attendees.
Using that feedback, we refined the design and created a new prototype. We conducted a round of interviews with users who viewed the prototype, interacted with it, and shared their thoughts. Using that feedback, we built the feature in code. Finally, ahead of the launch, we held one more round of interviews so that users could interact with the actual code to see how the clicks felt, how the scrolling worked, and how the page felt with a sidebar present. In both rounds of usability testing, users unanimously agreed the vertical inner navigation was an improvement. That was the signal we needed to launch.
But we’re not done listening. Please tell us what you think through our feedback form.
