Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

enter image description here

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.

share|improve this question
3  
Your link says 'page not found' –  ripu1581 Jan 17 '13 at 2:37
    
I think this is the one being refered to: mobile-patterns.com/picture/… –  drawtheweb Jan 17 '13 at 15:04
    
@drawtheweb your link says 'page not found' ;) –  DA01 Jan 17 '13 at 18:11
    
For some reason, that site isn't allowing direct links to images. I uploaded the image to the post itself. –  DA01 Jan 17 '13 at 18:15
1  
Nokia and most other mobile phone companies did come out with grids of icons before the iPhone. –  icc97 Jan 18 '13 at 7:15
add comment

2 Answers 2

up vote 7 down vote accepted

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.

share|improve this answer
    
I feel as well there are good amount of reasons for end users that Rdio, LinkedIn, Facebook, etc, all started with 'Springboard' navigation and have all moved towards list based Nav's @Michel-Jansen –  bijanv Jan 18 '13 at 16:03
    
@bijanv I've dealt with some design sessions with stakeholders (execs) where all IA gets forced into this springboard style nav. Perhaps that's why early versions of these apps leverage that style. "Obey investors, get more funding." –  drawtheweb Jan 22 '13 at 17:16
add comment

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).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.