13

When I design websites. many time I try make the select drop-down more attractive.

example

enter image description here

By default select drop-down looks slightly different in almost each Desktop and Mobile browser

enter image description here enter image description here

but behavior on focus is different on Mobile and Desktop browsers.

enter image description here

My questions is

For better UX and Accessibility Is it good to leave Select dropdown with default style and behavior or giving different styling with help of JavaScript is OK?

Edit: Added after @Roger Attrill answer

I'm making a Web Application which will run on all possible devices. Mobile, Tablets, Desktops, Laptops. and both touch based and mouse based screens.

I seen one cons and that is the adding a JavaScript to make the custom design for dropdown. if we want consistent design in all devices. Because custom styling of Dropdown is not possible with pure CSS.

3 Answers 3

6

With all the OS based theming nowadays I would hesitate long and hard before going against the platform standards. And perhaps more specifically against the users theme of choice on that platform.

OS theming provides for a very consistent look and feel and make controls and their various states more easily recognizable for users. Don't go against it unless you have very, very good reasons to do so. In my personal opinion "attractiveness" isn't a good enough reason.

Theming also allows developers to concentrate on more functional aspects of what a control should look like. With that I mean: should a control be emphasized, should it be marked as having an error, should it hot-track (show different colors when the mouse is over it), etc. They can then simply use the theming API to tell the control to "be hot" and the theming takes care of all the outward representation of that.

4

Stick with the default themes. The exceptions when your application is deigned specifically for deep immersion (think intense games), or you're designing a custom theme for some business objective.

For example, I run windows (blush) with all the visual effects turned off. I like not having any visuals or pretty themes. Other people want a Mac look and feel, while others go to a lot of effort to set up their Linux themes in the strangest of ways - but they like it.

When you override these themes and show me what you want me to see without any further purpose, you are taking my attention to the theme and not the content of the theme.

Someone once said that the best interface is invisible.

2

Honestly, the onus is not on the developer to give everyone consistency across all platforms, because you give yourself a problem with testing, dependency, future proofing and maintenance. If cross platform consistency was the desired end goal, then the platform manufacturers would make it so. (Business goals probably muddy the waters here actually)

When you use a device, the aim is to immerse and engage the user in the experience of using that device, and part of that is down to consistency and familiarity of design and usage across different applications and services that are on that device.

You might make selection dropdowns look nice for your application, but what if everyone did that - it would be visual chaos. And then why stop at select dropdowns - where's the line to be drawn?

I'm not saying there's no room for designing apps with their own custom styles - especially for games and apps where you are further immersed (sub-immersed/submersed?) at an extra level of depth, but at the level the question is aimed at, it seems to make sense not to fiddle, unless you really have particular needs that are required by the content itself, and that are not served by the default select dropdown.

2
  • I'm making a Web Application which will run on all possible devices. Mobile, Tablets, Desktops, Laptops. and both touch based and mouse based screens. Sep 30, 2011 at 9:05
  • So given my comments above, isn't that all the more reason to let the device default to what's appropriate? Sep 30, 2011 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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