I like iOS’s switches, but I don’t like that they include text for ON and OFF (or I and O). Switches are essentially check boxes, so why not use a tick instead of ON?
Q: Why are there lots of switches, instead of just one?
A: Because life is more fun with friends.
It's pretty cool. Although I think most users don't know you can simply tap switches, instead of swiping them. And when you swipe, the text for the on state is revealed even when your finger stays on the slider dot. With your concept you can't see the tick until you've lifted your finger? Not sure if that is really a problem, just an interesting difference.
@Danny Peters Yeah, that's definitely a small loss for this idea. Although, how many people do you think slide it a little bit, then see that the switch says "ON" (or "OFF") and decide that's not what they want?
New record: 900 views in 30 minutes. And yes I keep track of all my favorite players, and pit them against each other in my own little Hunger Games in my own little mind.
@Marc Edwards ✎ Bjango Yes, you're safe.. for now, until @Eddie Lobanovskiy decides to bake some waffles again. Please make it pancakes this time, Eddie. I like me some pancakes.
Might use something like this in our next app... Thanks for the idea! :D always inspiring. It obviously helps the user know what is on and off. I believe the reasoning behind the text is "consistency" across apps settings; for some designers/devs actually do end up changing the colors (and possibly meaning of the check) which could misguide the user. Too bad they aren't done right like these!
@Charles Riccardi This is going to sound a little strange, but I built a big sheet of all the frames in Illustrator. Far easier to be precise and work quickly without the issues surrounding timeline editing. The animation is actually just the big sheet moving up the screen in Photoshop. There was some other stuff added in Photoshop, like the background, the animated noise and a bit of colour treatment.
@Adham Dannaway Yeah, definitely. That would be great. Not exactly what you're talking about, but I had another mock with X on the left. Looked a little too busy when you have a lot of them stacked though.
And... Adam Bell has built this in code. A video link is in the first post. I think he may be planning to release the source, too.
@Robert Cooper I actually had a alternate mockup with that. I think in practice it wouldn't be needed (and I was aiming for a very clean “digital native” design). If you use a similar design, feel free to add an X though.
This is really nice idea, i really dont like the text inside those buttons. But did you consider that fact iOS if basiclly system for normal ppl (not for geeks) so they might be confused without the text that the reason why it is there. I know you can place the text next to the button, but its maybe even more bad than when its in :D
1. I love the flat switches, but as @Danny Peters pointed out, your thumb would block the checkmark. A better way to go about this would be to put more emphasis on positive/negative states using color instead of symbols (I tried to do it here).
2. The size of the slider area seems a bit too long to me. Maybe it's just me, though ;)
3. If you were to stick with the checkmark, you might want to make it smaller, or make the switch and/or the handle larger. It feels cramped inside the circle right now.
28 Responses (page 1 of 2)
Pro
Marc Edwards ✎ Bjango
I like iOS’s switches, but I don’t like that they include text for ON and OFF (or I and O). Switches are essentially check boxes, so why not use a tick instead of ON?
Q: Why are there lots of switches, instead of just one?
A: Because life is more fun with friends.
––––––––––––––––––––––––––––––––––––––––––––––––––––
Update: Adam Bell (@b3ll) has built it! http://youtu.be/hZETYwBUYH8
6 months ago
Just going to sit here staring at it for a while.
6 months ago
Pro
Glenn Hitchcock
Would work well in a James Bond app.
6 months ago
Pro
Matt Kelsh
Fun. Nicely done.
6 months ago
Pro
Marc Edwards ✎ Bjango
@Glenn Hitchcock I'm *so* glad you saw that. Was definitely thinking of the Bond intros when working on it.
@Matt Kelsh Sanx.
6 months ago
It's pretty cool. Although I think most users don't know you can simply tap switches, instead of swiping them. And when you swipe, the text for the on state is revealed even when your finger stays on the slider dot. With your concept you can't see the tick until you've lifted your finger? Not sure if that is really a problem, just an interesting difference.
6 months ago
Not sure about the concept, but the animation sure is hypnotizing.
6 months ago
Pro
Marc Edwards ✎ Bjango
@Danny Peters Yeah, that's definitely a small loss for this idea. Although, how many people do you think slide it a little bit, then see that the switch says "ON" (or "OFF") and decide that's not what they want?
6 months ago
@Marc Edwards ✎ Bjango Yeah probably not many I agree.
And now that I can see the Bond reference, I dearly want it to turn red when active :)
6 months ago
New record: 900 views in 30 minutes. And yes I keep track of all my favorite players, and pit them against each other in my own little Hunger Games in my own little mind.
6 months ago
Pro
Marc Edwards ✎ Bjango
@Vaibhav So I'm not going to die... yet? That's good to know!
6 months ago
@Marc Edwards ✎ Bjango Yes, you're safe.. for now, until @Eddie Lobanovskiy decides to bake some waffles again. Please make it pancakes this time, Eddie. I like me some pancakes.
6 months ago
Pro
Mitchell Bernstein
Might use something like this in our next app... Thanks for the idea! :D always inspiring. It obviously helps the user know what is on and off. I believe the reasoning behind the text is "consistency" across apps settings; for some designers/devs actually do end up changing the colors (and possibly meaning of the check) which could misguide the user. Too bad they aren't done right like these!
6 months ago
Pro
Charles Riccardi
How was the animation done, Marc? This is awesome.
6 months ago
Pro
Marc Edwards ✎ Bjango
@Charles Riccardi This is going to sound a little strange, but I built a big sheet of all the frames in Illustrator. Far easier to be precise and work quickly without the issues surrounding timeline editing. The animation is actually just the big sheet moving up the screen in Photoshop. There was some other stuff added in Photoshop, like the background, the animated noise and a bit of colour treatment.
6 months ago
Pro
George Leonardo
Nice work!
Q: Why are there lots of switches, instead of just one?
A: To confuse my mind.
6 months ago
Pro
Charles Riccardi
@Marc Edwards ✎ Bjango Woah, that is awesome and crazy. Would love to see this massive sheet!
6 months ago
Pro
Adham Dannaway
Interesting concept, you could even use different icons on each side to toggle between two different things.
6 months ago
Pro
Marc Edwards ✎ Bjango
@Adham Dannaway Yeah, definitely. That would be great. Not exactly what you're talking about, but I had another mock with X on the left. Looked a little too busy when you have a lot of them stacked though.
And... Adam Bell has built this in code. A video link is in the first post. I think he may be planning to release the source, too.
6 months ago
Pro
Jiri Silha
Great concept
6 months ago
Pro
Robert Cooper
Why not have an 'X' on the 'OFF' side? It's tough to know whether it's on or off simply by the colour.
6 months ago
Pro
Marc Edwards ✎ Bjango
@Robert Cooper I actually had a alternate mockup with that. I think in practice it wouldn't be needed (and I was aiming for a very clean “digital native” design). If you use a similar design, feel free to add an X though.
6 months ago
Cute sequence. Great concept.
6 months ago
Pro
Luboš Volkov
This is really nice idea, i really dont like the text inside those buttons. But did you consider that fact iOS if basiclly system for normal ppl (not for geeks) so they might be confused without the text that the reason why it is there. I know you can place the text next to the button, but its maybe even more bad than when its in :D
6 months ago
You asked for some more feedback, so here goes ;)
1. I love the flat switches, but as @Danny Peters pointed out, your thumb would block the checkmark. A better way to go about this would be to put more emphasis on positive/negative states using color instead of symbols (I tried to do it here).
2. The size of the slider area seems a bit too long to me. Maybe it's just me, though ;)
3. If you were to stick with the checkmark, you might want to make it smaller, or make the switch and/or the handle larger. It feels cramped inside the circle right now.
Hope that helps! :)
6 months ago