A UX Review of the Official 2014 Sochi Winter Olympics website home page, analyzing the PC and Mobile-based versions
Summary: A UX review of the home page of the Official 2014 Sochi Olympics website with emphasis on the multi-device experience. Overall the PC and Mobile versions of the home page are good, but with a few misses in usability that earn the PC version a Silver, and the Mobile version a Bronze.
For the many fans of the Olympic games, the ability to use the home page of the official 2014 winter Olympics website to find content and conduct tasks is key. Because of the relatively high profile of the website and broad world-wide audience, expectations for an easy to use, efficient and effective home page are high. The vast amount of news, images and information generated by the winter Olympics adds to the complexity of the experience. This means the design of the home page must work particularly well to get visitors quickly and efficiently to their desired information.
But how well does the website home page UX (user experience) stand up to finding and using the site? Given that more and more website visitors use multiple devices (PC, Smartphone, tablet) does the experience of the site stand up to the test for both PC and Mobile based usage?
Just finding the site can be a bit daunting. Conducting a search on Google for “2014 Sochi Winter Olympics” provides a page of media coverage, sports schedules and standings, medal counts and even the IOC’s own separate websites for Olympics information.
Once visitors do find the official site, how well does the home page work in making it easy and quick to get to the information they need?
Visitors to the home page of the Olympics website are greeted with a fairly clean UI and a large screen real estate area above the fold for events information.
Show above, an automated eye tracking test using Feng-GUI reveals potential fixation points (the red and yellow heatmap areas). Fixations are stopping areas where the eye momentarily stops, or fixates. Heatmaps can be generated when multiple fixations are overlayed to form areas of more fixations versus areas of fewer fixations.
In this image potential fixations include the Sport ribbon and darker blue heading of “Results” in the upper left screen area, the bright gold heading of “Medals” and the tickets graphics on the right. The human face in the news slider also is another fixation point.
What is potentially missing in terms of attracting attention is the global navigation and sub-navigation, which is fairly small, split up among multiple areas, and has relatively lower visual prominence versus the visually stronger blue underlined hypertext links of the Results area.
Note the red arrows added to the screen capture of the home page above. As discussed in Main Navigation Types and Usability, global navigation is a crucial element of user experience and as such should always be prominently placed, visually emphasized for easy discovery (thus use) and consistently displayed. When sites force users to hunt for main navigation elements by splitting them up, it typically results in decreased usability, ultimately causing lower website conversion and or higher site abandonment.
As demonstrated in the above screen capture of the entire home page, the Sochi Olympic website has more content than can comfortable be displayed above the fold. In this case the fold is an arbitrary 1680×1050, reasonable considering the W3Schools browser display report indicates 90% of visitors have a higher resolution than 1024×768.
At higher resolutions important links to tickets, results and some of the news stories are displayed above the fold. However, other important information such as spectator details, maps and transport content is below the fold. Reducing the amount of time visitors hunt for critical content by placing it above the fold is the best ways to optimize conversion.
Overall, the Sochi Olympics website PC version rates a Silver. It has a decent user experience overall but with a miss on the Global and in-page navigation being split apart and less visually prominent than other links on the page.
Sochi Winter Olympics Mobile Version
Comparing the mobile user experience on an iPhone to the PC-based experience reveals a consistent Branded UI, and a website that has been optimized for mobile. Optimizing for mobile is important considering the ever increasing utilization of mobile devices.
The above the ‘fold’ screen capture shows the fairly large amount of branding on the home page, with the main navigation bar ‘Sochi 2014’ prominently featured on the top. Because it is a mobile site, most users will expect the screen to scroll, which it does.
As demonstrated in the above image of the entire home page of the Sochi Winter Olympics mobile site, there is a relatively large amount of content in a very long scrolling page.
However, the longer visitors have to scroll, the more cognitive load (using working memory to process information) is forced upon them to remember what content they saw, and where they saw it. Increasing cognitive load causes decreases in user performance and efficiency. At some point the scrolling and cognitive load becomes high enough that it makes sense to use pagination and navigation to reduce the per-page cognitive load, which helps users find the information they are looking for in an easier manner. Therefore, striking a balance between the amount of scrolling and pagination is critical for optimal mobile conversion.
Finally, as the screen capture of a lower section of the mobile home page above shows, visual cues as to what are links, and what are only design elements, are important for helping visitors to find and click on links that take them to the content they are interested in.
As an example, what do you think will happen if you click on the “Places” or “Transport” text in the large blue button-like objects? Are you expecting to be taken to the Places or Transport pages?
In fact, those elements are simply decorative and are not links at all. Visitors must click on the lower “Learn more” text or the image. Likewise, the “Click Here!” text below the image appears to be a link, but in fact is not.
Perceived affordance (meaning a button should look like a button, a link should look like a link) is critical for user efficiency, and thus conversion. As demonstrated in the above screen capture, in this case the perceived affordance of the links is low, in that some of the links that appear to be links are not, and some of the links that do not appear to be links are links (the large image of the venue).
In addition, the large amount of whitespace between the image and “Click here!’ text down to the “Learn more” hypertext link may lead some users to have to think for a second if clicking the “Learn more” link takes them to the “Transport” page, or the “Places” page. Anything that causes your visitors to slow down and have to think is a usability optimization opportunity.
Overall, the mobile UX experience is good considering the size and scope of content available about the winter Olympics. However, the relatively long scrolling home page that forces additional cognitive load and the disappointing perceived affordance of many of the links is why the site receives a Bronze.
Conclusion: Website Audit of Official 2014 Sochi Winter Olympic games
Overall, the Official 2014 Sochi Olympics website does a pretty good job of organizing and presenting a very large amount of content, and thus receives a Silver for the PC version. The mobile UX is also good, earning a Bronze because of the additional cognitive load caused by the long scrolling home page and the miss on the perceived affordance of important links.
The UX review above is part of a larger website audit program that can, and should, be conducted on any website to optimize conversion.