I’m one of an estimated to 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. 49% 70% So I thought I’d take some time to help explore the user experience on the . Here is a screenshot of their current interface, minus the ads. NFL.com standings screen 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: 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. It’s very hard to compare teams 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. The table is too noisy **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. With the above in mind, I created a functional to explore a different approach. Instead of broadly thinking about this as or , try thinking of it as having and . If the pros make the common user needs easier to achieve, and the cons make uncommon user needs harder to achieve, then the trade off is likely worth it. prototype better worse pros cons This version addresses some of the issues I highlighted above. Showing each conference side-by-side does make comparisons much easier. But, there will always be trade offs. Here are a few potential problems and compromises I’ve made with this approach: UX I thought about introducing a new functionality where if you click on a team, it highlights the rows of the teams in the division for comparison. Ultimately, I think that interaction is unintuitive. If you click on a team, the expectation is to see more about that team. Another option is to introduce filters in the same section you select the year. The default could be followed by , , and . It’s harder to compare divisions All Teams North South East West If you want to see if offensive or defensive success translates to more wins, you’ve still got to memorize stats, click a button to change the tables and compare your memory to the current state. My assumption is this screen is more for comparing different teams. If you want to do deeper analysis on a single team, the team screen should solve that problem. Comparing offense/defense to wins/losses My initial approach was to add the exact same table columns on offense and defense. This approach makes some sense but the visual similarity adds confusion. This caused me to introduce a label on the top right of the table for , and . I am not at all happy with that solution. More thought should be put into figuring out what people are looking for in determining offensive and defensive output and the tables should be more tailored towards those expectations. Offense too visually similar to defense Record Offense Defense When you interact with one part of the app and it reacts as expected, great. When another part of the app also reacts to that interaction, your brain is like “Whoa, what’s going on here”. It’s possible this is only a minor annoyance and the overall experience is better so users overcome the friction. Or maybe not. This is definitely something to think about while testing. Syncing table animations is a bit jarring v1Labs.com Thanks for checking out my latest prototype. 🏈 Feel free to and let me know what you think. Also, check out and follow me for more UX prototypes! play around with it here v1Labs
