Information architecture of navigation on financial websites

Posted on by jasonbrown

There are several ways of presenting information on websites, namely in the form of:

  • Global navigation
  • Local navigation
  • ‘Mega menus’
  • Contextual menus
  • Visuals and images
  • Configurators
  • Personalised navigation
  • Social navigation
  • ‘Fat footers’
  • Supplemental navigation

Using the financial websites explored in recent posts (see here and here) and some additional sites, I found examples of each on several different financial sites.

Global navigation

Global navigation refers to finding the site’s location on the internet as a whole and recognising which site you are on. Most sites accomplish this by simply using branding in the form of colours and their logo at the top of the page which of course informs the user whose site their on.

On a more local scale, ‘global navigation’ could also refer to where the user is in on the site on an ‘over-arching level’. Most financial websites for example have different pages or indeed entire sites for personal and business users – or perhaps a site is available in multiple languages. This could also be classed as ‘global navigation’.

Example of global navigation on the Barclays site where the user can choose between Personal, Business, Prmeier, Wealth Management and Corporate versions of the Barclays site at the top of the page.

 

The Royal Bank of Scotland website is similar. Personal, Premier, Business and International are all different versions of the RBS website. that the user can choose from.

 

Like Barclays and RBS, Lloyds offer Personal, Business, Private Banking and International Banking sub-sites.

 

Nationwide’s global navigation differs slightly in that they featured Contact Us, Branch Finder, Accessibility and Register For Internet Banking links at the top of their page, above their main menu (the local navigation).

 

Payday loan provider QuickQuid is slightly different in that the global navigation is broader and acts more like local navigation, more later.

Many banks and financial agencies offer different services for different kinds of user, so it make sense to split their sites down initially into the user types and then into the types of services that is provided for each user group – this is where local navigation comes in.

Local navigation

Local navigation on financial sites at least is the categorisation of services offered to the different user types. Often once the user has selected a sub-site to visit (on financial sites, usually based on their usage type), they are then presented with services available for that particular group in the form of a classic menu bar across the top of the page. The screenshot of QuickQuid above is an example, more are below:

On Aviva’s car insurance page, the menu options change from the various services that Aviva offer to ones relating only to their car insurance services: Our car cover, Cover details, How to claim, Articles and Ask our chatbot (presumably about car insurance). The calls to action in the hero image also change to car insurance-related ones.

 

Barclays’ menu for personal banking are focused on consumer actions such as applying for cards, information about banking, mortgages, insurance, support and other things that a consumer might want to find out from the website.

 

After selecting ‘Other insurance’ from what could be considered a global menu, the user is able to then find information relating to Direct Line life insurance, over 50s insurance, an insurance calculator, critical illness insurance and help and advice.

Like the global navigation, local navigation is designed to help filter down information and make finding pages easier for the user. If a user is not interested in business options then don’t show it to them – that’s the effect that these types of navigation systems have on the user’s experience.

‘Mega menus’

A fairly recent design practice, the ‘mega menu’ theoretically replaces the traditional ‘drop down/slide out’ menu with one large drop-down menu which features a lot of links, typically categorised and arranged in some kind of order or hierarchy to help make finding pages and information faster for the user.

Capital One’s site features a more traditional drop-down style menu with one tier of items that the mega menu aims to replace, but essentially this is still an organised menu which helps to make finding information quicker.

 

CitiGroup’s site also features an older-style menu containing sub-menus. These sub-menus are generally shown on one menu on a more modern mega menu.

 

Direct Line split some menus into a two-tier categorised menu. On older menu systems like CitiGroup’s and Capital One’s this two-tier system would be split into sub-menus that the user would roll over and would expand over the page. The mega menu keeps things looking tidier.

 

Using Aviva as an example again, here is a full ‘mega menu’. Items are all arranged by category and are arranged in an order, presumably by what Aviva have found to be the most popular pages. It also consumes 100% of the page width.

Contextual menus

By using a small amount of descriptive text and imagery, menus can be made easier to understand. Text and images can be used to indicate what a page contains without the user having to actually visit the page. This helps the user make an informed choice about the pages they visit and saves them from wasting time.

First Direct offer a menu right in the middle of their home page offering links to information about the bank and how it works. Contextual menus are rarely at the top of pages, but they can sometimes reside in mega menus.

 

Another example of a contextual menu in the middle of a page is shown here. This is from Virgin Money’s website. The user can find out information relating to the different services that Virgin Money offers from this small menu.

 

More Than also offer a similar kind of menu on one of their pages, here with specific links to the different types of insurance they offer.

Contextual menus can reside inside of a mega menu, but generally seem to be placed at the bottom of a page or in the middle of it. Their aim seems to be to remind users to look at other pages whilst they are scrolling down the home page, pointing users to information that may not be available on the home page. However, there was one exception.

The HSBC site uses a contextual menu at the top of the page which turns into a mega menu when items are hovered over.

HSBC uses a contextual menu at the top of their page. It works well but the reason this isn’t more common is likely that it requires more space and the context copy has to be very short for it to work.

Visuals

Visuals can be incorporated into any of the above to help make menu labels easier to understand, look at the contextual menus above for example – each one has a little image on it to help represent what is in the menu and this helps the user to make a decision about whether or not that is the page they need to look at.

Using Virgin Money as an example again, below is a screenshot of their menu with icons.

The icons also give a friendly and approachable feel to the site. A lot of these financial businesses are seen as being very corporate, unapproachable and often a bit scheming. The icons and flat colours help to give a more approachable, yet still professional, feel.

Configurators

Technically a type of search refinement – and a very specific one at that, configurators, like mega menus and the different navigation structures, help to make finding extremely specific information easy to find. The best example of configurators tend to reside on websites where the user can purchase a highly customisable product such as a car or a computer. On financial websites, the best examples are typically to be found in insurance finders.

The car insurance configurator on the Admiral website.

 

Aviva’s car insurance configurator.

There tends not to be many variations of this on insurance websites. Typically, they are forms that the user completes with information about their car and driving history and after all of the relevant information has been entered, a search algorithm finds the best insurance policy. This is different to configurators on other sites where a user can typically select size, colour and other options of a product and see a visual representation of what it will look like and also see the cost, but it is the closest thing that the financial sector offers.

Personalised navigation

Personalised navigation is navigation that adapts and responds to a user’s specific needs. The most common example is on e-Commerce websites where users are offered products to purchase based on purchase history, browsing history and what others who have bought similar products to you bought. On financial sites, personalised navigation is not as common – the closest thing to it I’ve seen on the example sites I’m using is Barclays’ search suggestions which suggests thing to search for based on what other customers have searched for.

As you open the search facility on Barclays’ site, popular search terms based on what the majority of their customers are searching for are shown.

A lot of these sites are collecting cookies, so it is likely there is some level of personalised data being collected, however it is likely things such as location data to bring regional pages to the user.

Social navigation

This type of navigation is also based on popular items, but this time is linked more to ‘what’s trending’ or ‘which articles/videos/pictures are viewed the most’. The results tend to change rapidly. The aim is to push the latest and most viral content and as the name suggests, it tends to be used on social media. The example above is almost a good example of it, since the most popular search terms are shown, but otherwise there aren’t any examples on any of the other sites.

‘Fat footers’

Traditionally a footer just contained copyright information, perhaps some contact information and maybe a link to social media or legal information such as terms and conditions. On many larger sites now, footers are increasingly becoming like a static ‘mega menu’, permanently fixed to the bottom of the site. This means that footers are slowly becoming a second form of navigation, the idea perhaps being that if the user scrolls to the bottom of a page they are able to continue navigating around the site without having to scroll back to the top of the site to use the navigation links at the top of the page.

Admiral’s ‘fat footer’ looks a lot like a ‘mega menu’ in that items are arranged in categories and then into an order. Navigation to almost all areas of the site and their social media accounts is possible directly from their footer. They even include an obvious ‘Get a quote’ call-to-action button in their footer for users to use to get an insurance quote!

 

CitiGroup’s ‘fat footer’ is very similar, however it isn’t as tall as Admiral’s.

 

Again, HSBC utilise a footer which has a lot of navigation links in it, however it is slimmer than the other two’s. Content in the footer is more general – instead of having links to the other pages on the site, the user is given more generic options such as ‘Contact us’, ‘Find a branch’ and ‘About HSBC’.

 

QuickQuid have a rather compressed version of their main menu in the footer, however the emphasis is more on finding a contact number and connecting with them on social media.

Interestingly, these ‘fat footers’ tend to be grey or black on financial websites – most of the body colour is white so the grey and black looks more distinct against the white body colour and thus draws the user to the footer more so than if it were also white. These sites need to look professional and trustworthy too, which the use of grey or black assists with.

As can be seen, a ‘fat footer’ isn’t always about pushing links, rather just for displaying information in a more obvious manner than perhaps placing it in a smaller, more traditional footer would have been.

Supplementary navigation

Other ways of navigating a site, typically an index page with links to pages arranged by category or alphabetically. On financial websites, a page like this is typically called the ‘site map’, not to be confused with sitemap.xml, which is typically the name of a file used by search engine crawlers to index the individual pages on a website.

Capital One’s site map page lists all of the main sub-pages of the site broken down into common topics.

 

CitiGroup follow a very similar design style, however their site map page focuses much more on news articles, investor relationship information and about the company than it does links to pages about the services they offer. This site map page seems to list the pages that a user might otherwise ignore when visiting the website.

 

Virgin Money’s site map page, on the other hand, focuses more on providing information about topics that may matter greatly to the consumer, a whole section is called ‘My Virgin Money’ under which the user can find information relating directly to their account.

 

HSBC’s site map page is by far the biggest and even has collapisble sections! Where the others tend to focus on just the core pages, HSBC’s seems to cover far more content.

These site maps are not generally obviously accessible from the home pages or other pages on the websites, but can be found easily via a Google Search. These are really the only thing financial websites use for navigation besides the menus. The ‘fat footer’ and ‘mega menu’ almost seems to have replaced these types of pages – they used to be very popular and easily accessible from home pages, generally via a small link in the footer or upper right of the site, but now are harder to find.

Conclusion

A variety of information architecture techniques are employed to help make content easily accessible for users. Everything from small visual and contextual cues, to items being categorised in footers, site map pages and menus and search suggestions based on frequently asked questions (or commonly-searched terms) is critical in helping consumers find information that can potentially change their financial situation and make critically important decisions.

References

Nielsen, J. and Li, A. (2017). Mega Menus Work Well for Site Navigation. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/mega-menus-work-well/ [Accessed 19 Oct. 2018].

Ui-patterns.com. (n.d.). Fat Footer design pattern. [online] Available at: http://ui-patterns.com/patterns/FatFooter [Accessed 19 Oct. 2018].

Uxbooth.com. (2015). Fat Footer Roundup | UX Booth. [online] Available at: http://www.uxbooth.com/articles/fat-footer-roundup/ [Accessed 19 Oct. 2018].

Webpagemistakes.ca. (2011). Should I Create a Sitemap or HTML Site Map?. [online] Available at: http://www.webpagemistakes.ca/create-sitemap-or-html-site-map/ [Accessed 19 Oct. 2018].