The Green Bay Packers may have won Super Bowl 2011 yesterday, but does their champion status stand up online? It was exciting to see the Packers and Steelers battle on the field, and it’s just as fun to compare how they perform on the web. Who will be the website design champion; Packers.com or Steelers.com?
White space, text and graphics all influence the overall design of a website. Oneupweb conducted the study, “Revolutionizing Website Design: The New Rules of Usability” which revealed that websites should be appropriately balanced for the user experience, by consisting of the following proportions: 30% graphics, 30% text and 40% white space. That being said, let’s see who will score the most points in the game of best designed homepage.
Beginning with the first half of the game; take a look at the screenshot featuring the Packers.com homepage. Get ready, it’s game time!
The white space [refer to figure 1] is almost nonexistent on Packers.com. A balanced website usually consists of 40% white space and the Packers’ homepage seems to have less than 10%—fumble for the Green Bay Packers. More white space would have benefited visitors—leaving them less bombarded with graphics, videos and text, and better able to navigate to their desired destinations. The distractions on the homepage overwhelm visitors and may be causing them to leave the site. Successful website design should be action-oriented—emphasizing positive user experience. Users don’t want to spend time searching on a site, they expect instant results.
While there are various reasons for people to visit Packers.com (to purchase tickets, look at team member stats, buy merchandise, etc.) with the appropriate balance of graphics and text, the Packers’ website could encompass clear action paths if the main navigation [refer to figure 2] played a more dominant role on the page. Those action paths would help accommodate the needs of every visitor. The site also has a confusing secondary navigation [refer to figure 3] as it has two competing sections; large slideshow of images that link to various stories, and a column that serves as a news feed, which consists of timely press coverage, events and information about the team. Unfortunately these two sections don’t support one another and cause distraction for the user. The Packers’ homepage displays a number of photos and the visuals are good, but not great—the imagery could have supported the content better to aid site visitors with navigation. So far, the Packers receive a field goal, but don’t earn a touch down.
Let’s see how Steelers.com performs. At first glance, it seems nearly identical to the Packers’ site.
Just like Packers.com, Steelers.com has little white space [refer to figure 1], because it’s overwhelmed with content and images. And again, like the Packers, the Pittsburgh Steelers seem to struggle with the design of their main navigation [refer to figure 2], which is stripped from dominance as it’s a black bar on a nearly black background—the lack of contrast deprives visual impact. This homepage also has a power struggle between two secondary navigation sections [refer to figure 3]. Unlike the Packers’ photos, which fade into its white background, Steelers.com consists of sharp photography [refer to figure 3] due to the juxtaposition of the dark background, which provides users with an edgy, strong and assertive setting—all of which are characteristics of champions. Steelers.com earns a field goal with their impactful graphics.
Sorry, no half time show today (and after last night’s performance, I’m sure you’re relieved), but get ready to witness the next halves of the homepages!
As you scroll down Packers.com, you’ll notice that the white space [refer to figure 1] increases a little bit—they earn a field goal for their decision to not carry imagery down the sides of the page. Unfortunately the text [refer to figure 2] is sporadic, which makes it confusing for the user to decide which content to read first. The images [refer to figure 3] on the bottom half of the homepage aid in illustrating the text and help to somewhat clarify what the content is about, but overall the homepage still doesn’t provide users with easy visual recognition.
Steelers.com didn’t continue to display images along the sides of the homepage, but they’ve created a heavy texture [refer to figure 1] and its darkness weighs down the site. The Steelers’ website is more streamlined than the Packers’, as it consists of less text and is condensed and organized. Their simple, large and creative images [refer to image 2] are engaging and draw the user in, because they provide categorization. Steelers.com makes a touch down for providing order and ease for its users. Unfortunately, their social media is separated on the homepage, which causes major confusion for users. People are accustom to sites displaying their Facebook and Twitter links near each other (often side-by-side), and Steelers.com has their Facebook and Twitter located in distant locations [refer to figure 3]. This was a poor decision, because it makes the site visitor have to find the other social media outlet, or worse, the visitor will assume the Steelers are only on Facebook or Twitter (not both).
Despite their social media slip, the Steelers steal the victory of the Homepage Bowl! There was no bias here, because as a Michigander, I still (after many years of disappointment) support the Lions.