Actually now that you told me, it does make sense, in real life if there is no path you can't really use the switch. Although it might be a little confusing on a web UI because most users are used to seeing very inactive states (extremely greyed out) and lazy to think what makes sense and what doesn't.
For the inactive/disable state - perhaps make it flat with just a groove around the area? Just as if there's a filler strip inserted that plugs the recess used for moving the slider.
Nice lighting. Looks good. Only critique is how the little circular depression in the centre of the slider is not exactly vertically central. Perhaps intentional?... But I think it works better nudged down by one pixel, so it's vertically aligned on the slider toggle. Measuring 5px from the top and the bottom of the depression circle to the outer edge of the slider toggle circle.
Like the almost mechanical feel of the top version. Agree that the inactive state needs some consideration (maybe the button is 'popped in' - like the choke button on an old car). However I'd see the inactive state being driven somewhat by other UI conventions you'd plan to use on the page. From a personal perspective, I'd expect to be able to choose kidult.
I like the idea and the rendering looks good. You however might want to double check your highlight and shadow directions based on your light source – I see some inconsistencies. If the light source is directly above ( 90˚ ) then the shadow that is thrown by the switch is not correct from what I can see.
Also, the right side of the track has a edge highlight visible but not the left side. Again, this comes back to making sure you stay consistent with highlight and shadow based on your light source.
29 Responses (page 1 of 2)
Pro
Daniel Máslo
upcoming UI, what do you think?
10 months ago
Pro
Kerem Suer
I like where you're going with the lighting. I think I like the top one a little better, or are they just in different states?
10 months ago
Pro
Daniel Máslo
@Karem The bottom one should be inactive. Maybe I should use some light indicator for this.
10 months ago
Pro
Kerem Suer
Actually now that you told me, it does make sense, in real life if there is no path you can't really use the switch. Although it might be a little confusing on a web UI because most users are used to seeing very inactive states (extremely greyed out) and lazy to think what makes sense and what doesn't.
10 months ago
Pro
Chris Farina
I think a blend of both and your right there.
10 months ago
Pro
Daniel Máslo
@Karem @facecjf but I want it visible. The idea is NO rail = NO possibility to move. But I agree it shouldn't be enough. Let me think about it...
10 months ago
I like it )
10 months ago
Pro
RepixDesign
Up is better I think, because selecting the three options is more vissible. Nice Ine by the way, wanna see more ;-)
10 months ago
Pro
Daniel Máslo
@RepixDesign there will be more ;)
10 months ago
Pro
Matthew Sanders
I hate it. This is terrible. Don't use it ever. Can I have it? kthx. :)
10 months ago
Pro
Phil Lester
Loving how realistic this looks.
10 months ago
1000th viewer yay :)
On a more productive topic, I like the top but I agree that the disabled state needs to be more obvious to the user.
10 months ago
Pro
Daniel Máslo
@Matthew @Philip Thank you
@Evan I'm working on it. I will post it with another UI elements. Stay tuned :)
10 months ago
Pro
Alex Pankratov
For the inactive/disable state - perhaps make it flat with just a groove around the area? Just as if there's a filler strip inserted that plugs the recess used for moving the slider.
10 months ago
Pro
Igor Garybaldi
— Nice!
10 months ago
Pro
Rich Smith
the indent "looks" off centre. Other than that its really nice :)
10 months ago
Pro
Ralph Manning
Nice lighting. Looks good. Only critique is how the little circular depression in the centre of the slider is not exactly vertically central. Perhaps intentional?... But I think it works better nudged down by one pixel, so it's vertically aligned on the slider toggle. Measuring 5px from the top and the bottom of the depression circle to the outer edge of the slider toggle circle.
10 months ago
Pro
Daniel Máslo
@Rich @Ralph I think off-center look creates more realistic view. Just my opinion.
10 months ago
Pro
Dmitriy Chuta
nice!!
10 months ago
Pro
Diografic
Well done =)
10 months ago
very nice
10 months ago
Pro
Ran Shenberger
The shades are amazing. I really love it.
10 months ago
Like the almost mechanical feel of the top version. Agree that the inactive state needs some consideration (maybe the button is 'popped in' - like the choke button on an old car). However I'd see the inactive state being driven somewhat by other UI conventions you'd plan to use on the page. From a personal perspective, I'd expect to be able to choose kidult.
10 months ago
I like the idea and the rendering looks good. You however might want to double check your highlight and shadow directions based on your light source – I see some inconsistencies. If the light source is directly above ( 90˚ ) then the shadow that is thrown by the switch is not correct from what I can see.
Also, the right side of the track has a edge highlight visible but not the left side. Again, this comes back to making sure you stay consistent with highlight and shadow based on your light source.
Just my 2¢. Cheers.
10 months ago
Pro
Daniel Máslo
@Gody The light source should be on the left top side
10 months ago