Material Design exploration: NBA scores
Applying the Material Design language to a concept NBA app.
Google introduced Material Design a few months ago. I watched the Material Design reel more than a few times to re-create portions in Framer: the music player and the white box sequence.
I enjoyed making those, but I wanted to zoom out a bit and apply the guidelines to a more comprehensive flow. It’d be helpful in understanding Material Design principles and seeing how the guidelines influence the design process.
The idea
I’ll be designing an app for checking out NBA results. Not mind-blowing, but it’ll be good to start with a baseline of existing solutions. I’ll be able to focus on applying the Material principles with some decisions already made.
There’s still some room to work out a few of my own ideas. I think it’d be great to go a level deeper into single plays to see discussions around them. I think it’d help show which plays were most interesting and get a feel for the game.
Sketches and screens
I’ll be designing multiple screens to see how certain ideas work (or don’t) with the guidelines. I’ll go screen by screen and share sketches and iterations along the way explaining the process leading up to the final screen designs.
Here’s an early sketch of the overall user flow:
Details for each screen changed but I stayed close to the user flow and designed the following screens:
- Game list
- Game Summary
- Play-by-play
- Game highlight
- Team stats
Game Selection
A look at existing solutions
The opening screen of the app will display today’s games and results. Here are similar screens from NBA.com and ESPN.com:
The information is nearly the same: teams, team icons, scores, and whether the game is final or not.
Sketch
I recently wrote about applying the Google Ventures design sprint methodology to two personal projects: a photo layout interface and a food tracking app. This isn’t exactly a design sprint, but I’ll be using some of the exercises.
One of my favorite exercises from the design sprints is Crazy 8s, which are based on the 6-8-5 exercise. You have 40 seconds to sketch an idea, move to the next idea for 40 seconds, and repeat until eight rounds are complete.
Here’s a set of sketches of game selection screen ideas:
Picking Material components
From the different Material components, I narrowed things down to a list, grid list, or set of cards. Let’s take a look at these components.
Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text, optimized for reading comprehension, with the goal of differentiating between like data types or qualities within a single type of data.
A grid list is best suited to presenting a homogeneous data type, typically images, and is optimized for visual comprehension and differentiating between like data types.
and Cards:
Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.
I didn’t use cards because each game has identical data types and a single action: view the game summary. I didn’t use a grid because it wouldn’t be as scannable as a normal list. But hey, let’s see what a grid would look like anyway.
I tried a few variants of the content tiles—you typically wouldn’t mix these but I wanted to show a few different options.
For complete games, heavier weight is used for winning team abbreviations, but it’s kind of hard to tell. However, the thumbnail image does a great job showing the game narrative.
In-progress games use a secondary color with additional game info. The thumbnail is a video broadcast still to further differentiate in-progress from final scores.
Your eyes have to zig zag a bit to find teams and scores but I think it’s really interesting visually.
Final Screen
Here’s the game selections screen, which ended up pretty similar to NBA.com’s game selection screen:
The list component allows us to scan the left side to find teams we’re interested in. Following the specs, we end up with a list with enough vertical separation to identify pairs of teams.
A secondary color indicates in-progress games with information about time remaining and possession. If the game is final, that line changes to a game headline.
Game Summary
The game summary presents an overview of the game. You already know who won from the game selection screen, so the game summary adds information about who played well and what plays were important. You should be able to get a sense of the story of the game.
Existing solutions
Here are the first screens when clicking into a game on NBA.com and ESPN.com:
NBA.com presents the scoring breakdown by quarter, field goal percentage, television network information, and thumbnails linking to highlight clips. ESPN.com presents the AP recap and a large thumbnail linking to a comprehensive highlight package.
Sketch
Here’s a set of sketches with game summary ideas:
A lot of the ideas focus on a left/right split to separate team information. This split doesn’t work well within the The Material Design guidelines. Keylines are important in Material Design. From different examples, it seems like primary information should be aligned to the left vertical keyline.
Material components: hero images and avatars
I want to include an image that summarizes the game result, similar to the thumbnails in the mockup game selection grid. Again, lists show top performers and top plays. And avatars in these lists represent the players.
Keylines are emphasized throughout the Material Design guidelines. There are plenty of examples so I’ll be looking at those to figure out relevant keylines for the information I want to present.
The guidelines provide plenty of suggestions for imagery:
Hero Images—Hero images are images that are usually anchored in a prominent position, above the fold, such as a banner at the top of the screen. They serve to draw in a user, provide context about the content, or reinforce brand.
Avatars and thumbnails — Avatars and thumbnails represent entities or content, either literally through photography or conceptually through illustration. Generally, they are tap targets that lead to a primary view of the entity or content.
Brief digression: images for avatars
NBA.com has nice urls for each player (example: http://nba.com/playerfile/rashard_lewis/) and each profile page has a nice transparent PNG to pull to create avatars. But they don’t have profile pages for former players. I scoured Google Images for an official profile photo of Michael Jordan and all I could get was this:
Let’s go with a different one. For this screen and the others, I use a colored background representing their team.
Final Screen
I followed the suggested keylines to line up the back arrow and list content.
The hero image follows the guideline ratios and helps display the game’s narrative. Of course, we won’t have a timeless photo for any random regular season game, but there’s usually something representative of the result.
The eTicket example in the guidelines helped with placing the left/right separation for scores.
From here, you can tap into top performers to view other player stats or tap a play to view the play-by-play.
Team Stats
Existing solutions
Here are the team stats sections on NBA.com and ESPN.com:
On NBA.com, it’s a part of the game summary page a few screens down. ESPN.com has a separate tab for stats. The bench is hidden by default and you tap to expand.
First iteration
I was starting to get a hang of the Material design components so I skipped the paper sketches. I knew this section would be another set of lists.
Here’s the first iteration. It’s a list with a separator for the bench. The second line is used for the three key stats. Minutes played are displayed along the right keyline as secondary information.
In hindsight, I think it would’ve been good to sketch ideas out on paper because the investment is minimal compared to the return.
Right now there’s no quick way to switch to the other team or view expanded stats. Let’s see if other components can help.
Material components: tabs and list controls
We want to toggle between teams and view expanded stats for a player. A couple components work well for these issues: tabs and list controls.
Tabs:
A tab provides the affordance for displaying an associated grouping of content. A tab label succinctly describes the tab’s associated grouping of content.
Expand/collapse list control—Expands and collapses a list view vertically to show and hide existing list items.
Final Screen
Here’s the team stats screen:
The tabs allow you to switch between teams. You can expand a single player’s stats to see extended stats.
The list controls are in place but the expanded data needs a lot of formatting work. A different component might be better. I couldn’t find examples of tabular data in the guidelines, so maybe a set of custom cards could work somehow. Definitely something I’m thinking about.
Play-by-play
Existing Solutions
Here are example play-by-play sections on NBA.com and ESPN.com:
They’re very similar. A colored bar differentiates plays from different teams. (It’s a little hard to see in the ESPN.com because they are different shades of gray for this game.) Time is on the left and score is on the right.
NBA.com only displays the score for scoring plays, and also repeats the score at the beginning of scoring play descriptions: [SAS 22–29]. I think it‘s sharing data with the desktop version, which doesn’t have the separate score column.
A (very) early iteration
Before I started this project, I put together this play by play concept. I wasn’t following the Material Design guidelines so it was just a look at what a play-by-play screen could look like as sort of a stream.
This is the seed that led to applying Material Design principles to an entire user flow.
First iterations
Again, I skipped the paper sketches and jumped in. Again, it might’ve been good to have sketched some ideas out on paper. Let’s take a look at how things progressed.
- In the first iteration, only scoring plays are shown, but we display time and the person who made the assist. I added a white outer circle to the player’s avatar for 3-pointers. All these iterations follow the list measurements in the Material Design guidelines. I think it feels crowded because there are tight groups of identical avatars—something you wouldn’t see in, say, a contact list.
- Let’s space things out. I added the non-scoring plays back in using the secondary font styling to de-emphasize them. I really like the spacing now. Without looking at the precise time, the extra space gives a sense of time passing between scores.
- I swapped the avatars and timestamps. As mentioned in an earlier section, the left keyline is for primary information and the right keyline is for secondary information. Who scored is more interesting than the timestamp.
Material component: snackbar
While scanning the play-by-play screen, a user might get curious about how a certain player performed. We want to show them some information without pulling them out of the stream.
Modals come to mind, and a related Material component is the dialog:
Dialogs are typically used to prompt users to make a specific decision as part of or before continuing with a task or process.
This isn’t really what we want. You shouldn’t be making a decision, you just want to see a player’s stats. There’s a better Material component for that.
Snackbars provide lightweight feedback about an operation in a small popup at the base of the screen on mobile and at the lower left on desktop.
When you tap a player’s avatar, you’ll get a snackbar with important stats:
You can click “more” to navigate to the play-by-play section.
About those iterations…
Here’s where sketching on paper would’ve helped out. The lists on all three iteration are all missing the score. I think the score is more important than the timestamp, but we do need both.
NBA.com’s desktop site displays time and score together like this:
We’ll add the score in along with the toast component in the final screen.
Final Screen
Here’s the final screen. I added the score to scoring plays only, and kept the time below. The score is colored white to help with scanning.
The toast example is at the bottom of the screen. It appears for a couple seconds before leaving the screen.
Single Play
Here’s where we go a level deeper than what we see on NBA.com or ESPN.com. From the play-by-play screen, you can tap a single play to view more information about that play.
Two points is two points, but a huge dunk generates more activity than a random lay-up. That activity includes site comments, tweets, forum discussions, texts between friends, etc. It’d be cool to capture that in the single play view to get a better sense of the game narrative.
There won’t be a final screen for the single play, instead I’ll just share some idea explorations. We’ll use a new component in some of these explorations.
Material component: floating action button
Most of the explorations combine Material components we used in previous screens. The only new component is the floating action button:
A floating action button should represent the primary action in an application
Some single play screens have video highlights, so the primary action will be to play the video. When the play has a video, tapping the floating action button starts the video. If there’s no video, there’s no floating action button.
Exploration one: highlight with expert conversation
This screen has a video so you can tap the floating action button start the video.
The play description and score are displayed. The conversation section has an expert’s thoughts on the play.
Exploration two: highlight with user conversation
Here, we have another play with a video. We removed the score to display more of the conversation. Instead of an expert’s thoughts, we have user comments.
This is like any video clip page on sports sites and it reminds me of how much I try to avoid the comments.
I’ll toss this screen in the suggestion box shaped awfully like a wastebasket.
Some inspiration: Sports Genius and Grantland
I’m a fan of (Rap) Genius and how they’ve expanded the annotation experience from music to everything. They did an annotated live blog for some of this year’s NBA Finals games.
Here’s an excerpt from their Game 5 live blog:
The plays are annotated like a lot of songs. Some have straight text annotations, some have GIFs, and some have video embeds. Some are more serious than others.
I’m also a Grantland fan. Throughout the season, there are in-depth breakdowns of plays from games. It’s incredibly insightful and I don’t know where else I could go for it.
It’d be great to be somewhere in between Genius and Grantland. Some plays can have annotations meant to entertain and other plays can show expert analysis.
Exploration three: highlight with annotation
Here’s a look at another exploration with these annotations and expert breakdowns in mind:
I added the blue secondary color text on the play-by-play screen to indicate that a play has an expert breakdown. The single play screen is similar to the other explorations. Again, there’s video of the entire play. Below that is the main content area with the expert breakdown.
Takeaways
Google’s Material Design language is comprehensive. I created a mobile example, but the guidelines cover tablet and desktop cases for all the components. And I only used a fraction of the available components.
Going through this exercise helped me get a better understanding of when to use and when not to use different components. I also saw firsthand that following the keylines leads to sensible layouts.
This is a start and I’m looking forward to exploring Material Design further. In particular, it’d be good to take these screens a step further and create a prototype. Motion is such a crucial element in Material Design so that’d be great to explore.
Also, I should do sketches for every screen—the return on investment is so high. Thanks for reading—I hope it was interesting, useful, or both if I’m lucky. I’d love to hear feedback on Twitter: @makeshowlearn
Resources
Material Design Guidelines: http://www.google.com/design/spec/material-design/introduction.html
Material Design Reel: https://www.youtube.com/watch?v=Q8TXgCzxEnw
Roman Nurik — Material Design in the 2014 Google I/O app: https://medium.com/@romannurik/material-design-in-the-2014-google-i-o-app-e3b22caffae6
