Trying a couple toggles for a project I'm working on. Tell me your favorite!
over 1 year ago
I like the first because it doesn't feel as large and chunky as your second version but still have some reservations...
As a toggle will it only have on and off states?
If so, the first doesn't feel right because it gives me the impression it's a slider that can stop at any point. If it's truly and a 2-state toggle I'd suggest having the button element take up closer to 50% of the toggle path.
Great looking nonetheless :)
I like the first one a lot, but maybe it could use some directionality? Maybe a slight point towards the direction you're meant to slide it?
I'm not a big fan of the 2nd one because it's kind of hard to tell whether the roundtrip is activated or if it's the option you would toggle to.
@David Klawitter I see what you mean about it looking like a variable slider. Very fair point. I think I like the first one better as well, so I might try tweaking that one a bit and see what I can do to it.
super the black is the blaaack! metal haha :)
First one has a pointer which makes it more of a slider that you drag along a line of options (like a ruler for instance). The second one is a real toggle button because it features 2 options (yes/no or 1/2). Therefore I vote for number 2. Both look great.
As @EJ Fox said, the second slider type often makes it hard to distinguish between the active and inactive states. If you did want to use that variation though, you could have the active icon on the part which actually slides (currently with the three ridges), and glowing as in the first one. The inactive icon could remain light and at the other side, as it is just now (except the icons would be switched). Maybe I'd move the text out of the toggle to keep it cleaner, but that's just personal taste.
But, given the choice of what you have: definitely 2.
@Graham Macphee you guys have too many good points.. I'll be rebounding soon on what I land on.
+1 for the first slider. The second one looks nice, but the first slider is more clean and elegant feeling.
I like both, but to me the 2nd one feels like it would be more satisfying to interact with (if on a touch device)... I think it has something to do with the weight. Also, I really like how the label reveals in the slider. I guess it all depends on the rest of the app aesthetic, too...
The 1st one is prettier, but the 2nd one is more usable as it allows a bigger tap area and feels more tangible. You might want to add a label describing what the toggle controls/does since the other options is concealed and the single state isn't as descriptive on it's own. Nice work.
Both are sexy to me.
I like the top one, but the issue you get with a slider like that, is that people feel they'll have more options than just a toggle. People will expect something in between.
The second one feels more like it will only have two options. Maybe use the feeling of the first, but somehow make it clearer that it's actually a toggle and not a range slider.
9 months ago
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–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.