|
I am using Mobiscroll jQuery plugin for a web page I am designing. However it does not blend nicely with the template I use so I had to make some major changes to it. I have removed any background colour it had, but this gave me a drawback; the fact that now all options have same transparency. However, with the use of borders, I believe that you may still understand where you should place your choice. (in the middle, between the borders!) Is this a suitable compromise for me to go with? |
|||||
|
|
I fear that this design will in many cases lead to a "trial and error" approach from the user to get the grips with your version of the control. Ok, when comparing the two above it's easy enough to draw the conclusion that it's the middle option that is the selected one in both cases. But I would say that it's because you unconsciously project the same affordance pattern that's in the original plugin to your solution. And thereby you're aided in understanding how to interact with your solution. I would think that your solution on its own would leave many users clueless of what the current settings actually are. The visual presentation could just as well mean that you're specifying a range rather than a specific value. In addition to this it's not clear that there are more values outside the displayed range, something that the original plugin conveys with its graded transparency of the outer values. You should look for some additional way to communicate to the user which option is selected in the control and that more values are currently hidden outside the displayed range. And this is, to my experience, best communicated by fading the values that are next to the selected one. |
|||
|
|
|
Just use a CSS Text Gradient effect to keep the "slot machine" style 3D effect on the numbers, which helps the digital spinner keep an affordance similar to the skeuomorphic shadowing on the iOS spinners. Applying the gradient on the text means the effect will remain no matter what the background is. It's not IE6 compatible but....progressive enhancement and all that. I don't see any need to throw away the gradient effect; just make sure your gradient looks readable/not ridiculous on the background you've chosen. |
|||
|
|
|
I would restore some of the transparency on the top and bottom values that are not selected. That would restore the rounded scroller effect and better convey what options are selected. |
|||
|
|
|
If you can't do transparency, change the colour of the selection. Or rather than a line above/below, outline it in a box so it's clear that it's different than the others. Something needs to clearly identify that the middle item is DIFFERENT, and thus, selected. |
|||
|
|
