BBC Good Food Navigation Issues

I hate cooking. I set things on fire, they end up burnt on the outside and raw on the inside, its stressful and quite frankly I’m just terrible at it.

In an attempt to get better, I’ve been collecting recipes to follow so I can impress people with my perfectly cooked macaroni cheese. The BBC GoodFood website has become invaluable to me as it has fantastic tasting (and relatively simple to make) recipes and tips about how to get better in the kitchen. When I went to it today though, I found it nearly impossible to navigate.

 

topnav

Ok so the navigation looks exactly like what I would expect to get on my phone rather than laptop but fine. Minimalist design is nice and it does mean there’s more space on the screen for pictures of food.

vertscroll

Pretty useless vertical scroll bar… and its not even the same height as my window. What’s going on there? Why is the useless scrollbar not even the same height as the element that its not being used to scroll through.

no parents

This is what the submenus look like. It contains a multitude of sins. There’s no link to its parent so you better hope you’ve not stumbled in here by accident since there’s no way out. There’s a horizontal scroll bar for… reasons. Using it lets you see a nice wee arrow indicating whether there’s another layer of submenu you could follow.

offset

Down the rabbit hole we go into “special diets”. Again, we’ve got the horizontal scroll of doom, a vertical scrollbar to scroll down the submenu’s non existent content and this time we also get to see the arrows, not of this menu’s items, but of the parent menu (the one you can’t get back up to).

blank

In a desperate bid for freedom, I tried clicking one of the arrows from the parent menu. Got this lovely blank screen.

There appears to be no way out of this so page refresh is required.

zindex

After some blind bumbling around to find what I was looking for, I came upon this (School Holidays page if anyone is interested, not that you can tell that from the navigation). Somewhere, a z-index is telling that sharing button to be above everything, so it is.

These mistakes are pretty basic if I’m honest. They should have been picked up in the testing phase of the site (or earlier). A bad navigation can lead users to feeling lost, disorientated, and ultimately frustrated with the site they are using. Frustrated users aren’t exactly likely to return to your sits or to recommend you to one of their friends. GoodFood probably won’t suffer too much at the hands of this since its already a huge site but unless this is fixed, they could find that their user bounce rate increases and return visits decrease.

It’s a disappointing offering from the BBC who are normally one of the best when it comes to designing web experiences.  BBC GoodFood have been given this feedback via email. We’ll post their response here, should one arrive.

TL:DR

The sins of the navigation include:

  • Unnecessary scroll bars (both vertical and horizontal)
    • Bad Because: Horizontal scroll bars are just irritating. There’s no need for them in a navigation
  • No breadcrumbs
    • Bad Because: You can’t tell where you are. When you’re three levels of submenu deep, you should really be able to tell how you got there
  • No indication of active page (or active section)
    • Bad Because: Again, you might be on a page which you got to via three submenus and now you want to go to another page which was also on submenu three. Good luck remembering your path there
  • No way to get out of a submenu
    • Bad Because: Users make mistakes. They get a category wrong, they accidentally click a link when they meant the one below it. Mistake recovery is very important for a users experience of your site
  • Broken areas where you get a blank screen
    • Bad Because: Well you’re now trapped there until you refresh the page.
  • Seeing elements of the parent nav screen when you’re in a submenu
    • Bad Because: This is just broken.

 

*Update*

Had a look at the site on mobile, they appear to have methods of getting back out of submenus.

mobile nav

*Update 2*

We had already sent in the feedback but its good to know that GoodFood take these things seriously.

It also looks like this problem isn’t very common, all the more reason to test Test TEST. We’re running Chrome Version 45.0.2454.85 m on Win10 64bit if anyone is interested.

 

*Update 3*

Just received an email from Sarah Lienard of the BBC thanking me for the feedback and saying they update the site regularly with user feedback. Go you BBC, keep being awesome.