The select menu navigation pattern
Brad Frost wrote about Responsive Navigation Patterns, Alexis Fellenius Makrigianni followed up with his thoughts. Both mention a responsive design pattern that was the subject of much debate at this month’s series of Fashionably Flexible Responsive Design Workshops in Australia — transforming a navigation lists into a select menu using scripts like TinyNav.js at small screen sizes.
In the workshops, we looked at several sites that use this select menu navigation pattern:
and Sony, who transform tabbed content modules into a select menu.
Brad lists a few more examples including Five Simple Steps. (How in the world did I miss that one?)
Select menus do free up plenty of space, we can chalk that one up to a ‘pro’, but to my mind there are just too many ‘cons’ to make using select menus for navigation an option.
Select menus simply sweep navigation issues under the rug. They don’t help solve questions such as how to handle long lists or nested sub-navigation. I suspect they’re confusing to users too. In my mind there’s only one form element that should ever be used for navigation and that’s search.
Alexis reached a similar conclusion:
My main argument against it is that it feels awkward. I don’t think form elements should be used for navigation.
Then there’s the issue of design. While iOS’ select menus keep the user somewhat connected to the page behind, Android’s overlay device makes navigation a separate layer. Window Phone 7 takes navigation out of the site and into native Metro UI, completely disconnecting the page from its navigation. When you use select menus, you put navigation design in the hands of the operating system designers.
Put all this together and using select menus for small screen navigation isn’t just a bad option, it’s a lazy one. Let’s design something better.