Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 8 down vote favorite
3

An example of this functionality can be found in this site (shrink the browser viewport to see the selectbox navigation take over.)

Is this a good practice? Wondering if anyone has any experience to back this up one way or the other.

share|improve this question
I think it depends on what you mean by "complex". The example site that you linked isn't really complex, it's one drop-down to navigate to the desired location. Do you have any more information that you can give? – ScottK Jan 9 '12 at 19:37
@gregord: If we've answered your question, you can select the best solution so that if anyone comes across the same problem in the future, they know the course of action. – dnbrv Feb 7 '12 at 18:34
android 2.x has serious bugs regarding select box use (in conjunction with absolute position and/or fixed positioned elements and/or random css3 styles) – Jamie Pate Sep 21 '12 at 17:06

2 Answers

up vote 3 down vote accepted

Yes. Drop-down is a perfectly fine way to keep navigation on top of the page while saving space with responsive mobile design. However, the standard rules of mobile design still apply. The drop-down must have a clear call-to-action associated with it indicating that it's navigation not a selector for a form and it must contain links to sections that are important to mobile user.

In your example, there's a good call to action Navigate... but the selection includes Source, which points to GitHub where no mobile version is available.

Update
Since the time of the original answer, Smashing Magazine has rolled out a new responsive design layout. In that new layout, the primary navigation bar also becomes a drop-down with the first option called Smashing Categories when screen width drops below 590px.

Update 2
CSS Tricks published the complete recipe for this approach in summer of 2011.

share|improve this answer
That example's just a drop-down list, not a combobox. Is that what you meant? – tajmo Jan 9 '12 at 19:14
Yeah. My bad. Edited. Thanks for the catch - I always mix them up. – dnbrv Jan 9 '12 at 19:26
up vote 1 down vote

I think that using a drop-down is not a great interface to use for navigation on mobile. My experience from user testing on mobile device is that people want to do very specific tasks on a mobile browser, not just casual browsing. Additionally, users are used to native apps and enjoy using the same interface on a mobile browser.

The main goal on mobile browser should be :

  • Keep the main navigation link's size to the average finger touch (from iOS it's 44px *44px).
  • Giving the user just what they want, taking away all extra images and decorations.
  • Keeping it as simple as possible, as people won't want for slow load times.

So if you are going to use the drop-down list make it little bigger and make it look tapable. Another idea is to know exactly what your user wants and just give those features in one home page and make them click which ever they want. For example: See (www.dropbox.com) on mobile.

share|improve this answer

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.