How do websites get you to click on certain buttons, perform certain tasks or get you to look at certain elements on the page? Visual hierarchies! The location of elements, the size of the elements and their colours all draw your attention to different aspects the website and the different things that you can do on the site.
Visual hierarchy of the BBC homepage
The first thing to consider when analysing any visual hierarchy is what is it exactly that the website owners want you to do on the site and how do they do get you to do that? That is the essence of what visual hierarchy is all about. The BBC homepage in particular is an interesting one. Most people think of ‘news’ and ‘TV’ when you say ‘BBC’ to them and whilst these are likely things that users would go to the BBC site for, there are several other things too, such as weather, sport, radio, food and recipes, children’s TV, the Bitesize revision site, information about the digital world, ‘Tomorrow’s World’ and more. Look at the annotated diagram I’ve made below though – how many of these are immediately made obvious to the user when they visit the BBC’s landing page?
Essentially, the main focus of the site is news. That is what the BBC feel that users will want to go to their site to find, so they place news articles on their home page, the headline story having the largest image and the largest header text to draw you into that story. It is clear that the other services that the BBC offers are not really believed to be major reasons why users would visit bbc.co.uk, evident from the fact that only a handful are even displayed in the small menu bar at the top of the page and the large majority of their services are actually hidden in a drop-down menu separate to the items in the main menu. The same can be said for the search facility which is in the conventional upper right of the page, but is small and out-of-the-way, so it is probably assumed that the user would not be searching for content, rather browsing the page.
The page is not very colourful – it does however follow the BBC’s black and white colour palette. This means that the user is not immediately drawn into any content besides the images of the news stories and even these have a hierarchy – essentially the more important the story is deemed to be the larger the image – and often the headline will not have a black and white image as this would not draw attention in the same way that a smaller story with a colour photo would. Stories are arranged with the most important stories at the top and the less important stories following. The stories that are not deemed to be important enough for the main BBC homepage appear only on their News site – and even this is categorised and broken down in the same way.
Signing in to customise the home page and access localised services is also a task that the BBC are keen for users to complete – they perhaps feel it provides a better experience or maybe they get some benefit from having registered users such as analytics data.
All content being centralised also saves the user from having to scan the entire screen width to find content.
Visual hierarchy of the YouTube homepage
YouTube’s home page is another popular site with some similarities and some differences when compared to the BBC’s.
The first different is that YouTube offers a dark theme which is easier on the eyes for use at night and also has been suggested that dark websites trick the user into thinking there is more content than there actually is.
Also differently to the BBC, YouTube’s search bar is much larger and is positioned at the top of the page. It could be argued that the search bar is what YouTube want users to turn to when visiting their site, but it can’t be argued that a large number of relevant videos to what the user has been watching are also displayed on the home page. This could be a convenience feature for users trying to find relevant videos or maybe to get them to watch new content to support other channels. They are arranged in an attractive-looking grid with thumbnail images that grab attention and are very prominent on the page. Also prominent are the large, red subscribe buttons which are famous on the site. It doesn’t need to be said that red, large buttons are almost irresistible to clicking! The call-to-action is a clear click on the subscribe button.
Uploading, streaming, reading messages and accessing the menu are all icon buttons rather than text buttons. They are obvious to the user thanks to the contrasting white on black, but are not massive which means that they are likely not designed to initially draw the user. The conventional upper right location does however mean that the user would likely naturally look here if they wanted to find them. A similar thing can be said about the navigation bar on the left – here the user can look at channel subscriptions and other features of YouTube, but these are not the main aim of the site – YouTube seems to be promoting the viewing side of their site rather than the uploading/sharing.