Thoughts on mobile 'matrix' style navigation?

Question

What I mean by 'matrix' style is something along the lines of

But could potentially be a multi-page menu as well (accessed by swiping left or right).

I feel these designs try to mimic the iOS homescreen and use that as a baseline for justification on actually implementing this.

My personal view on this is that they fail in multiple ways.

1. Due to the icons (different shapes, colours, etc), it's very very difficult to scan the nav to figure out how to get to the spot you are looking for.
2. If this is an app that isn't used on a daily basis, the menu is dictated by the app itself (vs the iOS homescreen where you organize it to your own preferences and remember them). Since you have no control over what goes where, mentally it becomes much tougher to model and remember where to go to access the menu item you are looking for.
3. If you have a lot of menu items on multiple pages, you're essentially hiding potential information from the user (though same argument could be made for other styles).

What are your thoughts on this style, good or bad points? I'm trying to relay information to clients but want to come up with solid concrete points.

Answer 1

In other areas I've often heard this referred to as Springboard navigation. The biggest benefit in using this in my opinion is that it's already a navigation pattern that most mobile users know and understand.

Pros:

• Intuitive to most users
• You can extend this pattern to add notification badges as well, something already understood by most mobile users.
• Upon device rotation to landscape, this pattern typically keeps all nav items visible.
• If consistent with your brand, the icon style can further enhance brand recognition.

Cons:

• As mentioned by OP, If you have an option heavy nav list, you might need to provide another UI cue to let users know to swipe to see more options.
• The maximum number of items you could likely fit per page 9.
• I've you're not careful with style, size and color in iconography, this could lead to more confusion with users.
• Designing great icons is REALLY hard and this can quickly burn through your budget especially if you have a lot of nav options. Some nav options are extremely difficult to represent via an icon - look at the rdio screenshot for the "heavy rotation" section. That's a bit of a stretch.

Personally, I think this nav method is a reasonably safe option to please users and stakeholders, so long as you have the design chops and budget to do it right.

Answer 2

Whether or not this pattern is appropriate or not largely depends on the information architecture of the application, specifically how many there are, how they relate to each other and how everything is organised. This article on mobile IA at UXBooth summarises the following common patterns:

• Hierarchy
• Hub & Spoke
• Nested Doll
• Tabbed View
• Bento Box / Dashboard
• Filtered View

I am not going to repeat what is already written about the individual patterns, but it's clear that this matrix/grid/springboard style navigation pattern fits best with applications that use a "Hub & Spoke" organisation. That approach in itself has various pros and cons, not in the least that in order to get from one part to another part, you probably have to go through the hub. Whether that extra step is a problem depends on lots of things, such as how frequently users are expected to do it, how separate different parts are etc.

I think this pattern was traditionally mostly useful for very limited cases where there were too many options to show in a tabbed view. Nowadays, it seems to have fallen out of grace a bit in favour of Facebook-style side navigation panels, which allow even more options to be crammed into a list (but in my opinion it's better to avoid doing that).