Mobile UI Design

I'd say I'm fairly good at making responsive designs, however, I've encountered something I've not tried before, I have to re-model a complex navigation system for a mobile phone. I was thinking about something along the lines of the overclocker.co.uk navigation system.

In mobile view all navigation is hidden unless you hit a button on the side, then the entire navigation pane stands out, you can then click on main headers and then go further down the navigation system. I haven't done a great deal of this before, and I am FAR from being a mobile UI/UX designer.

What would you guys do? - Obviously, the most simplistic idea seems to be the best in my opinion.

On desktop right now, but it sounds like you're describing this: https://tympanus.net/codrops/2013/08/13/multi-level-push-menu/. I personally really like this method of navigation for sites that have a ton of content that users need to get to up front.

Besides this method, your other option for heavy site maps is having your main navigation with top-level links, and then a sub-navigation on the relevant page. For example, say your top level is "Computers": when clicked,that would take you to the dedicated "Computers" page with a subnavigation on the side with all sub-level nav items. Imo, this isn't really as mobile friendly and can eat up a lot of screen real estate with lists of sublinks.

The main drawback to using the slideout method in the link above is not everyone catches on immediately. Think carefully about your audience before implementation. The few times I've used it I've been working with a younger target audience who understand the iconography and mobile slideouts fairly easily; if you're peddling an app to a wider market, you may need to include additional context clues via text or animations to make it usable for them.

1 Like

Sorry for the slightly late reply, I've had a busy week to say the least, but that's pretty much exactly the sorta thing that I'm looking for, thank you very much, I'm glad that I can also see the source code, I'll have a look at it and see if I can implement a fairly similar functionality.