Corporate website usability: more vices…and some virtues

As we did last year at our annual conference, we conducted some user testing in partnership with the Bunnyfoot user experience (UX) consultancy at our recent event in Lisbon. Here, Andrew Rigby reports back – once again some familiar themes emerged, along with some new insights into corporate web usability.

We tested 14 different websites over the course of two days, with conference delegates asked to carry out a relevant two-stage task (or tasks) on each site. Jon Dodd, CEO of Bunnyfoot, oversaw the sessions with assistance from me.

Eye-tracking added to the insight that the tests provided. Of course, with such a small test sample, and the familiarity of our users with corporate sites in general – although not the sites they were testing – any conclusions drawn can only be indicative of possible results from more comprehensive user testing.

But we think that, as we explained last year, the tests did show the value that can be gained from real usability testing on corporate sites – something that a couple of presentations at the conference also touched on.

Search to the rescue – or not

Once again we saw users either resorting to internal search to find pages, or simply using it instead of attempting navigation. Yet few internal search engines were truly helpful, and some were very poor.

It was suggested that, in at least one case, this was because the corporate site search engine was being shared with customer-facing sites, and set up to rank results on keyword density rather than relevance. This resulted in older, less useful results being surfaced - such as old quarterly results announcements, rather than the latest ones.

It should be possible to adjust search engine behaviour across corporate and customer-facing sites, to ensure corporate sites return relevant, recent material for their audiences.. If this is not possible, consider circumventing the search engine with promoted results for popular searches, and in any case use keyword/phrase completion tools to help users.

Navigation sometimes needs help

Although our small 2018 sample showed generally improved navigation and orientation from last year, there were still some sites on which users became lost because helpful location cues such as breadcrumb trails, or a menu highlighting indicating the current section (or indeed menus themselves), were missing or obscured.

Another persistent trait we saw was the eagerness of users to identify themselves as a certain audience, and look for a similarly-named section, such as Customers or Patients. If your site does not have sections for each potential audience, pay attention to where they might end up or what they may be looking for – and provide effective cross-linking to their desired destinations.

For example, a pharmaceutical company had some information on a new drug in its Pipeline area, and not under Patients, as it is not yet licenced or in production. All very logical, except a user looking for that drug might not know its status and so simply head to the Patients area. In this case, cross-linking from the Patients section is essential.

Avoid ads, signifiers and page furniture

We also noted that users could easily ignore design features which companies were relying on as links. For example, on several occasions visitors missed hotspots or panels with text over an image. Jon Dodd says is this is common and results from our increasing tendency to ignore anything that looks like an advert.

There were several examples of carousels or images filling an entire browser window, and fooling users into missing the information they wanted further down the page. While some companies tried to avoid this by adding downward arrows or ‘Scroll down’, the need for such signifiers indicates the design is not working well enough. The design itself should communicate that more valuable material is available down below.

Components which looked like parts of the page furniture could equally be overlooked, so be wary of enclosing important links or calls to action in full-width bars or areas that could be mistaken for the top or bottom of the browser.

Lack of information ‘scent’

Users missed some clear onward links because the information ‘scent’ was weak. For example, brand carousels that did not explain why users should be interested in the range of brands, or the information users would receive on brand pages; or adverts for annual reports which did not pull out an interesting key headline or message. 

Surface some of the valuable content from below to inform and entice users to follow – avoid just another bland title with a corporate stock picture.

The state of tabs and filters

Tabs and filter mechanisms need clear labelling and ‘selected state’ indicators. In a few instances users were confused by the presence of just two tabs, where it was not clear which of the tabs had been selected. Another hindrance to usability was hiding information in open and close mechanisms, without an ‘Open all’ feature, which is common on FAQ pages.

Cross-country routes

In keeping with the theme of the conference, communicating effectively across cultures, we tested routes between country and global sites – and they were often found wanting. Country site selectors, like any call to action, need a visual cue, such as an icon or arrow, to attract users’ attention, and they need to be consistent across the estate. Also avoid the common error of using flags to denote language and risk offending for example French speaking Belgians - some of the sites we saw got this right but others did not.

Register for the ‘Best of WEC 2018’ web meeting on September 26th, 2018

Were you unable to join us at our Web Effectiveness Conference in Lisbon last week? Did you attend and are keen to share the learnings with your team after the event? Join our web meeting and relive the Best of WEC 2018.

To register, visit our events page (and scroll down to September events)

For more commentaries, tips and downloads for online corporate communications professionals, visit our website.

If you have a query or for more information about Bowen Craggs, including the visitor profiles* Bowen Craggs uses when evaluating websites and social channels for our Index of Online Excellence, please contact Dan Drury: ddrury@bowencraggs.com.

*Eligible recipients only – usually senior digital communications professionals working for large corporate or public sector/non-governmental organizations.

BC Tip: The British Royal Family - Making a royal mess of navigation

The marriage of Meghan Markle to Prince Harry received a lot of news coverage globally, but the Royal Family’s website is not without a hitch when it comes to navigation

The Royal Family's website

The Royal Family's website

The Feature

The British Royal Family’s website has a splash page, with an image of the newly-wed couple.

Clicking on ‘Explore’ or scrolling down reveals the ‘usual’ home page, which employs tiles, with and without photos, to guide users to content within the site.

The main site navigation is hidden behind a hamburger icon and the label ‘Menu’ at the top right of the page, but there is a brief left hand menu, indicating the user has landed on a page ‘About the Duchess of Sussex’. The only other option in this navigation is ‘Biography’, and there is no breadcrumb trail.

Clicking on the Royal Coat of Arms at the top left of the site header, which appears without a site title, takes the user back to the home page – with the splash image displayed again.

The Takeaway

The site as a whole looks appealing, and the use of big, bold images featuring smiling, candid shots of the Royal Family adds a warmth and authenticity to the site. The incorporation of Instagram images on the home page and in other areas also sends a positive message of modernity and inclusivity.

But the overall impression is let down by deficiencies in the navigation.

The fact the home page defaults to the splash image each time the user returns to it is likely to frustrate some, and the lack of any site title or navigation on it could confuse those who arrive here from links or search engines. While devices like splash pages can be used to add impact, especially around important events, the fundamentals of user experience should not be forgotten.

Those users who navigate within the site, or who find themselves sent there from search engines, are given no help with orienting themselves; even clicking on the Menu label and icon does not reveal where in the site they are, and there is no website title to help – just the Royal Coat of Arms.

For example, a Google search for ‘Duchess of Sussex’ returns a page from the site as the first result, so the lack of orienting devices including the absence of a website title will be a major problem for them.

Site managers should remember that it is not enough to ensure good search engine performance: the experience of the user once on the site, especially those who may arrive deep within it, must be taken into account too. And that means providing easy ways of understanding where they are, and how to navigate around the site, in addition to visually appealing and easy to read pages.

For more commentaries, tips and downloads for online corporate communications professionals, visit our website.

If you have a query or for more information about Bowen Craggs, please contact Dan Drury: ddrury@bowencraggs.com.

The five biggest performance gaps in corporate digital communications

Corporate digital managers at 25 of the world’s largest companies have told us their teams’ top priorities for the next 12 months and where they think they are falling short. Jason Sumner and Lisa Hayward share the five biggest performance gaps across the group.
 

The Bowen Craggs Club, a new networking and research community for corporate digital managers, launched over the summer. As a first step in joining, we asked club members to sit down with us for in-depth conversations about their teams’ priorities, strengths and weaknesses in a number of core performance areas such as content strategy, measurement, relationships with internal stakeholders and managing high-performing digital teams.

We’ve had 25 conversations so far, and it seemed like a good time to share a little of what we have learned (on an anonymous basis of course). We asked members to score their teams on a scale of 1 to 5 across a number of skills and competencies, and then identify which of these skills and competencies they most want to improve on.

As a result, we were able to identify the areas where there were the biggest gaps between desired performance and self-reported outcomes. Here are the top five:

1. Failure to set or consistently use key performance indicators (KPIs)

‘Measurement’ is regularly near the top of digital manager challenges whenever we’ve run short surveys in the past. This time the long-form interviews allowed people to expand on the reasons good intentions so often lead to frustration when it comes to KPIs. Even in otherwise top-performing organizations, we found that the barriers are deep-seated, company-specific, political and even psychological. Three of the most interesting were:

  • In one organization, KPIs are applied in an ad hoc way because, ‘Stakeholders don’t understand how to translate business goals into KPIs and the digital team isn’t pushing them.’

  • Another organization said their ‘standard’ KPIs are not good enough. ‘They need to be more channel specific.’

  • Fear of linking metrics to goals is a factor for one organization, despite the fact that communications leadership is already convinced of the value of measurement. ‘They are scared of setting KPIs and failing. Failure needs to be seen as an opportunity to learn.’

2. Lack of a content strategy for different channels and screen sizes

The proliferation of digital channels and devices over the last few years has also kept ‘content strategy’ (which we define as having a defined process to produce and publish content across differing channels, devices and geographies) at the top of the priority list. Our interviews found digital managers planning to do a lot of work on the device and channel side over the next 12 months – particularly in developing multi-purpose content. Said one, ‘The leading channel is the website. Content published there is repurposed for social media use, and some content is created first for social media. We don’t plan ahead.’ Said another, ‘We have an editorial group managing content across platforms, but can sometimes think offline first. There is room for improvement to help educate employees and agencies to change this mindset.’

Rounding out the top five: Roles and responsibilities, agency relationships and usability testing

There was a three-way tie rounding out the top five performance gaps:

  • Who owns the channel? Given the above work on content strategy, it is not surprising that digital teams are still working out the right relationship with internal stakeholders and local teams over who publishes what, and when. ‘A grey area exists in the mind of the content owner about who owns the page. Internal stakeholders think the digital team. A roadshow is planned to educate and keep reinforcing.’ Another interviewee said, ‘We are trying to create combined and shared content plans rather than work in silos.’

  • Getting the most out of agencies: The difficulties mentioned included a lack of corporate and industry expertise, and an assumption that corporates don’t want to be seen as creative. Another organization does not use agencies currently but wants to bring in fresh thinking from outside.

  • Finally, usability testing was seen as a priority by many of our interviewees, but it is not widely used at the moment. Several companies are taking first steps and sounding out experts. ‘We are testing new designs, a team member is doing a master’s degree in user experience and we plan to focus on it in the next 12 months.’

- Jason Sumner and Lisa Hayward

The Bowen Craggs Club is an exclusive network for the most engaged online corporate communications professionals, aimed at individuals and companies who believe in the need for world-leading corporate web estates. Although most group members work in Fortune 500 corporations, we welcome senior managers from public sector and non-governmental organizations with responsibility for large web presences.

For more information, visit our website or contact Lisa Hayward, lhayward@bowencraggs.com

BC tip: Merck - Rise of the footer

A US pharmaceutical company’s home page footer expands upwards when the mouse hovers over it.

BC tip - Merck.png

The Feature

The Merck.com home page has a narrow footer panel with three headings in a row – ‘Latest News’; ‘Social @ Merck’ and ‘Other Merck Sites’.

When visitors hover the mouse over any part of the panel, it rises up the page to reveal more details under each of the categories – summaries and links to press releases; the latest tweets and social media follow icons; and links to other parts of the web estate. Moving the mouse off the panel causes it to collapse back down the page.

On a smartphone screen, the three elements of the panel are stacked vertically. The expandable footer appears to be limited to the home page; it is not on any of the section landing pages, for example, or anywhere else that we clicked.

The Takeaway

Merck’s expanding panel tries to do for footers what the mega dropdown menu has done for primary navigation. On the Merck home page, the feature is a space-saving way to let visitors see options that are not in the main menus at the top; and helps to keep the home page from scrolling. It could be a useful design in some circumstances – if footers can expand downwards, why not have the option to go up too?

It is not clear this works completely – for example, the way Merck have implemented it means they cannot have a longer home page, even if they wanted one. There are some other disadvantages in the way it is executed – on smaller laptop screens the panel obscures some of the text in the carousel.

If in doubt, a useful guideline to follow is, don’t try to innovate with navigation.

www.merck.com

 

Seven deadly sins of corporate website usability

At our recent annual conference, in partnership with the Bunnyfoot user experience (UX) agency, we conducted some user testing on some of our delegates’ websites. Although the sessions were designed just to give an indication of how this type of testing can help web managers, they provided some real food for thought, says Andrew Rigby.


This is the latest in our series of posts about the conference, following on from our summary of six key takeaways. A guest blog from one of our speakers will follow in the coming weeks.

The sessions we ran with Bunnyfoot involved giving users exercises to complete on a corporate website that they did not know. We asked each tester to put themselves in the shoes of a corporate website user wanting to complete a relevant, two-stage task. For example, a jobseeker looking for information on a particular company’s sustainability policies before searching for a specific job.

With the help of some clever eye-tracking technology, we – and the web managers of the sites being tested – could see how the users went about trying to find the right information.

We should point out that the sessions were only indicative: we used delegates as our guinea pigs and gave each one just ten minutes to complete the tasks. Real user experience design (UX) testing would involve asking a number of users, who are actually investors or jobseekers or the like, to complete a series of tasks over a longer a period. 

In other words, our tests were not truly scientific. We just wanted to show that UX testing is relatively easy to conduct with the right equipment and the help of experts like Bunnyfoot; and to give an idea of the type insights it can reveal. 

But even allowing for the lack of rigour, seven deadly sins of corporate website UX emerged:

1. Unhelpful search

Users frequently started their tasks on external search engines, or often used the sites’ internal search mechanisms. So not only do corporate sites need to perform well on the likes of Google, but their own searches need to help users find what they want. All too often, internal searches failed to deal with misspellings or synonyms by suggesting alternatives, to search PDFs, or to present results in well-ordered lists.

2. Neglected navigation

Poor navigation meant that many users resorted to the internal search or simply failed to complete their tasks. Sometimes this was due to difficulties in using dropdown menus – some were simply too big to be used on a laptop screen. In other cases, users could not see the sub-sections or sub-pages at lower levels, and so were forced to take leaps of faith by clicking on section headings they hoped would reveal what they wanted. It was noticeable that left-hand menus – something we have championed for a while – were generally more successful and users were quick to use them; but there were poorly implemented examples of these too. 

Aside from the main menu styles, it was rare to find effective cross-linking to relevant content. It meant that if users found a page which was not quite what they were looking for, but perhaps was on the same topic, they were seldom offered on-page links to their destination. This was also true for predictable journeys which took in pages in different sections.

It left an impression that user needs should dictate information architecture and cross-linking more than they sometimes do.

3. ‘Look at me’, not ‘use me’, labelling

There were many examples of users finding what they wanted thanks to clear labelling in menus, or on-page links. Yet there were also instances of users being confused by vague section or page titles, either because several pages or themes were nested under them, or because ‘neat’ company-specific jargon or terms were being used. The absence of format icons or indicators for downloads also created uncertainty. 

Tasks were more likely to be completed on sites where web managers had anticipated the words or phrases which users would be looking for and had labelled pages and sections accordingly, or surfaced important pages higher in the website structure, rather than hiding them under catch-all section titles which did not resonate with users. Users responded well to headings labelled with their audience type, such as Investors or Media.

4. Imperfect page layouts

How a page is presented matters: there were various instances of users finding the correct page, but still missing the right information on it. Big blocks of text - especially ones in capital letters – or crucial information contained a long way down a page or only in a PDF, especially hampered usability. 

Pages with short paragraphs – getting shorter as the page continues – and with signposts to key information on them, such as anchor links or headings, performed well. Users tend to scan long pages rather than read them in detail.

5. Inconsistent images

Given that users often scan pages rather than read every word, images can provide a quick visual cue as to whether users are on the right page. A poorly chosen image occasionally undermined user confidence, to the extent that some left the page that best served their needs. Images which supported page content by reflecting the idea or region being talked about were more helpful. 

6. Painful processes

Whether it was a badly designed search mechanism, or a job application system which required login details too be entered twice, users were quick to abandon journeys – or at least voice their displeasure – if barriers were put in their way. Getting users to the right place is not enough, as they expect a painless process once there.

7. Cookie monsters

Quite a few sites were dominated by very large cookie consent mechanisms when users hit the first page. Many users either failed to dismiss these until several pages into their journey, or became confused by their presence. Of course, these notices need to be presented, but doing so in an appropriate way is important, as they can form an initial impression of a site from the very outset. Another example of something which can easily be overlooked, but can actually be a big factor in a good user experience. 

User testing can be seen as a luxury by corporate web managers, and one which is often omitted from projects in the face of small teams, tight budgets and pressing deadlines. But if time and money can be found, seeing how real users interact with a website can be very helpful – so that the UX can be tailored to their needs.

- Andrew Rigby

Guide to online corporate audiences: Contact Dan Drury (ddrury@bowencraggs.com) for a copy of the visitor profiles Bowen Craggs uses when evaluating websites and social channels for our Index of Online Excellence. Eligible recipients only – usually senior digital communications professionals working for large corporate or public sector/non-governmental organizations.

BC tip: Philip Morris International - Sophisticated sniffer

The tobacco giant’s corporate website displays brand sites and jobs based on a visitor’s location.

The Feature

PMI’s recently relaunched corporate website uses a country detection tool to change elements of pages on the main corporate site, according to where visitors are in the world.

For example, visitors from Switzerland who visit ‘Consumer Corner’ from the home page will see links to brand websites available in that country – Malboro and Chesterfield. Visitors from India who click on ‘Consumer Corner’ see the same page, but in the area for brands it says, ‘Sorry, we don’t have a brand website available in your market.’ The same is true for the UK.

Similarly, the Careers landing page has a section, ‘Exciting opportunities near you’, which displays available jobs in the visitor’s country and region.

The Takeaway

Country redirection or ‘sniffer’ tools commonly take visitors to country-specific sites – it is rarer to see elements of a page change based on a visitor’s location.

PMI uses country redirection because tobacco is a heavily regulated industry, in which it is essential not to fall foul of regulators, and marketing must be country-specific for that reason. Pharmaceutical companies may be in the same situation.

So the brand example will not be applicable to everyone. However, using a similar tool in Careers would be relevant to most large companies.

Country redirection can be annoying, because it takes visitors somewhere they might not want to go, but this is a more appropriate and subtle use of the tool.

www.pmi.com

BC tip: Bristol-Myers Squibb - Return of the left menu, mobile-style

An American pharmaceutical company uses its mobile navigation menu on the desktop, with mixed results.

The Feature

Bristol-Myers Squibb’s new responsive corporate website uses the same navigation device on its desktop and mobile versions.

On a desktop, the device appears on the left side of the screen and is always in view. Clicking on any of the hyperlinked menu items, eg ‘Job Seekers’ takes visitors to the page.

If there are further layers within the section, an arrow appears to the right. Clicking this, displays the next level of sub-menus. A ‘Main Navigation’ link appears at lower levels, as well as a link to return to the previous level.

On a smartphone, the menu collapses behind a hamburger icon, and when clicked, works in the same way, but it takes up the entire screen.

The Takeaway

We have noted how ‘Mobile-first’ design led many corporate sites away from left menus on desktops, at a great cost to usability. Now things have come full circle at Bristol-Myers, with mobile navigation being adapted for desktops.

In practice, the device operates much like a traditional left menu, especially at upper levels. It usefully stays in place as you scroll and provides a logical structure for first-time visitors. It condenses five layers of navigation in a compact device.

One downside is that at lower levels, it can be tedious to move between sections without a universal primary bar across the top of the site.

It is also not clear whether it gets around the perceived problems of the left menu which have led to them being dropped – it takes up at least as much space on the screen as a conventional left menu; and in this case, is (in our opinion) less visually appealing than a conventional left menu, so it is hard to see it catching on.

www.bms.com

BC tip: BMW Group - A hamburger that should be off the menu

The German carmaker’s odd variation on the hamburger menu requires its own instructions.

The Feature

There is an unusual-looking hamburger menu on secondary and tertiary pages on the BMW Group’s corporate website. The three lines of the ‘hamburger’ are partially overlaid by right arrow or ‘greater than’ sign (>).

Clicking the icon (or the accompanying heading itself) collapses all of the tertiary or deeper level headings contained on the long-scrolling pages into a menu of ‘jump links’. For example, if you click on the icon on the ‘Company Portrait’ page, all of the tertiary options on the page collapse into a menu – ‘A consistent focus on the premium segment’, ‘Our strategy’, ‘Board of management’, etc.

On a smartphone, the menu comes with its own instructions: ‘Show an overview of the topics on this page for selection,’ which were absent from the desktop version.

The Takeaway

The designers of BMW’s variation on the hamburger menu make the mistake of assuming visitors to corporate sites want or need to take time to learn specialised navigation. Many users of corporate sites come too infrequently for it to be worth the effort, and will likely just be confused and frustrated. Even for frequent visitors, the mechanism is still fiddly. And the instructions on the smartphone version are unclear.

Maybe there should be a rule of thumb – if your hamburger needs instructions, take it off the menu.

www.bmwgroup.com

Facebook beyond the feed

The social media giant’s web estate is fragmented and often frustrating to navigate. However, there are pockets of brilliance and originality; and signs that the company’s approach to online corporate communications is maturing, Jason Sumner says.
 

In the last few days, we’ve been doing our annual check of Facebook’s web estate to help keep our Index of Online Excellence up to date. Since we last looked in detail at the firm’s online presence in 2015, the all-conquering social media platform has become one of the world’s 10 biggest companies by market capitalisation and now has 1.8bn monthly users. 

We think it’s unlikely that Facebook will break into our top 30 ranking though. It has too many weaknesses, the most obvious of which is fragmentation, something that it has in common with a lot of US technology firms’ online estates. Journeys to information for anyone who is not a signed-in ‘user’ are often difficult, with an array of dedicated Facebook pages and microsites that have different navigation systems and do not always link up neatly.

But Facebook has online communications strengths in a few important areas that make it worth watching: 
•    It is highly effective at providing online information for its customers (advertisers and potential advertisers), an issue that is front of mind for digital managers we speak to. 
•    Careers pages are at global best practice standards.
•    Visually speaking, much of the estate looks elegant and parts are outstanding. 

We also saw signs that the company thinks ‘corporate’ online audiences such as investors and CSR professionals are worth trying to serve better too. 

Facebook.com/business is the gateway page to resources for advertisers. The material here is clear, straightforward and well-targeted to the audience. The calls to action anticipate some ignorance about the basics of Facebook’s business model and address it – ‘How Facebook adverts work’ – or, for those already in the know, ‘Create Advert’, which leads to a step-by-step process to set up an online campaign. There is abundant and useful supporting content, including clear, succinct video tutorials, FAQs, case studies, pricing information, metrics, etc.

How-to video in the business section

How-to video in the business section

Careers information on Facebook.com was strong when we looked in 2015 and it is strong now. On digital careers metrics alone, we rate Facebook among the best online estates in the world, and well worth emulating. Jobseekers receive a top service, with the global vacancy mechanism and careers information provision at global best practice levels. The online application form is excellent - elegant, streamlined and appropriately targeted at digital natives. The ‘Careers hub’ provides a very effective pitch to prospective jobseekers, positioning the workplace as a lively environment in which staff are encouraged to pursue their ideas and make a real difference.

Careers landing page

Careers landing page

Facebook has made some improvements in the way it communicates with traditional corporate stakeholders such as investors and CSR professionals. In 2015, we noted that their investor landing page stood out for its boring conventionality (even if their recent quarterly information was very well organized). Since then they have launched a modern-looking microsite for investors that is much more in tune with the company’s visual style. Although it falls short of best practice (we could not find a quarterly results archive, for example), the microsite is a step forward.

Investors landing page

Investors landing page

In 2015, we could not find any CSR data. In our most recent visits, the Sustainability microsite had a long scrolling page of creative data visualisations, housed under ‘Our Footprint’, covering carbon emissions at data centres, the energy mix between renewables and fossil fuels (including its goal to be using 50 per cent renewables by 2018), and water usage. The site provides a PDF download of all the data and a useful list of links to external resources about Facebook’s environmental performance. The page has links to interesting real-time dashboards tracking ‘power usage effectiveness’ and ‘water usage effectiveness’ at Facebook’s four data centres.

Sustainability landing page

Sustainability landing page

Real-time energy and water usage dashboard

Real-time energy and water usage dashboard

The Sustainability microsite is a good example of the site’s often striking visuals. It uses (currently-trendy) looping video on the landing page, original photography, clean fonts and colours to tell make the company’s case that it is a force for good in the world. 

‘Facebook Stories’ are another example of professional visuals combined with high-quality editorial. Housed on a microsite, they are a set of well-produced videos that cover what ordinary people have accomplished by setting up Facebook groups. Many of the videos have CSR and community-based themes, including 'Homeless in Seattle' about an architect who has a page 'Facing Homelessness' and 'Save the Monarchs', a group in Iowa dedicated to butterfly conservation. The production values are high, and may well be outside many firms’ digital corporate communications budgets, but the way the videos are summarised on the page, and the way the videos are subtle about connecting Facebook to the groups doing the work, could be a model for other corporate 'story' videos.

Facebook Stories microsite

Facebook Stories microsite

Overall, we were struck by the imbalance between how frustrating it can be to find specific information on the estate, and then being impressed by the abundance and detail when we got to the right places. It is a good thing for Facebook, given how frustrating our journeys were, that the estate tested very well for visibility on search engines. Users starting from the home page could struggle, for example, to find the links for journalists, investors or sustainability, but putting these terms into Google returned the exact destination at the top of the results every time. 

- Jason Sumner

Exxon in Wonderland

ExxonMobil's corporate site is really good in some ways - but its navigation is as insane as ever

I have been diving again into the wonderful world of Exxonmobil.com. This is a site I have been baffled by in the past, and my latest look – to update the review in our database – has failed to unbaffle me.

But when I say wonderful, I’m not being ironic. In three areas the site shines. First, it is good looking. Energy should be a great source of dramatic images, and here it is. Look for example at the waterfall on the Water landing page under Current issues. Not big, but nice.

Second, it is exceptionally well written. The  language is crystal clear – even where the subjects are potentially dull, clarity should keep you reading. The way pages are laid out help. With text well spaced, short paragraphs and plenty of bullet points, this is textbook ‘web writing’.

Third, there is lots here - great detail in places, and also notably assertive commentary. 

Linked to that last point, there has been a surge in the company's efforts to get its viewpoint across on controversial subjects. It's well known that ExxonMobil is not first among its peers when it comes to flying the climate change flag. It did not sign up to the recent agreement by other oil majors. But it is trying to use its site (the obvious place to get complex points of view across) to explain what is believes and what it is doing. The home page now has seven panels in view without scrolling (hurrah!): one with its ‘perspectives on climate change’, two on carbon capture, and others on the environment. Only one, on Liquefied Natural Gas, does not have a ‘we are responsible’ message behind it.

The problem is that it is failing to get these views across – or indeed serving any of its audiences well – because the way the site works is little short of insane. I have been trying to work it out, and below I’ll try to explain what may be happening. But for unfortunate visitors trying to find their way around, ExxonMobil.com is Alice in Wonderland rewritten by an out of control machine. If they built refineries like this … well, I hope they don’t.

To illustrate, I tried to investigate ExxonMobil’s thoughts on climate. I could have clicked the ‘perspectives on climate change’ link on the home page, but for a more general view I went for Climate, a link under Current Issues in the dropdown panel (the main navigation device).

This took me not to the main climate page but to the ‘perspectives on climate change’ bit of it (first confusion). To get to the main page I clicked ‘Climate’ on the breadcrumb trail (hurrah, I thought, there is one). This took me to a nice picture of a field, a single sentence and six menu items, each with a number in brackets (parentheses) after it. The number by each link was one, except for ‘ExxonMobil's perspectives on climate change’ which had 44. What's that about?

Anyway, I went to the perspectives page and found a panel at the top with a clear intro sentence followed by four links, the top one being Our position on climate change. I clicked this and came to a concise explanation of the company’s position. Climate change is real, ExxonMobil is doing its best internally and by trying to help its customers, but balancing all the interests is very tricky. 

But that was all. Below was a panel headed ‘You may also be interested in’  listing two other pages: ‘Encouraging greenhouse gas emissions reductions through responsible use of our products’, and ‘Mitigating greenhouse gas emissions within our own operations’. I clicked them. 

Both pages were long but clear, explaining in some detail what ExxonMobil is doing. A neat (if slightly confusing) device is a 'menu' to the right that both shows which section you are in on the page, and lets you jump to the others.

So I had finally got to two hard bits of editorial. I guessed there must be more; perhaps it was on the '44' page? Unfortunately the breadcrumb trail was no use (it simply had 'Climate', and the name of the current page) so I hit the back button until I found my way to the perspectives on climate change page.

And here, once I had started scrolling, I did indeed find so much more. Somewhere between 40 and 50 links; 44 maybe? Though it was hard to count them accurately because some were duplicated. ‘Our position on climate change' appeared three times, for example.

The similarity between links titles - and their lack of accuracy - made life even more interesting. 'Lowering emissions' would seem to be a good sub-section heading that would encompass several of the other pages listed in the 44 links, but instead went to a specific page within The Outlook for energy: A view to 2040. But the near-identical 'Reducing emissions' - a link in the dropdown menu under Current issues - led to the page explaining the company's efforts to cut its own greenhouse gases.

The Outlook for energy section illustrated illustrated the hopelessness of the affair. Its landing page had a battery of parenthetical numbers. I copped out and clicked the one that let me download the report. This 80 page PDF was, I discovered, much easier to to use than its web counterpart.

So, the detailed problems I came across were:

  • The numbers in brackets are unfamiliar, unexplained and as far as I can see, unnecessary.
  • There is little prioritisation on the page, and an apparent assumption that visitors will scroll down long pages to find what they want (Jakob Nielsen has demonstrated this is not so).
  • Labelling is often ambiguous and vague.  I may not have clicked on ‘Our position on climate change’ if it had been more precise: for example ‘Statement on climate change’. ‘Lowering emissions’ and ‘Reducing emissions’ are both too similar and neither describes its target page well.
  • Some links are wrongly directed (like the Climate link).
  • The breadcrumb trail is neither consistent nor comprehensive.

Behind these lies a larger problem. The site appears at first to be built using hierarchies, and the URLs suggest they exist (as do the breadcrumb trails), but it comes across as being close to unstructured. I suspect this is because the mechanism (CMS) is ruling the operators - why else would there be numbers in brackets? - and that they are unwilling or unable to counter its inflexibility. We know there are clever humans there - they are doing all those lovely words and pictures. Now they need to get to grips with the mad machine. 

- David Bowen

BC tip: The Pool - Calling time

Does stating how long it will take to read online articles make for more ‘engaged’ readers?

The Feature

The Pool, an online magazine aimed at women that was launched last year, puts labels on all of its stories and videos saying how long they will take to consume.

Subject feeds, under ‘News & Views’ and ‘Fashion’ for example, promote articles with a headline, summary and a circle saying ‘1 min’, ‘2 min’ etc. The articles themselves have these circular signposts as part of their headings, sometimes appearing right under the title. The drop-down panels in the primary navigation also use the device for featured stories.

The Takeaway

We can see the appeal of signposting reading or viewing times for online stories, where attention is scarce and infinite scrolling automatically invites the question – ‘when will I get to the bottom?’ The scroll bar used on most sites does the same thing but less explicitly. As a reader, there is a comfort in knowing ahead of time how long it might take to get through a piece.

Time stamps could be appealing in a corporate context (and we have seen at least one corporate online magazine using them). However, clicking around the Pool even briefly, all of the signposts can start to make the site appear unduly preoccupied with time, although this may play into the brand’s attraction for a ‘busy’ audience.

The precise timings, 1 minute, 2 minutes, 23 minutes, etc, invites the cynic to ask who is the presumably ‘average’ reader on which the measurements are based; maybe better to be more vague – ‘short’, ‘long’, or time ranges. Used sparingly and in the right context, it can’t be a bad thing to let people know a rough idea of the time investment before they click.

https://www.the-pool.com/

Fashion and good navigation can work together. Maybe.

Anyone who follows our thoughts will know that we’re not big fans of the current trend towards minimalist navigation on corporate websites. We can see the attraction of clearing left menus out of the way, and for simple sites it’s quite fine – but for more complex ones usability always suffers. Or at least it has everywhere we have looked. Apologies if you’re bored with the whole subject, but there may be a way out.

The trend is overwhelming. A few sites have relaunched in the last couple of years with left nav – BP, Total, NovoNordisk come to mind – but they are many times outnumbered by those that have taken the minimalist route. While we would be quite happy if everyone headed back to menu-land, that isn’t going to happen. So let’s keep looking for a compromise.

We have an expression – the navigation challenge – that is all about finding that compromise. Can anyone create a complex site that mixes top usability with ‘no left nav’ on a full size screen (the sort used by most visitors to corporate sites)? We run tests with realistic journeys. For example a jobseeker in the careers section checking out a company’s environmental credentials and history. Or a financial journalist looking first at quarterly results, then the annual report, then the latest press releases. These require horizontal movement, perhaps deep within the site. And that’s tricky when you have got rid of a nicely visible set of links alongside the page.

A few companies do not acknowledge the problem. ExxonMobil makes you click and scroll like anything, especially in an area like Investors that does not have a dropdown menu. But most make at least some effort to tackle it. Big dropdown panels are the most common technique – the best, as used by Barclays, allow you to drill down into the site; and so by extension move across it when you are already deep in it. But you always have to click again to see the panel, and unless there is a breadcrumb trail as well, you cannot see easily where you are. Shell does have a trail, but the panel only goes down one level, so it is hard to avoid scrolling and scanning to move around. A fashionable spin on this is to have a mobile-style ‘hamburger’ menu to display a panel – though I don’t really understand this as it removes the option of having a different panel for each main link.

Other ideas have surfaced. Daimler uses the hamburger thing, but also changes the top menu as you move from the first to the second level: it could be clever, but I find it more confusing than anything. Qualcomm and ABB both use narrow strips down the left – click on different elements and panels pop out with more options. These look elegant, but have the same disadvantage as dropdown panels – you have to click them each time you want to do something.

Then last week we wrote up a particularly promising one in a BC Tip: Verizon’s ‘triple deck’ approach. Double deck menu bars used to be fairly widespread in the old days, though always in combination with a left menu – they were one way of keeping that menu shorter on a deep site. But the triple decker approach is designed to replace a left menu, and it works pretty well – the top two menus are in view when you are at the second or third level, so you can get around a fair bit without having to open up a new menu. But the third level menu does not stay in place when you are looking at a page down there – see for example the quarterly results page. That’s a drawback.

So can there be an answer to the navigation challenge? I think the Verizon approach could come close, with a bit of modification: keep all decks of the menu in view at lower levels, squeeze them together to free up viewable space. Maybe add a fourth deck. ‘Stick’ the menu to the top of the screen. If the links being used are highlighted, you will have a de facto breadcrumb trail. Then see how easy it is to move around. Of course minimalist purists will scoff because lots of links will be in view. Let them I say: it’s the users I care about.

Not all fashion is bad

We may not like what’s going on in navigation, but a trend we do rather like is for ‘looping videos’, particularly on home pages. They bring gentle life to what can otherwise be rather dull pictures – JK Rowling thought them up for her Daily Prophet newspaper, but here they are flourishing on Muggle websites. We wrote about some of them last year and were not enthusiastic, saying that ‘they can be headache-inducing’. But we were talking then about the very short, and thus inevitably dull, Vine videos – seeing the same thing again every six seconds is likely to have you reaching for an aspirin.

But the new generation videos are longer and subtler, with ‘joins’ that are hard to spot. There are several, stacked, on the home page of Verizon’s corporate site: the drone at the top is fun, though I think the low profile videos of kids in a classroom, or even a lady whose head moves a little, work particularly well. If you want more examples, try TNO, Siemens’ current home page, and Tetrapak’s innovation section. There will surely be more; no aspirin needed. 

David Bowen

BC tip: Verizon - Tripling up to crack the navigation challenge

The US telecommunications giant does better than most in making up for the lack of a left menu.

The Feature

Verizon’s corporate information section, which is linked from the customer-facing site, has been relaunched with a new look and feel. As part of this it has adopted a ‘triple decker’ navigation system. There is no left menu, but parallel menus at the top provide routes to the third level of content easily. For example, mousing over Investors in the top menu reveals a menu below it with five links, including Financial Reporting. Mousing over this shows another six, such as Quarterly Earnings and Annual Reports. When one is on a second or third level page, the two top menus are in permanent view, so one can get directly to the other main sections of investors.

The Takeaway

Ever since a desire to create more space for visible content persuaded web builders and managers to dispense with left menus, they have struggled to regain the usability that has inevitably been lost. The particular problem is with moving horizontally deep within a site: we call this the navigation challenge, and have yet to see anyone cracking it fully.  

Verizon does better than most. It gives easy access to the third layer of pages, and has one advantage over its nearest parallel – the dropdown mega-panel – in that the top two levels of menus are in view. No extra click or hovering needed. It would be easier still if the third menu were also in view when at that level, but we’d guess it has been decided that would take up too much space. The answer could be to close the menus up a bit – and to add a breadcrumb trail for extra help. The question about how to handle lower level navigation is left hanging. But in areas where the full width page really does help – such as Careers > Working here – this is best answer to the ‘challenge’ we have seen for a while.

http://www.verizon.com/about/

BC tip: Honeywell - Innovation without usability

The US manufacturing conglomerate’s online newsroom shows the perils of prioritising visual and technical innovation while forgetting basic usability.

The Site

Honeywell’s online newsroom has a mega menu of filters organizing content according to four categories – industry, topic, region and ‘media type’ (fact sheets, infographics, photos, etc), and a number of sub-categories.

The responsive newsroom landing page has several image panels promoting stories. Clicking on the filter button opens a mega panel that takes up the entire screen on a standard desktop monitor (and pushes the image panels further down the page). Clicking on a sub-category in the filter menu changes the panels. If there are no stories in a given sub-category, a message says ‘No results found.’

The Takeaway

The visual presentation of the filter is innovative, but journalists – who are notably impatient – will likely be frustrated with basic usability problems. When there are results to show, it is not obvious how to view them (users must scroll down and recall whether the set of panels are the same or not). We had to click the filter twice to make sure a new set of panels was being displayed.

When there are no results – eg, when clicking ‘Media Statement’ – seeing the ‘No results found’ message also requires scrolling. It was also not clear why there are no results for media statements, when there is a separate section on the website populated with statements.

The tool is a near miss – almost splendid, but confusing labelling, poor usability and incomplete tagging let it down.

www.honeywell.com/newsroom


BC tip: Solvay - Moving between countries

A consistent link and user-friendly menu make it easy to move between country sites.

The Site

Solvay, the Belgian chemicals maker, has a ‘Change country’ menu in the top right of every page in its main web estate.

Clicking on the menu calls up an overlay panel that lists country options alphabetical lists under four continents – EMEA, Asia Pacific, Latin America and North America. Language options for each country site are signposted via simple links next to each country. The global site is included in the menu.

The Takeaway

Solvay's approach to the signposting of and movement around country sites is exemplary. The link to change countries is consistently located across the estate – in the top right utility menu of all country sites. The simple alphabetical lists by continent are easy to scan.

Country flags are intelligently used. In the menu, flag thumbnails aid scanning. Each country site also includes a well-positioned country identifier and prominent flag icon, which helps visitors to see quickly where they are, despite the fact most country sites look almost exactly the same at first glance.

Many companies struggle to achieve this level of consistency. The fact Solvay has done it suggests the company has achieved strong central governance.

www.solvay.com


The word is greater than the film

We recently tweeted a link to an interesting piece of market research from Addison Group on the things journalists most want on a corporate website. One of them is video transcripts - most journalists don't have time to watch the videos themselves, but they do want to pick out quotes. That reminded me of something a former financial analysts told us the other day - that he didn't watch webcasts but did scan the transcripts. This implies that transcripts are not just a useful extra (and good for accessibility), they may actually be more important than the video itself. Which of course leads to the question, should you just publish the transcript and forget the video? Brave, but not necessarily that stupid.

David Bowen


BC tip - John Lewis: Job hunt

A UK retailer’s online job search does its best to hide the results.

The Site

The vacancy search engine on the John Lewis careers microsite has five filters – for divisions, job type, region, etc and a keyword search box. Next to the filters is a long text column that extends below the scroll line on a standard desktop monitor, with an introduction explaining that the engine covers jobs across the retail group, including supermarkets, motorway services shops and the head office; a phishing scam warning; and further notes about how to apply and sign up for alerts.

When jobseekers fill in the filters and press ‘search’, the page reloads but it is not immediately clear that any results have been returned. Only when scrolling all the way to the bottom of the page – underneath the warnings and notes – will users discover a series of panels describing the company’s current vacancies. On a smartphone screen, the results also appear at the bottom of the page.

The Takeaway

The John Lewis job search engine takes the assumption that ‘people will scroll’ to new limits.

In our tests we initially thought the tool was not working. There are no instructions to scroll down the page to find the results, and visitors are simply left to hunt for them. The page design does not help matters; the filters and text are on a grey background, which switches to white for the vacancies, making the section look like a footer.

Even jobseekers who eventually find the results listing will be frustrated; others may just give up.

http://jlpjobs.com/search-jobs


Jakob Nielsen tells it like it is

Anyone who follows our thoughts will know we are not keen on hidden navigation on corporate sites. We believe this is a trend that has made life more difficult for users and the possible benefits - in terms of a 'cleaner' look - just don't compensate. Our conclusions come from our own extensive testing, but is always nice when a large scale study comes up with the same ideas. That is what Jakob Nielsen's lot have done, and they are well know for doing things thoroughly.

The result is summed up when they say 'Hidden navigation provides worse user experience than visible or partially visible navigation.' Another point that echoes our cries is 'Responsive design has many merits; however, one of its less fortunate effects has been an excessive popularity of mobile-first designs that translate poorly on to larger desktop screens'. This last is particularly relevant for corporate sites which, we know from our data, are mainly viewed on desktop or laptop computers. 

Read the Nielsen Norman article here

Here is a piece I wrote explaining why corporate sites are like Brussel sprouts (there is a link, honest). 


 

 

BC tip - The Hillary Clinton campaign: Designer subtitles

A US political video gets its message across to viewers who have their sound turned off.

 

The Site

The creators of a YouTube film of President Barack Obama endorsing fellow Democrat Hillary Clinton have made subtitles an integral part of the design.

As Obama speaks to camera, his words appear in different places on the screen, and in varying font sizes; larger fonts are used for points the Clinton campaign wants to emphasise.

The Takeaway

A problem with video online is that so many people cannot listen to the audio because they are in an office, on a train, etc. On Facebook and Twitter, videos start playing with the audio switched off as the default.

The producers of this slick video of Obama endorsing Clinton for president seem to understand this - and have made ‘mega subtitles’ an key part of the film, rather than a small-text, crude-font bolt-on.

This means that the video gets its messages across whether viewers have their sound off or on, a potential lesson for companies looking to use video effectively on their online channels.

https://www.youtube.com/watch?v=S9W0F2mz1jc


BC tip - William Hill: Gambling on a grid

A UK betting company’s home page overwhelms visitors with image panels.

The Site

William Hill’s corporate website home page has a series of image panels below the scroll line, with the invitation to ‘explore’ the company’s press releases, corporate announcements, features, etc.

On a standard desktop monitor, the image panels are arranged in a three-column grid, collapsing to a single column when the responsive site adjusts to a smartphone screen. A filter lets visitors select categories such as Financials, News and media, Responsibility, Innovation and About William Hill.

The Takeaway

The topic grid, which appears to be modelled on news sites such as the BBC, misjudges how corporate website visitors find information. Some corporate audiences, such as analysts, want direct routes to the pieces of information that they need, and will use the primary navigation. Pushing corporate messages to them in a complicated grid below the scroll line is unlikely to work.

Even corporate website audiences with more time to explore and get to know the company, such as jobseekers, are unlikely to be impressed. The grid is below the scroll line, making it harder to see; the number of panels is overwhelming and not differentiated enough; and the headlines are uninteresting, based on internal categories such as ‘media releases’ rather than things audiences will be interested in.

News sites can get away with panel grids because visitors come there expecting to browse; corporate websites need to be more creative to draw people in.

www.williamhillplc.com