I think it's too confusing currently, since there are two glyph on a switch at one time. Maybe if, on hover, the dimmed switch would display it's opposite glyph? That might make it seem a little less daunting as first. Maybe.
about 1 year ago
@Mike I think you're right.
Good to try different things. Imo this takes a little longer to understand whats going on.
Or an icon toggle. So if the feature is turned on you would get a green check block, if turned off a red x block (or grayed out check box).
Try and keep the UI consistant, the different sizes of the buttons is the main issue here.
@Daryl Ginn makes a good point. However, if you're set on keeping the buttons at different sizes, perhaps they could have a background that binds them together as one common element.
@Samuel Q Green I experimented with something like that. See here: https://layervault.com/permalink/fxB6ac64MB#10
Love the concepts. The top right feels the most natural and easiest to grok IMO.
I prefer the first one, this one is confusing, I like the simplicity of the colors though
Like it a lot!
I tried redesigning the toggle: http://cl.ly/image/3D0J2O1i3v1x This is actually a checkbox in disguise with the white spot indicating on state and it's absence the off. I would like to discuss whether this wouldn't solve the problem over using a toggle. Also, I have solely used value cues to provide the user feedback for I felt that the design doesn't warrant the use of colour. Is the red (usually used to show an adverse state) really necessary in indicating the state ?
I like where you're going with this Pranav. The colors are important to me, they help indicate state. The switch control we've been using wasn't originally designed for the mouse, and I think it can be done better as some kind of multistate button or special checkbox.
Wouldn't the red makes the user think that he made some sort of error?
No, I doubt it.
I would have to agree with @Pranav that the red plus an 'x' may indicate an error state.
have you tried maintaining the oppositely rounded corners that get created when you have a switch? by that i mean the "track" gets pointy corners because the "thumb"'s rounded corners carve into it.
now you have:
__ .... __
but a switch would have:
__ ... ___
.... \ \
ignore the periods
btw i love this kinda stuff
i love your style man!
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter