Thoughts About Responsive Navigation On Mobile Devices

Posted: 04 Dec 2014 05:30 AM PST

One of the things I think about a lot as a web designer is how to organize content and how to create navigation to it. I assume you think about it a lot as well. With every site I think about what kind of system will help visitors move about and find what they’re looking for.

Note: This post includes an audio version. If you don’t see the audio player above, Click here to listen. You can also subscribe in iTunes

A recent post by Luke Wroblewski and a podcast from this past summer featuring Luke are what led to this post. I started making notes after the podcast and the post reminded me to revisit them.

In the podcast Luke talks about designing for mobile as he often does. The post is more specifically about navigation, though the topic is in the podcast as well.

I want to think out loud a little today and talk about how I’ve designed responsive navigation up to this point and also what I think of several common responsive navigation patterns.

Thoughts of a Redesign Lead to Thoughts of Navigation

There’s actually another reason for this post now. I’ve started to think about the next design for this site. The current design is a couple years old, though for me it’s closer to three years old, since I lived with it awhile before taking it live.

Mostly I want to redevelop the site, but that’s often a good time to think about a new design. There’s also another site I’m considering launching in the hopefully not too distant future that will need a design. Both sites are leading me to think more about navigation.

I tend to change practices and explore and experiment more when I’m designing something for myself. Since it’s for me, I get to set all the constraints and make the final decision about everything. I’m also the only one at risk if I go too far.

With clients I tend more toward the tried and true. I’m more of a boring designer when it comes to client sites. Productivity calls for quicker solutions, without which I’d go out of business. It’s also not fair to push the envelope with a client site unless the client has expressly asked you too or agrees it’s right for the site.

Before Responsive Design

Before mobile devices I don’t think navigation was too difficult. For the most part it was going to be either a horizontal navigation bar across the top or a vertical menu down the left or right. Additional links might get buried in the footer. There might also be a small set of always present utility links somewhere.

The choice between horizontal and vertical was mainly about how many top level menu items you needed. If it wasn’t a lot, then horizontal navigation works well. When it was a lot, vertical navigation was the preferable option. Another consideration was whether to use drop down menus or present secondary navigation on section pages only. My preferences has usually been the latter.

Designers have certainly experimented with different navigational systems, but most sites chose horizontal or vertical and then drop downs or section menus.

Unfortunately neither works as well on small screens. At the very least larger touch targets are needed, but usually more is needed. With mobile and touch interfaces you have to rethink navigation. The patterns we adopted for wide screens don’t work well on narrow screens driven by thumb swipes and taps.

Luke Wroblewski as well as Brad Frost have collected responsive layout patterns and responsive navigation patterns in use in the wild and given them names. I assume in time most designers will settle on a couple or three of these or other patterns, though I don’t think we’re there yet.

My Current Design and the Do-Nothing Pattern

When I designed the current version of this site I used the do-nothing pattern, which means I reduced the number of links in the main navigation so they could fit across the top of a small screen. All I had to do was rearrange the layout. I dropped the navigation below the logo and was pretty much done.

It’s not the best pattern. When the redesign launched there were only four links in the main navigation, which worked fine. Now there are six, which feel more cramped in the space.

I have to admit the choice was one of convenience for me. I was still learning about responsive design and I was trying to apply what I’d learned about grids and typography to the design. I took the easy way out with the navigation.

I also didn’t give enough (or any) consideration to secondary menus. They were an after thought. When present they aren’t located well on small screens and quite honestly I don’t think they help anyone to navigate. They just aren’t that usable.

When I extend the sites I’ve built to client sites, I realize every responsive design I’ve created features either a do-nothing pattern or an off-canvas pattern. I’m not sure either is the best as is and I’ve been thinking about other patterns and what would work best for small screens.

Mobile Navigation Patterns

When I say mobile I’m really referring to phones. Tablet resolution is pretty much where we were just before responsive design came along and we were generally designing fixed-width sites.

The patterns we use for navigation on wide screens work fine at tablet sizes. We need to increase the size of touch targets and maybe when a tablet is in portrait mode the navigation needs tweaking.

Where these patterns are concerned think about using a phone with one hand and swiping and tapping with your thumb.

Tap to Show/Hide Controls/Navigation

While reading my first book on an iPad a few years ago, I noticed you could tap the screen to hide and show the controls. I have no idea if the pattern first appeared in iBooks, though it’s where I first noticed it.

I’ve always liked the pattern. I like how everything is out of the way until you want it and how a quick tap most anywhere on the screen calls the controls. Another tap or two to get to the “page” you want or to any section of the book via the table of contents or bookmarks.

Every since encountering the iBooks controls, I’ve wanted to reduce visible navigation and chrome on this site. I want to display only the content on the page and leave navigation and other secondary controls and information off screen, but only a “tap” or two away.

Most of us can’t yet tap the screens of our laptops and desktops. Some yes, but most not yet. I doubt this pattern will come to wide screen browsers anytime soon. Still my taste is calling for something like it, something where everything but the main content is hidden until requested.

This might not work for all sites, but I think text heavy sites featuring a lot of articles, like this one, are a good fit.

Off-Canvas Menus

I’m being general with this pattern and including anything where you tap (or click) something to reveal a menu. Typically you’d tap a hamburger icon or button with the word menu on it. The menu wouldn’t necessarily slide in from off-screen. It might toggle on and off in some other way.

I like how the pattern keeps navigation off screen until called for. I wish we could slide the navigation in with a gesture like swiping from the device edge, but I don’t think phone makers give us access at the moment. I know Javascript can add some gestures, but I don’t think this is one of them.

Besides it’s not a good idea to override default behavior of the device. It’ll only confuse your visitors.

Oddly enough. I’m beginning to like this pattern more on wide screens. I haven’t decided if I think it’s more usable than other patterns, but I like how it looks visually, with the navigation typically set up as a thin bar down the side until more is requested.

A couple of problems for this pattern are that visitors may not yet recognize the hamburger icon or what it’s for. This won’t last, but at the moment is true for many. More though is that the button or icon is usually located at the top of the screen, which seems to be moving further and further away from our thumbs.

Menu in Footer

Placing controls at the bottom makes them more easily reachable. I’m beginning to lean toward placing navigation here. I’m even wondering how it would work on a widescreen. How long would it take for people to get used to navigation at the bottom of their screens?

The pattern is basically a horizontal navigation bar, just one at the bottom instead of the top. Like the do-nothing pattern you’re limited in how many links or icons you can comfortably fit across the screen. Four to five is probably the maximum, especially if you increase the size of touch targets like you should.

Icons are more commonly used in native apps and I expect we’ll use them more on websites too. However, that creates a problem of people not knowing what the icon does. Tool tips can help. Experience with the site will too.

An icon to represent home is easy enough, but other sections and pages will take time to learn. To help with the limited space an icon for “more” might include links to additional pages or help documentation.

I suspect navigation in the footer will become one of the more common patterns as we get better at embracing mobile first and again I wonder if the pattern will carry over to wide screens.

In-Content Links

Not every page needs to be linked to from everywhere. For content that doesn’t need to be seen by everyone all the time, but needs to be accessible for those who want it at certain times, in-content links might be the right approach.

You provide a link at the moment when someone is most likely to want the content the link points to and you provide it in the content itself.

Scroll to Reveal

iOS safari removes navigation and controls as you begin to scroll down the page. They get hidden allowing you to see more of the content. When you start to scroll back up the controls come back. I’m not sure if browsers on Android are doing this, but I suspect they either are or will.

The first time or two I encountered it, I wondered where the controls went, but after a few times using the pattern, I realize I like it. Again it’s navigation out of the way until requested. One problem is that the controls still remain at the top of the screen.

Gesture to Reveal

I’d like to see more gestures used on websites. I find myself reaching for gestures first. I work from a laptop with a trackpad and my fingers are often on the trackpad trying to swipe or tap before trying anything else.

My preference would be to slide navigation in from the edge of the device. It feels so natural. Unfortunately I think some of the best gestures for navigation are system only and unavailable to us at the moment. Even if they were it’s not a good idea to override them as I mentioned above.

It would be nice though, if some kind of standard emerged for gestures so we could use more on websites that our visitors are probably familiar with.

We Need to Rethink Content Too

I think there’s more to this discussion than responsive navigation patterns. Navigation is really part of larger conversation about how we organize content for mobile in general. I’ll leave the larger discussion for another time.

Here I just wanted to toss out some thoughts to get me thinking more about responsive navigation and to hopefully get you thinking as well. I wasn’t trying to come to any conclusion with this post.

I don’t think as an industry we’ve yet found the “best” patterns. We have some good ideas, but the ideas still need refinement. The patterns I like for mobile navigation tend to be off-canvas, navigation at the bottom, triggered by gestures. I suspect we’ll use all three in whatever becomes a common pattern.

I think it would be great if we could somehow access the device or browser to be able to slide from the edge of device, but I’m not expecting that any time soon.

One idea that popped into mind as I’m writing is what if browsers had some kind of built in navigation for websites. We would register our navigation with browsers and they do the rest. It would get us closer to the device and serve as a bridge to it. However, it probably means leaving too much about navigation up to browser makers instead of site designers.

For now I think we should be looking to some combination of off-canvas/toggle patterns and moving our navigation to the bottom of the page. I think we can do more than we have. The industry has come up with good patterns, but we still have a way to go.

Download a free sample from my book Design Fundamentals.

The post Thoughts About Responsive Navigation On Mobile Devices appeared first on Vanseo Design.