The changing face of navigation

Dec 21, 2013

Will three lines change the way we navigate sites?

There seems to be an interesting pattern emerging as 2013 draws to a close, the acceptance of three lines () as a way to navigate not only on small screen devices, but as a way to signal primary navigation regardless of the screen that you are on.

I first noticed the introduction on Pinterest, have seen this appear on Uber, and now on Slate since their September redesign.

Pinterest and Uber have implemented it in a fairly familiar fashion. The top portion of the website still has a clear strip to separate from the content below, with the three lines being used to open up the various sections. Slate has the navigation in the top right, in a separate block, not too dissimilar to the regular content areas.

The navigation strips at the top of the Uber and Pinterest websites.
Uber and Pinterest's navigation strip

As a quick test I spoke with my father, a 76 year old, who despite his age is fairly technical. He uses Chrome as his browser, tweets, posts on Facebook, and owns both a laptop and an iPad. When I asked him about this new trend in navigation, he expressed some doubts.

‘Normal people’ will not understand to click on the three lines. People who use computers very rarely would not know what they indicated. They would just see what is on screen and would think that it is it. Three lines don’t represent anything at all.

I fear he is right. At least for a portion of the online community this icon does not represent anything to them, and although it will become more familiar in time, we are at a time where relying purely on the icon alone is not wise.

Naturally over time, and if the trend continues more people will become accustomed to navigating desktop sites in this way, learning the pattern from mobile devices. That being said, this assumes that users will be familiar with mobile patterns - something that will pass by my feature-phone operating father.

Slate’s website

Now I have no doubt that my father is not the target audience for Slate, but I fear that the icon is only one issue that users of Slate’s website will have. If you take a look at a page in greyscale then you can see the scale, layout and prominent calls to action first.

Slate website, in colour and in greyscale.
Slate website, in colour and in greyscale

It is known that there is power in using images of people looking directly at you in UX, so this element will be one which immediately draws your attention. As the navigation block and call out to an article are the same colour, they are battling for attention. Adding in the images I fear this layout is going to cause confusion for a number of visitors.

An idea would have been to design in greyscale first, see whether the functionality of the site was optimised, and then start to introduce colour.

Despite the navigation block being sticky as you scroll down the page, I don’t think the is quite ready to sit there without supporting help text, something only Uber did on the example sites I selected.

I’d be very curious to see the analytics on usage before and after the redesign.