4 ms·

This project looks awesome. This stuff is annoying to have to replicate yourself, and I'm glad to see MooTools support as well. That said, my first reaction wh

This project looks awesome. This stuff is annoying to have to replicate yourself, and I'm glad to see MooTools support as well. That said, my first reaction when looking at the first Country dropdown example was that I liked the native one better since in OS X it shows me dozens of choices at once (fills most of the screen vertically) and then in the "after" suddenly I was constrained to only seeing 7 countries at a time. Not a huge deal but felt like a loss in usability (but a gain visually). If the faux dropdown was just a little taller in height it'd be better. Secondly, this just killed iPhone support. Apple did a good job with <select>s on iOS and this completely breaks it. It should just turn itself off on iOS.

jsavimbi 15y ago
> Apple did a good job with <select>s on iOS and this completely breaks it. Agreed. Also, when a user has to access both your desktop and mobile apps, the experience has to be the same. This plugin, however nice, is trying to solve a problem by further modifying the problematic feature. Just remove the select if your list is too long; there should really only be a handful of options contained within. As a rule, I keep it to five and I never replace the pseudo element with plugins.
- smunz 15y ago
  Interesting statement! What would you suggest as a replacment for long option lists? Autocomplete?
  - jsavimbi 15y ago
    No, there is no conventional standard for auto-complete and you would have to be able to determine whether or not the user was actually trying to employ a/c functionality versus typing a term that they've already brought to the forefront of their action. Auto-complete interrupts this mental workflow and affects the UX in a negative manner. It's like continuously prompting a person who has difficulty with stuttering. After awhile they'll find you too difficult to talk to and go back to drinking beer and watching TV. One aside is the convention of time/date/location that you'll find everywhere. For whatever reason someone needs to capture the information from the Andorrans to the inhabitants of Wallis and Futuna. I can't fight people that include over 200 options for countries and territories when this info could be ascertained and captured via other methods, but people already have a mental map of where their options are in these lists, so if you really need to, then go ahead. iOS has the best solution for this. Also, a select is a part of CRUD, so please don't use it for navigation. The solution that I like to employ is an unordered HTML list, with the items bricked in equal size, separated uniformly right and bottom and floated left. You can see this when you look at Google+'s circles. The user knows to read from left to right (assuming western conventions) and can navigate top to bottom with the ease of the mouse without making commitments. I currently do this with a list of ~250 options and employ ajaxy magic to capture the user's actions. I assist the user by alphabetizing the list so that they'll be able to mentally map their position as well as curated and separately displaying the most popular option at the top of the list, much like US-based website will do when displaying "United States" as the first option in their select. If displaying on a mobile device, I would recommend displaying in a one-column list; if a user can navigate Twitter, they'll have no problem with scrolling down to find their selection because they've already been trained to do so and it'll come as second nature. (which is why is good practice to adopt conventions from popular applications. Why fight it?) Another option that I've found helpful i to employ pathways when too many options with similar names can cloud the user's mental map. It's ok to break up a form into logical step-by-step pieces. You gain the user's trust by preempting tedious actions. Intersticial pages, not pop-ups, are ok if the user understands where you are taking them and for the tricky parts, some reassuring copy can do the trick. People read; just go through Amazon's checkout process a couple of times over the course of a week. You may forget a step, but they're right there to help you without employing navigation or CRUD devices on the screen. tl;dr: just put the options in a list as ajax buttons or checkbox-activated text. Keep it simple and organized and don't play hide and go seek with the user.
DougWebb 15y ago
It doesn't work well on Android either. The scrollbars don't appear, and unlike the normal Android behavior there is no zoom-in on the options to make them easier to select with a touch. These are probably fixable issues, but I think I agree that the device's native control is going to be better.
zuppy 15y ago
> "Apple did a good job with <select>s on iOS and this completely breaks it." It's not always the best solution. When you have a drop down with many choices it's very hard to go to a certain spot by just scrolling. On a computer, you can drag the scroll bar or start typing. Anyway, good to know that it breaks iOS.
dazmax 15y ago
The single select also cannot be reached by pressing the tab key (for me, Safari 5.0.5). When I fill out a form, my hands are on the keyboard. I tab to the country field, start typing my country to select it, and move on. So I'd say the single select is worse than native on both Safari and Mobile Safari. The multi-select is great, though. Why not make the single select work like the multiple?
- icebraining 15y ago
  Tab works as expected here in FF4.0.1, when the focus is on the normal control, I can switch to the 'enhanced' version using tab and start typing my country.

jsavimbi 15y ago

> Apple did a good job with <select>s on iOS and this completely breaks it. Agreed. Also, when a user has to access both your desktop and mobile apps, the experience has to be the same. This plugin, however nice, is trying to solve a problem by further modifying the problematic feature. Just remove the select if your list is too long; there should really only be a handful of options contained within. As a rule, I keep it to five and I never replace the pseudo element with plugins.

smunz 15y ago
Interesting statement! What would you suggest as a replacment for long option lists? Autocomplete?
- jsavimbi 15y ago
  No, there is no conventional standard for auto-complete and you would have to be able to determine whether or not the user was actually trying to employ a/c functionality versus typing a term that they've already brought to the forefront of their action. Auto-complete interrupts this mental workflow and affects the UX in a negative manner. It's like continuously prompting a person who has difficulty with stuttering. After awhile they'll find you too difficult to talk to and go back to drinking beer and watching TV. One aside is the convention of time/date/location that you'll find everywhere. For whatever reason someone needs to capture the information from the Andorrans to the inhabitants of Wallis and Futuna. I can't fight people that include over 200 options for countries and territories when this info could be ascertained and captured via other methods, but people already have a mental map of where their options are in these lists, so if you really need to, then go ahead. iOS has the best solution for this. Also, a select is a part of CRUD, so please don't use it for navigation. The solution that I like to employ is an unordered HTML list, with the items bricked in equal size, separated uniformly right and bottom and floated left. You can see this when you look at Google+'s circles. The user knows to read from left to right (assuming western conventions) and can navigate top to bottom with the ease of the mouse without making commitments. I currently do this with a list of ~250 options and employ ajaxy magic to capture the user's actions. I assist the user by alphabetizing the list so that they'll be able to mentally map their position as well as curated and separately displaying the most popular option at the top of the list, much like US-based website will do when displaying "United States" as the first option in their select. If displaying on a mobile device, I would recommend displaying in a one-column list; if a user can navigate Twitter, they'll have no problem with scrolling down to find their selection because they've already been trained to do so and it'll come as second nature. (which is why is good practice to adopt conventions from popular applications. Why fight it?) Another option that I've found helpful i to employ pathways when too many options with similar names can cloud the user's mental map. It's ok to break up a form into logical step-by-step pieces. You gain the user's trust by preempting tedious actions. Intersticial pages, not pop-ups, are ok if the user understands where you are taking them and for the tricky parts, some reassuring copy can do the trick. People read; just go through Amazon's checkout process a couple of times over the course of a week. You may forget a step, but they're right there to help you without employing navigation or CRUD devices on the screen. tl;dr: just put the options in a list as ajax buttons or checkbox-activated text. Keep it simple and organized and don't play hide and go seek with the user.

DougWebb 15y ago

It doesn't work well on Android either. The scrollbars don't appear, and unlike the normal Android behavior there is no zoom-in on the options to make them easier to select with a touch. These are probably fixable issues, but I think I agree that the device's native control is going to be better.

zuppy 15y ago

> "Apple did a good job with <select>s on iOS and this completely breaks it." It's not always the best solution. When you have a drop down with many choices it's very hard to go to a certain spot by just scrolling. On a computer, you can drag the scroll bar or start typing. Anyway, good to know that it breaks iOS.

dazmax 15y ago

The single select also cannot be reached by pressing the tab key (for me, Safari 5.0.5). When I fill out a form, my hands are on the keyboard. I tab to the country field, start typing my country to select it, and move on. So I'd say the single select is worse than native on both Safari and Mobile Safari. The multi-select is great, though. Why not make the single select work like the multiple?

icebraining 15y ago
Tab works as expected here in FF4.0.1, when the focus is on the normal control, I can switch to the 'enhanced' version using tab and start typing my country.