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.

One of the websites that we've been working on has a dropdown with <select> having multiple <option>s. In our Windows PC, the dropdown show only a number of items while on the client's Mac, the dropdown shows all the items at once. Now I found out that nothing was wrong with it, and I believe PCs with different screen resolution render the dropdown differently. But this isn't good enough considering that the users have to scroll down through 43 to 60 items to look for their desired selection.

So I was wondering if there's a good alternative for this (that doesn't use too much scripts or asks to load extra libraries).
The following screenshots will explain better.

Windows screenshot -
1

Mac screenshot -
2

share|improve this question
    
PS: Check this link for details - webcityhome.com/client/aairportershuttle/reservation.php (On the Pickup Location, go to 'Pier' and select 'Pier no.') –  DriftingSteps Dec 12 '12 at 21:30
2  
You don't need to update the question title when you have an accepted answer - the tick against the answer provides this feedback, and the number of answers indicator on the front-screen turns green too. –  JonW Dec 13 '12 at 14:21
add comment

1 Answer

up vote 6 down vote accepted

With this issue I would suggest to always stick with the way that Safari natively renders the drop down menu. This is what Safari users are already use to, and therefore the behaviour they expect. If a user has a screen with high enough resolution to show the whole list in that manner then you are effectively saving them time from having to scroll through a list (I understand it doesn't look great).

Alternatively, and probably more appropriately, you could ask: Is a drop down menu the best tool for this job?

What about a simple text input validated to only accept numbers 1-43?

share|improve this answer
3  
I agree. You should avoid very long drop-down menus, especially when people could enter the number much, much quicker into a text field. –  Kit Grose Dec 12 '12 at 22:40
    
True, I could simply use an text input and tell the users that they can type numbers only upto 43. And every time they'd type a number higher than 43, they'd get an error message. BUT, when your client strongly asks for a dropdown menu, there's very little that we can do. By the way, is there any script/code/technique that would have a <select> with up and down arrows to increase and decrease the values and showing only 1 value at a time? Like this photoshopped screenie - prntscr.com/m11gj –  DriftingSteps Dec 12 '12 at 22:46
1  
I don't know, but it would take a long time to get to 43 with this widget and seems like an unnecessary further complication. Any scripts will just add weight and move away from what a user expects (people understand the standard browser form inputs). So I would suggest either leaving the drop box as it is with the understanding that it looks weird for high-resolution macs, or adopting a text box input –  slawrence10 Dec 12 '12 at 23:02
    
Okay, thanks for your feedback. I'll talk with the client :) –  DriftingSteps Dec 12 '12 at 23:24
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.