UX Prototype: NFL Standings Table

May 20th 2019
Author profile picture

@DaneDane Lyons

CPO at Hacker Noon

LinkedIn social iconfacebook social iconTwitter social icongithub social icon
I’m one of an estimated 49% to 70% of Americans who counts themselves a fan of the NFL. I’m sure they’re busy preparing for the upcoming 2018 season. Engaging ~200 million US fans can’t be easy.
So I thought I’d take some time to help explore the user experience on the NFL.com standings screen. Here is a screenshot of their current interface, minus the ads.
The blue line represents what you can see above the fold on my Macbook Pro with their current navigation. If I delete the navigation, the red line represents the new fold.
This isn’t an exhaustive list, but there are 3 primary issues I’d like to address with this interface:
It’s very hard to compare teams
Using so much vertical real estate to represent this data means users are only able to view a small portion of the table at a time. This forces you to scroll up/down hunting for a team. Then you memorize 1–2 relevant data points. Then you hunt for another team and compare your memory to what’s on screen. This is a slow process that breaks down as you try to compare more than 2 teams at once.
The table is too noisy
I seriously don’t think the average fan cares about the percentage of games a team wins within their conference. I consider myself to be a fairly serious fan and the only reason I’d care about half of the columns here is in a playoff tie breaking scenario. In most cases, this extra data is just adding cognitive overhead.
Unnecessary tabs
The 3 tabs at the top just toggle between showing exactly the same information by clustering teams into different buckets. I do find it nice to see teams bucketed by division but there should be a better solution...



The Noonification banner

Subscribe to get your daily round-up of top tech stories!